网站右侧返回顶部,如何做线上销售和推广,高密哪里有做网站的,网址广告前言#xff1a;哈喽#xff0c;大家好#xff0c;今天给大家分享一篇文章#xff01;并提供具体代码帮助大家深入理解#xff0c;彻底掌握#xff01;创作不易#xff0c;如果能帮助到大家或者给大家一些灵感和启发#xff0c;欢迎收藏关注哦 #x1f495; 目录 自己… 前言哈喽大家好今天给大家分享一篇文章并提供具体代码帮助大家深入理解彻底掌握创作不易如果能帮助到大家或者给大家一些灵感和启发欢迎收藏关注哦 目录 自己部署 DeepSeek 助力 Vue 开发打造丝滑的时间线Timeline 前言进入安装好的DeepSeek页面效果指令输入think代码解释使用示例组件代码 代码测试整理后主要代码定义组件 Timeline.vue 页面效果自己部署 DeepSeek 安装地址相关文章 ️✍️️️️⚠️⬇️·正文开始⬇️·✅❓ 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣*️⃣#️⃣
自己部署 DeepSeek 助力 Vue 开发打造丝滑的时间线Timeline
前言
DeepSeek即杭州深度求索人工智能基础技术研究有限公司成立于 2023 年 7 月 17 日 由知名量化资管巨头幻方量化创立。其诞生背景与当前人工智能的发展趋势紧密相关在大语言模型成为 AI 领域焦点众多企业和研究机构纷纷投入研发的大环境下幻方量化凭借自身在量化投资领域积累的技术实力和对 AI 的深刻理解决定进军通用人工智能领域DeepSeek 应运而生。
幻方量化在量化投资领域已经取得了显著成就其团队在数学模型、算法优化以及数据处理等方面具备深厚的技术功底。在量化投资过程中幻方量化积累了大量的数据处理和分析经验同时也对人工智能技术在金融领域的应用有了深入的理解和实践。这些经验和技术储备为 DeepSeek 的成立和发展奠定了坚实的基础。例如幻方量化自主研发的 “萤火一号” 集群打造出了超大规模算力底座为 DeepSeek 后续的模型训练提供了强大的算力支持。
进入安装好的DeepSeek
0基础3步部署自己的DeepSeek安装步骤 打开搭建好的DeepSeek应用。 进入应用。 页面效果 指令输入 已经创建好了一个基于Vue3的组合式API的项目并能正常运行起来请帮我用 Vue3的组合式API 生成一个 时间线Timeline 的功能组件所有代码都保存在components/Timeline 下的文件夹中。时间线Timeline的功能组件的script标签中有setup属性使用普通 JavaScript 实现,不使用TypeScript。可以垂直或水平展示。 功能要有direction指定节点水平方向排序或垂直方向排序默认为垂直方向类型是 string 可选值[vertical / horizontal],默认值 vertical[垂直方向] reverse指定节点排序方向默认为正序类型是boolean默认值 false timestamp时间戳类型 stringtype(节点类型类型 string可选值[primary / success / warning / danger / info])color(节点颜色 类型 string可选值的类型为[hsl / hsv / hex / rgb])size(节点尺寸 类型 string可选值为[normal / large默认 normal])icon(节点图标 类型 string)dot(自定义节点)。 下面是现有目录 vueAndDeepseek/ ├── src/ # 源代码目录 │ ├── assets/ # 静态资源 │ │ ├── base.css │ │ ├── main.css │ │ └── logo.svg │ ├── components/ # 组件目录 │ │ ├── HelloWorld.vue │ │ ├── TheWelcome.vue │ │ ├── WelcomeItem.vue │ │ ├── Progress/ │ │ │ └── Progress.vue │ │ ├── Accordion/ │ │ ├── Timeline/ │ │ ├── Tabs/ │ │ └── icons/ │ ├── router/ # 路由配置 │ │ └── index.js │ ├── stores/ # Pinia 状态管理 │ │ └── counter.js │ ├── views/ # 页面组件 │ │ ├── ProgressView.vue │ │ ├── TabsView.vue │ │ ├── TimelineView.vue │ │ ├── AccordionView.vue │ │ └── AboutView.vue │ ├── App.vue # 根组件 │ └── main.js # 应用入口 ├── public/ # 公共资源目录 ├── index.html # HTML 模板 ├── package.json # 项目配置 ├── vite.config.js # Vite 配置 └── node_modules/ # 依赖包目录 think 好我现在需要帮用户创建一个基于Vue3的组合式API项目生成一个时间线Timeline的功能组件保存在components/Timeline文件夹中。用户已经提供了项目的结构所以我要先理解项目的架构然后按照要求实现Timeline组件。 首先用户希望使用组合式API这意味着我应该利用Vue3的Composition API使用setup属性来编写逻辑而不是用Options API。此外用户强调使用普通JavaScript不使用TypeScript所以我要避免任何类型注释和高级JS特性。 接下来我需要分析时间线组件的功能需求。时间线需要有方向direction设置默认为垂直支持horizontal。reverse属性控制排序方向默认为false。timestamp用于自定义时间戳type决定节点类型有五种选择primary、success、warning、danger、info。color属性有四种颜色模式hsl、hsv、hex、rgb以及对应的颜色值。size有normal和large两种默认normal。icon属性允许添加图标并且还支持dot来定义自定义节点。 我需要确保组件能够垂直或水平展示所以在布局上要考虑使用Flexbox或者Grid。此外节点之间的连接线也很重要可以通过绝对定位或相对定位实现。 接下来我会规划组件的结构。从script部分开始使用setup函数初始化所有属性和方法。其中direction、reverse、timestamp都是从props中获取的需要用ref来处理初始值问题。type、color、size可以通过watcher来观察变化并触发重新渲染。icon和dot也是通过watcher处理。 然后我会构建节点数据结构每个节点包含id、type、time、content、color、icon等信息并根据direction判断排列方式。比如垂直方向上按照time排序horizontal则按时间逆序。 接下来是模板部分使用v-for遍历节点生成相应的HTML元素。每个节点包括一个背景框、内容和中间线。我需要确保线连接正确无论是垂直还是水平布局。 对于颜色处理用户提到支持hsl、hsv、hex、rgb等模式所以我可能需要根据type来设置fillStyle。但由于用户没有提供具体的实现细节我可以先用固定的color值并提供一个简单的映射方式。 同时我需要确保组件的外观美观添加一些 CSS类比如timeline-item、line、dot等。这些样式应该放在组件的style标签中以保持代码的组织。 最后用户可能希望将这个组件作为可复制粘贴到项目中的components/Timeline文件夹中所以我需要确保代码结构正确包括script和模板部分。 综上所述我会按照这些步骤编写Timeline组件确保所有功能符合用户的需求并且代码清晰、易于理解。 以下是一个基于 Vue 3 的组合式 API 实现时间线Timeline功能组件的代码示例保存在 components/Timeline 文件夹中
script setup langjs
import { ref, watch } from vue;// 组件属性定义
const props defineProps({direction: {type: String,default: vertical,required: true,},reverse: {type: Boolean,default: false,},timestamp: {type: String,required: true,},type: {type: String,validate: (value) [primary, success, warning, danger, info],},color: {type: String,validate: (value) [hsl, hsv, hex, rgb],},size: {type: String,default: normal,validate: (value) [normal, large],},icon: {type: String,},dot: {type: Function,default: () {},},// 组件方法定义
const timelineItems ref([{ id: 1, time: 2023-01-01, content: 项目开始 },{ id: 2, time: 2023-02-15, content: 开发进展 },{ id: 3, time: 2023-03-20, content: 测试完成 },{ id: 4, time: 2023-04-10, content: 上线发布 },
]);// 处理颜色变化
watch(type, () {// 根据type设置颜色示例实现
});// 处理大小变化
watch(size, () {// 根据size调整节点大小示例实现
});// 处理图标和点的自定义
watch(icon, () {// 根据icon设置图标示例实现
});// 处理时间戳
const timeValue ref(() new Date(timestamp).getTime());// 处理节点排序
const sortedItems computed(() {return [...timelineItems.value].sort((a, b) {if (reverse.value) {return b.time - a.time;} else {return a.time - b.time;}});
});return {timelineItems: sortedItems,
};
/scripttemplatediv classtimeline-container!-- 节点 --template v-for(item, index) in timelineItems :keyindexdivclasstimeline-item:classtype primary ? primary-type : div classtimeline-dot v-ifdot() /div classtimeline-contentdiv classtimestamp{{ item.time }}/divdiv classcontent{{ item.content }}/div/div!-- 连接线 --div v-ifindex ! timelineItems.length - 1 classtimeline-line //div/template/div
/templatestyle scoped
.timeline-container {display: flex;flex-direction: column;gap: 2rem;
}.timeline-item {position: relative;width: 100%;padding: 1rem;background-color: #f5f5f5;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}.timeline-dot {position: absolute;left: -7px;top: 50%;transform: translateY(-50%);width: 12px;height: 12px;background-color: #4CAF50;border-radius: 50%;
}.timestamp {font-size: 0.8rem;color: #666;
}.content {margin-top: 0.5rem;
}.timeline-line {position: absolute;right: -7px;top: 0;bottom: 0;width: 2px;background-color: #4CAF50;
}.primary-type {background-color: #e0e0e0;
}
/style代码解释 组件属性定义使用 defineProps 定义了组件的属性包括 direction、reverse、timestamp 等。 数据处理 使用 ref 和 computed 处理节点列表和排序。watch 用于监听属性变化例如颜色、大小、图标等。 组件模板通过 template 渲染时间线节点和连接线。使用了条件类和动态绑定来处理不同状态。 样式定义在 style 中定义了自定义 CSS 类确保时间线的外观美观。
使用示例
Timeline:directiondirection:reversereverse:timestamptimestamp:typetype:colorcolor:sizesize:iconicon:dotdot /将该组件在你的 Vue 项目中使用并根据需要传递属性进行自定义。
组件代码
代码测试 一点语法错误功能上面也要整理一下 整理后主要代码
定义组件 Timeline.vue
script setup
import { ref, computed } from vueconst props defineProps({direction: {type: String,default: vertical,validator: (value) [vertical, horizontal].includes(value)},reverse: {type: Boolean,default: false},timestamp: {type: String,required: true},type: {type: String,default: primary,validator: (value) [primary, success, warning, danger, info].includes(value)},color: {type: String,validator: (value) /^(#|rgb|hsl|hsv)/.test(value)},size: {type: String,default: normal,validator: (value) [normal, large].includes(value)},icon: {type: String,default: }
})const timelineItems ref([{ id: 1, timestamp: 2024-01-01, content: 项目启动, type: primary },{ id: 2, timestamp: 2024-02-15, content: 开发阶段, type: warning },{ id: 3, timestamp: 2024-03-20, content: 测试完成, type: success },{ id: 4, timestamp: 2024-04-10, content: 正式发布, type: info }
])const nodeStyle computed(() {const style {}if (props.color) {style.backgroundColor props.color}if (props.size large) {style.width 16pxstyle.height 16px}return style
})const containerClass computed(() ({timeline-container: true,is-horizontal: props.direction horizontal,is-reverse: props.reverse
}))
/scripttemplatediv :classcontainerClassdiv v-for(item, index) in timelineItems:keyitem.idclasstimeline-itemdiv classtimeline-node:class[is-${type}, size]:stylenodeStylei v-ificon :classicon/islot namedot v-else/slot/divdiv classtimeline-line:class{is-first: index 0,is-last: index timelineItems.length - 1,is-horizontal: props.direction horizontal}/divdiv classtimeline-contentdiv classtimeline-timestamp{{ timestamp }}/divdiv classtimeline-content-innerslot{{ item.content }}/slot/div/div/div/div
/templatestyle scoped
.timeline-container {position: relative;padding: 20px 0;
}.timeline-item {position: relative;display: flex;margin-bottom: 20px;
}.timeline-line {position: absolute;background-color: #E4E7ED;z-index: 1;
}.timeline-line:not(.is-horizontal) {left: 5px;top: -10px;width: 2px;height: calc(100% 20px);
}.large.timeline-line:not(.is-horizontal) {left: 7px;
}.timeline-line.is-horizontal {left: 0;top: 5px;width:100%;height: 2px;
}.timeline-line.is-first:not(.is-horizontal) {top: 0;
}.timeline-line.is-horizontal.is-first {left: 0;
}.timeline-line.is-last:not(.is-horizontal) {height: calc(50% - 10px);transform: translateY(-50%);
}.timeline-line.is-horizontal.is-last {width: 50%;transform: translateX(-100%);
}.timeline-node {position: relative;z-index: 2;width: 12px;height: 12px;border-radius: 50%;background-color: #409EFF;flex-shrink: 0;margin-right: 16px;
}.timeline-node.large {width: 16px;height: 16px;
}.timeline-node.is-primary { background-color: #409EFF; }
.timeline-node.is-success { background-color: #67C23A; }
.timeline-node.is-warning { background-color: #E6A23C; }
.timeline-node.is-danger { background-color: #F56C6C; }
.timeline-node.is-info { background-color: #909399; }.timeline-content {flex: 1;padding: 0 16px;
}.timeline-timestamp {font-size: 13px;color: #909399;margin-bottom: 8px;
}.timeline-content-inner {background-color: #F5F7FA;padding: 12px;border-radius: 4px;
}.is-horizontal {display: flex;
}.is-horizontal .timeline-item {flex-direction: column;flex: 1;padding-right: 20px;margin-bottom: 0;
}.is-reverse {flex-direction: row-reverse;
}.is-reverse .timeline-item {flex-direction: column-reverse;
}
/style页面效果 自己部署 DeepSeek 安装地址
蓝耘元生代智算云平台地址:https://cloud.lanyun.net/#/registerPage?promoterCode07100c37a0
相关文章 ———— 相 关 文 章 ———— 0基础3步部署自己的DeepSeek安装步骤 DeepSeek 助力 Vue 开发打造丝滑的步骤条 DeepSeek 助力 Vue 开发打造丝滑的进度条 自己部署 DeepSeek 助力 Vue 开发打造丝滑的标签页Tabs 自己部署 DeepSeek 助力 Vue 开发打造丝滑的折叠面板Accordion 到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章创作不易如果能帮助到大家,希望大家多多支持宝码香车~若转载本文一定注明本文链接。 更多专栏订阅推荐 htmlcssjs 绚丽效果 vue ✈️ Electron ⭐️ js 字符串 ✍️ 时间对象Date()操作
