/* * 精诺设计系统 (Jingque Design System) — CSS Token 文件 * 基于 DESIGN.md v1.0 生成，供知匠·机理知识资产平台使用 * * 使用方法：在 index.html 的 中引入此文件 * * * 然后在各模块CSS中用 var(--jq-xxx) 引用变量 * * 生成日期：2026-04-16 */ /* ═══════════════════════════════════════════════ 1. 色彩系统 ═══════════════════════════════════════════════ */ :root { /* ── 1.1 主色（Primary Blue） ── */ --jq-primary: #3E87F8; --jq-primary-hover: #57A1FB; --jq-primary-active: #2064CF; --jq-primary-disabled: #9FD0FD; --jq-primary-bg-light: rgba(62,135,248,0.06); /* 悬停背景 */ --jq-primary-bg-medium:rgba(62,135,248,0.08); /* 选中背景 */ --jq-primary-bg-strong:rgba(62,135,248,0.12); /* 按下背景 */ --jq-primary-bg-active:rgba(62,135,248,0.15); /* 导航激活 */ --jq-focus-ring: 0 0 0 2px rgba(123,186,252,0.20); /* ── 1.2 语义色 ── */ --jq-info: #3E87F8; --jq-success: #04B486; --jq-warning: #FF890F; /* L1 紧急 */ --jq-caution: #F7BA1E; /* L2 一般 */ --jq-danger: #F53F3F; /* 语义色浅底（用于标签/Tag背景） */ --jq-info-bg: rgba(62,135,248,0.10); --jq-success-bg: rgba(4,180,134,0.10); --jq-warning-bg: rgba(255,137,15,0.10); --jq-caution-bg: rgba(247,186,30,0.10); --jq-danger-bg: rgba(245,63,63,0.10); /* ── 1.3 文字五级透明度（核心！不用固定灰色hex） ── */ --jq-text-emphasis: rgba(0,0,0,0.87); /* L5 标题、数值、输入 */ --jq-text-body: rgba(0,0,0,0.60); /* L4 副标题、描述 */ --jq-text-aux: rgba(0,0,0,0.38); /* L3 占位符、辅助文字 */ --jq-text-disabled: rgba(0,0,0,0.16); /* L2 禁用文字 */ --jq-text-reverse: #FFFFFF; /* L1 深色背景上的文字 */ /* ── 1.4 表面与边框 ── */ --jq-bg-page: #F5F7FA; /* 页面背景 */ --jq-bg-card: #FFFFFF; /* 卡片/面板 */ --jq-bg-sidebar: #1a2035; /* 侧边栏 */ --jq-bg-table-header: #F5F8FB; --jq-bg-input-disabled: #F5F8FB; --jq-border: #E5E6EB; --jq-overlay: rgba(0,0,0,0.45); /* 弹窗/抽屉遮罩 */ /* 侧边栏文字层级 */ --jq-sidebar-text: rgba(255,255,255,0.65); --jq-sidebar-text-hover: rgba(255,255,255,0.87); --jq-sidebar-text-aux: rgba(255,255,255,0.30); --jq-sidebar-hover-bg: rgba(255,255,255,0.06); --jq-sidebar-section-bg: rgba(0,0,0,0.60); /* ═══════════════════════════════════════════════ 2. 字体系统 ═══════════════════════════════════════════════ */ --jq-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; --jq-font-kpi: "D-DIN", "DIN Alternate", "Helvetica Neue", sans-serif; /* KPI数字 */ /* 字号层级 */ --jq-fs-h1: 20px; /* 页面/抽屉/弹窗标题 */ --jq-fs-h2: 18px; /* 卡片/区域标题 */ --jq-fs-body: 16px; /* 按钮、表格内容、侧边栏 */ --jq-fs-label: 14px; /* 表单标签、次要列 */ --jq-fs-small: 12px; /* 标签Tag、辅助文字 */ /* 字重 */ --jq-fw-bold: 700; --jq-fw-medium: 500; --jq-fw-regular: 400; /* ═══════════════════════════════════════════════ 3. 间距网格（8px基准） ═══════════════════════════════════════════════ */ --jq-space-xxs: 4px; --jq-space-xs: 8px; --jq-space-sm: 12px; --jq-space-md: 16px; --jq-space-lg: 24px; --jq-space-xl: 32px; --jq-space-xxl: 48px; /* ═══════════════════════════════════════════════ 4. 圆角三级 ═══════════════════════════════════════════════ */ --jq-radius-sm: 2px; /* 输入框、标签、默认按钮 */ --jq-radius-md: 4px; /* 大按钮 */ --jq-radius-lg: 6px; /* 卡片、面板、抽屉 */ /* ═══════════════════════════════════════════════ 5. 阴影三级 ═══════════════════════════════════════════════ */ --jq-shadow-none: none; /* L0 平面 */ --jq-shadow-card: 0 1px 4px rgba(0,0,0,0.06); /* L1 卡片 */ --jq-shadow-dropdown: 0 4px 10px rgba(0,0,0,0.10); /* L2 下拉/Tooltip */ --jq-shadow-modal: 0 4px 16px rgba(0,0,0,0.10); /* L3 弹窗/抽屉 */ /* ═══════════════════════════════════════════════ 6. 组件尺寸 ═══════════════════════════════════════════════ */ /* 按钮 */ --jq-btn-height: 32px; --jq-btn-height-lg: 40px; --jq-btn-padding: 5px 16px; --jq-btn-padding-lg: 7px 20px; /* 输入框 */ --jq-input-height: 32px; --jq-input-padding: 5px 12px; /* 表格行高 */ --jq-table-row-compact: 38px; --jq-table-row-regular: 46px; --jq-table-row-spacious: 54px; /* 侧边栏 */ --jq-sidebar-width: 200px; --jq-sidebar-width-collapsed: 64px; /* 顶部导航 */ --jq-topbar-height: 52px; --jq-tabbar-height: 36px; /* 抽屉宽度 */ --jq-drawer-sm: 500px; --jq-drawer-md: 860px; --jq-drawer-lg: 1200px; --jq-drawer-header-height: 64px; --jq-drawer-footer-height: 56px; /* 标签 */ --jq-tag-height: 22px; --jq-tag-padding: 1px 8px; /* 图标 */ --jq-icon-size: 20px; --jq-icon-compact: 16px; --jq-icon-large: 24px; /* ═══════════════════════════════════════════════ 7. 图表配色（ECharts用） ═══════════════════════════════════════════════ */ --jq-chart-1: #3E87F8; /* 主蓝 */ --jq-chart-2: #18C6C9; /* 青碧 */ --jq-chart-3: #F7BA1E; /* 黄金 */ --jq-chart-4: #F77234; /* 活橙 */ --jq-chart-5: #04B486; /* 翠绿 */ --jq-chart-6: #8D4EDA; /* 紫罗 */ --jq-chart-7: #F5319D; /* 品红 */ --jq-chart-8: #9FDB1D; /* 草绿 */ --jq-chart-9: #C9CDD4; /* 中性灰 */ --jq-chart-10:#F53F3F; /* 危险红 */ /* 动画 */ --jq-transition: 0.15s ease; --jq-drawer-transition: 280ms ease-out; } /* ═══════════════════════════════════════════════ 8. 全局基础样式 ═══════════════════════════════════════════════ */ /* 字体 */ body { font-family: var(--jq-font-family); font-size: var(--jq-fs-label); line-height: 1.5; color: var(--jq-text-emphasis); background: var(--jq-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 焦点环 — 所有可聚焦元素 */ input:focus, select:focus, textarea:focus, button:focus-visible { outline: none; box-shadow: var(--jq-focus-ring); } /* ═══════════════════════════════════════════════ 9. 通用组件类（可选引入） ═══════════════════════════════════════════════ */ /* ── 按钮 ── */ .jq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--jq-btn-height); padding: var(--jq-btn-padding); border-radius: var(--jq-radius-sm); font-size: var(--jq-fs-body); font-weight: var(--jq-fw-regular); line-height: 1; border: none; cursor: pointer; transition: background var(--jq-transition), color var(--jq-transition), border-color var(--jq-transition); } .jq-btn-lg { height: var(--jq-btn-height-lg); padding: var(--jq-btn-padding-lg); border-radius: var(--jq-radius-md); } .jq-btn-primary { background: var(--jq-primary); color: var(--jq-text-reverse); } .jq-btn-primary:hover { background: var(--jq-primary-hover); } .jq-btn-primary:active { background: var(--jq-primary-active); } .jq-btn-primary:disabled { background: var(--jq-primary-disabled); cursor: not-allowed; } .jq-btn-secondary { background: rgba(0,0,0,0.06); color: var(--jq-text-emphasis); } .jq-btn-secondary:hover { background: rgba(0,0,0,0.10); } .jq-btn-secondary:active { background: rgba(0,0,0,0.16); } .jq-btn-secondary:disabled { color: var(--jq-text-disabled); cursor: not-allowed; } .jq-btn-outline { background: transparent; border: 1px solid var(--jq-primary); color: var(--jq-primary); } .jq-btn-outline:hover { background: var(--jq-primary-bg-light); border-color: var(--jq-primary-hover); color: var(--jq-primary-hover); } .jq-btn-outline:active { background: var(--jq-primary-bg-strong); border-color: var(--jq-primary-active); color: var(--jq-primary-active); } .jq-btn-text { background: transparent; color: var(--jq-primary); padding: 5px 8px; } .jq-btn-text:hover { background: var(--jq-primary-bg-light); color: var(--jq-primary-hover); } .jq-btn-text:active { background: var(--jq-primary-bg-strong); color: var(--jq-primary-active); } .jq-btn-danger-text { background: transparent; color: var(--jq-danger); padding: 5px 8px; } .jq-btn-danger-text:hover { background: rgba(245,63,63,0.06); } /* ── 输入框 ── */ .jq-input { height: var(--jq-input-height); padding: var(--jq-input-padding); border: 1px solid var(--jq-border); border-radius: var(--jq-radius-sm); background: var(--jq-bg-card); font-size: var(--jq-fs-label); color: var(--jq-text-emphasis); transition: border-color var(--jq-transition); width: 100%; } .jq-input::placeholder { color: var(--jq-text-aux); } .jq-input:hover { border-color: var(--jq-primary); } .jq-input:focus { border-color: var(--jq-primary); box-shadow: var(--jq-focus-ring); outline: none; } .jq-input:disabled { background: var(--jq-bg-input-disabled); color: var(--jq-text-aux); } .jq-input-error { border-color: var(--jq-danger) !important; } /* ── 卡片 ── */ .jq-card { background: var(--jq-bg-card); border-radius: var(--jq-radius-lg); box-shadow: var(--jq-shadow-card); padding: var(--jq-space-lg); } .jq-card-title { font-size: var(--jq-fs-h2); font-weight: var(--jq-fw-medium); color: var(--jq-text-emphasis); margin-bottom: var(--jq-space-md); } /* ── 标签/Tag ── */ .jq-tag { display: inline-flex; align-items: center; height: var(--jq-tag-height); padding: var(--jq-tag-padding); border-radius: var(--jq-radius-sm); font-size: var(--jq-fs-small); line-height: 1; } .jq-tag-info { background: var(--jq-info-bg); color: var(--jq-info); } .jq-tag-success { background: var(--jq-success-bg); color: var(--jq-success); } .jq-tag-warning { background: var(--jq-warning-bg); color: var(--jq-warning); } .jq-tag-caution { background: var(--jq-caution-bg); color: var(--jq-caution); } .jq-tag-danger { background: var(--jq-danger-bg); color: var(--jq-danger); } .jq-tag-neutral { background: rgba(0,0,0,0.06); color: var(--jq-text-body); } /* ── 表格 ── */ .jq-table { width: 100%; border-collapse: collapse; font-size: var(--jq-fs-body); } .jq-table th { background: var(--jq-bg-table-header); color: var(--jq-text-body); font-weight: var(--jq-fw-medium); font-size: var(--jq-fs-body); text-align: left; padding: 0 var(--jq-space-md); height: var(--jq-table-row-regular); border-bottom: 1px solid var(--jq-border); border-right: 1px solid var(--jq-border); } .jq-table th:last-child { border-right: none; } .jq-table td { color: var(--jq-text-emphasis); font-weight: var(--jq-fw-regular); padding: 0 var(--jq-space-md); height: var(--jq-table-row-regular); border-bottom: 1px solid var(--jq-border); border-right: 1px solid var(--jq-border); vertical-align: middle; } .jq-table td:last-child { border-right: none; } .jq-table tr:last-child td { border-bottom: none; } .jq-table tbody tr:hover td { background: rgba(62,135,248,0.04); } /* ========================================================= v2.1.2 引用与推理标注（#15） AI 回答中 [来源: xxx] 渲染为蓝色标签、[推理] 渲染为橙色标签 ========================================================= */ .jq-cite-tag { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 8px; border-radius: var(--jq-radius-sm, 2px); font-size: 12px; line-height: 1; vertical-align: middle; margin: 0 2px; white-space: nowrap; font-weight: 500; letter-spacing: .02em; } .jq-cite-source { background: var(--jq-info-bg, rgba(62,135,248,0.10)); color: var(--jq-info, #3E87F8); } .jq-cite-inference { background: var(--jq-warning-bg, rgba(255,137,15,0.10)); color: var(--jq-warning, #FF890F); } .jq-cite-legend .jq-cite-tag { margin-right: 4px; }