ResultRex / YanXiao UI Constitution v1

统一 UI 标准总页

从现在开始，统一 UI 只认这一页。 即插即用整页骨架、导航 / Tab、搜索框、下拉框、文本框、数字步进器、标准列表、数据汇总展示页、卡片列表、详情信息块、弹窗标准都在这里确认，其他预览页不再作为标准来源。

品牌主色 #ff6600 主文字 #444050 正文 #6d6b77 描边 #eeeeee 主模块圆角 20px 输入控件圆角 10px 标签 / 小元素圆角 5px 控件高度 44px 单行控件默认宽 320px（可自定义） 多行输入默认宽 460px（可自定义）
唯一标准页 https://dev.ui.resultrex.com/ 唯一公共资产 https://dev.ui.resultrex.com/yx-ui-standard.css 系统扩展 /assets/ui_asset.php?file=service|task|knowledge|admin

样式标准

这是接下来所有服务系统必须复用的 token 口径。

Colors

品牌色固定为 #ff6600，hover 用 #ff7a1a，软底色用 #fff3eb，描边统一 #eeeeee。

Radius

主卡片 20px，面板内控件 10px，标签 / 小元素 5px。

Typography

中文后台统一用 PingFang SC / Microsoft YaHei，正文 14px，标题 16px/22px，标签 13px。

Shadow

模块只允许轻阴影 0 2px 10px rgba(0,0,0,0.03)，交互提升也必须克制。

命名约束

先统一类名，再让其他页面逐步替换到共享类上。

  • .yx-search搜索框容器，左图标右输入
  • .yx-input单行输入，统一高度 44px
  • .yx-input-affix / .yx-field--span-two双列链接输入框，复制按钮内嵌在输入框右侧
  • .yx-input[type="time"] / .yx-input[type="date"]时间/日期选择控件，沿用统一输入框骨架
  • .yx-slider / .yx-slider-row统一滑块容器与轨道，禁止业务页私有 range 样式
  • .yx-switch / .yx-switch-control统一开关容器与轨道，禁止再写服务专属开关皮肤
  • .yx-task-ring任务倒计时圆环控件，进度与数字统一由标准类驱动
  • .yx-switch-card带边框文本开关容器；开启绿色边框+浅绿背景，关闭灰边框+白底
  • .yx-number纯数字步进器，统一上下 +1 按钮
  • .yx-select下拉容器，内含原生 select
  • .yx-multi-select多选下拉容器，收起态折叠显示已选项
  • .yx-mark-badge小型标记标签，用于缩略图角标或列表当前项标记
  • .yx-textarea多行文本框，最小高 138px
  • .yx-list-shell + .yx-table列表壳与表格母版
  • .yx-loading-shell + .yx-loading大数据量加载态，支持独立显示和覆盖显示
  • .yx-main-nav / .yx-main-nav__item顶部二级导航，独立于内容区 tab
  • .yx-sub-tabs / .yx-sub-tab内容区三级 tab，必须保留底部分隔线
  • .yx-list-tabs / .yx-list-tab列表状态胶囊 tab，不允许再带底部分隔线
  • .yx-dashboard-shell + .yx-service-grid数据汇总 / dashboard 标准骨架
  • .yx-kpi-grid + .yx-kpi-card列表页顶部统计卡
  • .yx-bulk-bar批量操作条，勾选后出现
  • .yx-card-list + .yx-list-card卡片式列表母版
  • .yx-pagination统一分页与每页条数切换
  • .yx-detail-grid详情弹窗 / 侧栏的信息块骨架
  • .yx-modal / .yx-modal-overlay详情 / 录入 / 确认 / 提示弹窗骨架
  • .yx-col-w* + .yx-col-left/center/right + .yx-col-truncate/wrap/nowrap标准列表列合同组合：宽度 / 对齐 / 内容行为
  • .yx-modal-code.yx-modal-code--viewer弹窗原始结果 / JSON / 长文本展示器，放在 section 内时自动收口为单层框
  • .yx-scrollbar滚动条统一主题，代码块 / 日志 / 表格滚动容器共用
  • .yx-modal-media弹窗音视频播放器骨架，竖视频宽 480 / 横视频高 480
  • .yx-modal-image-gallery弹窗图片播放器骨架，焦点大图 + 缩略图选择统一走标准行为
  • .yx-btn / .yx-btn--primary / .yx-btn--secondary按钮统一走两类正式样式（主按钮/次按钮）

代码块控件（.yx-spec-code）

功能：用于说明页与接入文档的命令/路径代码段展示。

说明页入口：/api/crawl-p0-preview.html?_v=20260403_spec_code_02
效果页入口：/Preview/crawl-p0-preview.html?_v=20260412_preview_shell_01
运行实现：/api/crawl-p0-runtime.html?service=crawl&tab=dy

来源 + 调用说明

  • 来源：.yx-spec-code
  • 调用：直接使用 <pre class="yx-spec-code">...</pre>。
  • 数据口径：代码块字号 12px，行高 18px。
  • 注意事项：仅用于展示文本，不要在业务页面用它替代输入框/下拉框。

动态背景（.yx-login-piece-bg）

