feat: 搭建二期项目架构

.gitignore

@@ -4,9 +4,6 @@
 *.pyc
 .DS_Store
 
-# V2 运行时数据（SQLite + 本地媒体）
-data/
-
 # 反编译参考资料（约 40 个 bundle），设计结论已写入 docs/extension/plan.md §2
 reference/
 

README.md

@@ -23,7 +23,9 @@ php -S localhost:8899
 
 ### 2. 打开浏览器
 
-访问 **http://localhost:8899**，会看到 5 张示例图表和 11 张泡泡玛特财报图表：
+访问 **http://localhost:8899**。页面左侧选择公司，中间用 Tab 切换分析维度，右侧可跳转到当前分类的图表。
+
+当前 manifest 内登记了 5 张示例图表和 14 张泡泡玛特财报图表：
 
 **示例图表：**
 1. **存货、营收与存货周转天数** — 双柱 + 折线，双 Y 轴
@@ -50,7 +52,7 @@ php -S localhost:8899
 
 ### 3. 修改数据
 
-编辑 `data/*.csv`，保存后点击页面右上角的 **「重新加载数据」** 按钮。
+编辑对应公司的 CSV，保存后点击页面右上角的 **「重新加载数据」** 按钮。数据目录按公司划分，例如 `data/ppmt/ppmt_profit.csv`、`data/demo/inventory.csv`。
 
 CSV 格式：首行是表头，逗号分隔，数字列会自动转换。示例：
 
@@ -69,22 +71,20 @@ period,inventory,revenue,turnover_days
 ## 项目结构
 
 ```
-echart-demo/
+smart-fin-chart/
 ├── index.html              # 主页面
-├── data/                   # 数据文件
-│   ├── inventory.csv       # 图 1-5：示例数据
-│   ├── margin.csv
-│   ├── growth.csv
-│   ├── fx.csv
-│   ├── ppmt.xlsx           # 泡泡玛特原始财报
-│   └── ppmt_*.csv          # 图 6-16：从 xlsx 提取的各口径数据
+├── manifest.json           # 公司、Tab、图表、CSV 的唯一配置来源
+├── data/                   # 数据文件（按公司划分）
+│   ├── demo/
+│   └── ppmt/
 ├── js/
-│   ├── main.js             # 入口：CHARTS 清单、渲染、导出 PNG
+│   ├── main.js             # 入口：读取 manifest、渲染、导出 PNG
+│   ├── ui.js               # 三栏 UI 构建
 │   ├── csv.js              # CSV 解析工具
 │   ├── theme.js            # 主题：配色、字体、水印、共享系列构造器
-│   └── charts/             # 一图一文件，共 16 张
+│   └── charts/             # 图表构建函数与 registry
 ├── test/
-│   └── regress.mjs         # 回归测试：SSR 渲染 16 张图 + 样式规范断言
+│   └── regress.mjs         # 回归测试：遍历 manifest + 样式规范断言
 └── css/
     └── style.css           # 页面样式
 ```
