From a0d42360c67abbe5eee8c92051d43208cdba8526 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Tue, 8 Jul 2025 20:36:59 +0800
Subject: [PATCH] feat: search ui

---
 open-isle-cli/src/components/Dropdown.vue     | 64 +++++++++----------
 .../src/components/SearchDropdown.vue         | 17 +++--
 2 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/open-isle-cli/src/components/Dropdown.vue b/open-isle-cli/src/components/Dropdown.vue
index cf774e4f3..852573b38 100644
--- a/open-isle-cli/src/components/Dropdown.vue
+++ b/open-isle-cli/src/components/Dropdown.vue
@@ -1,41 +1,35 @@
 <template>
   <div class="dropdown" ref="wrapper">
-      <div class="dropdown-display" @click="toggle">
-        <slot
-          name="display"
-          :selected="selectedLabels"
-          :toggle="toggle"
-          :search="search"
-          :setSearch="setSearch"
-        >
-      <template v-if="multiple">
-        <span v-if="selectedLabels.length">
-          <template v-for="(label, idx) in selectedLabels" :key="label.id">
-            <div class="selected-label">
-              <template v-if="label.icon">
-                <img v-if="isImageIcon(label.icon)" :src="label.icon" class="option-icon" />
-                <i v-else :class="['option-icon', label.icon]"></i>
-              </template>
-              <span>{{ label.name }}</span>
-            </div>
-            <span v-if="idx !== selectedLabels.length - 1">, </span>
-          </template>
-        </span>
-        <span v-else class="placeholder">{{ placeholder }}</span>
-      </template>
-      <template v-else>
-        <span v-if="selectedLabels.length">
-          <div class="selected-label">
-            <template v-if="selectedLabels[0].icon">
-              <img v-if="isImageIcon(selectedLabels[0].icon)" :src="selectedLabels[0].icon" class="option-icon" />
-              <i v-else :class="['option-icon', selectedLabels[0].icon]"></i>
+    <div class="dropdown-display" @click="toggle">
+      <slot name="display" :selected="selectedLabels" :toggle="toggle" :search="search" :setSearch="setSearch">
+        <template v-if="multiple">
+          <span v-if="selectedLabels.length">
+            <template v-for="(label, idx) in selectedLabels" :key="label.id">
+              <div class="selected-label">
+                <template v-if="label.icon">
+                  <img v-if="isImageIcon(label.icon)" :src="label.icon" class="option-icon" />
+                  <i v-else :class="['option-icon', label.icon]"></i>
+                </template>
+                <span>{{ label.name }}</span>
+              </div>
+              <span v-if="idx !== selectedLabels.length - 1">, </span>
             </template>
-            <span>{{ selectedLabels[0].name }}</span>
-          </div>
-        </span>
-        <span v-else class="placeholder">{{ placeholder }}</span>
-      </template>
-      <i class="fas fa-caret-down dropdown-caret"></i>
+          </span>
+          <span v-else class="placeholder">{{ placeholder }}</span>
+        </template>
+        <template v-else>
+          <span v-if="selectedLabels.length">
+            <div class="selected-label">
+              <template v-if="selectedLabels[0].icon">
+                <img v-if="isImageIcon(selectedLabels[0].icon)" :src="selectedLabels[0].icon" class="option-icon" />
+                <i v-else :class="['option-icon', selectedLabels[0].icon]"></i>
+              </template>
+              <span>{{ selectedLabels[0].name }}</span>
+            </div>
+          </span>
+          <span v-else class="placeholder">{{ placeholder }}</span>
+        </template>
+        <i class="fas fa-caret-down dropdown-caret"></i>
       </slot>
     </div>
     <div v-if="open && (loading || filteredOptions.length > 0)" :class="['dropdown-menu', menuClass]">
diff --git a/open-isle-cli/src/components/SearchDropdown.vue b/open-isle-cli/src/components/SearchDropdown.vue
index 012aa1966..5a44e25e7 100644
--- a/open-isle-cli/src/components/SearchDropdown.vue
+++ b/open-isle-cli/src/components/SearchDropdown.vue
@@ -9,11 +9,13 @@
         </div>
       </template>
       <template #option="{ option }">
-        <i :class="['result-icon', iconMap[option.type] || 'fas fa-question']"></i>
-        <div class="result-body">
-          <div class="result-main" v-html="highlight(option.text)"></div>
-          <div v-if="option.subText" class="result-sub" v-html="highlight(option.subText)"></div>
-          <div v-if="option.extra" class="result-extra" v-html="highlight(option.extra)"></div>
+        <div class="search-option-item">
+          <i :class="['result-icon', iconMap[option.type] || 'fas fa-question']"></i>
+          <div class="result-body">
+            <div class="result-main" v-html="highlight(option.text)"></div>
+            <div v-if="option.subText" class="result-sub" v-html="highlight(option.subText)"></div>
+            <div v-if="option.extra" class="result-extra" v-html="highlight(option.extra)"></div>
+          </div>
         </div>
       </template>
     </Dropdown>
@@ -89,6 +91,11 @@ export default {
   max-width: 600px;
 }
 
+.search-option-item {
+  display: flex;
+  gap: 10px;
+}
+
 .search-option {
   display: flex;
   align-items: center;