服务系统crawl-p0-preview（v20260407_audio_gen_lexicon_preview_docs_p0_01）样式说明

来源 + 怎么调用

来源：.yx-console-stage__sidebar、.yx-console-stage__brand*、.yx-console-stage__nav、.yx-console-stage__foot。

调用：Shell 层固定渲染 Sidebar，业务子页不改 Sidebar DOM。

数据口径：导航菜单、欢迎语、动作入口均由壳层数据驱动。

注意事项：Sidebar 展示宽度保持 clamp(276px, 20vw, 292px)；修改密码/退出登录 仅触发壳层动作事件，不在子页私自弹窗。

来源 + 怎么调用

来源：yx-ui-standard.css 的 .yx-list-tabs / .yx-list-tab。

调用：点击后只改 status 与列表数据，不刷新整页；URL 同步 status=waiting|failed|success。

来源 + 怎么调用

来源：.yx-console-stage__topbar-actions 内的任务控制位；空闲态使用 .yx-btn.yx-btn--primary，运行态使用 .yx-service-status-btn + .yx-service-status-btn__icon。

状态口径：仅用于 service=crawl&tab=dy 的任务中心 topbar 右侧；无运行中线程 / 无当前执行任务时显示 启动服务，有运行中线程 / 有当前执行任务时显示禁用态 服务中。

切换规则：两态互斥，同一时刻只显示一个控件；调用说明 / 模型配置不显示这组任务控制。

独立查看：/api/crawl-p0-runtime.html?service=crawl&tab=dy&status=waiting&page=1&page_size=20 可查看运行态；空闲态按上面按钮合同接入。

来源 + 怎么调用

来源：.yx-select 统一下拉控件。

调用：绑定 failed_days 参数；选择后只刷新当前状态数据和分页，不刷新页面，不丢焦点。

来源 + 怎么调用

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

调用：失败态动作使用 data-modal-kind="reason|retry"；成功态使用 data-modal-kind="detail"。

来源 + 怎么调用

来源：.yx-pagination 组件。

调用：维护 page、page_size；翻页只刷新当前状态数据。

来源 + 怎么调用

来源：.yx-task-ring。

调用：进入页面时触发一次动画；Tab 切换不重启动画；值来自当前任务剩余秒数。

来源 + 怎么调用

来源：.yx-sub-tabs / .yx-sub-tab。

调用：通过 doc=api|internal 切分文档内容，切换只改当前 docs 内容区。

来源 + 怎么调用

来源：.param-table 参数表标准样式。

调用：服务系统只填充参数元数据，不改变列结构和文档样式层级。

来源 + 怎么调用

来源：.yx-docs-code-panel + .yx-docs-copy-button。

调用：绑定 data-copy-code，复制后提示“已复制”。

来源 + 怎么调用

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

调用说明页本身不定义业务弹窗；仅支持代码复制反馈。

来源 + 怎么调用

来源：.yx-form-grid--three、.yx-field、.yx-select、.yx-input。

调用：字段绑定 data-yx-settings-field；保持三列布局，不引入自定义输入样式。

来源 + 怎么调用

来源：.yx-number、.yx-number__input、.yx-number__stepper。

调用：统一使用数值步进控件，不替换为自定义加减器。

来源 + 怎么调用

来源：.yx-textarea + .yx-settings-field--full。

调用：Prompt 区域固定占整行，字段名保持 prompt。

来源 + 怎么调用

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

调用：绑定 data-yx-settings-action="restore_saved|save"，不新增第三种按钮风格。

来源 + 怎么调用

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

调用：模型配置页不新增弹窗类型；保持无弹窗合同。

来源 + 怎么调用

来源：.yx-form-grid--four、.yx-field、.yx-select、.yx-input。

调用：基础参数走 data-yx-audio-field 映射，不允许自定义输入控件样式。

来源 + 怎么调用

来源：.yx-number、.yx-number__input、.yx-number__stepper。

调用：所有数值参数统一用步进输入，不另写自定义 +/- 控件。

来源 + 怎么调用

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

调用：绑定 data-yx-audio-action="restore_saved|save"，不新增按钮类型。

来源 + 怎么调用

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

