Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

主题色尝试

Browse Source
This commit is contained in:
仲么了
2023-12-28 14:49:48 +08:00
parent a16c31707f
commit 1ff0660543
5 changed files with 99 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.vue
View File

@@ -7,4 +7,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' 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> </script>
<style lang="scss">
// $primaryColor: v-bind('configStore.getColorVal("elementUiPrimary")');
// :root {
// --el-color-primary: $primaryColor !important;
// }
</style>

176
src/layouts/admin/components/config.vue
View File

@@ -1,211 +1,209 @@
<template> <template>
<div class='layout-config-drawer'> <div class="layout-config-drawer">
<el-drawer <el-drawer :model-value="configStore.layout.showDrawer" title="布局配置" size="310px" @close="onCloseDrawer">
:model-value='configStore.layout.showDrawer' <el-scrollbar class="layout-mode-style-scrollbar">
title='布局配置' <el-form ref="formRef" :model="configStore.layout">
size='310px' <div class="layout-mode-styles-box">
@close='onCloseDrawer' <el-divider border-style="dashed">全局</el-divider>
> <div class="layout-mode-box-style">
<el-scrollbar class='layout-mode-style-scrollbar'> <el-row class="layout-mode-box-style-row" :gutter="10">
<el-form ref='formRef' :model='configStore.layout'> <el-col :span="12">
<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 <div
@click="setLayoutMode('Default')" @click="setLayoutMode('Default')"
class='layout-mode-style default' class="layout-mode-style default"
:class="configStore.layout.layoutMode == 'Default' ? 'active' : ''" :class="configStore.layout.layoutMode == 'Default' ? 'active' : ''"
> >
<div class='layout-mode-style-box'> <div class="layout-mode-style-box">
<div class='layout-mode-style-aside'></div> <div class="layout-mode-style-aside"></div>
<div class='layout-mode-style-container-box'> <div class="layout-mode-style-container-box">
<div class='layout-mode-style-header'></div> <div class="layout-mode-style-header"></div>
<div class='layout-mode-style-container'></div> <div class="layout-mode-style-container"></div>
</div> </div>
</div> </div>
<div class='layout-mode-style-name'>默认</div> <div class="layout-mode-style-name">默认</div>
</div> </div>
</el-col> </el-col>
<el-col :span='12'> <el-col :span="12">
<div <div
@click="setLayoutMode('Classic')" @click="setLayoutMode('Classic')"
class='layout-mode-style classic' class="layout-mode-style classic"
:class="configStore.layout.layoutMode == 'Classic' ? 'active' : ''" :class="configStore.layout.layoutMode == 'Classic' ? 'active' : ''"
> >
<div class='layout-mode-style-box'> <div class="layout-mode-style-box">
<div class='layout-mode-style-aside'></div> <div class="layout-mode-style-aside"></div>
<div class='layout-mode-style-container-box'> <div class="layout-mode-style-container-box">
<div class='layout-mode-style-header'></div> <div class="layout-mode-style-header"></div>
<div class='layout-mode-style-container'></div> <div class="layout-mode-style-container"></div>
</div> </div>
</div> </div>
<div class='layout-mode-style-name'>经典</div> <div class="layout-mode-style-name">经典</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter='10'> <el-row :gutter="10">
<el-col :span='12'> <el-col :span="12">
<div <div
@click="setLayoutMode('Streamline')" @click="setLayoutMode('Streamline')"
class='layout-mode-style streamline' class="layout-mode-style streamline"
:class="configStore.layout.layoutMode == 'Streamline' ? 'active' : ''" :class="configStore.layout.layoutMode == 'Streamline' ? 'active' : ''"
> >
<div class='layout-mode-style-box'> <div class="layout-mode-style-box">
<div class='layout-mode-style-container-box'> <div class="layout-mode-style-container-box">
<div class='layout-mode-style-header'></div> <div class="layout-mode-style-header"></div>
<div class='layout-mode-style-container'></div> <div class="layout-mode-style-container"></div>
</div> </div>
</div> </div>
<div class='layout-mode-style-name'>单栏</div> <div class="layout-mode-style-name">单栏</div>
</div> </div>
</el-col> </el-col>
<el-col :span='12'> <el-col :span="12">
<div <div
@click="setLayoutMode('Double')" @click="setLayoutMode('Double')"
class='layout-mode-style double' class="layout-mode-style double"
:class="configStore.layout.layoutMode == 'Double' ? 'active' : ''" :class="configStore.layout.layoutMode == 'Double' ? 'active' : ''"
> >
<div class='layout-mode-style-box'> <div class="layout-mode-style-box">
<div class='layout-mode-style-aside'></div> <div class="layout-mode-style-aside"></div>
<div class='layout-mode-style-container-box'> <div class="layout-mode-style-container-box">
<div class='layout-mode-style-header'></div> <div class="layout-mode-style-header"></div>
<div class='layout-mode-style-container'></div> <div class="layout-mode-style-container"></div>
</div> </div>
</div> </div>
<div class='layout-mode-style-name'>双栏</div> <div class="layout-mode-style-name">双栏</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<el-divider border-style='dashed'>全局</el-divider> <el-divider border-style="dashed">全局</el-divider>
<div class='layout-config-global'> <div class="layout-config-global">
<el-form-item label="'后台页面切换动画"> <el-form-item label="'后台页面切换动画">
<el-select <el-select
@change="onCommitState($event, 'mainAnimation')" @change="onCommitState($event, 'mainAnimation')"
:model-value='configStore.layout.mainAnimation' :model-value="configStore.layout.mainAnimation"
:placeholder="'layouts.Please select an animation name'" :placeholder="'layouts.Please select an animation name'"
> >
<el-option label='slide-right' value='slide-right'></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="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-linear" value="el-fade-in-linear"></el-option>
<el-option label='el-fade-in' value='el-fade-in'></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-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-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="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="组件主题色">
<el-color-picker
@change="onCommitColorState($event, 'elementUiPrimary')"
:model-value="configStore.getColorVal('elementUiPrimary')"
/>
</el-form-item>
</div> </div>
<el-divider border-style='dashed'>侧边栏</el-divider> <el-divider border-style="dashed">侧边栏</el-divider>
<div class='layout-config-aside'> <div class="layout-config-aside">
<el-form-item label='侧边菜单栏背景色'> <el-form-item label="侧边菜单栏背景色">
<el-color-picker <el-color-picker
@change="onCommitColorState($event, 'menuBackground')" @change="onCommitColorState($event, 'menuBackground')"
:model-value="configStore.getColorVal('menuBackground')" :model-value="configStore.getColorVal('menuBackground')"
/> />
</el-form-item> </el-form-item>
<el-form-item label='侧边菜单文字颜色'> <el-form-item label="侧边菜单文字颜色">
<el-color-picker <el-color-picker
@change="onCommitColorState($event, 'menuColor')" @change="onCommitColorState($event, 'menuColor')"
:model-value="configStore.getColorVal('menuColor')" :model-value="configStore.getColorVal('menuColor')"
/> />
</el-form-item> </el-form-item>
<el-form-item label='侧边菜单激活项背景色'> <el-form-item label="侧边菜单激活项背景色">
<el-color-picker <el-color-picker
@change="onCommitColorState($event, 'menuActiveBackground')" @change="onCommitColorState($event, 'menuActiveBackground')"
:model-value="configStore.getColorVal('menuActiveBackground')" :model-value="configStore.getColorVal('menuActiveBackground')"
/> />
</el-form-item> </el-form-item>
<el-form-item label='侧边菜单激活项文字色'> <el-form-item label="侧边菜单激活项文字色">
<el-color-picker <el-color-picker
@change="onCommitColorState($event, 'menuActiveColor')" @change="onCommitColorState($event, 'menuActiveColor')"
:model-value="configStore.getColorVal('menuActiveColor')" :model-value="configStore.getColorVal('menuActiveColor')"
/> />
</el-form-item> </el-form-item>
<el-form-item label='显示侧边菜单顶栏(LOGO栏)'> <el-form-item label="显示侧边菜单顶栏(LOGO栏)">
<el-switch <el-switch
@change="onCommitState($event, 'menuShowTopBar')" @change="onCommitState($event, 'menuShowTopBar')"
:model-value='configStore.layout.menuShowTopBar' :model-value="configStore.layout.menuShowTopBar"
></el-switch> ></el-switch>
</el-form-item> </el-form-item>
<el-form-item label='侧边菜单顶栏背景色'> <el-form-item label="侧边菜单顶栏背景色">
<el-color-picker <el-color-picker
@change="onCommitColorState($event, 'menuTopBarBackground')" @change="onCommitColorState($event, 'menuTopBarBackground')"
:model-value="configStore.getColorVal('menuTopBarBackground')" :model-value="configStore.getColorVal('menuTopBarBackground')"
/> />
</el-form-item> </el-form-item>
<el-form-item label='侧边菜单宽度(展开时)'> <el-form-item label="侧边菜单宽度(展开时)">
<el-input <el-input
@input="onCommitState($event, 'menuWidth')" @input="onCommitState($event, 'menuWidth')"
type='number' type="number"
:step='10' :step="10"
:model-value='configStore.layout.menuWidth' :model-value="configStore.layout.menuWidth"
> >
<template #append>px</template> <template #append>px</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label='侧边菜单默认图标'> <el-form-item label="侧边菜单默认图标">
<IconSelector <IconSelector
@change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')" @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"
:model-value='configStore.layout.menuDefaultIcon' :model-value="configStore.layout.menuDefaultIcon"
/> />
</el-form-item> </el-form-item>
<el-form-item label='侧边菜单水平折叠'> <el-form-item label="侧边菜单水平折叠">
<el-switch <el-switch
@change="onCommitState($event, 'menuCollapse')" @change="onCommitState($event, 'menuCollapse')"
:model-value='configStore.layout.menuCollapse' :model-value="configStore.layout.menuCollapse"
></el-switch> ></el-switch>
</el-form-item> </el-form-item>
<el-form-item label='侧边菜单手风琴'> <el-form-item label="侧边菜单手风琴">
<el-switch <el-switch
@change="onCommitState($event, 'menuUniqueOpened')" @change="onCommitState($event, 'menuUniqueOpened')"
:model-value='configStore.layout.menuUniqueOpened' :model-value="configStore.layout.menuUniqueOpened"
></el-switch> ></el-switch>
</el-form-item> </el-form-item>
</div> </div>
<el-divider border-style='dashed'>顶栏</el-divider> <el-divider border-style="dashed">顶栏</el-divider>
<div class='layout-config-aside'> <div class="layout-config-aside">
<el-form-item label='顶栏背景色'> <el-form-item label="顶栏背景色">
<el-color-picker <el-color-picker
@change="onCommitColorState($event, 'headerBarBackground')" @change="onCommitColorState($event, 'headerBarBackground')"
:model-value="configStore.getColorVal('headerBarBackground')" :model-value="configStore.getColorVal('headerBarBackground')"
/> />
</el-form-item> </el-form-item>
<el-form-item label='顶栏文字色'> <el-form-item label="顶栏文字色">
<el-color-picker <el-color-picker
@change="onCommitColorState($event, 'headerBarTabColor')" @change="onCommitColorState($event, 'headerBarTabColor')"
:model-value="configStore.getColorVal('headerBarTabColor')" :model-value="configStore.getColorVal('headerBarTabColor')"
/> />
</el-form-item> </el-form-item>
<el-form-item label='顶栏悬停时背景色'> <el-form-item label="顶栏悬停时背景色">
<el-color-picker <el-color-picker
@change="onCommitColorState($event, 'headerBarHoverBackground')" @change="onCommitColorState($event, 'headerBarHoverBackground')"
:model-value="configStore.getColorVal('headerBarHoverBackground')" :model-value="configStore.getColorVal('headerBarHoverBackground')"
/> />
</el-form-item> </el-form-item>
<el-form-item label='顶栏菜单激活项背景色'> <el-form-item label="顶栏菜单激活项背景色">
<el-color-picker <el-color-picker
@change="onCommitColorState($event, 'headerBarTabActiveBackground')" @change="onCommitColorState($event, 'headerBarTabActiveBackground')"
:model-value="configStore.getColorVal('headerBarTabActiveBackground')" :model-value="configStore.getColorVal('headerBarTabActiveBackground')"
/> />
</el-form-item> </el-form-item>
<el-form-item label='顶栏菜单激活项文字色'> <el-form-item label="顶栏菜单激活项文字色">
<el-color-picker <el-color-picker
@change="onCommitColorState($event, 'headerBarTabActiveColor')" @change="onCommitColorState($event, 'headerBarTabActiveColor')"
:model-value="configStore.getColorVal('headerBarTabActiveColor')" :model-value="configStore.getColorVal('headerBarTabActiveColor')"
/> />
</el-form-item> </el-form-item>
</div> </div>
<el-popconfirm <el-popconfirm @confirm="restoreDefault" title="确定要恢复全部配置到默认值吗？">
@confirm='restoreDefault'
title='确定要恢复全部配置到默认值吗？'
>
<template #reference> <template #reference>
<div class='ba-center'> <div class="ba-center">
<el-button class='w80' type='info'>恢复默认</el-button> <el-button class="w80" type="info">恢复默认</el-button>
</div> </div>
</template> </template>
</el-popconfirm> </el-popconfirm>
@@ -216,7 +214,7 @@
</div> </div>
</template> </template>
<script setup lang='ts'> <script setup lang="ts">
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs' import { useNavTabs } from '@/stores/navTabs'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
@@ -269,7 +267,7 @@ const restoreDefault = () => {
} }
</script> </script>
<style scoped lang='scss'> <style scoped lang="scss">
.layout-config-drawer :deep(.el-input__inner) { .layout-config-drawer :deep(.el-input__inner) {
padding: 0 0 0 6px; padding: 0 0 0 6px;
} }