功能：用于页面背景层，提供可随机分布并持续移动的登录氛围背景。

来源 + 调用说明

  • 来源：.yx-login-piece-bg
  • 调用：作为内容容器底层背景独立挂载，不承载业务文字与按钮。
  • 行为：完整登录页接入后由 window.YXUIBehavior.initLoginBlobAutoSync(root) 承接随机分布与持续移动。
  • 数据口径：无特殊要求。
  • 注意事项：背景层只能做弱氛围，不得抢登录卡、标题和主按钮的视觉焦点。
  • 完整预览：打开整页登录预览

玻璃面板（.yx-login-piece-panel__card）

功能：用于承载表单/信息块的半透明玻璃容器。

来源 + 调用说明

  • 来源：.yx-login-piece-panel
  • 调用：容器只负责面板视觉，内部输入与按钮复用统一输入/按钮控件。
  • 数据口径：面板默认圆角 20px，尺寸按场景等比缩放。
  • 注意事项：禁止在业务页覆盖玻璃面板的圆角、阴影、边框透明度。

品牌标记容器（.yx-login-piece-logo__icon）

功能：用于品牌区主标记展示，不再内置统一图形资源。

来源 + 调用说明

  • 来源：.yx-login-piece-logo
  • 调用：仅渲染图标容器，不包含标题文字。
  • 数据口径：当前仅保留品牌标记容器，尺寸固定 48px。
  • 注意事项：主标记容器只作为品牌头左侧承载区，不允许再额外套虚线框或占位边框。

品牌名称自适应（.yx-login-piece-name-fit）

功能：用于主副标题随容器宽度自动收缩或换行，保证不溢出。

来源 + 调用说明

  • 来源：.yx-login-piece-name-wrap
  • 调用：保留“中文主标题 + 英文副标题”两行结构，由统一脚本执行自适应。
  • 数据口径：主标题与副标题均支持动态文本；无固定字符数上限。
  • 注意事项：标题容器不允许再带虚线边框、占位底板或额外装饰层。

一级导航（.yx-console-stage__nav-item）

功能：用于 Sidebar 一级业务入口切换。

来源 + 调用说明

  • 来源：.yx-console-stage__nav
  • 调用：渲染一级菜单列表，当前路由项添加 .yx-console-stage__nav-item--active。
  • 数据口径：一级导航固定为“图标 + 文字”结构；如有数量提示再追加 .yx-console-stage__nav-badge。
  • 注意事项：本控件仅负责导航项，不包含平台 Logo 和平台名称。

问候语（.yx-console-stage__foot-copy）

功能：用于展示当前登录用户欢迎文案。

早上好，{用户名称}欢迎回来！

来源 + 调用说明

  • 来源：.yx-console-stage__foot-copy
  • 调用：登录态可用后写入欢迎语文本。
  • 数据口径：文案由用户信息与时间段策略生成；时间映射：05:00-11:59 早上好，12:00-17:59 下午好，18:00-23:59 晚上好，00:00-04:59 夜深了。
  • 注意事项：无用户信息时使用兜底文案“早上好，欢迎回来！”，并按当前时段替换问候词。

修改密码入口（.yx-console-stage__foot-actions）

功能：用于触发“修改密码”弹窗动作。

来源 + 调用说明

  • 来源：.yx-console-stage__foot-actions a
  • 调用：点击后触发壳层动作 yx-console-shell-action: change-password。
  • 数据口径：仅动作入口，无业务数据字段。
  • 注意事项：入口不在子页自行弹窗，统一由壳层接管；正式弹窗长相跟随服务系统 20260408_settings_password_modal_single_col_fix_176。

修改密码弹窗标准（shell password modal）

正式标准跟随服务系统 2026-04-08 最终确认版。

来源 + 调用说明

  • 来源：服务系统 live 版 20260408_settings_password_modal_single_col_fix_176。
  • 结构：第一行左列 原密码，右列空占位；第二行并排 新密码 / 密码校验。
  • 调用：壳层动作统一触发；允许容器 id 为 #shellPwdOverlay 或 #masterPwdOverlay。
  • 禁止项：不允许副标题、不允许 SECURITY 眼眉、不允许底部再放次按钮 取消。

退出登录入口（.yx-console-stage__foot-actions）

功能：用于触发“退出登录”确认动作。

来源 + 调用说明

  • 来源：.yx-console-stage__foot-actions a
  • 调用：点击后触发壳层动作 yx-console-shell-action: logout。
  • 数据口径：仅动作入口，无业务数据字段。
  • 注意事项：统一走确认弹窗后再跳转 /logout.php。

导航 / Tab 标准

统一标准保留四类：二级导航、二级详情页 Topbar、三级内容导航、列表状态切换。

二级导航（.yx-main-nav.yx-main-nav--topbar）

用于服务系统顶部导航栏。非焦点 12px 浅灰，焦点 14px 橙色，只有激活项带下划线，不加整条底部分隔线。统一调用：.yx-main-nav.yx-main-nav--topbar + .yx-main-nav__item。

二级详情页 Topbar（.yx-task-detail-topbar）

用于二级详情页顶部，返回图标在左、标题紧随其后；点击范围是“图标 + 标题”整体。统一调用：.yx-task-detail-topbar + .yx-task-detail-topbar__back + .yx-task-detail-topbar__title。

