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
This commit is contained in:
2026-04-30 07:07:17 +08:00
parent 7f36d6a916
commit 98e258d45f
6 changed files with 375 additions and 41 deletions

View File

@@ -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>