知识库系统knowledge-p0-preview（v20260416_knowledge_docs_assets_video_ops_p0_60）样式说明

来源 + 怎么调用

来源：.yx-modal--md、.yx-form-grid、.yx-input。

调用：由 data-shell-action=\"change-password\" 统一拉起；业务页不允许自己再造“修改密码”入口和私有弹窗。

数据口径：字段固定为原密码、新密码、确认密码；footer 只保留确认主按钮。

来源 + 怎么调用

来源：.yx-modal--md、.yx-modal-confirm--retry。

调用：由 data-shell-action=\"logout\" 统一拉起；确认后才执行退出登录。

注意事项：壳层动作只允许走统一确认弹窗，不允许子页直接 window.location 跳走。

来源 + 怎么调用

来源：.yx-login-piece-bg。

调用：只作为登录页底层背景挂载；效果稿里实际承接为 .bg-container + .grid-overlay，但视觉合同仍归属统一登录背景层。

行为：完整登录页接入后由 window.YXUIBehavior.initLoginBlobAutoSync(root) 承接随机分布与持续移动。

注意事项：背景层只能做氛围，不允许压过玻璃面板、品牌标题和主按钮。

来源 + 怎么调用

来源：.yx-login-piece-panel、.yx-login-piece-panel__card。

调用：只负责登录面板视觉，内部输入与按钮继续复用统一输入/按钮控件。

数据口径：面板属于一级面板，圆角保持 20px，不得改成私有圆角和私有阴影。

注意事项：禁止在业务登录页覆盖玻璃面板的边框透明度、阴影和背景模糊强度。

来源 + 怎么调用

来源：.yx-login-piece-logo__icon、.yx-login-piece-name-wrap、.yx-login-piece-name-fit。

调用：保留“品牌图标 + 中文主标题 + 英文副标题”结构，由统一行为脚本执行标题自适配。

数据口径：主副标题允许动态回填，长标题必须自动换行，不允许被截断或压坏图标区。

注意事项：品牌区不允许增加额外边框、底板或自写装饰层。

来源 + 怎么调用

来源：.yx-field、.yx-label、.yx-input、.btn-login。

调用：字段标签、文本框、主按钮全部走统一 UI 标准控件，不允许登录页单独重写输入框。

数据口径：字段固定为手机号、密码；按钮文案默认“登录”，提交态可切为“登录中...”。

注意事项：按钮宽度跟随面板内容宽度，必须保持整行，不允许自定义成 logo 风格按钮。

来源 + 怎么调用

来源：.yx-note-box 标准提示块。

调用：用于明确登录页只有背景、面板、品牌区和表单，不允许另加确认弹窗、提示弹窗或旧式消息条。

来源 + 怎么调用

来源：.yx-summary-stat-strip、.yx-stat-chip。

调用：每类资产展示“近7天变化量 + 总量”，图标取对应一级模块 icon。

数据口径：标签文案固定为资源分类；主值展示近7天新增，副值展示总量。

注意事项：该区只用标签统计样式，不改成自定义卡片或私有徽章。

来源 + 怎么调用

来源：.yx-line-chart、.yx-line-chart__svg、.yx-line-chart__axis。

调用：用统一折线图承接 7 天趋势；SVG 路径和坐标轴由数据渲染函数输出。

数据口径：X 轴固定 7 天日期，主值显示总量，副值显示峰值。

注意事项：日期需与数据点居中对齐，不允许压缩成滚动条或截断轴标签。

来源 + 怎么调用

来源：.yx-bar-stack、.yx-chart-legend。

调用：三层柱体固定为浅色爬取、中色转文、深色转向；最高日高亮。

数据口径：Y 轴必须显示刻度；柱体顶部显示当日爬取值；底部固定 7 天日期。

注意事项：不允许去掉 Y 轴，不允许把最高值高亮色改错。

来源 + 怎么调用

来源：.yx-summary-ring-grid、.yx-summary-ring-item、.yx-ring-chart。

调用：三个环分别展示专业知识、泛流量、时事；图例固定待转文、待转向、已完成。

数据口径：环中心显示总量，图例右侧显示各状态数量。

注意事项：环形图只做结构展示，不叠加额外标题或外层私有边框。

