tt/vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 字典调整按需加载，api、store和枚举文件命名优化

Browse Source
This commit is contained in:
Ray.Hao
2025-03-24 08:17:31 +08:00
parent 6204deb7cb
commit 3c9cf67961
84 changed files with 989 additions and 1108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/layout/components/NavBar/components/NavbarRight.vue
View File

@@ -44,10 +44,10 @@
</template>
<script setup lang="ts">
import defaultSettings from "@/settings";
import { DeviceEnum } from "@/enums/DeviceEnum";
import { DeviceEnum } from "@/enums/settings/device.enum";
import { useAppStore, useSettingsStore, useUserStore, useTagsViewStore } from "@/store";
import { SidebarColorEnum, ThemeEnum } from "@/enums/ThemeEnum";
import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
const appStore = useAppStore();
const settingStore = useSettingsStore();
@@ -68,12 +68,12 @@ function handleProfileClick() {
// 根据主题和侧边栏配色方案选择 navbar 右侧的样式类
const navbarRightClass = computed(() => {
// 如果暗黑主题
if (settingStore.theme === ThemeEnum.DARK) {
if (settingStore.theme === ThemeMode.DARK) {
return "navbar__right--white";
}
// 如果侧边栏是经典蓝
if (settingStore.sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE) {
if (settingStore.sidebarColorScheme === SidebarColor.CLASSIC_BLUE) {
return "navbar__right--white";
}
});

16
src/layout/components/Settings/components/LayoutSelect.vue
View File

@@ -21,26 +21,26 @@
</template>
<script lang="ts" setup>
import { LayoutEnum } from "@/enums/LayoutEnum";
import { LayoutMode } from "@/enums/settings/layout.enum";
interface LayoutOption {
value: LayoutEnum;
value: LayoutMode;
label: string;
className: string;
}
const layoutOptions: LayoutOption[] = [
{ value: LayoutEnum.LEFT, label: "左侧模式", className: "left" },
{ value: LayoutEnum.TOP, label: "顶部模式", className: "top" },
{ value: LayoutEnum.MIX, label: "混合模式", className: "mix" },
{ value: LayoutMode.LEFT, label: "左侧模式", className: "left" },
{ value: LayoutMode.TOP, label: "顶部模式", className: "top" },
{ value: LayoutMode.MIX, label: "混合模式", className: "mix" },
];
const modelValue = defineModel<LayoutEnum>("modelValue", {
const modelValue = defineModel<LayoutMode>("modelValue", {
required: true,
default: () => LayoutEnum.LEFT,
default: () => LayoutMode.LEFT,
});
function handleLayoutChange(layout: LayoutEnum) {
function handleLayoutChange(layout: LayoutMode) {
modelValue.value = layout;
}
</script>

18
src/layout/components/Settings/index.vue
View File

@@ -48,10 +48,10 @@
<div v-if="!isDark" class="config-item flex-x-between">
<span class="text-xs">{{ $t("settings.sidebarColorScheme") }}</span>
<el-radio-group v-model="sidebarColor" @change="changeSidebarColor">
<el-radio :value="SidebarColorEnum.CLASSIC_BLUE">
<el-radio :value="SidebarColor.CLASSIC_BLUE">
{{ $t("settings.classicBlue") }}
</el-radio>
<el-radio :value="SidebarColorEnum.MINIMAL_WHITE">
<el-radio :value="SidebarColor.MINIMAL_WHITE">
{{ $t("settings.minimalWhite") }}
</el-radio>
</el-radio-group>
@@ -67,9 +67,9 @@
</template>
<script setup lang="ts">
import { LayoutEnum } from "@/enums/LayoutEnum";
import { ThemeEnum } from "@/enums/ThemeEnum";
import { SidebarColorEnum } from "@/enums/ThemeEnum";
import { LayoutMode } from "@/enums/settings/layout.enum";
import { ThemeMode } from "@/enums/settings/theme.enum";
import { SidebarColor } from "@/enums/settings/theme.enum";
import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
// 颜色预设
const colorPresets = [
@@ -89,7 +89,7 @@ const appStore = useAppStore();
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const isDark = ref<boolean>(settingsStore.theme === ThemeEnum.DARK);
const isDark = ref<boolean>(settingsStore.theme === ThemeMode.DARK);
const sidebarColor = ref(settingsStore.sidebarColorScheme);
const selectedThemeColor = computed({
@@ -108,7 +108,7 @@ const drawerVisible = computed({
* @param isDark 是否启用暗黑模式
*/
const handleThemeChange = (isDark: string | number | boolean) => {
settingsStore.changeTheme(isDark ? ThemeEnum.DARK : ThemeEnum.LIGHT);
settingsStore.changeTheme(isDark ? ThemeMode.DARK : ThemeMode.LIGHT);
};
/**
@@ -125,9 +125,9 @@ const changeSidebarColor = (val: any) => {
*
* @param layout - 布局模式
*/
const handleLayoutChange = (layout: LayoutEnum) => {
const handleLayoutChange = (layout: LayoutMode) => {
settingsStore.changeLayout(layout);
if (layout === LayoutEnum.MIX && route.name) {
if (layout === LayoutMode.MIX && route.name) {
const topLevelRoute = findTopLevelRoute(permissionStore.routes, route.name as string);
if (appStore.activeTopMenuPath !== topLevelRoute.path) {
appStore.activeTopMenu(topLevelRoute.path);

12
src/layout/components/Sidebar/components/SidebarMenu.vue
View File

@@ -5,17 +5,17 @@
:default-active="currentRoute.path"
:collapse="!appStore.sidebar.opened"
:background-color="
theme === 'dark' || sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
? variables['menu-background']
: undefined
"
:text-color="
theme === 'dark' || sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
? variables['menu-text']
: undefined
"
:active-text-color="
theme === 'dark' || sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
? variables['menu-active-text']
: undefined
"
@@ -41,8 +41,8 @@ import path from "path-browserify";
import type { MenuInstance } from "element-plus";
import type { RouteRecordRaw } from "vue-router";
import { LayoutEnum } from "@/enums/LayoutEnum";
import { SidebarColorEnum } from "@/enums/ThemeEnum";
import { LayoutMode } from "@/enums/settings/layout.enum";
import { SidebarColor } from "@/enums/settings/theme.enum";
import { useSettingsStore, useAppStore } from "@/store";
import { isExternal } from "@/utils/index";
@@ -70,7 +70,7 @@ const expandedMenuIndexes = ref<string[]>([]);
// 根据布局模式设置菜单的显示方式：顶部布局使用水平模式，其他使用垂直模式
const menuMode = computed(() => {
return settingsStore.layout === LayoutEnum.TOP ? "horizontal" : "vertical";
return settingsStore.layout === LayoutMode.TOP ? "horizontal" : "vertical";
});
// 获取主题

8
src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
View File

@@ -5,17 +5,17 @@
mode="horizontal"
:default-active="activePath"
:background-color="
theme === 'dark' || sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
? variables['menu-background']
: undefined
"
:text-color="
theme === 'dark' || sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
? variables['menu-text']
: undefined
"
:active-text-color="
theme === 'dark' || sidebarColorScheme === SidebarColorEnum.CLASSIC_BLUE
theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
? variables['menu-active-text']
: undefined
"
@@ -44,7 +44,7 @@ import { LocationQueryRaw, RouteRecordRaw } from "vue-router";
import { usePermissionStore, useAppStore, useSettingsStore } from "@/store";
import { translateRouteTitle } from "@/utils/i18n";
import variables from "@/styles/variables.module.scss";
import { SidebarColorEnum } from "@/enums/ThemeEnum";
import { SidebarColor } from "@/enums/settings/theme.enum";
const router = useRouter();
const appStore = useAppStore();

6
src/layout/components/Sidebar/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div :class="{ 'has-logo': sidebarLogo }">
<!-- 混合布局 -->
<div v-if="layout == LayoutEnum.MIX" class="flex w-full">
<div v-if="layout == LayoutMode.MIX" class="flex w-full">
<SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
<SidebarMixTopMenu class="flex-1" />
<NavbarRight />
@@ -15,13 +15,13 @@
</el-scrollbar>
<!-- 顶部导航 -->
<NavbarRight v-if="layout == LayoutEnum.TOP" />
<NavbarRight v-if="layout == LayoutMode.TOP" />
</template>
</div>
</template>
<script setup lang="ts">
import { LayoutEnum } from "@/enums/LayoutEnum";
import { LayoutMode } from "@/enums/settings/layout.enum";
import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
import NavbarRight from "../NavBar/components/NavbarRight.vue";

8
src/layout/index.vue
View File

@@ -7,7 +7,7 @@
<Sidebar class="layout__sidebar" />
<!-- 混合布局 -->
<div v-if="layout === LayoutEnum.MIX" class="layout__container">
<div v-if="layout === LayoutMode.MIX" class="layout__container">
<!-- 左侧菜单栏 -->
<div class="layout__sidebar--left">
<el-scrollbar>
@@ -32,7 +32,7 @@
<!-- 左侧或顶部布局的主内容区 -->
<div v-else :class="{ hasTagsView: isShowTagsView }" class="layout__main">
<NavBar v-if="layout === LayoutEnum.LEFT" />
<NavBar v-if="layout === LayoutMode.LEFT" />
<TagsView v-if="isShowTagsView" />
<AppMain />
<Settings v-if="defaultSettings.showSettings" />
@@ -52,8 +52,8 @@ import { useAppStore, useSettingsStore, usePermissionStore } from "@/store";
import defaultSettings from "@/settings";
// 枚举
import { DeviceEnum } from "@/enums/DeviceEnum";
import { LayoutEnum } from "@/enums/LayoutEnum";
import { DeviceEnum } from "@/enums/settings/device.enum";
import { LayoutMode } from "@/enums/settings/layout.enum";
// 组件
import NavBar from "./components/NavBar/index.vue";