feat(projects): 主题配置抽屉：迁移暗黑模式、布局模式、添加颜色选择面板
This commit is contained in:
Soybean
parent
bf020a8258
commit
912bfdf439
@ -1,4 +1,4 @@
|
||||
import { EnumThemeTabMode, EnumThemeHorizontalMenuPosition, EnumThemeAnimateMode } from '@/enum';
|
||||
import { EnumThemeLayoutMode, EnumThemeTabMode, EnumThemeHorizontalMenuPosition, EnumThemeAnimateMode } from '@/enum';
|
||||
import type { ThemeLayoutMode, ThemeTabMode, ThemeHorizontalMenuPosition, ThemeAnimateMode } from './enum';
|
||||
|
||||
/** 主题相关类型 */
|
||||
@ -37,6 +37,12 @@ interface ThemeLayout {
|
||||
minWidth: number;
|
||||
/** 布局模式 */
|
||||
mode: ThemeLayoutMode;
|
||||
/** 布局模式列表 */
|
||||
modeList: ThemeLayoutModeList[];
|
||||
}
|
||||
interface ThemeLayoutModeList {
|
||||
value: ThemeLayoutMode;
|
||||
label: EnumThemeLayoutMode;
|
||||
}
|
||||
|
||||
/** 其他主题颜色 */
|
||||
|
||||
@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<soybean-layout
|
||||
:mode="mode"
|
||||
:fixed-header-and-tab="theme.fixedHeaderAndTab"
|
||||
:header-height="theme.header.height"
|
||||
:tab-visible="theme.tab.visible"
|
||||
:tab-height="theme.tab.height"
|
||||
:sider-visible="siderVisible"
|
||||
:sider-width="siderWidth"
|
||||
:sider-collapsed-width="siderCollapsedWidth"
|
||||
:sider-collapse="false"
|
||||
:fixed-footer="theme.footer.fixed"
|
||||
>
|
||||
<template #header>
|
||||
<global-header />
|
||||
</template>
|
||||
<template #tab>
|
||||
<global-tab />
|
||||
</template>
|
||||
<template #sider>
|
||||
<global-sider />
|
||||
</template>
|
||||
<global-content />
|
||||
<template #footer>
|
||||
<global-footer />
|
||||
</template>
|
||||
</soybean-layout>
|
||||
<setting-drawer />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useAppStore, useThemeStore } from '@/store';
|
||||
import { SoybeanLayout } from '@/package';
|
||||
import { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter } from '../common';
|
||||
|
||||
const app = useAppStore();
|
||||
const theme = useThemeStore();
|
||||
|
||||
const siderVisible = computed(() => theme.layout.mode !== 'horizontal');
|
||||
|
||||
type LayoutMode = 'vertical' | 'horizontal';
|
||||
const mode = computed(() => {
|
||||
const vertical: LayoutMode = 'vertical';
|
||||
const horizontal: LayoutMode = 'horizontal';
|
||||
return theme.layout.mode.includes(vertical) ? vertical : horizontal;
|
||||
});
|
||||
|
||||
const siderWidth = computed(() => {
|
||||
const { width, mixWidth, mixChildMenuWidth } = theme.sider;
|
||||
const isVerticalMix = theme.layout.mode === 'vertical-mix';
|
||||
let w = isVerticalMix ? mixWidth : width;
|
||||
if (isVerticalMix && app.mixSiderFixed) {
|
||||
w += mixChildMenuWidth;
|
||||
}
|
||||
return w;
|
||||
});
|
||||
|
||||
const siderCollapsedWidth = computed(() => {
|
||||
const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = theme.sider;
|
||||
const isVerticalMix = theme.layout.mode === 'vertical-mix';
|
||||
let w = isVerticalMix ? mixCollapsedWidth : collapsedWidth;
|
||||
if (isVerticalMix && app.mixSiderFixed) {
|
||||
w += mixChildMenuWidth;
|
||||
}
|
||||
return w;
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<n-divider title-placement="center">深色主题</n-divider>
|
||||
<div class="flex-center">
|
||||
<n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
|
||||
<template #checked>
|
||||
<icon-mdi-white-balance-sunny class="text-14px text-primary" />
|
||||
</template>
|
||||
<template #unchecked>
|
||||
<icon-mdi-moon-waning-crescent class="text-14px text-primary" />
|
||||
</template>
|
||||
</n-switch>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { NDivider, NSwitch } from 'naive-ui';
|
||||
import { useThemeStore } from '@/store';
|
||||
|
||||
const theme = useThemeStore();
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.n-switch__rail) {
|
||||
background-color: #000e1c !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div
|
||||
class="border-2px rounded-6px cursor-pointer hover:border-primary"
|
||||
:class="[checked ? 'border-primary' : 'border-transparent']"
|
||||
>
|
||||
<n-tooltip :placement="activeConfig.placement" trigger="hover">
|
||||
<template #trigger>
|
||||
<div class="layout-checkbox__shadow relative w-56px h-48px bg-white rounded-4px overflow-hidden">
|
||||
<div class="absolute-lt bg-[#273352]" :class="activeConfig.menuClass"></div>
|
||||
<div class="absolute-rb bg-[#f0f2f5]" :class="activeConfig.mainClass"></div>
|
||||
</div>
|
||||
</template>
|
||||
<span>{{ label }}</span>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { NTooltip } from 'naive-ui';
|
||||
import type { FollowerPlacement } from 'vueuc';
|
||||
import { EnumThemeLayoutMode } from '@/enum';
|
||||
import type { ThemeLayoutMode } from '@/interface';
|
||||
|
||||
interface Props {
|
||||
/** 布局模式 */
|
||||
mode: ThemeLayoutMode;
|
||||
/** 布局模式文本 */
|
||||
label: EnumThemeLayoutMode;
|
||||
/** 选中状态 */
|
||||
checked: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
type LayoutConfig = {
|
||||
[key in ThemeLayoutMode]: {
|
||||
placement: FollowerPlacement;
|
||||
menuClass: string;
|
||||
mainClass: string;
|
||||
};
|
||||
};
|
||||
|
||||
const layoutConfig: LayoutConfig = {
|
||||
vertical: {
|
||||
placement: 'bottom-start',
|
||||
menuClass: 'w-1/3 h-full',
|
||||
mainClass: 'w-2/3 h-3/4'
|
||||
},
|
||||
'vertical-mix': {
|
||||
placement: 'bottom',
|
||||
menuClass: 'w-1/4 h-full',
|
||||
mainClass: 'w-2/3 h-3/4'
|
||||
},
|
||||
horizontal: {
|
||||
placement: 'bottom',
|
||||
menuClass: 'w-full h-1/4',
|
||||
mainClass: 'w-full h-3/4'
|
||||
},
|
||||
'horizontal-mix': {
|
||||
placement: 'bottom-end',
|
||||
menuClass: 'w-full h-1/4',
|
||||
mainClass: 'w-2/3 h-3/4'
|
||||
}
|
||||
};
|
||||
|
||||
const activeConfig = computed(() => layoutConfig[props.mode]);
|
||||
</script>
|
||||
<style scoped>
|
||||
.layout-checkbox__shadow {
|
||||
box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
import LayoutCheckbox from './LayoutCheckbox.vue';
|
||||
|
||||
export { LayoutCheckbox };
|
||||
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<n-divider title-placement="center">布局模式</n-divider>
|
||||
<n-space justify="space-between">
|
||||
<layout-checkbox
|
||||
v-for="item in theme.layout.modeList"
|
||||
:key="item.value"
|
||||
:mode="item.value"
|
||||
:label="item.label"
|
||||
:checked="item.value === theme.layout.mode"
|
||||
@click="theme.setLayoutMode(item.value)"
|
||||
/>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NDivider, NSpace } from 'naive-ui';
|
||||
import { useThemeStore } from '@/store';
|
||||
import { LayoutCheckbox } from './components';
|
||||
|
||||
const theme = useThemeStore();
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="flex-center w-20px h-20px rounded-2px shadow cursor-pointer" :style="{ backgroundColor: color }">
|
||||
<icon-ic-outline-check v-if="checked" :class="[iconClass, isWhite ? 'text-gray-700' : 'text-white']" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
interface Props {
|
||||
/** 颜色 */
|
||||
color: string;
|
||||
/** 是否选中 */
|
||||
checked: boolean;
|
||||
/** 图标的class */
|
||||
iconClass?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
iconClass: 'text-14px'
|
||||
});
|
||||
|
||||
const whiteColors = ['#ffffff', '#fff', 'rgb(255,255,255)'];
|
||||
const isWhite = computed(() => whiteColors.includes(props.color));
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<n-modal :show="visible" preset="card" class="w-640px h-480px" @close="handleClose">
|
||||
<div class="flex-x-center">
|
||||
<n-gradient-text type="primary" :size="24">中国传统颜色</n-gradient-text>
|
||||
</div>
|
||||
<n-tabs>
|
||||
<n-tab-pane v-for="item in traditionColors" :key="item.label" :name="item.label" :tab="item.label">
|
||||
<n-grid :cols="8" :x-gap="16" :y-gap="8">
|
||||
<n-grid-item v-for="i in item.data" :key="i.label">
|
||||
<color-checkbox
|
||||
class="!w-full !h-36px !rounded-4px"
|
||||
:color="i.color"
|
||||
:checked="i.color === theme.themeColor"
|
||||
icon-class="text-20px"
|
||||
@click="theme.setThemeColor(i.color)"
|
||||
/>
|
||||
<p class="text-center">{{ i.label }}</p>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NModal, NGradientText, NTabs, NTabPane, NGrid, NGridItem } from 'naive-ui';
|
||||
import { traditionColors } from '@/settings';
|
||||
import { useThemeStore } from '@/store';
|
||||
import ColorCheckbox from './ColorCheckbox.vue';
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'close'): void;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const theme = useThemeStore();
|
||||
|
||||
function handleClose() {
|
||||
emit('close');
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,4 @@
|
||||
import ColorCheckbox from './ColorCheckbox.vue';
|
||||
import ColorModal from './ColorModal.vue';
|
||||
|
||||
export { ColorCheckbox, ColorModal };
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<n-divider title-placement="center">系统主题</n-divider>
|
||||
<n-grid :cols="8" :x-gap="8" :y-gap="12">
|
||||
<n-grid-item v-for="color in theme.themeColorList" :key="color" class="flex-x-center">
|
||||
<color-checkbox :color="color" :checked="color === theme.themeColor" @click="theme.setThemeColor(color)" />
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
<n-button :block="true" :type="otherColorBtnType" class="mt-12px" @click="openModal">更多颜色</n-button>
|
||||
<color-modal :visible="visible" @close="closeModal" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { NDivider, NGrid, NGridItem, NButton } from 'naive-ui';
|
||||
import { useThemeStore } from '@/store';
|
||||
import { useBoolean } from '@/hooks';
|
||||
import { ColorCheckbox, ColorModal } from './components';
|
||||
|
||||
const theme = useThemeStore();
|
||||
|
||||
const { bool: visible, setTrue: openModal, setFalse: closeModal } = useBoolean();
|
||||
|
||||
const isInOther = computed(() => !theme.themeColorList.includes(theme.themeColor));
|
||||
const otherColorBtnType = computed(() => (isInOther.value ? 'primary' : 'default'));
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -1,3 +1,6 @@
|
||||
import DrawerButton from './DrawerButton/index.vue';
|
||||
import DarkMode from './DarkMode/index.vue';
|
||||
import LayoutMode from './LayoutMode/index.vue';
|
||||
import ThemeColorSelect from './ThemeColorSelect/index.vue';
|
||||
|
||||
export { DrawerButton };
|
||||
export { DarkMode, DrawerButton, LayoutMode, ThemeColorSelect };
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<n-drawer :show="app.settingDrawerVisible" display-directive="show" :width="330" @mask-click="app.closeSettingDrawer">
|
||||
<n-drawer-content title="主题配置" :native-scrollbar="false"></n-drawer-content>
|
||||
<n-drawer-content title="主题配置" :native-scrollbar="false">
|
||||
<dark-mode />
|
||||
<layout-mode />
|
||||
<theme-color-select />
|
||||
</n-drawer-content>
|
||||
</n-drawer>
|
||||
<drawer-button />
|
||||
</template>
|
||||
@ -8,7 +12,7 @@
|
||||
<script setup lang="ts">
|
||||
import { NDrawer, NDrawerContent } from 'naive-ui';
|
||||
import { useAppStore } from '@/store';
|
||||
import { DrawerButton } from './components';
|
||||
import { DrawerButton, DarkMode, LayoutMode, ThemeColorSelect } from './components';
|
||||
|
||||
const app = useAppStore();
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import Layout from './Layout/index.vue';
|
||||
import BasicLayout from './BasicLayout/index.vue';
|
||||
import BlankLayout from './BlankLayout/index.vue';
|
||||
|
||||
export { Layout, BasicLayout, BlankLayout };
|
||||
export { BasicLayout, BlankLayout };
|
||||
|
||||
678
src/settings/color.json
Normal file
678
src/settings/color.json
Normal file
@ -0,0 +1,678 @@
|
||||
[
|
||||
{
|
||||
"label": "红色系",
|
||||
"data": [
|
||||
{
|
||||
"label": "绾",
|
||||
"color": "#A98175"
|
||||
},
|
||||
{
|
||||
"label": "檀",
|
||||
"color": "#B36D61"
|
||||
},
|
||||
{
|
||||
"label": "栗色",
|
||||
"color": "#60281E"
|
||||
},
|
||||
{
|
||||
"label": "玄",
|
||||
"color": "#622A1D"
|
||||
},
|
||||
{
|
||||
"label": "胭脂",
|
||||
"color": "#9D2933"
|
||||
},
|
||||
{
|
||||
"label": "殷红",
|
||||
"color": "#BE002F"
|
||||
},
|
||||
{
|
||||
"label": "枣红",
|
||||
"color": "#C32136"
|
||||
},
|
||||
{
|
||||
"label": "赤",
|
||||
"color": "#C3272B"
|
||||
},
|
||||
{
|
||||
"label": "绯红",
|
||||
"color": "#C83C23"
|
||||
},
|
||||
{
|
||||
"label": "赫赤",
|
||||
"color": "#C91F37"
|
||||
},
|
||||
{
|
||||
"label": "樱桃红",
|
||||
"color": "#C93756"
|
||||
},
|
||||
{
|
||||
"label": "茜色",
|
||||
"color": "#CB3A56"
|
||||
},
|
||||
{
|
||||
"label": "海棠红",
|
||||
"color": "#DB5A6B"
|
||||
},
|
||||
{
|
||||
"label": "酡红",
|
||||
"color": "#DC3023"
|
||||
},
|
||||
{
|
||||
"label": "妃色",
|
||||
"color": "#ED5736"
|
||||
},
|
||||
{
|
||||
"label": "嫣红",
|
||||
"color": "#EF7A82"
|
||||
},
|
||||
{
|
||||
"label": "品红",
|
||||
"color": "#F00056"
|
||||
},
|
||||
{
|
||||
"label": "石榴红",
|
||||
"color": "#F20C00"
|
||||
},
|
||||
{
|
||||
"label": "银红",
|
||||
"color": "#F05654"
|
||||
},
|
||||
{
|
||||
"label": "彤",
|
||||
"color": "#F35336"
|
||||
},
|
||||
{
|
||||
"label": "桃红",
|
||||
"color": "#F47983"
|
||||
},
|
||||
{
|
||||
"label": "酡颜",
|
||||
"color": "#F9906F"
|
||||
},
|
||||
{
|
||||
"label": "洋红",
|
||||
"color": "#FF0097"
|
||||
},
|
||||
{
|
||||
"label": "大红",
|
||||
"color": "#FF2121"
|
||||
},
|
||||
{
|
||||
"label": "火红",
|
||||
"color": "#FF2D51"
|
||||
},
|
||||
{
|
||||
"label": "炎",
|
||||
"color": "#FF3300"
|
||||
},
|
||||
{
|
||||
"label": "朱红",
|
||||
"color": "#FF4C00"
|
||||
},
|
||||
{
|
||||
"label": "丹",
|
||||
"color": "#FF4E20"
|
||||
},
|
||||
{
|
||||
"label": "粉红",
|
||||
"color": "#FFB3A7"
|
||||
},
|
||||
{
|
||||
"label": "藕荷",
|
||||
"color": "#E4C6D0"
|
||||
},
|
||||
{
|
||||
"label": "藕",
|
||||
"color": "#EDD1D8"
|
||||
},
|
||||
{
|
||||
"label": "水红",
|
||||
"color": "#F3D3E7"
|
||||
},
|
||||
{
|
||||
"label": "鱼肚白",
|
||||
"color": "#FCEFE8"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "橙色系",
|
||||
"data": [
|
||||
{
|
||||
"label": "褐色",
|
||||
"color": "#6E511E"
|
||||
},
|
||||
{
|
||||
"label": "棕黑",
|
||||
"color": "#7C4B00"
|
||||
},
|
||||
{
|
||||
"label": "赭色",
|
||||
"color": "#955539"
|
||||
},
|
||||
{
|
||||
"label": "棕红",
|
||||
"color": "#9B4400"
|
||||
},
|
||||
{
|
||||
"label": "赭",
|
||||
"color": "#9C5333"
|
||||
},
|
||||
{
|
||||
"label": "驼色",
|
||||
"color": "#A88462"
|
||||
},
|
||||
{
|
||||
"label": "棕色",
|
||||
"color": "#B25D25"
|
||||
},
|
||||
{
|
||||
"label": "茶色",
|
||||
"color": "#B35C44"
|
||||
},
|
||||
{
|
||||
"label": "琥珀",
|
||||
"color": "#CA6924"
|
||||
},
|
||||
{
|
||||
"label": "黄栌",
|
||||
"color": "#E29C45"
|
||||
},
|
||||
{
|
||||
"label": "橙色",
|
||||
"color": "#FA8C35"
|
||||
},
|
||||
{
|
||||
"label": "橘红",
|
||||
"color": "#FF7500"
|
||||
},
|
||||
{
|
||||
"label": "橘黄",
|
||||
"color": "#FF8936"
|
||||
},
|
||||
{
|
||||
"label": "杏红",
|
||||
"color": "#FF8C31"
|
||||
},
|
||||
{
|
||||
"label": "橙黄",
|
||||
"color": "#FFA400"
|
||||
},
|
||||
{
|
||||
"label": "杏黄",
|
||||
"color": "#FFA631"
|
||||
},
|
||||
{
|
||||
"label": "姜黄",
|
||||
"color": "#FFC773"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "黄色系",
|
||||
"data": [
|
||||
{
|
||||
"label": "黧",
|
||||
"color": "#5D513C"
|
||||
},
|
||||
{
|
||||
"label": "黎",
|
||||
"color": "#75664D"
|
||||
},
|
||||
{
|
||||
"label": "棕绿",
|
||||
"color": "#827100"
|
||||
},
|
||||
{
|
||||
"label": "秋色",
|
||||
"color": "#896C39"
|
||||
},
|
||||
{
|
||||
"label": "苍黄",
|
||||
"color": "#A29B7C"
|
||||
},
|
||||
{
|
||||
"label": "乌金",
|
||||
"color": "#A78E44"
|
||||
},
|
||||
{
|
||||
"label": "棕黄",
|
||||
"color": "#AE7000"
|
||||
},
|
||||
{
|
||||
"label": "昏黄",
|
||||
"color": "#C89B40"
|
||||
},
|
||||
{
|
||||
"label": "枯黄",
|
||||
"color": "#D3B17D"
|
||||
},
|
||||
{
|
||||
"label": "秋香色",
|
||||
"color": "#D9B611"
|
||||
},
|
||||
{
|
||||
"label": "金",
|
||||
"color": "#EACD76"
|
||||
},
|
||||
{
|
||||
"label": "牙",
|
||||
"color": "#EEDEB0"
|
||||
},
|
||||
{
|
||||
"label": "缃色",
|
||||
"color": "#F0C239"
|
||||
},
|
||||
{
|
||||
"label": "赤金",
|
||||
"color": "#F2BE45"
|
||||
},
|
||||
{
|
||||
"label": "鸭黄",
|
||||
"color": "#FAFF72"
|
||||
},
|
||||
{
|
||||
"label": "鹅黄",
|
||||
"color": "#FFF143"
|
||||
},
|
||||
{
|
||||
"label": "缟",
|
||||
"color": "#F2ECDE"
|
||||
},
|
||||
{
|
||||
"label": "象牙白",
|
||||
"color": "#FFFBF0"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "绿色系",
|
||||
"data": [
|
||||
{
|
||||
"label": "竹青",
|
||||
"color": "#789262"
|
||||
},
|
||||
{
|
||||
"label": "黯",
|
||||
"color": "#41555D"
|
||||
},
|
||||
{
|
||||
"label": "黛绿",
|
||||
"color": "#426666"
|
||||
},
|
||||
{
|
||||
"label": "松花绿",
|
||||
"color": "#057748"
|
||||
},
|
||||
{
|
||||
"label": "绿沈",
|
||||
"color": "#0C8918"
|
||||
},
|
||||
{
|
||||
"label": "深绿",
|
||||
"color": "#009900"
|
||||
},
|
||||
{
|
||||
"label": "青葱",
|
||||
"color": "#0AA344"
|
||||
},
|
||||
{
|
||||
"label": "铜绿",
|
||||
"color": "#549688"
|
||||
},
|
||||
{
|
||||
"label": "苍翠",
|
||||
"color": "#519A73"
|
||||
},
|
||||
{
|
||||
"label": "松柏绿",
|
||||
"color": "#21A675"
|
||||
},
|
||||
{
|
||||
"label": "葱青",
|
||||
"color": "#0EB83A"
|
||||
},
|
||||
{
|
||||
"label": "油绿",
|
||||
"color": "#00BC12"
|
||||
},
|
||||
{
|
||||
"label": "绿",
|
||||
"color": "#00E500"
|
||||
},
|
||||
{
|
||||
"label": "草绿",
|
||||
"color": "#40DE5A"
|
||||
},
|
||||
{
|
||||
"label": "豆青",
|
||||
"color": "#96CE54"
|
||||
},
|
||||
{
|
||||
"label": "豆绿",
|
||||
"color": "#9ED048"
|
||||
},
|
||||
{
|
||||
"label": "葱绿",
|
||||
"color": "#9ED900"
|
||||
},
|
||||
{
|
||||
"label": "葱黄",
|
||||
"color": "#A3D900"
|
||||
},
|
||||
{
|
||||
"label": "柳绿",
|
||||
"color": "#AFDD22"
|
||||
},
|
||||
{
|
||||
"label": "嫩绿",
|
||||
"color": "#BDDD22"
|
||||
},
|
||||
{
|
||||
"label": "柳黄",
|
||||
"color": "#C9DD22"
|
||||
},
|
||||
{
|
||||
"label": "松花",
|
||||
"color": "#BCE672"
|
||||
},
|
||||
{
|
||||
"label": "樱草色",
|
||||
"color": "#EAFF56"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "青色系",
|
||||
"data": [
|
||||
{
|
||||
"label": "水",
|
||||
"color": "#88ADA6"
|
||||
},
|
||||
{
|
||||
"label": "青碧",
|
||||
"color": "#48C0A3"
|
||||
},
|
||||
{
|
||||
"label": "碧",
|
||||
"color": "#1BD1A5"
|
||||
},
|
||||
{
|
||||
"label": "石青",
|
||||
"color": "#7BCFA6"
|
||||
},
|
||||
{
|
||||
"label": "青翠",
|
||||
"color": "#00E079"
|
||||
},
|
||||
{
|
||||
"label": "青",
|
||||
"color": "#00E09E"
|
||||
},
|
||||
{
|
||||
"label": "碧绿",
|
||||
"color": "#2ADD9C"
|
||||
},
|
||||
{
|
||||
"label": "玉",
|
||||
"color": "#2EDFA3"
|
||||
},
|
||||
{
|
||||
"label": "翡翠",
|
||||
"color": "#3DE1AD"
|
||||
},
|
||||
{
|
||||
"label": "缥",
|
||||
"color": "#7FECAD"
|
||||
},
|
||||
{
|
||||
"label": "碧蓝",
|
||||
"color": "#3EEDE7"
|
||||
},
|
||||
{
|
||||
"label": "湖绿",
|
||||
"color": "#25F8CD"
|
||||
},
|
||||
{
|
||||
"label": "艾绿",
|
||||
"color": "#A4E2C6"
|
||||
},
|
||||
{
|
||||
"label": "青白",
|
||||
"color": "#C0EBD7"
|
||||
},
|
||||
{
|
||||
"label": "水绿",
|
||||
"color": "#D4F2E7"
|
||||
},
|
||||
{
|
||||
"label": "鸭卵青",
|
||||
"color": "#E0EEE8"
|
||||
},
|
||||
{
|
||||
"label": "素",
|
||||
"color": "#E0F0E9"
|
||||
},
|
||||
{
|
||||
"label": "荼白",
|
||||
"color": "#F3F9F1"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "蓝色系",
|
||||
"data": [
|
||||
{
|
||||
"label": "藏蓝",
|
||||
"color": "#3B2E7E"
|
||||
},
|
||||
{
|
||||
"label": "宝蓝",
|
||||
"color": "#4B5CC4"
|
||||
},
|
||||
{
|
||||
"label": "绀青",
|
||||
"color": "#003371"
|
||||
},
|
||||
{
|
||||
"label": "藏青",
|
||||
"color": "#2E4E7E"
|
||||
},
|
||||
{
|
||||
"label": "靛蓝",
|
||||
"color": "#065279"
|
||||
},
|
||||
{
|
||||
"label": "靛青",
|
||||
"color": "#177CB0"
|
||||
},
|
||||
{
|
||||
"label": "群青",
|
||||
"color": "#4C8DAE"
|
||||
},
|
||||
{
|
||||
"label": "蓝",
|
||||
"color": "#44CEF6"
|
||||
},
|
||||
{
|
||||
"label": "湖蓝",
|
||||
"color": "#30DFF3"
|
||||
},
|
||||
{
|
||||
"label": "蔚蓝",
|
||||
"color": "#70F3FF"
|
||||
},
|
||||
{
|
||||
"label": "月白",
|
||||
"color": "#D6ECF0"
|
||||
},
|
||||
{
|
||||
"label": "水蓝",
|
||||
"color": "#D2F0F4"
|
||||
},
|
||||
{
|
||||
"label": "莹白",
|
||||
"color": "#E3F9FD"
|
||||
},
|
||||
{
|
||||
"label": "雪白",
|
||||
"color": "#F0FCFF"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "紫色系",
|
||||
"data": [
|
||||
{
|
||||
"label": "黛",
|
||||
"color": "#4A4266"
|
||||
},
|
||||
{
|
||||
"label": "紫檀",
|
||||
"color": "#4C211B"
|
||||
},
|
||||
{
|
||||
"label": "紫棠",
|
||||
"color": "#56004F"
|
||||
},
|
||||
{
|
||||
"label": "黛紫",
|
||||
"color": "#574266"
|
||||
},
|
||||
{
|
||||
"label": "绛紫",
|
||||
"color": "#8C4356"
|
||||
},
|
||||
{
|
||||
"label": "紫酱",
|
||||
"color": "#815463"
|
||||
},
|
||||
{
|
||||
"label": "酱紫",
|
||||
"color": "#815476"
|
||||
},
|
||||
{
|
||||
"label": "黝",
|
||||
"color": "#6B6882"
|
||||
},
|
||||
{
|
||||
"label": "青莲",
|
||||
"color": "#801DAE"
|
||||
},
|
||||
{
|
||||
"label": "紫",
|
||||
"color": "#8D4BBB"
|
||||
},
|
||||
{
|
||||
"label": "雪青",
|
||||
"color": "#B0A4E3"
|
||||
},
|
||||
{
|
||||
"label": "丁香",
|
||||
"color": "#CCA4E3"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "灰色系",
|
||||
"data": [
|
||||
{
|
||||
"label": "黑",
|
||||
"color": "#000000"
|
||||
},
|
||||
{
|
||||
"label": "漆黑",
|
||||
"color": "#161823"
|
||||
},
|
||||
{
|
||||
"label": "象牙黑",
|
||||
"color": "#312520"
|
||||
},
|
||||
{
|
||||
"label": "乌黑",
|
||||
"color": "#392F41"
|
||||
},
|
||||
{
|
||||
"label": "玄青",
|
||||
"color": "#3D3B4F"
|
||||
},
|
||||
{
|
||||
"label": "缁",
|
||||
"color": "#493131"
|
||||
},
|
||||
{
|
||||
"label": "黝黑",
|
||||
"color": "#665757"
|
||||
},
|
||||
{
|
||||
"label": "鸦青",
|
||||
"color": "#424C50"
|
||||
},
|
||||
{
|
||||
"label": "黛蓝",
|
||||
"color": "#425066"
|
||||
},
|
||||
{
|
||||
"label": "苍黑",
|
||||
"color": "#395260"
|
||||
},
|
||||
{
|
||||
"label": "墨",
|
||||
"color": "#50616D"
|
||||
},
|
||||
{
|
||||
"label": "灰",
|
||||
"color": "#808080"
|
||||
},
|
||||
{
|
||||
"label": "苍",
|
||||
"color": "#75878A"
|
||||
},
|
||||
{
|
||||
"label": "墨灰",
|
||||
"color": "#758A99"
|
||||
},
|
||||
{
|
||||
"label": "苍青",
|
||||
"color": "#7397AB"
|
||||
},
|
||||
{
|
||||
"label": "蓝灰",
|
||||
"color": "#A1AFC9"
|
||||
},
|
||||
{
|
||||
"label": "老银",
|
||||
"color": "#BACAC6"
|
||||
},
|
||||
{
|
||||
"label": "蟹壳青",
|
||||
"color": "#BBCDC5"
|
||||
},
|
||||
{
|
||||
"label": "苍白",
|
||||
"color": "#D1D9E0"
|
||||
},
|
||||
{
|
||||
"label": "淡青",
|
||||
"color": "#D3E0F3"
|
||||
},
|
||||
{
|
||||
"label": "银白",
|
||||
"color": "#E9E7EF"
|
||||
},
|
||||
{
|
||||
"label": "霜",
|
||||
"color": "#E9F1F6"
|
||||
},
|
||||
{
|
||||
"label": "铅白",
|
||||
"color": "#F0F0F4"
|
||||
},
|
||||
{
|
||||
"label": "精白",
|
||||
"color": "#FFFFFF"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
13
src/settings/color.ts
Normal file
13
src/settings/color.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import colorJson from './color.json';
|
||||
|
||||
interface TraditionColorDetail {
|
||||
label: string;
|
||||
color: string;
|
||||
}
|
||||
interface TraditionColor {
|
||||
label: string;
|
||||
data: TraditionColorDetail[];
|
||||
}
|
||||
|
||||
/** 中国传统颜色 */
|
||||
export const traditionColors = colorJson as TraditionColor[];
|
||||
@ -1 +1,2 @@
|
||||
export * from './theme';
|
||||
export * from './color';
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import { EnumThemeTabMode, EnumThemeHorizontalMenuPosition, EnumThemeAnimateMode } from '@/enum';
|
||||
import { EnumThemeLayoutMode, EnumThemeTabMode, EnumThemeHorizontalMenuPosition, EnumThemeAnimateMode } from '@/enum';
|
||||
import type { ThemeSetting } from '@/interface';
|
||||
|
||||
const themeColorList = [
|
||||
'#409EFF',
|
||||
'#2d8cf0',
|
||||
'#0960bd',
|
||||
'#1890ff',
|
||||
'#009688',
|
||||
'#536dfe',
|
||||
'#409EFF',
|
||||
'#ff5c93',
|
||||
'#0960bd',
|
||||
'#ee4f12',
|
||||
'#2d8cf0',
|
||||
'#0096c7',
|
||||
'#9c27b0',
|
||||
'#ff9800',
|
||||
@ -18,7 +19,7 @@ const themeColorList = [
|
||||
'#171010',
|
||||
'#78DEC7',
|
||||
'#1768AC',
|
||||
'#FB9300',
|
||||
'#fadb14',
|
||||
'#FC5404'
|
||||
];
|
||||
|
||||
@ -26,15 +27,21 @@ const defaultThemeSetting: ThemeSetting = {
|
||||
darkMode: false,
|
||||
layout: {
|
||||
minWidth: 900,
|
||||
mode: 'vertical'
|
||||
mode: 'vertical',
|
||||
modeList: [
|
||||
{ value: 'vertical', label: EnumThemeLayoutMode.vertical },
|
||||
{ value: 'vertical-mix', label: EnumThemeLayoutMode['vertical-mix'] },
|
||||
{ value: 'horizontal', label: EnumThemeLayoutMode.horizontal },
|
||||
{ value: 'horizontal-mix', label: EnumThemeLayoutMode['horizontal-mix'] }
|
||||
]
|
||||
},
|
||||
themeColor: themeColorList[0],
|
||||
themeColorList,
|
||||
otherColor: {
|
||||
info: '#2080f0',
|
||||
success: '#67C23A',
|
||||
warning: '#E6A23C',
|
||||
error: '#F56C6C'
|
||||
success: '#52c41a',
|
||||
warning: '#faad14',
|
||||
error: '#f5222d'
|
||||
},
|
||||
fixedHeaderAndTab: true,
|
||||
showReload: true,
|
||||
|
||||
@ -63,14 +63,27 @@ type ThemeVars = Exclude<GlobalThemeOverrides['common'], undefined>;
|
||||
type ThemeVarsKeys = keyof ThemeVars;
|
||||
|
||||
/** 添加css vars至html */
|
||||
export function addThemeCssVarsToHtml(themeVars: ThemeVars) {
|
||||
export function addThemeCssVarsToHtml(themeVars: ThemeVars, action: 'add' | 'update' = 'add') {
|
||||
const keys = Object.keys(themeVars) as ThemeVarsKeys[];
|
||||
const style: string[] = [];
|
||||
keys.forEach(key => {
|
||||
style.push(`--${kebabCase(key)}: ${themeVars[key]}`);
|
||||
});
|
||||
const styleStr = style.join(';');
|
||||
document.documentElement.style.cssText = styleStr;
|
||||
if (action === 'add') {
|
||||
document.documentElement.style.cssText = styleStr;
|
||||
} else {
|
||||
document.documentElement.style.cssText += styleStr;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据主题颜色更新css vars
|
||||
* @param primaryColor
|
||||
*/
|
||||
export function updateThemeCssVarsByPrimary(primaryColor: string) {
|
||||
const themeColor = getThemeColors([['primary', primaryColor]]);
|
||||
addThemeCssVarsToHtml(themeColor, 'update');
|
||||
}
|
||||
|
||||
/** windicss 暗黑模式 */
|
||||
|
||||
@ -4,7 +4,7 @@ import { useOsTheme } from 'naive-ui';
|
||||
import { useElementSize } from '@vueuse/core';
|
||||
import { objectAssign } from '@/utils';
|
||||
import type { ThemeSetting, ThemeLayoutMode, ThemeTabMode, ThemeAnimateMode } from '@/interface';
|
||||
import { handleWindicssDarkMode } from './helpers';
|
||||
import { handleWindicssDarkMode, updateThemeCssVarsByPrimary } from './helpers';
|
||||
|
||||
export interface LayoutFunc {
|
||||
/** 设置布局最小宽度 */
|
||||
@ -251,3 +251,16 @@ export function setupHiddenScroll(minWidthOfLayout: ComputedRef<number>) {
|
||||
stopHandle();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听主题颜色的变化
|
||||
* @param themeColor
|
||||
*/
|
||||
export function themeColorWatcher(themeColor: Ref<string>) {
|
||||
const stopHandle = watch(themeColor, newValue => {
|
||||
updateThemeCssVarsByPrimary(newValue);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
stopHandle();
|
||||
});
|
||||
}
|
||||
|
||||
@ -17,7 +17,8 @@ import {
|
||||
usePageFunc,
|
||||
osThemeWatcher,
|
||||
setupWindicssDarkMode,
|
||||
setupHiddenScroll
|
||||
setupHiddenScroll,
|
||||
themeColorWatcher
|
||||
} from './hooks';
|
||||
import type { LayoutFunc, HeaderFunc, TabFunc, SiderFunc, FooterFunc, PageFunc } from './hooks';
|
||||
|
||||
@ -169,6 +170,7 @@ export const useThemeStore = defineStore('theme-store', () => {
|
||||
handleAdaptOsTheme();
|
||||
setupWindicssDarkMode(darkMode);
|
||||
setupHiddenScroll(computed(() => layout.minWidth));
|
||||
themeColorWatcher(themeColor);
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="h-[120%]">
|
||||
<div>
|
||||
<h3>DashboardAnalysis</h3>
|
||||
<router-link to="/about">about</router-link>
|
||||
<router-link to="/dashboard/workbench">workbench</router-link>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user