组件封装

## 任务目标

请基于 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，对指定 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 工程中完成选定范围的结构、组件和编码规范重构，交付实际代码及验证结果。先读取工程；能从代码确认的信息不重复询问。资料缺失时标明事实与假设，只对阻断实施的关键项提问，其余授权工作继续完成。

在现有授权范围内完成实际改动和验证；缺少外部条件时先完成可独立实现的部分，不能只停留在计划。

## 输入信息（选填）

两项均可留空，也可直接用一句话说明目标并附上已有资料。无需自行整理版本、配置或完整需求表；能读取的内容由执行者补齐。

重构对象：从当前对话指定的页面、模块或改动文件识别范围；维护问题未说明时，优先检查该范围内职责混杂、重复业务逻辑和多处可写状态，实施可证明保持行为的局部重构。
工程或代码资料：读取当前已确认工作区中的组件、调用方、API、store、字典与规范配置，并从既有测试和页面操作提取行为基线。

## 信息不完整时

先使用本次对话中已经说明的信息；用户留空、写“暂无／不清楚”或未替换输入标记，都按缺失处理，不当作真实路径、参数或业务值。已能从资料确定的内容不重复询问，不编造文件、日志、接口、业务值或执行结果。在用户已授权的范围内读取相关工程和材料，不为补齐输入擅自扩大操作范围。

### 优先确认

- 检查分支与未提交内容，以及 Vue、脚本语言、API 风格、构建和组件库的真实版本。
- 从页面入口追踪 props、emits、插槽、v-model、请求与字典，确认状态所有者和外部契约。
- 搜索真实复用场景、自动导入、动态路由和插件注册，确认抽取及删除不会破坏运行时引用。
- 读取 ESLint 与 Vue/TypeScript 解析器、flat/legacy 配置、格式化方案及已有验收命令。

### 可采用的默认处理

- 保留 Vue 2/3、JS/TS、组件库和状态管理选型，不通过框架迁移解决局部结构问题。
- 按已有业务职责整理目录；纯工具、组合式逻辑和领域规则分别归位，不机械创建空目录或万能组件。
- 保持界面、接口、事件和字典值稳定，保留无关改动，规范治理只覆盖本次范围且不得靠忽略规则消除新增错误。

### 必须有依据的事项

- 调用方对同一组件的事件、空值或编辑副本语义存在冲突，且抽取后必须改变其中一方的业务行为。
- 需要修改对外字段、路由或业务状态码才能继续，而实际兼容约束和使用方无法从工程确认。

只有缺口会改变业务结果、权限边界或关键实现，且无法从现有资料确认时，才集中提出最多 3 个关键问题；说明影响，并继续完成不依赖答案的部分。一般命名、排版和可逆实现细节按现有约定决定，不逐项等待确认。

### 资料仍不足时的交付

- 只有片段时交付该片段的职责拆分与契约表、完整局部修改示例，并列出需回查的调用方。
- 没有工程时给出重构检查顺序、组件边界判据和关键行为回归清单，不以虚构文件说明已落地。

## 执行要求

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

### 确认范围和基线
检查分支、未提交及未跟踪改动，记录目标文件现状，保留已有 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 文档，不以重构方案替代已授权的代码实现。

### 本条完成检查

- 交付实际代码、关键路径以及职责、组件契约、状态所有权和字典来源简表。
- 说明抽取的真实复用依据与删除的引用检查结果，核对重构未引入重复请求、props 修改或状态双写。
- 运行范围相关检查和生产构建，验证查询、编辑、取消、错误恢复与快速切换，区分历史失败和本次新增问题。

按本条要求组织结果，使用简洁中文和一致的编号、术语、缩进及空行；已有项目格式优先。只说明实际完成的内容，将采用的假设、未完成项和缺少的条件写在相关位置，不额外生成无关文档。未执行、无法复现或缺少证据的检查如实标注，不宣称已通过或已有性能收益。

## 参考资料与适用边界

官方依据：阿里前端规约：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）：已核对公开资料和本次项目要求的覆盖范围；尚未使用真实项目执行本模板或进行模型效果评测。具体改动、性能和回归结果须在目标工程中验证。

## 任务目标

请根据本次要求，将小程序中的重复业务界面封装为可复用组件，或审查已有组件的边界与样式隔离。

以核查和评审为主，给出有证据的判断及可复核的修改建议；本次用户另有明确实现要求时，按其授权范围执行。

## 输入信息（选填）

两项均可留空，也可直接用一句话说明目标并附上已有资料。无需自行整理版本、配置或完整需求表；能读取的内容由执行者补齐。

