update cascase filter

frontend/src/components/CascadeFilter.vue

@@ -9,19 +9,26 @@ export interface CascadeValue {
 
 const model = defineModel<CascadeValue>({ default: () => ({ company_id: undefined, platform_id: undefined, store_id: undefined }) })
 
-const companies = ref<{ id: number; name: string; label: string }[]>([])
-const platforms = ref<{ id: number; developer_id: number }[]>([])
-const stores = ref<{ id: number; company_id: number; platform_id: number; name: string; label: string }[]>([])
+const companies = ref<{ id: number; name: string; label: string | null }[]>([])
+const platforms = ref<{ id: number; name: string; label: string | null; developer_id?: number }[]>([])
+const stores = ref<{ id: number; company_id: number; platform_id: number; name: string; label: string | null }[]>([])
+
+/** 清洗 label：过滤 "null" 字符串，优先 label 其次 name */
+function cleanLabel(label: string | null | undefined, name: string | undefined, fallback: string): string {
+  if (label && label !== 'null') return label
+  if (name) return name
+  return fallback
+}
 
 const loadingCompanies = ref(false)
 const loadingStores = ref(false)
 
 const companyOptions = computed(() =>
-  companies.value.map((c) => ({ value: c.id, label: c.label || c.name })),
+  companies.value.map((c) => ({ value: c.id, label: cleanLabel(c.label, c.name, `公司 #${c.id}`) })),
 )
 
 const platformOptions = computed(() =>
-  platforms.value.map((p) => ({ value: p.id, label: `平台 #${p.id}` })),
+  platforms.value.map((p) => ({ value: p.id, label: cleanLabel(p.label, p.name, `平台 #${p.id}`) })),
 )
 
 const storeOptions = computed(() => {
@@ -32,7 +39,7 @@ const storeOptions = computed(() => {
   if (model.value.platform_id) {
     filtered = filtered.filter((s) => s.platform_id === model.value.platform_id)
   }
-  return filtered.map((s) => ({ value: s.id, label: s.label || s.name }))
+  return filtered.map((s) => ({ value: s.id, label: cleanLabel(s.label, s.name, `店铺 #${s.id}`) }))
 })
 
 function handleCompanyChange(val: unknown) {
@@ -85,44 +92,53 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex gap-2 items-center">
-    <a-select
-      :value="model.company_id"
-      :options="companyOptions"
-      placeholder="选择公司"
-      allow-clear
-      show-search
-      :filter-option="(input: string, option: unknown) =>
-        ((option as { label: string }).label ?? '').toLowerCase().includes(input.toLowerCase())
-      "
-      :loading="loadingCompanies"
-      style="min-width: 160px"
-      @change="handleCompanyChange"
-    />
-    <a-select
-      :value="model.platform_id"
-      :options="platformOptions"
-      placeholder="选择平台"
-      allow-clear
-      show-search
-      :filter-option="(input: string, option: unknown) =>
-        ((option as { label: string }).label ?? '').toLowerCase().includes(input.toLowerCase())
-      "
-      style="min-width: 160px"
-      @change="handlePlatformChange"
-    />
-    <a-select
-      :value="model.store_id"
-      :options="storeOptions"
-      placeholder="选择店铺"
-      allow-clear
-      show-search
-      :filter-option="(input: string, option: unknown) =>
-        ((option as { label: string }).label ?? '').toLowerCase().includes(input.toLowerCase())
-      "
-      :loading="loadingStores"
-      style="min-width: 160px"
-      @change="handleStoreChange"
-    />
+  <div class="flex gap-4 items-center">
+    <div class="flex items-center gap-1">
+      <span class="text-gray-600 text-sm whitespace-nowrap">公司</span>
+      <a-select
+        :value="model.company_id"
+        :options="companyOptions"
+        placeholder="选择公司"
+        allow-clear
+        show-search
+        :filter-option="(input: string, option: unknown) =>
+          ((option as { label: string }).label ?? '').toLowerCase().includes(input.toLowerCase())
+        "
+        :loading="loadingCompanies"
+        style="min-width: 160px"
+        @change="handleCompanyChange"
+      />
+    </div>
+    <div class="flex items-center gap-1">
+      <span class="text-gray-600 text-sm whitespace-nowrap">平台</span>
+      <a-select
+        :value="model.platform_id"
+        :options="platformOptions"
+        placeholder="选择平台"
+        allow-clear
+        show-search
+        :filter-option="(input: string, option: unknown) =>
+          ((option as { label: string }).label ?? '').toLowerCase().includes(input.toLowerCase())
+        "
+        style="min-width: 160px"
+        @change="handlePlatformChange"
+      />
+    </div>
+    <div class="flex items-center gap-1">
+      <span class="text-gray-600 text-sm whitespace-nowrap">店铺</span>
+      <a-select
+        :value="model.store_id"
+        :options="storeOptions"
+        placeholder="选择店铺"
+        allow-clear
+        show-search
+        :filter-option="(input: string, option: unknown) =>
+          ((option as { label: string }).label ?? '').toLowerCase().includes(input.toLowerCase())
+        "
+        :loading="loadingStores"
+        style="min-width: 160px"
+        @change="handleStoreChange"
+      />
+    </div>
   </div>
 </template>