docs: 添加川魅酒旗舰店和隧道通风系统项目文档

添加两个项目的详细技术文档，包括项目描述、技术难点、性能优化措施、责任描述、技术架构、项目亮点和成果等内容。川魅酒旗舰店文档描述多端协同分销电商系统，隧道通风系统文档描述基于Three.js的可视化大屏系统。

back.txt

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

chuanmei_wine_shop.md

@@ -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 流程，实现快速迭代与发布

fateverse_project.md

@@ -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)

index.html

@@ -1,10 +1,9 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
-
+  <head>
-<head>
     <title>邓洁个人简历</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script type="application/x-javascript">
       addEventListener("load", function () {
           setTimeout(hideURLbar, 0);
@@ -23,46 +22,69 @@
         s.parentNode.insertBefore(hm, s);
       })();
     </script>
-    <link href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+    <link
-    <link href="css/style.css" rel='stylesheet' type='text/css'/>
+      href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css"
-    <link rel="icon" href="./images/favicon.ico" type="image/x-icon">
+      rel="stylesheet"
-    <link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
+    />
-    <link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
+    <link href="css/style.css" rel="stylesheet" type="text/css" />
+    <link rel="icon" href="./images/favicon.ico" type="image/x-icon" />
+    <link
+      href="//fonts.googleapis.com/css?family=Ubuntu:300,400,500,700"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="//fonts.googleapis.com/css?family=Varela+Round"
+      rel="stylesheet"
+      type="text/css"
+    />
     <!-- start menu -->
-</head>
+  </head>
 
-<body>
+  <body>
-<!-- header -->
+    <!-- header -->
-<div style="display: flex;">
+    <div style="display: flex">
       <div class="sidebar">
         <div class="sidebar_top">
           <h1>邓洁</h1>
-            <img src="images/head.png" alt=""/>
+          <img src="images/head.png" alt="" />
         </div>
         <div class="details">
           <h3>手机</h3>
           <h2><p>132 8125 9620</p></h2>
           <h3>邮箱</h3>
-            <h2><p><a href="mailto:odjemail@163.com"> odjemail@163.com</a></p></h2>
+          <h2>
+            <p><a href="mailto:odjemail@163.com"> odjemail@163.com</a></p>
+          </h2>
         </div>
         <div class="clearfix"></div>
       </div>
       <div class="main">
         <div class="content">
-            <div style="width:200px;height: 100%">
+          <div style="width: 200px; height: 100%"></div>
-
-            </div>
           <div class="details_header">
             <ul>
-                    <li><a href="https://blog.odjbinail.cn"><span class="glyphicon glyphicon-tasks "
+              <li>
-                                                                  aria-hidden="true"></span>Blog</a>
+                <a href="https://blog.odjbinail.cn"
+                  ><span
+                    class="glyphicon glyphicon-tasks"
+                    aria-hidden="true"
+                  ></span
+                  >Blog</a
+                >
+              </li>
+              <!--                    <li><a href="javascript:window.print();"><span class="glyphicon glyphicon-print"-->
+              <!--                                                                   aria-hidden="true"></span>Print-->
+              <!--                        CV</a></li>-->
+              <li>
+                <a href="mailto:odjemail@163.com"
+                  ><span
+                    class="glyphicon glyphicon-envelope"
+                    aria-hidden="true"
+                  ></span
+                  >Email me</a
+                >
               </li>
-<!--                    <li><a href="javascript:window.print();"><span class="glyphicon glyphicon-print"-->
-<!--                                                                   aria-hidden="true"></span>Print-->
-<!--                        CV</a></li>-->
-                    <li><a href="mailto:odjemail@163.com"><span class="glyphicon glyphicon-envelope"
-                                                                 aria-hidden="true"></span>Email
-                        me</a></li>
             </ul>
           </div>
           <div class="item">
@@ -75,8 +97,14 @@
                 <li>学历：本科</li>
                 <li>英语：CET-4</li>
                 <li>手机：13281259620</li>
