TypeScript

请在真实 Vue 工程中完成选定范围的结构、组件和编码规范重构，交付实际代码及验证结果。输入：工程路径与目标页面或模块、需要解决的维护问题、必须保留的业务行为和接口、现有规范及设计参考、验收环境与关键业务流程。先读取工程；能从代码确认的信息不重复询问。资料缺失时标明事实与假设，只对阻断实施的关键项提问，其余授权工作继续完成。

以当前工程事实决定实现，降低理解和修改成本，不按文件行数或目录数量评价重构效果。

一、确认范围和基线
检查分支、未提交及未跟踪改动，记录目标文件现状，保留已有 dirty 内容，不覆盖其他人的工作。确认实际 Vue 2/3、JS/TS、Options/Composition API、构建框架、UI 库、路由、store、请求库和锁文件版本；沿用既有选型，不强迁移 Vue、TypeScript、Vite、Pinia 或组件库，不顺手升级依赖。跟踪页面入口、权限、请求、数据转换和显示结果，先列出待修问题、最小修改范围及可验收行为；未经授权不扩展为整仓格式化。

二、按职责整理代码
页面负责路由参数与页面流程编排；业务组件承接明确领域场景；通用组件只保留稳定的跨场景交互契约；composables/hooks 承接可复用的响应式逻辑和生命周期；API 层负责请求契约；store 只保存确需共享的状态；types 记录已有类型契约；styles 归属主题、布局或组件。利用现有目录表达这些职责，不机械新建空目录，不为了拆分制造层层透传。纯格式转换和无副作用计算抽到 util；权限判断、字典转换等领域能力放在明确业务模块集中管理，不堆进万能 util。

三、确定组件边界
沿业务职责、独立变化和真实复用拆分，避免既请求数据又拼装所有页面的超大万能组件；相似外观但行为不同不强行统一。复用方案必须列出至少两个真实使用场景或独立职责理由。明确 props 的类型、默认值、必填和空值含义，事件说明触发时机与载荷，插槽和 v-model 按当前版本定义；不直接修改 props 或隐式改写父级对象。组件内部实现保持封装，不用过量开关和跨层 ref 调用拼出第二套页面框架。

四、收敛状态和业务规则
每个业务状态明确唯一所有者，避免 props、局部副本、store 和 URL 各维护一套可写真相。派生值用 computed，表单编辑副本说明初始化、回填、取消与提交边界，切换记录不残留上条数据。业务状态码、枚举、权限标识与服务端和数据库字典一致，不能自行改名改值；已有字典接口或生成类型继续复用，不复制第二套硬编码。只有稳定的前端配置才抽命名常量；未知字典码给出可识别回退，不默认为正常状态。区分 0、false、空字符串、null 和未提供，不能用通用假值判断抹掉有效业务值。

五、保留异步与交互正确性
分别处理 loading、empty、error、成功和权限不足，不把请求失败展示成暂无数据；刷新已有数据是否保留由场景决定。表单校验按输入、失焦和提交时机给出字段附近反馈，首次进入不满屏报错，失败后保留合理输入。前端提交锁和按钮反馈负责防连点，服务端幂等键、唯一约束及事务由真实接口负责，不能承诺禁用按钮即可防重复写入。查询变化时按请求库能力取消旧请求，并用请求序号或条件快照保护旧响应及 finally，避免覆盖新结果或提前清掉 loading。watch 仅处理必要副作用，清理定时器、事件、订阅与失效请求；按实际 Vue 生命周期实现，不套用当前版本不存在的清理 API。

六、重构同时守住性能
v-for 使用稳定且唯一的业务 key，可排序或编辑列表不用索引、随机数和时间戳作 key。移出模板和循环里的昂贵计算、重复字典查找及逐项请求；纯派生用 computed，保持无副作用且依赖完整。批量接口须确实存在，不得编造；没有时按业务限制控制请求量。复用组件不能引入多余渲染和请求，分页、虚拟列表、memo 或全局缓存都要基于真实瓶颈再决定。若修改加载方式或依赖，记录构建包体积与关键页面渲染变化，不把“组件更多”当作性能提升。

七、把规范落实到工具
使用现有兼容版本的 ESLint 与 eslint-plugin-vue，TS 工程配套 typescript-eslint；检查 .vue 外层解析器和脚本解析器分工，确保模板、脚本和目标文件确实进入检查。保留 flat 或 legacy 配置，先核对 Node、ESLint、插件及 TS 版本，再补缺失配置，不照搬最新版。统一空格、缩进、换行、引号、分号、导入分组和单文件组件区块顺序，以项目已有 ESLint 或 Prettier 方案为准，并对齐 .editorconfig。若并用，明确格式和质量职责，按兼容机制消除重复格式规则冲突，不能借机降低质量门槛。

