1

.trae/documents/traffic-flow-screen-plan.md

@@ -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`，用法 `<count-to :start-val="0" :end-val="num" :duration="3200" />`。
-- 滚动：`vue-seamless-scroll` 已 `Vue.use`，组件名 `<seamless>`。
-- `.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 + <TrafficFlow/>，删除旧的高度计算逻辑
-├── 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`：`<div class="chart-box" ref="chart"/>`，`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`：`<count-to :end-val="yearNum"/>`，mock `yearNum:1286500`。
-- `TotalFlowSummary.vue`：`totalNum:98765432` → `computed.digitList` 用 `padStart(8,'0').split('')` 固定 8 位，每位一个 `<count-to>`，外裹 `<seamless :data :class-option>` 横向滚动（`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
-<template>
-  <div id="screen-container">
-    <Header :header-title="headerTitle" />
-    <TrafficFlow />
-  </div>
-</template>
-<script>
-import Header from '@/views/header/index.vue'
-import TrafficFlow from '@/views/trafficFlow/index.vue'
-export default {
-  name: 'Home',
-  components: { Header, TrafficFlow },
-  data() { return { headerTitle: '黄石图书馆' } }
-}
-</script>
-<style lang="scss">@import "~@/assets/styles/index.scss";</style>
-```
-（删除原 `calcXxxHeight`/`$refs`/resize 监听等所有逻辑）
-
-`trafficFlow/index.vue` 模板骨架：
-```vue
-<template>
-  <div class="screen-main traffic-main">
-    <div class="common-title traffic-section-title">客流量展示</div>
-    <div class="traffic-row traffic-row-3">
-      <div class="traffic-card"><div class="common-title">当日进馆</div><div class="module-content"><DayInFlowChart/></div></div>
-      <div class="traffic-card"><div class="common-title">当月进馆</div><div class="module-content"><MonthInFlowChart/></div></div>
-      <div class="traffic-card"><div class="common-title">当年进馆</div><div class="module-content year-content"><YearInFlowCard/></div></div>
-    </div>
-    <div class="traffic-row traffic-summary"><TotalFlowSummary/></div>
-  </div>
-</template>
-```
-
-### 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`，或不要滚动直接静态居中（"可滚动"非硬需求）。
-- 顺序：先建新→改入口→验证→再删旧，避免白屏。