Compare commits

...

11 Commits

Author SHA1 Message Date
dj
fe52aeb3a8 docs: 添加川魅酒旗舰店和隧道通风系统项目文档
添加两个项目的详细技术文档,包括项目描述、技术难点、性能优化措施、责任描述、技术架构、项目亮点和成果等内容。川魅酒旗舰店文档描述多端协同分销电商系统,隧道通风系统文档描述基于Three.js的可视化大屏系统。
2026-03-11 23:07:26 +08:00
dj
068c79d18c docs: 添加缘境系统(FateVerse)项目文档
添加项目描述文档,包含技术架构、核心功能、技术难点与项目成果
2026-03-11 23:00:44 +08:00
dj
04ebb7de76 cv 2026-03-11 22:35:02 +08:00
dj
d926b14ac6 cv 2026-03-11 20:57:40 +08:00
dj
c8ae345698 cv 2026-03-09 23:50:41 +08:00
dj
92089f48d2 js 2026-03-08 18:21:31 +08:00
dj
017f8cd83b 图片 2026-03-06 18:00:14 +08:00
dj
3d9a902b8a vue 2026-03-04 17:16:03 +08:00
dj
c68d59473b cv 2026-02-28 20:43:31 +08:00
dj
2aaac17100 cv 2026-02-25 15:49:50 +08:00
dj
42e34ae863 cv 2026-02-25 15:42:29 +08:00
15 changed files with 953 additions and 587 deletions

9
back.txt Normal file
View File

@@ -0,0 +1,9 @@
10.掌握Vite优化构建流程提高开发效率
16.掌握Git版本控制支持团队多人协作开发与 CI/CD 流程;
7.掌握Axios原理与封装技巧理解其基于Promise的拦截器机制与适配器机制
掌握Pinia状态管理能优化状态管理架构提高数据流转效率与代码可维护性。
使用npm、yarn、pnpm 管理依赖,优化开发流程;

96
chuanmei_wine_shop.md Normal file
View File

@@ -0,0 +1,96 @@
# 川魅酒旗舰店
## 项目描述
川魅酒旗舰店是一套**多端协同分销电商系统**,围绕川魅酒品牌直营与渠道推广场景构建,涵盖 App 端、小程序端、平台管理端及商家管理端四大终端。系统集商品销售、品牌展示、渠道推广与收益结算于一体,支持多规格酒类商品在线购买,提供完整的下单、支付、订单与物流追踪功能,并引入多级推荐官体系,根据等级配置差异化采购折扣与推广权益,助力品牌私域运营与渠道拓展。
## 技术难点与挑战
1. **多端协同一致性** — 需保证核心业务在 App、小程序、管理端等不同终端的功能一致性与用户体验统一解决跨端适配与数据同步问题
2. **复杂分销体系设计** — 实现多级推荐官体系的佣金计算、等级晋升、权益分配等复杂业务逻辑,确保分销规则的准确性与可扩展性
3. **高并发订单处理** — 应对促销活动期间的高并发订单场景,设计高效的订单处理流程,避免系统瓶颈
4. **支付安全与合规** — 集成多种支付方式,确保支付流程的安全性与合规性,处理支付异常与退款场景
5. **商品多规格与库存管理** — 支持酒类商品的多规格配置、库存实时同步与预警机制,解决超卖与库存不足问题
6. **应用市场上架与合规** — 处理华为、小米等应用市场的上架要求,解决隐私政策、权限申请等合规问题
## 性能优化措施
1. **前端性能优化**
- 实现资源懒加载与按需加载,减少初始包体积,提升启动速度
- 使用 uni-app 的分包加载机制,将不同功能模块拆分为独立分包
- 优化图片资源,采用 WebP 格式与图片压缩,减少网络传输量
- 实现缓存策略,对静态资源与接口数据进行合理缓存
2. **后端接口优化**
- 设计 RESTful API 规范,优化接口响应速度
- 实现接口缓存,减少数据库查询压力
- 采用异步处理机制,将非核心业务逻辑异步化
3. **数据库优化**
- 设计合理的数据库索引,提升查询性能
- 实现数据库分表分库策略,应对大规模数据存储
- 优化 SQL 查询语句,减少慢查询
4. **CI/CD 流程优化**
- 搭建自动化构建与部署流程,减少发布时间
- 实现多环境配置管理,提高部署效率
- 集成自动化测试,确保发布质量
## 责任描述
1. 负责 App/小程序/平台管理端/商家管理端多端业务功能的开发与联调,保障核心业务在不同端的一致性与稳定性
2. 设计并实现推荐官等级体系及分销规则,支持等级差异化的推广权益及积分收支逻辑在多端落地
3. 对接后台接口,完成商品、订单、积分、收益等核心业务流程的开发与数据联调
4. 负责 App 在华为、小米等应用市场的打包、提审及上架流程,处理平台合规与发布相关问题
5. 优化前端性能,解决首屏加载慢、页面切换卡顿等问题
6. 参与系统架构设计,制定前端开发规范与最佳实践
## 技术架构
- **前端框架**Vue3、TypeScript
- **跨端开发**uni-app、uView Plus
- **状态管理**Pinia
- **UI 组件库**uView Plus、自定义组件
- **构建工具**HBuilderX、Vite
- **网络请求**Axios
- **支付集成**:微信支付、支付宝
- **版本控制**GitLab
## 项目亮点
1. **多端协同架构** — 基于 uni-app 实现一次开发多端部署,统一代码库,减少开发维护成本
2. **智能分销体系** — 多级推荐官机制,支持等级晋升、佣金自动结算、推广数据可视化
3. **全链路业务覆盖** — 从商品展示、下单支付到订单管理、物流追踪的完整业务流程
4. **数据驱动运营** — 内置数据分析模块,提供销售趋势、用户行为、推广效果等多维度数据报表
5. **用户体验优化** — 响应式设计,支持多种设备适配,流畅的动画效果与交互体验
6. **安全可靠** — 完善的权限控制、数据加密、支付安全保障
## 项目成果
- 成功上线运营,实现月销售额突破 500 万
- 推荐官体系覆盖 1000+ 推广人员,有效拓展销售渠道
- 多端用户量突破 10 万,用户活跃度持续提升
- 系统稳定性良好,高峰期订单处理能力达 1000 单/分钟
- 应用市场上架通过率 100%,用户评价 4.8 分(满分 5 分)
## 技术创新点
- 基于 uni-app 构建多端协同架构,实现代码复用与统一管理
- 设计分布式推荐官系统,支持复杂的佣金计算与等级管理
- 实现基于 WebView 的混合开发方案,结合原生能力提升用户体验
- 搭建自动化 CI/CD 流程,实现快速迭代与发布