调用：音频配置页保持无弹窗合同，不新增弹窗样式。

来源 + 怎么调用

来源：.yx-slider-row.yx-slider-row--input、.yx-slider-wrap、.yx-slider__field、.yx-slider__input（统一标准）。

调用：字幕配置页先调用联动输入型；字段绑定 data-yx-subtitle-field="BgAlpha|BgPadding|BgRadius|OutlineAlpha|ShadowAlpha|ShadowSize|MarginV"。

来源 + 怎么调用

来源：.yx-input--color、.yx-subtitle-color-row__hex。

调用：颜色器使用 data-yx-subtitle-color-for，HEX 输入使用 data-yx-subtitle-field，两者双向同步。

来源 + 怎么调用

来源：.yx-subtitle-settings__preview-panel、.yx-subtitle-preview、.yx-subtitle-preview__phone-bg。

调用：必须渲染手机视窗图；字幕文案实时写入 data-yx-subtitle-preview="caption" 节点。

来源 + 怎么调用

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

调用：字幕配置页保持无弹窗合同，不新增弹窗样式。

来源 + 怎么调用

来源：.yx-main-nav.yx-main-nav--topbar、.yx-console-stage__topbar-actions、.yx-btn--primary。

调用：tab=subtitle|audio_settings|lexicon 复用同一套二级导航；右侧只允许保留 data-lexicon-action="open-add"。

来源 + 怎么调用

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

调用：关键词输入绑定 data-lexicon-filter="keyword"；状态下拉绑定 data-lexicon-filter="status"；重置按钮绑定 data-lexicon-action="reset-filters"。

来源 + 怎么调用

来源：.yx-list-shell、.yx-table.yx-table--standard、.yx-chip、.yx-action-group。

调用：列表列固定为 原词 / 纠偏词 / 状态 / 更新时间 / 操作；正文文本保持默认表格样式，只有状态列与操作列使用标准语义类。

来源 + 怎么调用

来源：.yx-pagination、.yx-pagination__size、.yx-pagination__btn。

调用：页码按钮绑定 data-lexicon-page；每页条数绑定 data-lexicon-page-size；上一页/下一页分别绑定 data-lexicon-prev、data-lexicon-next。

来源 + 怎么调用

来源：.yx-btn--primary。

调用：按钮绑定 data-apikey-action="open-create"。

来源 + 怎么调用

来源：.yx-apikey-toolbar、.yx-search、.yx-toolbar__search--standard。

调用：绑定 data-apikey-duration-filter="keyword" 或 data-apikey-count-filter="keyword"；清空按钮绑定 data-apikey-clear。

来源 + 怎么调用

来源：.yx-apikey-toolbar、.yx-select、.yx-toolbar__filter。

调用：状态下拉绑定 data-apikey-*-filter="status"；有效期下拉（仅 duration）绑定 data-apikey-duration-filter="period"；两者同一套样式控件。

来源 + 怎么调用

来源：.yx-btn--secondary。

调用：绑定 data-apikey-action="reset-filters"，并通过 data-apikey-mode 区分 duration/count。

来源 + 怎么调用

来源：.yx-action-group、.yx-action-link、.yx-action-divider、.yx-apikey-action--disabled。

调用：列表“操作列”复用该按钮样式；可操作态显示动作按钮（冻结/恢复），不可操作态显示禁用文案；列固定规则在完整样式视图中体现。

来源 + 怎么调用

来源：.yx-apikey-access-cell、.yx-apikey-access、.yx-apikey-copy-btn、.yx-copy-switch-button。

调用：复制按钮统一使用 data-copy-code + data-copy-text；点击后走全局复制反馈动画。

来源 + 怎么调用

来源：.yx-apikey-all-service-control、.yx-apikey-service-switch。

调用：全选按钮绑定 data-apikey-create-toggle-all；单项服务开关卡统一用 .yx-switch-card--on / .yx-switch-card--off。

来源 + 怎么调用

来源：.yx-apikey-service-item、.yx-apikey-service-item__switch、.yx-apikey-service-switch。

调用：单项开关绑定 data-apikey-create-service="{service}"；选中态用 .yx-apikey-service-item--on。

