feat: support search on Marketplace (#350)

src/types/app.d.ts

@@ -59,7 +59,7 @@ export interface SubItem {
   icon: string;
   title: string;
   activate: boolean;
-  name?: string;
+  name: string;
   path?: string;
   notShow?: boolean;
   id?: string;

src/views/Marketplace.vue

@@ -14,11 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="menus flex-v">
+    <div>
+      <el-input v-model="searchText" placeholder="Please input name" class="input-with-search" @change="searchMenus">
+        <template #append>
+          <el-button size="small">
+            <Icon size="sm" iconName="search" />
+          </el-button>
+        </template>
+      </el-input>
+    </div>
     <div class="category-body flex-h">
       <div class="mr-20 mt-10 flex-h category">
         <el-card
           class="item"
-          v-for="(menu, index) in appStore.allMenus"
+          v-for="(menu, index) in menus"
           :key="index"
           @click="handleItems(menu)"
           :class="currentItems.name === menu.name ? 'active' : ''"
@@ -54,15 +63,35 @@ limitations under the License. -->
   import { ref } from "vue";
   import { useI18n } from "vue-i18n";
   import { useAppStoreWithOut } from "@/store/modules/app";
-  import type { MenuOptions } from "@/types/app";
+  import type { MenuOptions, SubItem } from "@/types/app";
 
   const { t, te } = useI18n();
   const appStore = useAppStoreWithOut();
   const currentItems = ref<MenuOptions>(appStore.allMenus[0] || {});
+  const searchText = ref<string>("");
+  const menus = ref<MenuOptions[]>(appStore.allMenus || []);
 
   function handleItems(item: MenuOptions) {
     currentItems.value = item;
   }
+
+  function searchMenus() {
+    if (!searchText.value) {
+      menus.value = appStore.allMenus;
+      return;
+    }
+
+    menus.value = appStore.allMenus.filter(
+      (item: MenuOptions) =>
+        (te(item.i18nKey) ? t(item.i18nKey) : item.title).toLowerCase().includes(searchText.value.toLowerCase()) ||
+        !!item.subItems.find((subItem: SubItem) =>
+          (te(subItem.i18nKey) ? t(subItem.i18nKey) : item.title)
+            .toLowerCase()
+            .includes(searchText.value.toLowerCase()),
+        ),
+    );
+    currentItems.value = menus.value[0] || {};
+  }
 </script>
 <style lang="scss" scoped>
   .menus {
@@ -111,6 +140,10 @@ limitations under the License. -->
     cursor: pointer;
   }
 
+  .input-with-search {
+    width: 300px;
+  }
+
   .category {
     flex-wrap: wrap;
     border-right: 1px solid var(--sw-marketplace-border);