DataGovernanceDashboard/next/ARCHITECTURE.md

Vue3 看板架构

目录职责

项目采用固定顶层目录的 Feature-First 结构：

• src/api：HTTP 客户端、接口端点和监控/项目 API。
• src/assets：全局样式及静态资源；next.css 放置 Vue3 增量样式。
• src/components/base：与业务无关的通用组件，目前为 ECharts 生命周期封装。
• src/components/features：按 monitoring、drilldown 分组的业务展示组件。
• src/composables：路由页面生命周期和跨 Store 协调动作。
• src/layouts：应用壳层、大屏缩放、全局筛选和弹窗挂载。
• src/pages：集团、企业、项目三级路由页面。
• src/router：Vue Router 哈希路由及页面懒加载。
• src/stores：筛选、监控、项目详情和穿透四个 Setup Store。
• src/types：API 查询类型和页面 ViewModel 类型。
• src/utils：Adapter、图表 option 纯函数和业务配置。

数据流

页面 composable 监听路由参数和筛选状态，调用职责对应的 Store；Store 通过 API 客户端读取接口，再由 utils/adapters 转换为 ViewModel。页面与弹窗只读取 ViewModel，不直接兼容后端字段别名。useDrilldownActions 负责筛选变更、指标穿透、报告和弹窗关闭等跨 Store 操作。

每类异步数据请求均有独立的 AbortController 与请求序号。筛选、路由或弹窗关闭导致的旧请求不会覆盖最新状态。

环境变量

复制 .env.example 为本地环境文件并设置 VITE_QHSE_API_TOKEN。该 token 按既有内网模式由浏览器请求头携带，因此构建产物仍会包含该值；不要将真实生产 token 提交到版本库。