来源 + 怎么调用

来源：.yx-settings-state、.yx-btn--secondary、.yx-btn--primary。

调用：data-yx-ops-action="restore_saved|save"；保存前后状态文案由后端响应更新。

来源 + 怎么调用

来源：.yx-ops-action-tile、.yx-btn--primary。

调用：按钮绑定 data-yx-ops-action="restart_aliyun_now|restart_autodl_now"。

来源 + 怎么调用

来源：.yx-switch-card、.yx-ops-binary、.yx-ops-binary__switch。

调用：绑定 data-yx-ops-field="aliyun.enabled|autodl.enabled"，值口径为 0|1。

来源 + 怎么调用

来源：.yx-input + input[type="time"]。

调用：运维策略时间位绑定 data-yx-ops-field="aliyun.time|autodl.time"；统一使用标准输入框壳层。

来源 + 怎么调用

来源：.yx-switch-card、.yx-ops-service-item、.yx-ops-service-switch。

调用：绑定 data-yx-ops-service="aliyun|autodl"；服务项必须按接口枚举渲染，不可写死。

来源 + 怎么调用

来源：.yx-number、.yx-number__input、.yx-number__stepper。

调用：默认策略绑定 data-yx-ops-field="worker_policy.default.*"；行策略绑定 data-yx-ops-policy-field。

来源 + 怎么调用

来源：.yx-table--ops-policy、.yx-col-service、.yx-col-number、.yx-col-mode。

调用：每行绑定 data-yx-ops-policy-row="{service}"，字段绑定 data-yx-ops-policy-field。

来源 + 怎么调用

来源：.yx-table--ops-log、.yx-col-id、.yx-col-time、.yx-col-log。

调用：日志来源固定为 [OPS] 条目；最多展示最近 30 条。

来源 + 怎么调用

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

调用：运维配置页-任务重启配置保持无弹窗合同，不新增弹窗样式。

来源 + 怎么调用

来源：.yx-btn--primary。

调用：绑定 data-settings-user-action="open-add"，打开新增账号弹窗。

来源 + 怎么调用

来源：.yx-search、.yx-toolbar__search--standard。

调用：输入框绑定 data-settings-user-filter="keyword"；清空按钮绑定 data-settings-user-clear。

来源 + 怎么调用

来源：.yx-select、.yx-toolbar__filter。

调用：角色绑定 data-settings-user-filter="role"；状态绑定 data-settings-user-filter="status"。

来源 + 怎么调用

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

调用：动作分别绑定 delete/freeze/unfreeze/open-reset/open-edit，操作列固定宽度 240px。

来源 + 怎么调用

来源：.yx-pagination、.yx-pagination__size。

调用：页码按钮绑定 data-settings-user-page；每页条数绑定 data-settings-user-page-size。

来源 + 怎么调用

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

调用：按 overview 字段渲染（service_count/waiting_count/running_count/today_total/seven_days_total）。

来源 + 怎么调用

来源：.yx-summary-health-card、.yx-summary-health-card__chips、.yx-chip。

调用：状态标签根据 infra.*.ok 与负载指数分级（在线/异常、负载稳定/高负载）。

来源 + 怎么调用

来源：.yx-summary-health-metric、.yx-summary-health-progress。

调用：CPU/内存/磁盘/负载指数统一用该控件；填充比例来自百分比字段，色阶按 success/warning/danger。

来源 + 怎么调用

来源：.yx-ring-chart、.yx-ring-chart__disc、.yx-ring-chart__center。

调用：通过 CSS 变量 --yx-ring-pending/success/danger 注入占比；中心数字展示 today。

来源 + 怎么调用

来源：.yx-metric-grid、.yx-metric-card、.yx-summary-metric-sub。

调用：每个服务卡固定四项（待执行/执行中/7天完成/完成占比）；队列压力作为副文案展示。

来源 + 怎么调用

来源：.yx-ring-legend、.yx-summary-service-legend。

调用：图例三项固定为“队列中/今日完成/异常压力”；数值与环形图分段保持一致。

来源 + 怎么调用

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

调用：数据汇总页保持无弹窗合同，不新增弹窗样式。