From 6d9fb30bbdee23f22ee79abac65b6705da5332e2 Mon Sep 17 00:00:00 2001 From: ZhouXY108 Date: Wed, 28 Dec 2022 17:40:30 +0800 Subject: [PATCH] commit. --- .eslintrc.cjs | 3 + src/stores/{counter.ts => account.ts} | 2 +- src/views/404/Index.vue | 5 + src/views/HomeView/HomeView.vue | 159 +++++------------- .../{LogoComponent.vue => Logo.vue} | 12 +- src/views/HomeView/components/MenuVO.ts | 113 +++++++++++++ src/views/HomeView/components/SiderMenu.vue | 103 ++++++++++++ tsconfig.json | 3 + vite.config.ts | 3 + 9 files changed, 279 insertions(+), 124 deletions(-) rename src/stores/{counter.ts => account.ts} (80%) create mode 100644 src/views/404/Index.vue rename src/views/HomeView/components/{LogoComponent.vue => Logo.vue} (67%) create mode 100644 src/views/HomeView/components/MenuVO.ts create mode 100644 src/views/HomeView/components/SiderMenu.vue diff --git a/.eslintrc.cjs b/.eslintrc.cjs index c8ac644..f57cc3b 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -12,4 +12,7 @@ module.exports = { parserOptions: { ecmaVersion: 'latest', }, + rules: { + 'vue/multi-word-component-names': 'off', + }, } diff --git a/src/stores/counter.ts b/src/stores/account.ts similarity index 80% rename from src/stores/counter.ts rename to src/stores/account.ts index 5cdda00..5aa58e0 100644 --- a/src/stores/counter.ts +++ b/src/stores/account.ts @@ -1,7 +1,7 @@ import { ref, computed } from 'vue' import { defineStore } from 'pinia' -export const useCounterStore = defineStore('counter', () => { +export const useAccountStore = defineStore('account', () => { const count = ref(0) const doubleCount = computed(() => count.value * 2) function increment() { diff --git a/src/views/404/Index.vue b/src/views/404/Index.vue new file mode 100644 index 0000000..1b28313 --- /dev/null +++ b/src/views/404/Index.vue @@ -0,0 +1,5 @@ + + + diff --git a/src/views/HomeView/HomeView.vue b/src/views/HomeView/HomeView.vue index c6eefa6..4f67398 100644 --- a/src/views/HomeView/HomeView.vue +++ b/src/views/HomeView/HomeView.vue @@ -1,12 +1,20 @@ diff --git a/src/views/HomeView/components/LogoComponent.vue b/src/views/HomeView/components/Logo.vue similarity index 67% rename from src/views/HomeView/components/LogoComponent.vue rename to src/views/HomeView/components/Logo.vue index 8e74749..89869f9 100644 --- a/src/views/HomeView/components/LogoComponent.vue +++ b/src/views/HomeView/components/Logo.vue @@ -1,13 +1,20 @@ @@ -15,8 +22,9 @@ const props = defineProps({ .logo { padding: 20px 16px; display: inline-flex; - background-color: rgb(0, 20, 40); + background-color: var(--n-color); color: #ffffff; + height: 32px; } .logo > img { diff --git a/src/views/HomeView/components/MenuVO.ts b/src/views/HomeView/components/MenuVO.ts new file mode 100644 index 0000000..7eeed30 --- /dev/null +++ b/src/views/HomeView/components/MenuVO.ts @@ -0,0 +1,113 @@ +import type { MenuOption } from 'naive-ui' +import { type RouteRecordRaw, RouterLink } from 'vue-router' +import { NIcon } from 'naive-ui' +import * as iconComponents from '@vicons/fluent' +import { type Component, h } from 'vue' + +export interface MenuVO { + type: number + typeName: string + id: number + parentId: number + name: string + // 若 type 为 MENU_ITEM 且 path 以 http:// 或 https:// 开头则被识别为外链 + path: string + title: string + icon: string + hidden: boolean + orderNumber: number + status: number + remarks: string + + // MENU_ITEM + component?: string + cache?: boolean + resource?: string + actions?: ActionVO[] + + // MENU_LIST + children?: MenuVO[] +} + +interface ActionVO { + id: number + identifier: string + label: string + value: string +} + +export enum MenuType { + MENU_LIST, + MENU_ITEM, +} + +export function convertToRoutes(menuVOTree: MenuVO[]): RouteRecordRaw[] { + const routes: RouteRecordRaw[] = menuVOTree.map((menuVO) => { + if (menuVO.type == MenuType.MENU_LIST) { + return { + path: menuVO.path, + name: menuVO.name, + component: + menuVO.component !== undefined ? () => import('@/views' + menuVO.component) : undefined, + children: convertToRoutes(menuVO.children ? menuVO.children : []), + meta: { + title: menuVO.title, + icon: menuVO.icon, + hidden: menuVO.hidden, + order: menuVO.orderNumber, + status: menuVO.status, + remarks: menuVO.remarks, + }, + } + } else { + return { + path: menuVO.path, + name: menuVO.name, + component: import('@/views' + menuVO.component), + meta: { + title: menuVO.title, + icon: menuVO.icon, + hidden: menuVO.hidden, + order: menuVO.orderNumber, + status: menuVO.status, + remarks: menuVO.remarks, + }, + } + } + }) + + return routes +} + +export function convertToMenuOptions(menuVOTree: MenuVO[]): MenuOption[] { + const menuOptions: MenuOption[] = menuVOTree.map((menuVO) => { + if (menuVO.type == MenuType.MENU_ITEM) { + return { + key: menuVO.name, + icon: renderIcon(menuVO.icon), + label: + menuVO.path.startsWith('http://') || menuVO.path.startsWith('https://') + ? () => h('a', { href: menuVO.path, target: '_blank' }, menuVO.title) + : () => h(RouterLink, { to: menuVO.path }, menuVO.title), + } + } else { + return { + key: menuVO.name, + icon: renderIcon(menuVO.icon), + label: menuVO.title, + children: convertToMenuOptions(menuVO.children ? menuVO.children : []), + } + } + }) + + return menuOptions +} + +const icons: Map = new Map(Object.entries(iconComponents)) +export function renderIcon(icon: string) { + const iconComponent = icons.get(icon) + return () => + h(NIcon, null, { + default: () => h(iconComponent ? iconComponent : iconComponents.QuestionCircle20Regular), + }) +} diff --git a/src/views/HomeView/components/SiderMenu.vue b/src/views/HomeView/components/SiderMenu.vue new file mode 100644 index 0000000..c2da31f --- /dev/null +++ b/src/views/HomeView/components/SiderMenu.vue @@ -0,0 +1,103 @@ + + + diff --git a/tsconfig.json b/tsconfig.json index 8d23599..1e30659 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,8 +2,11 @@ "extends": "@vue/tsconfig/tsconfig.web.json", "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "compilerOptions": { + "lib": ["ES2017"], + "target": "ES2015", "baseUrl": ".", "paths": { + "@": ["src"], "@/*": ["./src/*"] } }, diff --git a/vite.config.ts b/vite.config.ts index 0404e6b..ed5fc1f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -11,4 +11,7 @@ export default defineConfig({ '@': fileURLToPath(new URL('./src', import.meta.url)), }, }, + server: { + port: 8888, + }, })