From b921e2a7e50e10a98c4b87734c025e7388f290ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=B2=E4=B9=88=E4=BA=86?= <zhongchunyang@rocan.com.cn>
Date: Tue, 30 Jan 2024 13:47:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                             |  15 +--
 src/layouts/admin/components/config.vue | 163 ++++++++----------------
 src/stores/config.ts                    |   5 +-
 src/stores/interface/index.ts           |   3 +
 src/styles/app.scss                     |  20 +--
 src/styles/var.scss                     |   8 +-
 src/styles/vxeTable.scss                |  36 +++++-
 src/utils/setTheme.ts                   |  42 ++++++
 8 files changed, 156 insertions(+), 136 deletions(-)
 create mode 100644 src/utils/setTheme.ts

diff --git a/src/App.vue b/src/App.vue
index 701d362..238a4a2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,16 @@
 <template>
-    <el-config-provider :locale='zhCn'>
+    <el-config-provider :locale="zhCn">
         <router-view></router-view>
     </el-config-provider>
 </template>
 
-<script lang='ts' setup>
-import { computed, ref } from 'vue'
+<script lang="ts" setup>
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-import { useConfig } from '@/stores/config'
-import { useElementPlusTheme } from 'use-element-plus-theme'
+import useSetTheme from '@/utils/setTheme'
+useSetTheme()
 
-const configStore = useConfig()
-useElementPlusTheme(configStore.getColorVal('elementUiPrimary'))
 </script>
 
-<style lang='scss'>
-
+<style lang="scss">
+/* Your SCSS styles here */
 </style>
diff --git a/src/layouts/admin/components/config.vue b/src/layouts/admin/components/config.vue
index 963e936..8bad9ac 100644
--- a/src/layouts/admin/components/config.vue
+++ b/src/layouts/admin/components/config.vue
@@ -4,76 +4,6 @@
             <el-scrollbar class="layout-mode-style-scrollbar">
                 <el-form ref="formRef" :model="configStore.layout">
                     <div class="layout-mode-styles-box">
-<!--                        <el-divider border-style="dashed">全局</el-divider>-->
-<!--                        <div class="layout-mode-box-style">-->
-<!--                            <el-row class="layout-mode-box-style-row" :gutter="10">-->
-<!--                                <el-col :span="12">-->
-<!--                                    <div-->
-<!--                                        @click="setLayoutMode('Default')"-->
-<!--                                        class="layout-mode-style default"-->
-<!--                                        :class="configStore.layout.layoutMode == 'Default' ? 'active' : ''"-->
-<!--                                    >-->
-<!--                                        <div class="layout-mode-style-box">-->
-<!--                                            <div class="layout-mode-style-aside"></div>-->
-<!--                                            <div class="layout-mode-style-container-box">-->
-<!--                                                <div class="layout-mode-style-header"></div>-->
-<!--                                                <div class="layout-mode-style-container"></div>-->
-<!--                                            </div>-->
-<!--                                        </div>-->
-<!--                                        <div class="layout-mode-style-name">默认</div>-->
-<!--                                    </div>-->
-<!--                                </el-col>-->
-<!--                                <el-col :span="12">-->
-<!--                                    <div-->
-<!--                                        @click="setLayoutMode('Classic')"-->
-<!--                                        class="layout-mode-style classic"-->
-<!--                                        :class="configStore.layout.layoutMode == 'Classic' ? 'active' : ''"-->
-<!--                                    >-->
-<!--                                        <div class="layout-mode-style-box">-->
-<!--                                            <div class="layout-mode-style-aside"></div>-->
-<!--                                            <div class="layout-mode-style-container-box">-->
-<!--                                                <div class="layout-mode-style-header"></div>-->
-<!--                                                <div class="layout-mode-style-container"></div>-->
-<!--                                            </div>-->
-<!--                                        </div>-->
-<!--                                        <div class="layout-mode-style-name">经典</div>-->
-<!--                                    </div>-->
-<!--                                </el-col>-->
-<!--                            </el-row>-->
-<!--                            &lt;!&ndash; <el-row :gutter="10">-->
-<!--                                <el-col :span="12">-->
-<!--                                    <div-->
-<!--                                        @click="setLayoutMode('Streamline')"-->
-<!--                                        class="layout-mode-style streamline"-->
-<!--                                        :class="configStore.layout.layoutMode == 'Streamline' ? 'active' : ''"-->
-<!--                                    >-->
-<!--                                        <div class="layout-mode-style-box">-->
-<!--                                            <div class="layout-mode-style-container-box">-->
-<!--                                                <div class="layout-mode-style-header"></div>-->
-<!--                                                <div class="layout-mode-style-container"></div>-->
-<!--                                            </div>-->
-<!--                                        </div>-->
-<!--                                        <div class="layout-mode-style-name">单栏</div>-->
-<!--                                    </div>-->
-<!--                                </el-col>-->
-<!--                                <el-col :span="12">-->
-<!--                                    <div-->
-<!--                                        @click="setLayoutMode('Double')"-->
-<!--                                        class="layout-mode-style double"-->
-<!--                                        :class="configStore.layout.layoutMode == 'Double' ? 'active' : ''"-->
-<!--                                    >-->
-<!--                                        <div class="layout-mode-style-box">-->
-<!--                                            <div class="layout-mode-style-aside"></div>-->
-<!--                                            <div class="layout-mode-style-container-box">-->
-<!--                                                <div class="layout-mode-style-header"></div>-->
-<!--                                                <div class="layout-mode-style-container"></div>-->
-<!--                                            </div>-->
-<!--                                        </div>-->
-<!--                                        <div class="layout-mode-style-name">双栏</div>-->
-<!--                                    </div>-->
-<!--                                </el-col>-->
-<!--                            </el-row> &ndash;&gt;-->
-<!--                        </div>-->
                         <el-divider border-style="dashed">全局</el-divider>
                         <div class="layout-config-global">
                             <el-form-item label="后台页面切换动画">