来源 + 怎么调用

来源：.yx-summary-module-list、.yx-summary-module-item。

调用：按一级模块展示近7天新增和环比，图标和 Sidebar 一级导航 icon 保持一致。

数据口径：列表头固定为模块 / 新增 / 环比；内容标题左对齐，图标无背景。

注意事项：不额外增加副标题，不把图标做成彩色底板。

来源 + 怎么调用

来源：.yx-summary-runtime-board、.yx-summary-runtime-item、.yx-summary-health-progress。

调用：左侧任务名固定列宽，右侧任务数/等待/成功/失败/进度条/百分比按栅格排布。

数据口径：进度条与百分比同源；等待/成功/失败为正文数字，不用标签样式。

注意事项：进度条和百分比列需独立居中，不允许挤成一团。

来源 + 怎么调用

来源：.yx-note-box 标准提示块。

调用：用于明确该页无弹窗合同；后续业务接入时也不允许单独补确认弹窗或私有弹窗。

来源 + 怎么调用

来源：.yx-btn.yx-btn--primary。

调用：固定放在 Topbar 右侧，点击后只打开 新增内容 弹窗，不新增页面级私有按钮样式。

来源 + 怎么调用

来源：.yx-search、.yx-search__clear。

调用：搜索字段固定承接 内容ID / 标题 / 文案内容；清空按钮显隐走统一 behavior，不在页面里手写显隐逻辑。

来源 + 怎么调用

来源：.yx-select、.yx-form-grid。

调用：一级行业变更后再刷新二级行业候选；二级行业没有上级值时必须保持禁用态，不允许展示错误候选。

来源 + 怎么调用

来源：.yx-inline-split。

调用：只用于列表列内容；展示口径固定为 一级行业 | 二级行业，分隔线颜色跟随列表边框色，不改单独字体权重。

来源 + 怎么调用

来源：.yx-status 标准状态标签。

调用：本页只允许 正常 / 待复核 / 冻结 三态；颜色与任务系统、服务系统共用同一标签合同。

来源 + 怎么调用

来源：.yx-action-group / .yx-action-link / .yx-action-divider。

调用：操作列 sticky 和横向滚动判断走统一 behavior；业务页只保留动作语义，不再自己补视觉样式。

来源 + 怎么调用

来源：.yx-pagination 统一分页组件。

调用：维护 page 和 page_size；翻页只刷新列表数据，筛选条件保持不丢失。

来源 + 怎么调用

来源：.yx-modal__close 标准关闭按钮。

调用：固定挂在弹窗头部右侧；只负责关闭当前详情弹窗，不允许在业务页再写私有叉号按钮。

来源 + 怎么调用

来源：.yx-detail-block、.yx-detail-list、.yx-status。

调用：基础信息固定承接七个字段；行业、归属是纯文本口径，不走列表里的 .yx-inline-split。

来源 + 怎么调用

来源：.yx-input、.yx-content-detail-copy-row、.yx-copy-switch-button。

调用：标题固定只读输入框承接；复制按钮复用统一 copy morph，不再写单独复制图标状态机。

来源 + 怎么调用

来源：.yx-textarea、.yx-content-detail-copy-row、.yx-copy-switch-button。

调用：正文区固定为只读多行文本；内容较长时由弹窗 body 承接滚动，不允许页面再包一层私有滚动盒。

来源 + 怎么调用

来源：.yx-toast。

调用：标题、正文复制成功后统一用 toast 反馈；不额外补业务页气泡、note 或 alert。

来源 + 怎么调用

来源：.yx-note-box 标准提示块。

调用：用于明确本章节只存在一个详情弹窗合同；冻结、删除确认属于列表页动作，不归到详情弹窗内部。

来源 + 怎么调用

来源：.yx-btn.yx-btn--primary。

调用：泛流量与时事都固定在 Topbar 右侧显示 新增内容；点击打开单字段录入弹窗，不扩展成多字段表单。

来源 + 怎么调用

来源：.yx-search、.yx-search__clear。

调用：搜索字段固定承接 内容ID / 标题 / 文案内容；显隐继续走统一 behavior，不手写清空逻辑。

来源 + 怎么调用

来源：.yx-select、.yx-form-grid。

