refactor: 枚举、常量和插件文件重构优化

This commit is contained in:
Ray.Hao
2025-12-12 23:16:32 +08:00
parent f125473b93
commit 6e0597437e
27 changed files with 111 additions and 118 deletions

View File

@@ -6,8 +6,7 @@
<script setup lang="ts">
import { useSettingsStore } from "@/store";
import { ThemeMode, SidebarColor } from "@/enums/settings/theme-enum";
import { LayoutMode } from "@/enums/settings/layout-enum";
import { ThemeMode, SidebarColor, LayoutMode } from "@/enums/settings";
defineProps({
isActive: { type: Boolean, required: true },

View File

@@ -18,7 +18,7 @@
<script setup lang="ts">
import { useAppStore } from "@/store/modules/app-store";
import { LanguageEnum } from "@/enums/settings/locale-enum";
import { LanguageEnum } from "@/enums/settings";
defineProps({
size: {

View File

@@ -1,7 +1,7 @@
import { watchEffect, computed } from "vue";
import { useWindowSize } from "@vueuse/core";
import { useAppStore } from "@/store";
import { DeviceEnum } from "@/enums/settings/device-enum";
import { DeviceEnum } from "@/enums/settings";
/**
* 设备检测和响应式处理

View File

@@ -1,6 +1,6 @@
import { ref, onMounted, onUnmounted, getCurrentInstance } from "vue";
import { useStomp } from "./useStomp";
import { registerWebSocketInstance } from "@/plugins/websocket";
import { registerWebSocketInstance } from "@/utils/websocket";
import { AuthStorage } from "@/utils/auth";
/**

View File

@@ -20,7 +20,7 @@
<script setup lang="ts">
import { type RouteLocationNormalized } from "vue-router";
import { useSettingsStore, useTagsViewStore } from "@/store";
import variables from "@/styles/variables.module.scss";
import variables from "@/styles/variables.scss";
import Error404 from "@/views/error/404.vue";
const { cachedViews } = toRefs(useTagsViewStore());

View File

@@ -29,11 +29,11 @@ import { useRoute } from "vue-router";
import path from "path-browserify";
import type { MenuInstance } from "element-plus";
import type { RouteRecordRaw } from "vue-router";
import { SidebarColor } from "@/enums/settings/theme-enum";
import { SidebarColor } from "@/enums/settings";
import { useSettingsStore, useAppStore } from "@/store";
import { isExternal } from "@/utils/index";
import MenuItem from "./components/MenuItem.vue";
import variables from "@/styles/variables.module.scss";
import variables from "@/styles/variables.scss";
const props = defineProps({
data: {

View File

@@ -39,8 +39,8 @@ defineOptions({
import { LocationQueryRaw, RouteRecordRaw } from "vue-router";
import { usePermissionStore, useAppStore, useSettingsStore } from "@/store";
import variables from "@/styles/variables.module.scss";
import { SidebarColor } from "@/enums/settings/theme-enum";
import variables from "@/styles/variables.scss";
import { SidebarColor } from "@/enums/settings";
const router = useRouter();
const appStore = useAppStore();

View File

@@ -74,10 +74,8 @@
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
import { defaultSettings } from "@/settings";
import { DeviceEnum } from "@/enums/settings/device-enum";
import { DeviceEnum, SidebarColor, ThemeMode, LayoutMode } from "@/enums/settings";
import { useAppStore, useSettingsStore, useUserStore } from "@/store";
import { SidebarColor, ThemeMode } from "@/enums/settings/theme-enum";
import { LayoutMode } from "@/enums";
// 导入子组件
import MenuSearch from "@/components/MenuSearch/index.vue";

View File

@@ -69,7 +69,7 @@ import TagsView from "../../components/TagsView/index.vue";
import AppMain from "../../components/AppMain/index.vue";
import MenuItem from "../../components/Menu/components/MenuItem.vue";
import Hamburger from "@/components/Hamburger/index.vue";
import variables from "@/styles/variables.module.scss";
import variables from "@/styles/variables.scss";
import { isExternal } from "@/utils/index";
import { useAppStore, usePermissionStore } from "@/store";

View File

@@ -1,11 +0,0 @@
/* stylelint-disable property-no-unknown */
:export {
sidebar-width: $sidebar-width;
navbar-height: $navbar-height;
tags-view-height: $tags-view-height;
menu-background: $menu-background;
menu-text: $menu-text;
menu-active-text: $menu-active-text;
menu-hover: $menu-hover;
}
/* stylelint-enable property-no-unknown */

View File

@@ -1,39 +0,0 @@
// 自定义 Vxe Table 样式
.vxe-grid {
// 表单
&--form-wrapper {
.vxe-form {
padding: 10px 20px;
margin-bottom: 20px;
}
}
// 工具栏
&--toolbar-wrapper {
.vxe-toolbar {
padding: 20px;
}
}
// 分页
&--pager-wrapper {
.vxe-pager {
height: 70px;
padding: 0 20px;
&--wrapper {
// 参考 Bootstrap 的响应式设计 WIDTH = 768
@media screen and (width <= 768px) {
.vxe-pager--total,
.vxe-pager--sizes,
.vxe-pager--jump,
.vxe-pager--jump-prev,
.vxe-pager--jump-next {
display: none;
}
}
}
}
}
}

View File

@@ -1,56 +1,42 @@
@use "./reset";
@use "./element-plus";
// Vxe Table
@use "./vxe-table";
@import url("./vxe-table.css");
/* 全局业务通用样式 */
.app-container {
padding: 15px;
}
// 进度条颜色
/* 进度条颜色 */
#nprogress .bar {
background-color: var(--el-color-primary);
}
// 混合布局左侧菜单hover样式
/* 混合布局左侧菜单 hover 样式 */
.layout-mix .layout__sidebar--left .el-menu {
.el-menu-item {
&:hover {
// 极简白主题使用浅灰色背景
background-color: var(--el-fill-color-light) !important;
}
}
.el-sub-menu__title {
&:hover {
// 极简白主题使用浅灰色背景
background-color: var(--el-fill-color-light) !important;
}
}
}
// 深色主题或深蓝侧边栏配色下的左侧菜单hover样式
/* 深色或深蓝侧边栏hover 样式 */
html.dark .layout-mix .layout__sidebar--left .el-menu,
html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
.el-menu-item {
&:hover {
// 深色背景使用CSS变量
background-color: var(--menu-hover) !important;
}
}
.el-menu-item,
.el-sub-menu__title {
&:hover {
// 深色背景使用CSS变量
background-color: var(--menu-hover) !important;
}
}
}
// 窄屏隐藏菜单文字只显示图标
/* 窄屏隐藏菜单文字,仅保留图标 */
.hideSidebar {
// Top布局和Mix布局的水平菜单
&.layout-top .layout__header .el-menu--horizontal,
&.layout-mix .layout__header .el-menu--horizontal {
.el-menu-item,
@@ -62,7 +48,6 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
}
}
// Mix布局的左侧菜单
&.layout-mix .layout__sidebar--left .el-menu {
.el-menu-item,
.el-sub-menu__title {
@@ -74,7 +59,7 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
}
}
// 全局筛选区域样式
/* 全局筛选区域 */
.filter-section {
padding: 8px 12px 0;
margin-bottom: 8px;
@@ -91,11 +76,10 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
}
}
// 表格区域样式
/* 表格区域 */
.table-section {
margin-bottom: 12px;
// 表格工具栏区域
&__toolbar {
display: flex;
justify-content: space-between;
@@ -108,12 +92,10 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
}
}
// 表格内容区域
&__content {
margin: 8px 0;
}
// 分页区域
.el-pagination {
justify-content: flex-end;
margin-top: 12px;

12
src/styles/index.scss Normal file
View File

@@ -0,0 +1,12 @@
// 基础变量与主题色
@use "./variables";
// 基础重置与组件细化样式
@use "./reset";
@use "./element-plus";
// Vxe Table 主题覆写CSS 变量 + 自定义样式)
@use "./vxe-table";
// 业务通用样式
@use "./common";

View File

@@ -1,12 +1,3 @@
*,
::before,
::after {
box-sizing: border-box;
border-color: currentcolor;
border-style: solid;
border-width: 0;
}
#app {
width: 100%;
height: 100%;
@@ -21,6 +12,17 @@ html {
text-size-adjust: 100%;
}
#app,
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
width: 100%;
height: 100%;
@@ -56,12 +58,6 @@ li {
list-style: none;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
a,
a:focus,
a:hover {

View File

@@ -91,3 +91,16 @@ $sidebar-width: 210px; // 侧边栏宽度
$sidebar-width-collapsed: 54px; // 侧边栏收缩宽度
$navbar-height: 50px; // 导航栏高度
$tags-view-height: 34px; // TagsView 高度
/* 供 JS/TS 侧按需读取的变量导出(保持与原 module 一致) */
/* stylelint-disable property-no-unknown */
:export {
sidebar-width: $sidebar-width;
navbar-height: $navbar-height;
tags-view-height: $tags-view-height;
menu-background: $menu-background;
menu-text: $menu-text;
menu-active-text: $menu-active-text;
menu-hover: $menu-hover;
}
/* stylelint-enable property-no-unknown */

View File

@@ -1,9 +1,10 @@
/**
* @description 所有主题模式下的 Vxe Table CSS 变量
* @description Element Plus CSS 变量覆写 Vxe Table CSS 变量目的是使 Vxe Table 支持多主题模式且样式统一
* @description 在此查阅所有可自定义的变量https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss
* Vxe Table 主题统一
* 1) Element Plus CSS 变量覆写 Vxe Table CSS 变量
* 2) 自定义局部样式
*/
/* 变量覆写 */
:root {
/* color */
--vxe-font-color: var(--el-text-color-regular);
@@ -90,3 +91,42 @@
--vxe-select-option-hover-background-color: var(--el-bg-color-overlay);
--vxe-select-panel-background-color: var(--el-bg-color);
}
/* 自定义组件样式 */
.vxe-grid {
/* 表单 */
&--form-wrapper {
.vxe-form {
padding: 10px 20px;
margin-bottom: 20px;
}
}
/* 工具栏 */
&--toolbar-wrapper {
.vxe-toolbar {
padding: 20px;
}
}
/* 分页 */
&--pager-wrapper {
.vxe-pager {
height: 70px;
padding: 0 20px;
&--wrapper {
/* 参考 Bootstrap 的响应式设计 WIDTH = 768 */
@media screen and (width <= 768px) {
.vxe-pager--total,
.vxe-pager--sizes,
.vxe-pager--jump,
.vxe-pager--jump-prev,
.vxe-pager--jump-next {
display: none;
}
}
}
}
}
}

4
src/types/shims-scss.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
declare module "*.scss" {
const classes: Record<string, string>;
export default classes;
}

View File

@@ -1,6 +1,6 @@
import axios, { type InternalAxiosRequestConfig, type AxiosResponse } from "axios";
import qs from "qs";
import { ApiCodeEnum } from "@/enums/api/code-enum";
import { ApiCodeEnum } from "@/enums/api";
import { AuthStorage, redirectToLogin } from "@/utils/auth";
import { useTokenRefresh } from "@/composables/auth/useTokenRefresh";
import { authConfig } from "@/settings";

View File

@@ -522,8 +522,7 @@ import Codemirror from "codemirror-editor-vue3";
import type { CmComponentRef } from "codemirror-editor-vue3";
import type { EditorConfiguration } from "codemirror";
import { FormTypeEnum } from "@/enums/codegen/form-enum";
import { QueryTypeEnum } from "@/enums/codegen/query-enum";
import { FormTypeEnum, QueryTypeEnum } from "@/enums/codegen";
import GeneratorAPI, {
TablePageVO,

View File

@@ -73,7 +73,7 @@ import DeptAPI from "@/api/system/dept";
import RoleAPI from "@/api/system/role";
import type { UserForm, UserPageQuery } from "@/api/system/user";
import type { IObject, IModalConfig, IContentConfig, ISearchConfig } from "@/components/CURD/types";
import { DeviceEnum } from "@/enums/settings/device-enum";
import { DeviceEnum } from "@/enums/settings";
import { useAppStore } from "@/store";
import usePage from "@/components/CURD/usePage";

View File

@@ -1,6 +1,6 @@
import UserAPI, { type UserForm } from "@/api/system/user";
import type { IModalConfig } from "@/components/CURD/types";
import { DeviceEnum } from "@/enums/settings/device-enum";
import { DeviceEnum } from "@/enums/settings";
import { useAppStore } from "@/store";
import { deptArr, roleArr } from "./options";

View File

@@ -1,5 +1,5 @@
import type { IModalConfig } from "@/components/CURD/types";
import { DeviceEnum } from "@/enums/settings/device-enum";
import { DeviceEnum } from "@/enums/settings";
import { useAppStore } from "@/store";
const modalConfig: IModalConfig = {

View File

@@ -338,10 +338,10 @@
<script setup lang="ts">
import { useAppStore } from "@/store/modules/app-store";
import { DeviceEnum } from "@/enums/settings/device-enum";
import { DeviceEnum } from "@/enums/settings";
import MenuAPI, { MenuQuery, MenuForm, MenuVO } from "@/api/system/menu";
import { MenuTypeEnum } from "@/enums/system/menu-enum";
import { MenuTypeEnum } from "@/enums/business";
defineOptions({
name: "SysMenu",

View File

@@ -213,7 +213,7 @@
<script setup lang="ts">
import { useAppStore } from "@/store/modules/app-store";
import { DeviceEnum } from "@/enums/settings/device-enum";
import { DeviceEnum } from "@/enums/settings";
import RoleAPI, { RolePageVO, RoleForm, RolePageQuery } from "@/api/system/role";
import MenuAPI from "@/api/system/menu";

View File

@@ -90,7 +90,7 @@
<script lang="ts" setup>
import { ElMessage, type UploadUserFile } from "element-plus";
import UserAPI from "@/api/system/user";
import { ApiCodeEnum } from "@/enums/api/code-enum";
import { ApiCodeEnum } from "@/enums/api";
const emit = defineEmits(["import-success"]);
const visible = defineModel("modelValue", {