覆盖 TDesign 微信小程序与 H5 的中文界面设计、组件接入、状态交互与适配验收,包含可直接使用的图标和插图生成模板,要求交付真实素材、文件清单及页面接入结果。
## 任务目标 请基于 TDesign,为指定业务完成微信小程序与 H5 的 UI 设计、图标与插图生成、页面实现和交互验收。交付能够在实际工程中运行的页面及已接入的素材文件,不要只给设计建议、整页效果图或缺少资源的代码。 在现有授权范围内完成实际改动和验证;缺少外部条件时先完成可独立实现的部分,不能只停留在计划。 ## 输入信息(选填) 两项均可留空,也可直接用一句话说明目标并附上已有资料。无需自行整理版本、配置或完整需求表;能读取的内容由执行者补齐。 页面目标:先从当前会话与工程现有业务确定页面目标;没有指定页面时,以当前工程的业务入口和一条已存在的列表到详情或办理链路作为首批范围,说明选择依据。目标终端沿用现有工程,不为双端名称额外新增另一套工程。 工程或参考资料:优先读取当前已确认工程的页面、组件、接口、主题和素材目录,并使用会话中已有截图与品牌文件;包版本、目标终端和素材数量从工程与页面需要中识别。 ## 信息不完整时 先使用本次对话中已经说明的信息;用户留空、写“暂无/不清楚”或未替换输入标记,都按缺失处理,不当作真实路径、参数或业务值。已能从资料确定的内容不重复询问,不编造文件、日志、接口、业务值或执行结果。在用户已授权的范围内读取相关工程和材料,不为补齐输入擅自扩大操作范围。 ### 优先确认 - 查包与锁文件、页面配置和路由,识别原生小程序、uni-app 或 H5,核对 TDesign 对应端的实际版本与已有封装。 - 沿首批页面读取接口类型、字典、权限、提交与返回逻辑,确认真实字段、状态和操作结果。 - 盘点主题变量、现有图标与插图、资源目录和页面引用,找出确实需要生成的业务入口图标及状态插图。 - 检查当前可用的图像生成、素材处理、浏览器与小程序验证工具,以及工程已有的检查和启动方式。 ### 可采用的默认处理 - 在已授权页面范围内实施并保留无关改动;沿用技术栈与品牌,没有品牌资料时采用克制的中文商务配色及原正文的移动尺度建议,不虚构标志、指标或业务模块。 - 常规操作使用对应端现有矢量图标,定制图标和插图按实际页面需要成套生成;有生成工具就实际生成、检查和接入,不以生成提示语替代素材交付。 - 先完成一个有代表性的页面及素材,再推广一致规则;原有接口能力未知时保留明确接入点,不伪造请求成功或自动替换未知字典值。 - 确需新建 H5 且无既有技术栈约束时,默认 Vue 3 + tdesign-mobile-vue;已有工程仍沿用实际技术栈。 ### 必须有依据的事项 - 查阅会话与现有工程后仍无法识别业务对象或办理目标时,需确认这一核心目标,不能擅自创建订单、审批或支付流程;可先完成双端能力及资源盘点。 - 真实写操作的生效条件、权限或接口契约存在冲突时,不能猜测接通;先完成不依赖该决定的布局、素材和已确认交互。 只有缺口会改变业务结果、权限边界或关键实现,且无法从现有资料确认时,才集中提出最多 3 个关键问题;说明影响,并继续完成不依赖答案的部分。一般命名、排版和可逆实现细节按现有约定决定,不逐项等待确认。 ### 资料仍不足时的交付 - 没有现有工程但业务目标明确时,按已授权的新建范围完成最小页面实现与接入结构;尚无运行条件时交付可审查代码、素材映射和具体启动步骤,不声称运行通过。 - 缺少图像生成工具时,继续完成页面与现有授权资源接入,逐个给出素材提示语、尺寸和状态规格,明确哪些素材尚未生成;只缺真机工具时仍须完成可用的素材生成与接入,仅将对应设备验收标为未执行。 ## 执行要求 ### 先确认业务和双端边界 检查工程目录、未提交改动、包与锁文件、TDesign 版本、路由、现有页面、组件封装、接口、权限和素材目录。列出本次页面、主要用户动作、关键状态及现有问题,保留无关改动。 区分微信原生小程序、uni-app 等跨端工程,以及 Vue H5。仅实施“目标终端”选定的端;只选择小程序或 H5 时,不为凑齐双端新增另一套工程。两端同时实施时统一信息层级、品牌和业务结果,按各自组件与运行机制实现,不能假定一份代码可以直接运行在所有端。已有技术栈优先;需要更换框架、升级主版本或新增独立工程时说明必要性与影响。 已有 H5 使用 Vue 2、React 或其他框架时,核实对应 TDesign 实现与版本,不自动替换成 Vue 3。不要把桌面后台缩小后当作移动页面,也不要把桌面版 TDesign Vue Next 的 API 当成 Mobile Vue 的 API。 从真实需求整理页面之间的进入、返回、保存、取消和再次进入路径。原始资料不足以判断核心业务时,只索取阻塞实现的必要信息;样式与排版的常规选择自行完成。未拿到工程、接口或运行条件时如实标记,不编造文件、业务数据和已经通过的验证。 ### 建立适合中国大陆用户的移动界面 页面围绕办理业务组织,文字直接说明对象、状态和动作。采用有秩序的中文商务或政企风格,同时保持移动端轻便、清晰;不要照搬桌面密集表格、多层工具栏和复杂侧栏。 优先复用 TDesign 与项目已有设计变量。缺少品牌规范时,可采用一个克制的蓝色主色、中性背景、清晰正文色和必要状态色;下面的数值属于项目默认建议,不是 TDesign 官方强制规则。 默认正文 14–16px、辅助说明不低于 12px、主要标题 18–20px;间距使用 4、8、12、16、24px 等统一尺度,页面左右留白通常 16px。圆角按组件角色统一,优先沿用 TDesign 默认;同类卡片、输入框、按钮不要各用一套半径和阴影。 同级标题、图标、字段和操作对齐,使用留白与轻分隔表达层级。内容多时按任务分组,不把每个字段变成独立卡片。重要按钮的触控区域默认按至少约 44×44 CSS 像素评估,在小程序中换算为对应布局尺寸;视觉图标可以较小,触控区域仍需足够。 首页优先呈现待办、常用业务入口和必要的业务信息。没有业务依据时不增加大横幅、欢迎口号、虚构统计、增长率、认证、荣誉或装饰性的“智能助手”。图像服务于识别、状态解释和必要引导,不挤占首屏的关键操作。 控制大面积渐变、光晕、玻璃效果、立体球体、漂浮方块、夸张阴影和过量胶囊标签。避免所有页面都采用“顶部大标题+彩色数字卡+宣传插图”的固定套路。保留真实业务特色,不用技术实现说明填充页面文案。 ### 按实际页面建立一致的交互 只实现需求中存在的页面和功能,以下按需选用;不能为了凑全套而增加没有业务依据的页面。 首页或工作台:优先展示用户下一步要处理的任务,入口顺序稳定,标题与图标含义一致。使用底部导航时保留少量一级任务,当前页可识别;详情页提供明确返回路径。 查询与列表:搜索、筛选、清空、加载更多和返回列表后的上下文规则明确。筛选结果与总数口径一致,加载中防止重复请求;区分初始无数据、筛选无结果和加载失败。移动列表突出对象、关键状态和主操作,需要比较多列时采用有说明的局部横向滚动,不压缩成难以阅读的小字表格。 详情:顶部显示对象名称、编号、当前状态及主要动作,正文按业务关系分组。审批和操作记录使用真实时间与结果;长中文、长编号、附件名和金额都有合理换行或完整查看方式。 表单:按用户填写顺序分组,标签、必填标记、输入格式、帮助文字和错误位置一致。合理选择输入键盘、日期选择、单选与多选;错误能够定位,保存失败保留输入。字典 code 与 label 对应后端,未知或停用值不能自动替换成第一项。 弹层:简单确认、选项选择和长表单选择适合的 Dialog、Popup、ActionSheet 或独立页面。明确点击遮罩、系统返回、关闭按钮、取消和提交的区别;关闭后状态能正确复原,不出现旧记录、旧错误或多层弹窗叠住按钮。 结果与状态:成功、失败、处理中、无权限、离线或无数据分别处理。成功提示只在结果确认后出现,写请求超时显示结果待确认并提供查询途径。状态使用文字配合图标和颜色,插图不能代替状态说明与下一步操作。 ### 正确使用 TDesign 双端组件 组件 API、事件、插槽、主题变量及最低运行条件均以工程安装版本和对应官方文档为准。写代码前核对实际可用的组件,禁止凭名称猜测两端属性相同。 原生微信小程序使用 tdesign-miniprogram,按项目结构安装依赖,在微信开发者工具中构建 npm,并在页面或组件 JSON 的 usingComponents 中注册需要的组件,例如 tdesign-miniprogram/button/button。核对 miniprogramRoot、npm 构建产物及路径是否匹配;接入文档涉及 app.json 的 style 配置时检查对既有页面的影响,不能把组件库仓库的开发命令当成业务小程序的启动命令。 Vue 3 H5 使用 tdesign-mobile-vue,官方全局样式入口为 tdesign-mobile-vue/es/style/index.css。全量注册或按需接入沿用工程方式,按需方案仍须正确加载主题样式;自动导入时核对 resolver 选择了 mobile-vue。已有 uni-app 工程可核对官方 @tdesign/uniapp 适配包的实际版本与支持范围,不能当作原生包直接注册。 图标使用对应端的 TDesign 能力。H5 可从 tdesign-icons-vue-next 按需引入单个图标;这个图标包名不能作为使用桌面组件库的理由。原生 t-icon 核对当前版本支持的名称与图片链接,生成素材文件不能冒充内置图标名称。离线使用时检查是否产生外部图标资源请求。不要将小程序 WXML 的 bind 事件、Vue 的事件与 v-model 写法互相复制。 主题色、字体、背景、边框和状态变量集中定义,两端按支持的机制映射。局部样式限定在业务容器内;涉及小程序样式隔离时使用当前版本提供的外部样式类或变量,不大范围穿透组件内部,不依靠堆叠 !important 维持页面。 逐项检查受控值、表单校验返回值、弹窗关闭时机、上传结果和列表事件。TDesign 两端 Form 的字段绑定使用 data、rules 与表单项 name;校验结果严格判断为 true 才通过,错误对象也可能是真值,不能只写 if (result),也不能照搬 Arco 的 undefined 成功语义。原生事件从 detail 取值,H5 按当前回调上下文取值。 原生 Dialog 的受控 visible 由业务代码管理,提交成功后再关闭;H5 的异步关闭机制按当前 beforeClose 类型实现,不混用 Arco 的 on-before-ok 或假设原生端有同名能力。核对具体组件的渲染器支持,例如当前原生 Form、Dialog 文档标注 WebView,不能据此宣称 Skyline 通用。保留必要的加载和防重复点击状态,前端按钮禁用不能代替后端权限或幂等。 如果当前版本确有组件缺口,优先采用同库组件组合并补充必要业务封装;跨端框架的适配以其官方支持矩阵和项目实际验证为准,不凭空声称原生组件可直接用于任意 H5。 ### 规划图标与插图,让素材实际改善页面 先列素材清单:素材编号、业务用途、所在页面、显示尺寸、原始像素尺寸、背景、状态变体、格式、文件名及接入位置。常规返回、关闭、搜索、更多、上传、编辑和删除等操作优先复用 TDesign 图标,统一线条与尺寸。 为品牌或业务特有的功能入口生成成套图标,例如实际存在的业务模块入口。只有需求确实需要选中状态时才生成默认与选中两种状态;使用同一主体、视角、轮廓和构图改变颜色或强调程度,不能两种状态像不同图标。 按页面需要生成适量插图,优先考虑初次无数据、搜索无结果、业务完成或必要引导。错误和权限状态的插图保持中性、清楚,不责怪用户,也不把系统失败画成成功。仅需要一条说明的页面不强行增加插图。 先确定一套风格并用一张样例核验,再沿用其参考图、色板、轮廓、明暗、视角和材质生成其余素材。业务入口图标可采用简洁平面或轻层次表现;插图使用克制的几何与场景构图,减少无关人物、装饰物和背景。不同页面不要混合线性图标、厚重 3D 和卡通贴纸三套风格。 具备图像生成工具时实际调用工具生成所需图标和插图,检查产物并保存到工程后再引用。只有提示语、远程预览地址或不存在的文件不能算素材已交付。没有生成能力时,仍继续可完成的页面工作,交付具体的生成提示语与素材规格,并明确哪些素材尚未生成、哪些位置暂用同风格的已有资源,不伪造完成状态。 关键业务文字、标题、按钮和数字由代码渲染,不烘焙进图像;生成图中不放中文段落、随机字符、品牌水印、二维码和无依据的徽章。品牌标识使用用户提供的原始文件,不依赖生成模型重绘商标或模仿第三方图标。 ### 可直接交给图像工具的生成模板 以下【方括号】内容由执行者根据已确认的业务与素材清单填写,不把每一项都重新丢给用户。每次只提交明确的一张素材或一组有交付约定的素材;成套风格可以先做参考板,但正式交付必须是可独立引用的单个文件。 图标生成模板: 为中文移动业务应用的【功能名称】生成一个功能入口图标,表达【真实业务动作或对象】。遵循参考图【已有图标或首个样例】的统一视觉:轮廓简洁、线条粗细一致、转角自然、视角一致,主体清楚,缩小到【实际显示尺寸】仍能辨认。主色【项目主色】,辅助色【一至两种约定颜色】,不使用无关颜色。图标居中,保留一致的光学留白,边缘完整。只输出一个独立图标,画布【像素尺寸及比例】,背景【真实透明背景或明确的纯色背景】。不加文字、字母、数字、水印、外框和多余装饰,不生成图标合集或设备展示图。若需选中状态,以同一主体与轮廓生成对应状态,只调整约定颜色或局部填充。输出真实文件并检查透明通道,不把棋盘格图案当成透明背景。 插图生成模板: 为【业务页面】的【具体状态:无数据、搜索无结果、操作完成或引导】生成一张可嵌入微信小程序和 H5 的业务插图,核心对象是【与业务相关的物品或场景】,用户此时需要理解【状态含义】。采用与参考图【统一样例】一致的克制平面或轻层次风格,形状简明、构图稳定、主体清楚,使用【项目主色与中性色】。画布【像素尺寸及比例】,主体位于【明确区域】,为代码渲染的标题和操作预留【留白区域】;背景【真实透明背景或指定页面背景色】。图片不包含文字、按钮、界面截图、设备边框、二维码、水印、无关人物、金融增长符号或装饰性科技元素。插图缩小到【实际显示宽度】后仍表达清楚;保留完整边缘,不裁切关键对象。输出独立文件,生成后按页面实际尺寸检查构图和对比度。 成套生成时,为每个文件填写独立的业务含义和状态;复用已经验证的风格约束,不为追求差异而改变材质、透视和光源。不得把效果图截图裁成带文字的“图标”。 ### 素材文件必须能安装、引用和维护 保留生成原图与实际使用文件,业务代码引用经过检查的使用文件。每张图明确尺寸与比例;默认可按显示尺寸准备 2 倍像素素材,例如显示 48×48px 的入口图标准备 96×96px 使用文件,按清晰度与体积需要调整。示例数值是项目建议,不是平台硬限制。 简单标准图标优先使用真实矢量图标资源。图像工具生成的栅格图按 PNG、WebP 等真实格式交付,不把扩展名改成 .svg 冒充矢量。需要矢量文件时使用能实际输出矢量的工具或人工重绘,并检查小尺寸渲染效果;小程序端还要核对所用位置、组件和基础库的格式支持,准备合适的 PNG 回退。 需要透明背景的图标检查真实 alpha 通道、边缘白边及深浅背景上的效果;不能把黑底、白底或绘制的棋盘格误认成透明。不要依靠 CSS 混合模式掩盖错误背景。 素材按功能命名,使用小写英文与连字符,例如 icon-service-default.png、icon-service-active.png、illustration-empty-search.png;名称必须对应实际业务,不能把这些示例名直接套到无关模块。避免中文空格、含糊序号和反复叠加 final 后缀。 建议按项目结构放入 assets/icons、assets/illustrations;已有目录规范优先。交付 assets-manifest.json,记录路径、用途、页面引用、显示尺寸、像素尺寸、格式、文件体积、透明检查结果、替代文本、状态变体和来源类型。生成素材与已有授权素材区分来源,不将未核实来源的第三方素材写成自有或可商用。 控制首屏资源数量与体积,按目标网络给出实际文件体积和必要压缩结果。首屏关键图像合理加载,非首屏素材按需加载;尺寸固定或保留比例,避免图片加载后布局跳动。不依赖随机图库、不稳定的临时外链或生成工具预览链接作为正式页面资源。 逐一核对小程序包内路径、H5 构建资源路径和已有资源服务;使用远程资源时核对 HTTPS、跨域与对应平台规则。原生 tabBar 图标按当前平台支持要求单独准备本地资源,不假定可直接使用组件图标、外链或任意 SVG。弱网、失败和缓存更新时有合理回退。 ### 处理微信小程序与 H5 的真实差异 微信小程序:核对基础库、开发者工具与真机版本;按真实布局选择 rpx、px 等单位,不把所有数值机械翻倍。遵循页面与组件生命周期,使用合理的 setData 更新范围,不频繁传整个列表;处理返回前页、重复进入和页面卸载后的回调。 自定义导航时根据当前设备信息计算状态栏、胶囊按钮与内容位置,不把某一台手机的高度写死。键盘弹起、底部安全区、原生 tabBar 与页面固定操作区分别检查,安全区留白只能按实际布局补一次,不与组件内置处理叠加。 H5:根据目标浏览器与微信内置浏览器检查视口、滚动、定位和软键盘行为;使用适当的安全区机制及回退,不单靠 100vh 保证可视高度。底部按钮、弹窗和输入框不能被浏览器工具栏或键盘遮住,关闭弹层后恢复合理滚动位置。 权限、登录、上传、相册、支付、分享与返回能力按实际终端分别接入。只有业务需要时才接入相应能力;需要微信能力的 H5 不假定已具备签名与授权,小程序组件也不能直接调用浏览器 DOM、window 或 localStorage。 两端保持关键字段、状态和操作结果一致,允许遵循终端习惯的交互差异。模拟浏览器的移动尺寸不能替代微信小程序真机验收,开发者工具预览通过也不能当作所有 iOS 与 Android 设备通过。 ### 实现完整状态与代码质量 页面、业务组件、接口、状态和素材配置各有清晰职责。封装真正重复的业务能力,复用现有工具,不创建过度通用的万能页面;只为装饰效果增加多个 UI 库或动画框架需要说明必要性。 统一工程已有的 ESLint、格式化与类型检查,缺少约定时采用 2 空格缩进、清晰命名、合理换行与简明中文业务注释。删除本次范围内确认无用的变量、样式和旧实现,不用全局禁用规则、空 catch 或大量 any 掩盖问题。 请求、鉴权、分页、字典和异常处理复用工程现有入口。处理快速查询与页面切换引起的请求竞态,避免旧响应覆盖新数据;清理订阅、定时器与监听。保留用户输入,明确重复提交、部分失败和结果未知时的行为。 前端权限展示与服务端数据范围一致,不能以隐藏按钮代替服务端授权。使用脱敏样例,正式页面不写死示例用户、订单、统计和状态;必须使用模拟数据时明确标识并提供实际接口接入点。 H5 的交互控件使用可访问的语义与名称,焦点清楚;小程序使用平台支持的可访问能力并检查读屏与点击区域。装饰图像不抢占阅读顺序,有意义的图像提供文字说明;状态不能只靠颜色,动效短而克制,不妨碍操作。 ## 交付与验收 ### 按照页面与素材一起验收 先完成一个具有代表性的页面及其图标、插图接入,检查视觉与交互后再推广到其他页面。常规设计与实现选择自主推进,不增加无必要的审批流程。 检查 375、390、430px 等约定移动宽度,以及需要支持的更窄屏幕;这些是建议验收尺寸。H5 在宽屏访问时有合理内容宽度与布局,不能无限拉伸移动卡片;用长公司名、长标签、大金额、多行错误、空数据和多状态记录检查排版。 实际验证主流程、返回、筛选、加载更多、输入校验、成功与失败、取消关闭、键盘弹起和再次进入。检查图片成功与失败、透明边缘、缩放模糊、图标状态切换、暗色背景兼容及安全区遮挡。 运行当前工程对应的安装、检查、类型检查、构建与已有测试命令,并准确记录结果。原生小程序写清开发者工具导入位置、npm 构建与预览步骤;H5 写清本地启动命令和实际访问地址,不能把两个终端的命令混成一套。 交付可运行源码、实际使用的图标与插图、素材清单、必要的主题配置、操作步骤及页面截图。说明完成的页面、组件与素材映射、实际验证的终端和场景,以及未验证或等待外部能力的部分;不得把计划、生成提示语或模拟截图写成实际运行证据。 默认在回复中说明必要操作,不额外生成总结类 Markdown 文档。项目已有明确文档要求或用户另有要求时再补充相应文件。任务聚焦 UI、素材与开发交付,不扩展成生产发布、证书部署、线上运维或备份恢复方案。 ### 本条完成检查 - 交付实际页面、主题配置与组件映射,查询、表单、返回、异常和结果未知状态符合真实接口及两端机制。 - 生成素材以真实文件接入,素材清单可逐项定位;独立文件、选中态、像素尺寸、透明 alpha、裁切和资源路径完成实际检查,未完成项单独列明。 - 记录 H5 与小程序分别执行的检查、构建、主流程和设备验证;核对长中文、软键盘、安全区、弱网及图片失败,不把模拟器或静态预览写成真机通过。 按本条要求组织结果,使用简洁中文和一致的编号、术语、缩进及空行;已有项目格式优先。只说明实际完成的内容,将采用的假设、未完成项和缺少的条件写在相关位置,不额外生成无关文档。未执行、无法复现或缺少证据的检查如实标注,不宣称已通过或已有性能收益。 ## 参考资料与适用边界 本提示词根据 TDesign 官方组件资料,结合中文移动业务界面与素材交付要求整理。视觉数值、素材组织、生成模板和验收顺序属于项目实践建议,不代表官方强制规范或官方认证。资料核验日期:2026-09-08;仓库分支会更新,实施时核对工程安装版本及对应文档。本提示词的资料与文本已整理,不代表任何具体业务页面或生成素材已经完成运行验收。 [TDesign 微信小程序官方仓库](https://github.com/Tencent/tdesign-miniprogram) [TDesign Mobile Vue 官方仓库](https://github.com/Tencent/tdesign-mobile-vue) [TDesign 官方图标资源](https://github.com/Tencent/tdesign-icons) [原生小程序接入](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/tdesign-miniprogram/site/docs/getting-started.md) [Vue H5 接入与样式入口](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/site/docs/getting-started.md) [uni-app 官方适配包](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/tdesign-uniapp/README.md) [原生 Form 与渲染器支持](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/README.md) [H5 Form 校验类型](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/form/type.ts) [原生 Dialog](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/dialog/README.md) [H5 Dialog 类型](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/dialog/type.ts) 微信平台补充入口:实施时另行核对当前官方要求,以下页面本次未成功读取,不将其内容标作已核验。 [微信小程序 npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html) [微信小程序全局配置与 tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)
用于已有 Arco Design Vue 工程的代码整理与中文业务界面优化,覆盖组件复用、ESLint、主题、列表表单、请求状态、权限与页面验收。附官方接口依据及版本边界。
## 任务目标 请基于 Arco Design Vue,对指定 Vue 工程或模块完成工程标准化、代码整理和界面优化。直接修改并交付可运行的代码,保持真实业务流程与数据含义,完成检查和页面验收,不要只给审查意见、设计建议或静态效果图。 在现有授权范围内完成实际改动和验证;缺少外部条件时先完成可独立实现的部分,不能只停留在计划。 ## 输入信息(选填) 两项均可留空,也可直接用一句话说明目标并附上已有资料。无需自行整理版本、配置或完整需求表;能读取的内容由执行者补齐。 改造目标:从当前对话、选定文件和改动关联路由识别待整理页面;未指定具体问题时,先检查一个代表性业务页面的结构、Arco 用法与中文布局,再在能够确认的局部范围实施。 工程或页面资料:读取当前已确认工作区的 Vue 工程、页面、接口和现有设计配置;已有截图或访问入口作为界面比对资料,不要求重复填写版本和组件清单。 ## 信息不完整时 先使用本次对话中已经说明的信息;用户留空、写“暂无/不清楚”或未替换输入标记,都按缺失处理,不当作真实路径、参数或业务值。已能从资料确定的内容不重复询问,不编造文件、日志、接口、业务值或执行结果。在用户已授权的范围内读取相关工程和材料,不为补齐输入擅自扩大操作范围。 ### 优先确认 - 检查分支、已有改动、package.json、锁文件和构建入口,确认 Vue、Arco、Node、JS/TS 及包管理器。 - 沿路由追踪查询、编辑、权限、字典与请求封装,识别重复组件和状态所有者。 - 读取已安装 Arco 类型及样式入口,核对 ConfigProvider、Table、Form、Modal 的属性、事件、校验返回值和主题机制。 - 查找现有布局、语言、字号、间距、ESLint、Prettier 和 EditorConfig 约定及可执行检查脚本。 ### 可采用的默认处理 - 沿用实际技术选型和 Arco 版本,仅整理本次页面及直接关联的公共能力;不自动迁移 Vue 2 或混合组件库,不整仓格式化。 - 无设计约定时采用正文已有的桌面政企业务界面默认值,兼顾窄屏;默认不新增深色模式、统计指标和装饰性文案。 - 保留现有字段、权限、字典码和操作顺序;未知字典值可识别地显示原值,按 Arco Vue 的真实 API 实现表单和弹窗,不套用 Ant Design。 ### 必须有依据的事项 - 同一字段的金额、时区、状态码或权限规则在页面与接口之间相互矛盾,且本次改造必须选择其中一种才能保存正确业务数据。 - 目标要求必须使用 Arco Vue,但当前工程不支持该库且完成目标需要主版本迁移或更换组件库;该迁移范围不能自行决定。 只有缺口会改变业务结果、权限边界或关键实现,且无法从现有资料确认时,才集中提出最多 3 个关键问题;说明影响,并继续完成不依赖答案的部分。一般命名、排版和可逆实现细节按现有约定决定,不逐项等待确认。 ### 资料仍不足时的交付 - 只有截图时交付页面分组、主次操作、中文排版和状态反馈的具体调整方案,明确交互及接口尚未验证。 - 没有工程时给出 Arco Vue 组件职责、数据契约核对表和最小接入示意,不创建未经要求的新系统或声称改造已完成。 ## 执行要求 ### 先明确工程现状与改造边界 检查当前分支、未提交改动、package.json、锁文件、构建配置、路由、权限、接口封装、状态管理和组件目录,列出本次涉及的页面及主要问题。保留无关改动,不以格式化为由改写全仓库。 核实 Node、Vue、TypeScript、Arco、构建工具与包管理器版本,沿用已有锁文件和安装方式。Arco Design Vue 的包名是 @arco-design/web-vue,适用于 Vue 3;不得混用 @arco-design/web-react 或其他组件库的接口。发现 Vue 2、混合组件库或版本不兼容时,先说明迁移影响,不擅自升级主版本或全量替换。 已有工程逐步整理;只有明确要求新建时才创建工程。未明确提供仓库或业务资料时,先检查当前可访问工程;仍缺资料则完成可落实的结构与页面方案,不编造已完成的改造。可从代码确认的事项自行确认,只提出阻塞业务判断的问题。 不擅自修改接口字段、权限规则、审批顺序、统计口径、路由地址、持久化键和对外事件。必要的契约调整必须说明影响并同步处理调用方。 ### 统一代码结构与复用方式 沿用工程既有分层,将页面编排、业务组件、可复用组件、组合式函数、接口请求、类型、字典和样式放在职责清楚的位置。缺少约定时,可使用 views、components、composables、api、types、constants、styles;不要为了目录形式拆出大量空文件。 新建 Vue 3 组件优先遵循项目的 Composition API 与 script setup 用法。声明清楚的 props、emits 和接口类型,禁止直接修改 props、用 any 掩盖类型问题、无依据的非空断言以及跨层读取组件内部状态。JS 工程按范围补足必要类型说明,不强行一次性迁移整个工程。 先查找已有能力,再抽取组件、composable 或纯函数。至少有明确复用场景或独立业务职责时才抽取;不要重复封装无业务增益的 Arco 按钮、输入框,也不要制造用几十个开关控制所有页面的万能表格、万能弹窗。 纯格式化、数据转换可放 util;含响应式状态、生命周期或副作用的逻辑放 composable;请求统一经过现有请求层。组件不得直接拼接 SQL 或持有服务端密钥。 状态码、权限码、业务类型和单位集中定义。以后端字典为准的值使用同一数据来源,保留 code 与 label 的对应关系,不在多处复制数字和中文判断。未知、历史或停用字典值保留可识别的原值,不默认替换成第一项。 删除本次范围内确认无用的导入、变量、分支、样式和旧代码。查清动态路由、自动注册及反射式引用后再删除文件。禁止保留注释掉的整段旧实现和没有使用场景的兜底层。 ### 统一格式、检查和注释 以现有 ESLint、Prettier、EditorConfig 为准;缺少规则时默认 UTF-8、LF、2 空格缩进、文件末尾换行,统一引号、分号、属性换行和导入顺序。不要混用 Tab 与空格,不做对齐式空格堆砌。 按工程实际 ESLint 版本配置 Vue 与 TypeScript 支持,避免同时引入互相冲突的旧配置和 flat config。格式化规则与代码质量规则分工清楚,不堆叠重复插件,不用全局关闭规则、ts-ignore 或大范围 disable 消除报错。 提供与当前包管理器相符的 lint、必要的类型检查和 build 命令;已有脚本可复用就不另造一套。TS 工程检查 Vue 单文件组件类型,使用兼容版本的 vue-tsc 等现有工具。说明实际运行命令,不把示例命令当作运行结果。 名称表达业务含义。注释用简明中文解释业务约束、兼容原因和复杂计算;公共方法说明必要参数、返回值与边界。不要给每一行加翻译式注释,不写装饰性分隔线、口号或与产品无关的说明。 ### 按 Arco Vue 实际能力接入组件与主题 优先阅读已安装版本的类型声明与对应版本官方文档。不能因为同样使用 a- 前缀就照搬 Ant Design Vue 的 props、事件、插槽或主题配置。组件名称、图标入口、按需加载与样式加载方式都必须能在当前工程中验证。 全量引入样式的官方入口是 @arco-design/web-vue/dist/arco.css;按需方案应核实组件样式和浮层样式均已加载,不重复引入整套样式。中文语言在统一入口配置,ConfigProvider 的 locale 使用语言包对象,例如从 @arco-design/web-vue/es/locale/lang/zh-cn 导入,而不是直接传入语言字符串。全局尺寸按当前版本支持的 mini、small、medium、large 统一选择,并检查局部覆盖。 优先使用当前版本真实存在的主题变量或项目设计变量,集中管理主色、背景、边框、文本、间距与圆角。采用 Less 变量定制时必须匹配 Less 样式与构建配置,不能仅加载预编译 CSS 后期待编译变量生效。不要复制其他组件库的主题 token API。 业务样式优先限定在业务容器和语义类名内,减少深层选择器;必须覆盖组件内部样式时,限定范围并说明原因。禁止大范围覆盖 .arco-*、堆叠 !important,或通过固定高度、负边距掩盖布局问题。 仅在业务需要时提供深色模式;官方深色机制使用 body 的 arco-theme="dark" 属性,仍应检查自定义区域、图表、弹层和文字对比度。函数式 Modal、Message 等额外验证语言、主题和应用上下文,不假定包裹 ConfigProvider 后任何独立调用都会继承配置。 ### 建立克制、规整的中文业务界面 以下数值属于本项目缺少规范时的设计建议,不是 Arco 官方强制标准。已有品牌和设计规范优先,同一工程保持一致。 采用中性浅灰页面背景、清晰的内容表面、单一主色和必要的状态色。默认正文 14px、辅助说明 12px、区块标题 16px、页面标题 20px;间距优先使用 4、8、12、16、24px。字号、行高、圆角和边框形成稳定层级,不随页面任意新增尺度。 查询列表页按“标题与主要操作 → 查询条件 → 结果或业务内容 → 分页”组织;需要结果摘要时才增加摘要,详情与编辑页面按业务内容分组。对齐左边缘、控件基线、操作区和内容宽度,同类页面沿用同一骨架。用留白、分组和轻边框区分层级,不把每一小段内容都包成卡片。 主按钮突出当前最重要的业务动作,次要动作保持克制;相同行为的按钮顺序、名称和危险色一致。图标辅助识别,不代替必要文字,不混用多套视觉风格。 不添加大面积渐变、玻璃效果、夸张阴影、胶囊化控件、彩虹状态卡、装饰性徽章和占据首屏的欢迎区。没有业务数据支撑时不增加统计指标、增长率、荣誉认证和宣传口号。 文案使用真实业务名称,短而明确;提示说明用户需要做什么。界面不展示组件实现、内部架构、技术术语堆砌或“智能赋能”等无实际含义的宣传文字。不要为展示设计能力改变用户已熟悉的办理顺序。 ### 把列表、表单和详情作为完整业务流程处理 列表:筛选项按使用频率排序,展开与收起不丢值;查询、重置和变更每页条数后的页码规则明确。对象标识、关键状态及主要操作易于定位;文本通常左对齐,金额和数量右对齐并注明单位。长内容提供完整查看入口,状态同时用文字表达,不只靠颜色。 Table 的数据、列、唯一键、分页、排序、选择事件必须核对 Arco Vue 文档。row-key 使用稳定业务键字段,不用页内序号冒充记录标识;远程分页、排序和筛选与服务端参数对应,不对单页数据做排序却宣称全量排序。selected-keys 等受控选择仅维护一份真实状态,明确当前页和跨页批量选择范围。 详情返回列表时按业务需要保留筛选、页码和滚动位置。批量操作反馈成功、失败与可重试范围,能定位失败记录;关键字段、长公司名、大金额和时间信息不被固定列或操作列遮挡。 表单:字段按业务填写顺序分组,标签、必填标识、控件宽度及帮助文字一致。错误在字段附近展示并可定位,保存失败保留合理输入,重置前确认需要恢复的基准值。日期、时区、精度、ID 字符串及空值含义以接口契约为准,不用格式化操作改变业务值。 Arco Form 使用 model,FormItem 使用 field 对应数据路径。validate() 的成功结果是 undefined,失败结果是错误对象,不能仅靠 catch 判断校验失败;resetFields 与 clearValidate 分别涉及字段重置与校验状态清理,不能互相替代。按已安装版本确认行为后实现。 简单确认使用弹窗,较长编辑或需要保留列表上下文时选择合适的抽屉或独立页面。弹窗使用当前版本支持的 v-model:visible;异步确认正确处理 on-before-ok 的返回结果。before-close 是事件,不能当作异步关闭守卫。提交失败时不误关弹窗,重新打开时不残留上一条记录和校验状态。 详情页先呈现对象名称、编号、状态和适用操作,再按业务关系组织字段。审批记录和时间线来自真实数据,不补造操作者、进度或成功记录。 ### 保证状态、权限与请求一致 区分初次加载、刷新中、无数据、查询无结果、失败、权限不足和成功。空值、零值与未知状态不能混用。失败提供适当重试入口,恢复后回到正常界面,不把临时加载失败永久保留为“服务升级中”。 复用现有请求封装与错误处理,用户提示和排查日志各有明确位置,不重复弹出同一错误。快速切换筛选、路由或编辑对象时,使用适当的请求取消或结果序号校验,防止旧响应覆盖新状态;清理定时器、监听器和订阅。 提交按钮展示处理中状态并防止连续点击,但不把前端禁用当成服务端幂等保证。写请求超时不能直接认定失败并自动重复提交,应展示结果待确认,并提供结果查询或人工核对路径;用户点击确认本身不代表可以安全重试。 菜单、按钮、数据列表、详情、导出和统计遵循实际角色、组织与租户范围。前端隐藏按钮不能替代服务端授权。缺少后端能力时明确指出,不用前端模拟校验宣称已经解决权限或幂等问题。 不硬编码真实密钥,不把错误堆栈和敏感业务字段展示给用户。富文本、外部链接和文件操作沿用工程安全约束,避免未经处理的 v-html。 ### 兼顾性能、适配和可操作性 基于实际瓶颈优化:避免模板内重复大规模运算、无意义深度监听、重复请求以及可以局部更新却整页重建的行为。按现有能力使用路由懒加载和资源按需加载;大列表先核实分页与组件能力,确有需要再采用虚拟化,不凭空宣称性能提高多少。 同一页面信息密度一致,不用极小字号、压缩点击区或大面积空白解决布局问题。宽表可在自身区域横向滚动,页面主体不得意外横向溢出;窄屏合理收纳筛选和次要操作,保留关键对象、状态与主要动作。 按约定终端验收;未约定时桌面至少检查 1440px 和 1280px 宽度,窄屏兼容检查 768px 和 390px。检查长中文换行、固定区域遮挡和弹窗可见范围,不以固定宽高适配所有屏幕。 保证键盘能够进入主要操作,焦点可见,弹窗关闭后焦点合理返回。仅图标按钮有可理解的名称,重要信息不只依赖悬浮或颜色;检查浏览器放大后的文本与操作可达性。使用真实或明确标记的脱敏样例覆盖边界内容。 ## 交付与验收 ### 完成验证并交付 先改造一个有代表性的页面验证公共规则,再在明确范围内推广;已有明确规范或任务很小时直接按范围实施,不增加无必要的审批环节。 运行与变更匹配的 lint、类型检查、构建和已有测试。对校验、字典映射、请求竞态、权限状态、批量操作等实际风险补充必要测试,不为颜色、空格或简单配置编写只重复实现的测试。 实际打开改造页面,至少验证查询与重置、分页、详情返回、新建或编辑、校验失败、保存成功与失败、取消关闭,以及范围内涉及的权限和异常状态。检查本轮产生的控制台错误、请求失败、中文截断、布局溢出和按钮遮挡;后端不可用时区分静态检查与真实联调结果。 交付时简要说明:改了哪些文件及原因;采用的布局与主题约定;复用或删除了哪些重复能力;实际运行的命令及结果;实际验证的页面和状态;尚未验证或依赖外部条件的事项。必要时提供页面截图对比,不伪造测试通过、数据结果和性能结论。 默认直接修改已有工程并在回复中说明使用方式,不额外生成总结类 Markdown 文档;只有用户明确要求或项目流程已有明确要求时才增加相应文档。 ### 本条完成检查 - 交付实际改动文件、职责与状态归属、布局和主题约定,说明重复能力的复用或删除依据。 - 核对 Form 的 model/field 与 validate 返回值、Modal 的 visible/on-before-ok、Table 的稳定键和受控选择,验收成功、失败及切换记录。 - 运行适用的 lint、类型检查和构建,检查正文规定的桌面与窄屏尺寸、中文换行和新增控制台错误;未执行项单列。 按本条要求组织结果,使用简洁中文和一致的编号、术语、缩进及空行;已有项目格式优先。只说明实际完成的内容,将采用的假设、未完成项和缺少的条件写在相关位置,不额外生成无关文档。未执行、无法复现或缺少证据的检查如实标注,不宣称已通过或已有性能收益。 ## 参考资料与适用边界 本提示词是结合 Arco Design Vue 官方资料整理的工程执行规则。组件用法按官方资料核对;目录划分、视觉默认值与交付要求属于项目实践建议,不代表官方认证,也不表示已经在任意工程中运行验证。资料核验日期:2026-09-08;下面的 main 链接会更新,实际实施必须以工程安装版本及对应版本文档为准。 [Arco Design Vue 官方仓库与安装入口](https://github.com/arco-design/arco-design-vue) [ConfigProvider 中文配置与上下文](https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/config-provider/README.zh-CN.md) [中文语言包使用示例](https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/config-provider/__demo__/basic.md) [主题定制](https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/theme.zh-CN.md) [深色模式](https://github.com/arco-design/arco-design-vue/blob/main/packages/arco-vue-docs/docs/dark.zh-CN.md) [Table 数据、分页与选择](https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/table/README.zh-CN.md) [Form 校验与字段方法](https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/form/README.zh-CN.md) [Modal 异步确认与关闭](https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/modal/README.zh-CN.md)
从真实页面的测量与复现出发,优化请求竞态、状态同步、列表渲染、包体积和表单反馈,并验证接口幂等边界、代码规范及关键业务交互。适用于保留现有技术栈的 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 ConfigProvider 统一表单、分页、日历、弹窗和空状态文案,完成符合国内政企业务习惯的界面验收。
## 任务目标 请检查当前 Vue 系统的中文界面和组件默认文案是否一致。 以核查和评审为主,给出有证据的判断及可复核的修改建议;本次用户另有明确实现要求时,按其授权范围执行。 ## 输入信息(选填) 两项均可留空,也可直接用一句话说明目标并附上已有资料。无需自行整理版本、配置或完整需求表;能读取的内容由执行者补齐。 中文界面检查范围:从当前后台页面与共用配置入口开始,检查日期、分页、校验、弹窗和空状态的实际文案;未给页面清单时选择现有列表、编辑和详情各一条真实路径。 工程或界面资料:读取现有 TDesign 依赖、ConfigProvider、局部组件属性、业务词汇及日期金额转换,并使用可访问页面核对显示。 ## 信息不完整时 先使用本次对话中已经说明的信息;用户留空、写“暂无/不清楚”或未替换输入标记,都按缺失处理,不当作真实路径、参数或业务值。已能从资料确定的内容不重复询问,不编造文件、日志、接口、业务值或执行结果。在用户已授权的范围内读取相关工程和材料,不为补齐输入擅自扩大操作范围。 ### 优先确认 - 查清已安装版本的 globalConfig、实际语言配置及局部覆盖,不猜语言包路径。 - 统计同一业务对象在列表、详情、编辑和反馈中的称呼,找出组件默认英文与中文混用。 - 追踪日期时区、金额单位和范围包含关系,分开检查显示格式与接口传输值。 ### 可采用的默认处理 - 默认只读检查并给配置及文案调整建议;明确统一文案时只改约定范围,不改变业务值。 - 通用控件文案归全局配置,业务动作留在对应页面;优先沿用已出现的准确业务名称。 - 无设计约定时保持政企中文布局的对齐、层级和主次操作,不添加营销词或虚构统计。 ### 必须有依据的事项 - 金额单位、时区、日期范围或业务状态名称存在多种合理解释且会影响用户判断,不能只为统一外观选一种。 只有缺口会改变业务结果、权限边界或关键实现,且无法从现有资料确认时,才集中提出最多 3 个关键问题;说明影响,并继续完成不依赖答案的部分。一般命名、排版和可逆实现细节按现有约定决定,不逐项等待确认。 ### 资料仍不足时的交付 - 仅有源码时交付全局与局部覆盖表、候选词汇差异和具体交互核对步骤。 - 只有截图时提供可见文案与布局修正,日期弹层、校验和分页语言仍标待运行确认。 ## 执行要求 在使用 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)