jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): 主题配置抽屉：迁移暗黑模式、布局模式、添加颜色选择面板

Browse Source
This commit is contained in:
Soybean
2022-01-09 12:20:08 +08:00
parent bf020a8258
commit 912bfdf439
21 changed files with 987 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/layouts/Layout/index.vue
View File

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

25
src/layouts/common/SettingDrawer/components/DarkMode/index.vue Normal file
View File

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

73
src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue Normal file
View File

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

3
src/layouts/common/SettingDrawer/components/LayoutMode/components/index.ts Normal file
View File

@ -0,0 +1,3 @@
import LayoutCheckbox from './LayoutCheckbox.vue';
export { LayoutCheckbox };

22
src/layouts/common/SettingDrawer/components/LayoutMode/index.vue Normal file
View File

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

26
src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorCheckbox.vue Normal file
View File

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

49
src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue Normal file
View File

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

4
src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/index.ts Normal file
View File

@ -0,0 +1,4 @@
import ColorCheckbox from './ColorCheckbox.vue';
import ColorModal from './ColorModal.vue';
export { ColorCheckbox, ColorModal };

26
src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue Normal file
View File

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

5
src/layouts/common/SettingDrawer/components/index.ts
View File

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

8
src/layouts/common/SettingDrawer/index.vue
View File

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

3
src/layouts/index.ts
View File

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