@@ -97,8 +27,25 @@
                                     :model-value="configStore.getColorVal('elementUiPrimary')"
                                 />
                             </el-form-item>
+                            <el-form-item label="表格标题栏背景颜色">
+                                <el-color-picker
+                                    @change="onCommitColorState($event, 'tableHeaderBackground')"
+                                    :model-value="configStore.getColorVal('tableHeaderBackground')"
+                                />
+                            </el-form-item>
+                            <el-form-item label="表格标题栏文字颜色">
+                                <el-color-picker
+                                    @change="onCommitColorState($event, 'tableHeaderColor')"
+                                    :model-value="configStore.getColorVal('tableHeaderColor')"
+                                />
+                            </el-form-item>
+                            <el-form-item label="表格激活栏颜色">
+                                <el-color-picker
+                                    @change="onCommitColorState($event, 'tableCurrent')"
+                                    :model-value="configStore.getColorVal('tableCurrent')"
+                                />
+                            </el-form-item>
                         </div>
-
                         <el-divider border-style="dashed">侧边栏</el-divider>
                         <div class="layout-config-aside">
                             <el-form-item label="侧边菜单栏背景色">
@@ -147,24 +94,24 @@
                                     <template #append>px</template>
                                 </el-input>
                             </el-form-item>
-<!--                            <el-form-item label="侧边菜单默认图标">-->
-<!--                                <IconSelector-->
-<!--                                    @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"-->
-<!--                                    :model-value="configStore.layout.menuDefaultIcon"-->
-<!--                                />-->
-<!--                            </el-form-item>-->
-<!--                            <el-form-item label="侧边菜单水平折叠">-->
-<!--                                <el-switch-->
-<!--                                    @change="onCommitState($event, 'menuCollapse')"-->
-<!--                                    :model-value="configStore.layout.menuCollapse"-->
-<!--                                ></el-switch>-->
-<!--                            </el-form-item>-->
-<!--                            <el-form-item label="侧边菜单手风琴">-->
-<!--                                <el-switch-->
-<!--                                    @change="onCommitState($event, 'menuUniqueOpened')"-->
-<!--                                    :model-value="configStore.layout.menuUniqueOpened"-->
-<!--                                ></el-switch>-->
-<!--                            </el-form-item>-->
+                            <!--                            <el-form-item label="侧边菜单默认图标">-->
+                            <!--                                <IconSelector-->
+                            <!--                                    @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"-->
+                            <!--                                    :model-value="configStore.layout.menuDefaultIcon"-->
+                            <!--                                />-->
+                            <!--                            </el-form-item>-->
+                            <!--                            <el-form-item label="侧边菜单水平折叠">-->
+                            <!--                                <el-switch-->
+                            <!--                                    @change="onCommitState($event, 'menuCollapse')"-->
+                            <!--                                    :model-value="configStore.layout.menuCollapse"-->
+                            <!--                                ></el-switch>-->
+                            <!--                            </el-form-item>-->
+                            <!--                            <el-form-item label="侧边菜单手风琴">-->
+                            <!--                                <el-switch-->
+                            <!--                                    @change="onCommitState($event, 'menuUniqueOpened')"-->
+                            <!--                                    :model-value="configStore.layout.menuUniqueOpened"-->
+                            <!--                                ></el-switch>-->
+                            <!--                            </el-form-item>-->
                         </div>
 
                         <el-divider border-style="dashed">顶栏</el-divider>