-                        <li>邮箱：<a href="mailto:odjemail@163.com">odjemail@163.com</a></li>
+                <li>
-                        <li>个人博客：<a href="https://blog.odjbinail.cn">https://blog.odjbinail.cn</a></li>
+                  邮箱：<a href="mailto:odjemail@163.com">odjemail@163.com</a>
+                </li>
+                <li>
+                  个人博客：<a href="https://blog.odjbinail.cn"
+                    >https://blog.odjbinail.cn</a
+                  >
+                </li>
               </ul>
               <div class="clearfix"></div>
             </div>
@@ -85,10 +113,15 @@
           <div class="item">
             <h3 class="clr clr5">教育背景</h3>
             <div class="item_detail">
-                    <div class="teach"><h5>2020.09-2024.06</h5> <h5>四川工商学院</h5><h5>计算机科学与技术（本科）</h5>
+              <div class="teach">
+                <h5>2020.09-2024.06</h5>
+                <h5>四川工商学院</h5>
+                <h5>计算机科学与技术（本科）</h5>
               </div>
-                    <p>在校期间自学前端技术，将所学知识运行到实际场景中，并收录在个人博客中，现已发布40+篇文
+              <p>
-                        章；大三就开始在外实习，擅长Vue，曾二次封装基础管理系统通用组件，已在多个项目中复用，降低代码冗余程度，提高维护效率。同时在个人博客中，系统总结项目中遇到的问题及解决方案，并分享学习笔记和经验感悟。 </p>
+                在校期间自学前端技术，将所学知识运行到实际场景中，并收录在个人博客中，现已发布40+篇文
+                章；大三就开始在外实习，擅长Vue，曾二次封装基础管理系统通用组件，已在多个项目中复用，降低代码冗余程度，提高维护效率。同时在个人博客中，系统总结项目中遇到的问题及解决方案，并分享学习笔记和经验感悟。
+              </p>
             </div>
           </div>
           <div class="item">
@@ -97,23 +130,38 @@
               <h4>成都数字家园科技有限公司<span>2023.07 - 2023.12</span></h4>
               <h6>前端开发实习</h6>
               <p>1.参与多个智慧大屏项目和文物全景管理系统的前端开发；</p>
-                    <p>2.基于Vue3与Echarts实现数据可视化及动态交互，优化组件复用性与渲染性能；</p>
+              <p>
-                    <p>3.二次封装Element Plus通用组件，构建动态表单、通用表格等高复用组件体系。</p>
+                2.基于Vue3与Echarts实现数据可视化及动态交互，优化组件复用性与渲染性能；
+              </p>
+              <p>
+                3.二次封装Element
+                Plus通用组件，构建动态表单、通用表格等高复用组件体系。
+              </p>
             </div>
 
             <div class="item_detail">
               <h4>成都康儿丝网络科技有限公司<span>2024.09 - 至今</span></h4>
               <h6>前端开发工程师</h6>
-                    <p>1.独立完成ERP系统的前端开发，抽离通用逻辑并封装为可配置组件；采用模块化设计，划分订
+              <p>
-                        单管理、仓库管理、结算管理等独立模块，提升系统可维护性与扩展性； </p>
+                1.独立完成天枢系统的前端开发，抽离通用逻辑并封装为可配置组件；采用模块化设计，划分订
-                    <p>2.参与地理经济可视化监控平台开发，基于Vue3 + Ant Design Vue + Echarts+ Mars2D构建地
+                单管理、仓库管理、结算管理等独立模块，提升系统可维护性与扩展性；
+              </p>
+              <p>
+                2.参与地理经济可视化监控平台开发，基于Vue3 + Ant Design Vue +
+                Echarts+ Mars2D构建地
                 图+图表联动的数据可视化系统，支持GDP增速、社零额增速、经济预期等关键指标的动态展示与区域
