/* ========================================================================== ComfyLink 管理控制台样式 依据 docs/管理控制台视觉设计规范.md v1.0 实现 组织顺序：设计令牌 → 基础 → 布局 → 组件 → 页面特例 → 媒体查询 约束：纯 CSS，无外部字体 / 图片 / CDN，无 data: 资源，无 @import ========================================================================== */ /* ---------- 1. 设计令牌（暗色为默认，产品暗色优先） ---------- */ :root { color-scheme: light dark; /* 字体 */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --font-regular: 400; --font-medium: 600; --font-bold: 700; /* 字号阶梯（行高在使用处以 font 简写给出） */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 26px; /* 间距阶梯（4px 基网） */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* 圆角 */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; /* 暗色主题色板（默认） */ --bg: #17140F; --bg-subtle: #1C1914; --surface: #211D17; --surface-raised: #28231C; --inset: #14110D; --border: #363026; --border-strong: #4C4436; --text: #EDE7DC; --text-secondary: #C9C1B3; --text-muted: #9A917F; --accent: #D29A5B; --accent-strong: #E0AC6E; --accent-contrast: #241708; --accent-subtle: #332716; --accent-subtle-text: #E8BE8A; --success: #8FBF8F; --success-subtle: #22301F; --warning: #D9B36C; --warning-subtle: #332A17; --warning-border: #5C4A22; --danger: #DB8B78; --danger-strong: #E39B89; --danger-subtle: #372019; --danger-border: #5C352A; --focus-ring: var(--accent); --shadow-pop: 0 8px 24px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35); } /* 亮色主题：跟随系统（未手动选择时） */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #F7F4EE; --bg-subtle: #F1EDE5; --surface: #FFFEFB; --surface-raised: #FAF7F1; --inset: #F4F0E8; --border: #E2DCCF; --border-strong: #CBC2AF; --text: #2B251D; --text-secondary: #57503F; --text-muted: #7A7160; --accent: #9C6631; --accent-strong: #8A5726; --accent-contrast: #FFF9F0; --accent-subtle: #F2E5D3; --accent-subtle-text: #7D5021; --success: #4C7A4E; --success-subtle: #E3EDE0; --warning: #8A6A1F; --warning-subtle: #F3E9CF; --warning-border: #DEC98F; --danger: #A84A35; --danger-strong: #94402C; --danger-subtle: #F6E2DA; --danger-border: #DFB4A6; --shadow-pop: 0 8px 24px rgba(64, 50, 30, .14), 0 2px 6px rgba(64, 50, 30, .08); } } /* 手动主题钩子：JS 在 上设置 data-theme（预留） */ :root[data-theme="light"] { color-scheme: light; --bg: #F7F4EE; --bg-subtle: #F1EDE5; --surface: #FFFEFB; --surface-raised: #FAF7F1; --inset: #F4F0E8; --border: #E2DCCF; --border-strong: #CBC2AF; --text: #2B251D; --text-secondary: #57503F; --text-muted: #7A7160; --accent: #9C6631; --accent-strong: #8A5726; --accent-contrast: #FFF9F0; --accent-subtle: #F2E5D3; --accent-subtle-text: #7D5021; --success: #4C7A4E; --success-subtle: #E3EDE0; --warning: #8A6A1F; --warning-subtle: #F3E9CF; --warning-border: #DEC98F; --danger: #A84A35; --danger-strong: #94402C; --danger-subtle: #F6E2DA; --danger-border: #DFB4A6; --shadow-pop: 0 8px 24px rgba(64, 50, 30, .14), 0 2px 6px rgba(64, 50, 30, .08); } :root[data-theme="dark"] { color-scheme: dark; /* 暗色令牌即 :root 默认值，无需重复赋值 */ } /* ---------- 2. 基础 ---------- */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: var(--font-regular) var(--text-base)/1.55 var(--font-sans); } /* 登录 / 邀请页：可选的同族中性色径向微光（规范 §3.3 唯一允许的渐变） */ .shell:has(.auth-card:not([hidden])) { background: radial-gradient(1200px 600px at 50% -10%, var(--bg-subtle), var(--bg)); } h1, h2, h3, p { margin-top: 0; } h1 { font: var(--font-bold) var(--text-xl)/1.25 var(--font-sans); margin-bottom: var(--space-1); } h2 { font: var(--font-bold) var(--text-lg)/1.35 var(--font-sans); margin-bottom: var(--space-1); } h3 { font: var(--font-bold) var(--text-md)/1.45 var(--font-sans); } code { font-family: var(--font-mono); } .muted { color: var(--text-muted); } .hint { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; } .eyebrow { letter-spacing: .12em; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--accent); margin: 0 0 var(--space-2); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* 显隐的唯一机制 */ [hidden] { display: none !important; } /* ---------- 3. 布局壳层 ---------- */ .shell { min-height: 100vh; } /* 控制台：左侧边栏 + 内容区 */ #console-view:not([hidden]) { display: flex; min-height: 100vh; align-items: stretch; } .sidenav { width: 240px; flex: 0 0 240px; background: var(--bg-subtle); border-right: 1px solid var(--border); padding: var(--space-5) var(--space-3); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; } .sidenav-brand h1 { font: var(--font-bold) var(--text-md)/1.45 var(--font-sans); margin: 0; } .sidenav-nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-5); } .sidenav-heading { font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); font-weight: var(--font-medium); margin: 0; padding: var(--space-4) var(--space-3) var(--space-1); } .sidenav a { display: flex; align-items: center; height: 34px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--text-base); text-decoration: none; transition: background-color .15s ease, color .15s ease; } .sidenav a:hover { background: var(--surface-raised); color: var(--text); } .sidenav a[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-subtle-text); font-weight: var(--font-medium); } .nav-version { margin-left: auto; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); color: var(--accent-subtle-text); font: var(--font-medium) 10px/1.4 var(--font-sans); letter-spacing: .06em; } .user-menu { margin-top: auto; border-top: 1px solid var(--border); padding-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } #current-user { font-size: var(--text-sm); color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .content { flex: 1; min-width: 0; padding: var(--space-7); } .content > * { max-width: 960px; } /* 内容区直接渲染面板，不再"卡中卡"：.panel 退化为无语义区块 */ .panel { margin-bottom: var(--space-7); } .section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); } .section-heading.compact { align-items: center; gap: var(--space-3); } .section-heading h2, .section-heading h3, .section-heading p { margin-bottom: 0; } .section-heading .muted { margin-top: var(--space-1); } /* 门户：单栏居中，不加侧栏 */ .portal-shell { max-width: 760px; margin: 0 auto; padding: var(--space-7) var(--space-4); } .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); } /* 登录 / 邀请页居中卡片 */ .auth-card { width: min(400px, calc(100% - 32px)); margin: 12vh auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); } .auth-card .hint { margin: var(--space-5) 0 0; } .skip-link { position: absolute; left: -999px; } .skip-link:focus { position: fixed; top: var(--space-3); left: var(--space-3); z-index: 100; background: var(--accent); color: var(--accent-contrast); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); } /* ---------- 4. 组件 ---------- */ /* 4.1 按钮 */ button, .button-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-md); font: var(--font-medium) var(--text-base)/1 var(--font-sans); border: 1px solid transparent; cursor: pointer; text-decoration: none; background: var(--accent); color: var(--accent-contrast); transition: background-color .15s ease, border-color .15s ease, color .15s ease; } button:hover, .button-link:hover { background: var(--accent-strong); } button:disabled, .button-link[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } button.secondary, .button-link.secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); } button.secondary:hover, .button-link.secondary:hover { background: var(--surface-raised); } button.quiet, .quiet.button-link { background: transparent; border-color: transparent; color: var(--text-secondary); } button.quiet:hover, .quiet.button-link:hover { background: var(--surface-raised); color: var(--text); } button.quiet.danger, .quiet.danger.button-link { color: var(--danger); } button.quiet.danger:hover, .quiet.danger.button-link:hover { background: var(--danger-subtle); border-color: var(--danger-border); color: var(--danger); } button.danger-primary { background: var(--danger); color: #2A140E; } button.danger-primary:hover { background: var(--danger-strong); } /* 小号按钮：表格行内、入口单元格、预设与行内操作 */ td button, td .button-link, .entry-cell > a, .entry-cell > button, .api-actions button, .share-row button, .preset-row button, .inline-actions button { height: 28px; padding: 0 var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); } /* 4.2 表单控件 */ .stack { display: grid; gap: var(--space-4); margin-top: var(--space-5); } .stack.compact { max-width: 520px; } label { display: grid; gap: var(--space-2); font-size: var(--text-sm); line-height: 1.5; font-weight: var(--font-medium); color: var(--text-secondary); } label .hint { font-weight: var(--font-regular); } input, select, textarea { width: 100%; background: var(--inset); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 9px var(--space-3); font-size: var(--text-base); font-family: var(--font-sans); color: var(--text); transition: border-color .15s ease, background-color .15s ease; } input:not([type="checkbox"]):not([type="radio"]), select { appearance: none; height: 38px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--accent); } input[type="checkbox"], input[type="radio"] { appearance:auto; width: 16px; height: 16px; padding: 0; border: 0; background: transparent; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; } /* select 自定义 chevron：纯 CSS 线性渐变绘制（CSP 禁 data: 图片） */ select { background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; } textarea { font: 13px/1.55 var(--font-mono); resize: vertical; } textarea[readonly] { color: var(--text-muted); } /* 权限范围勾选卡片 */ .scope-list { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .scope-list legend { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-secondary); padding: 0 var(--space-2); } .scope-list label { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--inset); font-weight: var(--font-regular); color: var(--text-secondary); line-height: 1.35; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; } .scope-list label:hover { border-color: var(--border-strong); background: var(--surface-raised); } .scope-list label:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-subtle-text); } .scope-list input[type="checkbox"] { margin: 1px 0 0; } /* 4.3 表格 */ .table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: auto; background: var(--surface); } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); } th { font-size: var(--text-xs); line-height: 1.45; font-weight: var(--font-medium); color: var(--text-muted); letter-spacing: .04em; background: var(--bg-subtle); white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--surface-raised); } td code { font-size: var(--text-xs); background: var(--inset); padding: 2px 6px; border-radius: var(--radius-sm); } /* 仅标识 / 时间列保留 nowrap */ #devices-table td:nth-child(3), #audit-table td:first-child { white-space: nowrap; } .entry-cell { white-space: normal; } .entry-cell > a, .entry-cell > button { margin: 2px var(--space-2) 2px 0; vertical-align: middle; } .service-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); } .service-toolbar label { min-width: min(360px, 100%); } .service-toolbar .hint { margin: 0 0 var(--space-3); } .service-actions { min-width: 176px; } .service-actions button { margin: 2px var(--space-2) 2px 0; } .badge.service-pending { background: var(--warning-subtle); color: var(--warning); } .badge.service-enabled { background: var(--success-subtle); color: var(--success); } .badge.service-disabled { background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-muted); } .api-url { white-space: normal; overflow-wrap: anywhere; max-width: 340px; } /* 审计详情列：默认截断两行，点击展开 / 收起 */ .detail-cell { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; max-width: 360px; } .detail-cell.truncated { cursor: pointer; } .detail-cell.truncated:not(.expanded) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 4.4 徽章与状态点（状态类名来自后端数据，保持可扩展修饰类） */ .badge { display: inline-flex; align-items: center; gap: 6px; width: max-content; border-radius: var(--radius-full); padding: 3px 10px; font-size: var(--text-xs); line-height: 1.45; font-weight: var(--font-medium); background: var(--accent-subtle); color: var(--accent-subtle-text); } .badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; } .badge.online { background: var(--success-subtle); color: var(--success); } .badge.offline { background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-muted); } .badge.maintenance { background: var(--warning-subtle); color: var(--warning); } /* 4.5 嵌套卡片 */ .api-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5); margin: var(--space-4) 0 var(--space-6); align-items: start; } .inline-fields, .fleet-batch-bar { display: flex; gap: 0.9rem; align-items: end; flex-wrap: wrap; } .inline-fields > label, .fleet-batch-bar > label { flex: 1 1 180px; } .fleet-batch-bar { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); } .fleet-batch-bar button { width: auto; min-width: 190px; } #fleet-devices-table th:first-child, #fleet-devices-table td:first-child { width: 48px; text-align: center; } .api-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); } .api-card.stack { margin: 0; max-width: none; width: 100%; gap: var(--space-3); align-content: start; align-self: start; } .api-card-heading h3, .api-card-heading p { margin: 0; } .api-card-heading p { margin-top: var(--space-1); } .api-card > button[type="submit"] { justify-self: start; min-width: 132px; } .api-subtitle { margin-top: var(--space-6); } .param-row { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-3); } .param-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .param-head strong { font-size: var(--text-sm); color: var(--accent-subtle-text); } .param-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3) var(--space-4); } .param-row label { font-size: var(--text-sm); } .param-row .checkline { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); } .param-map { grid-column: 1 / -1; } .media-types { display: flex; gap: var(--space-3); flex-wrap: wrap; grid-column: 1 / -1; } .media-types label { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); font-weight: var(--font-regular); } /* 4.6 一次性令牌展示区 */ .secret { margin-top: var(--space-5); padding: var(--space-5); background: var(--accent-subtle); border: 1px dashed var(--accent); border-radius: var(--radius-lg); } .secret p:first-child { color: var(--accent-subtle-text); font-weight: var(--font-medium); } .secret p:last-child { margin-bottom: 0; } .copy-row { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; } .copy-row code { flex: 1; font: 13px/1.5 var(--font-mono); color: var(--text); background: var(--inset); border: 1px solid var(--border); padding: var(--space-3); border-radius: var(--radius-md); overflow-wrap: anywhere; user-select: all; } #workflow-success { white-space: normal; } /* 4.7 空状态与提示 */ .empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-muted); padding: var(--space-6); text-align: center; font-size: var(--text-sm); line-height: 1.5; margin-top: var(--space-4); } .form-error { color: var(--danger); background: var(--danger-subtle); border: 1px solid var(--danger-border); border-left-width: 3px; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 var(--space-4); } .auth-card .form-error { margin: var(--space-4) 0 0; } /* 操作成功轻量提示（toast-success，由 app.js showSuccess 创建） */ .toast-success { color: var(--success); background: var(--success-subtle); border: 1px solid var(--success); border-left-width: 3px; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 var(--space-4); } .notice { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--warning-subtle); border: 1px solid var(--warning-border); color: var(--text); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: 1.5; margin-bottom: var(--space-5); } .compact-notice { margin: 0; } /* 4.8 SSO 入口（登录卡片内） */ .sso-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); color: var(--text-muted); font-size: var(--text-sm); } .sso-divider::before, .sso-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); } .sso-link { width: 100%; height: 38px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); margin-bottom: var(--space-2); } .sso-link:hover { background: var(--surface-raised); color: var(--text); } /* 4.9 门户组件 */ .device-list { display: grid; gap: var(--space-5); margin-top: var(--space-5); } .device-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); } .form-stack { display: grid; gap: var(--space-4); margin-top: var(--space-4); } .form-stack button[type="submit"] { justify-self: start; } .share-row, .share-list { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-left: var(--space-2); } .share-list { margin: var(--space-2) 0 0; } .contract { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); } .contract code { display: block; color: var(--text); background: var(--inset); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); margin: var(--space-2) 0; overflow: auto; } /* ---------- 5. 工作流发布区 ---------- */ .workflow-toolbar { display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap; margin-top: var(--space-2); } .workflow-toolbar label { flex: 1; min-width: 220px; } .workflow-file-pick { display: inline-flex; gap: var(--space-2); align-items: center; } .workflow-section { border-top: 1px solid var(--border); padding-top: var(--space-6); margin-top: var(--space-7); } .field-group { display: grid; gap: var(--space-3); margin: var(--space-4) 0; } .block-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-secondary); } .inline-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; } .preset-row { display: inline-flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } .limits-row { display: flex; gap: var(--space-4); flex-wrap: wrap; } .limits-row label { flex: 1; min-width: 180px; } /* ---------- 6. 媒体查询 ---------- */ /* 窄屏（≤860px）：侧栏折叠为顶部条 + 横向滚动导航 */ @media (max-width: 860px) { #console-view:not([hidden]) { flex-direction: column; min-height: 0; } .sidenav { width: auto; flex: none; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; border-right: 0; border-bottom: 1px solid var(--border); } .sidenav-brand .eyebrow { margin-bottom: var(--space-1); } .user-menu { margin-top: 0; margin-left: auto; border-top: 0; padding-top: 0; } .sidenav-nav { order: 3; flex: 1 0 100%; flex-direction: row; gap: var(--space-1); margin-top: var(--space-2); overflow-x: auto; padding: var(--space-2) 0 0; scrollbar-width: thin; } .sidenav-heading { display: none; } .sidenav a { white-space: nowrap; height: 36px; border-radius: 0; border-bottom: 2px solid transparent; } .sidenav a:hover { background: transparent; color: var(--text); } .sidenav a[aria-current="page"] { background: transparent; color: var(--accent); border-bottom-color: var(--accent); } .content { padding: var(--space-5) var(--space-4); } .stack.compact { max-width: none; } .api-grid { grid-template-columns: 1fr; } .scope-list { grid-template-columns: 1fr; } .notice { flex-direction: column; gap: var(--space-2); } } @media (max-width: 640px) { th, td { padding: var(--space-2) var(--space-3); } .auth-card { padding: var(--space-5); } .portal-shell { padding: var(--space-5) var(--space-4); } } /* 动效偏好：减少动画 */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }