从真实页面的测量与复现出发，优化请求竞态、状态同步、列表渲染、包体积和表单反馈，并验证接口幂等边界、代码规范及关键业务交互。适用于保留现有技术栈的 Vue 存量工程。
## 任务目标 请完成选定 Vue 页面或模块的性能、状态一致性与交付质量优化，先测量问题，再落地代码并验证。指标未给出时先记录基线并提出与场景相符的目标，不虚构响应时间、提升比例或用户规模。 在现有授权范围内完成实际改动和验证；缺少外部条件时先完成可独立实现的部分，不能只停留在计划。 ## 输入信息（选填） 两项均可留空，也可直接用一句话说明目标并附上已有资料。无需自行整理版本、配置或完整需求表；能读取的内容由执行者补齐。 优化对象或现象：优先定位对话中提到的慢操作或状态错乱；未描述现象时，从当前页面的首屏、筛选、分页和编辑切换建立基线，先处理可复现的状态错误和重复请求。 工程或复现资料：使用已确认工程的路由、组件、请求封装、store、测试数据和现有性能记录；可运行时自行采集网络、渲染和构建产物证据。 ## 信息不完整时 先使用本次对话中已经说明的信息；用户留空、写“暂无／不清楚”或未替换输入标记，都按缺失处理，不当作真实路径、参数或业务值。已能从资料确定的内容不重复询问，不编造文件、日志、接口、业务值或执行结果。在用户已授权的范围内读取相关工程和材料，不为补齐输入擅自扩大操作范围。 ### 优先确认 - 核实 Vue 2/3、JS/TS、请求库、UI 库、路由缓存及现有 watcher 清理方式，不要求用户手填版本。 - 沿筛选、翻页和切换记录检查状态写入、请求取消、旧响应及 finally 的生效条件。 - 记录代表性操作的数据规模、模式、缓存、设备和网络条件，分开测量接口等待、重复请求、计算与组件更新。 - 检查模板循环、字典查找、资源导入、路由拆包和真实产物，确定优化影响范围。 ### 可采用的默认处理 - 未给性能指标时先采集可复查基线，以消除已证实浪费且业务不回归为目标，不承诺任意提速比例。 - 优先局部状态、纯 computed 与必要副作用清理；未证实瓶颈前不引入虚拟列表、全局缓存或 memo。 - 保留当前分页、选择及字典语义，写请求超时显示结果待确认，不把取消请求当作撤销业务。 ### 必须有依据的事项 - 优化涉及跨页选中、缓存失效或租户切换，而代码与接口无法确定需要保留的业务状态。 - 写操作结果未知且接口没有查单、幂等或补偿依据，不能自行重试并宣称提交成功。 只有缺口会改变业务结果、权限边界或关键实现，且无法从现有资料确认时，才集中提出最多 3 个关键问题；说明影响，并继续完成不依赖答案的部分。一般命名、排版和可逆实现细节按现有约定决定，不逐项等待确认。 ### 资料仍不足时的交付 - 无法运行页面时交付按代码证据排序的瓶颈候选、状态写入图和最小修正，另给同条件测量步骤。 - 没有代码时给出筛选竞态、重复提交、页面恢复的复现与验收用例，不填造耗时或包体数据。 ## 执行要求 关注用户操作结果和可复查证据，不为了使用优化技巧改动系统架构。 ### 读取工程并建立可比基线 确认目标目录、分支和 dirty 改动，保留原有内容，只改选定范围。核实 Vue 2/3、JS/TS、API 风格、构建框架、UI 库、store、路由、请求库和锁文件，保留选型，不默认升级或迁移。复现首屏、筛选、翻页、弹窗、切换记录等实际问题；记录数据规模、生产构建或开发模式、缓存状态、设备及网络。结合浏览器性能、网络、Vue DevTools 和构建分析，区分接口等待、重复请求、脚本计算、组件更新和资源加载；权限或数据错误优先于微小速度收益。 ### 定位结构与状态责任 页面编排流程，业务组件承接领域交互，通用组件负责稳定通用契约，composables/hooks 管理组合式逻辑和清理，API 层统一请求契约，store 管理必要共享状态，types 与 styles 各归其位；按问题整理现有模块，不建空目录。纯无副作用函数进入 util，领域规则集中在业务模块，真正共用的响应式能力才复用。不要把数据、权限、表单和所有展示塞进万能组件或 util，也不为性能把所有状态搬入全局。 ### 消除状态不同步 为查询条件、分页、选择项、表单和缓存分别确定唯一写入来源，派生值用 computed，props、事件载荷和 v-model 契约明确，不直接修改父级状态。检查路由返回、筛选重置、切换租户或记录、删除末页数据后的状态；分页和选择项的保留规则必须对应业务。编辑副本说明与源数据同步时机，避免双向 watch 相互回写。枚举和魔法值与服务端数据库码、权限及字典一致，已有字典继续复用，禁止复制另一套状态映射；失效缓存不得让旧权限或旧字典继续控制操作。未知或停用字典码保留原始值并作可识别提示，禁止映射为成功、首项或任意合法状态；编辑提交按真实接口契约处理，不为消除告警擅自改写原值。 ### 处理请求竞态和副作用 快速输入、连续翻页、切换弹窗记录会形成并发请求。按当前请求库取消可取消的旧请求，同时用序号或请求条件快照保护结果、错误和 finally，确保过期请求不能覆盖当前内容或解除新请求的 loading；不同业务请求分别维护状态。取消客户端请求不代表服务端业务已撤销，写操作超时不能直接自动重试。watch 只监听必要源，避免无边界 deep 和回写循环；清理失效请求、监听、定时器与订阅。Vue 3.5+ 的 onWatcherCleanup 必须同步注册，低版本使用其支持的清理机制和生命周期；离开、卸载及缓存页面停用时按实际行为处理。 ### 控制计算与渲染成本 v-for 采用稳定唯一的业务 key，排序和编辑列表不用索引、随机值或时间戳。将模板和循环中昂贵过滤、排序、格式化、字典查找移到有明确依赖的派生层；computed 保持纯计算，不夹带请求或状态修改。对重复查找按数据规模建立合适索引，注意索引随源数据更新。避免每项都发请求；优先真实可用的批量查询或服务端分页，没有接口时说明限制并控制并发，不伪造后端能力。检查 props 是否反复创建无意义新对象、组件是否无关更新；按证据减少渲染，不盲目 memo、深比较、shallow API 或缓存，防止失去必要更新。 ### 按场景优化列表与资源 根据实测 DOM 数量、交互延迟和数据规模选择分页或虚拟列表，核验行高、滚动定位、选择项、键盘操作与 UI 库能力，不用固定条数一刀切。测量实际生产包、关键路由资源和重复依赖，按既有构建能力优化导入、路由懒加载及重资源加载时机；确保首个操作不会因拆包失败失效。移除代码或依赖前核查自动导入、动态路由、按需组件与注册入口。缓存明确键、有效期、失效条件及身份边界，不用长期全局缓存掩盖接口问题。任何优化都要有前后相同场景的记录，不能以依赖宣传体积代替实际产物。 ### 完成可用的业务反馈 区分 loading、empty、error、成功及权限不足，失败不可显示成空数据，保留数据或清空数据按场景说明。正确区分 null、未提供、0、false 和空字符串。表单按输入、失焦与提交时机校验，错误就近展示并可纠正；服务端失败保留合理输入，弹窗关闭、重新打开不残留旧结果。提交时即时反馈并防重复点击，后端幂等键、唯一约束和事务仍由接口承担；没有后端能力时写明局限，不能把防抖当幂等。失败后给出真实可行的恢复路径，不吞错、不伪造成功。 ### 把优化纳入既有规范 保持政企中文界面的层级、对齐、间距、表格密度、主次操作和反馈一致，不添加非业务口号与技术说明。命名清楚，注释解释业务原因、接口限制和性能取舍，不逐行注释。使用兼容版本的 ESLint、eslint-plugin-vue，TS 工程配套 typescript-eslint，并保留 .vue 与脚本解析器分工；沿用 flat/legacy 模式和现有 ESLint 或 Prettier 格式方案。统一空格、缩进、换行、引号、分号、导入及文件区块顺序，对齐 .editorconfig；兼容配置只解决格式职责冲突，不降低质量门槛。零新增 lint 违规，不用 disable、扩大 ignore、any 或 ts-ignore 隐藏问题，不整仓格式化制造无关差异。 ## 交付与验收 ### 验证结果并完成交付 实际执行相关 lint、适用的 typecheck、生产 build 和关键交互验收；JS 工程无类型检查时说明不适用，工具或环境缺失则标记未执行。至少覆盖正常与空数据、未知与停用字典码、接口失败与恢复、快速筛选翻页、旧响应晚到、连续提交、切换记录、返回页面和权限变化；验证表单失焦、弹窗焦点、中文换行及新产生的控制台错误。只在隔离且获准的测试环境模拟网络故障，不影响真实业务。性能比较保持设备、数据、模式及缓存条件一致，多次记录波动，分别列包体积、请求量、渲染或交互指标；改善不能以业务回归为代价，未改善也如实报告。 输出：①问题、复现及基线；②已实现改动与关键路径，说明结构、状态和请求规则；③实际生效的检查与格式配置；④优化前后指标和测量条件；⑤验收项目、命令或操作、结果及未执行原因；⑥剩余限制和最小后续工作。保留历史失败与新增问题的区分，未跑不宣称通过，没有测量不宣称提速。完成已授权实现，不只提交建议，不生成无关 Markdown 文档。 ### 本条完成检查 - 记录问题、基线、实际修改和相同条件下的优化前后指标，未改善或未测量如实列明。 - 验收旧响应晚到、finally 竞态、快速分页、记录切换、权限变化及未知字典码，不以性能收益抵消业务错误。 - 执行相关 lint、适用类型检查、生产构建与关键交互，列出真实命令、结果和剩余限制。 按本条要求组织结果，使用简洁中文和一致的编号、术语、缩进及空行；已有项目格式优先。只说明实际完成的内容，将采用的假设、未完成项和缺少的条件写在相关位置，不额外生成无关文档。未执行、无法复现或缺少证据的检查如实标注，不宣称已通过或已有性能收益。 ## 参考资料与适用边界 官方依据：Vue 性能：https://vuejs.org/guide/best-practices/performance.html、Vue 监听清理：https://vuejs.org/guide/essentials/watchers.html、阿里前端规约：https://github.com/alibaba/f2e-spec、Vue 插件配置：https://eslint.vuejs.org/user-guide/、Prettier 与 Linter：https://prettier.io/docs/integrating-with-linters。 收录核验（2026-09-08）：已核对公开资料和本次项目要求的覆盖范围；尚未使用真实项目执行本模板或进行模型效果评测。具体改动、性能和回归结果须在目标工程中验证。
将业务字段、校验和保存状态落到 TDesign Form，检查动态字段、异步校验、重置语义以及失败后的可恢复操作。
## 任务目标 请根据已知业务流程和字段契约，开发或审查本次 Vue 业务表单。 以核查和评审为主，给出有证据的判断及可复核的修改建议；本次用户另有明确实现要求时，按其授权范围执行。 ## 输入信息（选填） 两项均可留空，也可直接用一句话说明目标并附上已有资料。无需自行整理版本、配置或完整需求表；能读取的内容由执行者补齐。 表单任务：从当前页面的新建或编辑入口识别业务表单，先对照字段与保存契约审查；用户明确要求开发或修复时，继续完成规则已明确的实现。 表单或字段资料：查页面、接口请求与响应、类型、字典、权限、回填代码和现有测试，按已安装版本读取 TDesign Form 能力。 ## 信息不完整时 先使用本次对话中已经说明的信息；用户留空、写“暂无／不清楚”或未替换输入标记，都按缺失处理，不当作真实路径、参数或业务值。已能从资料确定的内容不重复询问，不编造文件、日志、接口、业务值或执行结果。在用户已授权的范围内读取相关工程和材料，不为补齐输入擅自扩大操作范围。 ### 优先确认 - 提取字段类型、必填条件、长度范围、默认值、清空语义、只读条件与提交名称。 - 检查 Form 数据、FormItem 名称、validate 返回值、远程唯一性及过期响应处理。 - 追踪新增编辑详情、初始快照、隐藏字段、重置和失败恢复，核对实际请求中的日期金额枚举。 ### 可采用的默认处理 - 优先复用现有字段规则和接口，不凭必填星号推断业务约束，明确区分 0、false、空字符串与未提供。 - 初次进入不集中报错，按现有交互使用输入、失焦及提交校验；明确通过后才保存。 - 提交失败保留合理输入，前端防重不代替后端校验和授权；未要求开发时默认不改业务表单。 ### 必须有依据的事项 - 隐藏或清空字段是否参与提交、金额日期转换或新增默认值缺少真实业务定义，不能随意补值或删除。 - 字段修改权限及远程唯一性失败的业务处理无法确定时，不能自行放行保存。 只有缺口会改变业务结果、权限边界或关键实现，且无法从现有资料确认时，才集中提出最多 3 个关键问题；说明影响，并继续完成不依赖答案的部分。一般命名、排版和可逆实现细节按现有约定决定，不逐项等待确认。 ### 资料仍不足时的交付 - 规则不全时先完成已知字段表、布局、状态处理和测试设计，将影响保存的未决项集中列出。 - 没有工程但接口明确时提供可检查的核心组件和请求示例，真实版本与联调结果注明待验证。 ## 执行要求 按当前版本的 TDesign Form 能力实现表单，字段权限、数据提交和重复操作处理须与本项目业务规则一致，不能只依赖组件默认行为。 1. 先把每个字段的业务含义、类型、必填条件、默认值、长度或范围、只读条件及提交名称整理成表。区分空字符串、零、false 和未提供，尤其说明编辑时哪些字段允许清空，不能凭视觉上的必填星号推断规则。 2. 对照实际版本配置 Form 数据、FormItem 字段名称和校验规则。需要跨字段判断时明确关联关系；条件隐藏字段要明确是否保留旧值、是否参与校验和提交，不能让看不见的字段持续阻止保存。 3. 设计校验触发时机，区分输入变化、失焦和提交。正确处理 validate 或提交事件的校验结果，只在明确通过时调用保存接口；远程唯一性校验需要识别过期响应，不能把网络超时当成字段已经可用。 4. 区分新增、编辑、详情状态，确定“重置”是清空还是恢复初始数据，并使用对应能力。异步加载编辑数据后核对初始值快照，再次打开表单时不得出现上一条记录的值或错误提示。 5. 完成保存中的按钮状态、重复触发处理、成功反馈和接口失败反馈。字段错误落在对应输入项，整体失败保留已填写内容并给出恢复方法；前端状态限制需要与服务端业务校验一致，不能代替服务端授权。 6. 逐项验收正常提交、缺失必填、边界值、非法格式、动态条件切换、远程校验失败、重复点击、回车提交及重置。验证日期、金额和枚举转换后的实际请求数据，禁止只看页面显示就断言数据正确。 ## 交付与验收 输出：字段规则表、状态与交互表、核心组件代码、请求示例、验收记录。代码缺失时说明推断范围；规则不明确时列出影响保存的待确认项，先完成不依赖这些项的结构，不自行编造业务枚举和接口字段。 ### 本条完成检查 - 交付字段规则、隐藏重置策略、表单状态、核心代码或审查缺陷及请求映射。 - 验证缺失、边界、非法格式、条件切换、远程校验失败、重复点击、回车和记录重开。 - 以实际请求核对日期、金额、枚举及空值，不能只看显示或组件校验通过判断业务正确。 按本条要求组织结果，使用简洁中文和一致的编号、术语、缩进及空行；已有项目格式优先。只说明实际完成的内容，将采用的假设、未完成项和缺少的条件写在相关位置，不额外生成无关文档。未执行、无法复现或缺少证据的检查如实标注，不宣称已通过或已有性能收益。 ## 参考资料与适用边界 官方来源（2026-09-08 核验）： - [腾讯 TDesign《TDesign Vue Next Form 类型与接口说明》](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)