-                        下钻，显著提升多维经济数据的空间表达能力与交互直观性。</p>
+                下钻，显著提升多维经济数据的空间表达能力与交互直观性。
-<!--                    <p>3.自研workflow 编辑器、Echarts编辑器与动态表单编辑器,支持可视化配置与动态渲染；</p>-->
+              </p>
-                    <p>3.自研Echarts编辑器与动态表单编辑器,支持可视化配置与动态渲染；</p>
+              <p>
-                    <p>4.参与垃圾回收App与垃圾投递小程序等项目开发，负责核心功能实现及代码质量保障，持续推
+                3.自研Echarts编辑器、自定义查询ER编辑器和workflow编辑器+动态表单编辑器；
-                        进项目的性能优化、交互改进，增强系统稳定性与用户体验。</p>
+              </p>
-                    <p>5.参与川魅酒旗舰店多端分销电商系统开发，负责商品、订单、推荐官分销体系等核心业务在App/小程序/平台管理端/商家管理端的实现与联调。</p>
+              <p>
+                4.参与垃圾回收App与垃圾投递小程序等项目开发，负责核心功能实现及代码质量保障，持续推
+                进项目的性能优化、交互改进，增强系统稳定性与用户体验。
+              </p>
+              <p>
+                5.重构小程序/App，优化App发布流程；开发川魅酒旗舰店多端分销电商系统，负责商品、订单、推荐官分销体系等核心业务在App/小程序/平台管理端/商家管理端的实现与联调。
+              </p>
             </div>
           </div>
           <div class="item">
@@ -121,29 +169,46 @@
             <div class="item_detail">
               <div class="skill">
                 <ul>
-                            <li>掌握DIV+CSS 布局、PC 端的响应式布局和弹性盒布局；
+                  <li>
+                    掌握HTML、CSS、JavaScript和TypeScript，DIV+CSS布局、PC端的响应式布局和弹性盒布局；
                   </li>
-                            <li>掌握HTML、CSS、JavaScript(ES6)和 TypeScript，编写语义化、结构清晰的代码；</li>
+                  <li>
-                            <li>掌握Vue2/vue3 基本语法、生命周期、组件传参等，具备多次Vue2/vue3项目开发经验；
+                    掌握Vue2、vue3基本语法、生命周期、组件传参等，具备多次Vue2、vue3项目开发经验；了解Vue3源码；
                   </li>
-                            <li>掌握uni-app 多端开发体系，具备重构小程序及熟悉上线流程的实战经验；</li>
+                  <li>
-                            <li>掌握使用Mars2D平台进行地理信息可视化开发；
+                    掌握uni-app跨端开发体系，具备重构小程序/App、熟悉上线流程及App上架的实战经验；
                   </li>
-                            <li>掌握组件设计模式与可复用组件封装能力，包括Tinymce编辑器、图标组件(集成SVG和ElementPlus
+                  <li>
-                                图标库)、表格导出等多个组件化封装；
+                    优化App发布流程，引入CI/CD，结合原生Android
+                    WebView技术，渲染指定地址，打通H5与原生应用的通信桥梁，显著提升App的用户体验与响应速度；
                   </li>
-<!--                            workflow编辑器、-->
+                  <li>
-                            <li>自研设计可视化配置平台，包括Echarts编辑器、动态表单编辑器；负责其设计、
+                    自研设计可视化配置平台，包括自定义查询ER编辑器、Echarts编辑器、workflow编辑器+动态表单编辑器；负责其设计、组件封装和核心逻辑开发；
-                                组件封装、核心逻辑开发与打包上线流程；现已接入多个后台系统并用于实际业务场景；</li>
-                            <li>掌握Vite，根据项目需求配置和优化构建流程，提高开发效率；
                   </li>
-                            <li>掌握前端性能优化，包括懒加载、文件分片上传等；</li>
+                  <li>
-                            <li>使用WebSocket 构建实时隧道大屏平台，支持海量数据动态回显与图表联动；</li>
+                    掌握组件设计模式与可复用组件封装能力，包括Tinymce编辑器、图标组件、文件预览、表格导出等多个组件化封装；
-                            <li>掌握 ECharts图表库，在多个大屏可视化项目中，负责图表组件的封装与配置平台的搭建，支持图
-                                表属性的可视化编辑与在线预览；</li>
-                            <li>掌握Git，RESTful API，使用 Axios高效处理异步请求和实时数据交互；</li>
-                            <li>使用npm、yarn、pnpm 管理依赖，优化开发流程；
                   </li>