调用：泛流量与时事都只保留来源、状态两个筛选；来源候选可以不同，但控件结构不变。

来源 + 怎么调用

来源：.yx-status 标准状态标签。

调用：与专业知识列表共用同一状态合同；这里只是去掉行业列，不重做状态视觉。

来源 + 怎么调用

来源：.yx-action-group / .yx-action-link / .yx-action-divider。

调用：冻结态时第二个动作变成 恢复；详情继续跳同合同详情弹窗，冻结/删除走共享确认弹窗。

来源 + 怎么调用

来源：.yx-pagination。

调用：分页合同与专业知识列表保持一致；切换页码只刷新当前 tab 的列表结果与总数。

来源 + 怎么调用

来源：.yx-modal__close 标准关闭按钮。

调用：固定挂在弹窗头部右侧；只负责关闭当前详情弹窗并返回原列表，不允许在业务页再写私有叉号按钮。

来源 + 怎么调用

来源：.yx-detail-block、.yx-detail-list、.yx-status。

调用：基础信息固定承接五个字段；泛流量 / 时事详情不显示行业、归属，也不补额外信息标签。

来源 + 怎么调用

来源：.yx-input、.yx-content-detail-copy-row、.yx-copy-switch-button。

调用：标题固定只读输入框承接；复制按钮复用统一 copy morph，不再写单独复制图标状态机。

来源 + 怎么调用

来源：.yx-textarea、.yx-content-detail-copy-row、.yx-copy-switch-button。

调用：正文区固定为只读多行文本；内容较长时由弹窗 body 承接滚动，不允许页面再包一层私有滚动盒。

来源 + 怎么调用

来源：.yx-toast。

调用：标题、正文复制成功后统一用 toast 反馈；不额外补业务页气泡、note 或 alert。

来源 + 怎么调用

来源：.yx-note-box 标准提示块。

调用：用于明确本章节只存在一个详情弹窗合同；冻结、恢复、删除确认属于列表页动作，不归到详情弹窗内部。

来源 + 怎么调用

来源：.yx-list-toolbar、.yx-search、.yx-select、.yx-btn--secondary。

调用：二级行业根据一级行业联动显示；搜索清空按钮显隐继续走统一 behavior；筛选区不额外包边框。

来源 + 怎么调用

来源：.yx-inline-split。

调用：行业、归属列标题与内容分隔符 | 居中对齐；列表里使用分隔口径，详情页不复用这一写法。

来源 + 怎么调用

来源：.yx-inline-split--triple、.yx-inline-split--metric、.yx-inline-split--status。

调用：数据量三段依次表示爬取 / 转文 / 转向数量；状态三段依次表示爬取 / 转文 / 转向状态，并通过文字颜色表达状态。

来源 + 怎么调用

来源：.yx-action-group、.yx-pagination。

调用：操作列只保留一个 详情 动作；分页只负责刷新列表数据，筛选条件保持不丢失。

来源 + 怎么调用

来源：.yx-note-box 标准提示块。

调用：用于明确列表页无额外确认弹窗合同；不要在列表页私加冻结、删除等二次确认弹窗。

来源 + 怎么调用

来源：.yx-account-detail-summary、.yx-account-detail-meta-grid、.yx-field、.yx-input。

调用：摘要区全部走只读输入合同；对标账号地址只保留只读文本框，不再额外放“打开链接”；行业和归属使用文本框口径，不使用列表里的 | 分隔展示。

来源 + 怎么调用

来源：.yx-list-toolbar、.yx-search、.yx-table--standard、.yx-account-step-col、.yx-status--button。

调用：工具区只保留搜索框，不放重置按钮；列表搜索只过滤当前账号下的内容；三个步骤拆成独立三列：音频提取 / 音频转文 / 文本转向；每列状态都可直接打开对应步骤详情。

来源 + 怎么调用

来源：.yx-step-status-list、.yx-step-status-item、.yx-step-status-label、.yx-status--button。

调用：三个步骤统一使用这套状态入口；状态覆盖 已完成 / 待处理 / 进行中 / 失败 四种标准效果，点击状态直接打开对应步骤详情弹窗；三个步骤在 进行中 / 待处理 时都只显示基础信息，失败统一显示失败原因，成功时仅 音频转文 / 文本转向 显示内容，音频提取 成功只保留基础信息。

