小程序大页拆分指引

针对 production-create.vue、inbound-create.vue 等 800+ 行 记录员表单页。

目标

单文件只保留 模板编排 + 页面级状态
可复用逻辑进 composables / dialogs/（与仓库 .cursor/rules/miniapp-pages-layout.mdc 一致）

建议拆分顺序（以生产过账为例）

步骤	抽出内容	建议路径
1	站点守卫、`onShow` 角色校验	`composables/recorder/useRecorderSiteContext.ts`
2	API 失败 Toast / `err` 赋值	`composables/useMiniappApiToast.ts`（已提供）
3	提交校验 + `postProduction`	`composables/recorder/useProductionCreateSubmit.ts`
4	行编辑（产出/原料/记工）	`composables/recorder/useProductionCreateLineEditors.ts`
5	页门禁 + 站点	`useRecorderPageGate.ts`
6	日期/产出/原料/记工 UI	`pages/recorder/components/ProductionCreate*.vue`

入库行编辑 inbound-line-form.vue（已完成）：

步骤	抽出内容	路径
1	会话 / 校验 / 确认	`composables/useInboundLineForm.ts`
2	原料选择弹层	复用 `useProductionGoodsLinePicker`
3	样式	`styles/inbound-line-form.scss` + `production-line-form.scss`

入库新建：

步骤	抽出内容	建议路径
1	供应商选择	`composables/recorder/useInboundCreateSuppliers.ts`
2	行编辑 / 滑动删除	`composables/recorder/useInboundCreateLines.ts`
3	凭证上传	`composables/recorder/useInboundCreateAttachments.ts`
4	提交校验 + `postInbound`	`composables/recorder/useInboundCreateSubmit.ts`
5	页门禁 + 站点	`useRecorderPageGate.ts`
6	供应商 / 明细 / 凭证 UI	`pages/recorder/components/InboundCreate*.vue`

经理结算新建：

步骤	抽出内容	建议路径
1	提交 + 待结算记工加载	`composables/manager/useSettlementCreate.ts`
2	筛选字段（工人/日期/出库）	`pages/manager/components/SettlementCreateFilterFields.vue`
3	记工勾选列表	`pages/manager/components/SettlementCreateLaborSection.vue`
4	加减项 / 预览	`SettlementCreateAdjustSection.vue` / `SettlementCreatePreviewCard.vue`
5	出库多选弹层	`pages/manager/dialogs/SettlementOutboundPickPopup.vue`

经理结算列表 settlement.vue：

步骤	抽出内容	建议路径
1	z-paging 列表 / Tab / 查询	`composables/manager/useSettlementList.ts`
2	结算日筛选	`composables/manager/useSettlementListBizDateFilter.ts`
3	工人筛选（已有）	`composables/manager/useSettlementListWorkerFilter.ts`
4	Tab / 筛选 / 卡片 UI	`pages/manager/components/SettlementList*.vue`

结算详情 settlement-detail.vue：

步骤	抽出内容	建议路径
1	详情加载 / 标记发放 / 复制摘要	`composables/manager/useSettlementDetail.ts`
2	记工行展示 helper	`utils/settlement-detail-labor-display.ts`
3	汇总 / 记工 / 加减项 / 凭证 UI	`pages/manager/components/SettlementDetail*.vue`

出库新建：

步骤	抽出内容	建议路径
1	客户选择	`composables/recorder/useOutboundCreateCustomer.ts`
2	行编辑 / 批次 / 单价	`composables/recorder/useOutboundCreateLineEditor.ts`
3	路由预填（库存页跳转）	`useOutboundCreateRoutePrefill`（同上文件）
4	提交校验 + `postOutbound`	`composables/recorder/useOutboundCreateSubmit.ts`
5	客户 / 日期 / 明细 UI	`pages/recorder/components/OutboundCreate*.vue`
6	业务日期文案 / 表单页样式	`useRecorderBizDateTime.ts` + `styles/recorder-form-page.scss`