+                  <li>
+                    掌握Vue
+                    Router路由配置，支持懒加载、路由守卫、动态路由等功能。
+                  </li>
+                  <li>掌握Pinia状态管理，提高数据流转效率与代码可维护性。</li>
+                  <li>掌握使用Mars2D平台进行地理经济可视化监控平台开发；</li>
+                  <li>掌握前端性能优化策略，包括懒加载、文件分片上传等；</li>
+                  <li>
+                    使用WebSocket构建实时隧道大屏平台，支持海量数据动态回显与图表联动；
+                  </li>
+                  <li>
+                    掌握ECharts图表库，在多个大屏可视化项目中，负责图表组件的封装与配置平台的搭建，支持图表属性的可视化编辑与在线预览；
+                  </li>
+                  <li>
+                    具备AI开发环境搭建经验：掌握OpenCode
+                    AI编程工具的部署与配置，能在Trae
+                    AI编辑器中通过终端灵活配置阿里云百炼、火山引擎Coding
+                    Plan等平台，结合Anthropic
+                    Skills（代理技能）封装标准化工作流程，利用智能代理自动化能力，以AI驱动高效开发与代码质量优化。
+                  </li>
+                  <li>掌握Git版本控制；</li>
                 </ul>
               </div>
             </div>
@@ -158,18 +223,28 @@
                 <dt>项目描述</dt>
                 <dd>
                   <p>
-                                项目围绕川魅酒品牌直营与渠道推广场景，构建了一套涵盖 App 端、小程序端、平台管理端及商家管理端的多端协同分销电商系统，集商品销售、品牌展示、渠道推广与收益结算于一体。
+                    项目围绕川魅酒品牌直营与渠道推广场景，构建了一套涵盖 App
+                    端、小程序端、平台管理端及商家管理端的多端协同分销电商系统，集商品销售、品牌展示、渠道推广与收益结算于一体。
                     支持多规格酒类商品在线购买，提供完整的下单、支付、订单与物流信息，并引入多级推荐官体系，根据等级配置采购折扣与推广权益，助力品牌私域运营与渠道拓展。
                   </p>
                 </dd>
                 <dt>责任描述</dt>
-                        <dd>1.参与App/小程序/平台管理端/商家管理端多端业务功能开发与联调，保障核心业务在不同端的一致性与稳定性；</dd>
+                <dd>
-                        <dd>2.实现推荐官等级体系及分销规则，支持等级差异化的推广权益及积分收支逻辑在多端落地；</dd>
+                  1.参与App/小程序/平台管理端/商家管理端多端业务功能开发与联调，保障核心业务在不同端的一致性与稳定性；
-                        <dd>3.对接后台接口，完成商品、订单、积分、收益等核心业务流程的开发与数据联调；</dd>
+                </dd>
-                        <dd>4.参与 App 在华为、小米等应用市场的打包、提审及上架流程，处理平台合规与发布相关问题；</dd>
+                <dd>
-<!--                        <dd>1.负责商城核心页面的开发与优化，包括商品列表、购物车、订单和用户中心等页面</dd>-->
+                  2.实现推荐官等级体系及分销规则，支持等级差异化的推广权益及积分收支逻辑在多端落地；
-<!--                        <dd>2.参与推荐官等级体系设计，实现等级驱动的积分收支与权益策略</dd>-->
+                </dd>
-<!--                        <dd>3.打通“品牌直营 + 电商交易 + 分销推广 + 收益结算”的业务闭环</dd>-->
+                <dd>
+                  3.对接后台接口，完成商品、订单、积分、收益等核心业务流程的开发与数据联调；
+                </dd>
+                <dd>
+                  4.参与 App
+                  在华为、小米等应用市场的打包、提审及上架流程，处理平台合规与发布相关问题；
+                </dd>
+                <!--                        <dd>1.负责商城核心页面的开发与优化，包括商品列表、购物车、订单和用户中心等页面</dd>-->
+                <!--                        <dd>2.参与推荐官等级体系设计，实现等级驱动的积分收支与权益策略</dd>-->
+                <!--                        <dd>3.打通“品牌直营 + 电商交易 + 分销推广 + 收益结算”的业务闭环</dd>-->
                 <dt>开发环境</dt>
                 <dd>
                   <span class="label label-default">HBuilderX</span>