三级内容导航（.yx-sub-tabs）

用于调用说明、模型配置这类内容区内部切换。必须带一条底部分隔线，激活项用橙色下划线压在分隔线上。统一调用：.yx-sub-tabs + .yx-sub-tab。

列表状态切换（.yx-list-tabs）

用于等待 / 失败 / 成功这类列表状态切换。胶囊激活态，不允许再叠加一条底部分隔线。统一调用：.yx-list-tabs + .yx-list-tab。

按钮标准

正式按钮只保留两类：主按钮和次按钮（含“恢复设置”同款）。

统一调用：.yx-btn.yx-btn--primary、.yx-btn.yx-btn--secondary。
已保存
服务系统设置页同款。状态标签统一调用：.yx-settings-state；顶栏按钮仍只用 .yx-btn 标准按钮。
空闲态：无运行中线程 / 无当前执行任务
运行态：有运行中线程 / 有当前执行任务
统一调用：.yx-console-stage__topbar-actions 内只出现一个控件。空闲态用 .yx-btn.yx-btn--primary；运行态用 .yx-service-status-btn + .yx-service-status-btn__icon。两态互斥，只用于 service=crawl&tab=dy 的任务中心 topbar 右侧。
统一调用：.yx-modal-copy-button / .yx-alert-copy-button--danger + .yx-copy-switch-button。
标准关闭按钮
36 x 36，叉线由共享组件居中绘制
统一调用：.yx-modal__close。业务页只保留按钮节点和 aria-label="关闭"，不允许再靠字体、行高或内边距补位置。

弹窗关闭按钮标准

共享组件单独验收区。业务页只接 .yx-modal__close，不允许再做页面级偏移补丁。

标准关闭按钮
36 x 36，叉线由共享组件自身绘制并居中。

状态标准

状态标签与来源标签统一走标准资产，不再按页面私写。

执行中 待处理 已完成 失败
统一调用：.yx-status + 标准语义类 --queued / --running / --done / --danger。
未开始 处理中 成功 等待确认 平台任务 类型确认 转向结果 人工复核 异常回退
统一调用：.yx-status + 扩展色板类 --neutral / --info / --success / --warning / --brand / --purple / --teal / --indigo / --pink。
待保存 保存中 已保存 保存失败
统一调用：.yx-settings-state + .yx-settings-state--saving / --success / --error。
任务系统 知识库系统 服务系统 管理系统 类型确认 转向结果 人工复核 异常回退
统一调用：.yx-chip + 色板类 --neutral / --info / --success / --warning / --danger / --brand / --purple / --teal / --indigo / --pink。
优选 当前 焦点 推荐 默认
统一调用：.yx-mark-badge + 修饰类；只做小标记，不替代 .yx-chip。

操作列标准

表格操作统一右侧蓝色文字链接。

| |
统一调用：.yx-action-group / .yx-action-link。
财经商业 | 消费观察
1,286 | 842 | 217
统一调用：.yx-inline-split / .yx-inline-split__value / .yx-inline-split__divider；列表中的 | 统一使用边框色。

倒计时圆环（.yx-task-ring）

功能：用于任务执行区展示剩余秒数与环形进度。

174
72

来源 + 调用说明

  • 来源：.yx-task-ring、.yx-task-ring__track、.yx-task-ring__value、.yx-task-ring__text。
  • 调用：容器设置 data-progress、data-value；进度通过 --yx-ring-progress 驱动。
  • 数据口径：progress 取值 0~1，value 为剩余秒数整数。
  • 注意事项：只改数据，不改圆环 SVG 结构；禁止业务页重写圆环轨道样式。

详情弹窗（.yx-modal.yx-modal--lg）

功能：展示结构化详情与返回 JSON。

XXXX 详情

标题XXX
内容 XXXX
标题XXX
内容 XXXX

内容标题 XXXX

内容标详情XXXX

来源 + 调用说明

  • 来源：.yx-modal--lg。
  • 调用：点击“详情”触发 data-modal-kind="detail"。
  • 数据口径：文本框与内容框均为占位示例，接入时按业务字段回填。
  • 注意事项：只替换内容，不替换统一弹窗头部与底部结构；正文发生纵向滚动时，滚动阴影由统一 behavior 自动收口。

原始结果展示器（.yx-modal-code.yx-modal-code--viewer）

功能：用于原始 JSON、长文本返回、回调体与调试结果展示，容器内统一滚动条样式。

原始结果详情

TaskID
cr202604101620039823
来源
内部任务
创建时间
2026.04.10 16:20:03
成功时间
2026.04.10 16:20:11

返回 JSON

{
  "download_url": "https://dev.api.resultrex.com/crawl/channel_dy.php?download_id=task_39A2F2vF26&token=web.douyinvod.com%2F6cddd637414a342e4c10ca29083abe31%2Ff69d8dcfc%2Fvideo%2Ftos%2Fcn%2Ftos-cn-ve-15%2F14359f17fb4da5bd9edf615e0d34492f%3Fa%3D3633%26br%3D1010%26cr%3D3%26dr%3D0%26lr%3Dall%26cd%3D0%7C0%7C0%7C1",
  "download_id": "http%3A%2F%2Fcdn.example.com%2Fpayloads%2F20260410%2Fraw_result%2Fcr202604101620039823.json",
  "response": {
    "title": "内部任务原始回调",
    "status": "success",
    "elapsed_ms": 8012,
    "message": "callback success",
    "payload_lines": [
      "line_01=web.douyinvod.com%2F6cddd637414a342e4c10ca29083abe31%2Ff69d8dcfc%2Fvideo%2Ftos%2Fcn%2Ftos-cn-ve-15%2F14359f17fb4da5bd9edf615e0d34492f",
      "line_02=type%3Dvideo_mp4%26qs%3D0%26rc%3DaDVpNzc1Zzxn0zRnNDsz00BpanNkcXA5cnZuOjMzNGkzM0BiMzFxNnAx14wLWfgYSMva29yMm0NDVhLS1kLTBzcw%253D%253D",
      "line_03=download_url=https%3A%2F%2Fdev.api.resultrex.com%2Fcrawl%2Fchannel_dy.php%3Fdownload_id%3Dtask_39A2F2vF26",
      "line_04=callback_trace=20260410T162011Z|ok|raw_result|length=1873"
    ]
  }
}

来源 + 调用说明

  • 来源：.yx-modal-code.yx-modal-code--viewer + 共享滚动条主题 .yx-scrollbar。
  • 调用：放在 .yx-modal-section__body 内，用只读 <pre> 承接原始结果；嵌入 section 时自动收口为单层框。
  • 数据口径：适用于原始 JSON、长链接返回、失败回调体、调试文本；建议头部保留标准标题与复制按钮。
  • 注意事项：不允许再拿 textarea 假装结果展示器；不允许业务页本地重写滚动条颜色或宽度。

录入弹窗（.yx-modal.yx-modal--fit-form）

功能：用于新增 / 编辑 / 配置录入。

录入标题

来源 + 调用说明

  • 来源：.yx-modal--fit-form。
  • 调用：点击“新增 / 编辑”触发录入弹窗。
  • 数据口径：字段按业务合同回填，输入控件必须复用统一表单控件。
  • 宽度口径：面板宽度 = 最宽一行控件总宽度 + 控件间距 + 48px；标题、表单、底部动作区按 24px 统一留白，标题额外右移 5px。
  • 注意事项：禁止自定义弹窗壳样式，只允许替换字段与文案；正文滚动阴影统一由共享 behavior 自动判定。

确认弹窗（.yx-modal.yx-modal--sm）

功能：用于风险动作二次确认。

确认操作内容标题

{任务编号（若无不显示）} 操作内容

来源 + 调用说明

  • 来源：.yx-modal--sm。
  • 调用：点击业务动作触发确认弹窗，确认后提交确认 action。
  • 数据口径：确认内容=提示标记 + 任务编号（若无则隐藏）+ 操作内容。
  • 注意事项：示例不写死任务编号与动作文案，接入时由业务回填。

提示弹窗（.yx-modal.yx-modal--md）

功能：用于失败原因与只读提示展示。

提示标题

提示内容

内容标题

内容标签 
内容

来源 + 调用说明

  • 来源：.yx-modal--md。
  • 调用：点击“原因”触发 data-modal-kind="reason"。
  • 数据口径：失败原因文本 + 可选内容文本框（标题/标签/内容）。
  • 注意事项：内容文本框为可选项；需要自定义时必须复用 .yx-modal-section 样式；正文滚动阴影不允许页面自己补。

新手提示样式（.yx-note-box）

功能：用于调用说明、接入提醒、双步骤提示。

新手提示： 爬虫业务耗时较长，对接分为两步。第一步是“提交任务”获取 Task ID，第二步是“轮询查询”获取结果。

内部调用说明： 内部链路已接入统一 docs 渲染器时，成功态提示块统一使用绿色口径。

来源 + 调用说明

  • 来源：.yx-note-box。
  • 调用：用于 docs 页、接口接入页、流程提醒块。
  • 数据口径：标题 + 提示内容，文案由业务页回填。
  • 注意事项：默认 / 新手提示为橙色；成功态追加 .yx-note-box--success 变为绿色；左侧提示标识固定使用 yx-icon-confirm-info-solid。

弹窗视频播放器（.yx-modal-media）

功能：在弹窗中播放视频，竖视频固定宽 480，横视频固定高 480。

视频预览

竖视频：固定宽度 480px（移动端自动降级为 100% 宽）。
横视频：固定高度 480px（宽度按比例自适应，容器不足时自动等比缩放）。

来源 + 调用说明

  • 来源：.yx-modal-media、.yx-modal-media__frame、.yx-modal-media__video。
  • 调用：容器加 .yx-modal-media--portrait 或 .yx-modal-media--landscape。
  • 数据口径：竖视频固定宽 480px；横视频固定高 480px。
  • 注意事项：禁止业务页重写视频尺寸；如需自动判定方向，使用 window.YXUIBehavior.initModalMediaAutoSync()。

弹窗图片播放器（.yx-modal-image-gallery）