记录员列表 / 详情（已完成）：

步骤	抽出内容	路径
1	库存列表分页 / 筛选	`composables/useInventoryList.ts` + `InventoryListFilterBar.vue`
2	入库单列表	`composables/useInboundList.ts`
3	出库详情加载 / 冲红	`composables/useOutboundDetailPage.ts` + `utils/outbound-detail-display.ts`

首页九宫格：

步骤	抽出内容	建议路径
1	Shell 拉数 / 分组	`composables/index/useHomeShellData.ts`
2	打开入口 / 权限校验	`composables/index/useHomeShellOpenApp.ts`
3	顶栏布局（胶囊对齐）	`composables/index/useHomeNavBarLayout.ts`
4	站点切换	`composables/index/useHomeSitePicker.ts`
5	顶栏 / 九宫格 UI	`pages/index/components/HomeTopBar.vue` / `HomeAppGrid.vue`

经理报表 reports.vue：

步骤	抽出内容	建议路径
1	站点概览 / 趋势图	`useAccSiteSummary.ts` / `useAccSiteTrendCharts.ts`
2	记工汇总	`useManagerLaborReports.ts`
3	月结巡检	`useAccMonthCloseCheck.ts`
4	Tab / 三面板 UI	`pages/manager/components/Reports*.vue`

个人记账自定义统计：

步骤	抽出内容	建议路径
1	筛选状态 / 过滤	`composables/bookkeeping/useStatsCustomFilter.ts`
2	汇总 / 图表数据	`composables/bookkeeping/useStatsCustomMetrics.ts`
3	拉取流水	`composables/bookkeeping/useStatsCustomLoad.ts`
4	日期金额格式	`utils/bookkeeping-stats-format.ts`
5	筛选摘要 / 分类 / 图表 UI	`pages/bookkeeping/components/StatsCustom*.vue`

个人记账金额键盘 amount-input.vue：

步骤	抽出内容	建议路径
1	表达式求值 / 按键行	`utils/bookkeeping-amount-calculator.ts`
2	页面状态 / 确认跳转	`composables/bookkeeping/useBookkeepingAmountInput.ts`
3	键盘 UI	`pages/bookkeeping/components/BookkeepingAmountKeypad.vue`

个人记账周/月/年统计 stats.vue：

步骤	抽出内容	建议路径
1	周期范围 / 分类聚合 / 按日柱图	`utils/bookkeeping-stats-format.ts`（扩展）
2	拉取流水 / 图表数据	`composables/bookkeeping/useBookkeepingStats.ts`
3	Tab / 汇总 / 类别 / 按日 UI	`pages/bookkeeping/components/BookkeepingStats*.vue`

个人记账首页 home.vue（记一笔 / 账本管理）：

步骤	抽出内容	建议路径
1	本月汇总 / 按日分组	`utils/bookkeeping-home-display.ts`
2	账本 / 流水 / 删除 / 创建	`composables/bookkeeping/useBookkeepingHome.ts`
3	顶栏汇总 / 流水列表 UI	`pages/bookkeeping/components/BookkeepingHome*.vue`

账本流水 ledger-detail.vue：

步骤	抽出内容	建议路径
1	加载 / 筛选 / 导出 / 删除	`composables/bookkeeping/useBookkeepingLedgerDetail.ts`
2	按日分组列表 UI	复用 `BookkeepingHomeEntryGroups.vue`

个人记账表单 entry-form.vue：

步骤	抽出内容	建议路径
1	加载 / 保存 / 时间选择	`composables/bookkeeping/useBookkeepingEntryForm.ts`
2	金额 Hero / 分类区块 UI	`pages/bookkeeping/components/BookkeepingEntryForm*.vue`

自定义统计筛选底栏 StatsCustomFilterSheet.vue：

