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

主题颜色修改

Browse Source
This commit is contained in:
仲么了
2024-01-30 13:47:03 +08:00
parent 417f6788a3
commit b921e2a7e5
8 changed files with 156 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}