功能：焦点大图预览 + 缩略图选择；优选角标与评分为可选覆盖信息。

图片方案 A 优选 89 分

来源 + 调用说明

  • 来源：.yx-modal-image-gallery、.yx-modal-image-gallery__viewer-link、.yx-modal-image-gallery__image、.yx-modal-image-gallery__thumb-list、.yx-modal-image-gallery__thumb。
  • 调用：主图锚点承载当前焦点图，缩略图按钮使用 data-yx-image-url、data-yx-image-score；最高分项可加 data-yx-image-best="1"。
  • 数据口径：控件本体只处理焦点大图、缩略图切换与可选评分 / 优选展示；业务字段继续沿用 url / score / best 语义。
  • 注意事项：标题、步骤卡、状态说明必须放在控件外单独拼装；主图点击默认走 window.YXUIBehavior.openImagePreviewWindow(url)。

弹窗音频播放器（.yx-modal-media__audio）

功能：在弹窗中播放音频，统一播放器壳样式与信息区。

音频试听

音频播放器按容器宽度自适应，窄容器下保持完整显示，不裁切控件。

来源 + 调用说明

  • 来源：.yx-modal-media__audio-wrap、.yx-modal-media__audio。
  • 调用：弹窗内容区直接放置 <audio class="yx-modal-media__audio" controls>。
  • 宽度：默认 100%；可在 .yx-modal-media 设置 --yx-modal-media-audio-width、--yx-modal-media-audio-justify 自定义。
  • 数据口径：音频源地址按业务字段回填（mp3/wav/m4a 均可）。
  • 注意事项：禁止业务页改播放器外壳、边框、内边距。

搜索框（.yx-search）

功能：用于列表工具栏关键词检索。

来源 + 调用说明

  • 来源：.yx-search。
  • 调用：列表工具栏统一挂载该控件，输入时触发筛选。
  • 数据口径：输入值映射搜索关键词；支持任务 ID / 来源链接 / 文件名。
  • 注意事项：清空按钮统一使用 .yx-search__clear，显隐由统一 behavior 自动判断，业务页不再自行写脚本。

下拉选择框（.yx-select）

功能：用于状态、时间范围等条件筛选。

来源 + 调用说明

  • 来源：.yx-select。
  • 调用：外层使用 .yx-select，内部保持原生 <select>。
  • 数据口径：当前选中值映射筛选参数值。
  • 注意事项：有提示词场景使用禁用首项；无提示词场景直接给默认选项。

多选下拉选择框（.yx-multi-select）

功能：用于一个字段内选择多个候选项，并在收起态折叠展示已选结果。

请选择内容
已选 3 项

来源 + 调用说明

  • 来源：.yx-multi-select + window.YXUIBehavior.syncMultiSelects(root)。
  • 调用：根节点使用 .yx-multi-select，内部固定由 trigger / option / foot 三段组成。
  • 数据口径：选中结果统一取每个选项的 data-value 集合；展示文案取 data-label。
  • 注意事项（强制）：业务页不准再自行拼“输入框 + Tag + 浮层”，多选交互必须走标准行为库。

文本框（.yx-input / .yx-textarea）

功能：用于单行输入与多行内容输入。

来源 + 调用说明

  • 来源：.yx-input / .yx-textarea。
  • 调用（强制）：单行输入必须使用 .yx-input，长文本输入必须使用 .yx-textarea。
  • 数据口径：输入值按字段名回填业务参数。
  • 注意事项（强制）：标题与控件间距固定 5px，标题左侧统一右缩进 10px。

链接输入框 + 内嵌复制按钮（.yx-input-affix）

功能：用于主页链接、来源地址这类只读链接字段；字段可跨两列，复制按钮固定在输入框右侧。

来源 + 调用说明

  • 来源：.yx-field--span-two + .yx-input-affix + .yx-input-affix__control + .yx-input-affix__copy。
  • 调用：链接字段外层仍是标准 .yx-field；如果要占两列，直接加 .yx-field--span-two。
  • 数据口径：输入框展示原始链接值；点击行为取 data-href；复制按钮仍走 data-copy-target / data-copy-text。
  • 注意事项：业务页不允许再手写绝对定位复制按钮，也不允许把链接字段退回成“输入框外另放一个复制按钮”。

数字步进器（.yx-number）

功能：用于整数参数录入，统一右侧步进按钮交互。

来源 + 调用说明

  • 来源：.yx-number / .yx-number__input / .yx-number__stepper。
  • 调用（强制）：外层必须使用 .yx-number，输入框必须使用 type="number"。
  • 数据口径：示例值仅用于样式展示，业务含义由系统侧定义。
  • 注意事项（强制）：禁止裸用浏览器默认 number 小箭头，统一使用标准步进按钮。

时间选择控件标准（.yx-input[type="time"] / .yx-input[type="date"]）

功能：用于时间与日期输入，统一沿用输入框标准骨架。

来源 + 调用说明

  • 来源：.yx-input[type="time"] / .yx-input[type="date"]。
  • 调用（强制）：统一复用 .yx-input，仅通过 type 区分时间/日期。
  • 数据口径：时间值 HH:mm；日期值 YYYY-MM-DD。
  • 注意事项（强制）：禁止再使用旧版多段时间组合控件（周几+小时+分钟拆分）。