@@ -181,24 +128,24 @@
                                     :model-value="configStore.getColorVal('headerBarTabColor')"
                                 />
                             </el-form-item>
-<!--                            <el-form-item label="顶栏悬停时背景色">-->
-<!--                                <el-color-picker-->
-<!--                                    @change="onCommitColorState($event, 'headerBarHoverBackground')"-->
-<!--                                    :model-value="configStore.getColorVal('headerBarHoverBackground')"-->
-<!--                                />-->
-<!--                            </el-form-item>-->
-<!--                            <el-form-item label="顶栏菜单激活项背景色">-->
-<!--                                <el-color-picker-->
-<!--                                    @change="onCommitColorState($event, 'headerBarTabActiveBackground')"-->
-<!--                                    :model-value="configStore.getColorVal('headerBarTabActiveBackground')"-->
-<!--                                />-->
-<!--                            </el-form-item>-->
-<!--                            <el-form-item label="顶栏菜单激活项文字色">-->
-<!--                                <el-color-picker-->
-<!--                                    @change="onCommitColorState($event, 'headerBarTabActiveColor')"-->
-<!--                                    :model-value="configStore.getColorVal('headerBarTabActiveColor')"-->
-<!--                                />-->
-<!--                            </el-form-item>-->
+                            <!--                            <el-form-item label="顶栏悬停时背景色">-->
+                            <!--                                <el-color-picker-->
+                            <!--                                    @change="onCommitColorState($event, 'headerBarHoverBackground')"-->
+                            <!--                                    :model-value="configStore.getColorVal('headerBarHoverBackground')"-->
+                            <!--                                />-->
+                            <!--                            </el-form-item>-->
+                            <!--                            <el-form-item label="顶栏菜单激活项背景色">-->
+                            <!--                                <el-color-picker-->
+                            <!--                                    @change="onCommitColorState($event, 'headerBarTabActiveBackground')"-->
+                            <!--                                    :model-value="configStore.getColorVal('headerBarTabActiveBackground')"-->
+                            <!--                                />-->
+                            <!--                            </el-form-item>-->
+                            <!--                            <el-form-item label="顶栏菜单激活项文字色">-->
+                            <!--                                <el-color-picker-->
+                            <!--                                    @change="onCommitColorState($event, 'headerBarTabActiveColor')"-->
+                            <!--                                    :model-value="configStore.getColorVal('headerBarTabActiveColor')"-->
+                            <!--                                />-->
+                            <!--                            </el-form-item>-->
                         </div>
                         <el-popconfirm @confirm="restoreDefault" title="确定要恢复全部配置到默认值吗？">
                             <template #reference>