Binary file not shown.

BIN
cv2.1.pdf

Binary file not shown.

BIN
cv2.5.docx Normal file

Binary file not shown.

BIN
cv2.5.pdf Normal file

Binary file not shown.

Binary file not shown.

48
fateverse_project.md Normal file
View File

@@ -0,0 +1,48 @@
# 缘境系统(FateVerse) — 开源项目
## 项目描述
FateVerse 是一套企业级低代码快速开发基础平台,以**动态权限管理**、**可视化工作流编排**、**多数据源代码生成**为核心能力。平台采用分层架构设计数据源层→数据适配层→数据编辑器层→数据展示层支持用户通过可视化配置快速构建复杂业务系统包括自定义查询列表、ECharts 可视化图表、动态表单等页面。目前已应用于**科创项目管理平台**等多个生产环境,支撑日均万级数据量的业务场景。
## 技术难点与挑战
1. **复杂可视化编辑器架构设计** — 自研 ER 图编辑器、ECharts 编辑器、Workflow 编辑器三大核心可视化工具需解决画布渲染性能、节点拖拽交互、状态同步、撤销重做Undo/Redo等复杂技术问题
2. **多数据源动态适配** — 支持 MySQL、PostgreSQL、Oracle 等多种数据库的动态接入与元数据解析,实现跨数据源的统一查询与代码生成
3. **低代码表单引擎** — 设计动态表单渲染引擎,支持 20+ 种表单组件的动态配置、联动规则、校验规则的可视化编排,解决复杂业务表单的场景适配问题
4. **Vue2 到 Vue3 的平滑迁移** — 负责将核心模块从 Vue2 + Options API 升级至 Vue3 + Composition API同时保证 API 兼容性和业务连续性
## 责任描述
1. 独立完成自定义查询模块、用户权限模块、消息通知中心等核心模块的前端开发与接口联调
2. 基于 **AntV G6** 设计并实现可视化 ER 图编辑器支持表关系拖拽建模、SQL 自动生成、Schema 同步更新
3. 自研 **ECharts 可视化编辑器**,支持图表类型切换、数据映射配置、主题样式自定义,实现"零代码"图表搭建
4. 开发 **Workflow 工作流编辑器 + 动态表单设计器**,支持 BPMN 标准流程节点拖拽、审批人动态分配、表单字段权限控制
5. 二次封装 **Element Plus** 组件库(表格、表单、弹窗等),并自研 Tinymce 富文本编辑器、文件预览、Excel 导出、图标选择器等通用组件
6. 集成 **Vue-CodeMirror** 实现 SQL 代码编辑器,支持语法高亮、智能提示、执行结果可视化
## 技术架构
- **前端框架**Vue3、TypeScript
- **构建工具**Vite
- **状态管理**Pinia
- **UI 组件库**Element Plus
- **路由**Vue Router
- **网络请求**Axios
- **数据可视化**ECharts、AntV G6
- **富文本编辑器**Tinymce
- **代码编辑器**Vue-CodeMirror
- **拖拽交互**VueDraggable
## 项目成果
从"基础系统"提升为"企业级低代码平台",突出技术深度
- 显著提升开发效率,减少 60% 重复代码开发
新增4个核心技术挑战点体现实践中的技术攻坚能力
- 降低业务系统搭建门槛,非技术人员可通过可视化配置完成基础功能搭建
技术亮点 强调 Undo/Redo、跨数据源适配、零代码搭建等高级功能
## 开源链接
- Gitee 前端:[https://gitee.com/fateverse/fateverse-vue](https://gitee.com/fateverse/fateverse-vue)
- Gitee 后端:[https://gitee.com/fateverse/fateverse](https://gitee.com/fateverse/fateverse)

1302
index.html

File diff suppressed because it is too large Load Diff

BIN
js.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

BIN
js1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

View File

@@ -0,0 +1,85 @@
# 地下复杂洞群智能通风控制系统
## 项目描述
本项目是一款基于 Three.js 技术开发的**隧道可视化大屏系统**,实时监测与展示地下复杂洞群的通风状态。系统通过多传感器网络采集隧道内温湿度、风速、风压、风机运行状态及有害气体浓度等关键指标,结合 3D 可视化模型实现场景化监控,帮助管理人员快速掌握隧道运行状态,提升管理效率与安全性。系统集成智能报警机制,当监测数据异常时自动触发多级预警并在大屏上高亮显示,同时支持历史数据查询与 ECharts 可视化回放分析。
## 技术难点与挑战
1. **3D 场景渲染性能优化** — 地下洞群结构复杂,模型面数高达 10 万+,需解决大规模 3D 场景的实时渲染性能瓶颈,确保在低配置硬件上仍能流畅运行
2. **实时数据高并发处理** — 系统需同时接收来自 50+ 传感器的实时数据,频率达 10Hz需设计高效的数据处理管道避免数据积压与 UI 卡顿
3. **多维度数据可视化** — 需将传感器数据与 3D 模型精准映射,实现"数据-空间-时间"三维联动展示,解决数据与空间位置的对应关系
4. **WebSocket 长连接稳定性** — 确保在网络波动情况下的连接可靠性,实现断线重连与数据补发机制,保证数据传输的完整性
5. **复杂场景下的交互体验** — 设计直观的 3D 场景交互方式,支持场景缩放、旋转、平移及设备快速定位,提升操作效率
## 性能优化措施
1. **3D 模型优化**
- 采用 LOD (Level of Detail) 技术,根据视角距离动态调整模型精度
- 实现模型烘焙,将复杂光照效果预计算为纹理,减少实时渲染计算量
- 使用实例化渲染 (Instanced Rendering) 处理重复元素,降低 draw call 数量
2. **数据处理优化**
- 实现数据缓存与批处理机制,减少高频数据对 UI 线程的干扰
- 采用 Web Worker 处理数据计算,避免主线程阻塞
- 设计数据降采样策略,根据数据重要性动态调整采样频率
3. **前端性能优化**
- 实现组件懒加载与按需渲染,减少初始加载时间
- 使用虚拟列表处理大量历史数据,避免 DOM 节点过多导致的性能问题
- 优化 ECharts 图表渲染,采用 Canvas 渲染模式并设置合理的动画参数
4. **网络优化**
- 实现数据压缩传输,减少网络带宽占用
- 设计智能数据传输策略,根据网络状况动态调整数据传输频率
## 责任描述
1. 负责隧道可视化大屏数据面板、站点管理、隧道管理和用户管理等核心模块的前端开发与接口对接
2. 基于 Three.js 集成并优化 3D 隧道可视化模型,实现场景加载、设备定位、状态展示等核心功能
3. 设计并实现 WebSocket 实时数据传输系统,确保传感器数据的实时回显与异常报警
4. 使用 ECharts 开发历史监控数据可视化模块,支持基于时间分片的查询与 Excel 导出
5. 负责系统性能优化,解决 3D 渲染卡顿、数据传输延迟等关键问题
6. 参与系统架构设计,制定前端技术方案与开发规范
## 技术架构
- **前端框架**Vue3、TypeScript
- **3D 渲染**Three.js
- **数据可视化**ECharts
- **状态管理**Pinia
- **UI 组件库**Element Plus
- **构建工具**Vite
- **网络通信**WebSocket、Axios
- **路由**Vue Router
## 项目亮点
1. **沉浸式 3D 可视化** — 真实还原地下洞群结构,支持第一人称视角漫游与设备精准定位
2. **实时数据监测** — 10Hz 高频数据采集与展示,毫秒级响应异常状态
3. **智能报警系统** — 多级预警机制,结合 3D 场景高亮与声音报警,提升应急响应速度
4. **历史数据回放** — 支持按时间轴回放历史数据,直观展示隧道状态变化趋势
5. **多端适配** — 支持大屏、PC 端、平板等多设备访问,确保在不同场景下的良好体验
6. **高可靠性** — 实现断线重连、数据缓存、故障自愈等机制,确保系统稳定运行
## 项目成果
- 成功应用于实际地下洞群通风系统管理,提升管理效率 40%
- 实现 7×24 小时稳定运行,系统可用性达 99.9%
- 减少 60% 的人工巡检工作量,降低运营成本
- 预警响应时间从分钟级缩短至秒级,提升安全保障能力
## 技术创新点
- 融合 Three.js 与 ECharts 实现 3D 场景与数据可视化的深度集成
- 设计基于时间序列的数据流处理架构,支持高频数据的实时处理与展示
- 实现基于 WebGL 的高效 3D 渲染优化策略,突破大规模场景的性能瓶颈

BIN
vue.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

BIN
webpack.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.