feat(ui): introduce searchable TagsSelect component for multi-selects

Replace native multiple selects across admin and list views
Improve UX with searchable dropdowns and tag-based selections

frontend/src/components/TagsSelect.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+
+export type TagsSelectOption = {
+  id: number | string;
+  name: string;
+  subcategory?: string | null;
+};
+
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    modelValue: string[];
+    options: TagsSelectOption[];
+    max?: number;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+  }>(),
+  {
+    max: 0,
+    placeholder: '搜索或选择',
+    searchPlaceholder: '搜索',
+    emptyText: '没有匹配项'
+  }
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]];
+}>();
+
+const root = ref<HTMLElement | null>(null);
+const searchInput = ref<HTMLInputElement | null>(null);
+const isOpen = ref(false);
+const search = ref('');
+
+const optionRows = computed(() =>
+  props.options.map((option) => ({
+    value: String(option.id),
+    label: option.subcategory ? `${option.name} · ${option.subcategory}` : option.name
+  }))
+);
+
+const selectedValues = computed(() => new Set(props.modelValue));
+const maxReached = computed(() => props.max > 0 && props.modelValue.length >= props.max);
+
+const selectedRows = computed(() =>
+  props.modelValue
+    .map((value) => optionRows.value.find((option) => option.value === value))
+    .filter((option) => option !== undefined)
+);
+
+const filteredRows = computed(() => {
+  const keyword = search.value.trim().toLowerCase();
+  if (!keyword) return optionRows.value;
+  return optionRows.value.filter((option) => option.label.toLowerCase().includes(keyword));
+});
+
+async function openDropdown() {
+  isOpen.value = true;
+  await nextTick();
+  searchInput.value?.focus();
+}
+
+function closeDropdown() {
+  isOpen.value = false;
+  search.value = '';
+}
+
+function toggleDropdown() {
+  if (isOpen.value) {
+    closeDropdown();
+  } else {
+    void openDropdown();
+  }
+}
+
+function toggle(value: string) {
+  if (selectedValues.value.has(value)) {
+    emit(
+      'update:modelValue',
+      props.modelValue.filter((item) => item !== value)
+    );
+    return;
+  }
+
+  if (!maxReached.value) {
+    emit('update:modelValue', [...props.modelValue, value]);
+  }
+}
+
+function remove(value: string) {
+  emit(
+    'update:modelValue',
+    props.modelValue.filter((item) => item !== value)
+  );
+}
+
+function onRootKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    closeDropdown();
+  }
+}
+
+function onDocumentPointerDown(event: PointerEvent) {
+  if (root.value && !root.value.contains(event.target as Node)) {
+    closeDropdown();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', onDocumentPointerDown);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', onDocumentPointerDown);
+});
+</script>
+
+<template>
+  <div ref="root" class="tags-select" @keydown="onRootKeydown">
+    <button
+      :id="id"
+      type="button"
+      class="tags-select__trigger"
+      :class="{ open: isOpen }"
+      aria-haspopup="listbox"
+      :aria-expanded="isOpen"
+      @click="toggleDropdown"
+    >
+      <span v-if="selectedRows.length" class="tags-select__selected">
+        <span v-for="option in selectedRows" :key="option.value" class="tags-select__tag">
+          <span>{{ option.label }}</span>
+          <span
+            class="tags-select__remove"
+            role="button"
+            tabindex="0"
+            :aria-label="`移除${option.label}`"
+            @click.stop="remove(option.value)"
+            @keydown.enter.stop.prevent="remove(option.value)"
+            @keydown.space.stop.prevent="remove(option.value)"
+          >
+            ×
+          </span>
+        </span>
+      </span>
+      <span v-else class="tags-select__placeholder">{{ placeholder }}</span>
+      <span class="tags-select__arrow" aria-hidden="true">⌄</span>
+    </button>
+
+    <div v-if="isOpen" class="tags-select__dropdown">
+      <input
+        ref="searchInput"
+        v-model="search"
+        class="tags-select__search"
+        type="search"
+        :placeholder="searchPlaceholder"
+      />
+
+      <div class="tags-select__options" role="listbox" aria-multiselectable="true">
+        <button
+          v-for="option in filteredRows"
+          :key="option.value"
+          type="button"
+          class="tags-select__option"
+          :class="{ selected: selectedValues.has(option.value) }"
+          role="option"
+          :aria-selected="selectedValues.has(option.value)"
+          :disabled="!selectedValues.has(option.value) && maxReached"
+          @click="toggle(option.value)"
+        >
+          <span>{{ option.label }}</span>
+          <span v-if="selectedValues.has(option.value)" class="tags-select__state">已选</span>
+        </button>
+        <p v-if="!filteredRows.length" class="tags-select__empty">{{ emptyText }}</p>
+      </div>
+    </div>
+  </div>
+</template>

