主题色尝试
This commit is contained in:
仲么了
10
src/App.vue
10
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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@ export const useConfig = defineStore(
|
||||
mainAnimation: 'slide-right',
|
||||
// 是否暗黑模式
|
||||
isDark: false,
|
||||
|
||||
elementUiPrimary:['#1a94fa','#1a94fa'],
|
||||
/* 侧边菜单 */
|
||||
// 侧边菜单背景色
|
||||
menuBackground: ['#ffffff', '#1d1e1f'],
|
||||
|
||||
@@ -12,6 +12,7 @@ export interface Layout {
|
||||
menuCollapse: boolean
|
||||
menuUniqueOpened: boolean
|
||||
menuShowTopBar: boolean
|
||||
elementUiPrimary: string[]
|
||||
menuBackground: string[]
|
||||
menuColor: string[]
|
||||
menuActiveBackground: string[]
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user