前端目录与约定

根路径指 frontend/src。

顶层结构

路径	说明
components/	可复用 UI：如 table/（列表页）、app/（应用壳配置抽屉）
composables/	组合式函数：layout（断点）、list（列表请求）
layouts/	布局壳（如系统管理布局）
router/	路由定义
stores/	Pinia：auth、site、app-settings 等
shared/	api、lib/http、utils、types、constants
views/	按域划分：common（登录注册）、sys（系统管理）、acc（记账）
i18n/、locales/	国际化

UI 与全局能力

• Naive UI：在 main.ts 中 app.use(naive)；根组件中挂载 NConfigProvider、NMessageProvider、NDialogProvider 等。
• 主题与语言：应用级设置由 stores/app-settings 持久化；AppConfigDrawer 提供抽屉内切换。
• HTTP：shared/lib/http/request 封装 Axios；401 时清 token 并跳转登录；当前站点由 useSiteStore 与请求头 X-Site-Id 配合（与网关透传一致）。

与本文档的对应关系

• 列表类页面优先使用 PageQueryTable + useListFetch / useSysListFetch（见组件与组合式函数章节）。
• 树形管理页（PermissionsAdminView、OrgUnitsAdminView）不必强行 useSysListFetch；保持 getApiErrorMessage 即可。
• 需要「列配置同时驱动搜索与表格」时，可选用 ProPageTable（在 ProTableColumn 上声明 search）。

Track 4 重构（Web，已完成）

与 roadmap-four-tracks.md Track 4 对齐；弹窗放各模块 dialogs/，逻辑抽 composables/：

场景	composable	视图
Acc 首页汇总	composables/acc/useAccHomeSummary.ts	views/acc/AccHomeView.vue
报工审核弹窗	composables/acc/useLaborSubmissionReviewDialog.ts	views/acc/production/dialogs/
商品档案弹窗	views/acc/goods/composables/useGoodsSaveDialog.ts	views/acc/goods/dialogs/GoodsSaveDialog.vue
在制开单弹窗	views/acc/production/composables/useProductionWipAddDialog.ts	views/acc/production/dialogs/ProductionWipAddDialog.vue
用户编辑弹窗	views/sys/users/composables/useUserEditDialog.ts	views/sys/users/dialogs/UserEditDialog.vue

指标与小程序同口径：shared/types/acc-home-summary.ts、shared/utils/acc-home-summary-metrics.ts（见 acc-home-metrics-parity.md）。