frontend/src/styles/main.css

@@ -128,6 +128,157 @@ select {
   color: #17211b;
 }
 
+.tags-select {
+  position: relative;
+}
+
+.tags-select__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-height: 40px;
+  padding: 6px 10px;
+  border: 1px solid #c7c0b2;
+  border-radius: 8px;
+  background: #fffdfa;
+  color: #17211b;
+  text-align: left;
+  cursor: pointer;
+}
+
+.tags-select__trigger.open {
+  border-color: #1f6f50;
+  box-shadow: 0 0 0 3px rgba(31, 111, 80, 0.12);
+}
+
+.tags-select__selected {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+}
+
+.tags-select__tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 26px;
+  padding: 3px 7px;
+  border-color: #9fc9a5;
+  border: 1px solid #9fc9a5;
+  border-radius: 999px;
+  background: #edf7ef;
+  color: #1f5c40;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.tags-select__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  min-height: 18px;
+  border-radius: 999px;
+  color: #4e5c52;
+  cursor: pointer;
+}
+
+.tags-select__remove:hover {
+  background: rgba(31, 111, 80, 0.12);
+}
+
+.tags-select__placeholder {
+  color: #8a8275;
+}
+
+.tags-select__arrow {
+  flex: 0 0 auto;
+  color: #657067;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.tags-select__dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 40;
+  display: grid;
+  gap: 8px;
+  width: 100%;
+  min-width: 220px;
+  padding: 8px;
+  border: 1px solid #d7d2c4;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 12px 28px rgba(23, 33, 27, 0.16);
+}
+
+.tags-select__search {
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 10px;
+  border: 1px solid #c7c0b2;
+  border-radius: 8px;
+  background: #fffdfa;
+  color: #17211b;
+}
+
+.tags-select__options {
+  display: grid;
+  max-height: 220px;
+  overflow: auto;
+}
+
+.tags-select__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #17211b;
+  text-align: left;
+  cursor: pointer;
+}
+
+.tags-select__option:hover,
+.tags-select__option.selected {
+  background: #edf7ef;
+  color: #1f5c40;
+}
+
+.tags-select__option.selected {
+  font-weight: 800;
+}
+
+.tags-select__option:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.tags-select__state {
+  flex: 0 0 auto;
+  color: #1f6f50;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.tags-select__empty {
+  margin: 0;
+  padding: 8px 10px;
+  color: #657067;
+  font-size: 13px;
+}
+
 .segmented {
   display: inline-flex;
   width: fit-content;
@@ -340,8 +491,11 @@ select {
 
 .appearance-row {
   display: grid;
-  grid-template-columns: minmax(130px, 1.2fr) minmax(120px, 1fr) repeat(3, minmax(80px, 0.7fr)) auto;
-  align-items: center;
+  grid-template-columns: 1fr;
+  padding: 12px;
+  border: 1px solid #ebe6da;
+  border-radius: 8px;
+  background: #faf8f1;
 }
 
 .appearance-row input {

frontend/src/views/AdminView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import TagsSelect from '../components/TagsSelect.vue';
 import {
   api,
   type ConfigType,
@@ -37,6 +38,8 @@ const tabs: Array<{ key: AdminTab; label: string }> = [
 
 const timeOfDays = ['早晨', '中午', '傍晚', '晚上'];
 const weathers = ['晴天', '阴天', '雨天'];
+const timeOfDayOptions = timeOfDays.map((name) => ({ id: name, name }));
+const weatherOptions = weathers.map((name) => ({ id: name, name }));
 
 const configTypes: Array<{ key: ConfigType; label: string; hasSubcategory?: boolean }> = [
   { key: 'skills', label: '特长', hasSubcategory: true },
@@ -488,17 +491,23 @@ onMounted(() => {
         </div>
         <div class="field">
           <label for="pokemon-skills">特长</label>
-          <select id="pokemon-skills" v-model="pokemonForm.skillIds" multiple @change="pokemonForm.skillIds = pokemonForm.skillIds.slice(0, 2)">
-            <option v-for="item in options.skills" :key="item.id" :value="String(item.id)">
-              {{ item.name }}{{ item.subcategory ? ` · ${item.subcategory}` : '' }}
-            </option>
-          </select>
+          <TagsSelect
+            id="pokemon-skills"
+            v-model="pokemonForm.skillIds"
+            :options="options.skills"
+            :max="2"
+            placeholder="搜索特长"
+          />
         </div>
         <div class="field">
           <label for="pokemon-things">喜欢的东西</label>
-          <select id="pokemon-things" v-model="pokemonForm.favoriteThingIds" multiple @change="pokemonForm.favoriteThingIds = pokemonForm.favoriteThingIds.slice(0, 6)">
-            <option v-for="item in options.favoriteThings" :key="item.id" :value="String(item.id)">{{ item.name }}</option>
-          </select>
+          <TagsSelect
+            id="pokemon-things"
+            v-model="pokemonForm.favoriteThingIds"
+            :options="options.favoriteThings"
+            :max="6"
+            placeholder="搜索喜欢的东西"
+          />
         </div>
         <div class="form-actions">
           <button type="submit" class="link-button" :disabled="busy">保存</button>
@@ -552,15 +561,16 @@ onMounted(() => {
         </div>
         <div class="field">
           <label for="item-methods">入手方式</label>
-          <select id="item-methods" v-model="itemForm.acquisitionMethodIds" multiple>
-            <option v-for="item in options.acquisitionMethods" :key="item.id" :value="String(item.id)">{{ item.name }}</option>
-          </select>
+          <TagsSelect
+            id="item-methods"
+            v-model="itemForm.acquisitionMethodIds"
+            :options="options.acquisitionMethods"
+            placeholder="搜索入手方式"
+          />
         </div>
         <div class="field">
           <label for="item-tags">标签</label>
-          <select id="item-tags" v-model="itemForm.tagIds" multiple>
-            <option v-for="item in options.itemTags" :key="item.id" :value="String(item.id)">{{ item.name }}</option>
-          </select>
+          <TagsSelect id="item-tags" v-model="itemForm.tagIds" :options="options.itemTags" placeholder="搜索标签" />
         </div>
         <div class="form-actions">
           <button type="submit" class="link-button" :disabled="busy">保存</button>
@@ -588,9 +598,12 @@ onMounted(() => {
         <div class="field"><label for="recipe-name">名称</label><input id="recipe-name" v-model="recipeForm.name" /></div>
         <div class="field">
           <label for="recipe-methods">入手方式</label>
-          <select id="recipe-methods" v-model="recipeForm.acquisitionMethodIds" multiple>
-            <option v-for="item in options.acquisitionMethods" :key="item.id" :value="String(item.id)">{{ item.name }}</option>
-          </select>
+          <TagsSelect
+            id="recipe-methods"
+            v-model="recipeForm.acquisitionMethodIds"
+            :options="options.acquisitionMethods"
+            placeholder="搜索入手方式"
+          />
         </div>
         <div class="field">
           <label>需要材料</label>
@@ -647,15 +660,9 @@ onMounted(() => {
               <option value="">Pokemon</option>
               <option v-for="item in pokemonRows" :key="item.id" :value="String(item.id)">#{{ item.id }} {{ item.name }}</option>
             </select>
-            <select v-model="row.mapIds" multiple>
-              <option v-for="item in options.maps" :key="item.id" :value="String(item.id)">{{ item.name }}</option>
-            </select>
-            <select v-model="row.timeOfDays" multiple>
-              <option v-for="item in timeOfDays" :key="item">{{ item }}</option>
-            </select>
-            <select v-model="row.weathers" multiple>
-              <option v-for="item in weathers" :key="item">{{ item }}</option>
-            </select>
+            <TagsSelect :id="`appearance-maps-${index}`" v-model="row.mapIds" :options="options.maps" placeholder="搜索地图" />
+            <TagsSelect :id="`appearance-times-${index}`" v-model="row.timeOfDays" :options="timeOfDayOptions" placeholder="搜索时间" />
+            <TagsSelect :id="`appearance-weathers-${index}`" v-model="row.weathers" :options="weatherOptions" placeholder="搜索天气" />
             <input v-model.number="row.rarity" type="number" min="1" max="3" />
             <button type="button" @click="habitatForm.pokemonAppearances.splice(index, 1)">删除</button>
           </div>

frontend/src/views/ItemsList.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
 import EntityChips from '../components/EntityChips.vue';
+import TagsSelect from '../components/TagsSelect.vue';
 import { api, type Item, type Options, type Recipe } from '../services/api';
 
 const tab = ref<'items' | 'recipes'>('items');
@@ -76,9 +77,7 @@ watch([tab, itemQuery], loadItems);
 
       <div class="field">
         <label for="tags">标签</label>
-        <select id="tags" v-model="tagIds" multiple>
-          <option v-for="item in options.itemTags" :key="item.id" :value="String(item.id)">{{ item.name }}</option>
-        </select>
+        <TagsSelect id="tags" v-model="tagIds" :options="options.itemTags" placeholder="搜索标签" />
       </div>
     </div>
 

frontend/src/views/PokemonList.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
 import EntityChips from '../components/EntityChips.vue';
+import TagsSelect from '../components/TagsSelect.vue';
 import { api, type Options, type Pokemon } from '../services/api';
 
 const options = ref<Options | null>(null);
@@ -63,11 +64,7 @@ watch(query, loadPokemon);
 
       <div class="field">
         <label for="skills">特长</label>
-        <select id="skills" v-model="skillIds" multiple>
-          <option v-for="item in options.skills" :key="item.id" :value="String(item.id)">
-            {{ item.name }}{{ item.subcategory ? ` · ${item.subcategory}` : '' }}
-          </option>
-        </select>
+        <TagsSelect id="skills" v-model="skillIds" :options="options.skills" placeholder="搜索特长" />
         <div class="segmented" aria-label="特长匹配方式">
           <button :class="{ active: skillMode === 'any' }" type="button" @click="skillMode = 'any'">任意</button>
           <button :class="{ active: skillMode === 'all' }" type="button" @click="skillMode = 'all'">全部</button>
@@ -76,11 +73,7 @@ watch(query, loadPokemon);
 
       <div class="field">
         <label for="favorite-things">喜欢的东西</label>
-        <select id="favorite-things" v-model="favoriteThingIds" multiple>
-          <option v-for="item in options.favoriteThings" :key="item.id" :value="String(item.id)">
-            {{ item.name }}
-          </option>
-        </select>
+        <TagsSelect id="favorite-things" v-model="favoriteThingIds" :options="options.favoriteThings" placeholder="搜索喜欢的东西" />
         <div class="segmented" aria-label="喜欢的东西匹配方式">
           <button :class="{ active: favoriteThingMode === 'any' }" type="button" @click="favoriteThingMode = 'any'">
             任意