UI Design System
build dev
资产库 / 模板 / 信息与文本卡片

信息与文本卡片

语义色提示块（info/success/warning/error）与 Card 承载的纯文本 / Markdown / HTML 阅读区
稳定已接入

概述

组件类型： 只读内容块（可嵌在任意外壳页面内）

职责： 用语义色提示用户（info / success / warning / error），或用 Card 承载纯文本、Markdown、HTML 排版内容。

与仪表盘页的 W1–W6 不同：W* 为指标/图表 Widget；本模板的 I* 为提示语义、T* 为富文本阅读区，二者可出现在仪表盘、表单、详情、列表顶栏等任意位置。

信息语义类型

类型语义线框旁注典型场景
info中性说明、引导I-info计费规则、功能说明、待办提示
success已完成、正向结果I-success提交成功摘要、同步完成
warning需留意、未阻断I-warning配额将满、配置缺失、演示环境
error失败、阻断、风险I-error校验失败汇总、接口不可用、权限不足

无障碍： 状态须 图标 + 文案（或标题），不仅靠边框/背景色区分。

布局 I-A — 条带 Alert（无 Card 外框）

新窗口打开 ↗

贴在 页头下、Form 顶、表格上 的横向条，宽度随内容区。当前实现 Alert 仅支持 message / description / variant / showIcon / icon：线框中的 [×]（可关闭）与 [重试]（action）暂以 description 文案承载（如「服务暂时不可用，请稍后重试。」）。

字段规则
message主文案一行或短段
description可选第二段，muted 或换行
action可选 link / 按钮（重试、去设置）；当前实现无此 prop，以 description 文案承载
closable可关闭时线框标 [×]，关闭后状态是否持久由 PRD 写明；当前实现不支持关闭
DSL 配置
{
  "body": {
    "type": "Page",
    "children": [
      {
        "type": "Flex",
        "props": {
          "direction": "vertical",
          "gap": 16
        },
        "children": [
          {
            "type": "Alert",
            "props": {
              "variant": "info",
              "showIcon": true,
              "message": "数据每 5 分钟刷新一次",
              "description": "实时 RPM 为近 1 分钟滑动窗口。"
            }
          },
          {
            "type": "Alert",
            "props": {
              "variant": "warning",
              "showIcon": true,
              "message": "当前为演示租户",
              "description": "部分 API 不会真实扣费。"
            }
          },
          {
            "type": "Alert",
            "props": {
              "variant": "error",
              "showIcon": true,
              "message": "看板加载失败",
              "description": "服务暂时不可用，请稍后重试。"
            }
          },
          {
            "type": "Text",
            "props": {
              "text": "条带贴页头下 / Form 顶 / 表格上，宽度随内容区；同屏多条按 error > warning > info > success 优先级自上而下排列。",
              "type": "secondary",
              "size": "small"
            }
          }
        ]
      }
    ]
  }
}

布局 I-B / I-C / I-D — 语义卡 · 结果卡 · 行内提示

新窗口打开 ↗
  • I-B 语义卡：整块 Card 承载一条语义信息，图标 + 标题同一行，下方说明文案，右下角单主 link。
  • I-C 结果卡：操作完成后的结果摘要（Result），可带后续操作按钮。
  • I-D 行内提示：不占整行 Card，用 Field 的 description 在单字段旁给出警示。
