From 1ff066054383248ffd890387a90c1d0f9639b451 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: Thu, 28 Dec 2023 14:49:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A2=98=E8=89=B2=E5=B0=9D=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  10 +
 src/layouts/admin/components/config.vue       | 176 +++++++++---------
 src/stores/config.ts                          |   2 +-
 src/stores/interface/index.ts                 |   1 +
 .../sags/operationsManagement/index.vue       |   3 -
 5 files changed, 99 insertions(+), 93 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 42bbe54..de11133 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,4 +7,14 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import { useConfig } from '@/stores/config'
+// const configStore = useConfig()
+// document.documentElement.style.setProperty('--el-color-primary', configStore.getColorVal('elementUiPrimary'));
 </script>
+
+<style lang="scss">
+// $primaryColor: v-bind('configStore.getColorVal("elementUiPrimary")');
+// :root {
+//     --el-color-primary: $primaryColor !important;
+// }
+</style>
diff --git a/src/layouts/admin/components/config.vue b/src/layouts/admin/components/config.vue
index ea3e7c3..ba6bb7a 100644
--- a/src/layouts/admin/components/config.vue
+++ b/src/layouts/admin/components/config.vue
@@ -1,211 +1,209 @@
 <template>
-    <div class='layout-config-drawer'>
-        <el-drawer
-            :model-value='configStore.layout.showDrawer'
-            title='布局配置'
-            size='310px'
-            @close='onCloseDrawer'
-        >
-            <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 class="layout-config-drawer">
+        <el-drawer :model-value="configStore.layout.showDrawer" title="布局配置" size="310px" @close="onCloseDrawer">
+            <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="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 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 class="layout-mode-style-name">默认</div>
                                     </div>
                                 </el-col>
-                                <el-col :span='12'>
+                                <el-col :span="12">
                                     <div
                                         @click="setLayoutMode('Classic')"
-                                        class='layout-mode-style 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 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 class="layout-mode-style-name">经典</div>
                                     </div>
                                 </el-col>
                             </el-row>
-                            <el-row :gutter='10'>
-                                <el-col :span='12'>
+                            <el-row :gutter="10">
+                                <el-col :span="12">
                                     <div
                                         @click="setLayoutMode('Streamline')"
-                                        class='layout-mode-style 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 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 class="layout-mode-style-name">单栏</div>
                                     </div>
                                 </el-col>
-                                <el-col :span='12'>
+                                <el-col :span="12">
                                     <div
                                         @click="setLayoutMode('Double')"
-                                        class='layout-mode-style 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 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 class="layout-mode-style-name">双栏</div>
                                     </div>
                                 </el-col>
                             </el-row>
                         </div>
-                        <el-divider border-style='dashed'>全局</el-divider>
-                        <div class='layout-config-global'>
+                        <el-divider border-style="dashed">全局</el-divider>
+                        <div class="layout-config-global">
                             <el-form-item label="'后台页面切换动画">
                                 <el-select
                                     @change="onCommitState($event, 'mainAnimation')"
-                                    :model-value='configStore.layout.mainAnimation'
+                                    :model-value="configStore.layout.mainAnimation"
                                     :placeholder="'layouts.Please select an animation name'"
                                 >
-                                    <el-option label='slide-right' value='slide-right'></el-option>
-                                    <el-option label='slide-left' value='slide-left'></el-option>
-                                    <el-option label='el-fade-in-linear' value='el-fade-in-linear'></el-option>
-                                    <el-option label='el-fade-in' value='el-fade-in'></el-option>
-                                    <el-option label='el-zoom-in-center' value='el-zoom-in-center'></el-option>
-                                    <el-option label='el-zoom-in-top' value='el-zoom-in-top'></el-option>
-                                    <el-option label='el-zoom-in-bottom' value='el-zoom-in-bottom'></el-option>
+                                    <el-option label="slide-right" value="slide-right"></el-option>
+                                    <el-option label="slide-left" value="slide-left"></el-option>
+                                    <el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option>
+                                    <el-option label="el-fade-in" value="el-fade-in"></el-option>
+                                    <el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option>
+                                    <el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option>
+                                    <el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
                                 </el-select>
                             </el-form-item>