@@ -95,13 +95,13 @@ echart-demo/
 npm test
 ```
 
-用 ECharts 的 SSR 模式把 16 张图渲染成 SVG，断言：
+用 ECharts 的 SSR 模式遍历 manifest 中的图表并渲染成 SVG，断言：
 
 - `legend.top` = 85、`grid.top` = 145（统一间距）
 - 折线 `symbolSize` = 9、`borderWidth` = 2.5（空心圆点规范）
 - SVG 属性未被字体名里的引号提前闭合
 
-加新图后往 `regress.mjs` 顶部的 `all` 数组加一行，否则不会被测到。
+回归测试会遍历 `manifest.json`，不用再手工维护图表清单。
 
 ---
 
@@ -138,9 +138,9 @@ A：点击页面右上角的 **「重新加载数据」** 按钮。普通刷新
 A：
 1. 在 `data/` 下创建新 CSV
 2. 在 `js/charts/` 下创建新 `.js`，从 `theme.js` 取共享配置（`lineSeries()`、`barSeries()`、`standardLegend()`、`periodAxis`），不要手写等价值
-3. 在 `js/main.js` 的 `CHARTS` 数组里加一行
-4. 在 `index.html` 加一个 `<div class="card">` 容器
-5. 在 `test/regress.mjs` 的 `all` 数组里加一行，然后跑 `npm test`
+3. 在 `js/charts/index.js` 注册 chart key
+4. 在 `manifest.json` 对应公司与 Tab 中添加图表配置
+5. 跑 `node test/regress.mjs <chart-id>`；浏览器检查标签、颜色和脚注
 
 **Q：能改水印文字吗？**  
 A：编辑 `js/theme.js` 的 `WATERMARK_TEXT` 常量。

css/style.css

@@ -1,101 +1,219 @@
 :root {
   --ink: #333;
-  --grey: #8c8c8c;
+  --muted: #8c8c8c;
   --line: #e8e8e8;
   --bg: #f5f4f1;
+  --surface: #fff;
   --accent: #6b4a2b;
+  --accent-soft: #f0e9e1;
 }
 
 * { box-sizing: border-box; }
 
 body {
   margin: 0;
-  padding: 32px 24px 64px;
   background: var(--bg);
   color: var(--ink);
   font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
 }
 
-header {
-  max-width: 1180px;
-  margin: 0 auto 28px;
-  display: flex;
-  align-items: baseline;
-  gap: 16px;
-  flex-wrap: wrap;
+button {
+  font: inherit;
+  font-size: 13px;
+  color: var(--ink);
+  cursor: pointer;
 }
 
-header h1 {
-  margin: 0;
-  font-size: 22px;
+.app-header {
+  min-height: 76px;
+  padding: 16px 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--line);
+}
+
+.app-brand h1,
+.app-brand p,
+.card-title,
+.sidebar-title { margin: 0; }
+
+.app-brand h1 { font-size: 21px; font-weight: 600; }
+.app-brand p { margin-top: 4px; color: var(--muted); font-size: 13px; }
+
+.reload-button,
+.export-button {
+  padding: 7px 13px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--surface);
+  transition: border-color .15s, color .15s, background .15s;
+}
+
+.reload-button {
+  color: #fff;
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.reload-button:hover { opacity: .88; }
+.export-button:hover { color: var(--accent); border-color: var(--accent); }
+
+.app-layout {
+  display: grid;
+  grid-template-columns: 184px minmax(0, 1fr) 184px;
+  gap: 24px;
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: 28px 24px 64px;
+}
+
+.sidebar {
+  align-self: start;
+  position: sticky;
+  top: 20px;
+  padding: 14px 10px;
+  background: rgba(255, 255, 255, .58);
+  border: 1px solid rgba(232, 232, 232, .9);
+  border-radius: 10px;
+}
+
+.sidebar-title {
+  padding: 0 8px 10px;
+  color: var(--muted);
+  font-size: 12px;
   font-weight: 600;
 }
 
-header p {
-  margin: 0;
-  color: var(--grey);
-  font-size: 14px;
-}
+.company-list,
+.anchor-list { display: grid; gap: 3px; }
 
-button {
-  font-family: inherit;
-  font-size: 13px;
-  padding: 6px 14px;
-  border: 1px solid var(--line);
+.company-button,
+.anchor-button,
+.tab-button,
+.view-button {
+  border: 0;
   border-radius: 6px;
-  background: #fff;
-  color: var(--ink);
-  cursor: pointer;
-  transition: border-color .15s, color .15s;
+  background: transparent;
+  text-align: left;
+  transition: background .15s, color .15s;
 }
 
-button:hover {
-  border-color: var(--accent);
+.company-button {
+  width: 100%;
+  padding: 8px;
+}
+
+.company-button:hover,
+.anchor-button:hover,
+.tab-button:hover { color: var(--accent); background: var(--accent-soft); }
+
+.company-button[data-active="true"],
+.tab-button[data-active="true"] {
   color: var(--accent);
+  font-weight: 600;
+  background: var(--accent-soft);
 }
 
-#btn-reload {
-  margin-left: auto;
-  background: var(--accent);
-  color: #fff;
-  border-color: var(--accent);
+.anchor-button {
+  padding: 6px 8px;
+  color: #5f5f5f;
+  font-size: 12px;
+  line-height: 1.45;
 }
 
-#btn-reload:hover {
-  opacity: .88;
-  color: #fff;
+.content { min-width: 0; }
+
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 18px;
+  padding: 5px;
+  background: rgba(255, 255, 255, .6);
+  border: 1px solid var(--line);
+  border-radius: 9px;
 }
 
+.tab-button { padding: 7px 11px; }
+
+.cards { display: grid; gap: 28px; }
+
 .card {
-  max-width: 1180px;
-  margin: 0 auto 28px;
-  background: #fff;
+  overflow: hidden;
+  background: var(--surface);
   border-radius: 10px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
-  overflow: hidden;
+  scroll-margin-top: 20px;
 }
 
 .card-bar {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 10px 16px;
+  min-height: 52px;
+  padding: 9px 16px;
   border-bottom: 1px solid var(--line);
 }
 
-.card-bar .src {
-  font-size: 12px;
-  color: var(--grey);
+.card-heading { min-width: 0; margin-right: auto; }
+.card-title { font-size: 14px; font-weight: 600; }
+
+.src {
+  display: block;
+  overflow: hidden;
+  margin-top: 2px;
+  color: var(--muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.card-bar button { margin-left: auto; }
+.view-switcher {
+  display: flex;
+  padding: 2px;
+  background: #f4f2ee;
+  border-radius: 6px;
+}
+
+.view-button { padding: 4px 7px; color: var(--muted); font-size: 12px; }
+.view-button[data-active="true"] { color: var(--accent); background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
 
 .chart { width: 100%; }
 
-.chart-error {
-  padding: 40px;
-  color: #c0392b;
+.chart-error,
+.empty-state,
+.sidebar-empty {
+  margin: 0;
+  padding: 36px 20px;
+  color: #a63f32;
   font-size: 14px;
   text-align: center;
 }
+
+.sidebar-empty { padding: 8px; color: var(--muted); text-align: left; font-size: 12px; }
+
+@media (max-width: 1040px) {
+  .app-layout { grid-template-columns: 160px minmax(0, 1fr); }
+  .chart-sidebar { display: none; }
+}
+
+@media (max-width: 720px) {
+  .app-header { padding: 14px 16px; }
+  .app-brand p { display: none; }
+  .app-layout { display: block; padding: 16px 12px 40px; }
+  .sidebar { position: static; margin-bottom: 12px; }
+  .company-sidebar { padding: 7px; }
+  .company-sidebar .sidebar-title { display: none; }
+  .company-list { display: flex; overflow-x: auto; }
+  .company-button { flex: 0 0 auto; width: auto; }
+  .tabs { overflow-x: auto; flex-wrap: nowrap; }
+  .tab-button { flex: 0 0 auto; }
+  .card-bar { align-items: flex-start; flex-wrap: wrap; }
+  .export-button { margin-left: auto; }
+  .chart { min-width: 560px; }
+  .card { overflow-x: auto; }
+}

index.html

@@ -8,172 +8,7 @@
   <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
 </head>
 <body>
-
-<header>
-  <h1>财报图表</h1>
-  <p>改 <code>data/*.csv</code> 后点「重新加载」即可更新</p>
-  <button id="btn-reload">重新加载数据</button>
-</header>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/inventory.csv</span>
-    <button data-export="chart-inventory" data-filename="存货与周转天数">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-inventory" style="height:620px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/margin.csv</span>
-    <button data-export="chart-margin" data-filename="利润率与费用率拆解">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-margin" style="height:620px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/margin.csv（毛利率 + 净利率两列）</span>
-    <button data-export="chart-twoline" data-filename="毛利率与非国际净利率">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-twoline" style="height:620px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/growth.csv</span>
-    <button data-export="chart-growth" data-filename="营收到利润的增速对比">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-growth" style="height:700px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/fx.csv</span>
-    <button data-export="chart-fx" data-filename="人民币汇率两种口径">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-fx" style="height:780px"></div>
-</div>
-
-<hr style="margin: 48px auto; max-width: 1180px; border: none; border-top: 2px solid #e0ddd5;">
-
-<header style="margin-top: 32px;">
-  <h1>📊 泡泡玛特财报分析</h1>
-  <p>基于 <code>data/ppmt.xlsx</code> 自动生成</p>
-</header>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_assets.csv</span>
-    <button data-export="chart-ppmt-assets" data-filename="泡泡玛特资产结构">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-assets" style="height:680px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_profit.csv</span>
-    <button data-export="chart-ppmt-profit" data-filename="泡泡玛特盈利能力">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-profit" style="height:680px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_ip.csv</span>
-    <button data-export="chart-ppmt-ip" data-filename="泡泡玛特IP收入趋势">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-ip" style="height:720px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_category.csv</span>
-    <button data-export="chart-ppmt-category" data-filename="泡泡玛特品类结构">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-category" style="height:680px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_sankey_2026h1.csv</span>
-    <button data-export="chart-ppmt-sankey" data-filename="泡泡玛特利润流向2026H1">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-sankey" style="height:800px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_region_channel_yoy.csv</span>
-    <button data-export="chart-ppmt-region-yoy" data-filename="泡泡玛特区域渠道同比增速">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-region-yoy" style="height:620px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_growth.csv</span>
-    <button data-export="chart-ppmt-growth" data-filename="泡泡玛特营收到利润增速对比">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-growth" style="height:700px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_margins.csv</span>
-    <button data-export="chart-ppmt-margins" data-filename="泡泡玛特利润率与费用率拆解">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-margins" style="height:680px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_margin_bridge.csv</span>
-    <button data-export="chart-ppmt-bridge" data-filename="泡泡玛特净利率同比拆解">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-bridge" style="height:700px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_core_profit.csv</span>
-    <button data-export="chart-ppmt-core" data-filename="泡泡玛特核心利润及同比增速">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-core" style="height:720px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_core_margin.csv</span>
-    <button data-export="chart-ppmt-core-margin" data-filename="泡泡玛特核心利润率">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-core-margin" style="height:680px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_ip_share_2026h1.csv</span>
-    <button data-export="chart-ppmt-ip-share" data-filename="泡泡玛特IP收入占比2026H1">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-ip-share" style="height:720px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_ip_share_history.csv</span>
-    <button data-export="chart-ppmt-ip-share-history" data-filename="泡泡玛特各IP半年收入占比">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-ip-share-history" style="height:700px"></div>
-</div>
-
-<div class="card">
-  <div class="card-bar">
-    <span class="src">data/ppmt_ip_ex_monsters.csv</span>
-    <button data-export="chart-ppmt-ip-ex-monsters" data-filename="泡泡玛特除MONSTERS外IP收入及同比">导出 PNG</button>
-  </div>
-  <div class="chart" id="chart-ppmt-ip-ex-monsters" style="height:700px"></div>
-</div>
-
-<script type="module" src="js/main.js"></script>
+  <div id="app"></div>
+  <script type="module" src="js/main.js"></script>
 </body>
 </html>

js/charts/index.js

@@ -0,0 +1,46 @@
+import { inventoryChart } from './inventory.js';
+import { marginChart } from './margin.js';
+import { twoLineChart } from './twoline.js';
+import { growthChart } from './growth.js';
+import { fxChart } from './fx.js';
+import { assetsChart } from './ppmt_assets.js';
+import { profitChart } from './ppmt_profit.js';
+import { ipChart } from './ppmt_ip.js';
+import { categoryChart } from './ppmt_category.js';
+import { sankeyChart } from './ppmt_sankey.js';
+import { regionChannelYoyChart } from './ppmt_region_yoy.js';
+import { ppmtGrowthChart } from './ppmt_growth.js';
+import { ppmtMarginsChart } from './ppmt_margins.js';
+import { ppmtBridgeChart } from './ppmt_bridge.js';
+import { ppmtCoreProfitChart } from './ppmt_core_profit.js';
+import { ppmtCoreMarginChart } from './ppmt_core_margin.js';
+import { ppmtIpShareChart } from './ppmt_ip_share.js';
+import { ppmtIpShareHistoryChart } from './ppmt_ip_share_history.js';
+import { ppmtIpExMonstersChart } from './ppmt_ip_ex_monsters.js';
+
+/** 图表构建函数注册表。manifest 只引用这里的 key，不直接引用 JS 函数。 */
+export const chartRegistry = {
+  'demo-inventory': inventoryChart,
+  'demo-margin': marginChart,
+  'demo-twoline': twoLineChart,
+  'demo-growth': growthChart,
+  'demo-fx': fxChart,
+  'ppmt-assets': assetsChart,
+  'ppmt-profit': profitChart,
+  'ppmt-ip': ipChart,
+  'ppmt-category': categoryChart,
+  'ppmt-sankey': sankeyChart,
+  'ppmt-region-yoy': regionChannelYoyChart,
+  'ppmt-growth': ppmtGrowthChart,
+  'ppmt-margins': ppmtMarginsChart,
+  'ppmt-bridge': ppmtBridgeChart,
+  'ppmt-core-profit': ppmtCoreProfitChart,
+  'ppmt-core-margin': ppmtCoreMarginChart,
+  'ppmt-ip-share': ppmtIpShareChart,
+  'ppmt-ip-share-history': ppmtIpShareHistoryChart,
+  'ppmt-ip-ex-monsters': ppmtIpExMonstersChart,
+};
+
+export function getChartBuilder(key) {
+  return chartRegistry[key];
+}

js/main.js

@@ -1,99 +1,192 @@
 import { loadCSV } from './csv.js';
-import { inventoryChart } from './charts/inventory.js';
-import { marginChart } from './charts/margin.js';
-import { twoLineChart } from './charts/twoline.js';
-import { growthChart } from './charts/growth.js';
-import { fxChart } from './charts/fx.js';
-import { assetsChart } from './charts/ppmt_assets.js';
-import { profitChart } from './charts/ppmt_profit.js';
-import { ipChart } from './charts/ppmt_ip.js';
-import { categoryChart } from './charts/ppmt_category.js';
-import { sankeyChart } from './charts/ppmt_sankey.js';
-import { regionChannelYoyChart } from './charts/ppmt_region_yoy.js';
-import { ppmtGrowthChart } from './charts/ppmt_growth.js';
-import { ppmtMarginsChart } from './charts/ppmt_margins.js';
-import { ppmtBridgeChart } from './charts/ppmt_bridge.js';
-import { ppmtCoreProfitChart } from './charts/ppmt_core_profit.js';
-import { ppmtCoreMarginChart } from './charts/ppmt_core_margin.js';
-import { ppmtIpShareChart } from './charts/ppmt_ip_share.js';
-import { ppmtIpShareHistoryChart } from './charts/ppmt_ip_share_history.js';
-import { ppmtIpExMonstersChart } from './charts/ppmt_ip_ex_monsters.js';
-
-/** 图表清单：加新图只需在这里加一行 */
-const CHARTS = [
-  // 示例图表
-  { id: 'chart-inventory', csv: 'data/inventory.csv', build: inventoryChart, height: 620 },
-  { id: 'chart-margin',    csv: 'data/margin.csv',    build: marginChart,    height: 620 },
-  { id: 'chart-twoline',   csv: 'data/margin.csv',    build: twoLineChart,   height: 620 },
-  { id: 'chart-growth',    csv: 'data/growth.csv',    build: growthChart,    height: 700 },
-  { id: 'chart-fx',        csv: 'data/fx.csv',        build: fxChart,        height: 780 },
-  // 泡泡玛特图表
-  { id: 'chart-ppmt-assets',   csv: 'data/ppmt_assets.csv',   build: assetsChart,   height: 680 },
-  { id: 'chart-ppmt-profit',   csv: 'data/ppmt_profit.csv',   build: profitChart,   height: 680 },
-  { id: 'chart-ppmt-ip',       csv: 'data/ppmt_ip.csv',       build: ipChart,       height: 720 },
-  { id: 'chart-ppmt-category', csv: 'data/ppmt_category.csv', build: categoryChart, height: 680 },
-  { id: 'chart-ppmt-sankey',   csv: 'data/ppmt_sankey_2026h1.csv', build: sankeyChart, height: 800 },
-  { id: 'chart-ppmt-region-yoy', csv: 'data/ppmt_region_channel_yoy.csv', build: regionChannelYoyChart, height: 620 },
-  { id: 'chart-ppmt-growth',     csv: 'data/ppmt_growth.csv',              build: ppmtGrowthChart,     height: 700 },
-  { id: 'chart-ppmt-margins',    csv: 'data/ppmt_margins.csv',             build: ppmtMarginsChart,    height: 680 },
-  { id: 'chart-ppmt-bridge',     csv: 'data/ppmt_margin_bridge.csv',       build: ppmtBridgeChart,     height: 700 },
-  { id: 'chart-ppmt-core',       csv: 'data/ppmt_core_profit.csv',         build: ppmtCoreProfitChart, height: 720 },
-  { id: 'chart-ppmt-core-margin', csv: 'data/ppmt_core_margin.csv',        build: ppmtCoreMarginChart, height: 680 },
-  { id: 'chart-ppmt-ip-share',    csv: 'data/ppmt_ip_share_2026h1.csv', build: ppmtIpShareChart,    height: 720 },
-  { id: 'chart-ppmt-ip-share-history', csv: 'data/ppmt_ip_share_history.csv', build: ppmtIpShareHistoryChart, height: 700 },
-  { id: 'chart-ppmt-ip-ex-monsters',   csv: 'data/ppmt_ip_ex_monsters.csv',   build: ppmtIpExMonstersChart,   height: 700 },
-];
+import { getChartBuilder } from './charts/index.js';
+import {
+  createAppShell,
+  renderAnchors,
+  renderCards,
+  renderCompanies,
+  renderTabs,
+  showChartError,
+} from './ui.js';
 
 const instances = new Map();
+const activeViews = new Map();
+let manifest;
+let shell;
+let state;
+let renderVersion = 0;
+let cacheToken = Date.now();
 
-async function render(spec) {
-  const el = document.getElementById(spec.id);
+function validateManifest(value) {
+  if (!Array.isArray(value?.companies) || value.companies.length === 0) {
+    throw new Error('manifest 缺少 companies');
+  }
+
+  const chartIds = new Set();
+  value.companies.forEach((company) => {
+    if (!company.id || !Array.isArray(company.tabs)) throw new Error('manifest 中存在无效公司配置');
+    const tabIds = new Set();
+    company.tabs.forEach((tab) => {
+      if (!tab.id || tabIds.has(tab.id)) throw new Error(`公司 ${company.id} 的 tab id 重复或为空`);
+      tabIds.add(tab.id);
+      (tab.charts || []).forEach((chart) => {
+        if (!chart.id || chartIds.has(chart.id)) throw new Error(`图表 id 重复或为空：${chart.id || '(空)'}`);
+        if (!getChartBuilder(chart.key)) throw new Error(`图表 ${chart.id} 引用了未注册 key：${chart.key}`);
+        if (Boolean(chart.csv) === Boolean(chart.views)) throw new Error(`图表 ${chart.id} 必须声明 csv 或 views 之一`);
+        if (chart.views && (!chart.defaultView || !chart.views[chart.defaultView])) {
+          throw new Error(`图表 ${chart.id} 的 defaultView 无效`);
+        }
+        chartIds.add(chart.id);
+      });
+    });
+  });
+}
+
+function getCompany(companyId) {
+  return manifest.companies.find((company) => company.id === companyId) || manifest.companies[0];
+}
+
+function getTab(company, tabId) {
+  return company.tabs.find((tab) => tab.id === tabId) || company.tabs[0];
+}
+
+function parseHash() {
+  const [path = '', query = ''] = window.location.hash.replace(/^#\/?/, '').split('?');
+  const [companyId, tabId, chartId] = path.split('/').filter(Boolean).map(decodeURIComponent);
+  const params = new URLSearchParams(query);
+  return { companyId, tabId, chartId, view: params.get('view') || undefined };
+}
+
+function normalizeState(nextState) {
+  const company = getCompany(nextState.companyId);
+  const tab = getTab(company, nextState.tabId);
+  const chart = tab.charts.find((item) => item.id === nextState.chartId);
+  const view = chart?.views && chart.views[nextState.view]
+    ? nextState.view
+    : chart?.defaultView;
+  if (chart?.views && view) activeViews.set(chart.id, view);
+  return { companyId: company.id, tabId: tab.id, chartId: chart?.id, view };
+}
+
+function serializeHash(nextState) {
+  const path = [nextState.companyId, nextState.tabId, nextState.chartId]
+    .filter(Boolean)
+    .map(encodeURIComponent)
+    .join('/');
+  return `#/${path}${nextState.view ? `?view=${encodeURIComponent(nextState.view)}` : ''}`;
+}
+
+function disposeAll() {
+  instances.forEach((chart) => chart.dispose());
+  instances.clear();
+}
+
+function chartSource(chart) {
+  if (!chart.views) return chart.csv;
+  const view = activeViews.get(chart.id) || chart.defaultView;
+  return chart.views[view];
+}
+
+async function renderChart(chart, version) {
+  const el = document.getElementById(`chart-${chart.id}`);
   if (!el) return;
+  const source = chartSource(chart);
 
   try {
-    // 加时间戳绕过缓存，改完 CSV 刷新就能看到
-    const rows = await loadCSV(`${spec.csv}?t=${Date.now()}`);
-    const chart = instances.get(spec.id) || echarts.init(el, null, { renderer: 'canvas' });
-    instances.set(spec.id, chart);
+    const rows = await loadCSV(`${source}?t=${cacheToken}`);
+    if (version !== renderVersion || !document.body.contains(el)) return;
 
+    const instance = echarts.init(el, null, { renderer: 'canvas' });
+    instances.set(chart.id, instance);
     const { width, height } = el.getBoundingClientRect();
-    chart.setOption(spec.build(rows, { width, height }), true);
-  } catch (err) {
-    el.innerHTML = `<div class="chart-error">${err.message}</div>`;
-    console.error(spec.id, err);
+    instance.setOption(getChartBuilder(chart.key)(rows, { width, height }), true);
+  } catch (error) {
+    if (version === renderVersion) showChartError(chart.id, error.message);
+    console.error(`渲染图表失败：${chart.id}`, error);
   }
 }
 