@@ -188,9 +263,8 @@
               <div class="clearfix"></div>
             </div>
 
-
             <div class="item_detail">
-                    <h5>天枢系统(ERP系统)</h5>
+              <h5>天枢系统</h5>
               <dl class="project">
                 <dt>开发时间</dt>
                 <dd>2024.09 - 至今</dd>
@@ -205,10 +279,15 @@
                 </dd>
                 <dt>责任描述</dt>
                 <dd>
-                            1.担任前端负责人，独立完成ERP系统的前端开发，抽离通用逻辑并封装为可配置组件；
+                  1.担任前端负责人，独立完成系统的前端开发，抽离通用逻辑并封装为可配置组件；
+                </dd>
+                <dd>
+                  2.采用模块化设计，划分订单管理、仓库管理、结算管理等模块，提升系统可维护性与扩展性；
+                </dd>
+                <dd>
+                  3.基于Vben
+                  Admin封装多个业务组件（表单选择弹窗组件、日历事件组件），提升开发效率；
                 </dd>
-                        <dd>2.采用模块化设计，划分订单管理、仓库管理、结算管理等模块，提升系统可维护性与扩展性；</dd>
-                        <dd>3.基于Vben Admin封装多个业务组件（表单选择弹窗组件、日历事件组件），提升开发效率；</dd>
 
                 <dt>开发环境</dt>
                 <dd>
@@ -232,7 +311,6 @@
               <div class="clearfix"></div>
             </div>
 
-
             <div class="item_detail">
               <h5>缘境系统(FateVerse)--开源项目</h5>
               <dl class="project">
@@ -240,19 +318,30 @@
                 <dd>2023.05 – 至今</dd>
                 <dt>项目描述</dt>
                 <dd>
-                            <p>FateVerse是一套以权限管理、自定义工作流为核心，多数据源代码生成，多数据源自定
+                  <p>
+                    FateVerse是一套以权限管理、自定义工作流为核心，多数据源代码生成，多数据源自定
                     义查询（服务主要分为数据源、数据适配器、数据编辑器、数据展示四个层级，让用户使用系统服务就
                     可以快速构建查询列表，echarts图表等页面。）等多种模块为辅的高并发快速开发基础系统；现已投
                     入到多个项目中实际生产应用（其中科创项目管理平台则是使用FateVerse作为基础开发）。
                   </p>
                 </dd>
                 <dt>责任描述</dt>
-                        <dd>1.完成自定义查询模块、用户模块和消息通知模块等多个页面的开发与接口对接；</dd>
+                <dd>
-                        <dd>2.完成基于Vue2和G6的自定义快速查询ER图编辑器的开发与升级（Vue3）；</dd>
+                  1.完成自定义查询模块、用户模块和消息通知模块等多个页面的开发与接口对接；
-                        <dd>3.自定义Echarts编辑器和动态表单编辑器，支持表单属性动态调整；</dd>
+                </dd>
-<!--                        <dd>3.自定义workflow编辑器、Echarts编辑器和动态表单编辑器，支持节点动态调整；</dd>-->
+                <dd>
-                        <dd>4.二次封装ElementPlus组件，并封装Tinymce编辑器、文件预览、表格导出、图标组件等多个组件；</dd>
+                  2.完成基于Vue2和G6的自定义快速查询<b>ER图编辑器</b>的开发与升级（Vue3）；
-                        <dd>5.使用 vue-codemirror 插件实现代码编辑器，并用于自定义sql查询配置；</dd>
+                </dd>
+                <dd>
+                  3.自定义<b>Echarts编辑器和workflow编辑器+动态表单编辑</b>, 支持表单属性动态调整；
+                </dd>
+                <dd>
+                  4.二次封装ElementPlus组件，并封装Tinymce编辑器、文件预览、表格导出、图标组件等多个组件；
+                </dd>
+                <dd>
+                  5.使用 vue-codemirror
+                  插件实现代码编辑器，并用于自定义sql查询配置；
+                </dd>
                 <dt>开发环境</dt>
                 <dd>
                   <span class="label label-default">WebStorm</span>
