设计规范

腾域云后台 · 设计规范

这份规范从已通过的几个页面（我的线索 / 工作台 / 数据看板 / 官网 / 问卷 / 测评 / 课程 / AI智能体 / 链接管理 / 优惠券）里提取沉淀，是全平台唯一的视觉与交互基准。调性：用奢侈品思维重做后台——安静、克制、冷色高级；移动优先；面向不敏感技术的用户，做到傻瓜式零学习成本。

如何使用：每做一个新页面，从这份规范复制 token 与组件类，不要凭记忆自创。 之前优惠券页就是自创了一套文件夹样式，导致与其他页不一致。任何组件——尤其是文件夹 + 分隔线（第 09 节）——都以这里的写法为准。新页面拿到手后：先在 test.tengyucloud.com 把每个按钮 / 抽屉 / 子页操作一遍吃透 → 按本规范重构 → 交一个自包含、可点击、PC+手机双态的 HTML 原型到 outputs → 自检通过再下一页。

设计原则

• 安静的奢侈感：冷炭灰为主色，大面积留白与浅灰底；金色 --gold 极少量，只点在智能入口、已完成进度等关键处，绝不大面积使用。
• 傻瓜式：目标用户技术不敏感。每个功能讲清"会发生什么"，动词开头、大白话；危险动作二次确认。
• 移动优先：手机端必须可用——单列卡片、底部弹层、宽表改卡片，绝不让用户横向滚动看数据。
• 全平台一致：同一种东西，全平台只有一种写法。卡片、文件夹、状态、按钮在每个页面长得一模一样。
• 把锋芒收在一处：每个页面只留一个记忆点（如优惠券的票券齿口），其余一律安静克制。

色彩

字体排版

圆角 · 阴影 · 间距

按钮 · 动作分级

状态徽章

开关

统一卡片规格

文件夹 + 分隔线　★ 全平台唯一写法

筛选

抽屉 · 弹窗 · 两步向导 · 发放分享

• 右侧抽屉 drawer：编辑表单、配置类。宽 460px（复杂用 720px），头部标题 + 关闭，底部右对齐 取消 / 确定。从右滑入。
• 居中弹窗 modal：发放、明细、二次确认等聚焦动作。半透明遮罩 + 模糊。
• 两步向导：复杂表单分两步（如投放链接：①基本信息 → ②流量归属），顶部步骤指示，底部 上一步 / 下一步 / 保存。
• 发放 / 分享弹窗：群发 / 私发选择 + 二维码 + 复制链接 / 海报，并写明转发风险提示与"会不会生成线索 / 服务计划"。
• 表单单选用单选卡（标题 + 一句说明），不用裸 radio；选中态描边 + 浅底。

空状态 · 骨架屏

这里还没有优惠券

给产品做一张兑换券，发给客户领取，用券推一把成交。

更多菜单

下钻导航

• 禁止把"列表 / 编辑 / 数据"做成并排 Tab——它们不是平级关系（AI智能体页已修正）。

• 从列表点某条 → 下钻到它的编辑 / 数据页，顶部「← 返回」回到列表。编辑 / 数据始终绑定点进来的那一条。

移动端范式

• App 顶栏：标题 + 右侧主操作；进入下级 / 文件夹时左侧出现返回，回到首层时隐藏。
• 底部弹层 sheet：更多操作、发放、筛选都用从底部升起的弹层（带顶部小横条），不用 PC 的浮层菜单。
• 文件夹横向滑动 chips：.m-folders 横滑，每个 .m-folder = 图标 + 名称 + 数量（不用 PC 的网格）。
• 单列卡片：列表一律单列；卡片结构与 PC 一致（标题+状态+字段+动作）。
• 宽表 → 卡片：PC 的宽数据表在手机端改成每行一张卡，绝不横向滚动（财务 / 配置 / 测评结果都按此处理）。
• 原型里用 390px 手机外壳（刘海 + 状态栏）演示，PC / 手机用顶部开关切换。

文案规范

页面范式选择

构建 · 校验约定

• 每页一个自包含 HTML 存到 /mnt/user-data/outputs，内嵌全部 CSS / JS，可直接点击。
• 顶部固定 demo-bar：电脑 / 手机切换 + 演示状态（正常 / 加载中 / 空状态）。
• JS 字符串里严禁 ASCII 双引号。模板字符串内的 HTML 属性会和外层引号打架——用中文引号「」或方括号，或改单引号。
• 删除确认弹窗换行：JS 源码里写单个反斜杠 \n（python 校验 backslash count = 1）。
• 交付前把 <script> 抽出来 node --check 过一遍；确认旧类清零、标签配平。
• 坏图统一换冷调占位封面 + 首字；附加字段空值统一 "—"。
• 组件不自创：先来这份规范复制；这里没有的新组件，做完补充进规范，保持单一基准。