/* ============================================================ 山风设计系统 · 设计令牌（Design Tokens） ============================================================ 来源： 主：sms.shanfeng.wang/frontend/src/App.vue 次：appoint.shanfeng.wang/frontend/src/App.vue 两站的全局样式经比对后完全一致（343 行 / 61 个选择器 / 变量逐字相同）， 本文件即该规范的单一事实来源（Single Source of Truth）。 用法： 然后直接用 var(--sf-accent) 等变量，或配合 theme.css 使用。 命名规范： --sf-* 语义令牌（推荐新项目使用） --sf-rgb-* 需要 alpha 通道时用（如 rgba(var(--sf-rgb-accent), .12)） ============================================================ */ :root { /* ---------- 品牌主色 ---------- */ --sf-primary: #2c3e50; /* 深板岩：标题 / 主要文字 */ --sf-primary-light: #3a506b; --sf-accent: #3b82f6; /* 主色蓝 */ --sf-accent-dark: #2563eb; --sf-accent-light: #60a5fa; --sf-accent-gradient: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); --sf-accent-gradient-hover: linear-gradient(135deg, #1d4ed8 0%, #3730a3 100%); --sf-accent-rgb: 59, 130, 246; /* ---------- 语义色（与按钮渐变保持一致） ---------- */ --sf-success: #059669; --sf-success-dark: #047857; --sf-success-gradient: linear-gradient(135deg, #059669 0%, #047857 100%); --sf-success-gradient-hover: linear-gradient(135deg, #047857 0%, #065f46 100%); --sf-success-rgb: 5, 150, 105; --sf-warning: #d97706; --sf-warning-dark: #b45309; --sf-warning-gradient: linear-gradient(135deg, #d97706 0%, #b45309 100%); --sf-warning-gradient-hover: linear-gradient(135deg, #b45309 0%, #92400e 100%); --sf-warning-rgb: 217, 119, 6; --sf-danger: #dc2626; --sf-danger-dark: #b91c1c; --sf-danger-gradient: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); --sf-danger-gradient-hover: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%); --sf-danger-rgb: 220, 38, 38; --sf-info: #475569; --sf-info-dark: #334155; --sf-info-gradient: linear-gradient(135deg, #475569 0%, #334155 100%); --sf-info-rgb: 71, 85, 105; /* ---------- 侧边栏 ---------- */ --sf-sidebar-bg: #ffffff; --sf-sidebar-active: #eff6ff; --sf-sidebar-text: #64748b; --sf-sidebar-text-active: #3b82f6; --sf-sidebar-width: 230px; --sf-sidebar-logo-height: 68px; /* ---------- 表面与边框 ---------- */ --sf-card-bg: #ffffff; --sf-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03); --sf-card-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.06); --sf-border-light: #e8ecf1; --sf-border-lighter: #f0f2f5; --sf-bg-page: #f5f6f8; /* ---------- 文字层级 ---------- */ --sf-text-primary: #2c3e50; --sf-text-secondary: #64748b; --sf-text-muted: #94a3b8; --sf-text-inverse: #ffffff; /* ---------- 圆角 ---------- */ --sf-radius-card: 14px; --sf-radius-input: 10px; --sf-radius-btn: 10px; --sf-radius-dialog: 16px; --sf-radius-table: 10px; --sf-radius-tag: 6px; --sf-radius-icon: 10px; /* ---------- 动效 ---------- */ --sf-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* ---------- 栏目切换栏（Tabs / Segmented） ---------- 规范来源：sms.shanfeng.wang 内页「系统设置」的栏目切换栏。 两站（sms / appoint）逐字一致，此处固化为唯一事实来源。 */ --sf-tab-font-size: 14px; /* 栏目文字 */ --sf-tab-font-weight: 500; --sf-tab-color: #64748b; /* 未选中：次文字色 */ --sf-tab-color-active: #3b82f6; /* 选中：主色 */ --sf-tab-underline-height: 3px; /* 底部指示条厚度 */ --sf-tab-underline-radius: 2px; /* 指示条圆角 */ --sf-tab-gap: 24px; /* 栏目之间的间距 */ --sf-tab-padding-y: 10px; /* 栏目上下内边距 */ --sf-tab-border-color: #e8ecf1; /* 底边框（分隔线）颜色 */ /* ============================================================ 字号体系（与 sms / appoint 实测值一致） ------------------------------------------------------------ Element Plus 的 --el-font-size-base 是 14px， .el-button--small 是 12px。若项目自身有全局 `button { font-size: inherit }` 之类的重置， 按钮字号会沿继承链被放大 —— 请配合 theme.css 使用， 或确认自己的 reset 不覆盖按钮字号。 ============================================================ */ --sf-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif; --sf-font-mono: 'SF Mono', Consolas, Menlo, 'Courier New', monospace; --sf-font-size-xs: 11px; /* 极小：徽标 / 辅助标记 */ --sf-font-size-sm: 12px; /* 小号按钮 / 表格次要信息 */ --sf-font-size-md: 13px; /* 表头 / 标签 / 统计标签 */ --sf-font-size-base: 14px; /* 正文基准 / 常规按钮 */ --sf-font-size-lg: 15px; /* 稍大：登录页主按钮 */ --sf-font-size-xl: 16px; /* 卡片标题 / 对话框标题 */ --sf-font-size-2xl: 17px; /* 顶栏标题 / Logo 文字 */ --sf-font-size-3xl: 20px; /* 统计数字 */ --sf-font-size-4xl: 24px; /* 大标题 */ --sf-line-height: 1.6; --sf-line-height-tight: 1.35; --sf-font-weight-normal: 400; --sf-font-weight-medium: 500; --sf-font-weight-semibold: 600; --sf-font-weight-bold: 700; /* ============================================================ 布局尺寸 ============================================================ */ --sf-header-height: 64px; --sf-content-padding: 24px; --sf-header-padding: 0 28px; --sf-menu-item-padding: 11px 24px; --sf-menu-icon-size: 20px; /* ============================================================ Element Plus 变量覆盖 ------------------------------------------------------------ 让 EP 组件天然长成山风规范，不需要额外写覆盖样式。 ============================================================ */ --el-color-primary: #3b82f6; --el-color-primary-light-3: #60a5fa; --el-color-primary-light-5: #93c5fd; --el-color-primary-light-7: #bfdbfe; --el-color-primary-light-8: #dbeafe; --el-color-primary-light-9: #eff6ff; --el-color-primary-dark-2: #2563eb; --el-border-radius-base: 10px; --el-border-radius-small: 6px; --el-font-size-base: 14px; --el-font-size-small: 13px; --el-font-size-extra-small: 12px; --el-font-size-medium: 14px; --el-font-size-large: 14px; --el-text-color-primary: #2c3e50; --el-text-color-regular: #475569; --el-text-color-secondary: #64748b; --el-border-color: #e8ecf1; --el-border-color-light: #e8ecf1; --el-border-color-lighter: #f0f2f5; --el-fill-color-blank: #ffffff; --el-bg-color: #ffffff; --el-bg-color-page: #f5f6f8; }