从真实页面的测量与复现出发,优化请求竞态、状态同步、列表渲染、包体积和表单反馈,并验证接口幂等边界、代码规范及关键业务交互。适用于保留现有技术栈的 Vue 存量工程。
请完成选定 Vue 页面或模块的性能、状态一致性与交付质量优化,先测量问题,再落地代码并验证。输入:工程路径与优化范围、慢或错的具体操作及复现数据量、当前业务与接口契约、目标设备网络和验收环境、可接受指标及不可改变的行为。指标未给出时先记录基线并提出与场景相符的目标,不虚构响应时间、提升比例或用户规模。 关注用户操作结果和可复查证据,不为了使用优化技巧改动系统架构。 一、读取工程并建立可比基线 确认目标目录、分支和 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 文档。 官方依据: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):已核对公开资料和本次项目要求的覆盖范围;尚未使用真实项目执行本模板或进行模型效果评测。具体改动、性能和回归结果须在目标工程中验证。
适用于已有 Vue 2/3、JS/TS 工程:梳理页面与组件职责、状态所有权、API 和字典边界,落实兼容版本的 ESLint、格式规范及实际交互验收。保留既有选型和未提交改动,在选定范围内完成代码重构。
请在真实 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 浏览器交付物敏感信息检查。基于所提供工程和业务证据完成检查,资料不足时先列出影响结论的关键问题,可以推进的部分标注假设;不要编造文件、日志、测量结果或已完成的操作。 检查范围包括 Vue 源码、静态 HTML、JavaScript、source map 和部署配置。HTML 注释中的信息限制按文末规约核对;构建产物、调试文件与公开配置属于扩展检查,需要结合实际构建和访问证据判断。 输入:源码与构建产物目录、构建命令及环境变量定义、静态资源发布规则、调试文件策略、已授权检查的访问范围。 检查 HTML 注释中是否包含凭据、个人信息、内部地址等敏感内容,并追踪它们是否进入可公开获取的文件。按项目实际版本和发布方式判断暴露范围,不机械沿用旧示例。 执行步骤: 1. 确认构建版本、实际输出目录和公开发布的文件范围,把开发源码、服务器私有文件、浏览器可获取文件分开;没有访问证据时只报告潜在暴露路径,不宣称已发生泄露。 2. 在HTML注释、内联配置及前端源码中查找可能敏感的类别,记录文件位置和信息类型,交付报告只给脱敏摘要;公开接口地址或可公开的客户端标识不能仅因名称像密钥就判为秘密。 3. 追踪疑似字段如何从环境变量、配置文件或构建替换进入客户端产物,核对实际构建结果;不要认为环境变量保存在服务器上,就必然不会被打进前端代码。 4. 检查source map、旧版文件、备份后缀和静态目录规则能否使原本未计划交付的内容被获取,仅核验授权范围内已知路径,不进行无边界的互联网枚举。 5. 提出移除敏感输入、转为服务端调用或修正发布范围的最小方案;若证据表明确有凭据暴露,将撤销和轮换列为专门处置事项,不能只删除注释后宣称风险消失。 6. 重新构建并核对新产物、静态服务与缓存中的可获取内容,验证受影响业务仍能正常调用;以同一个匿名样本标记验证链路,不用真实密码验证是否还会出现在输出中。 输出:按候选信息、可信程度、来源到公开面的传播路径、最小修正和验证证据输出。问题表仅保留字段名、脱敏标记、文件位置及影响;明确哪些内容已确认公开可取、哪些尚未实际访问,以及缓存和旧制品的复核范围。 来源核验日期:2026-09-08。 - 阿里巴巴《f2e-spec:HTML 编码规约的注释信息限制》:https://github.com/alibaba/f2e-spec/blob/beb1ac899ea6dab206331263bbcdcad8f8fe336e/docs/coding/html.md 验证说明:已核对上述公开来源及具体规则或能力;本模板尚未通过模型对比实验或线上业务实测,不能以来源品牌、仓库热度或扫描分数代替验收。 来源许可说明:MPL-2.0(仓库许可)。本条为中文原创整理,来源内容与本模板补充要求已在正文区分。
定位路由切换后的样式串用、组件覆盖失效和弹层遮挡,核对选择器、样式覆盖与层叠关系,完成最小修改及相邻页面回归。
任务:Vue 跨组件样式污染与弹层遮挡定位。基于所提供工程和业务证据完成检查,资料不足时先列出影响结论的关键问题,可以推进的部分标注假设;不要编造文件、日志、测量结果或已完成的操作。 检查 Vue 页面及组件样式,保留项目既有的缩进、现代颜色语法和浏览器适配策略。文末 FEX 资料为未定稿草案,核验提交来自 2018 年;使用其中建议时须核对当前 Vue、组件库和浏览器的实际行为。 输入:问题页面与复现路径、Vue及组件库版本、样式文件与组件源码、浏览器计算样式、构建样式顺序、目标终端。 重点检查选择器复杂度、缩写属性覆盖、!important 和视觉层级管理。以当前项目的样式生效结果确定修改方式,不机械沿用旧示例。 执行步骤: 1. 先复现一条最短路径,记录初次进入、切换路由、再次返回的差异,标出发生异常的元素和业务影响;截图只能说明外观,不能据此猜定是哪条选择器生效。 2. 从浏览器计算样式反查命中的规则、来源文件、加载顺序、继承关系及被覆盖值,区分组件库默认样式、全局样式、scoped转换和行内样式,保留可定位的证据。 3. 检查过宽选择器、相同类名、深度选择器及第三方内部类覆盖,找出影响范围超出业务组件的声明;缩写属性要核对是否顺带重置了原本只想保留的方向或字体设置。 4. 对弹窗、下拉和提示层单独分析实际挂载位置与层叠上下文,区分被父容器裁切和层级较低;不要在未确认原因前反复增大z-index或叠加!important。 5. 提出一处根因对应一项最小修改,例如收紧作用范围、取消重复覆盖、使用组件公开主题能力或调整挂载位置;涉及组件库内部结构时注明升级维护成本。 6. 复核直接访问和路由来回切换,覆盖多个同类组件、弹层叠加、长中文、滚动及目标窄屏;记录修改前后同一元素的生效规则,验证相邻页面没有被连带改变。 输出:给出复现路径、样式来源表、根因与证据、最小修改片段及受影响页面回归表。样式来源表包含元素、属性、最终值、胜出规则、来源位置与覆盖原因;不得将视觉截图通过等同于业务交互通过。 来源核验日期:2026-09-08。 - 百度 FEX《CSS 编码规范(公开草案)》:https://github.com/fex-team/styleguide/blob/b1bc701d1c92220d0eb90e88ed4ccdc3d5c979dc/css.md 验证说明:已核对上述公开来源及具体规则或能力;本模板尚未通过模型对比实验或线上业务实测,不能以来源品牌、仓库热度或扫描分数代替验收。 来源许可说明:CC-BY-4.0(仓库 LICENSE.txt)。本条为中文原创整理,来源内容与本模板补充要求已在正文区分。
使用 TDesign ConfigProvider 统一表单、分页、日历、弹窗和空状态文案,完成符合国内政企业务习惯的界面验收。
请对 系统名称 做中文界面和组件默认文案一致性检查。输入:页面清单或代码、TDesign版本、业务词汇、日期金额规则、目标用户、现有设计约定。 在使用 TDesign 的 Vue 后台中,按当前版本的 ConfigProvider 能力检查全局文案与局部覆盖。中文业务命名和政企页面表达遵循本项目约定,不由组件默认配置代替业务判断。 1. 先统计表单、分页、日期选择、对话框、选择器和空状态使用位置,识别全局配置与页面局部覆盖。查明运行时真实显示的语言,不能只看系统菜单中文就判断基础控件已全部中文化。 2. 对照当前版本的 globalConfig 接口统一常用组件文案。把通用词放到统一配置,把“提交审批”“停用设备”等业务动作留在对应场景;不猜语言包路径或配置字段,不修改组件库的自动生成接口文件。 3. 核对月份、星期、日期占位、确认取消、表单必填和分页数量表达。逐项区分展示格式与接口传输格式,确认时区、日期范围两端是否包含、金额单位及小数位,避免为了统一外观改变实际业务含义。 4. 统一相同业务对象的称呼和状态词,检查列表、详情、编辑与结果提示是否一致。占位提示用于说明输入方法,不能代替字段标签;错误文字需要告诉用户哪一项有问题和如何修正。 5. 检查页面层级、筛选区、表格区和主要操作的位置。保持标签对齐、主次按钮清楚、中文换行自然和信息密度稳定,删除不帮助完成业务的宣传口号、虚构成绩及冗余装饰,保留必要状态和业务说明。 6. 实际打开不同业务页面,操作日期选择、无结果查询、必填校验、分页和弹窗。检查全局修改是否误伤特殊场景,重点验证较长机构名称、低分辨率窗口和加载失败状态,记录截图或可复现路径。 输出:统一词汇表、全局配置及局部覆盖表、需调整的页面清单、验收结果。每项修改说明它改善的具体业务理解或操作;没有页面运行条件时给出待验证清单,不能把静态代码检索结果当作完整视觉验收。 官方来源(2026-09-08 核验): - [腾讯 TDesign《TDesign Vue Next ConfigProvider 类型与接口说明》](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/config-provider/type.ts)
处理 TDesign Dialog 表单弹窗、删除确认等场景中的重复提交、关闭来源、草稿保留和失败恢复。
请核查 弹窗业务场景,使用户能明确完成操作并在失败后继续处理。输入:弹窗代码、接口约定、成功后页面变化、草稿保留要求、TDesign版本。 按当前版本的 TDesign Dialog 能力处理显示、加载和关闭事件。业务操作的幂等、授权以及是否允许取消,需要依照项目事实实现。 1. 列出弹窗承担的唯一主要任务、操作对象和完成条件。区分确认删除、编辑保存、结果提示等场景,按钮直接写业务动作;需要说明影响范围时描述真实后果,不使用笼统的“温馨提示”掩盖关键内容。 2. 设计未操作、输入中、提交中、成功、失败等状态,确定谁控制 visible。把确认按钮加载与真实请求周期绑定,避免请求尚未结束弹窗就关闭,或请求失败后按钮一直处于不可用状态。 3. 分别处理取消按钮、关闭按钮、遮罩点击和 Escape。存在未保存修改时按业务约定保留、确认放弃或阻止关闭;不要把返回 void 的动画前回调误当成支持异步拦截的关闭守卫,应检查该版本真实接口能力。 4. 核对回车确认与内部表单提交是否可能同时触发请求。对连续点击、键盘触发和慢请求期间再次操作进行限制;前端限制只减少重复触发,涉及不可重复业务操作时同时核查服务端约定。 5. 明确关闭时是否销毁子内容以及重新打开时如何初始化。编辑另一条记录时清理旧对象、错误提示与异步回调,成功后根据接口实际结果刷新列表或详情;不得把本地假定值直接当成服务器保存结果。 6. 验收焦点进入与返回、键盘操作、长内容滚动、遮罩遮挡和中文按钮长度。模拟业务校验失败、网络中断、延迟响应、重复触发及用户切换记录,检查能否继续编辑或安全返回原页面。 输出:弹窗状态表、每种关闭来源的处理、必要代码修改和验收记录。对接口已受理但客户端未收到结果的情况单独说明确认结果的办法,避免直接再次提交。缺少版本或源码时先给处理方案和待核实 API,不声称组件天然保证全部业务安全。 官方来源(2026-09-08 核验): - [腾讯 TDesign《TDesign Vue Next Dialog 类型与接口说明》](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/dialog/type.ts)
围绕服务端分页和批量业务操作,核查 TDesign Table 的行标识、筛选排序、跨页选中、状态反馈与请求结果一致性。
请开发或检查 业务列表名称。输入:页面代码、接口协议、字段与列定义、筛选条件、批量操作规则、TDesign版本、预计数据规模。 按当前版本的 TDesign Table 能力实现业务表格。服务器分页、统计口径及权限以本项目约定为准,不把组件默认行为视为业务需求。 1. 先明确列表记录的稳定主键、总数含义、筛选字段、排序范围与分页方式。区分当前页数据、全部查询结果及统计卡片口径,检查页面是否对服务器已经分页的数据再次进行本地分页。 2. 为行指定可靠标识,核对列配置与真实数据类型。日期、金额、状态分别按业务含义展示;长文本提供查看方式,关键标识和主要操作不得被无解释地截断,也不要用彩色标签代替完整状态文字。 3. 将分页、排序、过滤事件映射到接口参数,说明筛选变化后是否回到第一页。处理快速连续查询产生的响应顺序,避免先发后到的旧数据覆盖新条件;查询失败时不得把旧结果伪装成新条件的有效结果。 4. 明确勾选是当前页有效、跨页保留还是针对全部查询结果。使用受控选中值保持组件与业务一致,核对分页保留选中配置;筛选变化、权限变化和数据删除后及时处理失效记录,提交前显示实际操作对象范围。 5. 为首次加载、刷新、空结果、网络失败、无权限和部分操作失败设计可理解的反馈。批量动作完成后同步行状态、数量及选中项,部分失败时给出失败对象与原因,不能只显示一个含糊的“操作成功”。 6. 在实际业务数据长度下验收表头、固定列、横向滚动、列宽和窄窗口。验证分页末页删除、跨页勾选、全部取消、重复点击、排序后勾选保持及筛选后批量操作,同时查看真实请求和服务端返回。 输出:数据口径与参数映射表、表格核心实现、选中规则、状态设计及验收记录。每个缺陷写清触发操作、实际结果、期望结果和修改位置。缺少后端协议时先列出待补充字段,并提供有明确假设的前端方案,不虚构总数或批量执行结果。 官方来源(2026-09-08 核验): - [腾讯 TDesign《TDesign Vue Next Table 类型与接口说明》](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/table/type.ts)
将业务字段、校验和保存状态落到 TDesign Form,检查动态字段、异步校验、重置语义以及失败后的可恢复操作。
请根据 业务流程 和 字段清单 开发或审查 页面名称 的 Vue 业务表单。输入补充:现有代码、TDesign版本、接口请求与响应、权限及状态规则、新增编辑默认值。 按当前版本的 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)
核查 TDesign Vue Next 的组件引入、基础样式、构建体积和浏览器兼容,适合 Vue 3 企业后台初始化或接入复核。
请为 业务系统名称 完成 TDesign Vue Next 接入方案或现有接入复核。输入:项目代码、Vue与构建工具版本、依赖锁文件、目标浏览器、常用组件清单、体积与加载目标。 接入范围限定为桌面端 Vue 3 与 TDesign Vue Next。项目使用 Vue 2、其他组件库或小程序时,先指出不适用部分,不直接替换工程依赖。 1. 确认真实入口、路由、样式加载顺序、组件使用比例和目标浏览器。列出已有组件库及重复能力,判断采用 TDesign 是新增统一组件还是局部接入,避免同一业务控件在不同页面出现多套行为。 2. 按实际使用范围选择全量注册、显式按需引入或自动导入。说明选择依据与维护成本,不把按需引入当成无条件要求;只有产物分析能证明收益时,才为体积目标增加相关插件。 3. 核对包版本、解析器和构建插件,使用项目锁文件固定可复现依赖。检查生产构建是否依赖未固定版本的外部脚本或样式;需要外部资源时列明来源、版本和不可用时的业务影响。 4. 确认基础全局样式已加载,检查自动导入是否同时处理组件和函数式调用。对输入框、选择器、表格、弹窗各做一个真实页面引用,识别缺样式、重复样式、组件未注册及编辑器提示失效等问题。 5. 复核样式重置与现有布局的关系,特别检查盒模型、弹层、滚动区域和中文标签。使用有业务含义的页面内容,不增加装饰性标语、虚构统计数据或大面积炫光;布局保持对齐、层级清楚、操作集中。 6. 通过项目既有构建命令生成产物,检查包体、资源请求和相关浏览器中的真实页面。分别记录首屏正常、路由切换、按需弹窗首次打开及刷新后直达页面的结果,失败时保留具体报错和复现路径。 输出:接入方式及理由、涉及文件与配置、依赖版本、产物对比、页面验收结果。性能结论必须包含实测条件;缺少基线只给采集方法。无法运行时,标记所有待验证项并提供最小接入代码,不虚报浏览器兼容或上线完成。 官方来源(2026-09-08 核验): - [腾讯 TDesign《TDesign Vue Next 安装与使用》](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/tdesign-vue-next/site/docs/getting-started.md)
为现有 Vue 工程制定兼容当前工具版本的规范检查方案,区分新增问题、历史问题与业务修复,保持本地和持续集成检查一致。
请为 项目目录或代码 接入或审查前端规范检查。已知信息: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)