来源 + 怎么调用

来源：.yx-list-toolbar、.yx-select。

调用：工具区只保留一级行业筛选；选中后刷新该一级行业下所有二级行业词库汇总，不追加搜索框和重置按钮。

来源 + 怎么调用

来源：.yx-table--keyword、.yx-inline-split--triple。

调用：表头固定为 平台词量 | 代理词量 | 客户词量；三段内容只展示数值，文字内容居中，分隔符颜色跟随列表边框色。

来源 + 怎么调用

来源：.yx-table--keyword、.yx-action-group、.yx-datetime。

调用：列表固定展示一级行业、二级行业和更新时间；操作列只保留 详情，不放编辑、删除、冻结动作。

来源 + 怎么调用

来源：.yx-pagination、.yx-select--compact。

调用：分页只负责当前行业词库列表翻页；切页时保留一级行业筛选状态。

来源 + 怎么调用

来源：.yx-note-box 标准提示块。

调用：用于明确当前列表页没有弹窗合同；不要在该页追加私有弹窗入口。

来源 + 怎么调用

来源：.yx-console-stage__topbar、.yx-task-detail-topbar。

调用：Topbar 左侧固定返回入口；点击回到 /knowledge-keyword-preview.html，右侧不追加私有按钮。

来源 + 怎么调用

来源：.yx-keyword-detail-summary、.yx-keyword-detail-meta-grid、.yx-field、.yx-input。

调用：摘要区全部走只读文本框，不用标签、不用居中值；行业字段在详情页里使用普通文本框文案 一级行业 二级行业。

来源 + 怎么调用

来源：.yx-keyword-detail-toolbar、.yx-search、.yx-btn--primary。

调用：工具区只保留搜索框和新增热词按钮；搜索支持关键词内容 / 归属联搜，清空按钮跟随统一行为自动显隐。

来源 + 怎么调用

来源：.yx-table--keyword-detail、.yx-status、.yx-action-group。

调用：状态列承接 正常 / 已冻结；操作列按状态切换 冻结 或 恢复，同时保留编辑和删除。

来源 + 怎么调用

来源：.yx-pagination、.yx-select--compact。

调用：分页只作用于当前行业词库详情列表；翻页时保留搜索关键词和当前行业上下文。

来源 + 怎么调用

来源：.yx-modal--fit-form、.yx-form-stack、.yx-field、.yx-input。

调用：新增和编辑共用一套表单弹窗；标题与主按钮文案按模式切换为 新增热词 / 编辑热词、保存热词 / 保存修改。

来源 + 怎么调用

来源：.yx-modal--sm、.yx-modal-confirm--retry。

调用：冻结 / 恢复 / 删除共用同一确认弹窗；标题、正文尾句和主按钮文案按动作切换，热词名称通过当前行数据注入。

来源 + 怎么调用

来源：.yx-list-toolbar、.yx-search、.yx-select、.yx-template-toolbar-level2。

调用：只有专业知识模板场景显示完整筛选组；一级行业选中后展开并刷新二级行业下拉，泛流量与时事场景只保留搜索框、状态筛选和重置。

来源 + 怎么调用

来源：.yx-template-table、.yx-inline-split、.yx-status、.yx-action-group。

调用：专业知识模板列表显示分类与行业列；行业统一使用 一级行业 | 二级行业，操作固定为 冻结/解冻 | 测试 | 详情。

来源 + 怎么调用

来源：.yx-list-toolbar、.yx-search、.yx-select、.yx-btn--secondary。

调用：泛流量与时事模板共用同一收口筛选规则，隐藏类型与行业相关筛选，只保留搜索、状态筛选和重置，同时更新搜索占位文案。

来源 + 怎么调用

来源：.yx-pagination、.yx-select--compact。

调用：分页负责当前场景模板列表翻页；切页时保留当前 tab 与筛选条件。

来源 + 怎么调用

来源：.yx-modal--sm、.yx-modal-confirm--retry。

调用：冻结与解冻共用一套确认弹窗；模板编号、标题、说明文案和主按钮文案按当前动作切换。