开关标准（Switch）（.yx-switch / .yx-switch-card）

功能：用于布尔状态控制，统一基础开关与带边框文本开关样式。

来源 + 调用说明

  • 来源：.yx-switch-control / .yx-switch / .yx-switch-card。
  • 调用（强制）：基础开关必须使用 .yx-switch-control；带文案开关必须使用 .yx-switch-card。
  • 数据口径：仅承载布尔值（开/关）；文案字段由业务数据回填。
  • 注意事项（强制）：开启为绿色系，关闭为灰色系，禁止新增私有开关皮肤。

滑块标准（Slider）（.yx-slider）

功能：用于范围参数调节，统一轨道、滑块与数值展示结构。

60

来源 + 调用说明

  • 来源：.yx-slider-row / .yx-slider-row--input / .yx-slider-wrap / input.yx-slider / .yx-slider__value / .yx-slider__input。
  • 调用（强制）：业务页只能二选一调用标准形态：纯展示型或联动输入型；禁止自己拼第三种滑块结构。
  • 数据口径：滑块与输入框共用同一组 min / max / step / value；联动输入型通过共享行为库双向同步。
  • 注意事项（强制）：禁止在业务页重写私有 range 皮肤，联动逻辑必须走 window.YXUIBehavior.syncSliders(root) / initSliderAutoSync(root)。

手机预览模板标准（.yx-subtitle-preview）

功能：用于字幕配置页手机视窗壳展示，统一预览结构样式。

来源 + 调用说明

  • 来源：.yx-subtitle-preview / .yx-subtitle-preview__screen。
  • 调用（强制）：外层必须使用 .yx-subtitle-preview，屏幕层必须使用 .yx-subtitle-preview__screen 承载字幕内容。
  • 数据口径：当前示例仅展示样式结构，不预置业务字幕内容。
  • 注意事项（强制）：禁止额外叠加私有边框、阴影或背景遮罩，保持统一壳层视觉。

列表样式（.yx-list-shell + .yx-table）

功能：用于列表主体展示，统一表格主体、固定操作列与分页结构。

# 编号 / 标题 分类 状态 来源 更新时间 操作
1 TSK-20260324-0001 任务系统 / 内容任务 / 批量抓取 列表任务 执行中 任务系统 2026-03-24 15:30:22
2 DOC-20260324-0028 知识库系统 / 模板管理 / 模板同步 知识条目 已完成 知识库系统 2026-03-24 14:52:09
|
3 SRV-20260324-0072 服务系统 / 视频分析 / 多线程执行 AI 服务 待处理 服务系统 2026-03-24 14:40:55
|
4 ADM-20260324-0019 管理系统 / 代理管理 / 账号校验 管理记录 失败 管理系统 2026-03-24 13:08:41
|
共 128 条
...

本面板展示默认列表样式（表格 + 每页数量 + 翻页），筛选与搜索控件在对应独立控件面板说明。

来源 + 调用说明

  • 来源：.yx-list-shell / .yx-table / .yx-pagination。
  • 调用（强制）：必须复用 .yx-list-shell + .yx-table + .yx-pagination，不得替换为私有表格结构。
  • 序号列（强制）：如需序号列，统一使用 .yx-col-index，表头写 #，宽度 100px，表头和数字全部左对齐。
  • 数据口径：本面板描述默认列表结构层（列、行、固定操作列、滚动容器、分页），字段语义由系统侧定义。
  • 注意事项（强制）：滚动容器必须保留 .yx-table-wrap--overflow-x 语义类；操作列是否 sticky 由统一 behavior 按真实横向滚动自动收口。

页面数量控件（.yx-pagination__left）

功能：用于设置每页条数并展示总条数。

共 128 条

来源 + 调用说明

  • 来源：.yx-pagination__left / .yx-pagination__size / .yx-pagination__total。
  • 调用（强制）：必须使用 .yx-pagination__left 结构（.yx-pagination__size + .yx-pagination__total）。
  • 数据口径：分别承载 page_size 与 total。
  • 注意事项（强制）：每页条数控件统一使用 .yx-select.yx-select--compact，禁止私有下拉皮肤。

翻页控件（.yx-pagination__right）

功能：用于上一页/下一页与页码切换。

...

来源 + 调用说明

  • 来源：.yx-pagination__right / .yx-pagination__btn / .yx-pagination__pages / .yx-pagination__icon。
  • 调用（强制）：必须使用 .yx-pagination__right（.yx-pagination__btn + .yx-pagination__pages）。
  • 数据口径：承载 current_page / total_pages。
  • 注意事项（强制）：翻页箭头必须使用图标（SVG），禁止使用 </> 文字符号。

加载态控件（.yx-loading-shell + .yx-loading）

功能：用于大批量数据加载时给出明确反馈，避免页面空白或被误判为卡死。

页面内容区悬浮加载
数据加载中
列表壳内覆盖加载
数据加载中

推荐口径：请求超过 400ms 或大表格首屏拉取时立即显示加载态；完成后整体移除，不要让用户看到空白表格。

