跨端 UI 规范

受众：开发者、前端实现者、AI Agent 摘要：Admin、App、PC、Install、Docs 五端面向国内用户习惯的界面规范和验收口径。

SpringOpen 前端视图面向国内企业后台、移动端应用、PC 门户、企业安装和文档阅读场景。UI 调整优先服务真实任务效率：少解释、多结果，少装饰、多信息，状态清楚、入口稳定、操作可恢复。

本规范是跨端共用设计基线。单端页面说明见 Admin 后台管理端、App 移动端、PC 电脑端 和 前端工程。

总体原则

原则	落地要求
信息密度适中	后台和 PC 端优先让用户在一屏内完成比较、筛选和操作；移动端优先保留关键主操作和状态，不把复杂筛选堆到首屏。
中文语义优先	页面标题、按钮、状态、空态和错误提示使用中文业务语义；避免把 API、mock、preview、fallback 等技术词直接暴露给用户。
主次操作清楚	主操作使用主色按钮；危险操作使用红色并二次确认；批量操作、导出、同步、刷新放到工具区。
状态可判断	列表、订单、任务、审核、支付、Web3 交易等状态必须能看出当前阶段、下一步动作和异常原因。
布局稳定	表格、筛选区、卡片、底部导航、固定工具条和弹窗要有稳定尺寸，不因为文案、加载态或按钮数量变化造成明显跳动。
多端一致	同一业务在 Admin、App、PC 的名称、状态和动作含义保持一致；端差异只体现在布局和交互密度。

Admin 后台

Admin 面向运营、客服、财务、审核和系统管理员，核心体验是高频查询、批量处理和异常恢复。

布局

• 页面主区域使用浅灰工作底色，表格、筛选区和表单使用白色表面，边界清楚但不做重阴影。
• 筛选区固定为紧凑横向表单；常用筛选默认展开，低频高级筛选进入折叠或更多条件。
• 表格工具条固定包含标题、刷新、密度、列设置、全屏等管理操作；业务新增按钮放在工具条左侧或右侧主操作区。
• 弹窗用于短流程编辑；复杂表单优先抽屉或独立页，避免在小弹窗内塞多列长表单。

表格

• 表头使用略深底色和加粗字重，方便在长列表中快速定位列。
• 默认行高保持紧凑，金额、数量、状态、时间和操作列对齐稳定。
• 操作列只放高频动作；低频动作进入更多菜单。
• 空列表展示“没有符合条件的数据”一类业务空态；读取失败展示可重试动作。

表单与反馈

• 表单标签加粗但不过大；必填、禁用、只读和校验失败状态必须明显。
• 保存、提交、审核、同步、放款等写操作必须防重复提交，并在成功后刷新当前数据。
• 金额、手续费、确认次数、链、钱包地址、订单号、任务号等关键字段使用可复制或可展开展示。

App 移动端

App 面向普通用户，核心体验是路径短、反馈快、主操作明确。

• 首页、商城、内容、社区和个人中心遵循底部导航习惯，一级入口不超过五个。
• 详情页主操作固定在底部安全区上方；购买、支付、充值、提现、桥接等动作必须有加载态和结果态。
• 移动端列表优先卡片化，但卡片内容不能只剩营销文案；价格、状态、时间、进度和下一步动作要可扫读。
• 搜索、分类、筛选使用顶部搜索 + 横向分类 + 抽屉筛选组合，避免把多字段表单直接放在首屏。
• App 文案避免后台术语；用户只需要知道“处理中、待确认、已完成、失败原因、下一步”。

PC 用户端

PC 面向普通用户在大屏上的浏览、搜索、创作、下单和账号管理。

• 门户页首屏优先展示真实内容、商品、文章、社区主题或业务入口，不做空泛营销页。
• 列表页保留搜索、分类、排序和分页；筛选条件要可回显、可清除。
• 账号中心采用左侧导航 + 右侧内容；订单、余额、通知、安全、收藏等页面保持同一信息结构。
• 长内容阅读页控制正文宽度，标题、作者、时间、互动和相关推荐层级清楚。
• PC 端可以使用更高信息密度，但不使用后台风格的复杂工具栏和权限化术语。

Install 安装端

Install 面向首次部署和运维配置，核心体验是确定性和错误可修复。

• 使用步骤条表达安装进度，当前步骤、已完成步骤和失败步骤必须明确。
• 环境预检、数据库、缓存、管理员账号、站点信息等步骤按真实依赖顺序排列。
• 错误提示给出失败项、原因和可操作修复建议；不要只展示异常堆栈。
• 安装完成页提供进入 Admin、PC、Docs 的明确入口。

Docs 文档站

Docs 面向开发者和 AI Agent，核心体验是定位快、上下文清楚、命令可复制。

• 文档首页保留高频入口；跨端规范、前端工程、单端视图说明形成稳定导航。
• 页面摘要说明受众和内容边界；长页面使用二级和三级标题组织。
• 命令、路径、配置项、API 路由和迁移文件使用等宽格式。
• 用户文档不写执行流水；Agent 记忆和计划留在 .ai/。

验收清单

每次新增或改造视图页面时按以下口径检查：

项目	检查点
文案	用户可见文案已接入项目 i18n 或后端本地化字段，没有硬编码技术态兜底。
信息层级	标题、筛选、主操作、状态、列表和详情层级清楚，一屏内能判断当前任务。
响应式	移动端、平板和桌面无文字重叠、按钮挤压、固定栏遮挡和布局跳动。
状态	加载、空列表、失败、禁用、处理中、成功和异常恢复入口完整。
数据	不用静态样板数据伪装真实接口；接口失败展示真实错误或可理解空态。
验证	前端构建、类型检查或对应端 smoke 通过；改动影响文档和 .ai/ 记忆已同步。