八、清理与可读性
改动范围做到零新增 lint 违规；不要靠新增 disable、扩大 ignore、any、ts-ignore 或删除检查绕过问题。历史问题与新增问题分开记录，无法修复的阻断如实报告。命名表达业务，函数职责单一；注释解释业务原因、接口边界、限制和必要取舍，不机械逐行翻译代码。删除冗余分支、废弃样式与依赖前核查静态引用、自动导入、动态路由、按需组件、插件注册及运行时使用，不能只凭一次文本搜索判定无用。

九、实际验收与交付
维持政企中文页面的清楚层级、对齐、间距、操作顺序和信息密度，复用现有 UI 规范；不新增装饰性口号或非业务说明。实际运行范围相关 lint、项目适用的 typecheck、生产 build 和关键交互验证；纯 JS 且无类型检查时标注不适用，已有检查缺失则说明覆盖缺口。重点验证查询重置、分页排序、编辑回填、取消保存、错误恢复、快速切换和权限状态，同时检查中文换行、弹窗焦点、按钮可用状态及新产生的控制台错误。原有检查失败不等于本次失败，但必须给出前后证据，不能宣称整体通过。

最后输出：①实际改动及解决的问题，列关键路径；②职责、组件契约、状态所有权与枚举来源的简表；③采用的格式和检查规则、版本兼容处理；④验证项、真实命令或操作、结果及未执行原因；⑤剩余风险和最小后续事项。只写完成事实，未跑不报通过，无证据不报提速；不生成无关 Markdown 文档，不以重构方案替代已授权的代码实现。

官方依据：阿里前端规约：https://github.com/alibaba/f2e-spec、Vue 逻辑复用：https://vuejs.org/guide/reusability/composables.html、Vue 插件配置：https://eslint.vuejs.org/user-guide/、ESLint 配置：https://eslint.org/docs/latest/use/configure/configuration-files、Prettier 与 Linter：https://prettier.io/docs/integrating-with-linters。

收录核验（2026-09-08）：已核对公开资料和本次项目要求的覆盖范围；尚未使用真实项目执行本模板或进行模型效果评测。具体改动、性能和回归结果须在目标工程中验证。

请为 项目目录或代码 接入或审查前端规范检查。已知信息：Vue 版本 Vue版本，Node 与包管理器 运行环境，现有检查配置 配置内容，本次改动 改动范围，团队约定 团队约定。

先核对当前 Vue 工程、现有工具及待接入规则包的兼容关系，不预设不同版本提供相同导出，也不把 React 专属规则应用到 Vue。

1. 读取依赖清单、锁文件、构建入口、Vue 单文件组件和现有检查配置，列明实际版本与已生效的规则。先确认解析器能处理模板、脚本和 TypeScript，再判断需要增加什么，避免重复安装同类工具。
2. 核对阿里规则包的实际导出、依赖范围和接入示例。选择与本工程兼容的接入方式，说明哪些使用公开规则，哪些沿用已有约定，哪些是本次业务补充。资料无法证明的 Vue 配置名称不要猜写。
3. 把检查范围划分为业务源码、测试、配置和生成产物。对生成文件及构建目录合理排除，对真实业务文件保留检查，避免用大范围忽略掩盖新增问题。检查提交前脚本是否会修改不在本次任务中的文件。
4. 运行已有检查并建立问题清单，按潜在行为错误、可维护性问题和纯格式差异区分。逐项指出具体文件和触发规则；同一根因合并解释，不把所有告警都列为高风险故障。
5. 先处理改动范围内问题，保持接口、页面文字和业务计算结果稳定。对需要改变运行行为的修复写明输入、原结果和新结果，不能混在批量格式化中。历史问题按模块安排，避免一次扫描演变成整库重写。
6. 检查本地与持续集成采用的版本、命令和文件范围是否一致。复核自动修复后的差异，针对涉及行为的改动运行相关测试和页面操作；只调整格式时不额外编写与实现重复的测试。

输出：环境与适用规则表、最小配置改动、按模块归类的问题、实际执行结果和未解决项。每个结论标明已验证或待验证，不能用“扫描完成”代替“检查通过”。没有代码或执行环境时，给出可落地配置方案及需要补充的最少信息，不声称已经接入。

官方来源（2026-09-08 核验）：
- [阿里巴巴《阿里巴巴前端规约：ESLint 配置说明》](https://github.com/alibaba/f2e-spec/blob/main/packages/eslint-config-ali/README.md)