From d7a242700b3c61468ad0562a2307dae82e952e56 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Thu, 10 Jul 2025 12:01:47 +0800
Subject: [PATCH] feat: tag select ui

---
 .../src/components/CategorySelect.vue         | 30 ++++++++++----
 open-isle-cli/src/components/Dropdown.vue     |  5 ++-
 open-isle-cli/src/components/TagSelect.vue    | 41 +++++++++++--------
 3 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/open-isle-cli/src/components/CategorySelect.vue b/open-isle-cli/src/components/CategorySelect.vue
index fd6ebfe4e..7614b0d8f 100644
--- a/open-isle-cli/src/components/CategorySelect.vue
+++ b/open-isle-cli/src/components/CategorySelect.vue
@@ -1,15 +1,17 @@
 <template>
   <Dropdown v-model="selected" :fetch-options="fetchCategories" placeholder="选择分类">
     <template #option="{ option }">
-      <div class="option-main">
-        <template v-if="option.icon">
-          <img v-if="isImageIcon(option.icon)" :src="option.icon" class="option-icon" />
-          <i v-else :class="['option-icon', option.icon]"></i>
-        </template>
-        <span>{{ option.name }}</span>
-        <span v-if="option.count > 0"> x {{ option.count }}</span>
+      <div class="option-container">
+        <div class="option-main">
+          <template v-if="option.icon">
+            <img v-if="isImageIcon(option.icon)" :src="option.icon" class="option-icon" />
+            <i v-else :class="['option-icon', option.icon]"></i>
+          </template>
+          <span>{{ option.name }}</span>
+          <span class="option-count" v-if="option.count > 0"> x {{ option.count }}</span>
+        </div>
+        <div v-if="option.description" class="option-desc">{{ option.description }}</div>
       </div>
-      <div v-if="option.description" class="option-desc">{{ option.description }}</div>
     </template>
   </Dropdown>
 </template>
@@ -50,6 +52,12 @@ export default {
 </script>
 
 <style scoped>
+.option-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
 .option-main {
   display: flex;
   align-items: center;
@@ -59,6 +67,10 @@ export default {
 .option-desc {
   font-size: 12px;
   color: #666;
-  margin-left: 21px;
+}
+
+.option-count {
+  font-weight: bold;
+  opacity: 0.4;
 }
 </style>
diff --git a/open-isle-cli/src/components/Dropdown.vue b/open-isle-cli/src/components/Dropdown.vue
index 79a6d0cb5..1ce91383d 100644
--- a/open-isle-cli/src/components/Dropdown.vue
+++ b/open-isle-cli/src/components/Dropdown.vue
@@ -197,10 +197,9 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .dropdown {
   position: relative;
-  min-width: 200px;
 }
 
 .dropdown-display {
@@ -211,6 +210,7 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  min-width: 100px;
 }
 
 .placeholder {
@@ -226,6 +226,7 @@ export default {
   border: 1px solid #ccc;
   z-index: 10;
   max-height: 200px;
+  min-width: 350px;
   overflow-y: auto;
 }
 
diff --git a/open-isle-cli/src/components/TagSelect.vue b/open-isle-cli/src/components/TagSelect.vue
index 8d8498712..f0c3b5ab5 100644
--- a/open-isle-cli/src/components/TagSelect.vue
+++ b/open-isle-cli/src/components/TagSelect.vue
@@ -1,21 +1,17 @@
 <template>
-  <Dropdown
-    v-model="selected"
-    :fetch-options="fetchTags"
-    multiple
-    placeholder="选择标签"
-    remote
-  >
+  <Dropdown v-model="selected" :fetch-options="fetchTags" multiple placeholder="选择标签" remote>
     <template #option="{ option }">
-      <div class="option-main">
-        <template v-if="option.icon">
-          <img v-if="isImageIcon(option.icon)" :src="option.icon" class="option-icon" />
-          <i v-else :class="['option-icon', option.icon]"></i>
-        </template>
-        <span>{{ option.name }}</span>
-        <span v-if="option.count > 0"> x {{ option.count }}</span>
+      <div class="option-container">
+        <div class="option-main">
+          <template v-if="option.icon">
+            <img v-if="isImageIcon(option.icon)" :src="option.icon" class="option-icon" />
+            <i v-else :class="['option-icon', option.icon]"></i>
+          </template>
+          <span>{{ option.name }}</span>
+          <span class="option-count" v-if="option.count > 0"> x {{ option.count }}</span>
+        </div>
+        <div v-if="option.description" class="option-desc">{{ option.description }}</div>
       </div>
-      <div v-if="option.description" class="option-desc">{{ option.description }}</div>
     </template>
   </Dropdown>
 </template>
@@ -51,7 +47,9 @@ export default {
         if (res.ok) {
           data = await res.json()
         }
-      } catch {}
+      } catch {
+        toast.error('获取标签失败')
+      }
 
       let options = [...data, ...localTags.value]
 
@@ -99,6 +97,12 @@ export default {
 </script>
 
 <style scoped>
+.option-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
 .option-main {
   display: flex;
   align-items: center;
@@ -110,4 +114,9 @@ export default {
   color: #666;
   margin-left: 21px;
 }
+
+.option-count {
+  font-weight: bold;
+  opacity: 0.4;
+}
 </style>