perf(layout): 优化部分样式

apps/admin/src/router/routes/modules/dashboard.ts

@@ -7,7 +7,7 @@ const dashboard: RouteRecordItem = {
   redirect: '/dashboard/analysis',
   meta: {
     orderNo: 1,
-    icon: 'ion:grid-outline',
+    icon: 'mdi:monitor-dashboard',
     title: 'routes.dashboard.dashboard',
   },
   children: [
@@ -17,7 +17,6 @@ const dashboard: RouteRecordItem = {
       component: () => import('@/pages/dashboard/analysis/index.vue'),
       meta: {
         title: 'routes.dashboard.analysis',
-        icon: 'ion:grid-outline',
       },
     },
     {
@@ -26,7 +25,6 @@ const dashboard: RouteRecordItem = {
       component: () => import('@/pages/dashboard/workbench/index.vue'),
       meta: {
         title: 'routes.dashboard.workbench',
-        icon: 'ion:grid-outline',
       },
     },
   ],

apps/admin/src/router/routes/modules/demo/demo.ts

@@ -7,7 +7,7 @@ const dashboard: RouteRecordItem = {
   redirect: '/dashboard/form',
   meta: {
     orderNo: 2,
-    icon: 'ion:grid-outline',
+    icon: 'line-md:clipboard-list-twotone',
     title: 'routes.demo.demo',
   },
   children: [
@@ -17,7 +17,6 @@ const dashboard: RouteRecordItem = {
       component: () => import('@/pages/demo/Table.vue'),
       meta: {
         title: 'routes.demo.table',
-        icon: 'ion:grid-outline',
       },
     },
     {
@@ -26,7 +25,6 @@ const dashboard: RouteRecordItem = {
       component: () => import('@/pages/demo/Form.vue'),
       meta: {
         title: 'routes.demo.form',
-        icon: 'ion:grid-outline',
       },
     },
     {
@@ -35,7 +33,6 @@ const dashboard: RouteRecordItem = {
       component: () => import('@/pages/demo/Card.vue'),
       meta: {
         title: 'routes.demo.card',
-        icon: 'ion:grid-outline',
       },
     },
     {
@@ -44,7 +41,6 @@ const dashboard: RouteRecordItem = {
       component: () => import('@/pages/demo/Draggable.vue'),
       meta: {
         title: '拖拽',
-        icon: 'ion:grid-outline',
       },
     },
   ],

apps/admin/src/router/routes/modules/demo/editor.ts

@@ -7,6 +7,7 @@ const Editor: RouteRecordItem = {
   meta: {
     orderNo: 3,
     title: '编辑器',
+    icon: 'openmoji:code-editor'
   },
   children: [
     {
@@ -15,7 +16,6 @@ const Editor: RouteRecordItem = {
       component: () => import('@/pages/demo/editor/monaco-editor.vue'),
       meta: {
         title: 'monaco-editor',
-        icon: 'ion:grid-outline',
       },
     },
   ],

apps/admin/src/router/routes/modules/demo/page.ts

@@ -5,6 +5,8 @@ const Page: RouteRecordItem = {
   meta: {
     orderNo: 4,
     title: '非框架页面',
+    icon: 'tabler:frame-off',
+    hideTab: true
   },
 }
 

apps/admin/src/store/multipleTab.ts

@@ -128,12 +128,10 @@ export const useMultipleTabStore = defineStore({
     async checkTab(route: RouteLocationNormalized) {
       // await router.isReady()
 
-      const { path, name } = getRawRoute(route)
+      const { path, name, meta } = getRawRoute(route)
       // 404  The page does not need to add a tab
-      if (
-        path === PageEnum.ERROR_PAGE ||
-        path === PageEnum.BASE_LOGIN ||
-        path === PageEnum.BASE_LOCK ||
+      if ( [PageEnum.ERROR_PAGE, PageEnum.BASE_LOGIN, PageEnum.BASE_LOCK].includes(path as PageEnum) ||
+        meta?.hideTab ||
         !name ||
         [REDIRECT_ROUTE.name, PAGE_NOT_FOUND_ROUTE.name].includes(
           name as string,

packages/layouts/src/components/header.vue

@@ -85,7 +85,7 @@ const getShowHeaderMultipleTab = computed(()=>{
       <slot name="menu"></slot>
       <div class="pl-8px pr-8px">
         <slot name="buttons">
-          <VbenSpace class="p-1" :size="12" align="center">
+          <VbenSpace class="p-1" :size="16" align="center">
             <AppSearch v-if="getShowSearch"/>
             <AppNotify :is-dark="isDark" v-if="getShowNotice"/>
             <AppFullScreen v-if="getShowFullScreen"/>

packages/layouts/src/components/menu/index.vue

@@ -84,6 +84,7 @@ const routerToMenu = (item: RouteRecordItem) => {
   }
 }
 function renderIcon(icon: string) {
+  if (!icon) return undefined
   return () => h(VbenIconify, { icon })
 }
 </script>

packages/layouts/src/components/setting/components/SettingButton.vue

@@ -5,11 +5,13 @@ import {ref} from "vue";
 const settingDrawerVisible = ref(false)
 </script>
 <template>
-  <VbenIconify
-    icon="ion:settings-outline"
-    hoverPointer
-    @click="settingDrawerVisible = true"
-  />
-  <SettingDrawer v-model:visible="settingDrawerVisible" />
+  <div class="flex items-center">
+    <VbenIconify
+      icon="ion:settings-outline"
+      hoverPointer
+      @click="settingDrawerVisible = true"
+    />
+    <SettingDrawer v-model:visible="settingDrawerVisible"/>
+  </div>
 </template>
 <style lang="scss" scoped></style>

packages/layouts/src/components/setting/handler.ts

@@ -9,6 +9,8 @@ import {ProjectConfig} from '@vben/types';
 // import { updateDarkTheme } from '/@/logics/theme/dark';
 // import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 import {context} from "../../../bridge";
+import {updateColorWeak} from "../../logics/updateColorWeak";
+import {updateGrayMode} from "../../logics/updateGrayMode";
 
 export function baseHandler(event: HandlerSettingEnum, value: any) {
   const {useConfigStore} = context
@@ -138,14 +140,14 @@ export function handler(event: HandlerSettingEnum, value: any): DeepPartial<Proj
       return {showBreadCrumbIcon: value};
 
     case HandlerSettingEnum.GRAY_MODE:
-      // updateGrayMode(value);
+      updateGrayMode(value);
       return {grayMode: value};
 
     case HandlerSettingEnum.SHOW_FOOTER:
       return {showFooter: value};
 
     case HandlerSettingEnum.COLOR_WEAK:
-      // updateColorWeak(value);
+      updateColorWeak(value);
       return {colorWeak: value};
 
     case HandlerSettingEnum.SHOW_LOGO:

packages/layouts/src/components/tabs/index.vue

@@ -2,7 +2,7 @@
 import type {RouteLocationNormalized, RouteMeta} from 'vue-router'
 import {Sortable} from '@vben/utils'
 import {useRouter} from 'vue-router'
-import {computed, nextTick, ref, unref, watch} from 'vue'
+import {computed, nextTick, ref, unref} from 'vue'
 import {useI18n} from '@vben/locale'
 import {REDIRECT_NAME} from '@vben/constants'
 import {useGo} from '@vben/hooks'

packages/layouts/src/components/user-dropdown/user-info.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { context } from '../../../bridge'
-const { useUserStore } = context
+const { useUserStore, useAppInject } = context
 import headerImg from '@/assets/images/header.jpg'
 
 const userStore = useUserStore()
 
+const {getIsMobile} = useAppInject()
+
 const getUserInfo = computed(() => {
   const { realName = 'Vben Admin', avatar, desc } = userStore.getUserInfo || {}
 
@@ -15,7 +17,7 @@ const getUserInfo = computed(() => {
 <template>
   <div class="flex cursor-pointer">
     <img :src="getUserInfo.avatar" class="avatar w-6 h-6 mr-3" alt="avatar" />
-    <span>{{ getUserInfo.realName }}</span>
+    <span v-if="!getIsMobile">{{ getUserInfo.realName }}</span>
   </div>
 </template>
 <style scoped>

packages/layouts/src/logics/updateColorWeak.ts

@@ -0,0 +1,9 @@
+import { toggleClass } from '@vben/utils';
+
+/**
+ * Change the status of the project's color weakness mode
+ * @param colorWeak
+ */
+export function updateColorWeak(colorWeak: boolean) {
+  toggleClass(colorWeak, 'color-weak', document.body);
+}

packages/layouts/src/logics/updateGrayMode.ts

@@ -0,0 +1,9 @@
+import { toggleClass } from '@vben/utils';
+
+/**
+ * Change project gray mode status
+ * @param gray
+ */
+export function updateGrayMode(gray: boolean) {
+  toggleClass(gray, 'gray-mode', document.body);
+}

packages/styles/src/entry.css

@@ -161,3 +161,12 @@
     transform: translateY(0);
   }
 }
+
+@keyframes loading-circle {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

packages/utils/src/index.ts

@@ -9,5 +9,6 @@ export * from './download'
 export * from './tree'
 export * from './router'
 export * from './mitt'
+export * from './theme'
 
 // export * from 'lodash-es'

packages/utils/src/theme.ts

@@ -0,0 +1,11 @@
+const docEle = document.documentElement;
+export function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
+  const targetEl = target || document.body;
+  let { className } = targetEl;
+  className = className.replace(clsName, '');
+  targetEl.className = flag ? `${className} ${clsName} ` : className;
+}
+
+export function setCssVar(prop: string, val: any, dom = docEle) {
+  dom.style.setProperty(prop, val);
+}

packages/vbenComponents/src/iconify/src/Iconify.vue

@@ -93,16 +93,8 @@ onMounted(update)
   }
 }
 
-@keyframes loadingCircle {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 .iconify__infinite {
-  animation: loadingCircle 1s infinite linear;
+  animation: loading-circle 1s infinite linear;
 }
 
 </style>