From dbb92e3fe0ab90be938c956fedc368348520c60a Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 11 Nov 2025 17:07:08 +0800
Subject: [PATCH] =?UTF-8?q?doc=EF=BC=9A=E5=A2=9E=E5=8A=A0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/portal/src/components/TheAside.vue | 59 +++++++++++++++++----
 1 file changed, 49 insertions(+), 10 deletions(-)

diff --git a/packages/portal/src/components/TheAside.vue b/packages/portal/src/components/TheAside.vue
index 1c5bbb76e..018981000 100644
--- a/packages/portal/src/components/TheAside.vue
+++ b/packages/portal/src/components/TheAside.vue
@@ -2,18 +2,15 @@
 import { routes } from '@/router';
 import { ref, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
+import { OInput, debounce } from '@opendesign-src';
+import '@opendesign-src/input/style';
+
 const router = useRouter();
 const route = useRoute();
 
 const title = '组件';
 const currentNav = ref('Home');
-
-watch(
-  () => route.name,
-  (val) => {
-    currentNav.value = val as string;
-  }
-);
+const searchKey = ref('');
 
 const navList = routes
   .filter((item) => !item.exclude)
@@ -25,6 +22,30 @@ const navList = routes
       label: meta?.title,
     };
   });
+const displayNavList = ref(navList);
+
+const searchNavByKey = debounce((key: string) => {
+  if (!key) {
+    displayNavList.value = navList;
+  } else {
+
+    const res = navList.filter(item => item.label.toLocaleLowerCase().includes(key.toLocaleLowerCase()));
+    displayNavList.value = res || [];
+  }
+});
+watch(searchKey, (v) => {
+  searchNavByKey(v);
+});
+
+
+watch(
+  () => route.name,
+  (val) => {
+    currentNav.value = val as string;
+  }
+);
+
+
 const navClick = (item: (typeof navList)[0]) => {
   console.log(item.path);
   router.push(item.path);
@@ -32,11 +53,17 @@ const navClick = (item: (typeof navList)[0]) => {
 </script>
 <template>
   <aside class="the-aside">
-    <div class="aside-title">
-      {{ title }}
+    <div class="aside-head">
+      <div class="aside-title">
+        {{ title }}
+      </div>
+      <div class="aside-search">
+        <OInput class="aside-search-input" v-model="searchKey" clearable />
+      </div>
     </div>
     <div class="nav-list">
-      <div v-for="item in navList" :key="item.path" class="nav-item" :class="{ active: currentNav === item.name }" @click="navClick(item)">
+      <div v-for="item in displayNavList" :key="item.path" class="nav-item"
+        :class="{ active: currentNav === item.name }" @click="navClick(item)">
         {{ item.label }}
       </div>
     </div>
@@ -49,19 +76,31 @@ const navClick = (item: (typeof navList)[0]) => {
   overflow: auto;
   height: calc(100vh - 48px);
 }
+
 .aside-title {
   padding: 16px;
   text-align: center;
   border-bottom: 1px solid var(--o-color-control1-light);
   font-size: var(--o-font_size-h1);
 }
+
+.aside-search {
+  margin: 12px;
+}
+
+.aside-search-input {
+  width: 100%;
+}
+
 .nav-item {
   padding: 8px 16px;
   cursor: pointer;
+
   &:hover {
     color: var(--o-color-info1-inverse);
     background-color: var(--o-color-primary1-light);
   }
+
   &.active {
     color: var(--o-color-info1-inverse);
     background-color: var(--o-color-primary1);
-- 
Gitee