-async function renderAll() {
-  await Promise.all(CHARTS.map(render));
+function exportPNG(chartId, filename) {
+  const instance = instances.get(chartId);
+  if (!instance) return;
+  const anchor = document.createElement('a');
+  anchor.href = instance.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' });
+  anchor.download = `${filename}.png`;
+  anchor.click();
 }
 
-/** 导出当前图为 PNG，2 倍图，微信公众号里够清晰 */
-function exportPNG(id, filename) {
-  const chart = instances.get(id);
-  if (!chart) return;
-  const url = chart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' });
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = `${filename}.png`;
-  a.click();
+function updateHash(nextState) {
+  const hash = serializeHash(nextState);
+  if (window.location.hash === hash) {
+    state = normalizeState(nextState);
+    renderCurrent();
+    return;
+  }
+  window.location.hash = hash;
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-  renderAll();
+function selectAnchor(chartId) {
+  state = { ...state, chartId, view: activeViews.get(chartId) };
+  history.replaceState(null, '', serializeHash(state));
+  document.getElementById(`card-${chartId}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
 
-  document.getElementById('btn-reload').addEventListener('click', renderAll);
+function renderCurrent() {
+  state = normalizeState(state);
+  const company = getCompany(state.companyId);
+  const tab = getTab(company, state.tabId);
+  const version = ++renderVersion;
+  disposeAll();
 
-  document.querySelectorAll('[data-export]').forEach((btn) => {
-    btn.addEventListener('click', () => {
-      exportPNG(btn.dataset.export, btn.dataset.filename || btn.dataset.export);
+  renderCompanies(shell.companyNav, manifest.companies, company.id, (companyId) => {
+    updateHash({ companyId });
   });
+  renderTabs(shell.tabs, company.tabs, tab.id, (tabId) => {
+    updateHash({ companyId: company.id, tabId });
   });
+  renderCards(shell.cards, tab.charts || [], activeViews, {
+    onExport: exportPNG,
+    onSelectView: (chartId, view) => {
+      activeViews.set(chartId, view);
+      updateHash({ companyId: company.id, tabId: tab.id, chartId, view });
+    },
+  });
+  renderAnchors(shell.chartNav, tab.charts || [], selectAnchor);
+  Promise.all((tab.charts || []).map((chart) => renderChart(chart, version)));
+}
 
-  let timer;
-  window.addEventListener('resize', () => {
-    clearTimeout(timer);
-    // resize 后水印数量要跟着画布变，所以整体重绘而不是 chart.resize()
-    timer = setTimeout(renderAll, 200);
+async function start() {
+  try {
+    const response = await fetch('manifest.json');
+    if (!response.ok) throw new Error(`读取 manifest 失败：${response.status}`);
+    manifest = await response.json();
+    validateManifest(manifest);
+    shell = createAppShell(document.getElementById('app'), {
+      onReload: () => {
+        cacheToken = Date.now();
+        renderCurrent();
+      },
     });
+    state = normalizeState(parseHash());
+    if (!window.location.hash) history.replaceState(null, '', serializeHash(state));
+    renderCurrent();
+  } catch (error) {
+    document.getElementById('app').textContent = `初始化失败：${error.message}`;
+    console.error(error);
+  }
+}
+
+document.addEventListener('DOMContentLoaded', start);
+
+window.addEventListener('hashchange', () => {
+  if (!manifest) return;
+  state = normalizeState(parseHash());
+  renderCurrent();
+});
+
+let resizeTimer;
+window.addEventListener('resize', () => {
+  if (!shell) return;
+  clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(renderCurrent, 200);
 });

js/ui.js

@@ -0,0 +1,122 @@
+function element(tag, className, text) {
+  const el = document.createElement(tag);
+  if (className) el.className = className;
+  if (text !== undefined) el.textContent = text;
+  return el;
+}
+
+function button(label, { active = false, onClick, className = '' } = {}) {
+  const el = element('button', className, label);
+  el.type = 'button';
+  el.dataset.active = String(active);
+  if (onClick) el.addEventListener('click', onClick);
+  return el;
+}
+
+export function createAppShell(root, { onReload }) {
+  root.replaceChildren();
+
+  const header = element('header', 'app-header');
+  const brand = element('div', 'app-brand');
+  brand.append(element('h1', '', '财报图表'), element('p', '', '选择公司与分析维度，数据更新后可重新加载。'));
+  header.append(brand, button('重新加载数据', { onClick: onReload, className: 'reload-button' }));
+
+  const layout = element('div', 'app-layout');
+  const companyNav = element('aside', 'sidebar company-sidebar');
+  const content = element('main', 'content');
+  const tabs = element('nav', 'tabs');
+  const cards = element('div', 'cards');
+  content.append(tabs, cards);
+  const chartNav = element('aside', 'sidebar chart-sidebar');
+  layout.append(companyNav, content, chartNav);
+  root.append(header, layout);
+
+  return { companyNav, tabs, cards, chartNav };
+}
+
+export function renderCompanies(container, companies, activeCompanyId, onSelect) {
+  container.replaceChildren(element('h2', 'sidebar-title', '公司'));
+  const list = element('div', 'company-list');
+  companies.forEach((company) => {
+    list.append(button(company.name, {
+      active: company.id === activeCompanyId,
+      onClick: () => onSelect(company.id),
+      className: 'company-button',
+    }));
+  });
+  container.append(list);
+}
+
+export function renderTabs(container, tabs, activeTabId, onSelect) {
+  container.replaceChildren();
+  tabs.forEach((tab) => {
+    container.append(button(tab.name, {
+      active: tab.id === activeTabId,
+      onClick: () => onSelect(tab.id),
+      className: 'tab-button',
+    }));
+  });
+}
+
+export function renderCards(container, charts, activeViews, { onExport, onSelectView }) {
+  container.replaceChildren();
+  if (!charts.length) {
+    container.append(element('p', 'empty-state', '该分类暂时没有图表。'));
+    return;
+  }
+
+  charts.forEach((chart) => {
+    const card = element('section', 'card');
+    card.id = `card-${chart.id}`;
+    const bar = element('div', 'card-bar');
+    const heading = element('div', 'card-heading');
+    heading.append(element('h2', 'card-title', chart.title));
+
+    const viewNames = Object.keys(chart.views || {});
+    const activeView = activeViews.get(chart.id) || chart.defaultView || viewNames[0];
+    const source = chart.views ? chart.views[activeView] : chart.csv;
+    heading.append(element('span', 'src', source));
+    bar.append(heading);
+
+    if (viewNames.length > 1) {
+      const switcher = element('div', 'view-switcher');
+      const labels = { annual: '年度', halfyear: '半年', quarter: '季度' };
+      viewNames.forEach((view) => {
+        switcher.append(button(labels[view] || view, {
+          active: view === activeView,
+          onClick: () => onSelectView(chart.id, view),
+          className: 'view-button',
+        }));
+      });
+      bar.append(switcher);
+    }
+
+    bar.append(button('导出 PNG', {
+      onClick: () => onExport(chart.id, chart.filename || chart.title),
+      className: 'export-button',
+    }));
+    const chartEl = element('div', 'chart');
+    chartEl.id = `chart-${chart.id}`;
+    chartEl.style.height = `${chart.height || 680}px`;
+    card.append(bar, chartEl);
+    container.append(card);
+  });
+}
+
+export function renderAnchors(container, charts, onSelect) {
+  container.replaceChildren(element('h2', 'sidebar-title', '当前图表'));
+  const list = element('div', 'anchor-list');
+  charts.forEach((chart) => {
+    container.append(button(chart.title, {
+      onClick: () => onSelect(chart.id),
+      className: 'anchor-button',
+    }));
+  });
+  if (!charts.length) container.append(element('p', 'sidebar-empty', '暂无图表'));
+}
+
+export function showChartError(chartId, message) {
+  const chartEl = document.getElementById(`chart-${chartId}`);
+  if (!chartEl) return;
+  chartEl.replaceChildren(element('div', 'chart-error', message));
+}

manifest.json

@@ -0,0 +1,101 @@
+{
+  "companies": [
+    {
+      "id": "ppmt",
+      "name": "泡泡玛特",
+      "tabs": [
+        {
+          "id": "overview",
+          "name": "概览",
+          "charts": [
+            { "id": "ppmt-profit", "key": "ppmt-profit", "title": "盈利能力", "csv": "data/ppmt/ppmt_profit.csv", "height": 680, "filename": "泡泡玛特盈利能力" },
+            { "id": "ppmt-sankey", "key": "ppmt-sankey", "title": "利润流向", "csv": "data/ppmt/ppmt_sankey_2026h1.csv", "height": 800, "filename": "泡泡玛特利润流向2026H1" }
+          ]
+        },
+        {
+          "id": "growth",
+          "name": "成长性",
+          "charts": [
+            { "id": "ppmt-growth", "key": "ppmt-growth", "title": "营收到利润的增速对比", "csv": "data/ppmt/ppmt_growth.csv", "height": 700, "filename": "泡泡玛特营收到利润增速对比" }
+          ]
+        },
+        {
+          "id": "profitability",
+          "name": "盈利能力",
+          "charts": [
+            { "id": "ppmt-core-profit", "key": "ppmt-core-profit", "title": "核心利润及同比增速", "csv": "data/ppmt/ppmt_core_profit.csv", "height": 720, "filename": "泡泡玛特核心利润及同比增速" },
+            { "id": "ppmt-core-margin", "key": "ppmt-core-margin", "title": "核心利润率", "csv": "data/ppmt/ppmt_core_margin.csv", "height": 680, "filename": "泡泡玛特核心利润率" },
+            { "id": "ppmt-bridge", "key": "ppmt-bridge", "title": "净利率同比拆解", "csv": "data/ppmt/ppmt_margin_bridge.csv", "height": 700, "filename": "泡泡玛特净利率同比拆解" }
+          ]
+        },
+        {
+          "id": "expense",
+          "name": "费用率",
+          "charts": [
+            { "id": "ppmt-margins", "key": "ppmt-margins", "title": "利润率与费用率拆解", "csv": "data/ppmt/ppmt_margins.csv", "height": 680, "filename": "泡泡玛特利润率与费用率拆解" }
+          ]
+        },
+        {
+          "id": "balance-sheet",
+          "name": "资产负债",
+          "charts": [
+            { "id": "ppmt-assets", "key": "ppmt-assets", "title": "资产结构演变", "csv": "data/ppmt/ppmt_assets.csv", "height": 680, "filename": "泡泡玛特资产结构" }
+          ]
+        },
+        {
+          "id": "ip-category",
+          "name": "IP 与品类",
+          "charts": [
+            { "id": "ppmt-ip", "key": "ppmt-ip", "title": "主要 IP 收入趋势", "csv": "data/ppmt/ppmt_ip.csv", "height": 720, "filename": "泡泡玛特IP收入趋势" },
+            { "id": "ppmt-ip-share", "key": "ppmt-ip-share", "title": "主要 IP 收入占比", "csv": "data/ppmt/ppmt_ip_share_2026h1.csv", "height": 720, "filename": "泡泡玛特IP收入占比2026H1" },
+            { "id": "ppmt-ip-share-history", "key": "ppmt-ip-share-history", "title": "各 IP 半年收入占比", "csv": "data/ppmt/ppmt_ip_share_history.csv", "height": 700, "filename": "泡泡玛特各IP半年收入占比" },
+            { "id": "ppmt-ip-ex-monsters", "key": "ppmt-ip-ex-monsters", "title": "除 THE MONSTERS 外的 IP 收入及同比", "csv": "data/ppmt/ppmt_ip_ex_monsters.csv", "height": 700, "filename": "泡泡玛特除MONSTERS外IP收入及同比" },
+            { "id": "ppmt-category", "key": "ppmt-category", "title": "品类收入结构", "csv": "data/ppmt/ppmt_category.csv", "height": 680, "filename": "泡泡玛特品类结构" }
+          ]
+        },
+        {
+          "id": "region-channel",
+          "name": "区域渠道",
+          "charts": [
+            { "id": "ppmt-region-yoy", "key": "ppmt-region-yoy", "title": "区域渠道同比增速", "csv": "data/ppmt/ppmt_region_channel_yoy.csv", "height": 620, "filename": "泡泡玛特区域渠道同比增速" }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "demo",
+      "name": "示例",
+      "tabs": [
+        {
+          "id": "operations",
+          "name": "营运",
+          "charts": [
+            { "id": "demo-inventory", "key": "demo-inventory", "title": "存货、营收与存货周转天数", "csv": "data/demo/inventory.csv", "height": 620, "filename": "存货与周转天数" }
+          ]
+        },
+        {
+          "id": "profitability",
+          "name": "盈利能力",
+          "charts": [
+            { "id": "demo-margin", "key": "demo-margin", "title": "利润率与费用率拆解", "csv": "data/demo/margin.csv", "height": 620, "filename": "利润率与费用率拆解" },
+            { "id": "demo-twoline", "key": "demo-twoline", "title": "毛利率与非国际净利率", "csv": "data/demo/margin.csv", "height": 620, "filename": "毛利率与非国际净利率" }
+          ]
+        },
+        {
+          "id": "growth",
+          "name": "成长性",
+          "charts": [
+            { "id": "demo-growth", "key": "demo-growth", "title": "营收到利润的增速对比", "csv": "data/demo/growth.csv", "height": 700, "filename": "营收到利润的增速对比" }
+          ]
+        },
+        {
+          "id": "market",
+          "name": "汇率",
+          "charts": [
+            { "id": "demo-fx", "key": "demo-fx", "title": "人民币汇率两种口径", "csv": "data/demo/fx.csv", "height": 780, "filename": "人民币汇率两种口径" }
+          ]
+        }
+      ]
+    }
+  ]
+}

test/regress.mjs

@@ -1,98 +1,100 @@
 import * as echarts from 'echarts';
-import fs from 'fs';
-// 项目根目录（从 test/regress.mjs 向上一层，或直接指定绝对路径）
-const P = '/Users/joey/sites/vest-tools/echart-demo/';
-const {parseCSV}=await import(P+'js/csv.js');
-const all=[
-  ['inventory','inventoryChart','data/inventory.csv'],
-  ['margin','marginChart','data/margin.csv'],
-  ['twoline','twoLineChart','data/margin.csv'],
-  ['growth','growthChart','data/growth.csv'],
-  ['fx','fxChart','data/fx.csv'],
-  ['ppmt_assets','assetsChart','data/ppmt_assets.csv'],
-  ['ppmt_profit','profitChart','data/ppmt_profit.csv'],
-  ['ppmt_ip','ipChart','data/ppmt_ip.csv'],
-  ['ppmt_category','categoryChart','data/ppmt_category.csv'],
-  ['ppmt_sankey','sankeyChart','data/ppmt_sankey_2026h1.csv'],
-  ['ppmt_region_yoy','regionChannelYoyChart','data/ppmt_region_channel_yoy.csv'],
-  ['ppmt_growth','ppmtGrowthChart','data/ppmt_growth.csv'],
-  ['ppmt_margins','ppmtMarginsChart','data/ppmt_margins.csv'],
-  ['ppmt_bridge','ppmtBridgeChart','data/ppmt_margin_bridge.csv'],
-  ['ppmt_core_profit','ppmtCoreProfitChart','data/ppmt_core_profit.csv'],
-  ['ppmt_core_margin','ppmtCoreMarginChart','data/ppmt_core_margin.csv'],
-  ['ppmt_ip_share','ppmtIpShareChart','data/ppmt_ip_share_2026h1.csv'],
-  ['ppmt_ip_share_history','ppmtIpShareHistoryChart','data/ppmt_ip_share_history.csv'],
-  ['ppmt_ip_ex_monsters','ppmtIpExMonstersChart','data/ppmt_ip_ex_monsters.csv'],
-];
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { parseCSV } from '../js/csv.js';
+import { getChartBuilder } from '../js/charts/index.js';
 
-// 可传图表名只跑指定的（改一张图不用全量回归）：
-// node test/regress.mjs ppmt_ip_share ppmt_core_margin
-const only=process.argv.slice(2);
-const targets=only.length>0 ? all.filter(([f])=>only.includes(f)) : all;
-if(only.length>0){
-  const missing=only.filter(f=>!all.some(([name])=>name===f));
-  if(missing.length>0) console.log(`⚠ 未找到图表：${missing.join(', ')}`);
-}
-
-// 样式规范断言：从核心利润/利润率拆解图总结的标准
-const STYLE_RULES={
-  legendTop:85,       // 固定值：副标题到图例约25px
-  gridTop:145,        // 固定值：图例到绘图区约60px
-  lineSeries:{        // 折线标准样式（空心圆点）
-    symbolSize:9,
-    borderWidth:2.5,
-    fill:'#fff',      // 白心
-  },
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const manifest = JSON.parse(fs.readFileSync(path.join(ROOT, 'manifest.json'), 'utf8'));
+const STYLE_RULES = {
+  legendTop: 85,
+  gridTop: 145,
+  lineSeries: { symbolSize: 9, borderWidth: 2.5 },
 };
 
-let ok=0,fail=0,styleWarnings=[];
-for(const [f,fn,csv] of targets){
-  try{
-    const mod=await import(P+`js/charts/${f}.js`);
-    const rows=parseCSV(fs.readFileSync(P+csv,'utf8'));
-    const c=echarts.init(null,null,{renderer:'svg',ssr:true,width:1100,height:720});
-    const opt=mod[fn](rows,{width:1100,height:720});
-    c.setOption(opt);
-    const svg=c.renderToSVGString();
-
-    // 1. SVG 格式检查（字体引号）
-    const badAttr=/style="[^"]*"[^"=>\s][^>]*>/.test(svg.slice(0,3000));
-
-    // 2. 样式规范检查（跳过无图例的图表）
-    if(opt.legend?.top!==undefined){
-      if(opt.legend.top!==STYLE_RULES.legendTop){
-        styleWarnings.push(`${f}: legend.top=${opt.legend.top} (期望${STYLE_RULES.legendTop})`);
+function entriesFromManifest(value) {
+  const ids = new Set();
+  const entries = [];
+  value.companies.forEach((company) => company.tabs.forEach((tab) => (tab.charts || []).forEach((chart) => {
+    if (!chart.id || ids.has(chart.id)) throw new Error(`manifest 图表 id 重复或为空：${chart.id || '(空)'}`);
+    ids.add(chart.id);
+    if (!getChartBuilder(chart.key)) throw new Error(`manifest 图表 ${chart.id} 引用了未注册 key：${chart.key}`);
+    if (Boolean(chart.csv) === Boolean(chart.views)) {
+      throw new Error(`manifest 图表 ${chart.id} 必须声明 csv 或 views 之一`);
     }
+    if (chart.views && (!chart.defaultView || !chart.views[chart.defaultView])) {
+      throw new Error(`manifest 图表 ${chart.id} 的 defaultView 无效`);
     }
-    if(opt.grid?.top!==undefined && opt.legend?.top!==undefined){
-      if(opt.grid.top!==STYLE_RULES.gridTop){
-        styleWarnings.push(`${f}: grid.top=${opt.grid.top} (期望${STYLE_RULES.gridTop})`);
+    const sources = chart.views
+      ? Object.entries(chart.views).map(([view, csv]) => ({ view, csv }))
+      : [{ view: null, csv: chart.csv }];
+    if (!sources.every(({ csv }) => typeof csv === 'string' && csv.length > 0)) {
+      throw new Error(`manifest 图表 ${chart.id} 缺少 CSV`);
     }
-    }
-
-    // 3. 折线圆点样式检查（在 SVG 里验证 symbolSize 和 borderWidth）
-    const circles=[...svg.matchAll(/<path d="M1 0A1[^"]*" transform="matrix\(([\d.]+),0,0,[\d.]+,[^)]+\)" fill="#fff" stroke="[^"]*" stroke-width="([\d.]+)"/g)];
-    if(circles.length>0){
-      const scale=+circles[0][1], sw=+circles[0][2];
-      const symbolSize=scale*2, borderWidth=sw*scale;
-      if(Math.abs(symbolSize-STYLE_RULES.lineSeries.symbolSize)>0.1){
-        styleWarnings.push(`${f}: 折线 symbolSize=${symbolSize.toFixed(1)} (期望${STYLE_RULES.lineSeries.symbolSize})`);
-      }
-      if(Math.abs(borderWidth-STYLE_RULES.lineSeries.borderWidth)>0.1){
-        styleWarnings.push(`${f}: 折线 borderWidth=${borderWidth.toFixed(1)} (期望${STYLE_RULES.lineSeries.borderWidth})`);
-      }
-    }
-
-    console.log(`${badAttr?'⚠':'✓'} ${f.padEnd(17)} ${String(svg.length).padStart(6)}B`);
-    ok++; c.dispose();
-  }catch(e){console.log(`✗ ${f.padEnd(17)} ${e.message}`);fail++;}
+    sources.forEach(({ view, csv }) => entries.push({ ...chart, company, tab, view, csv }));
+  })));
+  return entries;
 }
-console.log(`\n${ok} 张成功 / ${fail} 张失败`);
 
-if(styleWarnings.length>0){
+const all = entriesFromManifest(manifest);
+const only = process.argv.slice(2);
+const targets = only.length === 0
+  ? all
+  : all.filter((entry) => only.includes(entry.id) || only.includes(entry.key));
+const unknown = only.filter((target) => !all.some((entry) => entry.id === target || entry.key === target));
+
+if (unknown.length) console.log(`⚠ 未找到图表：${unknown.join(', ')}`);
+
+let ok = 0;
+let fail = 0;
+const styleWarnings = [];
+
+for (const entry of targets) {
+  const label = entry.view ? `${entry.id}:${entry.view}` : entry.id;
+  try {
+    const csvPath = path.resolve(ROOT, entry.csv);
+    if (!csvPath.startsWith(`${ROOT}${path.sep}`)) throw new Error(`CSV 路径越过项目根目录：${entry.csv}`);
+    const rows = parseCSV(fs.readFileSync(csvPath, 'utf8'));
+    const chart = echarts.init(null, null, { renderer: 'svg', ssr: true, width: 1100, height: 720 });
+    const option = getChartBuilder(entry.key)(rows, { width: 1100, height: 720 });
+    chart.setOption(option);
+    const svg = chart.renderToSVGString();
+    chart.dispose();
+
+    const badAttr = /style="[^"]*"[^"=>\s][^>]*>/.test(svg.slice(0, 3000));
+    if (option.legend?.top !== undefined && option.legend.top !== STYLE_RULES.legendTop) {
+      styleWarnings.push(`${label}: legend.top=${option.legend.top} (期望 ${STYLE_RULES.legendTop})`);
+    }
+    if (option.grid?.top !== undefined && option.legend?.top !== undefined && option.grid.top !== STYLE_RULES.gridTop) {
+      styleWarnings.push(`${label}: grid.top=${option.grid.top} (期望 ${STYLE_RULES.gridTop})`);
+    }
+    const circles = [...svg.matchAll(/<path d="M1 0A1[^"]*" transform="matrix\(([\d.]+),0,0,[\d.]+,[^)]+\)" fill="#fff" stroke="[^"]*" stroke-width="([\d.]+)"/g)];
+    if (circles.length > 0) {
+      const scale = +circles[0][1];
+      const strokeWidth = +circles[0][2];
+      if (Math.abs(scale * 2 - STYLE_RULES.lineSeries.symbolSize) > 0.1) {
+        styleWarnings.push(`${label}: 折线 symbolSize=${(scale * 2).toFixed(1)} (期望 ${STYLE_RULES.lineSeries.symbolSize})`);
+      }
+      if (Math.abs(strokeWidth * scale - STYLE_RULES.lineSeries.borderWidth) > 0.1) {
+        styleWarnings.push(`${label}: 折线 borderWidth=${(strokeWidth * scale).toFixed(1)} (期望 ${STYLE_RULES.lineSeries.borderWidth})`);
+      }
+    }
+
+    console.log(`${badAttr ? '⚠' : '✓'} ${label.padEnd(30)} ${String(svg.length).padStart(6)}B`);
+    ok += 1;
+  } catch (error) {
+    console.log(`✗ ${label.padEnd(30)} ${error.message}`);
+    fail += 1;
+  }
+}
+
+console.log(`\n${ok} 张成功 / ${fail} 张失败`);
+if (styleWarnings.length) {
   console.log(`\n⚠ ${styleWarnings.length} 处样式偏离规范:`);
-  styleWarnings.forEach(w=>console.log(`   ${w}`));
-}else{
+  styleWarnings.forEach((warning) => console.log(`   ${warning}`));
+} else {
   console.log('✓ 样式规范全部符合');
 }
-process.exit(fail>0?1:0);
+
+process.exit(fail > 0 || unknown.length > 0 ? 1 : 0);