TDesign 微信小程序与 H5 UI 设计及图标插图交付

## 任务目标 请基于 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)