步骤	抽出内容	建议路径
1	draft 状态 / 确认快照	`composables/bookkeeping/useStatsCustomFilterSheetDraft.ts`
2	类型 / 日期 / 分类区块	`pages/bookkeeping/dialogs/components/StatsCustomFilter*.vue`
3	日期范围 helper	复用 `utils/bookkeeping-stats-format.ts`

我的 · 个人信息 personal-info.vue（已完成 composable + 子组件拆分）：

步骤	抽出内容	路径
1	加载 / 头像 / OpenID / 角色入口	`composables/me/usePersonalInfoPage.ts`
2	头像 / 账号卡片 UI	`pages/me-sub/components/PersonalInfo*.vue`
3	微信 OpenID / 角色快捷入口	`PersonalInfoWeixinOpenidCard.vue` / `PersonalInfoRolePanels.vue`
4	卡片样式	`styles/personal-info-cards.scss`

出库列表 outbound.vue（已完成）：

步骤	抽出内容	路径
1	z-paging 列表 / FAB	`composables/useOutboundList.ts`

我的 · 人员认证 personnel-certification.vue：

步骤	抽出内容	建议路径
1	资料 / 密码保存逻辑	`composables/me/usePersonnelCertification.ts`
2	认证进度卡片	`pages/me/components/PersonnelCertStatusCard.vue`

报工审核列表 labor-submission-review.vue：

步骤	抽出内容	建议路径
1	z-paging 列表 / Tab / 查询	`composables/recorder/useLaborSubmissionReviewList.ts`
2	审核确认弹层逻辑	`composables/recorder/useLaborSubmissionReviewApprove.ts`
3	驳回逻辑	`composables/recorder/useLaborSubmissionReviewReject.ts`
4	Tab / 卡片 UI	`pages/recorder/components/LaborSubmissionReview*.vue`
5	审核 / 驳回弹层	`pages/recorder/dialogs/LaborSubmissionReview*.vue`

报工登记详情（审核端 / 工人端共用 UI）：

步骤	抽出内容	建议路径
1	审核端加载 / 重新审核	`composables/recorder/useLaborSubmissionReviewDetail.ts`
2	工人端加载 / 撤回 / 重提	`composables/worker/useWorkerLaborSubmissionDetail.ts`
3	展示 helper	`utils/labor-submission-detail-display.ts`
4	摘要 / 信息 / 照片 UI	`components/labor-submission/LaborSubmissionDetail*.vue`

工人报工登记 labor-submission-form.vue：

步骤	抽出内容	建议路径
1	加载 / 工序 / 重提预填	`composables/worker/useLaborSubmissionForm.ts`
2	提交校验 + save	`composables/worker/useLaborSubmissionFormSubmit.ts`
3	现场照片	`composables/worker/useLaborSubmissionFormPhotos.ts`
4	上下文 / 记工 / 照片 UI	`pages/worker/components/LaborSubmissionForm*.vue`

生产列表 production-list.vue：

步骤	抽出内容	建议路径
1	z-paging 列表 / 筛选 / 查询	`composables/recorder/useProductionList.ts`
2	FAB 新建 / 在制开单 / 复制 Web 链接	`composables/recorder/useProductionListFabActions.ts`
3	月份分组 / 进度条展示	`utils/production-list-display.ts`
4	顶栏筛选 / 列表卡片 UI	`pages/recorder/components/ProductionList*.vue`

生产详情 production-detail.vue：

步骤	抽出内容	建议路径
1	加载 / 门禁 / 详情字段	`composables/recorder/useProductionDetailContext.ts`（已有，关账/现场报工子页复用）
2	底栏跳转 / 出库预填	`composables/recorder/useProductionDetailActions.ts`
3	行展示 / 审核链接判定	`utils/production-detail-display.ts`
4	摘要 / 原料 / 产出 / 报工 / 记工 UI	`pages/recorder/components/ProductionDetail*.vue`

工人我的报工 labor-submission-mine.vue：

步骤	抽出内容	建议路径
1	列表 / 分页 / 工人档案绑定	`composables/worker/useLaborSubmissionMineList.ts`
2	单条登记卡片 UI	`pages/worker/components/LaborSubmissionMineCard.vue`

库存流水 stock-ledger.vue：

步骤	抽出内容	建议路径
1	分页 / 导出 / 按月分组	`composables/recorder/useStockLedgerList.ts`
2	顶栏标题与导出	`pages/recorder/components/StockLedgerTopBar.vue`
3	按月流水列表	`StockLedgerMonthList.vue`

在制关账 production-wip-close.vue：

步骤	抽出内容	建议路径
1	关账提交 / 确认 / 导航	`composables/recorder/useProductionWipClose.ts`
2	单号 Hero	`pages/recorder/components/ProductionWipCloseHero.vue`
3	关账前汇总	`ProductionWipCloseSummary.vue`
4	产出行列表	`ProductionWipCloseOutputs.vue`

报工审核详情 labor-submission-review-detail.vue：

步骤	抽出内容	建议路径
1	加载 / 重新审核	`composables/recorder/useLaborSubmissionReviewDetail.ts`
2	详情正文（工人字段）	`@/components/labor-submission/LaborSubmissionDetailBody.vue`
3	底栏「重新审核」	`pages/recorder/components/LaborSubmissionReviewDetailFooter.vue`

报工审核列表 labor-submission-review.vue：列表 useLaborSubmissionReviewList；通过/驳回 dialogs/LaborSubmissionReviewApprovePopup.vue 等。

现场报工 production-wip-op-add.vue：

步骤	抽出内容	建议路径
1	加载 / 提交 / 工人选择	`composables/recorder/useProductionWipOpAdd.ts`
2	产出行 / 工序 / 工人 / 记工方式 UI	`pages/recorder/components/ProductionWipOpAddContextFields.vue`
3	计时/计件字段 UI	`ProductionWipOpAddLaborFields.vue`

在制开单 production-wip-open.vue：

步骤	抽出内容	建议路径
1	配方缩放 / BOM	`composables/recorder/useProductionWipOpenCatalog.ts`（已有）
2	计划产出 / 投料行编辑	`composables/recorder/useProductionWipOpenLineEditors.ts`
3	校验 + `postProductionWipOpen`	`composables/recorder/useProductionWipOpenSubmit.ts`
4	日期备注 / 计划产出 / 投料 UI	`ProductionCreateHeaderFields` + `ProductionWipOpen*Section.vue`

入库详情 inbound-detail.vue：

步骤	抽出内容	建议路径
1	加载 / 冲红	`composables/recorder/useInboundDetail.ts`
2	行展示 / 凭证解析	`utils/inbound-detail-display.ts`
3	汇总 / 凭证 / 明细 UI	`pages/recorder/components/InboundDetail*.vue`

生产记工行 production-labor-line-form.vue：

步骤	抽出内容	建议路径
1	session 初始化 / 校验提交	`composables/recorder/useProductionLaborLineForm.ts`
2	工人搜索弹层	`composables/recorder/useProductionLaborWorkerPicker.ts`
3	表单字段 UI	`pages/recorder/components/ProductionLaborLineFormFields.vue`

首页九宫格权限：utils/miniapp-shell-permission.ts（permissionCodes 过滤 + 点击校验）。

验收

行为与 Web ProductionPostDialog 对齐（同一 POST 体）
403 仍走 getMiniappApiErrorMessage / useMiniappApiToast
见 miniapp-acc-mobile-write.md M3 清单

不必一次做完

优先抽 composables（2、3、5），模板可暂留单文件，避免大规模 UI diff。

小程序大页拆分指引 ​

目标 ​

建议拆分顺序（以生产过账为例） ​

验收 ​

不必一次做完 ​

小程序大页拆分指引

目标

建议拆分顺序（以生产过账为例）

验收

不必一次做完