v4.0.9版本更新-门店分类支持多选

apps/admin-web/src/lib/storeCreate.ts

@@ -8,8 +8,11 @@ export type StoreCreateForm = {
   city?: string;
   district: string;
   districtCode?: string;
+  /** @deprecated 使用 categoryIds */
   categoryParentId?: string;
-  categoryId: string;
+  /** @deprecated 使用 categoryIds */
+  categoryId?: string;
+  categoryIds: string[];
   name: string;
   phone: string;
   address: string;
@@ -52,7 +55,7 @@ export function validateStoreCreateStep1(
     | 'partnerAccountId'
     | 'cityId'
     | 'regionCodes'
-    | 'categoryId'
+    | 'categoryIds'
     | 'name'
     | 'phone'
     | 'address'
@@ -69,7 +72,7 @@ export function validateStoreCreateStep1(
   if (!form.partnerAccountId) return '请选择开城合伙人';
   if (!form.regionCodes || form.regionCodes.length < 3) return '请选择省 / 市 / 区县';
   if (!form.cityId) return '所选地区未匹配到开城城市，请先在「开城 → 城市」配置对应区划';
-  if (!form.categoryId?.trim()) return '请选择门店分类（细类）';
+  if (!form.categoryIds?.length) return '请至少选择一个门店分类（细类）';
   if (!form.name?.trim()) return '请填写门店名称';
   if (!form.phone?.trim()) return '请填写门店手机号';
   if (!PHONE_RE.test(form.phone.trim())) return '门店手机号须为11位手机号';

apps/admin-web/src/pages/StoresPage.tsx

@@ -224,6 +224,7 @@ type StoreRow = {
   settlementRate?: number;
   sortOrder?: number;
   category?: { id: string; name: string; parentId?: string | null } | null;
+  categories?: { id: string; name: string; parentId?: string | null }[] | null;
 };
 
 type PartnerOption = { id: string; companyName?: string | null; name?: string | null; phone?: string | null };
@@ -350,29 +351,17 @@ export default function StoresPage() {
   const selectedPartnerId = Form.useWatch('partnerAccountId', createForm);
   const selectedRegionCodes = Form.useWatch('regionCodes', createForm);
   const selectedCityId = Form.useWatch('cityId', createForm);
-  const selectedCategoryParentId = Form.useWatch('categoryParentId', createForm);
-  const editCategoryParentId = Form.useWatch('categoryParentId', editForm);
-
-  const categoryParentOptions = useMemo(
-    () =>
-      categoryTree
-        .filter((n) => n.status !== 'INACTIVE')
-        .map((n) => ({ value: n.id, label: n.name })),
-    [categoryTree],
-  );
-  const categoryChildOptions = useMemo(() => {
-    const parent = categoryTree.find((n) => n.id === selectedCategoryParentId);
-    return (parent?.children ?? [])
-      .filter((n) => n.status !== 'INACTIVE')
-      .map((n) => ({ value: n.id, label: n.name }));
-  }, [categoryTree, selectedCategoryParentId]);
-
-  const editCategoryChildOptions = useMemo(() => {
-    const parent = categoryTree.find((n) => n.id === editCategoryParentId);
-    return (parent?.children ?? [])
-      .filter((n) => n.status !== 'INACTIVE')
-      .map((n) => ({ value: n.id, label: n.name }));
-  }, [categoryTree, editCategoryParentId]);
+  const categoryLeafOptions = useMemo(() => {
+    const options: { value: string; label: string }[] = [];
+    for (const parent of categoryTree) {
+      if (parent.status === 'INACTIVE') continue;
+      for (const child of parent.children ?? []) {
+        if (child.status === 'INACTIVE') continue;
+        options.push({ value: child.id, label: `${parent.name} / ${child.name}` });
+      }
+    }
+    return options;
+  }, [categoryTree]);
 
   async function deleteStore(id: string) {
     setDeleting(true);
@@ -414,20 +403,14 @@ export default function StoresPage() {
           bankBranch?: string | null;
         })
       : null;
-    const categoryId = category?.id != null ? String(category.id) : undefined;
-    let parentId = category?.parentId != null ? String(category.parentId) : undefined;
-    if (!parentId && categoryId) {
-      for (const parent of cats) {
-        if (parent.id === categoryId) {
-          parentId = parent.id;
-          break;
-        }
-        if ((parent.children ?? []).some((c) => c.id === categoryId)) {
-          parentId = parent.id;
-          break;
-        }
-      }
-    }
+    const categories = Array.isArray(d.categories)
+      ? (d.categories as { id?: string }[])
+      : [];
+    const categoryIds = categories.length
+      ? categories.map((c) => String(c.id)).filter(Boolean)
+      : category?.id != null
+        ? [String(category.id)]
+        : [];
     const loginPhone =
       (typeof d.loginPhone === 'string' && d.loginPhone) ||
       account?.phone ||
@@ -466,8 +449,7 @@ export default function StoresPage() {
       city: d.cityName,
       district: d.district,
       address: d.address,
-      categoryParentId: parentId,
-      categoryId,
+      categoryIds,
       latitude: d.latitude != null ? Number(d.latitude) : undefined,
       longitude: d.longitude != null ? Number(d.longitude) : undefined,
       settlementRate: d.settlementRate != null ? Number(d.settlementRate) * 100 : 60,
@@ -530,7 +512,7 @@ export default function StoresPage() {
           !/^null$/i.test(v.benefitUsageRule.trim())
             ? v.benefitUsageRule.trim()
             : null,
-        categoryId: v.categoryId,
+        categoryIds: v.categoryIds,
         province: v.province,
         city: v.city,
         district: v.district,
@@ -661,8 +643,7 @@ export default function StoresPage() {
           'partnerAccountId',
           'regionCodes',
           'cityId',
-          'categoryParentId',
-          'categoryId',
+          'categoryIds',
           'name',
           'phone',
           'address',
@@ -691,7 +672,7 @@ export default function StoresPage() {
         body: JSON.stringify({
           partnerAccountId: values.partnerAccountId,
           cityId: values.cityId,
-          categoryId: values.categoryId,
+          categoryIds: values.categoryIds,
           province: values.province,
           city: values.city,
           name: values.name.trim(),
@@ -769,8 +750,14 @@ export default function StoresPage() {
     {
       key: 'category',
       title: '分类',
-      width: 100,
-      render: (_, row) => row.category?.name || '—',
+      width: 140,
+      render: (_, row) => {
+        const cats = Array.isArray(row.categories)
+          ? row.categories.map((c: { name?: string }) => c.name).filter(Boolean)
+          : [];
+        if (cats.length) return cats.join('、');
+        return row.category?.name || '—';
+      },
     },
     { key: 'cityName', title: '城市', dataIndex: 'cityName', width: 80 },
     { key: 'phone', title: '登录号', dataIndex: 'phone', width: 120 },
@@ -1156,29 +1143,17 @@ export default function StoresPage() {
                         <Input placeholder="手机号或座机，如 0379-8888888" />
                       </Form.Item>
                       <Form.Item
-                        name="categoryParentId"
-                        label="门店分类（大类）"
-                        rules={[{ required: true, message: '请选择门店大类' }]}
+                        name="categoryIds"
+                        label="门店分类（细类，可多选）"
+                        rules={[{ required: true, message: '请至少选择一个门店细类' }]}
                       >
                         <Select
+                          mode="multiple"
                           showSearch
                           loading={optionsLoading}
                           optionFilterProp="label"
-                          options={categoryParentOptions}
-                          onChange={() => editForm.setFieldValue('categoryId', undefined)}
-                        />
-                      </Form.Item>
-                      <Form.Item
-                        name="categoryId"
-                        label="门店分类（细类）"
-                        rules={[{ required: true, message: '请选择门店细类' }]}
-                      >
-                        <Select
-                          showSearch
-                          optionFilterProp="label"
-                          placeholder={editCategoryParentId ? '选择细类' : '请先选大类'}
-                          disabled={!editCategoryParentId}
-                          options={editCategoryChildOptions}
+                          placeholder="选择细类，可多选"
+                          options={categoryLeafOptions}
                         />
                       </Form.Item>
                       <Form.Item name="coverUrl" label="封面图 / 门头照">
@@ -1457,23 +1432,9 @@ export default function StoresPage() {
               <Form.Item name="district" hidden><Input /></Form.Item>
               <Form.Item name="districtCode" hidden><Input /></Form.Item>
               <Form.Item
-                name="categoryParentId"
-                label="门店分类（大类）"
-                rules={[{ required: true, message: '请选择门店大类' }]}
-              >
-                <Select
-                  showSearch
-                  loading={optionsLoading}
-                  optionFilterProp="label"
-                  placeholder={optionsLoading ? '加载中…' : '选择大类'}
-                  options={categoryParentOptions}
-                  onChange={() => createForm.setFieldValue('categoryId', undefined)}
-                />
-              </Form.Item>
-              <Form.Item
-                name="categoryId"
-                label="门店分类（细类）"
-                rules={[{ required: true, message: '请选择门店细类' }]}
+                name="categoryIds"
+                label="门店分类（细类，可多选）"
+                rules={[{ required: true, message: '请至少选择一个门店细类' }]}
                 extra={
                   <Typography.Link onClick={() => navigate('/store-categories')}>
                     去配置门店分类
@@ -1481,11 +1442,12 @@ export default function StoresPage() {
                 }
               >
                 <Select
+                  mode="multiple"
                   showSearch
+                  loading={optionsLoading}
                   optionFilterProp="label"
-                  placeholder={selectedCategoryParentId ? '选择细类' : '请先选大类'}
-                  disabled={!selectedCategoryParentId}
-                  options={categoryChildOptions}
+                  placeholder={optionsLoading ? '加载中…' : '选择细类，可多选'}
+                  options={categoryLeafOptions}
                 />
               </Form.Item>
               <Form.Item name="name" label="门店名称" rules={[{ required: true, message: '请填写门店名称' }]}>

apps/h5-partner/src/lib/storeDraft.ts

@@ -25,7 +25,10 @@ export type StoreDraftForm = {
   /** 人均费用（选填） */
   avgPrice: string;
   categoryParentId: string;
+  /** @deprecated 使用 categoryIds */
   categoryId: string;
+  /** 二级分类多选 */
+  categoryIds: string[];
   intro: string;
   /** 好客权益券使用规则 */
   benefitUsageRule: string;
@@ -68,6 +71,7 @@ export const defaultStoreForm = (): StoreDraftForm => ({
   avgPrice: '',
   categoryParentId: '',
   categoryId: '',
+  categoryIds: [],
   intro: '',
   benefitUsageRule: '',
   coverUrl: '',
@@ -122,6 +126,20 @@ export function normalizeStoreDraftForm(raw: Partial<StoreDraftForm> | null | un
     openTime2: String(raw.openTime2 ?? base.openTime2),
     closeTime2: String(raw.closeTime2 ?? base.closeTime2),
     avgPrice: String(raw.avgPrice ?? base.avgPrice),
+    categoryIds: (() => {
+      if (Array.isArray(raw.categoryIds) && raw.categoryIds.length) {
+        return raw.categoryIds.map(String).filter(Boolean);
+      }
+      const legacy = String(raw.categoryId ?? '').trim();
+      return legacy ? [legacy] : base.categoryIds;
+    })(),
+    categoryId: (() => {
+      const ids = Array.isArray(raw.categoryIds) && raw.categoryIds.length
+        ? raw.categoryIds.map(String).filter(Boolean)
+        : [];
+      if (ids.length) return ids[0];
+      return String(raw.categoryId ?? base.categoryId);
+    })(),
     envPhotoUrls: normalizeStringArray(raw.envPhotoUrls, MIN_ENV_PHOTO_COUNT),
     // 兼容旧草稿：单个 contractUrl 迁移为数组
     contractUrls: (() => {
@@ -201,7 +219,7 @@ export function validateStoreStep1(
     | 'openTime2'
     | 'closeTime2'
     | 'avgPrice'
-    | 'categoryId'
+    | 'categoryIds'
     | 'intro'
     | 'benefitUsageRule'
   >,
@@ -233,7 +251,7 @@ export function validateStoreStep1(
     const n = Number(form.avgPrice);
     if (Number.isNaN(n) || n < 0) return '人均费用须为非负数字';
   }
-  if (!form.categoryId.trim()) return '请选择店铺类型';
+  if (!form.categoryIds?.length) return '请至少选择一个店铺类型';
   if (form.intro.trim()) {
     const len = form.intro.trim().length;
     if (len < 2 || len > 500) return '门店简介须为 2~500 字';

apps/h5-partner/src/pages/StoreCreatePage.tsx

@@ -206,9 +206,9 @@ export default function StoreCreatePage() {
       .then((list) => {
         const tree = Array.isArray(list) ? list : [];
         setCategoryTree(tree);
-        if (form.categoryId && !form.categoryParentId) {
+        if (form.categoryIds.length && !form.categoryParentId) {
           const parent = tree.find((root) =>
-            (root.children ?? []).some((child) => child.id === form.categoryId),
+            (root.children ?? []).some((child) => form.categoryIds.includes(child.id)),
           );
           if (parent) patchForm({ categoryParentId: parent.id });
         }
@@ -216,12 +216,6 @@ export default function StoreCreatePage() {
       .catch(() => setCategoryTree([]));
   }, []);
 
-  const categoryChildren = useMemo(() => {
-    const parent = categoryTree.find((item) => item.id === form.categoryParentId);
-    return Array.isArray(parent?.children) ? parent!.children! : [];
-  }, [categoryTree, form.categoryParentId]);
-
-
 
   useEffect(() => {
 
@@ -523,7 +517,8 @@ export default function StoreCreatePage() {
 
           ...(form.avgPrice.trim() ? { avgPrice: Number(form.avgPrice) } : {}),
 
-          categoryId: form.categoryId.trim(),
+          categoryIds: form.categoryIds,
+          categoryId: form.categoryIds[0] || form.categoryId.trim(),
 
           intro: form.intro.trim() || undefined,
           benefitUsageRule: form.benefitUsageRule.trim() || undefined,
@@ -690,56 +685,40 @@ export default function StoreCreatePage() {
 
             <div className="partner-field">
 
-              <label>店铺类型 <span className="text-primary">*</span></label>
-
-              <div className="partner-input-row" style={{ gap: 8 }}>
-
-                <select
-
-                  className="partner-field-input partner-field-input--block"
-
-                  value={form.categoryParentId}
-
-                  onChange={(e) => patchForm({ categoryParentId: e.target.value, categoryId: '' })}
-
-                  aria-label="一级店铺类型"
-
-                >
-
-                  <option value="">选择大类</option>
-
-                  {categoryTree.map((item) => (
-
-                    <option key={item.id} value={item.id}>{item.name}</option>
-
-                  ))}
-
-                </select>
-
-                <select
-
-                  className="partner-field-input partner-field-input--block"
-
-                  value={form.categoryId}
-
-                  onChange={(e) => patchForm({ categoryId: e.target.value })}
-
-                  disabled={!form.categoryParentId}
-
-                  aria-label="二级店铺类型"
-
-                >
-
-                  <option value="">{form.categoryParentId ? '选择细类' : '请先选大类'}</option>
-
-                  {categoryChildren.map((item) => (
-
-                    <option key={item.id} value={item.id}>{item.name}</option>
-
-                  ))}
-
-                </select>
+              <label>店铺类型 <span className="text-primary">*</span> <span className="label-md text-muted">（可多选）</span></label>
 
+              <div className="partner-category-multi">
+                {categoryTree.map((parent) => (
+                  <div key={parent.id} className="partner-category-group">
+                    <div className="partner-category-group-title">{parent.name}</div>
+                    <div className="partner-category-options">
+                      {(parent.children ?? []).map((child) => {
+                        const checked = form.categoryIds.includes(child.id);
+                        return (
+                          <label key={child.id} className="partner-category-option">
+                            <input
+                              type="checkbox"
+                              checked={checked}
+                              onChange={() => {
+                                const next = checked
+                                  ? form.categoryIds.filter((id) => id !== child.id)
+                                  : [...form.categoryIds, child.id];
+                                patchForm({
+                                  categoryIds: next,
+                                  categoryId: next[0] ?? '',
+                                  categoryParentId: next.length
+                                    ? parent.id
+                                    : form.categoryParentId,
+                                });
+                              }}
+                            />
+                            <span>{child.name}</span>
+                          </label>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ))}
               </div>
 
             </div>

apps/mini-user/src/lib/store-display.ts

@@ -22,6 +22,7 @@ export function storeCategoryTags(
     tags?: unknown;
     categoryId?: string | null;
     category?: StoreCategoryLike | null;
+    categories?: StoreCategoryLike[] | null;
   },
   tree: StoreCategoryTreeNode[] = [],
 ): string[] {
@@ -30,24 +31,125 @@ export function storeCategoryTags(
     : [];
   if (fromJson.length) return fromJson;
 
-  const names: string[] = [];
-  const childName = String(store.category?.name || '').trim();
-  const parentName = String(store.category?.parent?.name || '').trim();
-  if (parentName) names.push(parentName);
-  if (childName && childName !== parentName) names.push(childName);
+  const multi = Array.isArray(store.categories) ? store.categories : [];
+  if (multi.length) {
+    return groupCategoryTags(multi, tree);
+  }
 
-  const storeCatId = String(store.categoryId || store.category?.id || '');
-  const storeParentId = String(store.category?.parentId || '');
-  for (const root of tree) {
-    if (root.id === storeParentId || root.id === storeCatId) {
-      if (root.name && !names.includes(root.name)) names.unshift(root.name);
-    }
-    for (const child of root.children ?? []) {
-      if (child.id === storeCatId) {
-        if (root.name && !names.includes(root.name)) names.unshift(root.name);
-        if (child.name && !names.includes(child.name)) names.push(child.name);
+  if (store.category || store.categoryId) {
+    const grouped = groupCategoryTags(
+      store.category ? [store.category] : [],
+      tree,
+      store.categoryId,
+    );
+    if (grouped.length) return grouped;
+  }
+
+  const storeCatId = String(store.categoryId || '');
+  if (storeCatId) {
+    for (const root of tree) {
+      for (const child of root.children ?? []) {
+        if (child.id === storeCatId) {
+          return [`${root.name}|${child.name}`];
+        }
       }
     }
   }
-  return names;
+  return [];
+}
+
+/** 按大类分组：餐饮|火锅·江浙菜、娱乐|KTV */
+function groupCategoryTags(
+  categories: StoreCategoryLike[],
+  tree: StoreCategoryTreeNode[] = [],
+  fallbackCategoryId?: string | null,
+): string[] {
+  if (!categories.length && fallbackCategoryId) {
+    return groupCategoryTags([{ id: String(fallbackCategoryId) }], tree);
+  }
+
+  const groups = new Map<string, { parentName: string; children: string[] }>();
+  const order: string[] = [];
+
+  for (const cat of categories) {
+    const resolved = resolveCategoryParts(cat, tree);
+    if (!resolved) continue;
+    const { parentKey, parentName, childName } = resolved;
+    if (!groups.has(parentKey)) {
+      groups.set(parentKey, { parentName, children: [] });
+      order.push(parentKey);
+    }
+    const group = groups.get(parentKey)!;
+    if (childName && childName !== parentName && !group.children.includes(childName)) {
+      group.children.push(childName);
+    }
+  }
+
+  return order
+    .map((key) => {
+      const group = groups.get(key)!;
+      if (group.parentName && group.children.length) {
+        return `${group.parentName}|${group.children.join('·')}`;
+      }
+      if (group.children.length) return group.children.join('·');
+      return group.parentName;
+    })
+    .filter(Boolean);
+}
+
+function resolveCategoryParts(
+  cat: StoreCategoryLike,
+  tree: StoreCategoryTreeNode[] = [],
+): { parentKey: string; parentName: string; childName: string } | null {
+  const childName = String(cat.name || '').trim();
+  let parentName = String(cat.parent?.name || '').trim();
+  const catId = String(cat.id || '');
+  const parentId = String(cat.parentId || '');
+
+  if (!parentName && (parentId || catId)) {
+    for (const root of tree) {
+      if (parentId && root.id === parentId) {
+        parentName = root.name;
+        break;
+      }
+      for (const child of root.children ?? []) {
+        if (catId && child.id === catId) {
+          parentName = root.name;
+          if (!childName) return { parentKey: root.id, parentName, childName: child.name };
+          break;
+        }
+      }
+    }
+  }
+
+  if (!childName && !parentName) return null;
+
+  const parentKey = parentId || parentName || catId;
+  if (!parentName && catId) {
+    for (const root of tree) {
+      for (const child of root.children ?? []) {
+        if (child.id === catId) {
+          return { parentKey: root.id, parentName: root.name, childName: child.name };
+        }
+      }
+    }
+  }
+
+  return {
+    parentKey,
+    parentName: parentName || childName,
+    childName: childName || parentName,
+  };
+}
+
+export function storeLeafCategoryIds(store: {
+  categoryId?: string | null;
+  category?: StoreCategoryLike | null;
+  categories?: StoreCategoryLike[] | null;
+}): string[] {
+  if (Array.isArray(store.categories) && store.categories.length) {
+    return store.categories.map((c) => String(c.id || '')).filter(Boolean);
+  }
+  const id = String(store.categoryId || store.category?.id || '');
+  return id ? [id] : [];
 }

apps/mini-user/src/lib/stores-session.ts

@@ -40,7 +40,7 @@ type StoresSession = {
   cache: StoresListCache | null;
 };
 
-const STORAGE_KEY = 'dukang_stores_session_v2';
+const STORAGE_KEY = 'dukang_stores_session_v3';
 
 let memory: StoresSession | null = null;
 

apps/mini-user/src/pages/store-detail/index.tsx

@@ -79,6 +79,12 @@ type Store = {
     parentId?: string | null;
     parent?: { name?: string } | null;
   } | null;
+  categories?: {
+    id?: string;
+    name?: string;
+    parentId?: string | null;
+    parent?: { name?: string } | null;
+  }[] | null;
 };
 
 type RecentRedeem = {
@@ -406,12 +412,15 @@ export default function StoreDetailPage() {
 
         <View className="store-detail-title-row">
           <Text className="store-detail-name">{store.name}</Text>
-          {storeCategoryTags(store, categoryTree).map((tag) => (
-            <Text key={tag} className="store-detail-tag">
-              {tag}
-            </Text>
-          ))}
         </View>
+        {(() => {
+          const categoryLabels = storeCategoryTags(store, categoryTree);
+          return categoryLabels.length ? (
+            <View className="store-detail-tags-row">
+              <Text className="store-detail-category-line">{categoryLabels.join('、')}</Text>
+            </View>
+          ) : null;
+        })()}
         <View className="store-detail-rating-row">
           <View className="store-detail-stars">
             {[1, 2, 3, 4, 5].map((n) => (

apps/mini-user/src/pages/stores/index.tsx

@@ -42,7 +42,7 @@ import {
   toWeappShareTimeline,
 } from '../../lib/wechat-share';
 import BenefitSloganBar from '../../components/BenefitSloganBar';
-import { storeCategoryTags, storeStarCount } from '../../lib/store-display';
+import { storeCategoryTags, storeLeafCategoryIds, storeStarCount } from '../../lib/store-display';
 import openBadgeImg from '../../assets/icons/store-open-badge.png';
 
 type Store = {
@@ -66,6 +66,12 @@ type Store = {
     parentId?: string | null;
     parent?: { name?: string } | null;
   } | null;
+  categories?: {
+    id?: string;
+    name?: string;
+    parentId?: string | null;
+    parent?: { name?: string } | null;
+  }[] | null;
   tags?: unknown;
   rating?: number | string | null;
   latitude?: number | string | null;
@@ -288,14 +294,21 @@ export default function StoresPage() {
 
   function matchesCategory(store: Store): boolean {
     if (!category.parentId) return true;
-    const storeCatId = String(store.categoryId || store.category?.id || '');
-    const storeParentId = String(store.category?.parentId || '');
-    if (category.childId) {
-      return storeCatId === category.childId;
+    const leafIds = storeLeafCategoryIds(store);
+    const parentIds = new Set<string>();
+    if (Array.isArray(store.categories)) {
+      for (const cat of store.categories) {
+        if (cat.parentId) parentIds.add(String(cat.parentId));
+      }
     }
-    if (storeParentId && storeParentId === category.parentId) return true;
+    const legacyParent = String(store.category?.parentId || '');
+    if (legacyParent) parentIds.add(legacyParent);
+    if (category.childId) {
+      return leafIds.includes(category.childId);
+    }
+    if ([...parentIds].some((id) => id === category.parentId)) return true;
     const siblings = childIdsByParent.get(category.parentId) ?? [];
-    return siblings.includes(storeCatId);
+    return leafIds.some((id) => siblings.includes(id));
   }
 
   const filtered = useMemo(() => {
@@ -461,14 +474,10 @@ export default function StoresPage() {
                   <Text className="store-card-name">{s.name}</Text>
                 </View>
                 {(() => {
-                  const tags = storeCategoryTags(s, categoryTree);
-                  return tags.length ? (
-                    <View className="store-card-tags">
-                      {tags.map((tag) => (
-                        <Text key={tag} className="store-card-tag">
-                          {tag}
-                        </Text>
-                      ))}
+                  const categoryLabels = storeCategoryTags(s, categoryTree);
+                  return categoryLabels.length ? (
+                    <View className="store-card-category-wrap">
+                      <Text className="store-card-category-text">{categoryLabels.join('、')}</Text>
                     </View>
                   ) : null;
                 })()}

apps/mini-user/src/styles/store-detail.css

@@ -100,6 +100,12 @@
 }
 
 .store-detail-title-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.store-detail-tags-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -107,6 +113,20 @@
   margin-bottom: 8px;
 }
 
+.store-detail-category-line {
+  display: inline-block;
+  max-width: 100%;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: rgba(166, 29, 36, 0.1);
+  box-sizing: border-box;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--color-heritage-red);
+  word-break: break-all;
+}
+
 .store-detail-name {
   font-family: var(--font-headline);
   font-size: 20px;

apps/mini-user/src/styles/stores.css

@@ -215,13 +215,32 @@
   white-space: nowrap;
 }
 
+.store-card-category-wrap {
+  align-self: flex-start;
+  max-width: 100%;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: rgba(166, 29, 36, 0.1);
+  box-sizing: border-box;
+  line-height: 1;
+}
+
+.store-card-category-text {
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 14px;
+  color: var(--color-heritage-red);
+  word-break: break-all;
+}
+
 .store-card-tags {
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   align-items: center;
   gap: 4px;
   min-width: 0;
-  overflow: hidden;
+  margin-top: 2px;
+  margin-bottom: 2px;
 }
 
 .store-card-tag {