组件目标：优先审查当前页面引用的目标组件；若对话明确要求封装重复界面，则从真实使用页面识别共同职责后实施，不凭相似外观创建通用组件。
组件或使用页面：读取组件及调用页面的 JSON、WXML、WXSS、脚本、事件监听和已有运行配置，从实际工程识别原生或跨端框架。

## 信息不完整时

先使用本次对话中已经说明的信息；用户留空、写“暂无／不清楚”或未替换输入标记，都按缺失处理，不当作真实路径、参数或业务值。已能从资料确定的内容不重复询问，不编造文件、日志、接口、业务值或执行结果。在用户已授权的范围内读取相关工程和材料，不为补齐输入擅自扩大操作范围。

### 优先确认

- 对照真实调用场景确定数据所有者、内部状态、业务差异及是否存在稳定复用职责。
- 核对 usingComponents 路径、properties、事件载荷、插槽与 multipleSlots 配置。
- 检查 styleIsolation、外部样式类、虚拟节点及渲染器支持，跨端工程同时追查生成代码。

### 可采用的默认处理

- 没有明确封装或修复要求时只读审查；实施时保持原有属性、事件和页面行为兼容。
- 优先现有隔离方式与明确的外部样式入口，不为局部问题全局开放样式共享。
- 仅有一个真实场景时按独立职责判断是否值得封装，不虚构第二个页面或添加大量未来开关。

### 必须有依据的事项

- 不同调用页面对属性、事件或内部状态职责存在冲突，无法在不改变业务的情况下确定通用契约。

只有缺口会改变业务结果、权限边界或关键实现，且无法从现有资料确认时，才集中提出最多 3 个关键问题；说明影响，并继续完成不依赖答案的部分。一般命名、排版和可逆实现细节按现有约定决定，不逐项等待确认。

### 资料仍不足时的交付

- 缺运行环境时交付组件契约、样式入口、可检查代码或修正片段及逐页验证步骤。
- 只有截图时先给稳定职责与差异清单，不凭截图承诺原生注册、插槽或渲染器兼容。

## 执行要求

按微信原生组件的能力检查实现。使用跨端框架时，进一步核对生成代码和框架适配，不能直接照搬浏览器或 Vue 的样式规则。

1. 先列出组件必须完成的业务任务、调用方负责的数据与内部展示状态。比较多个页面的共同部分和真实差异，只抽取已经稳定的职责；不要把整张业务页面塞进一个参数繁多、难以理解的通用组件。
2. 检查页面及组件 JSON 中的声明，确认引用名称和实际路径一致。为属性建立名称、类型、默认值及空值约定，核对数据能否在当前环境传递；非法输入要有清楚的处理，不依赖隐式转换掩盖接口错误。
3. 按内容扩展需求选择默认插槽或命名插槽。需要多个插槽时核查 multipleSlots 配置，并说明每个插槽负责的区域及为空时的表现；业务事件的名称和返回字段应稳定且与调用方用法对应。
4. 按官方文档检查样式选择器及 styleIsolation 设置，识别页面样式穿透组件、组件污染其他页面和继承属性变化。不能为修好一个样式问题就全局开放共享，先定位实际受影响的类与节点。
5. 通用组件需要允许定制时，优先设计明确的外部样式类入口，并列出哪些外观允许调整。避免调用方依赖组件内部层级或未约定的祖先样式；若启用虚拟节点，检查根节点布局、class 与 style 的实际生效位置。
6. 在至少两个真实使用页面验证正常数据、空数据、长中文文本、禁用状态、插槽缺省和局部样式覆盖。对已声明支持的渲染器及基础库环境分别记录结果，检查事件次数和数据回传是否符合调用契约。

## 交付与验收

输出：组件职责说明、属性与事件表、插槽和样式入口、组件实现及复用验收结果。没有运行环境时只给可检查的实现和验证步骤，标明兼容性待测；需求只出现一个使用场景时说明抽象依据，不虚构更多业务来证明组件通用。

### 本条完成检查

- 明确组件职责、属性类型和空值、事件次数及载荷、插槽和允许调整的样式入口。
- 在真实使用页面验证空数据、长中文、禁用和局部覆盖；只有一个场景时说明限制，不假造复用证据。
- 分别记录已支持基础库和渲染器的结果，确认组件不污染相邻页面且回传数据符合调用方。

按本条要求组织结果，使用简洁中文和一致的编号、术语、缩进及空行；已有项目格式优先。只说明实际完成的内容，将采用的假设、未完成项和缺少的条件写在相关位置，不额外生成无关文档。未执行、无法复现或缺少证据的检查如实标注，不宣称已通过或已有性能收益。

## 参考资料与适用边界

官方来源（2026-09-08 核验）：
- [腾讯微信《微信小程序：组件模板和样式》](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html)