-
+
+
+
diff --git a/code/fms/fms-vue/src/components/ui/ThemeToggle.vue b/code/fms/fms-vue/src/components/ui/ThemeToggle.vue
index 89425f94..f40424ca 100644
--- a/code/fms/fms-vue/src/components/ui/ThemeToggle.vue
+++ b/code/fms/fms-vue/src/components/ui/ThemeToggle.vue
@@ -1,6 +1,6 @@
diff --git a/code/fms/fms-vue/src/components/ui/button/button.vue b/code/fms/fms-vue/src/components/ui/button/button.vue
new file mode 100644
index 00000000..ec6d6dc3
--- /dev/null
+++ b/code/fms/fms-vue/src/components/ui/button/button.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
diff --git a/code/fms/fms-vue/src/components/ui/button/index.scss b/code/fms/fms-vue/src/components/ui/button/index.scss
new file mode 100644
index 00000000..d1f10152
--- /dev/null
+++ b/code/fms/fms-vue/src/components/ui/button/index.scss
@@ -0,0 +1,102 @@
+.button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ white-space: nowrap;
+ border: 1px solid transparent;
+ border-radius: var(--radius);
+ font-weight: 500;
+ line-height: 1;
+ height: 2.5rem;
+ padding: 0 1rem;
+ font-size: 0.875rem;
+ outline: none;
+ transition:
+ color 120ms ease,
+ background-color 120ms ease,
+ border-color 120ms ease,
+ transform 80ms ease;
+}
+
+.button:active:not(:disabled) {
+ transform: scale(0.985);
+}
+
+.button-default {
+ color: var(--primary-foreground);
+ background: var(--primary);
+}
+
+.button-default:hover {
+ background: var(--primary-hover);
+}
+
+.button-default:active {
+ background: var(--primary-active);
+}
+
+.button-secondary {
+ color: var(--secondary-foreground);
+ background: var(--secondary);
+}
+
+.button-secondary:hover,
+.button-ghost:hover {
+ background: var(--accent);
+ color: var(--accent-foreground);
+}
+
+.button-secondary:active,
+.button-ghost:active {
+ background: color-mix(in srgb, var(--accent) 88%, var(--foreground));
+ color: var(--accent-foreground);
+}
+
+.button-outline {
+ color: var(--foreground);
+ border-color: var(--input);
+ background: var(--background);
+}
+
+.button-outline:hover {
+ color: var(--accent-foreground);
+ background: var(--accent);
+}
+
+.button-outline:active {
+ color: var(--accent-foreground);
+ background: color-mix(in srgb, var(--accent) 88%, var(--foreground));
+}
+
+.button-ghost {
+ color: var(--foreground);
+ background: transparent;
+}
+
+.button-destructive {
+ color: var(--destructive-foreground);
+ background: var(--destructive);
+}
+
+.button-destructive:hover {
+ background: color-mix(in srgb, var(--destructive) 90%, var(--background));
+}
+
+.button-destructive:active {
+ background: color-mix(in srgb, var(--destructive) 80%, var(--background));
+}
+
+.button-link {
+ color: var(--primary);
+ background: transparent;
+ text-underline-offset: 4px;
+}
+
+.button-link:hover {
+ text-decoration: underline;
+}
+
+.button-link:active {
+ color: var(--primary-active);
+}
diff --git a/code/fms/fms-vue/src/composables/useTheme.js b/code/fms/fms-vue/src/composables/useTheme.js
deleted file mode 100644
index d3f62589..00000000
--- a/code/fms/fms-vue/src/composables/useTheme.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import { ref } from 'vue'
-
-const MODE_STORAGE_KEY = 'fms-theme'
-const COLOR_STORAGE_KEY = 'fms-color-theme'
-
-export const colorThemes = Object.freeze([
- { value: 'neutral', label: '中性', color: 'oklch(0.205 0 0)' },
- { value: 'blue', label: '蓝色', color: 'oklch(0.546 0.245 262.881)' },
- { value: 'green', label: '绿色', color: 'oklch(0.527 0.154 150.069)' },
- { value: 'violet', label: '紫色', color: 'oklch(0.496 0.265 301.924)' },
- { value: 'orange', label: '橙色', color: 'oklch(0.57 0.2 49.5)' },
- { value: 'red', label: '红色', color: 'oklch(0.506 0.232 25.7)' },
- { value: 'pink', label: '粉色', color: 'oklch(0.523 0.214 349.4)' },
- { value: 'teal', label: '青色', color: 'oklch(0.563 0.144 180)' },
-])
-
-const theme = ref('light')
-const colorTheme = ref('neutral')
-let initialized = false
-
-function isColorTheme(value) {
- return colorThemes.some((item) => item.value === value)
-}
-
-function applyTheme() {
- if (typeof document === 'undefined') return
-
- document.documentElement.dataset.theme = theme.value
- document.documentElement.dataset.colorTheme = colorTheme.value
- document.documentElement.style.colorScheme = theme.value
-}
-
-function readStorage(key) {
- try {
- return window.localStorage.getItem(key)
- } catch {
- return null
- }
-}
-
-function writeStorage(key, value) {
- try {
- window.localStorage.setItem(key, value)
- } catch {
- // The selected theme still applies when storage is unavailable.
- }
-}
-
-function initializeTheme() {
- if (initialized || typeof window === 'undefined') return
-
- initialized = true
- const storedTheme = readStorage(MODE_STORAGE_KEY)
- const storedColorTheme = readStorage(COLOR_STORAGE_KEY)
-
- theme.value = storedTheme === 'dark' ? 'dark' : 'light'
- colorTheme.value = isColorTheme(storedColorTheme) ? storedColorTheme : 'neutral'
- applyTheme()
-}
-
-function setTheme(value) {
- theme.value = value === 'dark' ? 'dark' : 'light'
- applyTheme()
-
- if (typeof window !== 'undefined') {
- writeStorage(MODE_STORAGE_KEY, theme.value)
- }
-}
-
-function setColorTheme(value) {
- colorTheme.value = isColorTheme(value) ? value : 'neutral'
- applyTheme()
-
- if (typeof window !== 'undefined') {
- writeStorage(COLOR_STORAGE_KEY, colorTheme.value)
- }
-}
-
-function toggleTheme() {
- setTheme(theme.value === 'dark' ? 'light' : 'dark')
-}
-
-initializeTheme()
-
-export function useTheme() {
- initializeTheme()
-
- return {
- theme,
- colorTheme,
- colorThemes,
- setTheme,
- setColorTheme,
- toggleTheme,
- }
-}
diff --git a/code/fms/fms-vue/src/main.js b/code/fms/fms-vue/src/main.js
index 49edf9ed..e6536bc9 100644
--- a/code/fms/fms-vue/src/main.js
+++ b/code/fms/fms-vue/src/main.js
@@ -1,8 +1,11 @@
import { createApp } from 'vue'
import '@fontsource-variable/noto-sans-sc/wght.css'
-import './style.css'
+import './styles/index.css'
import App from './App.vue'
import router from './router'
import 'stk-table-vue/lib/style.css'
+import { initTheme } from './theme/useTheme'
+
+initTheme()
createApp(App).use(router).mount('#app')
diff --git a/code/fms/fms-vue/src/style.css b/code/fms/fms-vue/src/style.css
deleted file mode 100644
index f0730762..00000000
--- a/code/fms/fms-vue/src/style.css
+++ /dev/null
@@ -1,384 +0,0 @@
-:root {
- --font-sans: 'Noto Sans SC Variable', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-
- --background: oklch(1 0 0);
- --foreground: oklch(0.145 0 0);
- --card: oklch(1 0 0);
- --card-foreground: oklch(0.145 0 0);
- --popover: oklch(1 0 0);
- --popover-foreground: oklch(0.145 0 0);
- --primary: oklch(0.205 0 0);
- --primary-foreground: oklch(0.985 0 0);
- --secondary: oklch(0.97 0 0);
- --secondary-foreground: oklch(0.205 0 0);
- --muted: oklch(0.97 0 0);
- --muted-foreground: oklch(0.556 0 0);
- --accent: oklch(0.97 0 0);
- --accent-foreground: oklch(0.205 0 0);
- --destructive: oklch(0.577 0.245 27.325);
- --destructive-foreground: oklch(0.985 0 0);
- --border: oklch(0.922 0 0);
- --input: oklch(0.922 0 0);
- --ring: oklch(0.708 0 0);
- --radius: 0.625rem;
-
- font-family: var(--font-sans);
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-
- line-height: 1.5;
- color: var(--foreground);
- background: var(--background);
-}
-
-:root[data-theme='dark'] {
- --background: oklch(0.145 0 0);
- --foreground: oklch(0.985 0 0);
- --card: oklch(0.205 0 0);
- --card-foreground: oklch(0.985 0 0);
- --popover: oklch(0.205 0 0);
- --popover-foreground: oklch(0.985 0 0);
- --primary: oklch(0.922 0 0);
- --primary-foreground: oklch(0.205 0 0);
- --secondary: oklch(0.269 0 0);
- --secondary-foreground: oklch(0.985 0 0);
- --muted: oklch(0.269 0 0);
- --muted-foreground: oklch(0.708 0 0);
- --accent: oklch(0.269 0 0);
- --accent-foreground: oklch(0.985 0 0);
- --destructive: oklch(0.704 0.191 22.216);
- --destructive-foreground: oklch(0.985 0 0);
- --border: oklch(1 0 0 / 10%);
- --input: oklch(1 0 0 / 15%);
- --ring: oklch(0.556 0 0);
-}
-
-:root[data-color-theme='blue'] {
- --primary: oklch(0.546 0.245 262.881);
- --primary-foreground: oklch(0.985 0 0);
- --ring: oklch(0.546 0.245 262.881);
-}
-
-:root[data-color-theme='green'] {
- --primary: oklch(0.527 0.154 150.069);
- --primary-foreground: oklch(0.985 0 0);
- --ring: oklch(0.527 0.154 150.069);
-}
-
-:root[data-color-theme='violet'] {
- --primary: oklch(0.496 0.265 301.924);
- --primary-foreground: oklch(0.985 0 0);
- --ring: oklch(0.496 0.265 301.924);
-}
-
-:root[data-color-theme='orange'] {
- --primary: oklch(0.57 0.2 49.5);
- --primary-foreground: oklch(0.985 0 0);
- --ring: oklch(0.57 0.2 49.5);
-}
-
-:root[data-color-theme='red'] {
- --primary: oklch(0.506 0.232 25.7);
- --primary-foreground: oklch(0.985 0 0);
- --ring: oklch(0.506 0.232 25.7);
-}
-
-:root[data-color-theme='pink'] {
- --primary: oklch(0.523 0.214 349.4);
- --primary-foreground: oklch(0.985 0 0);
- --ring: oklch(0.523 0.214 349.4);
-}
-
-:root[data-color-theme='teal'] {
- --primary: oklch(0.563 0.144 180);
- --primary-foreground: oklch(0.985 0 0);
- --ring: oklch(0.563 0.144 180);
-}
-
-:root[data-theme='dark'][data-color-theme='blue'] {
- --primary: oklch(0.623 0.214 259.815);
- --ring: oklch(0.623 0.214 259.815);
-}
-
-:root[data-theme='dark'][data-color-theme='green'] {
- --primary: oklch(0.596 0.145 163.225);
- --ring: oklch(0.596 0.145 163.225);
-}
-
-:root[data-theme='dark'][data-color-theme='violet'] {
- --primary: oklch(0.558 0.238 301.358);
- --ring: oklch(0.558 0.238 301.358);
-}
-
-:root[data-theme='dark'][data-color-theme='orange'] {
- --primary: oklch(0.643 0.215 41.5);
- --ring: oklch(0.643 0.215 41.5);
-}
-
-:root[data-theme='dark'][data-color-theme='red'] {
- --primary: oklch(0.577 0.245 27.325);
- --ring: oklch(0.577 0.245 27.325);
-}
-
-:root[data-theme='dark'][data-color-theme='pink'] {
- --primary: oklch(0.592 0.225 349.5);
- --ring: oklch(0.592 0.225 349.5);
-}
-
-:root[data-theme='dark'][data-color-theme='teal'] {
- --primary: oklch(0.627 0.124 180);
- --ring: oklch(0.627 0.124 180);
-}
-
-body {
- margin: 0;
- font-family: inherit;
- min-width: 320px;
- color: var(--foreground);
- background: var(--background);
- transition:
- color 160ms ease,
- background-color 160ms ease;
-}
-
-button,
-input,
-select,
-textarea {
- font: inherit;
-}
-
-button {
- cursor: pointer;
-}
-
-button:disabled {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
-.button {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: 0.5rem;
- white-space: nowrap;
- border: 1px solid transparent;
- border-radius: var(--radius);
- font-weight: 500;
- line-height: 1;
- outline: none;
- transition:
- color 120ms ease,
- background-color 120ms ease,
- border-color 120ms ease,
- box-shadow 120ms ease;
-}
-
-.button:focus-visible {
- box-shadow:
- 0 0 0 2px var(--background),
- 0 0 0 4px color-mix(in oklch, var(--ring) 50%, transparent);
-}
-
-.button-default {
- color: var(--primary-foreground);
- background: var(--primary);
-}
-
-.button-default:hover {
- background: color-mix(in oklch, var(--primary) 90%, var(--background));
-}
-
-.button-secondary {
- color: var(--secondary-foreground);
- background: var(--secondary);
-}
-
-.button-secondary:hover,
-.button-ghost:hover {
- background: var(--accent);
- color: var(--accent-foreground);
-}
-
-.button-outline {
- color: var(--foreground);
- border-color: var(--input);
- background: var(--background);
-}
-
-.button-outline:hover {
- color: var(--accent-foreground);
- background: var(--accent);
-}
-
-.button-ghost {
- color: var(--foreground);
- background: transparent;
-}
-
-.button-destructive {
- color: var(--destructive-foreground);
- background: var(--destructive);
-}
-
-.button-destructive:hover {
- background: color-mix(in oklch, var(--destructive) 90%, var(--background));
-}
-
-.button-link {
- color: var(--primary);
- background: transparent;
- text-underline-offset: 4px;
-}
-
-.button-link:hover {
- text-decoration: underline;
-}
-
-.button-size-sm {
- height: 2.25rem;
- padding: 0 0.75rem;
- font-size: 0.875rem;
-}
-
-.button-size-default {
- height: 2.5rem;
- padding: 0 1rem;
- font-size: 0.875rem;
-}
-
-.button-size-lg {
- height: 2.75rem;
- padding: 0 2rem;
-}
-
-.button-size-icon {
- width: 2.5rem;
- height: 2.5rem;
- padding: 0;
-}
-
-.app-shell {
- width: min(100% - 2rem, 72rem);
- min-height: 100vh;
- margin: 0 auto;
- box-sizing: border-box;
-}
-
-.app-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 1rem;
- padding: 2rem 0;
- border-bottom: 1px solid var(--border);
-}
-
-.theme-controls {
- display: flex;
- align-items: center;
- gap: 0.75rem;
-}
-
-.color-theme-picker {
- display: grid;
- grid-template-columns: repeat(4, 1.75rem);
- gap: 0.25rem;
- padding: 0.25rem;
- border: 1px solid var(--border);
- border-radius: var(--radius);
- background: var(--card);
-}
-
-.color-swatch {
- display: inline-flex;
- width: 1.75rem;
- height: 1.75rem;
- align-items: center;
- justify-content: center;
- padding: 0;
- border: 0;
- border-radius: calc(var(--radius) - 0.25rem);
- background: transparent;
- outline: none;
-}
-
-.color-swatch:hover {
- background: var(--accent);
-}
-
-.color-swatch:focus-visible,
-.color-swatch-active {
- box-shadow:
- inset 0 0 0 2px var(--background),
- inset 0 0 0 3px var(--ring);
-}
-
-.color-swatch-dot {
- width: 1rem;
- height: 1rem;
- border-radius: 50%;
- background: var(--swatch-color);
-}
-
-.eyebrow {
- margin: 0 0 0.375rem;
- color: var(--muted-foreground);
- font-size: 0.75rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
-}
-
-h1,
-h2 {
- margin: 0;
-}
-
-h1 {
- font-size: clamp(1.5rem, 4vw, 2rem);
-}
-
-h2 {
- font-size: 1.25rem;
-}
-
-.showcase-section {
- padding: 3rem 0;
-}
-
-.section-heading {
- max-width: 36rem;
-}
-
-.section-heading > p:last-child {
- margin: 0.75rem 0 0;
- color: var(--muted-foreground);
-}
-
-.button-row {
- display: flex;
- flex-wrap: wrap;
- gap: 0.75rem;
- margin-top: 1.5rem;
-}
-
-@media (max-width: 640px) {
- .app-header {
- align-items: flex-start;
- flex-direction: column;
- padding: 1.25rem 0;
- }
-
- .theme-controls {
- width: 100%;
- justify-content: space-between;
- }
-
- .showcase-section {
- padding: 2rem 0;
- }
-}
diff --git a/code/fms/fms-vue/src/styles/index.css b/code/fms/fms-vue/src/styles/index.css
new file mode 100644
index 00000000..fcb98118
--- /dev/null
+++ b/code/fms/fms-vue/src/styles/index.css
@@ -0,0 +1,86 @@
+:root {
+ --font-sans: 'Noto Sans SC Variable', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+
+ --background: #ffffff;
+ --foreground: #09090b;
+ --card: #ffffff;
+ --card-foreground: #09090b;
+ /* 主色系列（--primary / --primary-hover / --primary-active / --primary-foreground / --primary-border / --ring）
+ 由 theme/useTheme.js 在运行时根据主题色计算并写入 :root.style，此处不重复定义以避免双真相源。 */
+ --secondary: #f4f4f5;
+ --secondary-foreground: #18181b;
+ --muted-foreground: #71717a;
+ --accent: #f4f4f5;
+ --accent-foreground: #18181b;
+ --destructive: #ef4444;
+ --destructive-foreground: #fafafa;
+ --border: #e4e4e7;
+ --input: #e4e4e7;
+ --radius: 0.625rem;
+
+ font-family: var(--font-sans);
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ line-height: 1.5;
+ color: var(--foreground);
+ background: var(--background);
+}
+
+:root[data-theme='dark'] {
+ --background: #09090b;
+ --foreground: #fafafa;
+ --card: #18181b;
+ --card-foreground: #fafafa;
+ --secondary: #27272a;
+ --secondary-foreground: #fafafa;
+ --muted-foreground: #a1a1aa;
+ --accent: #27272a;
+ --accent-foreground: #fafafa;
+ --destructive: #7f1d1d;
+ --destructive-foreground: #fafafa;
+ --border: #ffffff1a;
+ --input: #ffffff26;
+}
+
+body {
+ margin: 0;
+ font-family: inherit;
+ min-width: 320px;
+ color: var(--foreground);
+ background: var(--background);
+ transition:
+ color 160ms ease,
+ background-color 160ms ease;
+}
+
+button,
+input,
+select,
+textarea {
+ font: inherit;
+}
+
+button {
+ cursor: pointer;
+}
+
+button:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+h1,
+h2 {
+ margin: 0;
+}
+
+h1 {
+ font-size: clamp(1.5rem, 4vw, 2rem);
+}
+
+h2 {
+ font-size: 1.25rem;
+}
diff --git a/code/fms/fms-vue/src/theme/color.js b/code/fms/fms-vue/src/theme/color.js
new file mode 100644
index 00000000..59867965
--- /dev/null
+++ b/code/fms/fms-vue/src/theme/color.js
@@ -0,0 +1,196 @@
+// 约定：对外一律 hex('#rrggbb')，内部算法用 RGB 数组 [r, g, b]。
+
+// ---------- 配置 ----------
+export const STORAGE_KEYS = {
+ mode: 'fms-theme',
+ color: 'fms-theme-color',
+}
+
+export const DEFAULT_MODE = 'light'
+export const DEFAULT_COLOR = '#18181b'
+
+export const PRESETS = [
+ { name: 'Shadcn 中性', value: '#18181b' },
+ { name: '蓝色', value: '#2563eb' },
+ { name: '靛蓝', value: '#4f46e5' },
+ { name: '紫色', value: '#7c3aed' },
+ { name: '青色', value: '#0d9488' },
+ { name: '绿色', value: '#16a34a' },
+ { name: '橙色', value: '#ea580c' },
+ { name: '红色', value: '#dc2626' },
+ { name: '粉色', value: '#db2777' },
+]
+
+export const ALGORITHM = {
+ minContrast: 3, // 主色与背景最小对比度
+ hoverDelta: 0.06, // hover 明度偏移
+ activeDelta: 0.14, // active 明度偏移
+ borderMixRatio: 0.55, // 边框与背景混合比例
+}
+
+// 背景参照色：用于主色对比度兜底（浅色=纯白、深色=zinc-900，与原始实现保持一致）。
+export const SURFACES = {
+ light: '#ffffff',
+ dark: '#18181b',
+}
+
+// 主色上文字的前景候选（白 / 近黑），取对比度更大者。
+export const FOREGROUND_CANDIDATES = ['#ffffff', '#18181b']
+
+// ---------- 颜色数学 ----------
+export function normalizeHex(value) {
+ const color = String(value ?? '').trim().toLowerCase()
+
+ if (/^#[0-9a-f]{6}$/.test(color)) return color
+ if (/^#[0-9a-f]{3}$/.test(color)) {
+ const [red, green, blue] = color.slice(1)
+ return `#${red}${red}${green}${green}${blue}${blue}`
+ }
+
+ return null
+}
+
+export function hexToRgb(hex) {
+ return [
+ Number.parseInt(hex.slice(1, 3), 16),
+ Number.parseInt(hex.slice(3, 5), 16),
+ Number.parseInt(hex.slice(5, 7), 16),
+ ]
+}
+
+export function rgbToHex([red, green, blue]) {
+ return `#${[red, green, blue]
+ .map((channel) => Math.round(channel).toString(16).padStart(2, '0'))
+ .join('')}`
+}
+
+export function rgbToHsl([red, green, blue]) {
+ const r = red / 255
+ const g = green / 255
+ const b = blue / 255
+ const max = Math.max(r, g, b)
+ const min = Math.min(r, g, b)
+ const lightness = (max + min) / 2
+
+ if (max === min) return { h: 0, s: 0, l: lightness }
+
+ const delta = max - min
+ const saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min)
+ let hue
+
+ if (max === r) hue = (g - b) / delta + (g < b ? 6 : 0)
+ else if (max === g) hue = (b - r) / delta + 2
+ else hue = (r - g) / delta + 4
+
+ return { h: hue / 6, s: saturation, l: lightness }
+}
+
+function hueToRgb(p, q, t) {
+ let hue = t
+ if (hue < 0) hue += 1
+ if (hue > 1) hue -= 1
+ if (hue < 1 / 6) return p + (q - p) * 6 * hue
+ if (hue < 1 / 2) return q
+ if (hue < 2 / 3) return p + (q - p) * (2 / 3 - hue) * 6
+ return p
+}
+
+export function hslToRgb({ h, s, l }) {
+ if (s === 0) {
+ const value = Math.round(l * 255)
+ return [value, value, value]
+ }
+
+ const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+ const p = 2 * l - q
+
+ return [
+ Math.round(hueToRgb(p, q, h + 1 / 3) * 255),
+ Math.round(hueToRgb(p, q, h) * 255),
+ Math.round(hueToRgb(p, q, h - 1 / 3) * 255),
+ ]
+}
+
+export function adjustLightness(rgb, delta) {
+ const hsl = rgbToHsl(rgb)
+ return hslToRgb({ ...hsl, l: Math.min(1, Math.max(0, hsl.l + delta)) })
+}
+
+export function mixRgb(firstRgb, secondRgb, secondRatio) {
+ const firstRatio = 1 - secondRatio
+ return firstRgb.map((channel, index) =>
+ Math.round(channel * firstRatio + secondRgb[index] * secondRatio),
+ )
+}
+
+export function getRelativeLuminance(rgb) {
+ const [red, green, blue] = rgb.map((channel) => {
+ const value = channel / 255
+ return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4
+ })
+
+ return red * 0.2126 + green * 0.7152 + blue * 0.0722
+}
+
+export function getContrastRatio(firstRgb, secondRgb) {
+ const firstLuminance = getRelativeLuminance(firstRgb)
+ const secondLuminance = getRelativeLuminance(secondRgb)
+ const lighter = Math.max(firstLuminance, secondLuminance)
+ const darker = Math.min(firstLuminance, secondLuminance)
+
+ return (lighter + 0.05) / (darker + 0.05)
+}
+
+// ---------- 主色派生 ----------
+function getForegroundRgb(themeRgb) {
+ const [light, dark] = FOREGROUND_CANDIDATES.map(hexToRgb)
+ const lightContrast = getContrastRatio(themeRgb, light)
+ const darkContrast = getContrastRatio(themeRgb, dark)
+
+ return lightContrast >= darkContrast ? light : dark
+}
+
+function ensurePrimaryContrast(rgb, backgroundRgb) {
+ if (getContrastRatio(rgb, backgroundRgb) >= ALGORITHM.minContrast) return rgb
+
+ const sourceLightness = rgbToHsl(rgb).l
+
+ for (let step = 1; step <= 100; step += 1) {
+ const delta = step / 100
+ const candidates = [adjustLightness(rgb, -delta), adjustLightness(rgb, delta)]
+ const candidate = candidates.find(
+ (item) => getContrastRatio(item, backgroundRgb) >= ALGORITHM.minContrast,
+ )
+
+ if (candidate) return candidate
+ }
+
+ return sourceLightness >= 0.5 ? adjustLightness(rgb, -0.5) : adjustLightness(rgb, 0.5)
+}
+
+export function createPrimaryTokens(color, mode) {
+ const sourceRgb = hexToRgb(color)
+ const backgroundRgb = hexToRgb(SURFACES[mode])
+ const primaryRgb = ensurePrimaryContrast(sourceRgb, backgroundRgb)
+ const primaryLightness = rgbToHsl(primaryRgb).l
+ const direction =
+ mode === 'dark' ? (primaryLightness > 0.85 ? -1 : 1) : primaryLightness < 0.15 ? 1 : -1
+ const hoverRgb = ensurePrimaryContrast(
+ adjustLightness(primaryRgb, direction * ALGORITHM.hoverDelta),
+ backgroundRgb,
+ )
+ const activeRgb = ensurePrimaryContrast(
+ adjustLightness(primaryRgb, direction * ALGORITHM.activeDelta),
+ backgroundRgb,
+ )
+ const primaryBorderRgb = mixRgb(primaryRgb, backgroundRgb, ALGORITHM.borderMixRatio)
+
+ return {
+ primary: rgbToHex(primaryRgb),
+ 'primary-foreground': rgbToHex(getForegroundRgb(primaryRgb)),
+ 'primary-hover': rgbToHex(hoverRgb),
+ 'primary-active': rgbToHex(activeRgb),
+ 'primary-border': rgbToHex(primaryBorderRgb),
+ ring: rgbToHex(primaryRgb),
+ }
+}
diff --git a/code/fms/fms-vue/src/theme/useTheme.js b/code/fms/fms-vue/src/theme/useTheme.js
new file mode 100644
index 00000000..d458ca9b
--- /dev/null
+++ b/code/fms/fms-vue/src/theme/useTheme.js
@@ -0,0 +1,72 @@
+import { ref } from 'vue'
+import {
+ createPrimaryTokens,
+ DEFAULT_COLOR,
+ DEFAULT_MODE,
+ normalizeHex,
+ STORAGE_KEYS,
+} from './color'
+
+const theme = ref(DEFAULT_MODE)
+const themeColor = ref(DEFAULT_COLOR)
+
+function applyTheme() {
+ const root = document.documentElement
+ const tokens = createPrimaryTokens(themeColor.value, theme.value)
+
+ root.dataset.theme = theme.value
+ root.style.colorScheme = theme.value
+
+ for (const [name, value] of Object.entries(tokens)) {
+ root.style.setProperty(`--${name}`, value)
+ }
+}
+
+function readStorage(key) {
+ try {
+ return window.localStorage.getItem(key)
+ } catch {
+ return null
+ }
+}
+
+function writeStorage(key, value) {
+ try {
+ window.localStorage.setItem(key, value)
+ } catch {
+ // storage 不可用时主题仍生效。
+ }
+}
+
+export function initTheme() {
+ const storedMode = readStorage(STORAGE_KEYS.mode)
+ const storedColor = normalizeHex(readStorage(STORAGE_KEYS.color))
+
+ theme.value = storedMode === 'dark' ? 'dark' : 'light'
+ themeColor.value = storedColor ?? DEFAULT_COLOR
+ applyTheme()
+}
+
+function setTheme(value) {
+ theme.value = value === 'dark' ? 'dark' : 'light'
+ applyTheme()
+ writeStorage(STORAGE_KEYS.mode, theme.value)
+}
+
+function setThemeColor(value) {
+ const color = normalizeHex(value)
+ if (!color) return false
+
+ themeColor.value = color
+ applyTheme()
+ writeStorage(STORAGE_KEYS.color, color)
+ return true
+}
+
+function toggleTheme() {
+ setTheme(theme.value === 'dark' ? 'light' : 'dark')
+}
+
+export function useTheme() {
+ return { theme, themeColor, setTheme, setThemeColor, toggleTheme }
+}
diff --git a/code/fms/fms-vue/vite.config.js b/code/fms/fms-vue/vite.config.js
index c40aa3c3..3e817721 100644
--- a/code/fms/fms-vue/vite.config.js
+++ b/code/fms/fms-vue/vite.config.js
@@ -1,6 +1,17 @@
+import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
+ resolve: {
+ alias: {
+ '@': fileURLToPath(new URL('./src', import.meta.url)),
+ },
+ },
+ server: {
+ host: true,
+ port: 5082,
+ strictPort: true,
+ },
plugins: [vue()],
})
diff --git a/code/test/soybean-admin b/code/test/soybean-admin
new file mode 160000
index 00000000..12854ad5
--- /dev/null
+++ b/code/test/soybean-admin
@@ -0,0 +1 @@
+Subproject commit 12854ad5f871477503666e758dc7d7edc4f0f277