dashboard/.qoder/repowiki/knowledge/zh/将 model_index.vue 按功能边界拆分为子组件与 composable/将 model_index.vue 按功能边界拆分为子组件与 composable.md

kind, name, source, category

kind	name	source	category
design	将 model/index.vue 按功能边界拆分为子组件与 composable	session	adr

将 model/index.vue 按功能边界拆分为子组件与 composable

来源：b4926ba → 6bb39e9 提交周期内记录的编码计划——内容为规划时意图，实现可能滞后或有出入。

状态： accepted

背景

frontend/src/views/model/index.vue 文件膨胀至 1824 行，同时承载搜索列表、5 个对话框、大量状态管理与样式，导致可读性与可维护性下降。

决策驱动

• 单文件过大难以维护
• 按功能边界提升复用性
• 保持页面编排职责单一

备选方案

• 按功能拆分：components + composables — 优点：每个对话框独立文件；列表逻辑抽到 useModelList.js；index.vue 仅保留编排与 API 调用
• 不拆分，继续在同一文件中迭代 （已否决） — 优点：改动最小；缺点：文件持续膨胀，新增功能成本更高

决策

将 index.vue 拆为 ~250 行的主页面编排文件，并新建 components/ModelFormDialog.vue、EqCacheDialog.vue、PushProgressDialog.vue、CsvViewerDialog.vue、PushViewDialog.vue 以及 composables/useModelList.js；各对话框的触发逻辑移入 index.vue 中直接调用 API 后将结果通过 props 传给子组件。

影响

index.vue 大幅瘦身，新增/编辑、EQ 缓存、推送进度等能力可被其他页面复用；但需要维护更多文件与父子通信契约（props/emits/expose）。