+                            <el-form-item label="组件主题色">
+                                <el-color-picker
+                                    @change="onCommitColorState($event, 'elementUiPrimary')"
+                                    :model-value="configStore.getColorVal('elementUiPrimary')"
+                                />
+                            </el-form-item>
                         </div>
 
-                        <el-divider border-style='dashed'>侧边栏</el-divider>
-                        <div class='layout-config-aside'>
-                            <el-form-item label='侧边菜单栏背景色'>
+                        <el-divider border-style="dashed">侧边栏</el-divider>
+                        <div class="layout-config-aside">
+                            <el-form-item label="侧边菜单栏背景色">
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'menuBackground')"
                                     :model-value="configStore.getColorVal('menuBackground')"
                                 />
                             </el-form-item>
-                            <el-form-item label='侧边菜单文字颜色'>
+                            <el-form-item label="侧边菜单文字颜色">
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'menuColor')"
                                     :model-value="configStore.getColorVal('menuColor')"
                                 />
                             </el-form-item>
-                            <el-form-item label='侧边菜单激活项背景色'>
+                            <el-form-item label="侧边菜单激活项背景色">
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'menuActiveBackground')"
                                     :model-value="configStore.getColorVal('menuActiveBackground')"
                                 />
                             </el-form-item>
-                            <el-form-item label='侧边菜单激活项文字色'>
+                            <el-form-item label="侧边菜单激活项文字色">
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'menuActiveColor')"
                                     :model-value="configStore.getColorVal('menuActiveColor')"
                                 />
                             </el-form-item>
-                            <el-form-item label='显示侧边菜单顶栏(LOGO栏)'>
+                            <el-form-item label="显示侧边菜单顶栏(LOGO栏)">
                                 <el-switch
                                     @change="onCommitState($event, 'menuShowTopBar')"
-                                    :model-value='configStore.layout.menuShowTopBar'
+                                    :model-value="configStore.layout.menuShowTopBar"
                                 ></el-switch>
                             </el-form-item>
-                            <el-form-item label='侧边菜单顶栏背景色'>
+                            <el-form-item label="侧边菜单顶栏背景色">
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'menuTopBarBackground')"
                                     :model-value="configStore.getColorVal('menuTopBarBackground')"
                                 />
                             </el-form-item>
-                            <el-form-item label='侧边菜单宽度(展开时)'>
+                            <el-form-item label="侧边菜单宽度(展开时)">
                                 <el-input
                                     @input="onCommitState($event, 'menuWidth')"
-                                    type='number'
-                                    :step='10'
-                                    :model-value='configStore.layout.menuWidth'
+                                    type="number"
+                                    :step="10"
+                                    :model-value="configStore.layout.menuWidth"
                                 >
                                     <template #append>px</template>
                                 </el-input>
                             </el-form-item>
-                            <el-form-item label='侧边菜单默认图标'>
+                            <el-form-item label="侧边菜单默认图标">
                                 <IconSelector
                                     @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"
-                                    :model-value='configStore.layout.menuDefaultIcon'
+                                    :model-value="configStore.layout.menuDefaultIcon"
                                 />
                             </el-form-item>
-                            <el-form-item label='侧边菜单水平折叠'>
+                            <el-form-item label="侧边菜单水平折叠">
                                 <el-switch
                                     @change="onCommitState($event, 'menuCollapse')"
-                                    :model-value='configStore.layout.menuCollapse'
+                                    :model-value="configStore.layout.menuCollapse"
                                 ></el-switch>
                             </el-form-item>
-                            <el-form-item label='侧边菜单手风琴'>
+                            <el-form-item label="侧边菜单手风琴">
                                 <el-switch
                                     @change="onCommitState($event, 'menuUniqueOpened')"
-                                    :model-value='configStore.layout.menuUniqueOpened'
+                                    :model-value="configStore.layout.menuUniqueOpened"
                                 ></el-switch>
                             </el-form-item>
                         </div>
 
-                        <el-divider border-style='dashed'>顶栏</el-divider>
-                        <div class='layout-config-aside'>
-                            <el-form-item label='顶栏背景色'>
+                        <el-divider border-style="dashed">顶栏</el-divider>
+                        <div class="layout-config-aside">
+                            <el-form-item label="顶栏背景色">
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'headerBarBackground')"
                                     :model-value="configStore.getColorVal('headerBarBackground')"
                                 />
                             </el-form-item>
-                            <el-form-item label='顶栏文字色'>
+                            <el-form-item label="顶栏文字色">
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'headerBarTabColor')"
                                     :model-value="configStore.getColorVal('headerBarTabColor')"
                                 />
                             </el-form-item>
-                            <el-form-item label='顶栏悬停时背景色'>
+                            <el-form-item label="顶栏悬停时背景色">
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'headerBarHoverBackground')"
                                     :model-value="configStore.getColorVal('headerBarHoverBackground')"
                                 />
                             </el-form-item>
-                            <el-form-item label='顶栏菜单激活项背景色'>
+                            <el-form-item label="顶栏菜单激活项背景色">
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'headerBarTabActiveBackground')"
                                     :model-value="configStore.getColorVal('headerBarTabActiveBackground')"
                                 />
                             </el-form-item>
-                            <el-form-item label='顶栏菜单激活项文字色'>
+                            <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='确定要恢复全部配置到默认值吗？'
-                        >
+                        <el-popconfirm @confirm="restoreDefault" title="确定要恢复全部配置到默认值吗？">
                             <template #reference>
-                                <div class='ba-center'>
-                                    <el-button class='w80' type='info'>恢复默认</el-button>
+                                <div class="ba-center">
+                                    <el-button class="w80" type="info">恢复默认</el-button>
                                 </div>
                             </template>
                         </el-popconfirm>
@@ -216,7 +214,7 @@
     </div>
 </template>
 
-<script setup lang='ts'>
+<script setup lang="ts">
 import { useConfig } from '@/stores/config'
 import { useNavTabs } from '@/stores/navTabs'
 import { useRouter } from 'vue-router'
@@ -269,7 +267,7 @@ const restoreDefault = () => {
 }
 </script>
 
-<style scoped lang='scss'>
+<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 efad570..2271cf1 100644
--- a/src/stores/config.ts
+++ b/src/stores/config.ts
@@ -17,7 +17,7 @@ export const useConfig = defineStore(
             mainAnimation: 'slide-right',
             // 是否暗黑模式
             isDark: false,
-
+            elementUiPrimary:['#1a94fa','#1a94fa'],
             /* 侧边菜单 */
             // 侧边菜单背景色
             menuBackground: ['#ffffff', '#1d1e1f'],
diff --git a/src/stores/interface/index.ts b/src/stores/interface/index.ts
index de44fb4..eeffdd2 100644
--- a/src/stores/interface/index.ts
+++ b/src/stores/interface/index.ts
@@ -12,6 +12,7 @@ export interface Layout {
     menuCollapse: boolean
     menuUniqueOpened: boolean
     menuShowTopBar: boolean
+    elementUiPrimary: string[]
     menuBackground: string[]
     menuColor: string[]
     menuActiveBackground: string[]
diff --git a/src/views/voltage/sags/operationsManagement/index.vue b/src/views/voltage/sags/operationsManagement/index.vue
index 6199c60..af77711 100644
--- a/src/views/voltage/sags/operationsManagement/index.vue
+++ b/src/views/voltage/sags/operationsManagement/index.vue
@@ -11,9 +11,6 @@
                     <el-input v-model="tableStore.table.params.loginName" placeholder="Please input" />
                 </el-form-item> -->
             </template>
-            <template v-slot:operation>
-                <el-button :icon="Plus" type="primary" @click="addMenu">添加</el-button>
-            </template>
         </TableHeader>
         <Table ref="tableRef" />
     </div>