2
src/stores/config.ts
View File

@@ -17,7 +17,7 @@ export const useConfig = defineStore(
mainAnimation: 'slide-right', mainAnimation: 'slide-right',
// 是否暗黑模式 // 是否暗黑模式
isDark: false, isDark: false,
elementUiPrimary:['#1a94fa','#1a94fa'],
/* 侧边菜单 */ /* 侧边菜单 */
// 侧边菜单背景色 // 侧边菜单背景色
menuBackground: ['#ffffff', '#1d1e1f'], menuBackground: ['#ffffff', '#1d1e1f'],

1
src/stores/interface/index.ts
View File

@@ -12,6 +12,7 @@ export interface Layout {
menuCollapse: boolean menuCollapse: boolean
menuUniqueOpened: boolean menuUniqueOpened: boolean
menuShowTopBar: boolean menuShowTopBar: boolean
elementUiPrimary: string[]
menuBackground: string[] menuBackground: string[]
menuColor: string[] menuColor: string[]
menuActiveBackground: string[] menuActiveBackground: string[]

3
src/views/voltage/sags/operationsManagement/index.vue
View File

@@ -11,9 +11,6 @@
<el-input v-model="tableStore.table.params.loginName" placeholder="Please input" /> <el-input v-model="tableStore.table.params.loginName" placeholder="Please input" />
</el-form-item> --> </el-form-item> -->
</template> </template>
<template v-slot:operation>
<el-button :icon="Plus" type="primary" @click="addMenu">添加</el-button>
</template>
</TableHeader> </TableHeader>
<Table ref="tableRef" /> <Table ref="tableRef" />
</div> </div>