项目：html5-examples ｜ 版本：v1.0 ｜ 生成日期：2026-10-06 ｜ 依据：源码分析
html5-examples（站内品牌名 DevCanvas，见 src/router/index.ts 中 document.title = \${title} - DevCanvas``）是一个多主题 HTML5 / CSS / Canvas / 动效 代码示例展示平台。它把近千个可交互运行的前端示例（示例库 750 条，另有 73 个独立演示与 63 个 CSS 生成器），按「主题（Topic）→ 分组（sourceGroup）→ 分类（Category）→ 示例（Example）」的信息架构组织起来，为每一类内容提供独立的浏览板块，并提供实时预览（iframe 沙箱）、源码高亮与在线编辑、多设备视口模拟、收藏与最近浏览等能力。
一句话概括：这是一个"前端示例的博物馆 + 游乐场"——学习者可以逐个运行、查看源码、修改参数；开发者可以直接抄走生成器产出的 CSS 代码；内容维护者通过编辑本地 JSON 或运行数据脚本即可扩充馆藏。
从工程视角看，它还有第三重身份：一个前端工程实践的参考实现。项目对路由懒加载、请求竞态、沙箱隔离、令牌刷新、构建分治这些常见工程难题都给出了带注释的完整解答（很多注释直接记录了踩坑现场），AGENTS.md 则示范了 AI 协作开发时代的规范文档写法。因此阅读本套文档时，如果某段机制讲解让你联想到自己项目里的类似问题，不妨直接对照源码取经——这也是项目把源码注释写得很密的原因之一。
项目内容治理文档（AGENTS.md 第 15 节「板块准入三问」）明确要求每个板块回答"用户任务是什么"，归纳为四类：
| 用户任务 | 对应板块 | 典型场景 |
|---|---|---|
| 学（学习知识点） | 示例库 /examples、SVG 互动课程 /svg、动效库 /effects | 按 MDN 知识点浏览语义化标签、Flex 布局等教学示例 |
| 抄（复制代码） | CSS 实验室 /css-lab、UI 组件 /ui-elements、Tailwind 模板 /tailwind/:category | 用渐变生成器调好参数，一键复制 CSS |
| 玩（体验交互） | 独立演示 /playground、Canvas 示例 /canvas/:library | 运行音乐播放器、签名板、粒子实验室等独立小应用 |
| 用（管理个人内容） | 我的收藏 /favorites、最近浏览 /recent、个人中心 /profile | 登录后收藏示例、回看浏览历史 |
项目采用 前端 SPA + 轻后端 的双进程形态：
src/content/examples/），构建后可纯静态部署。server/ 目录）：NestJS + TypeORM + PostgreSQL，端口 3000，提供认证、收藏、主题/分类目录、UI 组件、Canvas 示例、知识库等 API，并托管 /admin 管理后台静态页（见 server/src/app.module.ts 的 ServeStaticModule）。理解这个形态时有一个容易混淆的点：项目并不是传统的"前后端一体应用"。前端的数据获取逻辑被有意设计成两种通道并存——内容型数据（示例正文、生成器目录、动效数据）完全在前端进程内解决，构建时随静态资源分发；行为型数据（谁登录了、收藏了什么）必须经过后端落库。这条边界划得非常清晰，以至于后端宕机时，站内百分之八十以上的浏览体验依然完好，只有导航目录、收藏等少数功能退化。接手维护的第一个心智模型就应该是：内容在前端，行为在后端。
需要特别指出（这是本次源码分析发现的最新架构事实，README 与 AGENTS.md 尚未同步）：src/api/examples.ts 文件头注释明确写着——
示例内容自 2026-10-05 起从 PostgreSQL 迁移至
src/content/examples/*.json（8 个分组文件，按需懒加载并模块级缓存），数据库仅保留用户行为数据（收藏/浏览记录）。
因此示例正文（当前 750 个 CodeExample，历史迁移基线 1057 个；差额源于 2026-10-06 内容治理提交 54429841 的合集并入与去重）已经脱离数据库，改为 git 管理的本地 JSON；后端 examples 模块（server/src/modules/examples/）虽仍存在，但前端已不再调用（前端 updateExample 走 localStorage 覆盖层；/admin 后台静态页仍在消费，见《13-技术债务》第 2 条）。而主题/分类目录（/api/topics、/api/categories）、认证（/api/auth）、收藏（/api/favorites）仍依赖后端。
以下统计全部来自对源码目录的实地清点（2026-10-05 时点；示例库一项已于 2026-10-06 按最新内容治理提交复核更新）：
| 板块 | 路由 | 数量（实测） | 数据来源 | 代表示例/组件 |
|---|---|---|---|---|
| 主题广场（首页） | / | 2 个有量主题 + 动态主题链接 | GET /api/topics | TopicHubPage.vue、TopicCard.vue |
| 示例库 | /examples | 750 个示例（历史基线 1057；8 个分组 JSON：css-animation 53 / css-basics 114 / css-layout 188 / css-visual 130 / html5-advanced 90 / html5-basics 58 / html5-forms-media 77 / html5-visual 40） | src/content/examples/*.json 懒加载 | Details/Summary 折叠面板(id=540)、ExamplesLibrarySidebar.vue |
| 独立演示 | /playground | 73 个演示（src/components/examples/demos/ 目录数） | SFC 组件（defineAsyncComponent） | WebWorkerDemo、MusicPlayerDemo、CanvasLabDemo |
| UI 组件 | /ui-elements、/ui-element/:id | 后端 ui-elements 模块（模板+分类两实体） | GET /api/ui-elements/* | UiElementListPage.vue |
| Tailwind 模板 | /tailwind/:category | 5 个本地分类（components/dashboards/navsites/pages/sections）+ sites（静态站点，走后端） | src/config/tailwindTemplates.ts + GET /api/static-sites | TailwindExamplesPage.vue、StaticSiteCard.vue |
| 动效库 | /effects | 4 大技术板块（Animate.css / CSS 悬停 / Motion Path / GSAP） | src/config/effects/{animate-css,hover,motion-path,gsap}.ts | EffectsLibraryPage.vue |
| CSS 实验室 | /css-lab（原 /tools） | 1 张速查表 + 3 个工作台（Flex/Grid/渐变）+ 63 个具体生成器组件（generators/ 目录 64 个 *Generator.vue，含 1 个 BaseGenerator 基类；catalog.ts 注释称 64 项） | src/config/css-lab/catalog.ts | FlexboxPage.vue、ButtonGenerator.vue |
| SVG 互动课程 | /svg | 多章节课程数据 + 章节演示组件 | src/config/svgLessons*.ts | SvgLessonsPage.vue、Chapter23FilterShowcase.vue |
| Canvas 示例 | /canvas/:library | 9 个图形库（vanilla-canvas/fabric-js/konva-js/leafer-js/p5-js/pixi-js/rough-js/signature-pad/canvas-confetti） | 后端 canvas-examples 模块 + 本地演示组件 | CanvasExamplesPage.vue |
| 认证与个人 | /login、/profile、/favorites、/recent | — | GET /api/auth/*、GET /api/favorites | authStore.ts、useRecentExamples.ts |
⚠️ 待确认：
server/scripts/下有 233+ 数据导入脚本（AGENTS.md 记载），部分对应的历史板块（chart-examples、visual-demos、knowledge）仍保留在后端代码中；前端src/api/已无chart-examples.ts，说明图表示例板块已随 html5-dataviz 拆分而从前端移除，但后端模块尚未清理。
这张统计表背后有一条清晰的内容治理脉络：项目没有平均用力，而是把资源集中在"复用率最高"的内容形态上——示例库的 750 个 JSON 示例是馆藏主体，覆盖 HTML 与 CSS 两大主题的全部教学路径；CSS 实验室把"能参数化生成"的效果抽成 63 个生成器，让"抄代码"变成"调参数"；独立演示的 73 个 SFC 则承接不适合 iframe 沙箱、需要真实浏览器 API 的小应用。三类形态分别对应"学、抄、玩"三种用户任务，互不重叠。阅读后续文档时，建议始终带着"这条内容属于哪种形态"的问题，因为不同形态的加载机制、渲染机制与新增方式完全不同。
以下以根 package.json 实际依赖为准：
| 类别 | 技术 | 版本（package.json 声明） | 在本项目中的用途 |
|---|---|---|---|
| 框架 | Vue 3（<script setup>） | ^3.5 | 全部页面与组件 |
| 构建 | Vite | ^5.0 | 开发服务器与生产构建 |
| 语言 | TypeScript（strict） | ^5.0 | 全量类型化，禁止 any |
| 路由 | Vue Router | ^4.3 | History 模式，全路由懒加载 |
| 状态管理 | Pinia（Options Store） | ^2.1 | 仅 2 个 store：exampleStore、authStore |
| 样式 | Tailwind CSS v4（@tailwindcss/vite 插件） | ^4.0 | 无 tailwind.config.js，主题在 src/assets/main.css 的 CSS 变量 + @theme 中定义 |
| UI 组件库 | xiaoye-ui | ^6.1 | unstyled + PassThrough 模式的自有组件库 |
| 代码高亮 | Shiki | ^1.0 | 单例高亮器，14 种语言内联注册（src/utils/highlighter.ts） |
| 代码编辑器 | Monaco Editor + @guolao/vue-monaco-editor | ^0.55 / ^1.6 | 示例源码在线编辑（SourcePane） |
| 浏览器端 SFC 运行时 | @vue/compiler-sfc | ^3.5 | 在浏览器中实时编译并运行 Vue SFC（src/utils/sfcRuntime.ts，538 行） |
| 可视化 | ECharts / vue-echarts / echarts-gl / @antv/g2plot | ^6.1 / ^8.0 / ^2.1 / ^2.4 | 仅残余演示（内容已拆至 html5-dataviz） |
| 2D 图形 | PixiJS / Konva / Fabric / Leafer UI / p5 / Rough.js / signature_pad / canvas-confetti | 见 package.json | Canvas 示例板块 9 库 |
| 3D | three | ^0.184 | 部分 playground 演示（如 car-configurator） |
| 动画 | GSAP / animejs / Animate.css / splitting | ^3.15 / ^4.4 / ^4.1 / ^1.1 | 动效库四板块 |
| 拖拽 | vuedraggable | 4.1.0 | 生成器/工作台内排序交互 |
| 安全 | dompurify | ^3.4 | HTML 消毒（src/utils/sanitize.ts） |
| 工具库 | @vueuse/core / dayjs | ^14.3 / 1.11 | 组合式工具、日期 |
| 后端 | NestJS + TypeORM + PostgreSQL + Passport JWT | NestJS ^10.3 / TypeORM ^0.3 | server/ 目录 |
| 测试 | Vitest + happy-dom + @vue/test-utils；Playwright（GUI 测试/截图） | vitest ^2.1 | 单元测试 + 截图脚本 |
| 代码质量 | ESLint 10（flat config）+ Prettier 3.5 + lint-staged | — | CI 三道门禁之一 |
| 包管理 | pnpm（workspace） | — | pnpm-workspace.yaml |
依赖选型的三个关键理由（源自 vite.config.ts 注释与 AGENTS.md ADR）：
highlighterInstance 模块级缓存）避免重复初始化；语言按 mjs 内联注册而非全量 bundle，控制体积（ADR-5）。vite.config.ts 的 manualChunks 按"每个示例只引入自己的库"原则把 pixi/fabric/konva/leafer/roughjs 等拆成独立 vendor chunk，保证首屏只加载 Vue 核心（vendor chunk），重型图形库随路由按需下载。本项目原本是一个"大而全"的集合体，2026 年陆续完成了三次拆分（依据：README「已拆分的姊妹项目」、src/router/routes/css-lab.ts 头注释、AGENTS.md 15.3 节）：
html5-examples（母体）
├── 已拆出：html5-dataviz ← 数据可视化板块（ECharts/G2Plot/大屏）
├── 已拆出：html5-games ← 游戏板块（/visual-demo 游戏深链已重定向）
├── 已拆出：20260810/devtools ← 开发者工具箱（/tools 中的非 CSS 工具）
└── 保留：CSS 实验室（/css-lab，即原 /tools 的 CSS 部分）与 devtools 的关系要特别讲清：
/tools 板块抽离出去的。抽分标准是"是否与 CSS 相关"：JSON 格式化、文本处理、图片压缩、加密、代码运行器等非 CSS 工具全部迁入 devtools；而渐变、阴影、按钮、动画等 CSS 生成器留在本项目。/tools 迁移到 /css-lab；旧路径 /tools/:pathMatch(.*)* 通过通配 redirect 全量映射到 /css-lab/*，并保留 query 与 hash（src/router/routes/css-lab.ts 第 75-86 行），历史外链不失效。useHeaderNav.ts 中菜单项名为「CSS 实验室」，产品词汇表（AGENTS.md 15.1）规定禁用"样式工具、工具中心"等旧叫法。vite.config.ts 仍为它们保留 antv-vendor / echarts-vendor 拆包规则）。这次拆分对维护者的直接影响有两条。第一，在 html5-examples 里找不到数据可视化与游戏的实现是正常的，搜索源码时若发现 chart-examples、visual-demos 相关的引用残留在后端控制器里，属于待清理的遗留，不要据此认为功能还在。第二，devtools 独立后，本项目对 /tools 这个路径的处理方式是"重定向而非删除"，src/router/routes/css-lab.ts 底部的 LegacyToolsRedirect 通配路由会连同 query 与 hash 一起把旧链接送到 /css-lab，这种"搬家留路条"的做法在项目里反复出现（动效四板块合并、MDN 主题并入 CSS 主题、静态站点并入 Tailwind 模板都是同一模式），新做板块迁移时应沿用。
以下为根目录（节选自实际 ls 结果，注释为各目录职责）：
html5-examples/
├── AGENTS.md # AI 编码助手规范总纲（67KB，含设计系统/架构决策/任务指南）
├── README.md # 项目门面
├── index.html # SPA HTML 入口
├── package.json # 依赖与 scripts（dev/build/lint/test/extract）
├── vite.config.ts # Vite 配置：@ 别名、Tailwind 插件、/api 代理、19 组 manualChunks
├── vitest.config.ts # 单测配置
├── tsconfig.json / env.d.ts # TS strict 配置与全局类型声明
├── eslint.config.js / .prettierrc
│
├── src/ # ── 前端源码 ──
│ ├── main.ts # 入口：Pinia → Router → XiaoyeUI → v-chart → SFC 注册表 → mount
│ ├── App.vue # 根组件：AppHeader + KeepAlive 路由出口 + 页面过渡动画
│ ├── api/ # 数据层：client.ts（fetch 封装）+ 11 个资源模块
│ │ └── examples.ts # ★ 示例数据已改本地 JSON 懒加载（2026-10-05）
│ ├── assets/main.css # 全局样式 + 设计令牌 CSS 变量 + Tailwind @theme
│ ├── components/
│ │ ├── common/ # 27 个通用组件（AppIcon/ErrorBoundary/DeviceFrame…）
│ │ ├── layout/ # 23 个布局组件（AppHeader/SidebarCardGridPage/EmptyState…）
│ │ ├── examples/ # 示例域组件（ExampleCard/PreviewPane/SourcePane…）
│ │ │ └── demos/ # 73 个独立演示子应用（playground）
│ │ ├── css-lab/ # CSS 实验室布局（CategoryLayout/CodeSlidePanel）
│ │ ├── effects/ # 动效库渲染组件
│ │ └── tailwind-examples/ # Tailwind 模板卡片与详情
│ ├── composables/ # 24 个组合式函数（usePreview/useListFilter/usePagination…）
│ ├── config/
│ │ ├── css-lab/ # 实验室目录 catalog.ts(588 行) + 路由常量 routes.ts
│ │ ├── effects/ # 动效库统一数据入口 index.ts + 四板块数据
│ │ ├── tailwindTemplates.ts / svgLessons*.ts / designTokens.ts / sourceGroupMeta.ts
│ ├── content/examples/ # ★ 750 个示例正文（8 个 JSON 分组，约 8.3MB；历史基线 1057）
│ ├── router/
│ │ ├── index.ts # 218 行：全站路由 + 守卫 + 兼容 redirect + chunk 错误自愈
│ │ └── routes/css-lab.ts # CSS 实验室子路由（含 14 条旧路径 redirect）
│ ├── stores/ # Pinia：exampleStore.ts(61 行) / authStore.ts(255 行)
│ ├── types/ # 全局类型（index.ts 73 行 + tool/ui-elements/visual-demos 等）
│ ├── utils/ # 28 个工具模块（sandbox.ts/highlighter.ts/sfcRuntime.ts…）
│ └── views/ # 16 个顶层页面 + 8 个页面级子目录（css-lab/canvas-examples/…）
│
├── server/ # ── NestJS 后端（端口 3000）──
│ ├── src/main.ts # 启动：ValidationPipe + CORS + JWT Secret 安检 + 默认管理员
│ ├── src/app.module.ts # 27 个 TypeORM 实体 + 18 个业务模块 + /admin 静态托管
│ ├── src/modules/ # auth/topics/categories/examples/favorites/static-site-nav/
│ │ # ui-elements/visual-demos/chart-examples/canvas-examples/
│ │ # oss/run/knowledge(文档·片段·收藏·评论·通知·画板)
│ ├── src/migrations/ # 11 个 TypeORM 迁移文件
│ ├── scripts/ # 233+ 数据导入脚本（历史内容治理用）
│ ├── data-source.ts # TypeORM 数据源配置
│ └── admin/ # 管理后台静态页（ServeStaticModule 挂载到 /admin）
│
├── scripts/ # ── 前端侧 Node 脚本（tsx 运行，约 130 个）──
│ ├── extract-examples.ts # 从 Markdown 提取代码块生成 CodeExample JSON（pnpm extract）
│ ├── import-examples.ts / import-to-db.ts / merge-examples.ts / deduplicate-examples.ts
│ └── …（截图/翻译/校验/迁移脚本，属历史内容工程）
│
├── public/ # 静态资源（构建时原样拷贝）
│ ├── shared-assets/ # 示例共享素材（图片/字体），iframe 内以 <base> 同源加载
│ ├── static-sites/{id}/ # 静态网站模板完整源码（/tailwind/sites 板块直链访问）
│ └── echarts-data/ demo-assets/ hover-effects/
│
├── docs/ # 项目既有文档体系（20+ 篇，见 docs/目录索引.md）
├── dist/ # 构建产物（gitignore 范畴）
└── 备份/ gui-test-screenshots/ # 备份与 GUI 测试截图（非源码）模块依赖的分层法则：views/ → components/ → composables/ → (stores / api) → utils，类型统一定义在 types/，配置数据统一定义在 config/。任何一层不得反向依赖上层（例如 composables 不 import views）。
目录树里还有几处容易引起误会的名字需要提前澄清。gui-test-screenshots/ 与 备份/ 是开发过程的产物（GUI 测试截图与历史备份），不属于源码，阅读与部署时都应忽略；docs/ 是项目自建的知识库（需求、设计、开发指南、运维等二十余篇），其中 docs/开发指南/示例与组件编写规范.md 与本套文档的第六篇内容互补；scripts/ 下约一百三十个脚本绝大多数是历史内容工程的工具（抓取、翻译、去重、截图、校验），日常维护只需要认识 extract-examples.ts 一个。另外 public/ 的体积在全项目中占比最大（静态站点模板与共享素材），修改前端代码时基本不需要触碰它，但部署完整性检查时必须确认它被完整发布。
server/.env 配置（DB_HOST/DB_PORT/DB_USERNAME/DB_PASSWORD/DB_NAME/JWT_SECRET/DB_SYNC/CORS_ORIGIN/PORT，见 server/src/main.ts 与 app.module.ts 读取项）pnpm install
pnpm dev # http://localhost:5555（vite.config.ts 指定 port 5555、host 127.0.0.1）cd server
pnpm install
pnpm dev # NestJS watch 模式，http://localhost:3000
pnpm migration:run # 首次需执行数据库迁移（server/src/migrations/）开发期 Vite 把 /api 代理到 http://localhost:3000（vite.config.ts server.proxy），前端无需关心跨域；后端 CORS 白名单默认含 http://localhost:5555 与 5560。
pnpm lint # ESLint，必须零错误
pnpm format # Prettier 格式化 src/**
pnpm typecheck # vue-tsc --noEmit
pnpm test # vitest run
pnpm build # 类型检查 + 8GB 堆内存构建
pnpm build:fast # 跳过类型检查的快速构建
pnpm extract # scripts/extract-examples.ts：Markdown → CodeExample JSONCI（.github/workflows/ci.yml）在 push main / PR 时跑 lint + typecheck + test 三道门禁。
环境搭好后，建议按顺序做五个动作确认一切正常：其一，打开首页，确认顶部导航出现"主题广场 / 示例库 / 独立演示"等菜单——这证明 GET /api/topics 已通，后端连通；其二，进入示例库并点击任意卡片，确认左侧预览区能渲染出动画效果——这证明本地 JSON 加载链路与 iframe 沙箱正常；其三，在详情页右侧切到源码面板，确认代码有语法高亮——这证明 Shiki 单例高亮器初始化成功；其四，点击右上角登录按钮走一次注册登录——这证明验证码、JWT 签发与 httpOnly Cookie 全链路正常；其五，随手收藏一个示例再去"我的收藏"页看它是否出现——这证明收藏接口与用户态缓存正常。五个动作全部通过，即可认定开发环境完整可用。
如果只是想快速浏览或修改示例内容，可以完全跳过 2.2 小节：不装 PostgreSQL、不启动 NestJS，直接 pnpm dev。此时示例库、独立演示、动效库、CSS 实验室、SVG 课程、Tailwind 本地模板等板块全部可用，因为它们的数据 either 在 src/content/ 的 JSON 里，要么在 src/config/ 的 TypeScript 常量里，要么就是组件本身。只有当工作内容涉及"主题分类目录、UI 组件板块、Canvas 示例板块、静态站点列表、登录收藏"时，后端才成为必需品。这个特性让纯内容贡献者（比如只想加十个 CSS 示例）的协作成本降到接近于零——clone 仓库、改 JSON、提 PR，全程不需要碰数据库。
打开首页后发生的事：main.ts 装配应用 → App.vue 挂载时并行调 authStore.initialize()（恢复登录态）与 exampleStore.loadTopicsAndCategories()（拉主题/分类目录）→ 你点击「示例库」→ ExamplesLibraryPage.vue 经 useResourceFetch 调 getExamples() → 该函数按需 import() 对应分组 JSON → 数据经 ExampleCard 渲染 → 点击卡片进入 /example/:id → ExampleDetailPage.vue 左右分屏：左侧 PreviewPane 用 buildSrcDoc() 把 html/css/js 拼成完整文档塞进 iframe srcdoc，右侧 SourcePane 用 Monaco/Shiki 呈现源码并支持编辑保存（写入 localStorage 覆盖层）。
| 篇目 | 内容 |
|---|---|
| 00-项目总览（本篇） | 定位、规模、技术栈、目录导览、快速上手 |
| 01-系统架构 | 分层架构图、示例注册与加载机制、server 职责、数据流、设计决策 |
| 02-页面设计 | 路由总表、页面布局范式、代表示例按类别深拆、状态管理 |
| 03-接口设计 | server API 端点总表、示例-框架契约、错误处理约定 |
| 04-数据模型 | Topic/Category/CodeExample/ToolItem 等实体、本地 JSON 清单结构、数据生命周期 |
| 05-核心流程 | 示例发现→加载→渲染、编辑→预览→保存、认证链路等端到端流程 |
| 06-部署运行 | 环境、启动、构建部署、测试脚本、新增示例/工具 SOP |
对首次接手项目的工程师，推荐按以下顺序通读源码，每一步都建立在前一步的概念之上：
第一站：入口三件套（约半小时）。index.html 里那段内联脚本负责在 Vue 加载前根据 localStorage 与系统偏好设置 .dark/.light 类，防止主题闪烁，同时它揭示了 devcanvas-theme 这个存储键；src/main.ts 展示了全部全局装配（Pinia、路由、xiaoye-ui、vue-echarts 全局组件、SFC 组件注册表、toast 初始化）；src/App.vue 则定义了全站外壳——固定头部、页面过渡、KeepAlive 白名单机制与错误边界。
第二站：一条完整的纵切面。顺着"示例库列表 → 示例详情"走一遍：src/views/ExamplesLibraryPage.vue 只有 156 行却串起了 useListFilter、usePagination、useResourceFetch 三个核心 composable 与 SidebarCardGridPage 布局组件，是学习本项目"页面组装范式"的最佳标本；接着读 src/api/examples.ts 理解本地 JSON 懒加载与覆盖层，读 src/utils/sandbox.ts 理解沙箱拼装。走完这条线，项目一半的日常改动都能对号入座。
第三站：配置即内容。浏览 src/config/ 目录，体会本项目"内容大多是配置"的特点——catalog.ts 的工具清单、effects/ 的动效聚合、tailwindTemplates.ts 的模板清单。理解这一点后，"新增内容"这类需求就不再是"写页面"而是"改配置"。
第四站：按需深入。涉及登录收藏读 src/stores/authStore.ts（255 行，认证状态机写得非常完整）；涉及构建读 vite.config.ts 的 manualChunks 注释（每条规则都写明了事故背景）；涉及后端读 server/src/main.ts 的启动安检与任一模块的 controller/service/entity 四件套。项目自带的 AGENTS.md（67KB）与 docs/ 文档体系是每站的随行手册，本套文档与它们互为补充：AGENTS.md 偏"规范与禁令"，本套文档偏"架构与机制"。
本篇完。下一篇：01-系统架构.md