u

code/g3soft-erp/web/src/styles/global.scss

@@ -0,0 +1,122 @@
+// 全局基础样式：reset + 根容器布局。
+// 业务样式一律写在各自 .vue 的 scoped 块里，这里只放全应用级的东西。
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--g3-font-family, system-ui, -apple-system, 'Segoe UI', sans-serif);
+  font-size: var(--g3-font-size-base, 14px);
+  color: var(--g3-color-text, #1f2329);
+  background-color: var(--g3-color-bg, #f5f6f8);
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+// 路由切换进度条配色跟随 token
+#nprogress .bar {
+  background: var(--g3-color-primary, #165dff) !important;
+}
+
+// ---------------------------------------------------------------------------
+// 偏好设置驱动的 CSS 变量
+//
+// 这些变量由 src/preferences/update-css-variables.ts 写入 :root，
+// 这里只提供「默认值」，保证首屏偏好未生效前也有正确的观感。
+// ---------------------------------------------------------------------------
+
+:root {
+  --g3-color-success: hsl(144 57% 58%);
+  --g3-color-warning: hsl(42 84% 61%);
+  --g3-color-danger: hsl(348 100% 61%);
+  --g3-radius-base: 0.5rem;
+  --g3-font-size-base: 14px;
+
+  // 布局尺寸（布局组件读这些值）
+  --g3-sidebar-width: 224px;
+  --g3-sidebar-collapse-width: 60px;
+  --g3-header-height: 50px;
+  --g3-content-padding: 16px;
+
+  // 语义色（浅色，HSL 对齐 vben 的 design-tokens/default.css）
+  --g3-color-text: #1f2329; // foreground: 210 6% 21%
+  --g3-color-text-secondary: #4e5969;
+  --g3-color-text-tertiary: #86909c;
+  --g3-color-bg: #f5f6f8; // background-deep: 216 20.11% 95.47%
+  --g3-color-bg-container: #fff; // background: 0 0% 100%
+  --g3-color-border: #e5e6eb; // border: 240 5.9% 90%
+  --g3-color-fill-hover: #f2f3f5;
+  --g3-color-primary-bg: #e8f3ff;
+
+  // 布局专用（对齐 vben：accent / accent-hover / foreground / sidebar / header）
+  --g3-color-accent: #f2f3f5; // accent: 240 5% 96%
+  --g3-color-accent-hover: #e3e5e8; // accent-hover: 200 10% 90%
+  --g3-color-foreground: #373c43; // foreground: 210 6% 21%
+  --g3-color-sidebar: #fff; // sidebar: 0 0% 100%
+  --g3-color-header: #fff; // header: 0 0% 100%
+
+  // 主色半透明底（页签激活态 / 选中项背景）：vben 的 primary/15
+  --g3-color-primary-soft: hsl(212 100% 45% / 15%);
+}
+
+// 深色模式：偏好设置 mode 为 dark（或 auto 且系统深色）时给 html 加 .dark
+.dark {
+  --g3-color-text: #f7f8fa; // foreground: 0 0% 95%
+  --g3-color-text-secondary: #c9cdd4;
+  --g3-color-text-tertiary: #86909c;
+  --g3-color-bg: #17171a; // background-deep: 220 13.06% 9%
+  --g3-color-bg-container: #1d1e1f; // background: 222.34 10.43% 12.27%
+  --g3-color-border: #2e3238; // border: 240 3.7% 22%
+  --g3-color-fill-hover: #2e2e30;
+  --g3-color-primary-bg: #1d2b4d;
+
+  // 布局专用（对齐 vben dark.css）
+  --g3-color-accent: #27292c; // accent: 216 5% 19%
+  --g3-color-accent-hover: #33363a; // accent-hover: 216 5% 24%
+  --g3-color-foreground: #f2f3f5; // foreground: 0 0% 95%
+  --g3-color-sidebar: #1d1e1f; // sidebar: 222.34 10.43% 12.27%
+  --g3-color-header: #1d1e1f; // header: 222.34 10.43% 12.27%
+  --g3-color-primary-soft: hsl(212 100% 45% / 20%);
+
+  body {
+    color: var(--g3-color-text);
+    background-color: var(--g3-color-bg);
+  }
+}
+
+// 灰色模式（哀悼日等场景）
+.grayscale-mode {
+  filter: grayscale(100%);
+}
+
+// 色弱模式
+.invert-mode {
+  filter: invert(80%);
+}
+
+// 半深色顶栏 / 侧栏：仅浅色模式下由偏好开启
+.semi-dark-header .layout-header {
+  color: #f7f8fa;
+  background: #1d2129;
+  border-bottom-color: #2e3238;
+}
+
+.semi-dark-sidebar .layout-sidebar {
+  background: #1d2129;
+  border-right-color: #2e3238;
+}

code/g3soft-erp/web/src/styles/index.scss

@@ -0,0 +1,10 @@
+// 样式入口 —— 全应用只在这里引入一次，顺序不能变。
+//
+// 1) tokens 的 CSS 产物（:root 变量），必须在最前
+// 2) @g3soft/ui 的组件样式
+// 3) 本应用全局样式与 reset
+
+@use '@g3soft/tokens';
+@use '@g3soft/ui/style.css';
+
+@use './global';

code/g3soft-erp/web/src/styles/variables.scss

@@ -0,0 +1,3 @@
+// 供各 .vue / 局部 scss 使用：只转发变量与 mixin，不 emit 任何 CSS。
+// 需要 :root 变量的场景请用 '@g3soft/tokens'（全局只引一次）。
+@forward '@g3soft/tokens/scss';