diff --git a/.trae/documents/traffic-flow-screen-plan.md b/.trae/documents/traffic-flow-screen-plan.md deleted file mode 100644 index b770258..0000000 --- a/.trae/documents/traffic-flow-screen-plan.md +++ /dev/null @@ -1,120 +0,0 @@ -# 客流量大屏改造方案 - -## Context(背景与目标) - -现有项目 `hs-flow‑screen` 是一个深色科技风的"借阅/通知大屏"(三栏布局:总借阅、借阅排行、进馆、阅读之星、通知、新书推荐)。用户希望仿照目标页面 `http://libraryu.seaeverit.com:15000/main?token=...` 做一个**客流量大屏**,目标页面布局为:顶部 Header → "客流量展示"标签 → 三列卡片(当日进馆折线图 / 当月进馆折线图 / 当年进馆数字翻牌)→ 全宽"累计客流量汇总"翻牌器。 - -经确认的改造口径: -1. **保留深色科技风视觉**(深蓝背景 `#010326`、白色文字、蓝色发光 `#1AC9FF`、`common-title`/`module-content` 蓝色样式),**不**改成目标页的白底橙色,只仿照**布局结构**。 -2. **保留现有 Header 组件**(动画线条 + 天气 iframe + 渐变标题),标题用"黄石图书馆"。 -3. **删除不再使用的旧组件目录**。 -4. **数据先用 mock**,预留接口对接位置。 - -## 关键约束(基于源码确认) - -- 适配:rem 方案(`src/common/flexible.js`,1920 设计稿,1rem≈80px,范围 1366–2560),所有尺寸用 rem。 -- echarts 4:`this.$echarts` 全局已注册(`main.js`),用 `this.$echarts.init(this.$refs.chart)` + ref,**不要用 `getElementById`**(旧 `components/echart/*` 用 id 会有冲突)。 -- `resizeMixins.js`(`src/utils/resizeMixins.js`)提供自动 resize(要求组件 `data.chart` 字段),但其 `removeEventListener('reisze'…)` 拼写错误且不 dispose → 新组件须在 `beforeDestroy` 手动 `this.chart.dispose(); this.chart=null`。 -- 数字翻牌:`vue-count-to` 的 `CountTo`,用法 ``。 -- 滚动:`vue-seamless-scroll` 已 `Vue.use`,组件名 ``。 -- `.common-title` / `.module-content` 是 `.screen-main` 的后代选择器 → 新布局根容器必须仍是 `.screen-main`(叠加 `.traffic-main`)。 -- Header 标题 prop:`headerTitle`,`getCurrentTime()` 返回"YYYY年MM月DD日 HH:mm:ss"。 -- 端口 8080,`npm run serve` 自动开浏览器。 - -## 新文件结构 - -``` -src/views/ -├── index.vue # 改写:Header + ,删除旧的高度计算逻辑 -├── header/index.vue # 保留不动 -└── trafficFlow/ - ├── index.vue # 新建:.screen-main.traffic-main 布局容器 - └── components/ - ├── DayInFlowChart.vue # 当日进馆折线图(按小时) - ├── MonthInFlowChart.vue # 当月进馆折线图(按日) - ├── YearInFlowCard.vue # 当年进馆数字翻牌(单个大数字) - └── TotalFlowSummary.vue # 累计客流量汇总(8 位翻牌卡片,横向可滚动) -``` - -## 实施步骤 - -### 1. 新建 trafficFlow 4 个子组件 + index.vue(先建骨架,不破坏现有) -- `DayInFlowChart.vue` / `MonthInFlowChart.vue`:`
`,`mixins:[resize]`,`data.chart=null` + mock 数据,`mounted` → `initChart()` → `setOption()`,`beforeDestroy` dispose。setOption 用蓝色系(线 `#1AC9FF`、轴 `#2C75E0`、分割线 `rgba(44,117,224,0.3)` 虚线、白色文字、`areaStyle` 用 `this.$echarts.graphic.LinearGradient` 蓝色渐变、`smooth:true`)。 -- `YearInFlowCard.vue`:``,mock `yearNum:1286500`。 -- `TotalFlowSummary.vue`:`totalNum:98765432` → `computed.digitList` 用 `padStart(8,'0').split('')` 固定 8 位,每位一个 ``,外裹 `` 横向滚动(`direction:2`)。预留 `fetchData()` 注释。 -- `trafficFlow/index.vue`:模板见下方。 - -### 2. 在 `src/assets/styles/index.scss` 末尾追加客流量布局样式(不动现有任何规则) -新增 `// ===== 客流量大屏布局 =====` 段,关键规则: -- `.traffic-main { flex-direction:column; justify-content:flex-start; gap:0.125rem; }`(叠加在 `.screen-main` 上) -- `.traffic-section-title`(顶部"客流量展示"标签,用 `title-big.png`) -- `.traffic-row { display:flex; }`、`.traffic-row-3 { flex:1; gap:0.25rem; min-height:0; }`(min-height:0 防 echarts 高度坍缩) -- `.traffic-card { flex:1; display:flex; flex-direction:column; min-width:0; .module-content{flex:1; overflow:hidden; padding:0.125rem 0.2rem;} }` -- `.traffic-summary { height:1.6rem; }` -- `.chart-box { width:100%; height:100%; }` -- `.year-num`(当年大数字,`#1AC9FF` + text-shadow)、`.summary-digits`/`.digit-card`(每位翻牌,`num-img.png` 背景) - -### 3. 改写 `src/views/index.vue` 为极简入口 -```vue - - - -``` -(删除原 `calcXxxHeight`/`$refs`/resize 监听等所有逻辑) - -`trafficFlow/index.vue` 模板骨架: -```vue - -``` - -### 4. 启动验证一轮(`npm run serve`) -确认:Header + "客流量展示" + 三卡片(两折线图初始化、一翻牌)+ 汇总翻牌滚动;控制台无 echarts 报错。 - -### 5. 删除旧组件目录 -- `src/views/accessToLibrary/`、`totalLending/`、`lengingRanking/`、`newBookRecommend/`、`notice/`、`readStar/`、`todayBorrowed/` - -### 6. 可选清理 -- 删 `src/components/echart/`(删旧组件后无引用)、`src/common/scrollMixins.js`(全项目无引用)。 -- 清 `index.scss` 中三栏 `.screen-left/.screen-right/.screen-middle` 及旧组件死 CSS(留着不影响,但建议删三栏那三条以免误导)。 - -## 接口对接预留(mock 阶段不做) -- `src/api/library.js` 的 `FetchInitIntoNum` 已存在,保留不删。后续在 4 个组件的 `fetchData()`(已注释)中对接,字段参考 `historyPeopleNum`(累计)、`dayPeopleNum`/`monthPeopleNum`(当日/当月总数);按小时/按日粒度折线数据需后端补接口。 - -## 验证 -1. `npm run serve` → `http://localhost:8080`: - - Header 显示"黄石图书馆" + 天气 + 每秒跳的时间 - - 顶部"客流量展示"标签 - - 第一行三列:左/中蓝色平滑折线图(带渐变面积)、右"当年进馆"0→1286500 翻牌动画 - - 第二行"累计客流量汇总"8 位翻牌(num-img.png 蓝牌背景)横向滚动 -2. F12 控制台无 echarts init/id 重复/resize 报错 -3. 拖拽窗口:折线图随 resizeMixins 自动 resize,rem 尺寸随 flexible 重算 -4. 改 mock 数字热更新不残留旧 echarts 实例(dispose 生效) -5. `npm run build` 无打包错误 - -## 风险规避 -- echarts 容器高度坍缩:`.traffic-row-3 { min-height:0 }` + `.traffic-card .module-content { flex:1 }` 必须同时有;必要时给 `.chart-box` 兜底 `min-height:2rem`。 -- `seamless` 横向滚动可能因 8 位内容不够触发:调小 `limitMoveNum:1`,或不要滚动直接静态居中("可滚动"非硬需求)。 -- 顺序:先建新→改入口→验证→再删旧,避免白屏。