规则说明
标题可选；有标题时 图标 + 标题 同一行
列表error / warning 常用 bullet 多条 汇总校验
底操作单主 link 或右对齐按钮；危险跳转仍遵守确认规范
DSL 配置
{
  "body": {
    "type": "Page",
    "children": [
      {
        "type": "Flex",
        "props": {
          "direction": "vertical",
          "gap": 16
        },
        "children": [
          {
            "type": "Card",
            "props": {
              "className": "w-full"
            },
            "children": [
              {
                "type": "Flex",
                "props": {
                  "direction": "vertical",
                  "gap": 8,
                  "align": "start"
                },
                "children": [
                  {
                    "type": "Flex",
                    "props": {
                      "gap": 8,
                      "align": "center"
                    },
                    "children": [
                      {
                        "type": "Icon",
                        "props": {
                          "name": "info",
                          "size": "sm"
                        }
                      },
                      {
                        "type": "Text",
                        "props": {
                          "text": "计费说明",
                          "strong": true
                        }
                      }
                    ]
                  },
                  {
                    "type": "Text",
                    "props": {
                      "text": "按 Token 用量计费；账单日每月 1 日结算。",
                      "type": "secondary",
                      "size": "small"
                    }
                  },
                  {
                    "type": "Flex",
                    "props": {
                      "justify": "end",
                      "className": "w-full"
                    },
                    "children": [
                      {
                        "type": "Button",
                        "props": {
                          "text": "查看定价 →",
                          "variant": "link"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "Card",
            "props": {
              "className": "w-full"
            },
            "children": [
              {
                "type": "Result",
                "props": {
                  "status": "success",
                  "title": "租户已开通",
                  "subTitle": "租户编码 acme-corp 已生效。"
                },
                "children": [
                  {
                    "type": "Flex",
                    "props": {
                      "justify": "center",
                      "gap": 8
                    },
                    "children": [
                      {
                        "type": "Button",
                        "props": {
                          "text": "进入租户控制台",
                          "variant": "primary"
                        }
                      },
                      {
                        "type": "Button",
                        "props": {
                          "text": "继续邀请用户"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "Card",
            "props": {
              "className": "w-full"
            },
            "children": [
              {
                "type": "Form",
                "children": [
                  {
                    "type": "Field",
                    "props": {
                      "label": "租户编码",
                      "required": true,
                      "description": "创建后不可修改"
                    },
                    "children": [
                      {
                        "type": "Input",
                        "props": {
                          "name": "code",
                          "placeholder": "如 acme-corp"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

信息卡片摆放

位置推荐形态
列表 / 看板顶I-A 条带
表单顶 / 段间I-A 或 I-B
详情顶概览下I-B
提交失败I-error 条带 + 字段级错误
Modal 内I-A 窄条，无 Card

堆叠： 同屏多条时按 error > warning > info > success 优先级自上而下排列。

布局 T-markdown — Markdown 文本卡

新窗口打开 ↗

文本 Card 用于说明文档、帮助、协议摘要、Release Note 等；PRD / 线框画「渲染后」结构，不贴原始 MD 源码块。

形态标注内容源
T-plain纯文本字符串 / Typography 段落
T-markdownMarkdown 渲染MD 源 → 组件树
T-htmlHTML 渲染消毒后 HTML 子集
MD 语法渲染线框表达规格要点
#–###### 标题Card 内默认 h3 起；全页文档页可用 h2
段落 / x普通文本行 / strong段间距一致
- / 1.· 或 1. 列表嵌套列表缩进 2 空格一级
` ``code等宽字体
` pre/code 框标明语言可选；横向滚动
>引用块可与 I-warning 视觉合并
t / !a链接 / 占位框 图:a外链新窗口 PRD 注明；alt 必填
`\…\` 表

长文： 超过一屏时 Card body max-height + 内部滚动，或折叠「展开全文」。

DSL 配置
{
  "body": {
    "type": "Page",
    "children": [
      {
        "type": "Card",
        "props": {
          "title": "接入指南",
          "className": "w-full"
        },
        "children": [
          {
            "type": "Markdown",
            "props": {
              "content": "## 准备工作\n\n请先创建客户端并记录 **Client ID**。\n\n### 步骤\n\n1. 控制台创建客户端\n2. 下载凭证\n3. 配置回调 URL\n\n> 注意：回调须为 HTTPS。\n\n行内代码 `client_id` 与代码块：\n\n```bash\ncurl -X POST https://api.example.com/v1/token \\\n  -H \"Authorization: Bearer <token>\" \\\n  -d \"client_id=<client_id>\"\n```\n\n| 参数 | 必填 | 说明 |\n| --- | --- | --- |\n| name | 是 | 显示名 |\n| client_id | 是 | 客户端 ID |\n| callback_url | 否 | 回调地址 |\n\n详见[开放平台文档](https://example.com/docs)。\n"
            }
          }
        ]
      }
    ]
  }
}

布局 T-html / T-plain — HTML 与纯文本卡

新窗口打开 ↗

HTML 文本卡用于运营配置、邮件模板预览、旧系统迁移等；当前实现 RichText 经 DOMPurify 白名单消毒（script / style / iframe / on* 事件属性被剥离）。T-plain 则是一两句无排版的纯文本。

推荐允许标签子集： p br h2 h3 h4 strong em u a[href] ul ol li blockquote pre code table thead tbody tr th td img[src,alt] hr span[class]（class 白名单可选）。

禁止： script style iframe on* 事件属性；须服务端或渲染前消毒。

选用场景
T-markdown研发/实施编写、Git 友好、默认文档卡
T-html富文本编辑器输出、邮件/HTML 片段回显
T-plain一两句话、无排版

同屏不混排两种源： 一张 Card 只一种内容类型（markdown / html / plain）。

DSL 配置
{
  "body": {
    "type": "Page",
    "children": [
      {
        "type": "Flex",
        "props": {
          "direction": "vertical",
          "gap": 16
        },
        "children": [
          {
            "type": "Card",
            "props": {
              "title": "活动说明",
              "className": "w-full"
            },
            "children": [
              {
                "type": "RichText",
                "props": {
                  "html": "<h3>限时优惠</h3>\n<p>即日起至年底，<strong>年费 8 折</strong>。</p>\n<ul>\n  <li>仅限新购</li>\n  <li>不可与代金券叠加</li>\n</ul>\n"
                }
              }
            ]
          },
          {
            "type": "Card",
            "props": {
              "title": "备注",
              "className": "w-full"
            },
            "children": [
              {
                "type": "Text",
                "props": {
                  "text": "本订单仅用于内部测试，请勿绑定生产密钥。"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Card 壳层共用规则（I / T）

项规则
titleI-B / T* 可有 Card 标题；I-A 条带 无 Card title
extra右上角 [编辑] [复制]（文档类）
padding正文区与 Form、键值 Card 对齐
宽度默认内容区全宽；侧栏场景可 span 8/24（线框注明）
加载Skeleton 段落行；不用 Lorem 冒充结构
空暂无说明 + muted，或隐藏整张 Card（PRD 二选一）

状态与异常

情况表现
MD 解析失败I-error 条带 + 降级 T-plain 显示原文（仅管理员）
HTML 含非法标签静默剥离 + 可选 I-warning「部分内容已省略」
图片失败占位框 + alt 文案

线框清单（提交 PRD 前自检）

1. 信息块标清 info / success / warning / error 与 I-A / I-B / I-C / I-D。

2. 文本卡标 T-plain / T-markdown / T-html；富文本画 渲染结构，不是大段源码。

3. 含 链接、表格、代码块 时各画一处代表结构即可。

4. 多条 I 条带写明 顺序与是否可关闭。

5. error 汇总与字段级错误 分工（条带总述 + 字段下文案）。