@@ -278,19 +367,26 @@
                 </dd>
 
                 <dt>开源链接</dt>
-<!--                        <dd>Demo：<a href="http://fateverse-vue.frp.feashow.cn">http://fateverse-vue.frp.feashow.cn</a>-->
+                <!--                        <dd>Demo：<a href="http://fateverse-vue.frp.feashow.cn">http://fateverse-vue.frp.feashow.cn</a>-->
-<!--                        </dd>-->
+                <!--                        </dd>-->
-                        <dd>Gitee 前端：<a href="https://gitee.com/fateverse/fateverse-vue">https://gitee.com/fateverse/fateverse-vue</a>
+                <dd>
+                  Gitee 前端：<a
+                    href="https://gitee.com/fateverse/fateverse-vue"
+                    >https://gitee.com/fateverse/fateverse-vue</a
+                  >
                 </dd>
 
-                        <dd>Gitee 后端：<a href="https://gitee.com/fateverse/fateverse-vue">https://gitee.com/fateverse/fateverse</a>
+                <dd>
+                  Gitee 后端：<a
+                    href="https://gitee.com/fateverse/fateverse-vue"
+                    >https://gitee.com/fateverse/fateverse</a
+                  >
                 </dd>
                 <div class="clearfix"></div>
               </dl>
               <div class="clearfix"></div>
             </div>
 
-
             <div class="item_detail">
               <h5>地理经济可视化监控平台</h5>
               <dl class="project">
@@ -309,9 +405,13 @@
                 <dd>
                   1.完成区域财源流动、市场主体动态等多个模块的组件化开发；
                 </dd>
-                        <dd>2.基于TDesign 参与完成地理经济可视化监控平台的移动端页面开发；</dd>
+                <dd>
-                        <dd>3.基于Mars2D参与地图可视化开发，直观反映各街道、重点企业、房产和楼宇园区的布局情况
+                  2.基于TDesign 参与完成地理经济可视化监控平台的移动端页面开发；
-                            及基本信息展示；</dd>
+                </dd>
+                <dd>
+                  3.基于Mars2D参与地图可视化开发，直观反映各街道、重点企业、房产和楼宇园区的布局情况
+                  及基本信息展示；
+                </dd>
 
                 <dt>开发环境</dt>
                 <dd>
@@ -336,7 +436,6 @@
               <div class="clearfix"></div>
             </div>
 
-
             <div class="item_detail">
               <h5>科研项目管理平台</h5>
               <dl class="project">
@@ -346,7 +445,8 @@
                 <dd>
                   <p>
                     本项目旨在实现科研项目全生命周期的数字化管理。平台覆盖科研项目需求征集、项目立
-                                项、项目验收、项目资金管理、文档归档等环节；以项目生命周期为主流程，每个环节使用Flowable 工
+                    项、项目验收、项目资金管理、文档归档等环节；以项目生命周期为主流程，每个环节使用Flowable
+                    工
                     作流引擎构建子流程驱动项目流程，确保各环节高效流转。平台集成自定义BPMN流程编辑器，支持项
                     目审批流程的灵活设计与优化。
                   </p>
@@ -395,7 +495,8 @@
                 <dd>2023.12 - 2024.04</dd>
                 <dt>项目描述</dt>
                 <dd>
-                            <p>此项目是一款基于three.js技术开发的隧道可视化大屏，实时展示隧道内部情况，帮助
+                  <p>
+                    此项目是一款基于three.js技术开发的隧道可视化大屏，实时展示隧道内部情况，帮助
                     管理人员快速准确地掌握隧道运行状态，以提升隧道管理效率和安全性。其实时监测隧道内的温/湿度、
                     风速、风压、风机运行状态以及二氧化硫等有害气体状况。还集成报警系统，当监测数据异常时，自动
                     触发报警并在大屏上显示。使用查看历史监测数据，并能够以echarts可视化图表动画形式回放，帮助
@@ -403,10 +504,17 @@
                   </p>
                 </dd>
                 <dt>责任描述</dt>
