项目:html5-dataviz | 版本:v1.2 | 生成日期:2026-10-06 | 依据:源码分析
本章是文档集(00~20 共 21 篇)的最后一篇,承担三个收尾职责:其一,术语表——把散落在各篇的专有名词(清单+约定、双链路、渲染代次、大屏双真源等)收敛为一页对照表,每条给出定义、源码锚点与"详见篇目",让新维护者不必通读全集也能建立共同语言;其二,源码文件与篇目的反向索引——拿着一个文件名查"哪几篇讲过它",是改代码前查文档的最短路径;其三,按任务组织的阅读路径——四类高频任务(加案例、加图表库、排查渲染失败、上线检查)各给出一条带顺序的阅读清单,回答"我现在要做 X,应该按什么顺序读哪几节的哪几段"。
整套文档的分工原则在此重申一遍:0002 讲"是什么"(总览、架构、页面),0305 讲"怎么约定"(接口、数据、流程),06 讲"怎么跑",0708 讲"核心模块与安全面",0910 讲"质量与性能",1112 讲"怎么扩展与怎么排查",1314 讲"债务与配置",15 讲"契约现状",1618(本次新增)讲"为什么这么设计、依赖长什么样、代码怎么读",1920(本次新增)讲"样例可抄、术语可查"。篇与篇之间的重复内容一律以"见《0X-xxx》"引用消化,不再各自展开。
按"渲染体系 → 数据体系 → 大屏体系 → 工程设施"四组归类,表内"锚点"列为源码中的定义或核心实现位置。
本组是本项目术语密度最高的一组:双链路、渲染代次、沙箱编译三个词各有专属机制篇,且彼此存在依赖关系——渲染代次保护的是双链路中所有异步边界,沙箱编译是双链路中 component 分支的执行方式,而"清单+约定"是双链路得以分叉的前提。首次阅读建议按表中行序推进,即先理解注册模式再理解分派,最后理解两类执行体各自的竞态与安全语义。
| 术语 | 定义 | 锚点 | 详见 |
|---|---|---|---|
| 清单+约定 | 案例接入的注册模式:manifest 静态清单回答"有没有本地 SFC","id 即文件名"的目录约定完成零注册接入,新增案例不改任何路由或组件注册代码 | src/chart-examples/manifest.ts、LOCAL_LIBRARY_MANIFESTS | 《01》5.1、《03》1.1 |
| 双链路 | 详情页渲染的两条路径:本地 SFC 直挂(优先,1617 条)与 JSON 代码求值(兜底,71 条),分叉点是 tryLoadLocal 的 manifest 命中判断 | src/views/ChartExampleDetailPage.vue | 《05》流程二/三、《16》ADR-003 |
| 方案 B | 本地 SFC 直挂链路的内部称呼(源码注释"方案 B:直接落 .vue 文件"),相对早期"JSON 代码字符串执行"方案而言 | src/views/ChartExampleDetailPage.vue 注释 | 《00》8 |
| loaderKind | JSON 条目的渲染分派判别字段,五个取值:local / option / api-async / antv-config / component | src/types/chart-examples.ts、Renderer 的 switch | 《15》第 3 节 |
| 兜底条目 / 兜底求值 | 无本地 SFC、仅存在于 JSON 且保留代码字段的条目(54 echarts + 17 antv)及其渲染方式:renderEchartsOption 的九形参 new Function 或 renderAntvConfig 的 G2Plot 实例化 | src/components/chart-examples/ChartExampleRenderer.vue | 《07》第 3 节、《18》2.2~2.3 |
| 类型优先路由 | usesSfc 的分派判据:loaderKind 属于 option/api-async/antv-config 且带 optionCode 的条目即使残留 componentCode 也不进 SFC 编译链(修复过 54 条目被劫持进编译链的事故) | ChartExampleRenderer.vue 的 OPTION_KINDS | 《18》2.1 |
| 二分求值 | antv 兜底脚本按形态选择两种包装:以 return 开头按函数体执行,裸对象按表达式 return (code) 求值 | ChartExampleRenderer.vue 的 renderAntvConfig | 《18》2.3 |
| EChartDemo 执行契约 | 294 个 echarts 本地 SFC 与容器组件的约定:option/onReady/setup/scripts 四个 props 的语义与刚性执行顺序,"只能收紧不能变更" | src/chart-examples/EChartDemo.vue 头注释 | 《07》第 4 节、《19》第 3 节 |
| ChartContext | EChartDemo 提供给钩子的七件套上下文:echarts / myChart / setOption / registerMap / registerTransform / loadScript / fetchJson | 同文件 buildContext() | 《15》第 4 节 |
| myChart 延迟代理 | 用 ES Proxy 保持官方脚本 myChart.setOption 书写语义:实例未就绪时 no-op + console.warn,就绪后按方法名分派转发 | 同文件 buildMyChartProxy() | 《18》3.2 |
| waitForInstance | 有界等待 vue-echarts 底层实例就绪:32ms 步进轮询、1500ms 超时,替代曾是竞态来源的单次 nextTick 探测 | 同文件 | 《18》3.1 |
| 沙箱编译 | 在浏览器端把 SFC 字符串编译为 Vue 组件的完整管线:TS 降级 → parse → compileScript/Template/Style → 依赖收集 → import 重写 → 危险模式校验 → new Function 执行 → buildSfcComponent 包装 | src/utils/sfcRuntime.ts | 《07》第 5 节、《18》第 1 节 |
| 危险模式拦截 | 沙箱执行前的九条正则校验(eval/new Function/WebSocket/document.write/location 赋值/top·parent)+ 50 万字符上限,定位是行为护栏而非安全边界 | sfcRuntime.ts 的 DANGEROUS_RUNTIME_PATTERNS | 《08》第 2 节 |
| 模块白名单 | 沙箱内 import 的唯一放行依据:npm 注册表(11 项)+ 内部注册表 + @/ 别名 glob 自动发现 + MissingModuleStub 兜底,静态/动态两条 import 路径共享同一依赖收集结果 | src/utils/sfc-modules.ts | 《08》第 3 节 |
| MissingModuleStub | 沙箱解析不到模块时返回的橙色虚线占位组件("⚠ 组件缺失:{source}"),既不静默空白也不告警刷屏 | sfc-modules.ts 的 ensureModule 尾段 | 《08》第 3 节 |
| 懒注册 | VueSfcRenderer 首次编译前才把 v-chart/VChart 注册进沙箱组件表(ensureSandboxVChart),避免全局注册让主包背上 echarts | src/components/chart-examples/VueSfcRenderer.vue 头部 | 《03》4 |
| 渲染代次 | 递增代次号 + 每个 await 续体处比对的竞态保护模式(last-request-wins),四处独立实现:requestId / renderSeq / compileSeq / loadId | 四处实现见《07》第 7 节对比表 | 《07》第 7 节、《16》ADR-008 |
| 过期自弃 | 渲染代次的过期分支行为:不是纯 return,而是"先清理自己已产生的副作用(dispose 实例、撤 style)再 return" | Renderer/VueSfcRenderer 的 gen 比对分支 | 《18》2.2 |
| 软取消 / 真取消 | 代次保护的两种力度:软取消任其跑完但丢弃结果(echarts init/SFC 编译无取消句柄),真取消叠加 AbortController(仅 useResourceFetch 的 fetch 层) | src/composables/useResourceFetch.ts | 《07》第 7 节 |
| WebGL context 上限防护 | three 壳 dispose 序列末尾的 renderer.forceContextLoss(),防反复重挂载撞浏览器 8~16 个 context 上限(黑画布不可恢复) | src/chart-examples/three/stage/useExampleStage.ts | 《10》第 4 节、《16》ADR-007 |
| 外链清零 | 运行时不发起任何第三方 CDN 功能性请求的硬约束(内网部署前提):import 级 alias 重映射 + 字符串级本地化 + smoke 断言;唯一例外 Google Fonts | vite.config.ts alias、scripts/smoke.mjs EXTERNAL_HOST | 《08》第 6 节、《16》ADR-009 |
数据体系术语的主线是"文件系统即数据库"背景下的一致性手段:元数据 JSON 与 manifest 投影是同一事实的两份存储,守恒测试是它们的一致性仲裁者,slim 瘦身与缓存 Promise 则分别治理"体积冗余"与"重复加载"两类衍生问题。理解本组术语的钥匙是《04-数据模型》第 5 节的数据生命周期四阶段——每个术语都落在生成期/构建期/运行期/销毁期的某个具体阶段上。
| 术语 | 定义 | 锚点 | 详见 |
|---|---|---|---|
| 元数据 JSON | 三库(当前四库)案例的全量 19 字段数据集,动态 import 按库切 chunk,服务列表页 | src/data/charts/*.json | 《04》第 1 节 |
| manifest 投影 | 清单条目是 JSON 条目的四字段子集(id/title/category/tags + 可选 globals),随入口静态打包,换来详情页零延迟命中判断 | src/chart-examples/manifest.ts | 《15》第 1 节 |
| 代码字段守恒 | 机器锁定的数据不变式:有本地 SFC 的条目必无 optionCode/componentCode/initCode,兜底条目必带至少一个 | src/data/charts/__tests__/charts-data.test.ts | 《09》第 2 节 |
| 守恒测试 | 以硬编码数字与集合关系锁定数据规模的测试族:charts-data(条数/字段/守恒)、three-data、webgl-data、bigscreenComponents | src/data/charts/__tests__/、src/config/__tests__/ | 《09》第 2~4 节 |
| slim 瘦身 | 生成期最后一步:对有本地 SFC 的条目删除代码字段("SFC 是唯一真源"),判定逻辑与守恒测试同源 | scripts/slim-chart-json.mjs | 《04》第 5 节 |
| datasetCache | 数据访问层"缓存 Promise 而非数据"的库级单次加载机制,失败清缓存允许重试 | src/api/chart-examples.ts | 《05》流程四 |
| globals 注入 | manifest 的 Record 字段经详情页透传给示例组件,注入资产根路径(ASSET_HOST/FILE_HOST/HOST)的唯一通道 | ChartExampleDetailPage.vue 的 tryLoadLocal | 《07》2.2 |
| __source | three.json 的 schema 外溯源字段(六种迁移源),gen 脚本按源合并重跑用,运行时不消费 | three.json | 《04》第 2 节 |
| /echarts-data 前缀 | ECharts 官方数据的运行时资产根约定:EChartDemo.fetchJson 一律拼前缀、Renderer.fetchJson 相对路径拼前缀、沙箱注入 ROOT_PATH 变量,三处语义一致 | public/echarts-data/ | 《04》3.1 |
| 引用裁剪 | 批量迁移的资产策略:扫描拷入源码中的静态路径字面量,只拷贝真实命中的文件(800MB 资产是裁剪后的结果) | scripts/gen-three-registry.mjs 第 3 步 | 《10》第 7 节、《16》ADR-010 |
大屏体系与图表示例体系是两套平行的注册(图表走"清单+约定",大屏走"双真源手工表"),因此术语几乎不与 1.1/1.2 组重叠。它的特殊工程约束是长时驻留:监控大屏可能连续运行数天,任何微小泄漏都会按天放大,这解释了本组术语中"单一时钟源""清理纪律"等表述的存在。
| 术语 | 定义 | 锚点 | 详见 |
|---|---|---|---|
| 大屏双真源 | 大屏注册的两张手工维护表:bigscreenData.ts(元数据真源)与 bigscreenComponents.ts(组件加载真源),一一对应由测试双向锁定 | src/config/bigscreenData.ts、bigscreenComponents.ts | 《07》第 6 节、《19》第 5 节 |
| DatavContainer | 大屏通用缩放容器:1920×1080 设计稿基准,按视口宽高分别算 scale 后 transform 缩放,防抖 resize + MutationObserver | src/components/datav/DatavContainer.vue | 《02》第 7 节、《10》第 5 节 |
| 大屏三数据模式 | 大屏数据装配的三种形态:组件内联模拟数据 / useScreenData 3 秒定时自增(单一时钟源)/ reportStore 直连 public 静态 JSON | src/composables/useScreenData.ts、src/stores/reportStore.ts | 《05》流程五 |
| darkEchartsTheme | 大屏 ECharts 暗色主题对象(8 色板 + 轴/图例/提示框样式),dashboardDark.ts 是它的 3 行再导出 | src/utils/echarts-theme.ts | 《01》2.3 |
| 大屏迁移存量 | eslint 豁免的 20 个 bigscreen 子目录(逐步治理中),business/report/dashboard 三个显式保持 lint 覆盖 | eslint.config.js ignores | 《13》第 8 条 |
本组收录横跨渲染/数据/大屏三域的构建与质量设施:分包规则、缓存双表、自动注册、测试工具族。它们的特点是"改一处、动全局"——vendor 桶规则、守恒测试数字、smoke 断言正则都属于牵一发动全身的枢纽,因此每条都标注了对应的变更检查位置(详见列的篇目大多有检查单或回归清单)。
| 术语 | 定义 | 锚点 | 详见 |
|---|---|---|---|
| vendor 五桶 | manualChunks 的函数式分包:echarts-gl-vendor / echarts-vendor / antv-vendor / three-vendor / vendor(框架运行时),两条不变式为"src 不进桶""echarts-gl 先于 echarts 判定" | vite.config.ts build.rollupOptions | 《10》第 2 节、《16》ADR-006 |
| 9.3MB 事故 | Vue 运行时曾被并进 echarts-vendor、入口 modulepreload 9.3MB echarts 的历史事故,修复为 vendor 桶拆分 + v-chart 改异步组件 | vite.config.ts manualChunks 注释 | 《10》2.2 |
| glob 双表 | 详情页模块顶层的两个 import.meta.glob:localModules(组件加载器)与 localSources(?raw 源码加载器),后者支撑源码弹窗与下载且不占组件 chunk 体积 | src/views/ChartExampleDetailPage.vue | 《10》第 3 节 |
| unplugin 双件套 | AutoImport(EP API 转换)与 Components(29 个组件全局按需注册),生成 auto-imports.d.ts / components.d.ts 两个勿手改产物 | vite.config.ts plugins | 《14》第 5 节 |
| 设计令牌 | src/assets/main.css 中以 --*-rgb 命名的 RGB 变量体系,Tailwind 4 经 @theme inline 映射为工具类,暗/亮主题切换只换变量值 | src/assets/main.css、src/composables/useTheme.ts | 《00》8 |
| KeepAlive 名单 | App.vue 动态收集带 meta.keepAliveComponent 的路由作为缓存名单,当前仅图表库列表页(滚动位置恢复配套) | src/App.vue | 《02》第 1 节 |
| smoke | Playwright 冒烟测试:10 页面遍历 + canvas/错误态断言 + 源码弹窗 + GL 兜底探针 + 外链零请求断言 + 截图到 smoke-shots/(运行产物) | scripts/smoke.mjs | 《06》4.2、《09》第 6 节 |
| sweep 脚本族 | 兜底/迁移条目的全量渲染清扫工具(sweep-fallback/sweep-three/sweep-webgl),逐条实测 canvas 与错误态,是渲染正确性唯一成体系的验证 | scripts/sweep-*.mjs | 《11》SOP-F |
| 生成器族 | 从上游源批量迁移案例的脚本:gen-charts-local(server 侧,缺失)、gen-three-registry、gen-webgl-registry,含资产裁剪与一致性校验(失败退出码 1) | scripts/gen-*.mjs | 《16》ADR-010、《11》SOP-D |
| demo-container | echarts 本地 SFC 的统一根容器类(demo-container + min-height 280px 的 scoped 块),294 个 SFC 形态一致的基础 | src/chart-examples/echarts/** | 《19》3.1 |
| 60 帧等待 | VueSfcRenderer 编译前等待容器获得非零高度的逻辑(MAX_LAYOUT_WAIT_FRAMES=60,rAF 步进),避免父级未完成布局时编译后立即测量失败 | VueSfcRenderer.vue 的 compileWhenReady | 《10》第 6 节 |
| VITE_SFC_RUNTIME_DEBUG | 仅 DEV 生效的沙箱编译调试开关:输出 import 残留告警、执行失败详情与 runtimeBody 摘要 | src/utils/sfcRuntime.ts 头部 | 《12》第 6 节 |
反向索引的用法是"拿着文件名查文档":改某个文件前先在表中定位该行,按"→ 篇目"列的优先级顺序读前两篇即可覆盖该文件 80% 以上的设计上下文;若本次改动涉及行为面变化,再顺藤核对"契约测试"类篇目(《09》《15》)确认是否有用例需要同步。表格按源码目录层级排列(构建配置与脚本置于表尾),首列即源码路径,可直接按目录前缀检索。
改某个文件前先查此表,"→ 篇目"列按阅读优先级排序(分派器/容器等核心文件被多篇覆盖,首篇是机制主篇):
| 源码文件/目录 | → 篇目(优先级序) |
|---|---|
src/main.ts(入口装配) | 《01》第 1 节 →《14》第 5 节(EP 样式显式引入) |
src/App.vue(布局壳/KeepAlive) | 《02》第 1 节 →《20》1.4(KeepAlive 名单) |
src/router/routes.ts、index.ts | 《02》第 1 节 →《09》(面包屑回归测试) |
src/api/chart-examples.ts | 《05》流程四 →《03》第 2 节 →《09》第 5 节(语义测试)→《16》ADR-001 |
src/chart-examples/manifest.ts(含 LOCAL_LIBRARY_MANIFESTS) | 《07》第 2 节 →《15》第 1 节 →《13》第 1 条(生成器缺失)→《19》第 1 节 |
src/chart-examples/three-manifest.ts / webgl-manifest.ts | 《19》第 1 节 →《09》第 3 节(对齐测试) |
src/chart-examples/EChartDemo.vue | 《18》第 3 节(走读)→《07》第 4 节 →《15》第 4 节 →《05》流程二 |
src/chart-examples/loadScript.ts | 《08》第 4 节(AMD 屏蔽)→《03》第 4 节 |
src/chart-examples/echarts/**(294 个 SFC) | 《19》第 3 节(三模式模板)→《06》第 5 节(SOP) |
src/chart-examples/antv/**(334 个 SFC) | 《19》4.1 →《02》第 6 节(代表案例) |
src/chart-examples/three/**(989 个 SFC + 壳 + stage) | 《02》4.2(dpr 示例)→《10》第 4 节(context 防护)→《11》SOP-E |
src/chart-examples/webgl/**(325 个 SFC + 壳) | 《19》4.3 →《17》2.3(别名与依赖策略) |
src/components/chart-examples/ChartExampleRenderer.vue | 《18》第 2 节(走读)→《07》第 3 节 →《15》第 3 节 |
src/components/chart-examples/VueSfcRenderer.vue | 《07》5.3 →《15》第 5 节 →《10》第 6 节(lazy 与 60 帧) |
src/components/chart-examples/SourceCodeModal.vue | 《03》3.4 →《02》第 3 节 |
src/utils/sfcRuntime.ts | 《18》第 1 节(走读)→《07》第 5 节 →《08》第 2 节(安全) |
src/utils/sfc-modules.ts | 《08》第 3 节(白名单)→《18》1.3(依赖收集) |
src/utils/sfc-typescript.ts | 《07》5.2(跨行正则教训) |
src/utils/v-chart.ts | 《01》2.1 →《10》2.2(9.3MB 事故关联) |
src/utils/echarts-theme.ts、src/config/dashboardDark.ts | 《01》2.3 →《02》第 7 节 |
src/utils/map-data.ts、highlighter.ts、logger.ts | 《15》第 6 节 →《12》第 6 节 |
src/composables/useResourceFetch.ts | 《07》第 7 节(requestId)→《03》第 4 节 |
src/composables/useListFilter.ts、usePagination.ts | 《02》第 2 节 →《03》第 4 节 |
src/composables/useMapGeoJson.ts | 《03》第 4 节 →《07》第 7 节(loadId) |
src/composables/useTheme.ts | 《02》第 5 节(effectScope 单例) |
src/composables/useScreenData.ts | 《10》第 5 节(单一时钟源) |
src/config/chartLibraries.ts | 《11》SOP-C →《02》第 2 节 |
src/config/bigscreenData.ts、bigscreenComponents.ts | 《19》第 5 节 →《07》第 6 节 →《09》第 4 节 |
src/config/bigscreenTokens.ts | 《07》6.2 |
src/stores/reportStore.ts | 《02》第 5 节 →《04》第 6 节 |
src/data/charts/*.json | 《04》第 1~2 节 →《19》第 2 节 →《09》第 2 节 |
src/types/chart-examples.ts | 《15》第 2 节 →《04》第 1 节 |
src/views/ChartLibraryPage.vue | 《02》第 2 节 →《05》流程一 |
src/views/ChartExampleDetailPage.vue | 《02》第 3 节 →《05》流程二 →《10》第 3 节(glob 双表) |
src/views/bigscreen/**(22 个大屏 + 壳页) | 《02》第 7 节 →《07》第 6 节 →《10》第 5 节 |
vite.config.ts | 《14》第 2 节(逐段)→《10》第 2 节(分包事故)→《08》第 6 节(alias 清零)→《16》ADR-006/009 |
tsconfig.json、tsconfig.node.json | 《14》第 4 节 →《13》第 7 条(three 排除) |
vitest.config.ts、vitest.setup.ts | 《14》第 6 节 →《06》4.1 |
eslint.config.js、.prettierrc | 《14》第 7 节 →《13》第 8 条 |
package.json | 《17》(全景)→《14》第 3 节(scripts)→《06》第 1 节 |
index.html | 《08》第 6 节(字体例外)→《13》第 5 条 |
scripts/smoke.mjs | 《09》第 6 节 →《06》4.2 |
scripts/slim-chart-json.mjs | 《04》第 5 节 →《09》第 2 节 |
scripts/gen-three-registry.mjs、gen-webgl-registry.mjs | 《11》SOP-E/D →《16》ADR-010 |
scripts/sweep-fallback.mjs 等 sweep 族 | 《11》SOP-F →《12》第 6 节 |
docs/CODE_TO_VCHART_GUIDE.md | 《01》2.5 →《13》第 2 条(文档漂移) |
.github/workflows/ci.yml | 《06》第 3 节 →《13》第 10 条(smoke 未入 CI) |
目标拆解决定读法。加一个 echarts/antv 案例:先读《19》第 3 节拿三种 EChartDemo 模板的形态判断(静态图选 option、异步取数选 onReady、有定时器/监听选 setup 且必须返回清理函数),再按《06》第 5 节的六步 SOP 执行(SFC → manifest → JSON → 缩略图 → 改守恒测试数字 → 本地验证),过程中的字段细节随时回查《19》第 1~2 节的样例,最后跑《11》第 1 节末尾的验证清单。加一个 three/webgl 案例:规范路径是生成器迁移(《11》SOP-E),手工新增时必读《19》4.2/4.3 的壳组件模板与《19》第 1 节的 globals 写法。加一个兜底条目(只收录官方脚本不改写):读《19》第 2 节样例 ②③ 的代码字段形态与《11》SOP-F 的两步扩展库接入,完成后必跑 sweep-fallback。三条支线的共同收尾是《11》第 7 节的四连命令;共同的易错点是"新增必有 JSON 条目"与"改完跑守恒测试"两条铁律(《11》第 0 节)。
这是改动面最大的扩展(五~六处同步),路径以《11》SOP-C 为主干:库注册表 → 数据集与 DATASET_LOADERS → 渲染链路二选一(全量本地 SFC 路线参照 three/webgl 的现成形态,或 Renderer 加分派分支)→ manifest → vendor 桶规则 → 守恒测试。配套阅读三处:《17》2.3 与第 3 节理解新库依赖的 chunk 归属与升级风险(尤其"是否拖累首屏"一问);《16》ADR-012 理解下线动作的历史先例与"未知库返回空集"的既成语义;《15》第 3 节理解 loaderKind 分派契约的开放边界(switch default throw 的防御位置)。若新库需要新的渲染执行方式(第五种 loaderKind),先读《09》第 5 节看渲染链测试怎么写,再读《18》第 2 节理解分派器与代次保护的代码事实——新分支必须自带竞态保护与错误呈现,不能寄生在旧链路里。
从《12》第 1 节的"链路三问"开始定链路(数据从哪来/代码谁来跑/资产走哪条路),然后按报错文案对号入座《12》第 2 节的 16 行速查表;决策树在《12》第 3 节,覆盖"详情页不渲染"的主干分叉。需要下沉到代码层时按链路取篇:本地 echarts SFC →《18》第 3 节(waitForInstance 与 myChart 代理的行为细节);兜底求值 →《18》2.2~2.3(九形参暴露面与三连 throw 的语义);沙箱编译 →《18》第 1 节 + 开 VITE_SFC_RUNTIME_DEBUG=1(《12》第 6 节);three →《10》第 4 节(context 上限)。调试手段全景在《12》第 6 节(logger、smoke、sweep、Network chunk 语义、单元测试即文档)。排查前建议先过一遍《12》第 7 节的四个"易被误判"问题,避免在"设计内行为"上浪费时间——尤其"报错消息本身是接口的一部分"这条:多处以正则匹配错误文案,改文案前先检索消费方。
按三个层次走。构建与产物:《06》第 3 节的产物特征(五桶分包、按需 chunk、public 原样拷贝)与《10》第 1 节的体积基线表——验收时对照 dist/index.html 的 modulepreload 列表(应只有 vendor 桶)与 Network 面板(首页不下载任何图表库代码)。部署前提:《08》第 7 节的五项前提表(dist 全量托管、SPA fallback、无功能性外链、字体可降级、wasm MIME)逐项核对,其中 SPA fallback 与 MIME 两项是内网服务器准入条件(《14》第 8 节的部署推理题补充了 history 路由的适用边界)。回归验证:pnpm typecheck && pnpm lint && pnpm test 三连后必须起服务跑 pnpm test:smoke——外链零请求断言与 canvas 渲染证据是发布前最后一道人工门禁(smoke 未入 CI,见《13》第 10 条);涉及依赖变更时按《17》第 3 节的纪律加跑守恒测试与 sweep。若本次上线包含新案例/大屏,《19》与《11》对应 SOP 的验证步骤前置完成,上线阶段只做全量回归。
两个次高频任务一并给出。升级依赖(尤其 three/echarts):《17》第 2.3/2.1 节的升级风险梯度 → 《14》第 9 节检查单(改 package.json → install/test/smoke 三连)→ 《08》第 6 节(外链回归高发区)→ 《16》ADR-006(vendor 桶字符串匹配的落桶风险);alias 锚定的五个锁定版本包升级时必须同步改 vite.config.ts(《17》1.4 节)。新人接手代码库:第一周按《00》第 6 节快速上手跑通环境与健康信号 → 《01》建立架构图景 → 《18》走读三个核心文件建立代码手感 → 《09》理解"测试即契约"的质量观 → 《13》了解已知债务避免重复踩坑;《12》第 6 节第 7 条的"注释即文档"原则是本项目最重要的接手须知——最关键的行为依据几乎都写在源码注释里,排查时优先信注释与测试,其次才是文档。
五条路径共用一个元规则:路径是阅读起点而非完整目录。每条路径只列出"从任务出发最先需要的篇目",任务推进中遇到本表未覆盖的名词,回第 1 节术语表的"详见"列跳转;遇到本表未覆盖的文件,回第 2 节反向索引按文件名检索。两条查表入口加上本节的五条路径,构成"任务 → 篇目 → 文件 → 术语"的完整检索闭环——这份文档集没有设计成必须通读的结构,而是设计成可以从任意入口进入的网状结构,本篇就是那张网的索引页。
| 篇目 | 主题一句话 | 首读场景 |
|---|---|---|
| 00-项目总览 | 定位、统计、技术栈、演进脉络 | 首次接触项目 |
| 01-系统架构 | 分层架构、ECharts 四层封装、数据流 | 理解全局设计 |
| 02-页面设计 | 路由、列表/详情/大屏页面、状态管理 | 改页面/交互 |
| 03-接口设计 | 四层契约:注册/访问层/组件 props/工具 | 新增案例前的字段查询 |
| 04-数据模型 | 19 字段 schema、数据生命周期、一致性 | 理解数据从哪来到哪去 |
| 05-核心流程 | 五条端到端时序图与分步说明 | 跟踪一次完整渲染 |
| 06-部署运行 | 环境、构建、测试体系、SOP、排查速查 | 跑起来与交付 |
| 07-模块详解 | 六大模块内部机制 + 代次保护对比 | 改渲染链前必读 |
| 08-安全与权限设计 | 信任模型、沙箱拦截、白名单、外链边界 | 涉及执行与加载的改动 |
| 09-测试与质量保障 | 守恒测试逐条解析、冒烟、coverage 缺口 | 改数据/契约前必读 |
| 10-性能设计与优化 | 体积基线、分包事故复盘、优化建议 | 性能相关决策 |
| 11-扩展开发指南 | 六个 SOP 与选型原则 | 动手扩展 |
| 12-FAQ与故障排查 | 16 行速查表、决策树、调试入口 | 排障 |
| 13-技术债务与演进建议 | 十条债务 + 三阶段路线图 | 立项与规划 |
| 14-配置与环境详解 | 九个配置文件逐段、环境变量、检查单 | 改配置 |
| 15-接口全量参考 | 全部契约的现状表格(22 大屏全表等) | 查表现状 |
| 16-决策记录ADR | 12 条关键决策的背景/备选/证据/后果 | 评估架构改动 |
| 17-依赖全景 | 86 项依赖逐个解析 + 健康度评估 | 改依赖/立项体积优化 |
| 18-代码走读实录 | 三个核心文件逐段带码走读 | 建立代码手感/排查下沉 |
| 19-数据契约与示例集 | 全部注册形态的可抄样例 | 照抄新增条目 |
| 20-术语表与文档索引 | 术语表 + 反向索引 + 任务路径(本篇) | 查术语/查文档/定读法 |
维护约定两条。其一,文档与测试的同步优先于文档与文档的同步:任何使《15》表格、《09》用例清单、《19》样例失真的代码变更,应同 PR 修正对应篇目(这正是本项目"注释即文档"文化在文档层的延伸);其二,数字口径以源码为终审——00~15 篇写作于 webgl 库加入之前,凡案例总数、库数、分类数出现 1688/三库 与 2013/四库(echarts 348 + antv 351 + three 989 + webgl 325)的口径差异时,以 src/data/charts/*.json 与守恒测试的当前值为准,⚠️ 待确认 00/15 两篇是否统一回刷为四库口径。全 21 篇的正文中均不出现未经验证的字面围栏串,代码引用一律以围栏块与行内代码两种形态呈现,引录处标注源文件路径,无法确认之处统一以"⚠️ 待确认"登记——这套写作纪律本身,就是文档集可信度的一部分。