更新
This commit is contained in:
@@ -1,150 +1,140 @@
|
||||
<template>
|
||||
<div class="setting-container">
|
||||
<!-- 设置按钮 -->
|
||||
<div class="setting-btn" @click="showDrawer = true">
|
||||
<el-icon>
|
||||
<Setting />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- 设置抽屉 -->
|
||||
<el-drawer v-model="showDrawer" title="系统设置" :size="300" :close-on-click-modal="false">
|
||||
<div class="setting-content">
|
||||
<!-- 布局模式 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">布局模式</div>
|
||||
<div class="setting-value">
|
||||
<el-radio-group v-model="layoutMode" @change="handleLayoutModeChange">
|
||||
<el-radio label="default">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-default">
|
||||
<div class="layout-aside-left"></div>
|
||||
<div class="layout-aside-right"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>双栏布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
<el-radio label="menu">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-menu">
|
||||
<div class="layout-aside"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>菜单布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
<el-radio label="top">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-top">
|
||||
<div class="layout-header"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>顶部布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主题色 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">主题色</div>
|
||||
<div class="setting-value">
|
||||
<div class="color-picker-wrapper">
|
||||
<el-color-picker v-model="themeColor" show-alpha :predefine="predefineColors"
|
||||
@change="handleThemeColorChange" />
|
||||
</div>
|
||||
<div class="color-presets">
|
||||
<div v-for="color in predefineColors" :key="color" class="color-preset"
|
||||
:class="{ active: themeColor === color }" :style="{ backgroundColor: color }"
|
||||
@click="handleColorPresetClick(color)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主题模式 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">主题模式</div>
|
||||
<div class="setting-value">
|
||||
<el-radio-group v-model="isDark" @change="handleThemeModeChange">
|
||||
<el-radio :label="false">
|
||||
<el-icon>
|
||||
<Sunny />
|
||||
</el-icon>
|
||||
浅色
|
||||
</el-radio>
|
||||
<el-radio :label="true">
|
||||
<el-icon>
|
||||
<Moon />
|
||||
</el-icon>
|
||||
深色
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签栏 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">
|
||||
<span>显示标签栏</span>
|
||||
<el-tooltip content="开启后页面顶部显示标签页" placement="top">
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="setting-value">
|
||||
<el-switch v-model="showTags" @change="handleShowTagsChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 面包屑 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">
|
||||
<span>显示面包屑</span>
|
||||
<el-tooltip content="开启后页面顶部显示面包屑导航" placement="top">
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="setting-value">
|
||||
<el-switch v-model="showBreadcrumb" @change="handleShowBreadcrumbChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="setting-actions">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<Check />
|
||||
</el-icon>
|
||||
保存配置
|
||||
</el-button>
|
||||
<el-button @click="handleReset">
|
||||
<el-icon>
|
||||
<RefreshLeft />
|
||||
</el-icon>
|
||||
重置默认
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="setting-container">
|
||||
<!-- 设置按钮 -->
|
||||
<div class="setting-btn" @click="showDrawer = true">
|
||||
<el-icon>
|
||||
<Setting />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
|
||||
<!-- 设置抽屉 -->
|
||||
<el-drawer v-model="showDrawer" title="系统设置" :size="300" :close-on-click-modal="false">
|
||||
<div class="setting-content">
|
||||
<!-- 布局模式 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">布局模式</div>
|
||||
<div class="setting-value">
|
||||
<el-radio-group v-model="layoutMode" @change="handleLayoutModeChange">
|
||||
<el-radio label="default">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-default">
|
||||
<div class="layout-aside-left"></div>
|
||||
<div class="layout-aside-right"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>双栏布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
<el-radio label="menu">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-menu">
|
||||
<div class="layout-aside"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>菜单布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
<el-radio label="top">
|
||||
<div class="layout-option">
|
||||
<div class="layout-preview layout-top">
|
||||
<div class="layout-header"></div>
|
||||
<div class="layout-main"></div>
|
||||
</div>
|
||||
<span>顶部布局</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主题色 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">主题色</div>
|
||||
<div class="setting-value">
|
||||
<div class="color-picker-wrapper">
|
||||
<el-color-picker v-model="themeColor" show-alpha :predefine="predefineColors" @change="handleThemeColorChange" />
|
||||
</div>
|
||||
<div class="color-presets">
|
||||
<div v-for="color in predefineColors" :key="color" class="color-preset" :class="{ active: themeColor === color }" :style="{ backgroundColor: color }" @click="handleColorPresetClick(color)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主题模式 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">主题模式</div>
|
||||
<div class="setting-value">
|
||||
<el-radio-group v-model="isDark" @change="handleThemeModeChange">
|
||||
<el-radio :label="false">
|
||||
<el-icon>
|
||||
<Sunny />
|
||||
</el-icon>
|
||||
浅色
|
||||
</el-radio>
|
||||
<el-radio :label="true">
|
||||
<el-icon>
|
||||
<Moon />
|
||||
</el-icon>
|
||||
深色
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签栏 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">
|
||||
<span>显示标签栏</span>
|
||||
<el-tooltip content="开启后页面顶部显示标签页" placement="top">
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="setting-value">
|
||||
<el-switch v-model="showTags" @change="handleShowTagsChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 面包屑 -->
|
||||
<div class="setting-item">
|
||||
<div class="setting-title">
|
||||
<span>显示面包屑</span>
|
||||
<el-tooltip content="开启后页面顶部显示面包屑导航" placement="top">
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="setting-value">
|
||||
<el-switch v-model="showBreadcrumb" @change="handleShowBreadcrumbChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="setting-actions">
|
||||
<el-button type="primary" @click="handleSave">
|
||||
<el-icon>
|
||||
<Check />
|
||||
</el-icon>
|
||||
保存配置
|
||||
</el-button>
|
||||
<el-button @click="handleReset">
|
||||
<el-icon>
|
||||
<RefreshLeft />
|
||||
</el-icon>
|
||||
重置默认
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
Setting,
|
||||
Sunny,
|
||||
Moon,
|
||||
QuestionFilled,
|
||||
Check,
|
||||
RefreshLeft,
|
||||
} from '@element-plus/icons-vue'
|
||||
import { Setting, Sunny, Moon, QuestionFilled, Check, RefreshLeft } from '@element-plus/icons-vue'
|
||||
import { useLayoutStore } from '@/stores/modules/layout'
|
||||
|
||||
defineOptions({
|
||||
@@ -267,7 +257,6 @@ onMounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.setting-container {
|
||||
|
||||
// 设置按钮
|
||||
.setting-btn {
|
||||
position: fixed;
|
||||
@@ -321,7 +310,6 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.setting-value {
|
||||
|
||||
// 布局选项
|
||||
:deep(.el-radio-group) {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user