xiaomai
98e258d45f
Replace native multiple selects across admin and list views Improve UX with searchable dropdowns and tag-based selections
101 lines
3.3 KiB
Vue
101 lines
3.3 KiB
Vue
<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');
|
||
const options = ref<Options | null>(null);
|
||
const items = ref<Item[]>([]);
|
||
const recipes = ref<Recipe[]>([]);
|
||
const loading = ref(true);
|
||
const search = ref('');
|
||
const categoryId = ref('');
|
||
const usageId = ref('');
|
||
const tagIds = ref<string[]>([]);
|
||
|
||
const itemQuery = computed(() => ({
|
||
search: search.value,
|
||
categoryId: categoryId.value,
|
||
usageId: usageId.value,
|
||
tagIds: tagIds.value.join(',')
|
||
}));
|
||
|
||
async function loadItems() {
|
||
loading.value = true;
|
||
if (tab.value === 'items') {
|
||
items.value = await api.items(itemQuery.value);
|
||
} else {
|
||
recipes.value = await api.recipes();
|
||
}
|
||
loading.value = false;
|
||
}
|
||
|
||
onMounted(async () => {
|
||
options.value = await api.options();
|
||
await loadItems();
|
||
});
|
||
|
||
watch([tab, itemQuery], loadItems);
|
||
</script>
|
||
|
||
<template>
|
||
<section>
|
||
<div class="page-header">
|
||
<div>
|
||
<h1 class="page-title">物品 / 材料单</h1>
|
||
<p class="page-subtitle">按分类、用途、标签查看物品，并浏览材料单。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tabs" role="tablist" aria-label="物品和材料单">
|
||
<button :class="{ active: tab === 'items' }" type="button" @click="tab = 'items'">物品</button>
|
||
<button :class="{ active: tab === 'recipes' }" type="button" @click="tab = 'recipes'">材料单</button>
|
||
</div>
|
||
|
||
<div v-if="tab === 'items' && options" class="toolbar">
|
||
<div class="field">
|
||
<label for="item-search">搜索</label>
|
||
<input id="item-search" v-model="search" type="search" placeholder="名称" />
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="category">分类</label>
|
||
<select id="category" v-model="categoryId">
|
||
<option value="">全部</option>
|
||
<option v-for="item in options.itemCategories" :key="item.id" :value="item.id">{{ item.name }}</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="usage">用途</label>
|
||
<select id="usage" v-model="usageId">
|
||
<option value="">全部</option>
|
||
<option v-for="item in options.itemUsages" :key="item.id" :value="item.id">{{ item.name }}</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="tags">标签</label>
|
||
<TagsSelect id="tags" v-model="tagIds" :options="options.itemTags" placeholder="搜索标签" />
|
||
</div>
|
||
</div>
|
||
|
||
<p v-if="loading" class="status">加载中</p>
|
||
<div v-else-if="tab === 'items'" class="grid">
|
||
<RouterLink v-for="item in items" :key="item.id" class="entity-card" :to="`/items/${item.id}`">
|
||
<h2>{{ item.name }}</h2>
|
||
<p class="meta-line">{{ item.usage ? `${item.category.name} · ${item.usage.name}` : item.category.name }}</p>
|
||
<EntityChips :items="item.tags" />
|
||
</RouterLink>
|
||
</div>
|
||
|
||
<div v-else class="grid">
|
||
<RouterLink v-for="item in recipes" :key="item.id" class="entity-card" :to="`/recipes/${item.id}`">
|
||
<h2>{{ item.name }}</h2>
|
||
<EntityChips :items="item.materials" />
|
||
</RouterLink>
|
||
</div>
|
||
</section>
|
||
</template>
|