-                        <dd>1.负责隧道可视化大屏数据面板、站点管理、隧道管理和用户管理等多个页面的开发及接口对接；</dd>
+                <dd>
-                        <dd>2.基于three.js集成并优化3D隧道可视化模型，结合WebSocket实现数据实时回显；</dd>
+                  1.负责隧道可视化大屏数据面板、站点管理、隧道管理和用户管理等多个页面的开发及接口对接；
-                        <dd>3.使用Echarts 展示风机、风压和有害气体等历史监控数据，并支持基于时间分片查询操作和
+                </dd>
-                            excel 导出操作。</dd>
+                <dd>
+                  2.基于three.js集成并优化3D隧道可视化模型，结合WebSocket实现数据实时回显；
+                </dd>
+                <dd>
+                  3.使用Echarts
+                  展示风机、风压和有害气体等历史监控数据，并支持基于时间分片查询操作和
+                  excel 导出操作。
+                </dd>
                 <dt>开发环境</dt>
                 <dd>
                   <span class="label label-default">WebStorm</span>
@@ -439,15 +547,20 @@
                 <dt>项目描述</dt>
                 <dd>
                   <p>
-                                此项目是一款个人家庭财务管理的记账 App ，主要有个人计划、群组记账、个人记账、报表统计、打卡系统和个人中心六个模块。个人中心清晰展示资产负债情况；个人计划支持邮件提醒；群组记账采用多账本模式，支持多场景独立记账，并自动将多人账单中每人的消费金额同步至个人账单；个人记账涵盖支出/收入记录，并提供多维度月支出预算管理，帮助精准控制开支；打卡系统支持自定义打卡类型与周期，结合报表统计功能，提供打卡完成率与趋势分析。
+                    此项目是一款个人家庭财务管理的记账 App
+                    ，主要有个人计划、群组记账、个人记账、报表统计、打卡系统和个人中心六个模块。个人中心清晰展示资产负债情况；个人计划支持邮件提醒；群组记账采用多账本模式，支持多场景独立记账，并自动将多人账单中每人的消费金额同步至个人账单；个人记账涵盖支出/收入记录，并提供多维度月支出预算管理，帮助精准控制开支；打卡系统支持自定义打卡类型与周期，结合报表统计功能，提供打卡完成率与趋势分析。
                   </p>
                 </dd>
                 <dt>责任描述</dt>
                 <dd>1.负责邮箱注册及登录；</dd>
-                        <dd>2.负责个人计划，群组记账，个人记账与打卡系统等模块的页面开发与接口对接；</dd>
+                <dd>
+                  2.负责个人计划，群组记账，个人记账与打卡系统等模块的页面开发与接口对接；
+                </dd>
                 <dd>3.集成大量阿里巴巴矢量图标，提升用户选择体验；</dd>
-                        <dd>4.用 IDEA 软件完成 App 的上线发布流程。</dd>
+                <dd>4.优化App发布流程，引入CI/CD，结合原生Android WebView技术，渲染指定地址，打通H5与原生应用的通信桥梁，显著提升App的用户体验与响应速度</dd>
-                        <dd>5.实现打卡数据的统计与可视化，支持用户查看打卡完成情况及历史趋势。</dd>
+                <dd>
+                  5.实现打卡数据的统计与可视化，支持用户查看打卡完成情况及历史趋势。
+                </dd>
                 <dt>开发环境</dt>
                 <dd>
                   <span class="label label-default">HBuilderX</span>
@@ -465,9 +578,17 @@
                   <span class="label label-default">Scss 语法</span>
                 </dd>
                 <dt>演示地址</dt>
-                        <dd><a href="https://blog.odjbinail.cn/?p=4565">https://blog.odjbinail.cn/?p=4565</a></dd>
+                <dd>
+                  <a href="https://blog.odjbinail.cn/?p=4565"
+                    >https://blog.odjbinail.cn/?p=4565</a
+                  >
+                </dd>
                 <dt>下载地址</dt>
-                        <dd><a href="http://download.odjbinail.cn/app/">http://download.odjbinail.cn/app/</a></dd>
+                <dd>
+                  <a href="http://download.odjbinail.cn/app/"
+                    >http://download.odjbinail.cn/app/</a
+                  >
+                </dd>
 
                 <div class="clearfix"></div>
               </dl>
