(false);
+ const saving = ref(false);
// 表单数据
const form = reactive({
@@ -88,27 +88,6 @@ export default defineComponent({
verifyCode: ""
});
- // 获取第一个菜单路径
- function getPath(list: any[]) {
- let path = "";
-
- function deep(arr: any[]) {
- arr.forEach((e: any) => {
- if (e.type == 1) {
- if (!path) {
- path = e.path;
- }
- } else {
- deep(e.children);
- }
- });
- }
-
- deep(list);
-
- return path || "/";
- }
-
// 登录
async function toLogin() {
if (!form.username) {
@@ -135,7 +114,10 @@ export default defineComponent({
await user.get();
// 权限菜单
- const path = getPath(await menu.get());
+ await menu.get();
+
+ // 跳转地址
+ const path = menu.getPath();
if (path) {
router.push(path);
diff --git a/src/modules/base/store/menu.ts b/src/modules/base/store/menu.ts
index db9012f..c48b51f 100644
--- a/src/modules/base/store/menu.ts
+++ b/src/modules/base/store/menu.ts
@@ -51,13 +51,13 @@ export const useMenuStore = defineStore("menu", function () {
const perms = ref
(data["menu.perms"] || []);
// 设置左侧菜单
- function setMenu(i: number) {
- if (isEmpty(index)) {
+ function setMenu(i?: number) {
+ if (i === undefined) {
i = index.value;
}
- // 显示一级菜单
- if (config.app.theme.showAMenu) {
+ // 显示分组显示菜单
+ if (config.app.menu.isGroup) {
const { children = [] } = group.value[i] || {};
index.value = i;
@@ -105,12 +105,12 @@ export const useMenuStore = defineStore("menu", function () {
// 设置菜单组
function setGroup(list: Item[]) {
- group.value = orderBy(list, "orderNum");
+ group.value = orderBy(list, "orderNum").filter((e) => e.isShow);
storage.set("menu.group", group.value);
}
// 获取菜单，权限信息
- function get(): Promise {
+ function get(): Promise {
return new Promise((resolve, reject) => {
function next(res: any) {
if (!isArray(res.menus)) {
@@ -174,6 +174,29 @@ export const useMenuStore = defineStore("menu", function () {
});
}
+ // 获取菜单路径
+ function getPath(list?: Item[]) {
+ list = list || group.value;
+
+ let path = "";
+
+ function deep(arr: Item[]) {
+ arr.forEach((e: Item) => {
+ if (e.type == 1) {
+ if (!path) {
+ path = e.path;
+ }
+ } else {
+ deep(e.children || []);
+ }
+ });
+ }
+
+ deep(list);
+
+ return path || "/";
+ }
+
return {
routes,
group,
@@ -184,6 +207,7 @@ export const useMenuStore = defineStore("menu", function () {
setPerms,
setMenu,
setRoutes,
- setGroup
+ setGroup,
+ getPath
};
});
diff --git a/src/modules/theme/components/theme.vue b/src/modules/theme/components/theme.vue
index 5ccbbfd..036d5f2 100644
--- a/src/modules/theme/components/theme.vue
+++ b/src/modules/theme/components/theme.vue
@@ -6,29 +6,35 @@
- -
-
-
-
+
+
+
+
+ -
+
+
+
- {{ item.label }}
-
-
-
+ {{ item.label }}
+
+
+
-
-
- {{ form.color }}
-
-
+
+
+ {{ form.color }}
+
+
+
+
+
+
+
@@ -39,6 +45,7 @@ import { module } from "/@/cool/utils";
import store from "store";
import { Check } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
+import { useBase } from "/$/base";
export default defineComponent({
name: "cl-theme",
@@ -48,9 +55,16 @@ export default defineComponent({
},
setup() {
+ const { app, menu } = useBase();
+
// 当前主题
const theme = reactive
(store.get("theme") || module.get("theme"));
+ // 菜单分组显示默认值
+ if (theme.isGroup === undefined) {
+ theme.isGroup = app.info.menu.isGroup;
+ }
+
// 表单
const form = reactive({
color: theme.color || "",
@@ -60,29 +74,46 @@ export default defineComponent({
// 抽屉
const visible = ref(false);
+ // 打开
function open() {
visible.value = true;
}
+ // 设置颜色
function setColor(color: string) {
setTheme({ color });
}
+ // 设置推荐
function setComd(item: any) {
- form.theme = item;
+ Object.assign(form.theme, item);
form.color = item.color;
setTheme(item);
ElMessage.success(`切换主题：${item.label}`);
}
+ // 设置分组
+ function setGroup(val: boolean) {
+ setTheme({ isGroup: val });
+ app.set({
+ menu: {
+ isGroup: val
+ }
+ });
+ menu.setMenu();
+ }
+
return {
+ app,
form,
themes,
theme,
visible,
open,
setColor,
- setComd
+ setComd,
+ setTheme,
+ setGroup
};
}
});
@@ -129,5 +160,14 @@ export default defineComponent({
}
}
}
+
+ &__drawer {
+ :deep(.el-form-item) {
+ background-color: #f7f7f7;
+ padding: 10px;
+ border-radius: 5px;
+ border: 1px solid #eee;
+ }
+ }
}
diff --git a/src/modules/theme/config.ts b/src/modules/theme/config.ts
index 6b9fb03..ba2e7fd 100644
--- a/src/modules/theme/config.ts
+++ b/src/modules/theme/config.ts
@@ -2,5 +2,5 @@ export default {
// 推荐主题：'jihei', 'guolv', 'jiangzi'
name: "default"
// 自定义主题色
- // color: "#4165d7"
+ // color: "#4165d7",
};
diff --git a/src/modules/theme/index.ts b/src/modules/theme/index.ts
index 29bcb84..7abb176 100644
--- a/src/modules/theme/index.ts
+++ b/src/modules/theme/index.ts
@@ -1,6 +1,7 @@
import store from "store";
import { App } from "vue";
import { setTheme } from "./utils";
+import { config } from "/@/cool/config";
import "./static/css/index.scss";
export default {
@@ -8,6 +9,10 @@ export default {
const theme = store.get("theme") || options;
if (theme) {
+ if (theme.isGroup !== undefined) {
+ config.app.menu.isGroup = theme.isGroup;
+ }
+
setTheme(theme);
}
}
diff --git a/src/modules/theme/static/css/index.scss b/src/modules/theme/static/css/index.scss
index ea18795..5e5e0ea 100644
--- a/src/modules/theme/static/css/index.scss
+++ b/src/modules/theme/static/css/index.scss
@@ -3,6 +3,12 @@
.page-layout {
background-color: rgba(47, 52, 71, 0.9);
+ .a-menu {
+ .el-menu-item {
+ border-radius: 5px !important;
+ }
+ }
+
.app-topbar {
background-color: transparent;
color: #fff;
diff --git a/src/modules/theme/utils/index.ts b/src/modules/theme/utils/index.ts
index 9a6a038..5dd9550 100644
--- a/src/modules/theme/utils/index.ts
+++ b/src/modules/theme/utils/index.ts
@@ -43,9 +43,10 @@ export const themes = [
declare interface Options {
color?: string;
name?: string;
+ isGroup?: boolean;
}
-export function setTheme({ color, name }: Options) {
+export function setTheme({ color, name, isGroup }: Options) {
// 主题配置
const theme = store.get("theme") || {};
@@ -69,6 +70,8 @@ export function setTheme({ color, name }: Options) {
color = item.color;
document.querySelector("#app")?.setAttribute("class", `theme-${name}`);
}
+
+ theme.name = name;
}
// 设置主色
@@ -81,11 +84,14 @@ export function setTheme({ color, name }: Options) {
el.style.setProperty(`${pre}-light-${i}`, mix(color, mixWhite, i * 0.1));
el.style.setProperty(`${pre}-dark-${i}`, mix(color, mixBlack, i * 0.1));
}
+
+ theme.color = color;
}
- // 缓存
- theme.name = name;
- theme.color = color;
+ // 菜单分组显示
+ if (isGroup !== undefined) {
+ theme.isGroup = isGroup;
+ }
store.set("theme", theme);
}
diff --git a/yarn.lock b/yarn.lock
index c253182..a70a6f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -984,10 +984,10 @@
"@babel/helper-validator-identifier" "^7.16.7"
to-fast-properties "^2.0.0"
-"@cool-vue/crud@^5.0.7":
- version "5.0.7"
- resolved "https://registry.npmjs.org/@cool-vue/crud/-/crud-5.0.7.tgz#60459f3e58b04a08c621aa41e25c03618645bd6b"
- integrity sha512-/I4f6KFpPHiJE86w2pHAwu2Gn2WAd2LCFn6Bc3jzgg6RdYlAeIyRB9Ph8KasE7CCjyPdb2kyDYEQsZhOfODy9g==
+"@cool-vue/crud@^5.0.10":
+ version "5.0.10"
+ resolved "https://registry.npmjs.org/@cool-vue/crud/-/crud-5.0.10.tgz#c2d70504fccdf89c907e1d32e62a93dd777fba9c"
+ integrity sha512-a3jZPS+Y/+7IJTA3iYjD7PK83rwtIDrnE0tcf5LfenZ7JnnlXs+QFMRybGypJfoeswsG97JmWFeSY6o/JyALDw==
dependencies:
array.prototype.flat "^1.2.4"
core-js "^3.21.1"