来源 + 调用说明

  • 来源：.yx-loading-host / .yx-loading-shell / .yx-loading。
  • 调用（强制）：统一按“页面悬浮窗”接入，必须包在 .yx-loading-host 内；页面级和列表级都通过 .yx-loading-shell 挂在当前业务区域中央。
  • 数据口径：标准控件默认只承载主标题“数据加载中”和动画节奏；说明文案为可选项，没有真实百分比时不要伪造进度条。
  • 注意事项（强制）：只显示中央浮窗，不加整层遮罩；不要遮住全站侧栏 / 顶部导航；同时建议保留 role="status"、aria-live="polite"、aria-busy="true"。

柱形图数据展示控件（.yx-bar-stack）

功能：用于分层柱形对比展示每日任务结构。

500 400 300 200 100 0
248
03-20
302
03-21
356
03-22
428
03-23
372
03-24
418
03-25
362
03-26

来源 + 调用说明

  • 来源：.yx-bar-stack、.yx-bar-stack__y-axis、.yx-bar-stack__guides、.yx-bar-stack__cols
  • 调用：按日期循环渲染 7 列柱体，层级顺序固定为 base / mid / top，并同步渲染 y 轴刻度与横向参考线。
  • 数据口径：柱体高度按统一 y 轴最大值换算；日期轴按 03-20 ~ 03-26 对齐。
  • 注意事项：业务页不得再省略 y 轴；active 仅标记当前高亮列。

曲线图数据展示控件（.yx-line-chart）

功能：用于趋势折线展示连续日期数据变化。

来源 + 调用说明

  • 来源：.yx-line-chart
  • 调用：按时间序列渲染折线、面积与节点，外层骨架类名保持不变。
  • 数据口径：图表宽度跟随容器响应展开，7 个节点与 03-20 ~ 03-26 对齐。
  • 注意事项：示例图与业务图都必须按容器实时换算坐标，不允许写死静态坐标后直接拉伸。

数值卡片控件（.yx-stat-chip / .yx-metric-card）

功能：同一套数值卡片，在总览条与服务卡网格两个场景复用。

卡片1 888 副标题
卡片2 888
卡片3 888
卡片4 888 副标题

来源 + 调用说明

  • 来源：.yx-stat-chip（总览态）、.yx-metric-card（服务态）。
  • 调用：每张卡片独立渲染；总览场景用 .yx-stat-chip，服务场景用 .yx-metric-card。
  • 数据口径：主结构统一为 label + value，副标题可选（.yx-stat-chip__sub / .yx-summary-metric-sub）。
  • 标准色板：.yx-stat-chip--brand / --success / --warning / --danger / --info / --violet / --teal / --indigo / --pink。
  • 注意事项：优先使用标准色板；只有业务确实没有对应色板时，才用 --yx-stat-border / --yx-stat-bg / --yx-stat-label 变量覆盖。

指标条控件（.yx-summary-health-metric）

功能：用于展示单项百分比指标与进度条。

CPU
74%

来源 + 调用说明

  • 来源：.yx-summary-health-metric、.yx-summary-health-progress。
  • 调用：每个指标独立渲染一行 .yx-summary-health-metric，多指标按行重复即可。
  • 数据口径：数值字段输出百分比文本，并同步为填充宽度 width:%。
  • 注意事项：宽度需钳制在 0~100，色阶仅用 success/warning/danger。

环形图与图例一体控件（.yx-ring-widget）

功能：环形图与图例作为同一控件渲染，支持图例位置与行列布局自定义。

932 今日完成
队列中112
今日完成932
异常压力219

来源 + 调用说明

  • 来源：.yx-ring-widget、.yx-ring-chart、.yx-ring-legend。
  • 调用：图例位置通过 .yx-ring-widget--legend-bottom 或 .yx-ring-widget--legend-right 控制。
  • 数据口径：图例项与环形图分段一一对应，颜色与数值保持一致。
  • 注意事项：图例布局通过 .yx-ring-legend--row 或 .yx-ring-legend--column 控制。

卡片列表标准

用于模板管理、知识条目、移动端任务列表等信息更丰富的场景。

爆款口播模板 A-17

内容创作模板 / 行业：本地生活 / 最近 24 小时被调用 186 次
已启用
高转化 默认模板 适配短视频
命中率 86.4%
平均生成时长 48s
近 7 天调用 1,208
更新于 2026-03-23 09:16

知识切片规则组 B-04

知识库规则 / 视频素材管理 / 已绑定 6 个数据源
应用中
自动摘要 结构化抽取
今日切片 642
异常率 1.8%
最近同步 08:40
更新于 2026-03-23 08:41

空状态与日志列表

空状态要干净明确，日志区域必须独立滚动，不允许内容锁死。

空

当前没有匹配的数据

当筛选结果为空时，保持卡片边框、留白和说明文案统一，不要自己拼第二套空状态样式。

统一日志容器

最大高度示例：272px，可上下滚动
10:24:12 INFO
任务已下发到线程 03，开始拉取视频封面与字幕信息。
10:24:30 OK
字幕解析完成，已产出 14 条时间轴片段，等待结构化归并。
10:24:56 WARN
音轨情绪识别耗时偏高，已自动降级到兜底模型，任务继续执行。
10:25:14 INFO
结构化结果已回传详情模块，前端可以直接展示参数、最终请求、最终返回和结构化结果。

