tabs优化

src/components/common-menu/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue'
 import { filterMenus } from '@/components/utils'
+import { useRoute } from 'vue-router'
 
 const props = defineProps({
   menus: {
@@ -11,12 +12,16 @@ const props = defineProps({
 const menuItems = computed(() => {
   return filterMenus(props.menus)
 })
+const activeRoutePath = computed(() => {
+  const route = useRoute()
+  return route.path !== '/' ? route.path : ''
+})
 </script>
 
 <template>
   <el-menu
     v-bind="$attrs"
-    :default-active="$route.path"
+    :default-active="activeRoutePath"
     router
   >
     <slot name="before" />

src/components/common-tabs-view/index.vue

@@ -43,6 +43,7 @@ const removeHistoryTab = path => {
   <el-tabs
     v-bind="$attrs"
     v-model="currentTabValue"
+    class="common-tabs"
     type="card"
     :closable="tabsViewStore.historyTabs.length>1"
     @tab-change="selectHistoryTab"
@@ -57,5 +58,10 @@ const removeHistoryTab = path => {
 </template>
 
 <style scoped>
-
+.common-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
 </style>

src/components/common-tabs-view/tabs-view-item.vue

@@ -1,6 +1,9 @@
 <script setup>
-import { useMenuName } from '@/components/utils'
+import { useMenuInfo, useMenuName } from '@/components/utils'
 import { computed } from 'vue'
+import { useTabsViewStore } from '@/stores/TabsViewStore'
+
+const tabsViewStore = useTabsViewStore()
 
 const props = defineProps({
   tabItem: {
@@ -10,19 +13,36 @@ const props = defineProps({
 })
 
 const menuName = computed(() => {
-  if (props.tabItem) {
-    return useMenuName(props.tabItem)
-  }
+  return useMenuName(props.tabItem)
+})
+
+const menuInfo = computed(() => {
+  return props.tabItem.path === '/' ? { icon: 'HomeFilled' } : useMenuInfo(props.tabItem)
 })
 </script>
 
 <template>
   <el-tab-pane
-    :label="menuName"
     :name="tabItem.path"
-  />
+  >
+    <template #label>
+      <span class="custom-tabs-label">
+        <common-icon
+          v-if="tabsViewStore.isShowTabIcon && menuInfo && menuInfo.icon"
+          :icon="menuInfo.icon"
+        />
+        <span>{{ menuName }}</span>
+      </span>
+    </template>
+  </el-tab-pane>
 </template>
 
 <style scoped>
-
+.common-tabs .custom-tabs-label .el-icon {
+  vertical-align: middle;
+}
+.common-tabs .custom-tabs-label span {
+  vertical-align: middle;
+  margin-left: 4px;
+}
 </style>

src/components/utils/index.js

@@ -12,14 +12,17 @@ const calcWithIf = menuItem => {
 
 export const MENU_INFO_LIST = ref({})
 
-export const useMenuInfo = path => {
-  const menuInfo = MENU_INFO_LIST.value[path]
-  console.info('================', MENU_INFO_LIST.value)
-  return menuInfo
+export const useMenuInfo = item => {
+  const path = item.path
+  if (path !== '/') {
+    const menuInfo = MENU_INFO_LIST.value[path]
+    console.info('config menu:', menuInfo)
+    return menuInfo
+  }
 }
 
 export const useMenuName = item => {
-  const menuInfo = useMenuInfo(item.path)
+  const menuInfo = useMenuInfo(item)
   if (menuInfo) {
     if (menuInfo.label) {
       return menuInfo.label

src/route/routes.js

@@ -11,6 +11,13 @@ const router = createRouter({
       name: 'home',
       component: HomeView,
       children: [{
+        path: '',
+        name: 'index',
+        component: () => import('@/views/Index.vue'),
+        meta: {
+          labelKey: 'common.label.index'
+        }
+      }, {
         path: 'about',
         name: 'about',
         component: () => import('@/views/account/AboutView.vue')

src/services/global/GlobalService.js

@@ -76,6 +76,7 @@ export const useBusinessMenus = () => {
   return ref([
     {
       icon: 'HomeFilled',
+      index: '/',
       labelIf: () => $i18nBundle('common.label.title')
     },
     {
@@ -105,7 +106,7 @@ export const useBusinessMenus = () => {
       ]
     },
     {
-      icon: 'BuildRound',
+      icon: 'BuildFilled',
       labelKey: 'menu.label.toolsManagement',
       children: [
         {
@@ -120,7 +121,7 @@ export const useBusinessMenus = () => {
         },
         {
           index: '/forms',
-          icon: 'TableRowsTwotone',
+          icon: 'TableRowsFilled',
           labelKey: 'menu.label.toolsForms'
         },
         {

src/stores/TabsViewStore.js

@@ -4,6 +4,7 @@ import { defineStore } from 'pinia'
 export const useTabsViewStore = defineStore('tabsView', () => {
   const isTabMode = ref(true)
   const isCachedTabMode = ref(true)
+  const isShowTabIcon = ref(true)
   const historyTabs = ref([])
   const cachedTabs = ref([])
 
@@ -61,6 +62,7 @@ export const useTabsViewStore = defineStore('tabsView', () => {
   return {
     isTabMode,
     isCachedTabMode,
+    isShowTabIcon,
     historyTabs,
     cachedTabs,
     changeTabMode () {
@@ -75,6 +77,9 @@ export const useTabsViewStore = defineStore('tabsView', () => {
         cachedTabs.value = []
       }
     },
+    changeShowTabIcon () {
+      isShowTabIcon.value = !isShowTabIcon.value
+    },
     removeHistoryTab,
     clearHistoryTabs,
     findHistoryTab,

src/views/Index.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    <strong>首页测试</strong>
+  </div>
+</template>
+
+<style scoped>
+
+</style>