来源 + 怎么调用

来源：.yx-modal--lg、.yx-form-stack、.yx-textarea、.yx-input。

调用：测试按钮固定打开该弹窗；底部只保留右侧主按钮 开始测试，关闭统一走右上角关闭按钮；提交后关闭弹窗并触发页内 toast 提示 模板测试已提交。

来源 + 怎么调用

来源：.yx-form-grid、.yx-select、.yx-template-industry-pair。

调用：只有专业知识模板场景显示该组字段；模板类型切到 通用模板 时收起行业双下拉，泛流量与时事场景直接隐藏整块元信息区。

来源 + 怎么调用

来源：.yx-template-form-field--grow、.yx-textarea、.yx-number。

调用：左栏主体固定承接 角色设定 和 例文 两个自适应多行文本框；字数范围统一使用标准步进器，不再写私有数字输入框。

来源 + 怎么调用

来源：.yx-code、.yx-code--dense、.yx-template-preview-code。

调用：右栏上半区固定用代码样式显示 Prompt 预览；文本由当前表单值和场景模板实时拼装，不改成普通文本框；代码块本身直接复用标准 .yx-code，作为右栏内层展示块，不额外再套二级卡片。

来源 + 怎么调用

来源：.yx-template-verify-shell、.yx-template-var-code、.yx-status。

调用：右栏下半区固定展示变量命中表；专业知识模板显示行业校验，通用模板场景隐藏行业行但保留模板类型命中行。

来源 + 怎么调用

来源：.yx-note-box 标准提示块。

调用：用于明确该页当前没有正式页内弹窗合同；不要在该页追加私有确认窗或测试窗。

来源 + 怎么调用

来源：.yx-list-toolbar、.yx-search、.yx-select、.yx-btn--secondary。

调用：该页筛选固定为搜索 + 状态筛选 + 重置；搜索显隐清空按钮由统一 behavior 承接，不额外写输入事件。

来源 + 怎么调用

来源：.yx-cover-list-shell、.yx-cover-grid、.yx-cover-card、.yx-status、.yx-action-group。

调用：列表主体统一走封面卡片流；不换成表格，不加私有卡片按钮区；桌面态固定一行 4 列，预览图完整等比缩放不裁剪，且外框高度跟随图片实际高度；卡片本身按二级元素走 10px 圆角，状态继续使用标准标签。

来源 + 怎么调用

来源：.yx-cover-upload、.yx-cover-upload__toolbar、.yx-cover-upload__preview、.yx-cover-upload__frame。

调用：上传控件只允许图片文件；外层 .yx-cover-upload__preview 按二级元素走 10px 圆角，内层 .yx-cover-upload__frame 按三级元素走 5px 圆角；读取后根据宽高在 .yx-cover-ratio--916 和 .yx-cover-ratio--169 之间切换预览比例。

来源 + 怎么调用

来源：.yx-modal--md、.yx-form-stack、.yx-input、.yx-textarea、.yx-cover-upload。

调用：新增与编辑共用同一弹窗合同；编辑时只切换标题和默认值，不新增第二套编辑弹窗。

来源 + 怎么调用

来源：.yx-modal--sm、.yx-modal-confirm--retry。

调用：冻结、解冻、删除统一复用这一套确认弹窗；正文固定合并成单行口径，只保留右侧确认主按钮，不再保留取消按钮。

来源 + 怎么调用

来源：.yx-list-toolbar、.yx-search、.yx-select、.yx-btn--secondary。

调用：一级行业选中前，二级行业控件应保持隐藏和禁用；选中后再根据行业映射注入选项并显示。

来源 + 怎么调用

来源：.yx-table--cover-assets、.yx-inline-split、.yx-status、.yx-action-group。

调用：行业列继续使用列表标准 一级行业 | 二级行业；操作列只有 详情，不新增编辑、冻结、删除入口。

来源 + 怎么调用

来源：.yx-pagination、.yx-select--compact。

调用：翻页时保留当前客户搜索、一级/二级行业和状态筛选条件。

来源 + 怎么调用

来源：.yx-note-box 标准提示块。

调用：用于明确该页只存在列表和跳页，不允许临时补出私有确认窗或上传弹窗。

