26 lines
3.6 KiB
Markdown
26 lines
3.6 KiB
Markdown
# 2026-07-25
|
||
|
||
## visual-html 项目改造为 Vue3+TS+Vite
|
||
|
||
- **项目性质**：可视化大屏模板集合导航页（66 个模板卡片、10 个分类），原为纯静态 HTML + jQuery + animate.css。
|
||
- **备份**：原 `index.html` + `static/` 已移入 `bak/` 目录。
|
||
- **新架构**：
|
||
- Vue 3.5 + TypeScript + Vite 5（`vue-tsc` 类型检查 + `vite build` 均通过）
|
||
- `src/data/templates.ts`：66 条卡片数据（从原 index.html 提取），类型见 `src/types.ts`
|
||
- 组件：`App.vue` + `components/NavBar.vue`（锚点导航）+ `CategorySection.vue` + `TemplateCard.vue`（hover 动画 rubberBand→shake 用 Vue class 绑定替代 jQuery）
|
||
- `src/utils/device.ts`：TS 重写 device.js 移动端检测；移动端访问隐藏导航并 alert
|
||
- 样式：reset.css / animate.css / main.css 拷至 `src/assets/styles/`，背景图在 `src/assets/images/`
|
||
- **关键决策**：`resource/`（3000+ 文件的大屏模板库）整体移到 `public/resource/`，保证卡片链接 `./resource/html/...` 不变、构建后可直接部署。
|
||
- **环境注意**：本机 `~/.npm` 缓存目录权限有问题，npm install 需加 `--cache /tmp/...` 绕过。
|
||
- dev server: `npm run dev`（端口 5173），已验证首页/大屏子页/预览图/favicon 均 200。
|
||
|
||
## resource 大屏全部改写为 Vue（进行中）
|
||
|
||
- **用户决策**：monorepo 单仓多页；echarts 走 npm（装的是 **echarts@4.9.0 + @types/echarts@4.9.22**，兼容老模板 `itemStyle.normal` 语法，原项目内置 echarts 4.0.4）；jQuery 用 Vue 重写；66 个页面一次性全改。
|
||
- **架构**：vue-router，`/dashboard/<分类>/<编号>` 路由；每个大屏在 `src/dashboards/<分类>/<编号>/` 下自包含（index.vue + assets/ + components/），方便整目录拷贝。样式用 scoped，body 选择器改写到根类 `.dash-root`。
|
||
- **通用模式**：`initChart(id, option)` 收集实例 + onUnmounted dispose；window resize 统一 onResize；滚动列表用响应式数组 rotate + transition；rollNum 插件重写为 `RollNum.vue`（CSS transition + tops 数组驱动，02/04 是 40px 变体）；高德地图用动态 script 注入（key 保留原样）；`china.js` 转 ESM：perl 剥 UMD 壳 → `assets/china.ts`（@ts-nocheck）；高德点位 china.js → `assets/points.ts`（2.1MB，sed 改 export）。
|
||
- **已完成**：01vehicles 全部 8 页（01 数字滚动+8图、02 高德聚合+预警滚动、03 中国地图流向+仪表盘、04 高德+进度条、05 Bootstrap 布局+地图、06/08 新能源孪生页、07 3D 相册 Carousel3D+文字滚动）。tsc 全过。
|
||
- **进度更新（第二次会话）**：02agriculture(2)、03traffic(3)、04logistics(8 全)、05Ecommerce(4 全) 已完成。05Ecommerce/02 五屏用 jQuery 保真提取（mapIndex/mapSecond/mapTest.ts + initMap 返回清理函数包装 window.setInterval/setTimeout）；home.vue 用 iframe 指向子路由轮播。main.css 首页全局样式已限定 `.home-page` 前缀防污染。新增依赖：jquery+@types/jquery、echarts-liquidfill@2.0.6（echarts4 兼容）。
|
||
- **踩坑记录**：UMD 剥壳后地图文件顶层 `return;` 需清除（13 个文件已修）；原 HTML 常见畸形标签（多余 `</ul>`/缺 `</div>`）会破坏 Vue 编译，用脚本统计 div 平衡修复；css 中游离 `*/`、缺失字体文件引用、`max-width: : 100%` 这类原站容错写法会被 vite/postcss 拒绝，需清理。
|
||
- **待做**：06government(13，已完成 01+02 共 6 路由)、07universal(8)、08bigData(5)、09others(15)、10layout(11)；templates.ts 卡片链接改路由；预览图迁移；删 public/resource；全量 build。
|