@@ -268,6 +215,8 @@ const restoreDefault = () => {
 </script>
 
 <style scoped lang="scss">
+
+
 .layout-config-drawer :deep(.el-input__inner) {
     padding: 0 0 0 6px;
 }
diff --git a/src/stores/config.ts b/src/stores/config.ts
index 1cc65f8..65ad801 100644
--- a/src/stores/config.ts
+++ b/src/stores/config.ts
@@ -17,7 +17,10 @@ export const useConfig = defineStore(
             mainAnimation: 'slide-right',
             // 是否暗黑模式
             isDark: false,
-            elementUiPrimary:['#002B6A','#002B6A'],
+            elementUiPrimary: ['#002B6A', '#002B6A'],
+            tableHeaderBackground: ['#F3F6F9', '#F3F6F9'],
+            tableHeaderColor: ['#111', '#fff'],
+            tableCurrent: ['#F3F6F9', '#F3F6F9'],
             /* 侧边菜单 */
             // 侧边菜单背景色
             menuBackground: ['#002B6A', '#1d1e1f'],
diff --git a/src/stores/interface/index.ts b/src/stores/interface/index.ts
index 8b91457..95f557b 100644
--- a/src/stores/interface/index.ts
+++ b/src/stores/interface/index.ts
@@ -13,6 +13,9 @@ export interface Layout {
     menuUniqueOpened: boolean
     menuShowTopBar: boolean
     elementUiPrimary: string[]
+    tableHeaderBackground: string[]
+    tableHeaderColor: string[]
+    tableCurrent: string[]
     menuBackground: string[]
     menuColor: string[]
     menuActiveBackground: string[]
diff --git a/src/styles/app.scss b/src/styles/app.scss
index b060e32..f8e832d 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -23,18 +23,24 @@ body,
     position: relative;
 }
 
+/* 修改纵向滚动条轨道 */
 ::-webkit-scrollbar {
     width: 8px;
-    height: 10px;
 }
-
+/* 修改纵向滚动条拇指（thumb） */
 ::-webkit-scrollbar-thumb {
+    background-color: var(--el-color-primary);
+    border-radius: 5px;
+}
+/* 修改横向滚动条轨道 */
+::-webkit-scrollbar:horizontal {
+    height: 8px;
+}
+/* 修改横向滚动条拇指（thumb） */
+::-webkit-scrollbar-thumb:horizontal {
+    background-color: var(--el-color-primary);
     border-radius: 5px;
-    height: 3px;
-    background-color: var(--el-color-primary) !important;
-    border-radius: 30px !important;
 }
-
 // 阿里 iconfont Symbol引用css
 .iconfont-icon {
     width: 1em;
@@ -307,5 +313,3 @@ body,
     align-items: center;
     border: 1px solid var(--el-border-color);
 }
-
-
diff --git a/src/styles/var.scss b/src/styles/var.scss
index c30ed6a..80c9476 100644
--- a/src/styles/var.scss
+++ b/src/styles/var.scss
@@ -29,8 +29,8 @@ $border-color: map.merge(
   @include set-css-var-value('color-primary-light', $primary-light);
   @include set-component-css-var('bg-color', $bg-color);
   @include set-component-css-var('border-color', $border-color);
-  --vxe-table-row-current-background-color: var(--el-color-primary-light-7);
-  --vxe-table-row-hover-background-color: var(--el-color-primary-light-9);
-  --vxe-table-row-hover-current-background-color: var(--el-color-primary-light-7);
-  --vxe-table-row-hover-striped-background-color: var(--el-color-primary-light-9);
+//   --vxe-table-row-current-background-color: var(--el-color-primary-light-7);
+//   --vxe-table-row-hover-background-color: var(--el-color-primary-light-9);
+//   --vxe-table-row-hover-current-background-color: var(--el-color-primary-light-7);
+//   --vxe-table-row-hover-striped-background-color: var(--el-color-primary-light-9);
 }
diff --git a/src/styles/vxeTable.scss b/src/styles/vxeTable.scss
index 33da066..031a924 100644
--- a/src/styles/vxeTable.scss
+++ b/src/styles/vxeTable.scss
@@ -20,15 +20,37 @@
 // }
 
 .vxe-header--row {
-  background: var(--el-color-primary);
-  color: var(--el-color-white);
+    background: var(--vxe-table-header-background-color);
+    color: var(--vxe-table-header-font-color);
 }
 
-.is--checked.vxe-checkbox, .is--checked.vxe-checkbox .vxe-checkbox--icon, .is--checked.vxe-custom--checkbox-option, .is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon, .is--checked.vxe-export--panel-column-option, .is--checked.vxe-export--panel-column-option .vxe-checkbox--icon, .is--checked.vxe-table--filter-option, .is--checked.vxe-table--filter-option .vxe-checkbox--icon, .is--indeterminate.vxe-checkbox, .is--indeterminate.vxe-checkbox .vxe-checkbox--icon, .is--indeterminate.vxe-custom--checkbox-option, .is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon, .is--indeterminate.vxe-export--panel-column-option, .is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon, .is--indeterminate.vxe-table--filter-option, .is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon, .vxe-table--render-default .is--checked.vxe-cell--checkbox, .vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon, .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox, .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon {
-  color: var(--el-color-primary-light-8);
+.is--checked.vxe-checkbox,
+.is--checked.vxe-checkbox .vxe-checkbox--icon,
+.is--checked.vxe-custom--checkbox-option,
+.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,
+.is--checked.vxe-export--panel-column-option,
+.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,
+.is--checked.vxe-table--filter-option,
+.is--checked.vxe-table--filter-option .vxe-checkbox--icon,
+.is--indeterminate.vxe-checkbox,
+.is--indeterminate.vxe-checkbox .vxe-checkbox--icon,
+.is--indeterminate.vxe-custom--checkbox-option,
+.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,
+.is--indeterminate.vxe-export--panel-column-option,
+.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,
+.is--indeterminate.vxe-table--filter-option,
+.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,
+.vxe-table--render-default .is--checked.vxe-cell--checkbox,
+.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
+.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
+.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon {
+    color: var(--el-color-primary-light-8);
 }
 
-.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon, .vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon, .vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon, .vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon, .vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon {
-  color: var(--el-color-primary-light-8);
+.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
+.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,
+.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,
+.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,
+.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon {
+    color: var(--el-color-primary-light-8);
 }
-
diff --git a/src/utils/setTheme.ts b/src/utils/setTheme.ts
new file mode 100644
index 0000000..4ac46d5
--- /dev/null
+++ b/src/utils/setTheme.ts
@@ -0,0 +1,42 @@
+import { onMounted, watch } from 'vue'
+
+import { useElementPlusTheme } from 'use-element-plus-theme'
+import { useConfig } from '@/stores/config'
+
+const useSetTheme = () => {
+    const configStore = useConfig()
+    const elementPlusTheme = useElementPlusTheme(configStore.getColorVal('elementUiPrimary'))
+    const updateTheme = () => {
+        const root = document.documentElement
+        root.style.setProperty('--vxe-table-header-background-color', configStore.getColorVal('tableHeaderBackground'))
+        root.style.setProperty('--vxe-table-header-font-color', configStore.getColorVal('tableHeaderColor'))
+        root.style.setProperty('--vxe-table-row-current-background-color', configStore.getColorVal('tableCurrent'))
+        root.style.setProperty('--vxe-table-row-hover-background-color', configStore.getColorVal('tableCurrent'))
+        root.style.setProperty(
+            '--vxe-table-row-hover-current-background-color',
+            configStore.getColorVal('tableCurrent')
+        )
+        root.style.setProperty(
+            '--vxe-table-row-hover-striped-background-color',
+            configStore.getColorVal('tableCurrent')
+        )
+    }
+    onMounted(updateTheme)
+    watch(
+        () => configStore.getColorVal('elementUiPrimary'),
+        () => {
+            elementPlusTheme.changeTheme(configStore.getColorVal('elementUiPrimary'))
+        }
+    )
+    watch(
+        [
+            () => configStore.getColorVal('tableHeaderBackground'),
+            () => configStore.getColorVal('tableHeaderColor'),
+            () => configStore.getColorVal('tableCurrent')
+        ],
+        () => {
+            updateTheme()
+        }
+    )
+}
+export default useSetTheme