@@ -489,11 +610,11 @@
                   </p>
                 </dd>
                 <dt>责任描述</dt>
-                        <dd>
+                <dd>1.负责实现微信授权登录；</dd>
-                            1.负责实现微信授权登录；
-                        </dd>
                 <dd>2.带领团队完成项目开发并负责保障其质量优化工作；</dd>
-                        <dd>3.负责完成速配地图定位及自动地理定位任务，为用户推荐附近店铺信息；</dd>
+                <dd>
+                  3.负责完成速配地图定位及自动地理定位任务，为用户推荐附近店铺信息；
+                </dd>
                 <dd>4.负责小程序的上线发布流程。</dd>
 
                 <dt>开发环境</dt>
@@ -526,14 +647,18 @@
                 <dt>项目描述</dt>
                 <dd>
                   <p>
-                                食瞳小程序主要为工厂代招商时，对 B 端用户展示工厂代工产品；其中主要有行业新闻、
+                    食瞳小程序主要为工厂代招商时，对 B
-                                企业需求、需求&创意发布和个人中心等模块。B 端用户可以在小程序中发布自身的创意或者需求，也可
+                    端用户展示工厂代工产品；其中主要有行业新闻、
+                    企业需求、需求&创意发布和个人中心等模块。B
+                    端用户可以在小程序中发布自身的创意或者需求，也可
                     以查看对应行业的情况和需求。
                   </p>
                 </dd>
                 <dt>责任描述</dt>
                 <dd>1.负责实现微信注册登录；</dd>
-                        <dd>2.负责首页产品展示模块，行业&需求模块与个人中心的页面开发与接口对接；</dd>
+                <dd>
+                  2.负责首页产品展示模块，行业&需求模块与个人中心的页面开发与接口对接；
+                </dd>
                 <dd>3.负责小程序的上线发布流程。</dd>
                 <dt>开发环境</dt>
                 <dd>
@@ -571,20 +696,24 @@
                     该项目是一个全面展示学校形象的响应式官网，主要有"学院概况"、"党群工作"、"师资
                     队伍"、"教育教学"、"科学研究"、"学生工作"等栏目。其中"通知公告"，"党群动态"等栏目，可以
                     让学生家长更好的了解学校。该官网除了展示学校信息和实现了网站的中英文国际化之外，还有资料下
-                                载入口，满足用户的学习需求。同时该官网也配有 admin 后台管理网站，可以赋予不同用户的文章发布
+                    载入口，满足用户的学习需求。同时该官网也配有 admin
-                                权限。
+                    后台管理网站，可以赋予不同用户的文章发布 权限。
                   </p>
                 </dd>
                 <dt>责任描述</dt>
                 <dd>
-                            1.负责该官网的页面开发与接口对接，为了提高效率，全局采用 elementUI 组件库中的 Layout
+                  1.负责该官网的页面开发与接口对接，为了提高效率，全局采用
-                            进行布局；
+                  elementUI 组件库中的 Layout 进行布局；
+                </dd>
+                <dd>
+                  2.使用 DIV+CSS、JavaScript
+                  实现导航栏的布局和动态交互展示效果；
+                </dd>
+                <dd>
+                  3.使用 axios 调用后台接口来请求数据，从而进行页面的渲染；
                 </dd>
-                        <dd>2.使用 DIV+CSS、JavaScript 实现导航栏的布局和动态交互展示效果；</dd>
-                        <dd> 3.使用 axios 调用后台接口来请求数据，从而进行页面的渲染；</dd>
                 <dd>4.使用 vue-router 进行路由的跳转，实现单页面应用程序；</dd>
-                        <dd>5.使用 vue-i18n 插件实现网站的中英文国际化。
+                <dd>5.使用 vue-i18n 插件实现网站的中英文国际化。</dd>
-                        </dd>
                 <dt>开发环境</dt>
                 <dd>
                   <span class="label label-default">WebStorm</span>
@@ -611,6 +740,6 @@
           </div>
         </div>
       </div>
-</div>
+    </div>
-</body>
+  </body>
 </html>

tunnel_ventilation_system.md

@@ -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 渲染优化策略，突破大规模场景的性能瓶颈