feat(components): Add routing data related to tree components and page display optimization

src/router/modules/component.ts

@@ -32,6 +32,48 @@ const component: AuthRoute.Route = {
         requiresAuth: true,
         icon: 'mdi:table-large'
       }
+    },
+    {
+      name: 'component_tree',
+      path: '/component/tree',
+      component: 'multi',
+      children: [
+        {
+          name: 'component_tree_tree-basic',
+          path: '/component/tree/tree-basic',
+          component: 'self',
+          meta: {
+            title: '基础树',
+            requiresAuth: true,
+            icon: 'fluent:tree-deciduous-20-regular'
+          }
+        },
+        {
+          name: 'component_tree_tree-custom',
+          path: '/component/tree/tree-custom',
+          component: 'self',
+          meta: {
+            title: '自定义树',
+            requiresAuth: true,
+            icon: 'fluent:tree-deciduous-20-filled'
+          }
+        },
+        {
+          name: 'component_tree_tree-functions',
+          path: '/component/tree/tree-functions',
+          component: 'self',
+          meta: {
+            title: '函数示例',
+            requiresAuth: true,
+            icon: 'fluent:tree-evergreen-20-filled'
+          }
+        }
+      ],
+      meta: {
+        title: '树',
+        requiresAuth: true,
+        icon: 'carbon:tree-view-alt'
+      }
     }
   ],
   meta: {

src/typings/page-route.d.ts

@@ -30,6 +30,10 @@ declare namespace PageRoute {
     | 'component_button'
     | 'component_card'
     | 'component_table'
+    | 'component_tree'
+    | 'component_tree_tree-basic'
+    | 'component_tree_tree-custom'
+    | 'component_tree_tree-functions'
     | 'dashboard'
     | 'dashboard_analysis'
     | 'dashboard_workbench'
@@ -89,6 +93,9 @@ declare namespace PageRoute {
     | 'component_button'
     | 'component_card'
     | 'component_table'
+    | 'component_tree_tree-basic'
+    | 'component_tree_tree-custom'
+    | 'component_tree_tree-functions'
     | 'dashboard_analysis'
     | 'dashboard_workbench'
     | 'document_naive'

src/views/component/tree/tree-basic/index.vue

@@ -145,8 +145,11 @@ import { ref, h } from 'vue';
 import type { TreeOption, TreeInst } from 'naive-ui';
 import { NIcon } from 'naive-ui';
 import { repeat } from 'seemly';
+import { useIconRender } from '@/composables';
 import { useLoading } from '@/hooks';
 
+const { iconRender } = useIconRender();
+
 const cascade = ref<boolean>(true);
 const segmented = ref<boolean>(true);
 
@@ -310,7 +313,7 @@ const caseEightDefaultExpandedKeys = ref<string[]>(['20']);
 
 const renderSwitcherIconWithExpaned = ({ expanded }: { expanded: boolean }) =>
   h(NIcon, null, {
-    default: () => h(expanded ? <icon-solar-moon-broken /> : <icon-solar-sun-broken />)
+    default: () => h(expanded ? iconRender({ icon: 'solar:moon-broken' }) : iconRender({ icon: 'solar:sun-broken' }))
   });
 
 function createRemoteData() {

src/views/component/tree/tree-custom/index.vue

@@ -189,7 +189,7 @@ function createSuffixData(level = 2, baseKey = ''): TreeOption[] | undefined {
       key,
       children: createSuffixData(level - 1, key),
       suffix: () =>
-        h(NSpace, { justify: 'space-evenly' }, [
+        h(NSpace, { justify: 'space-evenly' }, () => [
           h(NButton, { text: true, class: 'pt-1.5' }, { default: () => <icon-mdi-plus class="text-18px" /> }),
           h(
             NButton,

src/views/component/tree/tree-functions/index.vue

@@ -9,14 +9,6 @@
     <n-space :vertical="true">
       <n-card title="函数示例">
         <n-card>
-          <template #header>
-            <n-gradient-text
-              class="text-20px font-bold"
-              gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"
-            >
-              函数合集
-            </n-gradient-text>
-          </template>
           <template #header-extra>
             <n-space justify="space-around">
               <n-button dashed type="primary" @click="handleGenerateTreeData">重置数据</n-button>

src/views/index.ts

@@ -16,6 +16,9 @@ export const views: Record<
   component_button: () => import('./component/button/index.vue'),
   component_card: () => import('./component/card/index.vue'),
   component_table: () => import('./component/table/index.vue'),
+  'component_tree_tree-basic': () => import('./component/tree/tree-basic/index.vue'),
+  'component_tree_tree-custom': () => import('./component/tree/tree-custom/index.vue'),
+  'component_tree_tree-functions': () => import('./component/tree/tree-functions/index.vue'),
   dashboard_analysis: () => import('./dashboard/analysis/index.vue'),
   dashboard_workbench: () => import('./dashboard/workbench/index.vue'),
   document_naive: () => import('./document/naive/index.vue'),