From e181f04c642204e79749af93fa921875ff6c21ba Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期二, 20 五月 2025 10:46:35 +0800
Subject: [PATCH] refactor(qms): 重构趋势图展示逻辑

---
 src/layout/components/Sidebar/SidebarItem.vue |   81 ++++++++++++++++++++--------------------
 1 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index c423fb1..5e82ea3 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,23 +1,25 @@
 <template>
   <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
+    <template v-if="hasOneShowingChild(item, item.children) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
-          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
-          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
+          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
+          <template #title>
+            <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>
+          </template>
         </el-menu-item>
       </app-link>
     </template>
 
-    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
       <template v-if="item.meta" #title>
-        <svg-icon :icon-class="item.meta && item.meta.icon" />
-        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
+        <svg-icon :icon-class="item.meta ? item.meta.icon : ''" />
+        <span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span>
       </template>
 
       <sidebar-item
-        v-for="child in item.children"
-        :key="child.path"
+        v-for="(child, index) in item.children"
+        :key="child.path + index"
         :is-nest="true"
         :item="child"
         :base-path="resolvePath(child.path)"
@@ -27,15 +29,15 @@
   </div>
 </template>
 
-<script setup>
-import { isExternal } from '@/utils/validate'
-import AppLink from './Link'
-import { getNormalPath } from '@/utils/ruoyi'
+<script setup lang="ts">
+import { isExternal } from '@/utils/validate';
+import AppLink from './Link.vue';
+import { getNormalPath } from '@/utils/ruoyi';
+import { RouteRecordRaw } from 'vue-router';
 
 const props = defineProps({
-  // route object
   item: {
-    type: Object,
+    type: Object as PropType<RouteRecordRaw>,
     required: true
   },
   isNest: {
@@ -46,57 +48,54 @@
     type: String,
     default: ''
   }
-})
+});
 
-const onlyOneChild = ref({});
+const onlyOneChild = ref<any>({});
 
-function hasOneShowingChild(children = [], parent) {
+const hasOneShowingChild = (parent: RouteRecordRaw, children?: RouteRecordRaw[]) => {
   if (!children) {
     children = [];
   }
-  const showingChildren = children.filter(item => {
+  const showingChildren = children.filter((item) => {
     if (item.hidden) {
-      return false
-    } else {
-      // Temp set(will be used if only has one showing child)
-      onlyOneChild.value = item
-      return true
+      return false;
     }
-  })
+    onlyOneChild.value = item;
+    return true;
+  });
 
   // When there is only one child router, the child router is displayed by default
   if (showingChildren.length === 1) {
-    return true
+    return true;
   }
 
   // Show parent if there are no child router to display
   if (showingChildren.length === 0) {
-    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
-    return true
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true };
+    return true;
   }
 
-  return false
+  return false;
 };
 
-function resolvePath(routePath, routeQuery) {
+const resolvePath = (routePath: string, routeQuery?: string): any => {
   if (isExternal(routePath)) {
-    return routePath
+    return routePath;
   }
-  if (isExternal(props.basePath)) {
-    return props.basePath
+  if (isExternal(props.basePath as string)) {
+    return props.basePath;
   }
   if (routeQuery) {
     let query = JSON.parse(routeQuery);
-    return { path: getNormalPath(props.basePath + '/' + routePath), query: query }
+    return { path: getNormalPath(props.basePath + '/' + routePath), query: query };
   }
-  return getNormalPath(props.basePath + '/' + routePath)
-}
+  return getNormalPath(props.basePath + '/' + routePath);
+};
 
-function hasTitle(title){
-  if (title.length > 5) {
-    return title;
-  } else {
-    return "";
+const hasTitle = (title: string | undefined): string => {
+  if (!title || title.length <= 5) {
+    return '';
   }
-}
+  return title;
+};
 </script>

--
Gitblit v1.9.3