日志列表必须独立滚动；如果在页面里滚不动，说明外层容器高度或 overflow 被旧样式压住了。

详情信息块标准

所有任务详情弹窗 / 侧栏统一用这组信息块，不要只丢一段原始 JSON，更不要缺少排查信息。

基础参数

用于首屏定位问题
  • 任务 IDVA-20260323-1024
  • 服务名video_analyze
  • 执行模型Gemini 2.5 Pro
  • 来源链接douyin.com/video/7482...
  • 线程号03 / 当前并发 8

最终请求

保留真实落地参数 
{
  "provider": "gemini",
  "model": "gemini-2.5-pro",
  "mode": "video_structured_analysis",
  "frames": 14,
  "need_thinking": true,
  "temperature": 0.2
}

最终返回

原始响应保留便于排查 
{
  "code": 0,
  "message": "success",
  "elapsed_ms": 154201,
  "usage": {
    "prompt_tokens": 12894,
    "completion_tokens": 1632
  }
}

结构化结果

前端直接面向业务展示 
{
  "scene": "办公室口播",
  "emotion": "高能、强转化",
  "risk": ["无明显违规"],
  "highlights": [
    "开头 3 秒强钩子",
    "字幕节奏稳定",
    "结尾 CTA 明确"
  ]
}

thinking / 调试信息

仅业务支持时展示 
1. 先按镜头切片提取关键帧。
2. 对字幕与语音情绪做交叉校验。
3. 检查是否存在营销风险词。
4. 输出结构化标签并附带兜底说明。

详情页最低要求：参数、最终请求、最终返回、结构化结果；AI 服务建议补 thinking / 调试信息，方便线上排查。

可复用 token

其他 AI 程序员之后应优先消费这些变量，而不是写裸色值。

--yx-color-brand: #ff6600;
--yx-color-brand-hover: #ff7a1a;
--yx-color-border: #eeeeee;
--yx-color-text-strong: #444050;
--yx-color-text: #6d6b77;
--yx-color-text-muted: #a4aabd;
--yx-radius-card: 20px;
--yx-radius-control: 10px;
--yx-radius-inner: 5px;
--yx-height-control: 44px;
--yx-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.03);

即插即用接入

统一 UI 现在只给一套正式入口：先引公共资产，再按正式类名写结构；业务页只保留 DOM、数据和 JS，不再本地补 CSS。

<link rel="stylesheet" href="https://dev.ui.resultrex.com/yx-ui-standard.css">

<!-- 只有需要系统壳层时，才额外引系统扩展 -->
<link rel="stylesheet" href="https://dev.ui.resultrex.com/assets/ui_asset.php?file=service">
  • 第一步以后统一只看 https://dev.ui.resultrex.com/ 这一页，不再看别的预览页
  • 第二步公共控件统一引 `https://dev.ui.resultrex.com/yx-ui-standard.css`
  • 第三步只在需要系统壳层时，再额外引 `service / task / knowledge / admin` 扩展
  • 第四步业务页只能用正式 `.yx-*` 类，不允许再自造圆角、分页、操作列、搜索框样式

图标库

统一 UI 当前正式图标资产已切到 iconpark 整包源库。页面底部图标墙默认只展示纯线性的 `yx-icon-park-*`；混合填充源图不纳入官方展示面板。`dev.ui` 不再预设业务图标映射；各系统自己挑图、自己锁定。

<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false">
  <use href="https://dev.ui.resultrex.com/yx-ui-icons.svg?v=20260409_confirm_info_protected_p0_32#yx-icon-action-search"></use>
</svg>

各系统接入交接

`dev.ui` 不再维护任何业务图标映射表；服务系统、任务系统、知识库系统、其他后台系统都自己配对图标。

  • 第 1 步只从当前图标墙挑 `yx-icon-park-*` 线性源图标；不要选已隐藏的混合填充图标。
  • 第 2 步在各自系统仓库内维护本地 icon map；最少记录业务键、`icon_id`、`view_box`、使用页面。
  • 第 3 步页面统一通过 `` 调 `dev.ui` 共享资产；`viewBox` 以 `ui-manifest.json` 对应 `view_box` 为准。
  • 第 4 步禁止再用 Font Awesome、禁止页面内联 sprite、禁止把系统自己的业务映射回写到 `dev.ui` 公共 manifest。

业务语义和图标 id 的配对责任归各系统自身；`dev.ui` 只提供共享图标资产、manifest 和线性筛选后的图标墙。

const SYSTEM_ICON_MAP = {
  dashboard: { id: 'yx-icon-park-home', viewBox: '0 0 48 48' },
  jobs: { id: 'yx-icon-park-list-view', viewBox: '0 0 48 48' }
};

function renderSharedIcon(entry) {
  return '<svg viewBox="' + entry.viewBox + '" aria-hidden="true" focusable="false">' +
    '<use href="https://dev.ui.resultrex.com/yx-ui-icons.svg?v=20260409_confirm_info_protected_p0_32#' + entry.id + '"></use>' +
  '</svg>';
}