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[type="time"] / .yx-input[type="date"]时间/日期选择控件，沿用统一输入框骨架
  • .yx-slider / .yx-slider-row统一滑块容器与轨道，禁止业务页私有 range 样式
  • .yx-switch / .yx-switch-control统一开关容器与轨道，禁止再写服务专属开关皮肤
  • .yx-switch-card带边框文本开关容器；开启绿色边框+浅绿背景，关闭灰边框+白底
  • .yx-number纯数字步进器，统一上下 +1 按钮
  • .yx-select下拉容器，内含原生 select
  • .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-modal-action-block + .yx-modal-action-row弹窗内“处理方案 + 主按钮”操作模块
  • .yx-btn / .yx-btn--primary按钮统一走共享风格

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

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

说明页入口：/api/crawl-p0-preview.html?_v=20260403_spec_code_02
运行页入口：/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。
  • 数据口径：菜单名称由服务端路由配置输出；当前示意不再内置图标。
  • 注意事项：本控件仅负责导航项，不包含平台 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。
  • 数据口径：仅动作入口，无业务数据字段。
  • 注意事项：入口不在子页自行弹窗，统一由壳层接管。

退出登录入口（.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-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-action-group / .yx-action-link。

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

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

XXXX 详情

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

内容标题 XXXX

内容标详情XXXX

来源 + 调用说明

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

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

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

录入标题

来源 + 调用说明

  • 来源：.yx-modal--fit-form。
  • 调用：点击“新增 / 编辑”触发录入弹窗。
  • 数据口径：字段按业务合同回填，输入控件必须复用统一表单控件。
  • 注意事项：禁止自定义弹窗壳样式，只允许替换字段与文案；正文滚动阴影统一由共享 behavior 自动判定。

弹窗操作模块（.yx-modal-action-block）

功能：用于异常处理、状态变更等“下拉方案 + 主按钮”操作区。

异常内容详情

操作

来源 + 调用说明

  • 来源：.yx-modal-section.yx-modal-action-block + .yx-modal-action-row。
  • 调用：第一列放 .yx-select 或 .yx-field，第二列放主按钮 .yx-btn--primary。
  • 扩展：联动字段继续放在同一个 .yx-modal-section__body 里，直接接 .yx-form-grid。
  • 禁用项：不允许再写页面私有 .mc-stage-task-action-row 或单独补宽度 / gap / 换行样式。

确认弹窗（.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-search）

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

来源 + 调用说明

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

下拉选择框（.yx-select）

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

来源 + 调用说明

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

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

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

来源 + 调用说明

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

数字步进器（.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-wrap / input.yx-slider。
  • 调用（强制）：统一使用 input.yx-slider[type="range"]，并在外层保留 .yx-slider-row 结构。
  • 数据口径：示例值仅用于样式展示，业务含义由系统侧定义。
  • 注意事项（强制）：禁止在业务页重写私有 range 皮肤，统一复用该标准控件。

手机预览模板标准（.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，表头和数字全部左对齐。
  • 数据口径：分页左侧必须同时保留 page_size 选择器与 total 总数；二者不能合并，也不能互相替代。
  • 注意事项（强制）：滚动容器必须保留 .yx-table-wrap--overflow-x 语义类；操作列是否 sticky 由统一 behavior 按真实横向滚动自动收口。

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

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

共 8 条

来源 + 调用说明

  • 来源：.yx-pagination__left / .yx-pagination__size / .yx-pagination__total。
  • 调用（强制）：必须使用 .yx-pagination__left 结构（.yx-pagination__size + .yx-pagination__total）。
  • 数据口径（强制）：select 只承载 page_size，标准选项为 20 / 30 / 50；.yx-pagination__total 只承载总数。
  • 小数据口径（强制）：即使当前只有 8 条，也显示默认 page_size=20，旁边显示 共 8 条；禁止把 8 塞进选择器。
  • 完整性（强制）：使用标准分页时不得删除 .yx-pagination__size；如业务明确不需要分页，必须整体取消分页区，不允许保留半套分页。
  • 注意事项（强制）：每页条数控件统一使用 .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-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>';
}