来源 + 怎么调用

来源：.yx-cover-summary-grid、.yx-field、.yx-input。

调用：摘要区全部字段都走只读文本框，不改成标签或列表；行业固定为详情文本口径，不使用 |。

来源 + 怎么调用

来源：.yx-cover-gallery-group、.yx-cover-gallery-group__head、.yx-cover-gallery、.yx-cover-gallery__item。

调用：详情页下方固定按分组渲染画廊；每个分组只承接标题、数量和图片项，不加私有操作按钮；每张图片卡片本身按二级元素走 10px 圆角。

来源 + 怎么调用

来源：.yx-note-box 标准提示块。

调用：用于明确该页当前是纯详情展示页；如果后续要加图片预览或编辑动作，必须单独立新合同。

来源 + 怎么调用

来源：.yx-list-toolbar、.yx-search、.yx-select、.yx-btn--secondary。

调用：系统音色页筛选固定承接搜索、状态、分类三项；清空按钮与横向滚动 sticky 都走统一 behavior。

来源 + 怎么调用

来源：.yx-table--voice-system、.yx-status、.yx-action-group。

调用：操作列固定为 编辑 | 删除 | 冻结/解冻 | 试听；音色 ID、描述、创建时间都走标准列表文本样式。

来源 + 怎么调用

来源：.yx-voice-upload、.yx-voice-upload__toolbar、.yx-voice-upload__name。

调用：创建 / 编辑音色时只承接音频文件上传，选中后只显示文件名，不额外生成预览图区域，也不新增二级预览面板。

来源 + 怎么调用

来源：.yx-modal--md、.yx-form-stack、.yx-form-grid、.yx-voice-upload。

调用：创建与编辑共用同一弹窗合同；编辑只回填值并切换标题，不增加第二套弹窗；上传区只承接文件选择与文件名展示，不额外生成预览层。

来源 + 怎么调用

来源：.yx-modal--sm、.yx-modal-confirm--retry。

调用：删除、冻结、解冻统一复用这一套确认弹窗；正文单行承接音色 ID 与动作提示，只保留确认主按钮。

来源 + 怎么调用

来源：.yx-modal--md、.yx-voice-audition-player、.yx-input。

调用：试听动作统一打开该弹窗；根据当前行回填音色 ID、名称、分类和音频地址；播放器本身属于字段内层媒体控件，固定与字段左右各保留 10px 内边距，不额外增加外层卡片或私有背景。

来源 + 怎么调用

来源：.yx-modal--lg、.yx-bgm-manage-toolbar、.yx-table--bgm-manage。

调用：点击系统音色页右上角 分类管理 打开该弹窗；新增与编辑都走表格行内模式，不再跳到独立分类页。

来源 + 怎么调用

来源：.yx-modal--sm、.yx-modal-confirm--retry。

调用：分类删除从分类管理弹窗内触发；提示文案固定为单句确认口径，只保留确认主按钮。

来源 + 怎么调用

来源：.yx-list-toolbar、.yx-search、.yx-select。

调用：客户音色页只保留搜索、状态筛选、重置；不补分类、行业或归属筛选。

来源 + 怎么调用

来源：.yx-table--voice-customer、.yx-status、.yx-action-group。

调用：列表操作列只有 详情；当前效果稿详情不跳页，而是打开页内大弹窗。

来源 + 怎么调用

来源：.yx-modal--lg、.yx-voice-customer-detail-note、.yx-voice-customer-detail-card、.yx-voice-customer-player。

调用：点击客户列表 详情 后统一打开该弹窗；正文按托管账号逐卡片承接，每张卡片固定展示来源、名称和播放插件，卡片本身按二级元素走 10px 圆角；播放器作为卡片内层媒体控件直接铺满字段，不额外再包试听面板。

来源 + 怎么调用

来源：.yx-console-stage__topbar-actions、.yx-btn。

调用：入口固定保留在系统音色页 Topbar 右侧；点击 分类管理 后弹出大弹窗。

来源 + 怎么调用

来源：.yx-bgm-manage-toolbar、.yx-search、.yx-btn--primary。

调用：管理工具区与背景音乐分类管理保持一致；搜索放左侧，新增分类按钮放右侧。