/* ============================================================================= * SRM 设计系统 · 设计令牌 —— public/assets/theme.css * ----------------------------------------------------------------------------- * 这一层只做一件事：**定义变量**。不含任何组件选择器的具体样式。 * 组件样式在 public/assets/components.css；现存业务样式在 public/spa/common.css。 * * 加载顺序（见 app/Helpers/assets.php::spa_assets）： * vendor/element-plus/index.css ← Element Plus 自身 * assets/theme.css ← 本文件：令牌 + EP 变量覆盖 + 深色模式 * assets/components.css ← 通用组件 * spa/common.css ← 业务组件 * spa/sidebar.css ← 框架层（侧栏/顶栏/页面容器） * * ============================================================================= * 为什么用 CSS 变量而不是 SCSS * ----------------------------------------------------------------------------- * 项目是**免构建**的：没有 npm、没有打包器，CSS 由浏览器直接加载。 * SCSS 需要编译步骤，会打破这个前提。CSS 自定义属性（变量）在运行时 * 就能被 JS 改写 —— 这正是"后台改颜色即时生效"能实现的原因： * JS 只要 setProperty('--el-color-primary', '#xxx') 即可，无需重新编译。 * * ============================================================================= * 改色的两条路径（不要混） * ----------------------------------------------------------------------------- * 1. 出厂默认值 → 改本文件的 :root 块 * 2. 管理员自定义 → 后台「站点设置 → 站点与外观」的取色器 * 保存后由 common.js 的 applyTheme() 以**内联变量**写到 上。 * 内联样式优先级高于本文件的选择器，因此会覆盖出厂值。 * ========================================================================== */ /* ============================================================================= * 一、设计令牌（Design Tokens） * ========================================================================== */ :root { /* ------------------------------------------------------------------------- * 1.1 品牌与语义色 * ---------------------------------------------------------------------- */ --srm-primary: #2563EB; --srm-success: #10B981; --srm-warning: #F59E0B; --srm-danger: #EF4444; --srm-info: #6B7280; /* 主色的浅色/深色派生。 这几个值会被 applyTheme() 按后台主色重算并覆盖， 这里给出默认主色 #2563EB 对应的值，保证 JS 未执行时也是对的。 */ --srm-primary-light-3: #7ba1f3; --srm-primary-light-5: #92b1f5; --srm-primary-light-7: #bdd0f9; --srm-primary-light-8: #d3e0fb; --srm-primary-light-9: #e9effd; --srm-primary-dark-2: #1d4fbc; /* 极浅的品牌底色：用于侧栏选中态、表头、标签背景 */ --srm-primary-soft: #e9effd; /* ------------------------------------------------------------------------- * 1.2 中性色阶 * ---------------------------------------------------------------------- */ --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; /* 语义化中性色（用它们，不要直接写 --gray-*） */ --srm-page-bg: #F7F8FA; /* 内容区背景 */ --srm-card-bg: #FFFFFF; /* 卡片背景 */ --srm-text: var(--gray-800); /* 正文 */ --srm-text-strong: var(--gray-900); /* 标题 */ --srm-text-muted: var(--gray-500); /* 辅助说明 */ --srm-text-faint: var(--gray-400); /* 占位、禁用 */ --srm-border: var(--gray-200); /* 常规描边 */ --srm-border-light: var(--gray-100); /* 更浅的分隔线 */ --srm-hover-bg: var(--gray-50); /* 行悬停 */ /* ------------------------------------------------------------------------- * 浅灰填充底色（"块状"元素用） * * 用途：面包屑标贴、标签底、分组标题等需要"淡底 + 无描边"的小块。 * 与 --srm-hover-bg 的区别：hover 是交互态（更深、带强调）， * 这里是**静态底色**，用来把零散文字聚成一个个可辨认的块。 * * ★ 为什么单独建令牌而不是在样式里写死 #f2f3f5 * 深色模式下写死的浅灰会变成刺眼的亮块。有了令牌， * 深色模式只需在下面覆盖一次（见 :root[data-theme="dark"] 一节）。 * ---------------------------------------------------------------------- */ --srm-fill-2: var(--gray-100); /* 一般填充（面包屑父级标贴等） */ --srm-fill-3: var(--gray-200); /* 强调填充（当前页标贴、hover 态） */ /* ------------------------------------------------------------------------- * 1.3 圆角 * * ★ 全站取消圆角（业务要求："按钮、输入框取消圆角，整体呈现商务风格"） * * 原先按钮/输入框 8px、卡片 12px、标签 6px —— 是"消费级 App"的观感。 * 商务/管理后台更常见的是**直角**：表格、表单、按钮边界清晰， * 一行行对齐时不会因为圆角出现视觉缺口。 * * 所以这里把**控件类**令牌统一归零，而不是逐个组件写 border-radius:0 —— * 逐个写会漏（本项目圆角散落在 4 个 CSS、70 多处）， * 改令牌才是单一来源；下面仍有少量组件级覆盖，用于压过 * Element Plus 自带的按组件圆角。 * * ★ 为什么保留 --radius-avatar 的全圆 * 那是**头像**，不是控件。方形头像框反而不像头像； * 同理保留状态圆点、进度条端点的圆角（它们是"点/条"，不是"框"）。 * ---------------------------------------------------------------------- */ --radius-card: 0; --radius-btn: 0; --radius-input: 0; --radius-tag: 0; --radius-avatar: 9999px; /* 头像仍为全圆（它不是控件） */ --radius-sm: 0; /* ------------------------------------------------------------------------- * 1.4 阴影（三层） * ---------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04); --shadow-md: 0 4px 12px rgba(0, 0, 0, .06); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .10); /* 兼容别名：早期代码里用过 --srm-shadow-* 的写法 */ --srm-shadow-sm: var(--shadow-sm); --srm-shadow-md: var(--shadow-md); --srm-shadow-lg: var(--shadow-lg); /* ------------------------------------------------------------------------- * 1.5 间距（基准 4px） * ---------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; /* 卡片内边距 */ --sp-6: 24px; --sp-8: 32px; /* ------------------------------------------------------------------------- * 1.6 字体与行高 * ---------------------------------------------------------------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-h1: 24px; /* 页面主标题 */ --fs-h2: 20px; /* 区块标题 */ --fs-h3: 18px; /* 卡片标题 */ --fs-body: 14px; /* 正文 */ --fs-sm: 13px; --fs-xs: 12px; /* 辅助文字 */ --lh-base: 1.6; /* 布局尺寸 */ --srm-sidebar-w: 232px; --srm-sidebar-w-collapsed: 64px; --srm-header-h: 56px; --srm-tabbar-h: 40px; --srm-transition: .2s cubic-bezier(.4, 0, .2, 1); /* ------------------------------------------------------------------------- * 1.7 框架层令牌（侧栏 / 顶栏 / 标签页） * ---------------------------------------------------------------------- * 侧栏固定用**深色**（即使浅色模式下也是），原因： * · 深色侧栏把视觉重心压到边缘，内容区更突出 * · 这是 SaaS 后台最常见的形态，用户认知成本低 * 因此这组值不属于"浅色/深色"两套配色，而是框架自身独立的一层。 * * 顶栏与标签页跟随页面模式，引用通用中性色令牌即可。 * ---------------------------------------------------------------------- */ --srm-aside-bg: #1F2D3D; --srm-aside-fg: #C9D3E0; /* 常规菜单项文字 */ --srm-aside-fg-strong: #FFFFFF; /* 悬停/强调 */ --srm-aside-hover: rgba(255, 255, 255, .07); --srm-aside-line: rgba(255, 255, 255, .09); /* 侧栏滚动条（深底上必须用浅色半透明，否则看不见） */ --srm-aside-scroll: rgba(255, 255, 255, .14); --srm-aside-scroll-hi: rgba(255, 255, 255, .24); /* * 深底 / 品牌色底上的前景色（文字与图标）。 * * ★ 为什么必须单独一个令牌，不能复用 --srm-card-bg * "卡片底色"和"深底上的前景色"在**浅色模式下恰好都是白**， * 于是很容易被误当成同一个东西合并掉。 * 但深色模式一来，card-bg 变成近黑 —— 深色侧栏上的白字 * 就跟着变成黑字，直接看不见了。 * 语义不同的颜色必须分开命名，哪怕它们的值暂时相同。 */ --srm-on-brand: #FFFFFF; /* 顶栏 */ --srm-header-bg: #FFFFFF; --srm-header-fg: var(--gray-800); --srm-header-fg-muted: var(--gray-500); --srm-header-hover: var(--gray-100); /* * 多标签页（顶栏下面那一排"当前打开的页面"） * * ★ 本轮按业务要求改成"与面包屑行融为一体" * * 业务原话："标签行与标签的底色使用与面包屑行相同的底色， * 并且标签行与面包屑融为一体。当该标贴选中的时候，显示与下面 * 页面底色相同的颜色。" * * 所以条带不再有自己的底色，直接复用顶栏的 --srm-header-bg； * 当前标签则复用内容区的 --srm-page-bg。 * 这两个值都由上面已定义的令牌给出，这里不再新增颜色 —— * 少一个令牌就少一处将来会走散的地方。 */ --srm-tab-fg: var(--gray-600); --srm-tab-fg-active: var(--srm-primary); --srm-tab-line: var(--gray-200); /* 保留：悬停/边界可能用到 */ /* 标签之间的竖线（按 0000.png：用 | 隔开每个标签） */ --srm-tab-divider-bg: var(--gray-200); } /* ============================================================================= * 二、覆盖 Element Plus 的 CSS 变量 * ----------------------------------------------------------------------------- * Element Plus 2.x 全量使用 CSS 变量，覆盖这些变量即可整体换肤， * 不需要 SCSS、不需要重新构建 —— 这是本项目能做"后台改色即时生效"的基础。 * * ⚠️ 只覆盖变量，不覆盖组件类选择器。 * 直接改 .el-button { ... } 会和 EP 自身样式打架（特异性相同，看加载顺序）， * 而且 EP 升级后容易失效。变量是官方提供的定制入口。 * ========================================================================== */ :root { /* --- 主色及其派生 --- */ --el-color-primary: var(--srm-primary); --el-color-primary-light-3: var(--srm-primary-light-3); --el-color-primary-light-5: var(--srm-primary-light-5); --el-color-primary-light-7: var(--srm-primary-light-7); --el-color-primary-light-8: var(--srm-primary-light-8); --el-color-primary-light-9: var(--srm-primary-light-9); --el-color-primary-dark-2: var(--srm-primary-dark-2); /* --- 语义色（EP 的名字是 success/warning/danger/error/info）--- 注意 EP 用 error 而不是 danger，两者都要给。 */ --el-color-success: var(--srm-success); --el-color-success-light-3: #58cfa6; --el-color-success-light-5: #87dcbe; --el-color-success-light-7: #b7ead6; --el-color-success-light-8: #cff1e6; --el-color-success-light-9: #e7f8f3; --el-color-success-dark-2: #0d9467; --el-color-warning: var(--srm-warning); --el-color-warning-light-3: #f8b955; --el-color-warning-light-5: #fac97f; --el-color-warning-light-7: #fcdcb2; --el-color-warning-light-8: #fde6c8; --el-color-warning-light-9: #fef3e6; --el-color-warning-dark-2: #c47f08; --el-color-danger: var(--srm-danger); --el-color-danger-light-3: #f4726f; --el-color-danger-light-5: #f79b99; --el-color-danger-light-7: #fac4c2; --el-color-danger-light-8: #fcd9d8; --el-color-danger-light-9: #fdecec; --el-color-danger-dark-2: #bf3636; --el-color-error: var(--srm-danger); --el-color-error-light-3: #f4726f; --el-color-error-light-5: #f79b99; --el-color-error-light-7: #fac4c2; --el-color-error-light-8: #fcd9d8; --el-color-error-light-9: #fdecec; --el-color-error-dark-2: #bf3636; --el-color-info: var(--srm-info); --el-color-info-light-3: #9ca3af; --el-color-info-light-5: #b8bcc4; --el-color-info-light-7: #d3d6da; --el-color-info-light-8: #e0e2e5; --el-color-info-light-9: #f0f1f2; --el-color-info-dark-2: #565b63; /* --- 文字 --- */ --el-text-color-primary: var(--srm-text-strong); --el-text-color-regular: var(--srm-text); --el-text-color-secondary: var(--srm-text-muted); --el-text-color-placeholder: var(--srm-text-faint); --el-text-color-disabled: var(--gray-300); /* --- 边框 --- */ --el-border-color: var(--srm-border); --el-border-color-light: var(--srm-border-light); --el-border-color-lighter: var(--srm-border-light); --el-border-color-extra-light: var(--gray-100); --el-border-color-dark: var(--gray-300); --el-border-color-darker: var(--gray-400); /* --- 填充（hover 底色等）--- */ --el-fill-color: var(--gray-100); --el-fill-color-light: var(--gray-50); --el-fill-color-lighter: var(--gray-50); --el-fill-color-blank: var(--srm-card-bg); /* --- 背景 --- */ --el-bg-color: var(--srm-card-bg); --el-bg-color-page: var(--srm-page-bg); --el-bg-color-overlay: var(--srm-card-bg); /* --- 圆角（全站直角，见 1.3 的说明）--- */ --el-border-radius-base: 0; --el-border-radius-small: 0; /* * round / circle 保持原样：它们对应"全圆"（如 el-avatar、圆形按钮）， * 归零会让头像变成方块。需要直角的控件由下面的组件级覆盖处理。 */ --el-border-radius-round: 9999px; --el-border-radius-circle: 100%; /* --- 阴影 --- */ --el-box-shadow: var(--shadow-md); --el-box-shadow-light: var(--shadow-sm); --el-box-shadow-lighter: var(--shadow-sm); --el-box-shadow-dark: var(--shadow-lg); /* --- 字体 --- */ --el-font-family: var(--font-sans); --el-font-size-base: var(--fs-body); --el-font-size-small: var(--fs-sm); --el-font-size-extra-small: var(--fs-xs); /* --- 组件尺寸：略微放松默认高度，观感更"专业级" --- */ --el-component-size: 34px; --el-component-size-large: 38px; --el-component-size-small: 30px; /* --- 过渡 --- */ --el-transition-duration: .2s; --el-transition-duration-fast: .15s; /* --- 禁用态：EP 默认偏灰，这里与中性色阶对齐 --- */ --el-disabled-bg-color: var(--gray-100); --el-disabled-text-color: var(--gray-400); --el-disabled-border-color: var(--gray-200); } /* ============================================================================= * 三、全局基础样式 * ========================================================================== */ html { /* 让 rem / 百分比高度计算有个稳定基准 */ height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-base); color: var(--srm-text); background: var(--srm-page-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 标题层级（规范：18/20/24） */ h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.35; color: var(--srm-text-strong); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } a { color: var(--srm-primary); text-decoration: none; } a:hover { color: var(--srm-primary-dark-2); } /* 数字类内容用等宽数字，避免跳动（KPI 卡、表格数值列） */ .srm-num, .srm-kpi__value, .el-table td .cell.srm-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* 滚动条：细一点，颜色与设计规范一致 */ * { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 9999px; } *::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } /* ============================================================================= * 四、深色模式 * ----------------------------------------------------------------------------- * 实现方式： 时重新赋值**同一批变量**。 * 因为所有组件都只引用变量、不写死颜色，所以一处切换全局生效。 * * ⚠️ 深色模式必须放在最后：它要覆盖前面 :root 的定义， * 而选择器 html[data-theme="dark"] 的特异性(0,1,1)高于 :root(0,1,0)， * 即使顺序靠前也能生效 —— 但放最后更直观、更易维护。 * * 另：EP 自己有一套 --el-* 深色变量（在 html.dark 下）， * 这里不启用它的内置深色主题（那份配色与本项目规范不一致）， * 而是自己定义一套，保证深色下仍是"品牌蓝 + 中性灰"。 * ========================================================================== */ html[data-theme="dark"] { /* --- 中性色阶整体反转（灰阶语义在深色下要重新映射）--- */ --gray-50: #1B1F27; --gray-100: #232833; --gray-200: #2E3440; --gray-300: #3B4250; --gray-400: #6B7280; --gray-500: #9CA3AF; --gray-600: #B8BEC9; --gray-700: #CBD1DA; --gray-800: #E3E6EB; --gray-900: #F3F5F8; /* --- 语义化中性色 --- */ --srm-page-bg: #14171E; /* 比卡片更深，形成层次 */ --srm-card-bg: #1B1F27; --srm-text: #E3E6EB; --srm-text-strong: #F3F5F8; --srm-text-muted: #9CA3AF; --srm-text-faint: #6B7280; --srm-border: #2E3440; --srm-border-light: #262B35; --srm-hover-bg: #232833; /* * 浅灰填充：深色下不能沿用浅色主题的 gray-100/200 * （那是接近白的色，会变成刺眼亮块）。 * 这里改成比卡片略亮的深灰，"块"依然可见但不跳。 */ --srm-fill-2: #262B35; --srm-fill-3: #303643; /* --- 阴影：深色下靠"更黑"而不是"更深"来体现层次 --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30); --shadow-md: 0 4px 12px rgba(0, 0, 0, .40); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55); /* --- 主色在深色下要提亮，否则蓝在暗背景上发闷、可读性差 --- */ --srm-primary-light-3: #6f95f0; --srm-primary-light-5: #8fadf4; --srm-primary-light-7: #b9cdf8; --srm-primary-light-8: #cfdcfa; --srm-primary-light-9: #1e2a44; /* 深色下的"极浅底色"其实是深蓝 */ --srm-primary-soft: #1e2a44; /* --- 语义色在深色下同样提亮 --- */ --el-color-success-light-9: #12291f; --el-color-warning-light-9: #2b2113; --el-color-danger-light-9: #2c1919; --el-color-error-light-9: #2c1919; --el-color-info-light-9: #212429; /* --- 覆盖 Element Plus 变量 --- */ --el-text-color-primary: var(--srm-text-strong); --el-text-color-regular: var(--srm-text); --el-text-color-secondary: var(--srm-text-muted); --el-text-color-placeholder: var(--srm-text-faint); --el-text-color-disabled: var(--gray-400); --el-border-color: var(--srm-border); --el-border-color-light: var(--srm-border-light); --el-border-color-lighter: var(--srm-border-light); --el-border-color-extra-light: var(--srm-border-light); --el-fill-color: var(--gray-100); --el-fill-color-light: var(--gray-50); --el-fill-color-lighter: var(--gray-50); --el-fill-color-blank: var(--srm-card-bg); --el-fill-color-dark: var(--gray-200); --el-fill-color-darker: var(--gray-300); --el-bg-color: var(--srm-card-bg); --el-bg-color-page: var(--srm-page-bg); --el-bg-color-overlay: #232833; /* 弹窗/下拉要比卡片再亮一档 */ --el-mask-color: rgba(0, 0, 0, .65); --el-disabled-bg-color: var(--gray-100); --el-disabled-text-color: var(--gray-400); --el-disabled-border-color: var(--gray-200); /* --- 框架层：深色模式下顶栏/标签页要跟着变深 --- 侧栏本来就是深色，保持原样（--srm-aside-* 不重新赋值）—— 深色模式下侧栏与内容区都用深色，但侧栏更深一档， 靠这个明度差维持"导航层 / 内容层"的层次。 */ --srm-header-bg: #1B1F27; --srm-header-fg: var(--gray-800); --srm-header-fg-muted: var(--gray-500); --srm-header-hover: var(--gray-100); --srm-tab-bg: #1B1F27; --srm-tab-fg: var(--gray-500); --srm-tab-fg-active: var(--srm-primary); --srm-tab-active-bg: #232833; --srm-tab-line: var(--gray-200); } /* 深色下图片/图标不要过亮刺眼 */ html[data-theme="dark"] img { /* 仅对纯图标类图片降亮度，照片类由具体组件自行决定 */ color-scheme: dark; } /* 让原生控件（滚动条、表单控件）跟随深色 */ html[data-theme="dark"] { color-scheme: dark; } html { color-scheme: light; } /* ============================================================================= * 五、动效偏好 * ----------------------------------------------------------------------------- * 尊重系统的"减少动态效果"设置：用户在操作系统里关掉动画后， * 这里把所有过渡压到接近 0 —— 滚动/淡入会引起前庭不适，这是无障碍要求。 * ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }