From 9e8debcfbde9c294e9600e1ad09a0238165f17d3 Mon Sep 17 00:00:00 2001
From: ila <ila2002@qq.com>
Date: Sun, 23 Aug 2026 23:44:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=AB=AF=E8=BF=90=E8=A1=8C=E6=97=B6=E4=B8=BB=E9=A2=98=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96=20(#34)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin-ui/src/layout/components/Sidebar/Logo.vue    |  2 +-
 admin-ui/src/layout/components/Sidebar/index.vue   |  2 +-
 admin-ui/src/layout/index.vue                      |  2 +-
 admin-ui/src/store/modules/settings.js             |  2 +-
 admin-ui/src/styles/runtime-variables.js           | 14 ++++++++++++++
 .../tests/unit/styles/runtime-variables.spec.js    | 12 ++++++++++++
 6 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 admin-ui/src/styles/runtime-variables.js
 create mode 100644 admin-ui/tests/unit/styles/runtime-variables.spec.js

diff --git a/admin-ui/src/layout/components/Sidebar/Logo.vue b/admin-ui/src/layout/components/Sidebar/Logo.vue
index be73dcb..7cd95ee 100644
--- a/admin-ui/src/layout/components/Sidebar/Logo.vue
+++ b/admin-ui/src/layout/components/Sidebar/Logo.vue
@@ -15,7 +15,7 @@
 
 <script>
 
-import variables from '@/styles/variables.scss'
+import variables from '@/styles/runtime-variables'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/admin-ui/src/layout/components/Sidebar/index.vue b/admin-ui/src/layout/components/Sidebar/index.vue
index d963596..2f4f37d 100644
--- a/admin-ui/src/layout/components/Sidebar/index.vue
+++ b/admin-ui/src/layout/components/Sidebar/index.vue
@@ -29,7 +29,7 @@
 import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
-import variables from '@/styles/variables.scss'
+import variables from '@/styles/runtime-variables'
 
 export default {
   components: { SidebarItem, Logo },
diff --git a/admin-ui/src/layout/index.vue b/admin-ui/src/layout/index.vue
index 5844b73..0324c39 100644
--- a/admin-ui/src/layout/index.vue
+++ b/admin-ui/src/layout/index.vue
@@ -20,7 +20,7 @@ import RightPanel from '@/components/RightPanel'
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
-import variables from '@/styles/variables.scss'
+import variables from '@/styles/runtime-variables'
 
 export default {
   name: 'MainLayout',
diff --git a/admin-ui/src/store/modules/settings.js b/admin-ui/src/store/modules/settings.js
index 983a28a..6f71b7d 100644
--- a/admin-ui/src/store/modules/settings.js
+++ b/admin-ui/src/store/modules/settings.js
@@ -1,4 +1,4 @@
-import variables from '@/styles/element-variables.scss'
+import variables from '@/styles/runtime-variables'
 import defaultSettings from '@/settings'
 
 const { showSettings, topNav, tagsView, fixedHeader, sidebarLogo, themeStyle } = defaultSettings
diff --git a/admin-ui/src/styles/runtime-variables.js b/admin-ui/src/styles/runtime-variables.js
new file mode 100644
index 0000000..1d19c0a
--- /dev/null
+++ b/admin-ui/src/styles/runtime-variables.js
@@ -0,0 +1,14 @@
+export default {
+  theme: '#1890ff',
+  menuActiveText: '#1677ff',
+  subMenuActiveText: '#69b1ff',
+  menuBg: '#001529',
+  menuHover: '#000c17',
+  menuLightBg: '#ffffff',
+  menuLightHover: '#e6f4ff',
+  subMenuBg: '#000c17',
+  subMenuHover: '#001528',
+  sideBarWidth: '210px',
+  sidebarTitle: '#ffffff',
+  sidebarLightTitle: '#001d66'
+}
diff --git a/admin-ui/tests/unit/styles/runtime-variables.spec.js b/admin-ui/tests/unit/styles/runtime-variables.spec.js
new file mode 100644
index 0000000..0bb6c53
--- /dev/null
+++ b/admin-ui/tests/unit/styles/runtime-variables.spec.js
@@ -0,0 +1,12 @@
+import variables from '@/styles/runtime-variables'
+
+describe('runtime style variables', () => {
+  it('keeps the JavaScript theme values aligned with the current SCSS theme', () => {
+    expect(variables).toMatchObject({
+      theme: '#1890ff',
+      menuBg: '#001529',
+      menuLightBg: '#ffffff',
+      sideBarWidth: '210px'
+    })
+  })
+})