产品标签关联

杨鑫
1 parent 6faaf539
Showing 30 changed files with 1746 additions and 1463 deletions
标签模块接口对接说明(1).md
美国版/Food Labeling Management App UniApp/src/components/LocationPicker.vue
美国版/Food Labeling Management App UniApp/src/pages/index/index.vue
美国版/Food Labeling Management App UniApp/src/pages/store-select/store-select.vue
美国版/Food Labeling Management App UniApp/src/services/usAppAuth.ts
美国版/Food Labeling Management App UniApp/src/types/usAppBound.ts
美国版/Food Labeling Management App UniApp/src/utils/authSession.ts
美国版/Food Labeling Management App UniApp/src/utils/stores.ts
美国版/Food Labeling Management App UniApp/src/utils/usAppApiRequest.ts
美国版/Food Labeling Management Platform/build/assets/index-1_5dt1NK.js
美国版/Food Labeling Management Platform/build/assets/index-C_mEdGxy.js
美国版/Food Labeling Management Platform/build/index.html
美国版/Food Labeling Management Platform/src/components/labels/LabelCategoriesView.tsx
美国版/Food Labeling Management Platform/src/components/labels/LabelTemplateEditor/LabelCanvas.tsx
美国版/Food Labeling Management Platform/src/components/labels/LabelTemplateEditor/PropertiesPanel.tsx
美国版/Food Labeling Management Platform/src/components/labels/LabelTemplatesView.tsx
美国版/Food Labeling Management Platform/src/components/labels/LabelTypesView.tsx
美国版/Food Labeling Management Platform/src/components/labels/LabelsList.tsx
美国版/Food Labeling Management Platform/src/components/labels/MultipleOptionsView.tsx
美国版/Food Labeling Management Platform/src/components/locations/LocationsView.tsx
-## 概述
-
-美国版后端采用 ABP 动态接口（ConventionalControllers），宿主统一前缀为 `api/app`。
-Swagger 地址：
-
-- `http://localhost:19001/swagger`
-
-说明：
-- 接口最终 URL 以 Swagger 展示为准（可在 Swagger 里搜索 `LabelCategory / LabelType / LabelMultipleOption / LabelTemplate / Label`）。
-- 本模块后端接口以各 AppService 的方法签名自动暴露。
-- 返回分页统一包含 `PageIndex / PageSize / TotalCount / TotalPages / Items`。
-
----
-
-## Swagger 中如何找到
-
-1. 启动后端宿主（`Yi.Abp.Web`），端口 `19001`。
-2. 打开 `http://localhost:19001/swagger`。
-3. 在接口分组里搜索以下关键词之一：
-   - `label-category`
-   - `label-type`
-   - `label-multiple-option`
-   - `label-template`
-   - `label`
-
----
-
-## 接口 1：Label Categories（标签分类）
-
-### 1.1 分页列表
-
-方法：`GET /api/app/label-category`
-
-入参（`LabelCategoryGetListInputVo`，查询参数）：
-
-- `skipCount`（int）
-- `maxResultCount`（int）
-- `sorting`（string，可选）
-- `keyword`（string，可选）
-- `state`（boolean，可选）
-
-示例（查询参数）：
-
-```json
-{
-  "skipCount": 0,
-  "maxResultCount": 10,
-  "keyword": "Prep",
-  "state": true
-}
-```
-
-### 1.2 详情
-
-方法：`GET /api/app/label-category/{id}`
-
-入参：
-
-- `id`：分类 Id（字符串）
-
-### 1.3 新增
-
-方法：`POST /api/app/label-category`
-
-入参（Body：`LabelCategoryCreateInputVo`）：
-
-```json
-{
-  "categoryCode": "CAT_PREP",
-  "categoryName": "Prep",
-  "categoryPhotoUrl": "https://cdn.example.com/cat-prep.png",
-  "state": true,
-  "orderNum": 1
-}
-```
-
-### 1.4 编辑
-
-方法：`PUT /api/app/label-category/{id}`
-
-入参（Body：`LabelCategoryUpdateInputVo`，字段同创建）：
-
-```json
-{
-  "categoryCode": "CAT_PREP",
-  "categoryName": "Prep",
-  "categoryPhotoUrl": null,
-  "state": true,
-  "orderNum": 2
-}
-```
-
-### 1.5 删除（逻辑删除）
-
-方法：`DELETE /api/app/label-category/{id}`
-
-入参：
-
-- `id`：分类 Id（字符串）
-
-删除校验：
-- 若该分类已被 `fl_label` 引用，则抛出友好错误，禁止删除。
-
----
-
-## 接口 2：Label Types（标签类型）
-
-### 2.1 分页列表
-
-方法：`GET /api/app/label-type`
-
-入参（`LabelTypeGetListInputVo`，查询参数）：
-
-```json
-{
-  "skipCount": 0,
-  "maxResultCount": 10,
-  "keyword": "Defrost",
-  "state": true
-}
-```
-
-### 2.2 详情
-
-方法：`GET /api/app/label-type/{id}`
-
-入参：
-
-- `id`：类型 Id（字符串）
-
-### 2.3 新增
-
-方法：`POST /api/app/label-type`
-
-入参（Body：`LabelTypeCreateInputVo`）：
-
-```json
-{
-  "typeCode": "TYPE_DEFROST",
-  "typeName": "Defrost",
-  "state": true,
-  "orderNum": 1
-}
-```
-
-### 2.4 编辑
-
-方法：`PUT /api/app/label-type/{id}`
-
-入参（Body：`LabelTypeUpdateInputVo`，字段同创建）：
-
-```json
-{
-  "typeCode": "TYPE_DEFROST",
-  "typeName": "Defrost",
-  "state": true,
-  "orderNum": 2
-}
-```
-
-### 2.5 删除（逻辑删除）
-
-方法：`DELETE /api/app/label-type/{id}`
-
-删除校验：
-- 若该类型已被 `fl_label` 引用，则禁止删除。
-
----
-
-## 接口 3：Multiple Options（多选项字典）
-
-### 3.1 分页列表
-
-方法：`GET /api/app/label-multiple-option`
-
-入参（`LabelMultipleOptionGetListInputVo`，查询参数）：
-
-```json
-{
-  "skipCount": 0,
-  "maxResultCount": 10,
-  "keyword": "Allergens",
-  "state": true
-}
-```
-
-### 3.2 详情
-
-方法：`GET /api/app/label-multiple-option/{id}`
-
-入参：
-
-- `id`：多选项 Id（字符串）
-
-### 3.3 新增
-
-方法：`POST /api/app/label-multiple-option`
-
-入参（Body：`LabelMultipleOptionCreateInputVo`）：
-
-说明：`optionValuesJson` 为 **JSON 字符串**，值为 string 数组的序列化结果（与库表/后端 DTO 一致），例如 `["Peanuts","Dairy"]` 对应字符串 `"[\"Peanuts\",\"Dairy\"]"`。
-
-```json
-{
-  "optionCode": "OPT_ALLERGENS",
-  "optionName": "Allergens",
-  "optionValuesJson": "[\"Peanuts\",\"Dairy\",\"Gluten\",\"Soy\"]",
-  "state": true,
-  "orderNum": 1
-}
-```
-
-### 3.4 编辑
-
-方法：`PUT /api/app/label-multiple-option/{id}`
-
-入参（Body：`LabelMultipleOptionUpdateInputVo`，字段同创建）：
-
-```json
-{
-  "optionCode": "OPT_ALLERGENS",
-  "optionName": "Allergens",
-  "optionValuesJson": "[\"Peanuts\",\"Dairy\"]",
-  "state": true,
-  "orderNum": 2
-}
-```
-
-### 3.5 删除（逻辑删除）
-
-方法：`DELETE /api/app/label-multiple-option/{id}`
-
----
-
-## 接口 4：Label Templates（标签模板）
-
-说明：
-- 模板标识入参 `id` 使用 `fl_label_template.TemplateCode`。
-- 创建/编辑的 Body 字段名对齐你前端 editor JSON（`id/name/appliedLocation/elements/config`）。
-
-### 4.1 分页列表
-
-方法：`GET /api/app/label-template`
-
-入参（`LabelTemplateGetListInputVo`，查询参数）：
-
-```json
-{
-  "skipCount": 0,
-  "maxResultCount": 10,
-  "keyword": "测试模板",
-  "locationId": "11111111-1111-1111-1111-111111111111",
-  "labelType": "PRICE",
-  "state": true
-}
-```
-
-### 4.2 详情
-
-方法：`GET /api/app/label-template/{id}`
-
-入参：
-
-- `id`：模板编码 `TemplateCode`（字符串）
-
-### 4.3 新增模板
-
-方法：`POST /api/app/label-template`
-
-入参（Body：`LabelTemplateCreateInputVo`）：
-
-```json
-{
-  "id": "TPL_TEST_001",
-  "name": "测试模板-价格签(4x6)",
-  "labelType": "PRICE",
-  "unit": "inch",
-  "width": 4,
-  "height": 6,
-  "appliedLocation": "ALL",
-  "showRuler": true,
-  "showGrid": true,
-  "state": true,
-  "elements": [
-    {
-      "id": "el-fixed-title",
-      "type": "TEXT_STATIC",
-      "x": 32,
-      "y": 24,
-      "width": 160,
-      "height": 24,
-      "rotation": "horizontal",
-      "border": "none",
-      "zIndex": 1,
-      "orderNum": 1,
-      "valueSourceType": "FIXED",
-      "isRequiredInput": false,
-      "config": {
-        "text": "商品名",
-        "fontFamily": "Arial",
-        "fontSize": 14,
-        "fontWeight": "bold",
-        "textAlign": "left"
-      }
-    }
-  ],
-  "appliedLocationIds": []
-}
-```
-
-说明：
-- 当 `appliedLocation=SPECIFIED` 时，`appliedLocationIds` 必须至少选择一个门店。
-
-### 4.4 编辑模板
-
-方法：`PUT /api/app/label-template/{id}`
-
-入参：
-- Path：`id` 是当前模板编码（TemplateCode）
-- Body：字段同新增（`id/name/elements/...`）
-
-示例（编辑：同样字段，appliedLocation 切到 SPECIFIED）：
-
-```json
-{
-  "id": "TPL_TEST_001",
-  "name": "测试模板-价格签(4x6) v2",
-  "labelType": "PRICE",
-  "unit": "inch",
-  "width": 4,
-  "height": 6,
-  "appliedLocation": "SPECIFIED",
-  "showRuler": true,
-  "showGrid": true,
-  "state": true,
-  "elements": [],
-  "appliedLocationIds": ["11111111-1111-1111-1111-111111111111"]
-}
-```
-
-版本：
-- `VersionNo` 会在编辑时自动 `+1`。
-- `elements` 会按传入内容全量重建。
-
-### 4.5 删除（逻辑删除）
-
-方法：`DELETE /api/app/label-template/{id}`
-
-入参：
-- `id`：模板编码 `TemplateCode`
-
-删除校验：
-- 若该模板已被 `fl_label` 引用，则禁止删除。
-
----
-
-## 接口 5：Labels（按产品展示多个标签）
-
-说明：
-- 列表接口按 `ProductId` 查询，一个产品会对应多条标签记录。
-- 标签详情/编辑/删除的 `id` 使用 `fl_label.LabelCode`。
-
-### 5.1 分页列表（按产品）
-
-方法：`GET /api/app/label`
-
-入参（`LabelGetListInputVo`，查询参数）：
-
-```json
-{
-  "skipCount": 0,
-  "maxResultCount": 10,
-  "sorting": "",
-  "keyword": "早餐",
-  "locationId": "11111111-1111-1111-1111-111111111111",
-  "productId": "22222222-2222-2222-2222-222222222222",
-  "labelCategoryId": "33333333-3333-3333-3333-333333333333",
-  "labelTypeId": "44444444-4444-4444-4444-444444444444",
-  "templateCode": "TPL_TEST_001",
-  "state": true
-}
-```
-
-### 5.2 详情
-
-方法：`GET /api/app/label/{id}`
-
-入参：
-- `id`：标签编码 `LabelCode`
-
-返回：
-- `productIds`：该标签绑定的产品Id 列表
-
-### 5.3 新增标签
-
-方法：`POST /api/app/label`
-
-入参（Body：`LabelCreateInputVo`）：
-
-```json
-{
-  "labelCode": "LBL_TEST_001",
-  "labelName": "早餐标签",
-  "templateCode": "TPL_TEST_001",
-  "locationId": "11111111-1111-1111-1111-111111111111",
-  "labelCategoryId": "33333333-3333-3333-3333-333333333333",
-  "labelTypeId": "44444444-4444-4444-4444-444444444444",
-  "productIds": ["22222222-2222-2222-2222-222222222222"],
-  "labelInfoJson": { "note": "测试标签1" },
-  "state": true
-}
-```
-
-校验：
-- `productIds` 至少 1 个
-- `templateCode/locationId/labelCategoryId/labelTypeId` 不能为空
-
-### 5.4 编辑标签
-
-方法：`PUT /api/app/label/{id}`
-
-入参：
-- Path：`id` 为当前标签编码 `LabelCode`
-- Body：字段同创建（`LabelUpdateInputVo`）
-
-```json
-{
-  "labelName": "早餐标签 v2",
-  "templateCode": "TPL_TEST_001",
-  "locationId": "11111111-1111-1111-1111-111111111111",
-  "labelCategoryId": "33333333-3333-3333-3333-333333333333",
-  "labelTypeId": "44444444-4444-4444-4444-444444444444",
-  "productIds": ["22222222-2222-2222-2222-222222222222"],
-  "labelInfoJson": { "note": "测试标签1 v2" },
-  "state": true
-}
-```
-
-关联维护：
-- `fl_label_product` 会按新 `productIds` 重建。
-
-### 5.5 删除标签（逻辑删除）
-
-方法：`DELETE /api/app/label/{id}`
-
-入参：
-- `id`：标签编码 `LabelCode`
-
-删除行为：
-- 逻辑删除 `fl_label`
-- 删除该标签对应的 `fl_label_product` 关联
-
----
-## 接口 6：Products（产品）
-
-说明：
-- 产品表：`fl_product`
-- 删除为逻辑删除：`IsDeleted = true`
-
-### 6.1 分页列表
-
-方法：`GET /api/app/product`
-
-入参（`ProductGetListInputVo`，查询参数）：
-```json
-{
-  "skipCount": 0,
-  "maxResultCount": 10,
-  "sorting": "",
-  "keyword": "Chicken",
-  "state": true
-}
-```
-
-### 6.2 详情
-
-方法：`GET /api/app/product/{id}`
-
-入参：
-- `id`：产品Id（`fl_product.Id`）
-
-### 6.3 新增产品
-
-方法：`POST /api/app/product`
-
-入参（Body：`ProductCreateInputVo`）：
-```json
-{
-  "productCode": "PRD_TEST_001",
-  "productName": "Chicken",
-  "categoryName": "Meat",
-  "productImageUrl": "https://example.com/img.png",
-  "state": true
-}
-```
-
-校验：
-- `productCode/productName` 不能为空
-- `productCode` 不能与未删除的数据重复
-
-### 6.4 编辑产品
-
-方法：`PUT /api/app/product/{id}`
-
-入参：
-- Path：`id` 为当前产品Id（`fl_product.Id`）
-- Body：字段同新增（`ProductUpdateInputVo`）
-
-### 6.5 删除（逻辑删除）
-
-方法：`DELETE /api/app/product/{id}`
-
-入参：
-- `id`：产品Id
-
----
-## 接口 7：Product-Location（门店-产品关联）
-
-说明：
-- 关联表：`fl_location_product`
-- 关联按门店进行批量替换：
-  - `Create`：在门店下新增未存在的 product 关联
-  - `Update`：替换该门店下全部关联（先删后建）
-  - `Delete`：删除该门店下全部关联
-
-### 7.1 分页列表
-
-方法：`GET /api/app/product-location`
-
-入参（`ProductLocationGetListInputVo`，查询参数）：
-```json
-{
-  "skipCount": 0,
-  "maxResultCount": 10,
-  "sorting": "",
-  "locationId": "11111111-1111-1111-1111-111111111111",
-  "productId": "22222222-2222-2222-2222-222222222222"
-}
-```
-
-### 7.2 获取门店下全部产品
-
-方法：`GET /api/app/product-location/{id}`
-
-入参：
-- `id`：门店Id（`location.Id`，string 表示）
-
-返回：
-- 门店Id + 该门店关联的产品列表
-
-### 7.3 新增/建立门店关联
-
-方法：`POST /api/app/product-location`
-
-入参（Body：`ProductLocationCreateInputVo`）：
-```json
-{
-  "locationId": "11111111-1111-1111-1111-111111111111",
-  "productIds": ["22222222-2222-2222-2222-222222222222"]
-}
-```
-
-校验：
-- `locationId` 对应门店必须存在
-- `productIds` 必须都存在于 `fl_product` 且未删除
-
-### 7.4 编辑/替换门店关联
-
-方法：`PUT /api/app/product-location/{id}`
-
-入参：
-- Path：`id` 为门店Id
-- Body：`ProductLocationUpdateInputVo`
-```json
-{
-  "productIds": ["22222222-2222-2222-2222-222222222222"]
-}
-```
-
-### 7.5 删除门店关联（按门店删除全部）
-
-方法：`DELETE /api/app/product-location/{id}`
-
-入参：
-- `id`：门店Id
-
 <template>
   <view class="loc-root">
     <view class="loc-trigger" @click.stop="openPicker">
-      <text class="loc-text">{{ displayCode || '—' }}</text>
+      <text class="loc-text">{{ displayLocationName || '—' }}</text>
       <AppIcon name="chevronDown" size="sm" color="white" />
     </view>
@@ -48,7 +48,7 @@ import {
   getBoundLocations,
   getCurrentLocationCode,
 } from '../utils/stores'
-import type { UsAppBoundLocationDto } from '../services/usAppAuth'
+import type { UsAppBoundLocationDto } from '../types/usAppBound'
 const { t } = useI18n()
 const stores = ref<UsAppBoundLocationDto[]>([])
@@ -59,12 +59,21 @@ function refreshList() {
   stores.value = getBoundLocations().filter((s) => s.state !== false)
 }
-const displayCode = computed(() => {
+/** 药丸展示门店名称（与弹窗内选中项一致）；无名称时再退回编码 */
+const displayLocationName = computed(() => {
+  const fromStorage = uni.getStorageSync('storeName')
+  if (typeof fromStorage === 'string' && fromStorage.trim()) return fromStorage.trim()
   if (currentId.value) {
     const row = stores.value.find((x) => x.id === currentId.value)
-    if (row?.locationCode) return row.locationCode
+    if (row?.locationName?.trim()) return row.locationName.trim()
   }
-  return getCurrentLocationCode()
+  const id = getCurrentStoreId()
+  if (id) {
+    const row = getBoundLocations().find((x) => x.id === id)
+    if (row?.locationName?.trim()) return row.locationName.trim()
+  }
+  const code = getCurrentLocationCode()
+  return code || ''
 })
 function openPicker() {
@@ -111,6 +120,10 @@ const handleSelect = (s: UsAppBoundLocationDto) =&gt; {
   font-size: 22rpx;
   color: rgba(255, 255, 255, 0.9);
   font-weight: 500;
+  max-width: 320rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .loc-trigger .icon-wrap {
@@ -51,7 +51,7 @@ import { getAccessToken } from &#39;../../utils/authSession&#39;
 const { t } = useI18n()
 const statusBarHeight = getStatusBarHeight()
-const storeName = computed(() => uni.getStorageSync('storeName') || 'MedVantage')
+const storeName = computed(() => uni.getStorageSync('storeName') || 'None Selected')
 const isMenuOpen = ref(false)
 onShow(() => {
@@ -68,7 +68,9 @@ import { useI18n } from &#39;vue-i18n&#39;
 import { onShow } from '@dcloudio/uni-app'
 import AppIcon from '../../components/AppIcon.vue'
 import { getStatusBarHeight, getBottomSafeArea } from '../../utils/statusBar'
-import { usAppFetchMyLocations, type UsAppBoundLocationDto } from '../../services/usAppAuth'
+import { usAppFetchMyLocations } from '../../services/usAppAuth'
+import type { UsAppBoundLocationDto } from '../../types/usAppBound'
+import { isUsAppSessionExpiredError } from '../../utils/usAppApiRequest'
 import { setBoundLocations, getBoundLocations } from '../../utils/authSession'
 import { switchStore } from '../../utils/stores'
@@ -91,7 +93,8 @@ async function refreshFromApi() {
   try {
     const list = await usAppFetchMyLocations()
     applyList(list)
-  } catch {
+  } catch (e) {
+    if (isUsAppSessionExpiredError(e)) return
     applyList(getBoundLocations())
     uni.showToast({ title: t('login.refreshStoresFail'), icon: 'none' })
   } finally {
-import { buildApiUrl } from '../utils/apiBase'
+import type { UsAppBoundLocationDto } from '../types/usAppBound'
+import { usAppApiRequest } from '../utils/usAppApiRequest'
-/** 与后端 UsAppBoundLocationDto 对齐 */
-export interface UsAppBoundLocationDto {
-  id: string
-  locationCode: string
-  locationName: string
-  fullAddress: string
-  state: boolean
-}
+export type { UsAppBoundLocationDto }
 export interface UsAppLoginInput {
   email: string
@@ -48,102 +42,12 @@ function normalizeLocationList(raw: unknown): UsAppBoundLocationDto[] {
   return arr.map((x) => normalizeLocation(x as Record<string, unknown>))
 }
-/**
- * 取出真实业务负载：支持 ABP `result`、以及项目统一包装 `{ succeeded, data }`（data 内为 token / 数组等）
- */
-function unwrap<T>(data: unknown): T {
-  if (data == null || typeof data !== 'object') return data as T
-  const o = data as Record<string, unknown>
-  if ('result' in o && o.result !== undefined) {
-    return o.result as T
-  }
-  const payload = o.data ?? o.Data
-  if (payload !== undefined && payload !== null) {
-    return payload as T
-  }
-  return data as T
-}
-
-/** 统一解析后端错误文案（含统一返回体里的 errors、succeeded 等） */
-function parseErrorMessage(data: unknown): string {
-  if (data == null) return 'Request failed'
-  if (typeof data === 'string') return data
-  if (typeof data === 'object') {
-    const o = data as Record<string, unknown>
-    const errorsRaw = o.errors ?? o.Errors
-    if (typeof errorsRaw === 'string' && errorsRaw.trim()) return errorsRaw.trim()
-    if (Array.isArray(errorsRaw)) {
-      const parts = errorsRaw.map((x) => String(x)).filter(Boolean)
-      if (parts.length) return parts.join('; ')
-    }
-    const err = o.error as Record<string, unknown> | undefined
-    if (err && typeof err.message === 'string') return err.message
-    if (typeof o.message === 'string') return o.message
-    if (typeof o.error_description === 'string') return o.error_description
-  }
-  return 'Request failed'
-}
-
-/** HTTP 200 但业务失败（如 succeeded: false、体内 statusCode 403） */
-function isBusinessFailurePayload(data: unknown): boolean {
-  if (data == null || typeof data !== 'object') return false
-  const o = data as Record<string, unknown>
-  if (o.succeeded === false || o.Succeeded === false) return true
-  const inner = o.statusCode ?? o.StatusCode
-  if (typeof inner === 'number' && inner >= 400) return true
-  return false
-}
-
-function request<T>(options: {
-  path: string
-  method: 'GET' | 'POST'
-  data?: unknown
-  auth?: boolean
-}): Promise<T> {
-  const header: Record<string, string> = {
-    'Content-Type': 'application/json',
-    Accept: 'application/json',
-  }
-  if (options.auth) {
-    const token = uni.getStorageSync('access_token')
-    if (token) header.Authorization = `Bearer ${token}`
-  }
-
-  return new Promise((resolve, reject) => {
-    uni.request({
-      url: buildApiUrl(options.path),
-      method: options.method,
-      data: options.data,
-      header,
-      success: (res) => {
-        const status = res.statusCode ?? 0
-        if (status >= 400) {
-          reject(new Error(parseErrorMessage(res.data)))
-          return
-        }
-        if (isBusinessFailurePayload(res.data)) {
-          reject(new Error(parseErrorMessage(res.data)))
-          return
-        }
-        try {
-          const body = unwrap<T>(res.data as unknown)
-          resolve(body)
-        } catch {
-          reject(new Error('Invalid response'))
-        }
-      },
-      fail: (err) => {
-        reject(new Error(err.errMsg || 'Network error'))
-      },
-    })
-  })
-}
-
-/** POST /api/app/us-app-auth/login */
+/** POST /api/app/us-app-auth/login（401 不触发全局跳转） */
 export async function usAppLogin(input: UsAppLoginInput): Promise<UsAppLoginOutputDto> {
-  const raw = await request<unknown>({
+  const raw = await usAppApiRequest<unknown>({
     path: '/api/app/us-app-auth/login',
     method: 'POST',
+    skipUnauthorizedRedirect: true,
     data: {
       email: input.email.trim(),
       password: input.password,
@@ -156,7 +60,7 @@ export async function usAppLogin(input: UsAppLoginInput): Promise&lt;UsAppLoginOutp
 /** GET /api/app/us-app-auth/my-locations */
 export async function usAppFetchMyLocations(): Promise<UsAppBoundLocationDto[]> {
-  const raw = await request<unknown>({
+  const raw = await usAppApiRequest<unknown>({
     path: '/api/app/us-app-auth/my-locations',
     method: 'GET',
     auth: true,
+/** 与后端 UsAppBoundLocationDto 对齐 */
+export interface UsAppBoundLocationDto {
+  id: string
+  locationCode: string
+  locationName: string
+  fullAddress: string
+  state: boolean
+}
-import type { UsAppBoundLocationDto } from '../services/usAppAuth'
+import type { UsAppBoundLocationDto } from '../types/usAppBound'
 const KEY_ACCESS = 'access_token'
 const KEY_REFRESH = 'refresh_token'
-import type { UsAppBoundLocationDto } from '../services/usAppAuth'
+import type { UsAppBoundLocationDto } from '../types/usAppBound'
 import { getBoundLocations } from './authSession'
 export type StoreInfo = UsAppBoundLocationDto
+import { buildApiUrl } from './apiBase'
+import { clearAuthSession } from './authSession'
+
+const SESSION_EXPIRED_TOAST = 'Session expired. Please sign in again.'
+const LOGIN_PATH = '/pages/login/login'
+
+let sessionExpiredHandling = false
+
+/** 已触发登出跳转时抛出，调用方可忽略二次 Toast */
+export class UsAppSessionExpiredError extends Error {
+  constructor(message = 'Unauthorized') {
+    super(message)
+    this.name = 'UsAppSessionExpiredError'
+  }
+}
+
+export function isUsAppSessionExpiredError(e: unknown): e is UsAppSessionExpiredError {
+  return e instanceof UsAppSessionExpiredError
+}
+
+function handleSessionExpiredAndGoLogin(): void {
+  if (sessionExpiredHandling) return
+  sessionExpiredHandling = true
+  clearAuthSession()
+  uni.showToast({
+    title: SESSION_EXPIRED_TOAST,
+    icon: 'none',
+    duration: 2500,
+  })
+  setTimeout(() => {
+    sessionExpiredHandling = false
+    uni.reLaunch({ url: LOGIN_PATH })
+  }, 400)
+}
+
+/**
+ * 取出真实业务负载：支持 ABP `result`、以及统一包装 `{ succeeded, data }`
+ */
+export function unwrapApiPayload<T>(data: unknown): T {
+  if (data == null || typeof data !== 'object') return data as T
+  const o = data as Record<string, unknown>
+  if ('result' in o && o.result !== undefined) {
+    return o.result as T
+  }
+  const payload = o.data ?? o.Data
+  if (payload !== undefined && payload !== null) {
+    return payload as T
+  }
+  return data as T
+}
+
+export function parseApiErrorMessage(data: unknown): string {
+  if (data == null) return 'Request failed'
+  if (typeof data === 'string') return data
+  if (typeof data === 'object') {
+    const o = data as Record<string, unknown>
+    const errorsRaw = o.errors ?? o.Errors
+    if (typeof errorsRaw === 'string' && errorsRaw.trim()) return errorsRaw.trim()
+    if (Array.isArray(errorsRaw)) {
+      const parts = errorsRaw.map((x) => String(x)).filter(Boolean)
+      if (parts.length) return parts.join('; ')
+    }
+    const err = o.error as Record<string, unknown> | undefined
+    if (err && typeof err.message === 'string') return err.message
+    if (typeof o.message === 'string') return o.message
+    if (typeof o.error_description === 'string') return o.error_description
+  }
+  return 'Request failed'
+}
+
+function isBusinessFailurePayload(data: unknown): boolean {
+  if (data == null || typeof data !== 'object') return false
+  const o = data as Record<string, unknown>
+  if (o.succeeded === false || o.Succeeded === false) return true
+  const inner = o.statusCode ?? o.StatusCode
+  if (typeof inner === 'number' && inner >= 400) return true
+  return false
+}
+
+/** HTTP 200 但 JSON 内 statusCode 为 401（少数网关/包装） */
+function isBodyUnauthorized(data: unknown): boolean {
+  if (data == null || typeof data !== 'object') return false
+  const o = data as Record<string, unknown>
+  const inner = o.statusCode ?? o.StatusCode
+  return inner === 401
+}
+
+export type UsAppApiRequestOptions = {
+  path: string
+  method: 'GET' | 'POST'
+  data?: unknown
+  auth?: boolean
+  /** 为 true 时收到 401 不清理会话、不跳转（用于登录等匿名接口） */
+  skipUnauthorizedRedirect?: boolean
+}
+
+/**
+ * 美国版 App 统一请求：401 时 Toast（英文）+ 清会话 + 回登录页
+ */
+export function usAppApiRequest<T>(options: UsAppApiRequestOptions): Promise<T> {
+  const header: Record<string, string> = {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  }
+  if (options.auth) {
+    const token = uni.getStorageSync('access_token')
+    if (token) header.Authorization = `Bearer ${token}`
+  }
+
+  const skipRedirect = !!options.skipUnauthorizedRedirect
+
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: buildApiUrl(options.path),
+      method: options.method,
+      data: options.data,
+      header,
+      success: (res) => {
+        const status = res.statusCode ?? 0
+
+        if (status === 401) {
+          if (!skipRedirect) {
+            handleSessionExpiredAndGoLogin()
+            reject(new UsAppSessionExpiredError(parseApiErrorMessage(res.data) || 'Unauthorized'))
+          } else {
+            reject(new Error(parseApiErrorMessage(res.data) || 'Unauthorized'))
+          }
+          return
+        }
+
+        if (status >= 400) {
+          reject(new Error(parseApiErrorMessage(res.data)))
+          return
+        }
+
+        if (!skipRedirect && isBodyUnauthorized(res.data)) {
+          handleSessionExpiredAndGoLogin()
+          reject(new UsAppSessionExpiredError(parseApiErrorMessage(res.data) || 'Unauthorized'))
+          return
+        }
+
+        if (isBusinessFailurePayload(res.data)) {
+          reject(new Error(parseApiErrorMessage(res.data)))
+          return
+        }
+
+        try {
+          const body = unwrapApiPayload<T>(res.data as unknown)
+          resolve(body)
+        } catch {
+          reject(new Error('Invalid response'))
+        }
+      },
+      fail: (err) => {
+        reject(new Error(err.errMsg || 'Network error'))
+      },
+    })
+  })
+}
@@ -5,7 +5,7 @@
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Food Labeling Management Platform</title>
-      <script type="module" crossorigin src="/assets/index-1_5dt1NK.js"></script>
+      <script type="module" crossorigin src="/assets/index-C_mEdGxy.js"></script>
       <link rel="stylesheet" crossorigin href="/assets/index-Dc47WtG1.css">
     </head>
@@ -25,9 +25,10 @@ import {
   DialogTitle,
 } from "../ui/dialog";
 import { Label } from "../ui/label";
+import { ImageUrlUpload } from "../ui/image-url-upload";
 import { Switch } from "../ui/switch";
 import { Badge } from "../ui/badge";
-import { Plus, Edit, MoreHorizontal } from "lucide-react";
+import { Plus, Edit, MoreHorizontal, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import {
@@ -45,6 +46,7 @@ import {
   updateLabelCategory,
   deleteLabelCategory,
 } from "../../services/labelCategoryService";
+import { resolvePictureUrlForDisplay } from "../../services/imageUploadService";
 import type {
   LabelCategoryDto,
   LabelCategoryCreateInput,
@@ -209,7 +211,17 @@ export function LabelCategoriesView() {
                   <TableRow key={item.id} className="hover:bg-gray-50">
                     <TableCell className="font-medium">{toDisplay(item.categoryName)}</TableCell>
                     <TableCell className="text-gray-600">{toDisplay(item.categoryCode)}</TableCell>
-                    <TableCell className="text-gray-500">{toDisplay(item.categoryPhotoUrl)}</TableCell>
+                    <TableCell>
+                      {item.categoryPhotoUrl?.trim() ? (
+                        <img
+                          src={resolvePictureUrlForDisplay(item.categoryPhotoUrl)}
+                          alt=""
+                          className="w-9 h-9 rounded object-cover border border-gray-200"
+                        />
+                      ) : (
+                        <span className="text-gray-400 text-sm">—</span>
+                      )}
+                    </TableCell>
                     <TableCell>
                       <Badge className={item.state ? "bg-green-600" : "bg-gray-400"}>
                         {item.state ? "Active" : "Inactive"}
@@ -248,9 +260,10 @@ export function LabelCategoriesView() {
                           <Button
                             type="button"
                             variant="ghost"
-                            className="w-full justify-start h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
+                            className="w-full justify-start gap-2 h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
                             onClick={() => openDelete(item)}
                           >
+                            <Trash2 className="w-4 h-4 shrink-0" />
                             Delete
                           </Button>
                         </PopoverContent>
@@ -451,11 +464,13 @@ function CreateLabelCategoryDialog({
           </div>
           <div className="space-y-2">
-            <Label>Category Photo URL</Label>
-            <Input
-              placeholder="https://cdn.example.com/cat-prep.png"
+            <Label>Category photo</Label>
+            <ImageUrlUpload
               value={form.categoryPhotoUrl ?? ""}
-              onChange={(e) => setForm((p) => ({ ...p, categoryPhotoUrl: e.target.value || null }))}
+              onChange={(url) => setForm((p) => ({ ...p, categoryPhotoUrl: url || null }))}
+              uploadSubDir="category"
+              oneImageOnly
+              hint="JPG, PNG, WebP, or GIF — max 5 MB. Saved as CategoryPhotoUrl."
             />
           </div>
@@ -583,11 +598,13 @@ function EditLabelCategoryDialog({
           </div>
           <div className="space-y-2">
-            <Label>Category Photo URL</Label>
-            <Input
-              placeholder="https://cdn.example.com/cat-prep.png"
+            <Label>Category photo</Label>
+            <ImageUrlUpload
               value={form.categoryPhotoUrl ?? ""}
-              onChange={(e) => setForm((p) => ({ ...p, categoryPhotoUrl: e.target.value || null }))}
+              onChange={(url) => setForm((p) => ({ ...p, categoryPhotoUrl: url || null }))}
+              uploadSubDir="category"
+              oneImageOnly
+              hint="JPG, PNG, WebP, or GIF — max 5 MB. Saved as CategoryPhotoUrl."
             />
           </div>
@@ -675,11 +692,12 @@ function DeleteLabelCategoryDialog({
             Cancel
           </Button>
           <Button
-            className="min-w-24"
+            className="min-w-24 gap-2"
             variant="destructive"
             disabled={submitting}
             onClick={submit}
           >
+            <Trash2 className="h-4 w-4 shrink-0" />
             {submitting ? "Deleting..." : "Delete"}
           </Button>
         </DialogFooter>
@@ -4,6 +4,7 @@ import { QRCodeSVG } from &#39;qrcode.react&#39;;
 import type { LabelTemplate, LabelElement, ElementType } from '../../../types/labelTemplate';
 import { PRESET_LABEL_SIZES } from '../../../types/labelTemplate';
 import { cn } from '../../ui/utils';
+import { resolvePictureUrlForDisplay } from '../../../services/imageUploadService';
 import {
   Select,
   SelectContent,
@@ -219,7 +220,7 @@ function ElementContent({ el }: { el: LabelElement }) {
     if (src) {
       return (
         <img
-          src={src}
+          src={resolvePictureUrlForDisplay(src)}
           alt=""
           className="w-full h-full object-contain"
         />
@@ -24,6 +24,8 @@ import type { LocationDto } from &#39;../../../types/location&#39;;
 import type { LabelMultipleOptionDto } from '../../../types/labelMultipleOption';
 import { getLabelMultipleOptions } from '../../../services/labelMultipleOptionService';
 import { Checkbox } from '../../ui/checkbox';
+import { ImageUrlUpload } from '../../ui/image-url-upload';
+import { Trash2 } from 'lucide-react';
 interface PropertiesPanelProps {
   template: LabelTemplate;
@@ -155,9 +157,10 @@ export function PropertiesPanel({
               <div className="pt-4 border-t border-gray-100">
                 <Button
                   variant="destructive"
-                  className="w-full"
+                  className="w-full gap-2"
                   onClick={() => onDeleteElement(selectedElement.id)}
                 >
+                  <Trash2 className="h-4 w-4 shrink-0" />
                   Delete Element
                 </Button>
               </div>
@@ -556,13 +559,17 @@ function ElementConfigFields({
       return (
         <>
           <div>
-            <Label className="text-xs">Image URL</Label>
-            <Input
-              value={(cfg.src as string) ?? ''}
-              onChange={(e) => update('src', e.target.value)}
-              className="h-8 text-sm mt-1"
-              placeholder="输入图片URL或路径"
-            />
+            <Label className="text-xs">Image</Label>
+            <div className="mt-1">
+              <ImageUrlUpload
+                value={(cfg.src as string) ?? ''}
+                onChange={(url) => update('src', url)}
+                boxClassName="max-w-[160px]"
+                uploadSubDir="label-template"
+                oneImageOnly
+                hint="Uses POST /api/app/picture/category/upload (subDir: label-template). Max 5 MB."
+              />
+            </div>
           </div>
           <div>
             <Label className="text-xs">Scale Mode</Label>
@@ -24,7 +24,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../ui/dialog';
-import { Plus, Pencil, MoreHorizontal } from 'lucide-react';
+import { Plus, Pencil, MoreHorizontal, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import {
@@ -385,9 +385,10 @@ export function LabelTemplatesView() {
                           <Button
                             type="button"
                             variant="ghost"
-                            className="w-full justify-start h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
+                            className="w-full justify-start gap-2 h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
                             onClick={() => openDelete(t)}
                           >
+                            <Trash2 className="w-4 h-4 shrink-0" />
                             Delete
                           </Button>
                         </PopoverContent>
@@ -529,11 +530,12 @@ function DeleteLabelTemplateDialog({
             Cancel
           </Button>
           <Button
-            className="min-w-24"
+            className="min-w-24 gap-2"
             variant="destructive"
             disabled={submitting}
             onClick={submit}
           >
+            <Trash2 className="h-4 w-4 shrink-0" />
             {submitting ? "Deleting..." : "Delete"}
           </Button>
         </DialogFooter>
@@ -27,7 +27,7 @@ import {
 import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
 import { Badge } from "../ui/badge";
-import { Plus, Edit, MoreHorizontal } from "lucide-react";
+import { Plus, Edit, MoreHorizontal, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import {
@@ -245,9 +245,10 @@ export function LabelTypesView() {
                           <Button
                             type="button"
                             variant="ghost"
-                            className="w-full justify-start h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
+                            className="w-full justify-start gap-2 h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
                             onClick={() => openDelete(item)}
                           >
+                            <Trash2 className="w-4 h-4 shrink-0" />
                             Delete
                           </Button>
                         </PopoverContent>
@@ -649,11 +650,12 @@ function DeleteLabelTypeDialog({
             Cancel
           </Button>
           <Button
-            className="min-w-24"
+            className="min-w-24 gap-2"
             variant="destructive"
             disabled={submitting}
             onClick={submit}
           >
+            <Trash2 className="h-4 w-4 shrink-0" />
             {submitting ? "Deleting..." : "Delete"}
           </Button>
         </DialogFooter>
@@ -27,7 +27,7 @@ import {
 import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
 import { Badge } from "../ui/badge";
-import { Plus, Edit, MoreHorizontal, ChevronsUpDown } from "lucide-react";
+import { Plus, Edit, MoreHorizontal, ChevronsUpDown, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { Checkbox } from "../ui/checkbox";
@@ -72,8 +72,10 @@ function labelRowCode(item: LabelDto): string {
   return c || "None";
 }
-/** 列表行：产品列（优先展示名称，否则展示绑定数量） */
+/** 列表行：产品列（接口可能返回 `products` 汇总字符串或 `productName` / productIds） */
 function labelRowProductsText(item: LabelDto): string {
+  const aggregated = (item.products ?? "").trim();
+  if (aggregated) return aggregated;
   const pn = (item.productName ?? "").trim();
   if (pn) return pn;
   const n = item.productIds?.length ?? 0;
@@ -523,9 +525,10 @@ export function LabelsList() {
                           <Button
                             type="button"
                             variant="ghost"
-                            className="w-full justify-start h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
+                            className="w-full justify-start gap-2 h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
                             onClick={() => openDelete(item)}
                           >
+                            <Trash2 className="w-4 h-4 shrink-0" />
                             Delete
                           </Button>
                         </PopoverContent>
@@ -1165,11 +1168,12 @@ function DeleteLabelDialog({
             Cancel
           </Button>
           <Button
-            className="min-w-24"
+            className="min-w-24 gap-2"
             variant="destructive"
             disabled={submitting}
             onClick={submit}
           >
+            <Trash2 className="h-4 w-4 shrink-0" />
             {submitting ? "Deleting..." : "Delete"}
           </Button>
         </DialogFooter>
@@ -27,7 +27,7 @@ import {
 import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
 import { Badge } from "../ui/badge";
-import { Plus, Edit, MoreHorizontal, X } from "lucide-react";
+import { Plus, Edit, MoreHorizontal, X, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import {
@@ -251,9 +251,10 @@ export function MultipleOptionsView() {
                           <Button
                             type="button"
                             variant="ghost"
-                            className="w-full justify-start h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
+                            className="w-full justify-start gap-2 h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
                             onClick={() => openDelete(item)}
                           >
+                            <Trash2 className="w-4 h-4 shrink-0" />
                             Delete
                           </Button>
                         </PopoverContent>
@@ -793,11 +794,12 @@ function DeleteMultipleOptionDialog({
             Cancel
           </Button>
           <Button
-            className="min-w-24"
+            className="min-w-24 gap-2"
             variant="destructive"
             disabled={submitting}
             onClick={submit}
           >
+            <Trash2 className="h-4 w-4 shrink-0" />
             {submitting ? "Deleting..." : "Delete"}
           </Button>
         </DialogFooter>
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Edit, MapPin, MoreHorizontal } from "lucide-react";
+import { Edit, MapPin, MoreHorizontal, Trash2 } from "lucide-react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import {
@@ -373,9 +373,10 @@ export function LocationsView() {
                           <Button
                             type="button"
                             variant="ghost"
-                            className="w-full justify-start h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
+                            className="w-full justify-start gap-2 h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
                             onClick={() => openDelete(loc)}
                           >
+                            <Trash2 className="w-4 h-4 shrink-0" />
                             Delete
                           </Button>
                         </PopoverContent>
@@ -1067,11 +1068,12 @@ function DeleteLocationDialog({
         <DialogFooter className="flex-row flex-wrap justify-end">
           <Button className="min-w-24" variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
           <Button
-            className="min-w-24"
+            className="min-w-24 gap-2"
             variant="destructive"
             disabled={submitting}
             onClick={submit}
           >
+            <Trash2 className="h-4 w-4 shrink-0" />
             {submitting ? "Deleting..." : "Delete"}
           </Button>
         </DialogFooter>
@@ -16,6 +16,13 @@ import {
 } from "../ui/dialog";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import {
   Table,
   TableBody,
   TableCell,
@@ -67,7 +74,7 @@ export function MenuManagementView() {
   const [debouncedKeyword, setDebouncedKeyword] = useState("");
   const [pageIndex, setPageIndex] = useState(1);
-  const [pageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(10);
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [isEditOpen, setIsEditOpen] = useState(false);
@@ -89,7 +96,18 @@ export function MenuManagementView() {
     setPageIndex(1);
   }, [debouncedKeyword]);
-  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  useEffect(() => {
+    setPageIndex(1);
+  }, [pageSize]);
+
+  const totalPages = Math.max(1, Math.ceil(total / pageSize) || 1);
+
+  useEffect(() => {
+    setPageIndex((p) => {
+      const tp = Math.max(1, Math.ceil(total / pageSize) || 1);
+      return p > tp ? tp : p;
+    });
+  }, [total, pageSize]);
   useEffect(() => {
     const run = async () => {
@@ -238,50 +256,60 @@ export function MenuManagementView() {
           </Table>
         </div>
-        <div className="px-4 py-3 border-t border-gray-200 bg-white flex items-center justify-between">
+        <div className="px-4 py-3 border-t border-gray-200 bg-white flex flex-wrap items-center justify-between gap-3">
           <div className="text-sm text-gray-600">
-            {total === 0 ? "0 results" : `${total} results`}
+            Showing {total === 0 ? 0 : (pageIndex - 1) * pageSize + 1}-
+            {Math.min(pageIndex * pageSize, total)} of {total}
           </div>
-          <Pagination>
-            <PaginationContent>
-              <PaginationItem>
-                <PaginationPrevious
-                  href="#"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setPageIndex((p) => Math.max(1, p - 1));
-                  }}
-                />
-              </PaginationItem>
-              {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
-                const page = i + 1;
-                return (
-                  <PaginationItem key={page}>
-                    <PaginationLink
-                      href="#"
-                      isActive={pageIndex === page}
-                      onClick={(e) => {
-                        e.preventDefault();
-                        setPageIndex(page);
-                      }}
-                    >
-                      {page}
-                    </PaginationLink>
-                  </PaginationItem>
-                );
-              })}
-              <PaginationItem>
-                <PaginationNext
-                  href="#"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setPageIndex((p) => Math.min(totalPages, p + 1));
-                  }}
-                />
-              </PaginationItem>
-            </PaginationContent>
-          </Pagination>
+          <div className="flex items-center gap-3">
+            <Select value={String(pageSize)} onValueChange={(v) => setPageSize(Number(v))}>
+              <SelectTrigger className="w-[110px] h-9 rounded-md border border-gray-300 bg-white text-gray-900">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {[10, 20, 50].map((n) => (
+                  <SelectItem key={n} value={String(n)}>
+                    {n} / page
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Pagination className="mx-0 w-auto justify-end">
+              <PaginationContent>
+                <PaginationItem>
+                  <PaginationPrevious
+                    href="#"
+                    size="default"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setPageIndex((p) => Math.max(1, p - 1));
+                    }}
+                    aria-disabled={pageIndex <= 1}
+                    className={pageIndex <= 1 ? "pointer-events-none opacity-50" : ""}
+                  />
+                </PaginationItem>
+                <PaginationItem>
+                  <PaginationLink href="#" isActive size="default" onClick={(e) => e.preventDefault()}>
+                    Page {pageIndex} / {totalPages}
+                  </PaginationLink>
+                </PaginationItem>
+                <PaginationItem>
+                  <PaginationNext
+                    href="#"
+                    size="default"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setPageIndex((p) => Math.min(totalPages, p + 1));
+                    }}
+                    aria-disabled={pageIndex >= totalPages}
+                    className={pageIndex >= totalPages ? "pointer-events-none opacity-50" : ""}
+                  />
+                </PaginationItem>
+              </PaginationContent>
+            </Pagination>
+          </div>
         </div>
       </div>
@@ -497,7 +525,8 @@ function DeleteMenuDialog({
           <Button className="min-w-24" variant="outline" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button className="min-w-24" variant="destructive" disabled={submitting} onClick={submit}>
+          <Button className="min-w-24 gap-2" variant="destructive" disabled={submitting} onClick={submit}>
+            <Trash2 className="h-4 w-4 shrink-0" />
             {submitting ? "Deleting..." : "Delete"}
           </Button>
         </DialogFooter>
@@ -1190,7 +1190,13 @@ function RoleMenuPermissionsDialog({
           <Button variant="outline" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button variant="destructive" disabled={submitting || selectedIds.size === 0 || !roleId} onClick={clearAll}>
+          <Button
+            variant="destructive"
+            className="gap-2"
+            disabled={submitting || selectedIds.size === 0 || !roleId}
+            onClick={clearAll}
+          >
+            <Trash2 className="h-4 w-4 shrink-0" />
             Delete Selected
           </Button>
           <Button disabled={submitting || !roleId} onClick={submit} className="bg-blue-600 text-white hover:bg-blue-700">
@@ -1257,11 +1263,12 @@ function DeleteRoleDialog({
             Cancel
           </Button>
           <Button
-            className="min-w-24"
+            className="min-w-24 gap-2"
             variant="destructive"
             disabled={submitting}
             onClick={submit}
           >
+            <Trash2 className="h-4 w-4 shrink-0" />
             {submitting ? "Deleting..." : "Delete"}
           </Button>
         </DialogFooter>
@@ -1805,10 +1812,11 @@ function DeleteMemberDialog({
           </Button>
           <Button
             variant="destructive"
-            className="min-w-24"
+            className="min-w-24 gap-2"
             disabled={submitting}
             onClick={submit}
           >
+            <Trash2 className="h-4 w-4 shrink-0" />
             {submitting ? "Deleting..." : "Delete"}
           </Button>
         </DialogFooter>
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Search, Plus, Download, Upload, Edit, MoreHorizontal, Image as ImageIcon, Package } from "lucide-react";
+import {
+  Search,
+  Plus,
+  Download,
+  Upload,
+  Edit,
+  MoreHorizontal,
+  Package,
+  Trash2,
+} from "lucide-react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import {
@@ -26,12 +35,20 @@ import {
   SelectValue,
 } from "../ui/select";
 import { Label } from "../ui/label";
+import { ImageUrlUpload } from "../ui/image-url-upload";
+import { resolvePictureUrlForDisplay } from "../../services/imageUploadService";
 import { Switch } from "../ui/switch";
 import { Badge } from "../ui/badge";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { toast } from "sonner";
 import { getLocations } from "../../services/locationService";
-import { getLabelCategories } from "../../services/labelCategoryService";
+import {
+  createProductCategory,
+  deleteProductCategory,
+  getProductCategories,
+  getProductCategory,
+  updateProductCategory,
+} from "../../services/productCategoryService";
 import {
   createProduct,
   deleteProduct,
@@ -46,9 +63,17 @@ import {
   updateProductLocation,
 } from "../../services/productLocationService";
 import type { LocationDto } from "../../types/location";
-import type { LabelCategoryDto } from "../../types/labelCategory";
 import type { ProductDto, ProductCreateInput, ProductUpdateInput } from "../../types/product";
+import type { ProductCategoryDto, ProductCategoryCreateInput } from "../../types/productCategory";
 import { SearchableSelect } from "../ui/searchable-select";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../ui/pagination";
 function toDisplay(v: string | null | undefined): string {
   const s = (v ?? "").trim();
@@ -101,7 +126,17 @@ export function ProductsView() {
   const [loading, setLoading] = useState(false);
   const [locationMap, setLocationMap] = useState<Map<string, string[]>>(new Map());
   const [locations, setLocations] = useState<LocationDto[]>([]);
-  const [labelCategories, setLabelCategories] = useState<LabelCategoryDto[]>([]);
+  /** 产品分类全量（筛选项、产品表单下拉），与 Categories 标签 API 一致 */
+  const [productCategoriesCatalog, setProductCategoriesCatalog] = useState<ProductCategoryDto[]>([]);
+  const [catalogReloadToken, setCatalogReloadToken] = useState(0);
+
+  const [productCategoryRows, setProductCategoryRows] = useState<ProductCategoryDto[]>([]);
+  const [catTotal, setCatTotal] = useState(0);
+  const [catLoading, setCatLoading] = useState(false);
+  const [catPageIndex, setCatPageIndex] = useState(1);
+  const [catPageSize, setCatPageSize] = useState(10);
+  const [catRefreshSeq, setCatRefreshSeq] = useState(0);
+  const catAbortRef = useRef<AbortController | null>(null);
   const [keyword, setKeyword] = useState("");
   const [debouncedKeyword, setDebouncedKeyword] = useState("");
@@ -116,7 +151,10 @@ export function ProductsView() {
   const abortRef = useRef<AbortController | null>(null);
   const [isProductDialogOpen, setIsProductDialogOpen] = useState(false);
-  const [isCategoryDialogOpen, setIsCategoryDialogOpen] = useState(false);
+  const [isProductCategoryDialogOpen, setIsProductCategoryDialogOpen] = useState(false);
+  const [editingProductCategory, setEditingProductCategory] = useState<ProductCategoryDto | null>(null);
+  const [deletingProductCategory, setDeletingProductCategory] = useState<ProductCategoryDto | null>(null);
+  const [categoriesActionsOpenId, setCategoriesActionsOpenId] = useState<string | null>(null);
   const [editingProduct, setEditingProduct] = useState<ProductDto | null>(null);
   const [deletingProduct, setDeletingProduct] = useState<ProductDto | null>(null);
   const [actionsOpenId, setActionsOpenId] = useState<string | null>(null);
@@ -135,27 +173,37 @@ export function ProductsView() {
       try {
         const [locRes, catRes] = await Promise.all([
           getLocations({ skipCount: 0, maxResultCount: 500 }),
-          getLabelCategories({ skipCount: 0, maxResultCount: 500 }),
+          getProductCategories({
+            skipCount: 0,
+            maxResultCount: 500,
+            sorting: "OrderNum desc",
+          }),
         ]);
         if (c) return;
         setLocations(locRes.items ?? []);
-        setLabelCategories(catRes.items ?? []);
+        setProductCategoriesCatalog(catRes.items ?? []);
       } catch {
         if (!c) {
           setLocations([]);
-          setLabelCategories([]);
+          setProductCategoriesCatalog([]);
         }
       }
     })();
     return () => {
       c = true;
     };
-  }, []);
+  }, [catalogReloadToken]);
+
+  const reloadCategoryCatalog = () => setCatalogReloadToken((x) => x + 1);
   useEffect(() => {
     setPageIndex(1);
   }, [debouncedKeyword, locationFilter, categoryFilter, stateFilter, pageSize]);
+  useEffect(() => {
+    setCatPageIndex(1);
+  }, [debouncedKeyword, stateFilter, catPageSize]);
+
   const needClientFilter = locationFilter !== "all" || categoryFilter !== "all";
   useEffect(() => {
@@ -236,8 +284,62 @@ export function ProductsView() {
     needClientFilter,
   ]);
+  const catTotalPages = Math.max(1, Math.ceil(catTotal / catPageSize) || 1);
+
+  useEffect(() => {
+    setCatPageIndex((p) => {
+      const tp = Math.max(1, Math.ceil(catTotal / catPageSize) || 1);
+      return p > tp ? tp : p;
+    });
+  }, [catTotal, catPageSize]);
+
+  useEffect(() => {
+    if (activeTab !== "categories") return;
+
+    const run = async () => {
+      catAbortRef.current?.abort();
+      const ac = new AbortController();
+      catAbortRef.current = ac;
+
+      setCatLoading(true);
+      try {
+        const skip = (catPageIndex - 1) * catPageSize;
+        const res = await getProductCategories(
+          {
+            skipCount: skip,
+            maxResultCount: catPageSize,
+            sorting: "OrderNum desc",
+            keyword: debouncedKeyword || undefined,
+            state: stateFilter === "all" ? undefined : stateFilter === "true",
+          },
+          ac.signal,
+        );
+        if (ac.signal.aborted) return;
+        setProductCategoryRows(res.items ?? []);
+        setCatTotal(res.totalCount ?? 0);
+      } catch (e: any) {
+        if (e?.name === "AbortError") return;
+        toast.error("Failed to load categories", {
+          description: e?.message ? String(e.message) : "Please try again.",
+        });
+        setProductCategoryRows([]);
+        setCatTotal(0);
+      } finally {
+        if (!ac.signal.aborted) setCatLoading(false);
+      }
+    };
+
+    run();
+    return () => catAbortRef.current?.abort();
+  }, [activeTab, debouncedKeyword, stateFilter, catPageIndex, catPageSize, catRefreshSeq]);
+
   const refresh = () => setRefreshSeq((x) => x + 1);
+  const refreshCategories = () => {
+    setCatRefreshSeq((x) => x + 1);
+    reloadCategoryCatalog();
+  };
+
   const locationOptions = useMemo(
     () =>
       locations.map((loc) => ({
@@ -249,11 +351,13 @@ export function ProductsView() {
   const categoryNameOptions = useMemo(
     () =>
-      labelCategories.map((c) => ({
-        value: (c.categoryName ?? c.categoryCode ?? c.id ?? "").trim(),
-        label: toDisplay(c.categoryName ?? c.categoryCode ?? c.id),
-      })).filter((o) => o.value),
-    [labelCategories],
+      productCategoriesCatalog
+        .map((c) => ({
+          value: (c.categoryName ?? c.categoryCode ?? c.id ?? "").trim(),
+          label: toDisplay(c.categoryName ?? c.categoryCode ?? c.id),
+        }))
+        .filter((o) => o.value),
+    [productCategoriesCatalog],
   );
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
@@ -372,7 +476,10 @@ export function ProductsView() {
           ) : (
             <Button
               className="h-10 rounded-md bg-blue-600 text-white hover:bg-blue-700 font-medium gap-1 shrink-0"
-              onClick={() => setIsCategoryDialogOpen(true)}
+              onClick={() => {
+                setEditingProductCategory(null);
+                setIsProductCategoryDialogOpen(true);
+              }}
             >
               New Category <Plus className="w-4 h-4" />
             </Button>
@@ -465,7 +572,7 @@ export function ProductsView() {
                           <div className="flex items-center gap-2 min-w-0">
                             {p.productImageUrl ? (
                               <img
-                                src={p.productImageUrl}
+                                src={resolvePictureUrlForDisplay(p.productImageUrl)}
                                 alt=""
                                 className="w-8 h-8 rounded object-cover border border-gray-200 shrink-0"
                               />
@@ -523,12 +630,13 @@ export function ProductsView() {
                               <Button
                                 type="button"
                                 variant="ghost"
-                                className="w-full justify-start h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
+                                className="w-full justify-start gap-2 h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
                                 onClick={() => {
                                   setActionsOpenId(null);
                                   setDeletingProduct(p);
                                 }}
                               >
+                                <Trash2 className="w-4 h-4 shrink-0" />
                                 Delete
                               </Button>
                             </PopoverContent>
@@ -583,7 +691,164 @@ export function ProductsView() {
             </div>
           </div>
         ) : (
-          <CategoriesPlaceholderTab categories={labelCategories} />
+          <div className="bg-white border border-gray-200 shadow-sm rounded-md overflow-hidden flex flex-col">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-gray-100 hover:bg-gray-100">
+                  <TableHead className="text-gray-900 font-bold border-r whitespace-nowrap">Category Name</TableHead>
+                  <TableHead className="text-gray-900 font-bold border-r whitespace-nowrap">Code</TableHead>
+                  <TableHead className="text-gray-900 font-bold border-r whitespace-nowrap">Photo</TableHead>
+                  <TableHead className="text-gray-900 font-bold border-r whitespace-nowrap">Order</TableHead>
+                  <TableHead className="text-gray-900 font-bold border-r whitespace-nowrap">Status</TableHead>
+                  <TableHead className="text-gray-900 font-bold border-r whitespace-nowrap">Last edited</TableHead>
+                  <TableHead className="text-gray-900 font-bold text-center whitespace-nowrap w-[72px]">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {catLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={7} className="text-center text-gray-500 py-10">
+                      Loading...
+                    </TableCell>
+                  </TableRow>
+                ) : productCategoryRows.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={7} className="text-center text-gray-500 py-10">
+                      No categories found.
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  productCategoryRows.map((c) => {
+                    const active = c.state !== false;
+                    return (
+                      <TableRow key={c.id}>
+                        <TableCell className="border-r font-medium text-gray-900">{toDisplay(c.categoryName)}</TableCell>
+                        <TableCell className="border-r text-gray-600 font-mono text-sm">{toDisplay(c.categoryCode)}</TableCell>
+                        <TableCell className="border-r">
+                          {c.categoryPhotoUrl ? (
+                            <img
+                              src={resolvePictureUrlForDisplay(c.categoryPhotoUrl)}
+                              alt=""
+                              className="w-9 h-9 rounded object-cover border border-gray-200"
+                            />
+                          ) : (
+                            <span className="text-gray-400 text-sm">—</span>
+                          )}
+                        </TableCell>
+                        <TableCell className="border-r text-gray-700">{c.orderNum ?? "—"}</TableCell>
+                        <TableCell className="border-r whitespace-nowrap">
+                          <Badge variant={active ? "default" : "secondary"} className={active ? "bg-green-600" : "bg-gray-400"}>
+                            {active ? "active" : "inactive"}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="border-r text-gray-600 text-sm">{toDisplay(c.lastEdited)}</TableCell>
+                        <TableCell className="text-center whitespace-nowrap">
+                          <Popover
+                            open={categoriesActionsOpenId === c.id}
+                            onOpenChange={(open) => setCategoriesActionsOpenId(open ? c.id : null)}
+                          >
+                            <PopoverTrigger asChild>
+                              <Button type="button" variant="ghost" size="icon" className="h-8 w-8">
+                                <MoreHorizontal className="h-4 w-4" />
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent align="end" className="w-36 p-1">
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                className="w-full justify-start h-9 px-2 font-normal"
+                                onClick={async () => {
+                                  setCategoriesActionsOpenId(null);
+                                  try {
+                                    const fresh = await getProductCategory(c.id);
+                                    setEditingProductCategory(fresh);
+                                    setIsProductCategoryDialogOpen(true);
+                                  } catch (e: any) {
+                                    toast.error("Failed to load category", {
+                                      description: e?.message ? String(e.message) : "",
+                                    });
+                                  }
+                                }}
+                              >
+                                <Edit className="w-4 h-4 mr-2" />
+                                Edit
+                              </Button>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                className="w-full justify-start gap-2 h-9 px-2 font-normal text-red-600 hover:text-red-700 hover:bg-red-50"
+                                onClick={() => {
+                                  setCategoriesActionsOpenId(null);
+                                  setDeletingProductCategory(c);
+                                }}
+                              >
+                                <Trash2 className="w-4 h-4 shrink-0" />
+                                Delete
+                              </Button>
+                            </PopoverContent>
+                          </Popover>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })
+                )}
+              </TableBody>
+            </Table>
+
+            <div className="px-4 py-3 border-t border-gray-200 bg-white flex flex-wrap items-center justify-between gap-3 shrink-0">
+              <div className="text-sm text-gray-600">
+                Showing {catTotal === 0 ? 0 : (catPageIndex - 1) * catPageSize + 1}-
+                {Math.min(catPageIndex * catPageSize, catTotal)} of {catTotal}
+              </div>
+              <div className="flex items-center gap-3">
+                <Select value={String(catPageSize)} onValueChange={(v) => setCatPageSize(Number(v))}>
+                  <SelectTrigger className="w-[110px] h-9 rounded-md border border-gray-300 bg-white text-gray-900">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {[10, 20, 50].map((n) => (
+                      <SelectItem key={n} value={String(n)}>
+                        {n} / page
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Pagination className="mx-0 w-auto justify-end">
+                  <PaginationContent>
+                    <PaginationItem>
+                      <PaginationPrevious
+                        href="#"
+                        size="default"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setCatPageIndex((p) => Math.max(1, p - 1));
+                        }}
+                        aria-disabled={catPageIndex <= 1}
+                        className={catPageIndex <= 1 ? "pointer-events-none opacity-50" : ""}
+                      />
+                    </PaginationItem>
+                    <PaginationItem>
+                      <PaginationLink href="#" isActive size="default" onClick={(e) => e.preventDefault()}>
+                        Page {catPageIndex} / {catTotalPages}
+                      </PaginationLink>
+                    </PaginationItem>
+                    <PaginationItem>
+                      <PaginationNext
+                        href="#"
+                        size="default"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setCatPageIndex((p) => Math.min(catTotalPages, p + 1));
+                        }}
+                        aria-disabled={catPageIndex >= catTotalPages}
+                        className={catPageIndex >= catTotalPages ? "pointer-events-none opacity-50" : ""}
+                      />
+                    </PaginationItem>
+                  </PaginationContent>
+                </Pagination>
+              </div>
+            </div>
+          </div>
         )}
       </div>
@@ -613,44 +878,28 @@ export function ProductsView() {
         onDeleted={refresh}
       />
-      <CreateCategoryPlaceholderDialog open={isCategoryDialogOpen} onOpenChange={setIsCategoryDialogOpen} />
-    </div>
-  );
-}
+      <ProductCategoryFormDialog
+        open={isProductCategoryDialogOpen}
+        category={editingProductCategory}
+        onOpenChange={(o) => {
+          setIsProductCategoryDialogOpen(o);
+          if (!o) setEditingProductCategory(null);
+        }}
+        onSaved={() => {
+          refreshCategories();
+          setIsProductCategoryDialogOpen(false);
+          setEditingProductCategory(null);
+        }}
+      />
-function CategoriesPlaceholderTab({ categories }: { categories: LabelCategoryDto[] }) {
-  return (
-    <div className="bg-white border border-gray-200 shadow-sm rounded-md overflow-hidden">
-      <Table>
-        <TableHeader>
-          <TableRow className="bg-gray-100 hover:bg-gray-100">
-            <TableHead className="text-gray-900 font-bold border-r">Category Name</TableHead>
-            <TableHead className="text-gray-900 font-bold border-r">Code</TableHead>
-            <TableHead className="text-gray-900 font-bold border-r">Status</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {categories.length === 0 ? (
-            <TableRow>
-              <TableCell colSpan={3} className="text-center text-gray-500 py-8">
-                No categories loaded. Use Labeling → Label Categories to manage.
-              </TableCell>
-            </TableRow>
-          ) : (
-            categories.map((c) => (
-              <TableRow key={c.id}>
-                <TableCell className="border-r font-medium">{toDisplay(c.categoryName)}</TableCell>
-                <TableCell className="border-r text-gray-600">{toDisplay(c.categoryCode)}</TableCell>
-                <TableCell className="border-r">
-                  <Badge variant={c.state !== false ? "default" : "secondary"}>
-                    {c.state !== false ? "active" : "inactive"}
-                  </Badge>
-                </TableCell>
-              </TableRow>
-            ))
-          )}
-        </TableBody>
-      </Table>
+      <DeleteProductCategoryDialog
+        open={!!deletingProductCategory}
+        category={deletingProductCategory}
+        onOpenChange={(o) => {
+          if (!o) setDeletingProductCategory(null);
+        }}
+        onDeleted={refreshCategories}
+      />
     </div>
   );
 }
@@ -782,12 +1031,13 @@ function ProductFormDialog({
             />
           </div>
           <div className="space-y-2">
-            <Label>Image URL</Label>
-            <Input
-              className="h-10"
+            <Label>Product image</Label>
+            <ImageUrlUpload
               value={productImageUrl}
-              onChange={(e) => setProductImageUrl(e.target.value)}
-              placeholder="https://..."
+              onChange={setProductImageUrl}
+              uploadSubDir="product"
+              oneImageOnly
+              hint="POST /api/app/picture/category/upload (subDir: product). JPG/PNG/WebP/GIF, max 5 MB."
             />
           </div>
           <div className="space-y-2">
@@ -862,7 +1112,8 @@ function DeleteProductDialog({
           <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button type="button" variant="destructive" disabled={submitting} onClick={submit}>
+          <Button type="button" variant="destructive" className="gap-2" disabled={submitting} onClick={submit}>
+            <Trash2 className="h-4 w-4 shrink-0" />
             {submitting ? "Deleting…" : "Delete"}
           </Button>
         </DialogFooter>
@@ -871,25 +1122,203 @@ function DeleteProductDialog({
   );
 }
-function CreateCategoryPlaceholderDialog({
+function ProductCategoryFormDialog({
   open,
+  category,
   onOpenChange,
+  onSaved,
 }: {
   open: boolean;
+  category: ProductCategoryDto | null;
   onOpenChange: (o: boolean) => void;
+  onSaved: () => void;
 }) {
+  const isEdit = !!category?.id;
+  const [submitting, setSubmitting] = useState(false);
+  const [categoryCode, setCategoryCode] = useState("");
+  const [categoryName, setCategoryName] = useState("");
+  const [categoryPhotoUrl, setCategoryPhotoUrl] = useState("");
+  const [orderNum, setOrderNum] = useState("0");
+  const [state, setState] = useState(true);
+
+  useEffect(() => {
+    if (!open) return;
+    if (category) {
+      setCategoryCode(category.categoryCode ?? "");
+      setCategoryName(category.categoryName ?? "");
+      setCategoryPhotoUrl(category.categoryPhotoUrl ?? "");
+      setOrderNum(
+        category.orderNum === null || category.orderNum === undefined ? "0" : String(category.orderNum),
+      );
+      setState(category.state !== false);
+    } else {
+      setCategoryCode("");
+      setCategoryName("");
+      setCategoryPhotoUrl("");
+      setOrderNum("0");
+      setState(true);
+    }
+  }, [open, category]);
+
+  const submit = async () => {
+    if (!categoryCode.trim() || !categoryName.trim()) {
+      toast.error("Validation", { description: "Category code and name are required." });
+      return;
+    }
+    const orderParsed = Number(orderNum);
+    if (!Number.isFinite(orderParsed)) {
+      toast.error("Validation", { description: "Order must be a number." });
+      return;
+    }
+
+    const body: ProductCategoryCreateInput = {
+      categoryCode: categoryCode.trim(),
+      categoryName: categoryName.trim(),
+      categoryPhotoUrl: categoryPhotoUrl.trim() || null,
+      state,
+      orderNum: orderParsed,
+    };
+
+    setSubmitting(true);
+    try {
+      if (isEdit && category?.id) {
+        await updateProductCategory(category.id, body);
+        toast.success("Category updated.");
+      } else {
+        await createProductCategory(body);
+        toast.success("Category created.");
+      }
+      onSaved();
+    } catch (e: any) {
+      toast.error(isEdit ? "Update failed" : "Create failed", {
+        description: e?.message ? String(e.message) : "",
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
+      <DialogContent className="w-[min(50%,calc(100vw-2rem))] max-w-none sm:max-w-none max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle>Categories</DialogTitle>
+          <DialogTitle>{isEdit ? "Edit Category" : "New Category"}</DialogTitle>
           <DialogDescription>
-            Manage categories under <span className="font-medium">Labeling → Label Categories</span> (label module API).
+            {isEdit ? "Update product category (API: /api/app/product-category)." : "Create a product category."}
           </DialogDescription>
         </DialogHeader>
+
+        <div className="grid gap-4 py-2">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>Category code *</Label>
+              <Input
+                className="h-10"
+                value={categoryCode}
+                onChange={(e) => setCategoryCode(e.target.value)}
+                placeholder="e.g. CAT_PREP"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>Category name *</Label>
+              <Input
+                className="h-10"
+                value={categoryName}
+                onChange={(e) => setCategoryName(e.target.value)}
+                placeholder="e.g. Prep"
+              />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label>Category photo</Label>
+            <ImageUrlUpload
+              value={categoryPhotoUrl}
+              onChange={setCategoryPhotoUrl}
+              uploadSubDir="category"
+              oneImageOnly
+              hint="POST /api/app/picture/category/upload. Max 5 MB."
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Order *</Label>
+            <Input
+              className="h-10"
+              type="number"
+              value={orderNum}
+              onChange={(e) => setOrderNum(e.target.value)}
+              placeholder="0"
+            />
+          </div>
+          <div className="flex items-center justify-between border border-gray-200 rounded-md px-3 h-10 bg-white">
+            <span className="text-sm font-medium">Enabled</span>
+            <Switch checked={state} onCheckedChange={setState} />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            disabled={submitting}
+            onClick={submit}
+            className="bg-blue-600 hover:bg-blue-700 text-white"
+          >
+            {submitting ? "Saving…" : isEdit ? "Save" : "Create"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function DeleteProductCategoryDialog({
+  open,
+  category,
+  onOpenChange,
+  onDeleted,
+}: {
+  open: boolean;
+  category: ProductCategoryDto | null;
+  onOpenChange: (o: boolean) => void;
+  onDeleted: () => void;
+}) {
+  const [submitting, setSubmitting] = useState(false);
+
+  const submit = async () => {
+    if (!category?.id) return;
+    setSubmitting(true);
+    try {
+      await deleteProductCategory(category.id);
+      toast.success("Category deleted.");
+      onOpenChange(false);
+      onDeleted();
+    } catch (e: any) {
+      toast.error("Delete failed", { description: e?.message ? String(e.message) : "" });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Delete category</DialogTitle>
+          <DialogDescription>This cannot be undone.</DialogDescription>
+        </DialogHeader>
+        <p className="text-sm text-gray-700 py-2">
+          Delete <span className="font-medium">{toDisplay(category?.categoryName)}</span> (
+          {toDisplay(category?.categoryCode)})?
+        </p>
         <DialogFooter>
-          <Button type="button" onClick={() => onOpenChange(false)}>
-            OK
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button type="button" variant="destructive" className="gap-2" disabled={submitting} onClick={submit}>
+            <Trash2 className="h-4 w-4 shrink-0" />
+            {submitting ? "Deleting…" : "Delete"}
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -614,7 +614,8 @@ function DeleteSystemMenuDialog({
           <Button className="min-w-24" variant="outline" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button className="min-w-24" variant="destructive" disabled={submitting} onClick={submit}>
+          <Button className="min-w-24 gap-2" variant="destructive" disabled={submitting} onClick={submit}>
+            <Trash2 className="h-4 w-4 shrink-0" />
             {submitting ? "Deleting..." : "Delete"}
           </Button>
         </DialogFooter>
+import React, { useRef, useState } from "react";
+import { Plus, X } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "./utils";
+import { PICTURE_UPLOAD_MAX_BYTES, resolvePictureUrlForDisplay, uploadImageFile } from "../../services/imageUploadService";
+
+export type ImageUrlUploadProps = {
+  value: string;
+  onChange: (url: string) => void;
+  disabled?: boolean;
+  /** 辅助说明，显示在方框下方 */
+  hint?: string;
+  /** 空状态主文案 */
+  emptyLabel?: string;
+  accept?: string;
+  /** 默认 5MB，与平台 picture 上传接口一致 */
+  maxSizeMb?: number;
+  className?: string;
+  /** 上传区域宽度（tailwind），默认 max-w-[200px] */
+  boxClassName?: string;
+  /** 传给后端的 multipart `subDir`（如 category、product） */
+  uploadSubDir?: string;
+  /** 明确单图：隐藏多选、提示文案 */
+  oneImageOnly?: boolean;
+};
+
+export function ImageUrlUpload({
+  value,
+  onChange,
+  disabled,
+  hint,
+  emptyLabel = "Click to upload image",
+  accept = "image/jpeg,image/png,image/webp,image/gif",
+  maxSizeMb = PICTURE_UPLOAD_MAX_BYTES / (1024 * 1024),
+  className,
+  boxClassName,
+  uploadSubDir,
+  oneImageOnly,
+}: ImageUrlUploadProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const onFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      toast.error("Please select an image file.");
+      return;
+    }
+    if (file.size > maxSizeMb * 1024 * 1024) {
+      toast.error(`Image must be ${maxSizeMb} MB or smaller.`);
+      return;
+    }
+
+    setUploading(true);
+    try {
+      const url = await uploadImageFile(file, { subDir: uploadSubDir });
+      onChange(url);
+      toast.success("Image uploaded.");
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : String(err);
+      toast.error("Upload failed", { description: msg || undefined });
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const busy = disabled || uploading;
+
+  const openPicker = () => {
+    if (!busy) inputRef.current?.click();
+  };
+
+  const boxBase =
+    "w-full max-w-[200px] aspect-square rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2";
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        className="sr-only"
+        disabled={busy}
+        multiple={false}
+        onChange={onFileChange}
+      />
+
+      {!value ? (
+        <button
+          type="button"
+          disabled={busy}
+          onClick={openPicker}
+          className={cn(
+            boxBase,
+            "flex flex-col items-center justify-center gap-3 border-2 border-dashed border-gray-300 bg-gray-50/80 text-gray-400",
+            "hover:border-gray-400 hover:bg-gray-100/90 hover:text-gray-500",
+            "disabled:pointer-events-none disabled:opacity-50",
+            boxClassName,
+          )}
+        >
+          <Plus className="h-10 w-10 shrink-0 stroke-[1.25]" aria-hidden />
+          <span className="px-3 text-center text-sm font-normal leading-tight">
+            {uploading ? "Uploading…" : emptyLabel}
+          </span>
+        </button>
+      ) : (
+        <div
+          className={cn(
+            "group relative overflow-hidden rounded-md border-2 border-dashed border-gray-300 bg-gray-50/80",
+            boxBase,
+            boxClassName,
+          )}
+        >
+          <button
+            type="button"
+            disabled={busy}
+            onClick={openPicker}
+            className="relative h-full w-full p-0"
+            aria-label="Replace image"
+          >
+            <img
+              src={resolvePictureUrlForDisplay(value)}
+              alt=""
+              className="h-full w-full object-contain"
+              onError={(ev) => {
+                (ev.target as HTMLImageElement).style.opacity = "0.2";
+              }}
+            />
+            <span className="absolute inset-0 flex items-center justify-center bg-black/0 text-sm font-medium text-white opacity-0 transition group-hover:bg-black/45 group-hover:opacity-100">
+              Click to replace
+            </span>
+          </button>
+          <button
+            type="button"
+            disabled={busy}
+            onClick={(e) => {
+              e.stopPropagation();
+              onChange("");
+            }}
+            className="absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center rounded-full bg-white/95 text-gray-600 shadow-sm ring-1 ring-gray-200 transition hover:bg-white hover:text-gray-900 disabled:opacity-50"
+            aria-label="Remove image"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+
+      {oneImageOnly ? (
+        <p className="text-xs text-muted-foreground">One image only. Replace or clear to change.</p>
+      ) : null}
+      {hint ? <p className="text-xs text-muted-foreground">{hint}</p> : null}
+    </div>
+  );
+}
+/**
+ * 平台端图片上传：对接 `/api/app/picture/category/upload`（见《平台端Categories图片上传接口说明》）。
+ * 返回的 `url` 为相对路径（如 `/picture/category/xxx.png`），保存到业务字段；展示时用 `resolvePictureUrlForDisplay`。
+ */
+
+/** 与文档一致：POST multipart，字段 file + 可选 subDir */
+export const PICTURE_CATEGORY_UPLOAD_PATH = "/api/app/picture/category/upload";
+
+function joinBaseAndPath(baseUrl: string, path: string): string {
+  const b = baseUrl.replace(/\/$/, "");
+  const p = path.startsWith("/") ? path : `/${path}`;
+  return `${b}${p}`;
+}
+
+/** 与后端限制一致：5MB */
+export const PICTURE_UPLOAD_MAX_BYTES = 5 * 1024 * 1024;
+
+export type UploadImageOptions = {
+  /** 可选子目录，如 `category`、`product`；禁止包含 `..` */
+  subDir?: string;
+  signal?: AbortSignal;
+};
+
+function getApiBaseUrl(): string {
+  return (import.meta.env.VITE_API_BASE_URL as string | undefined)?.replace(/\/$/, "") ?? "http://localhost:19001";
+}
+
+function getToken(): string | null {
+  try {
+    return localStorage.getItem("access_token") ?? localStorage.getItem("token");
+  } catch {
+    return null;
+  }
+}
+
+function pickUrlFromPayload(x: unknown): string | null {
+  if (typeof x === "string" && x.trim()) {
+    const t = x.trim();
+    if (/^https?:\/\//i.test(t) || t.startsWith("/") || t.startsWith("data:")) return t;
+  }
+  if (!x || typeof x !== "object") return null;
+  const o = x as Record<string, unknown>;
+  for (const k of ["url", "Url", "fileUrl", "FileUrl", "imageUrl", "ImageUrl", "path", "Path"]) {
+    const v = o[k];
+    if (typeof v === "string" && v.trim()) return v.trim();
+  }
+  return null;
+}
+
+function unwrapData(payload: unknown): unknown {
+  if (!payload || typeof payload !== "object") return payload;
+  const o = payload as Record<string, unknown>;
+  if ("data" in o && o.data !== undefined) return o.data;
+  if ("result" in o && o.result !== undefined) return o.result;
+  return payload;
+}
+
+function messageFromErrorPayload(payload: unknown, status: number): string {
+  if (payload && typeof payload === "object") {
+    const o = payload as Record<string, unknown>;
+    const err = o.errors ?? o.Errors;
+    if (typeof err === "string" && err.trim()) return err.trim();
+    const nested = o.error as { message?: string } | undefined;
+    if (nested && typeof nested.message === "string" && nested.message.trim()) return nested.message.trim();
+  }
+  return `Upload failed (${status})`;
+}
+
+/**
+ * 将保存的地址转为浏览器可请求的绝对 URL（相对 `/picture/...` 会拼上 API 宿主）。
+ */
+export function resolvePictureUrlForDisplay(stored: string): string {
+  const s = (stored ?? "").trim();
+  if (!s) return "";
+  if (s.startsWith("data:")) return s;
+  if (/^https?:\/\//i.test(s)) return s;
+  const base = getApiBaseUrl();
+  return s.startsWith("/") ? `${base}${s}` : `${base}/${s}`;
+}
+
+function validateFile(file: File): void {
+  if (file.size > PICTURE_UPLOAD_MAX_BYTES) {
+    throw new Error("Image must be 5 MB or smaller.");
+  }
+  const okMime = /^(image\/(jpeg|png|webp|gif))$/i.test(file.type);
+  const okExt = /\.(jpe?g|png|webp|gif)$/i.test(file.name);
+  if (!okMime && !okExt) {
+    throw new Error("Only JPG, PNG, WebP, and GIF are allowed.");
+  }
+}
+
+function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const r = reader.result;
+      if (typeof r === "string") resolve(r);
+      else reject(new Error("Failed to read file."));
+    };
+    reader.onerror = () => reject(new Error("Failed to read file."));
+    reader.readAsDataURL(file);
+  });
+}
+
+/**
+ * 上传图片；返回后端 `PictureUploadOutputDto.url`（相对路径，可写入 CategoryPhotoUrl 等字段）。
+ */
+export async function uploadImageFile(file: File, options?: UploadImageOptions): Promise<string> {
+  if (import.meta.env.VITE_IMAGE_UPLOAD_MOCK === "true") {
+    validateFile(file);
+    return readFileAsDataUrl(file);
+  }
+
+  validateFile(file);
+
+  const sub = options?.subDir?.trim();
+  if (sub && sub.includes("..")) {
+    throw new Error("Invalid subDir.");
+  }
+
+  const uploadUrl = joinBaseAndPath(getApiBaseUrl(), PICTURE_CATEGORY_UPLOAD_PATH);
+
+  const fd = new FormData();
+  fd.append("file", file);
+  if (sub) fd.append("subDir", sub);
+
+  const headers: Record<string, string> = {};
+  const token = getToken();
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  const res = await fetch(uploadUrl, {
+    method: "POST",
+    body: fd,
+    headers,
+    signal: options?.signal,
+  });
+
+  const text = await res.text();
+  let payload: unknown = text;
+  try {
+    payload = text ? JSON.parse(text) : null;
+  } catch {
+    payload = text;
+  }
+
+  if (!res.ok) {
+    throw new Error(messageFromErrorPayload(payload, res.status));
+  }
+
+  const inner = unwrapData(payload);
+  const url = pickUrlFromPayload(inner) ?? pickUrlFromPayload(payload);
+  if (!url) {
+    throw new Error("Upload response did not contain a usable image URL.");
+  }
+  return url;
+}
+import { createApiClient } from "../lib/apiClient";
+import type {
+  ProductCategoryCreateInput,
+  ProductCategoryDto,
+  ProductCategoryGetListInput,
+  ProductCategoryPagedResult,
+  ProductCategoryUpdateInput,
+} from "../types/productCategory";
+
+const api = createApiClient({
+  getToken: () => {
+    try {
+      return localStorage.getItem("access_token") ?? localStorage.getItem("token") ?? null;
+    } catch {
+      return null;
+    }
+  },
+});
+
+const PATH = "/product-category";
+
+export async function getProductCategories(
+  input: ProductCategoryGetListInput,
+  signal?: AbortSignal,
+): Promise<ProductCategoryPagedResult> {
+  return api.requestJson<ProductCategoryPagedResult>({
+    path: PATH,
+    method: "GET",
+    query: {
+      SkipCount: input.skipCount,
+      MaxResultCount: input.maxResultCount,
+      Sorting: input.sorting,
+      Keyword: input.keyword,
+      State: input.state,
+    },
+    signal,
+  });
+}
+
+export async function getProductCategory(id: string, signal?: AbortSignal): Promise<ProductCategoryDto> {
+  return api.requestJson<ProductCategoryDto>({
+    path: `${PATH}/${encodeURIComponent(id)}`,
+    method: "GET",
+    signal,
+  });
+}
+
+export async function createProductCategory(input: ProductCategoryCreateInput): Promise<ProductCategoryDto> {
+  return api.requestJson<ProductCategoryDto>({
+    path: PATH,
+    method: "POST",
+    body: {
+      categoryCode: input.categoryCode,
+      categoryName: input.categoryName,
+      categoryPhotoUrl: input.categoryPhotoUrl ?? null,
+      state: input.state ?? true,
+      orderNum: input.orderNum ?? 0,
+    },
+  });
+}
+
+export async function updateProductCategory(
+  id: string,
+  input: ProductCategoryUpdateInput,
+): Promise<ProductCategoryDto> {
+  return api.requestJson<ProductCategoryDto>({
+    path: `${PATH}/${encodeURIComponent(id)}`,
+    method: "PUT",
+    body: {
+      categoryCode: input.categoryCode,
+      categoryName: input.categoryName,
+      categoryPhotoUrl: input.categoryPhotoUrl ?? null,
+      state: input.state ?? true,
+      orderNum: input.orderNum ?? 0,
+    },
+  });
+}
+
+export async function deleteProductCategory(id: string): Promise<void> {
+  await api.requestJson<unknown>({
+    path: `${PATH}/${encodeURIComponent(id)}`,
+    method: "DELETE",
+  });
+}
@@ -18,6 +18,8 @@ export type LabelDto = {
   labelTypeName?: string | null;
   /** 列表接口：模板展示名 */
   templateName?: string | null;
+  /** 列表接口：关联产品名称汇总（逗号分隔等，与后端 `products` 一致） */
+  products?: string | null;
   /** 列表接口：关联产品展示名（按产品展开时可能为单条） */
   productName?: string | null;
   /** 列表接口：产品类别展示名 */
+import type { PagedResultDto } from "./labelCategory";
+
+/** 产品模块 Categories（/api/app/product-category） */
+export type ProductCategoryDto = {
+  id: string;
+  categoryCode: string;
+  categoryName: string;
+  categoryPhotoUrl?: string | null;
+  state?: boolean;
+  orderNum?: number | null;
+  lastEdited?: string | null;
+};
+
+export type ProductCategoryGetListInput = {
+  skipCount: number;
+  maxResultCount: number;
+  sorting?: string;
+  keyword?: string;
+  state?: boolean;
+};
+
+export type ProductCategoryCreateInput = {
+  categoryCode: string;
+  categoryName: string;
+  categoryPhotoUrl?: string | null;
+  state?: boolean;
+  orderNum?: number | null;
+};
+
+export type ProductCategoryUpdateInput = ProductCategoryCreateInput;
+
+/** 列表接口可能带 pageIndex/pageSize/totalPages（与 PagedResultDto 并存） */
+export type ProductCategoryPagedResult = PagedResultDto<ProductCategoryDto> & {
+  pageIndex?: number;
+  pageSize?: number;
+  totalPages?: number;
+};
-# 美国版 App 登录接口说明
-
-## 概述
-
-美国版移动端认证由 `food-labeling-us` 模块的 **`UsAppAuthAppService`** 提供，采用 ABP 约定式动态 API。宿主统一前缀为 **`/api/app`**，建议以 Swagger 为准核对路径（本地示例：`http://localhost:19001/swagger`，搜索 `UsAppAuth`）。
-
-| 说明 | 内容 |
-|------|------|
-| 账号标识 | 使用 **`User.Email`**（邮箱）登录，邮箱比对**忽略大小写** |
-| 密码 | 与 Web 共用 `User` 表，校验方式与 RBAC **`AccountManager`** 一致（盐值 + `MD5Helper.SHA2Encode`） |
-| 验证码 | 当配置 **`Rbac:EnableCaptcha`** 为 `true` 时，需先拉取图形验证码，本接口入参传 `uuid`、`code`；未开启时可传空或不传 |
-
----
-
-## 接口 1：App 登录
-
-签发 **Access Token**、**Refresh Token**，并返回当前用户在 **`userlocation`** 中绑定的门店列表（关联 **`location`** 表详情）。
-
-### HTTP
-
-- **方法**：`POST`
-- **路径**：`/api/app/us-app-auth/login`
-- **Content-Type**：`application/json`
-- **鉴权**：无需登录（匿名）
-
-### 请求体参数（UsAppLoginInputVo）
-
-| 参数名（JSON） | 类型 | 必填 | 说明 |
-|----------------|------|------|------|
-| `email` | string | 是 | 登录邮箱，对应数据库 `User.Email` |
-| `password` | string | 是 | 明文密码 |
-| `uuid` | string | 条件 | 图形验证码 UUID；**开启验证码时必填** |
-| `code` | string | 条件 | 图形验证码；**开启验证码时必填** |
-
-### 传参示例（请求 Body）
-
-未开启图形验证码时：
-
-```json
-{
-  "email": "admin@example.com",
-  "password": "123456"
-}
-```
-
-开启图形验证码时（需与系统验证码接口返回的 `uuid`、用户输入的验证码一致）：
-
-```json
-{
-  "email": "test@example.com",
-  "password": "您的密码",
-  "uuid": "验证码接口返回的 uuid",
-  "code": "用户看到的验证码"
-}
-```
-
-### 响应体（UsAppLoginOutputDto）
-
-| 字段（JSON） | 类型 | 说明 |
-|--------------|------|------|
-| `token` | string | 访问令牌（Bearer），后续业务接口放在 Header `Authorization: Bearer {token}` |
-| `refreshToken` | string | 刷新令牌（与系统账号体系一致，用于刷新 access token，具体用法与 Web 一致） |
-| `locations` | array | 绑定门店列表，元素见下表 |
-
-#### `locations[]` 元素（UsAppBoundLocationDto）
-
-| 字段（JSON） | 类型 | 说明 |
-|--------------|------|------|
-| `id` | string | 门店主键（Guid 字符串） |
-| `locationCode` | string | 业务编码，如 LOC-1 |
-| `locationName` | string | 门店名称 |
-| `fullAddress` | string | 拼接后的完整地址（街道、城市、州、邮编等；无数据时可能为 `"无"`） |
-| `state` | bool | 门店是否启用 |
-
-### 响应示例
-
-```json
-{
-  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
-  "refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
-  "locations": [
-    {
-      "id": "a2696b9e-2277-11f1-b4c6-00163e0c7c4f",
-      "locationCode": "LOC-1",
-      "locationName": "Downtown Kitchen",
-      "fullAddress": "123 Main St, New York, NY 10001",
-      "state": true
-    }
-  ]
-}
-```
-
-### 常见错误提示（业务异常文案）
-
-- 邮箱或密码为空：`请输入合理数据！`
-- 邮箱在库中不存在（未删除且启用用户中无匹配邮箱）：`登录失败！邮箱不存在！`
-- 密码错误：`登录失败！用户名或密码错误！`（与 `UserConst.Login_Error` 一致）
-- 验证码错误（开启验证码时）：`验证码错误`
-
----
-
-## 接口 2：获取当前账号绑定门店
-
-无需重新登录即可刷新 **`userlocation`** 绑定门店列表（例如切换门店前先同步列表）。
-
-### HTTP
-
-- **方法**：`GET`
-- **路径**：`/api/app/us-app-auth/my-locations`
-- **鉴权**：需要登录，请求头携带 **`Authorization: Bearer {token}`**（使用接口 1 返回的 `token`）
-
-### 请求参数
-
-无 Query / Body 参数；用户身份由 JWT 解析。
-
-### 传参示例
-
-```http
-GET /api/app/us-app-auth/my-locations HTTP/1.1
-Host: localhost:19001
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
-```
-
-若前端统一约定 GET 使用 `data` 封装，可自行在客户端组装；本接口服务端**不读取额外 Query 参数**。
-
-### 响应体
-
-与登录接口中 **`locations`** 相同：**`UsAppBoundLocationDto[]`**（数组）。
-
-### 响应示例
-
-```json
-[
-  {
-    "id": "a2696b9e-2277-11f1-b4c6-00163e0c7c4f",
-    "locationCode": "LOC-1",
-    "locationName": "Downtown Kitchen",
-    "fullAddress": "123 Main St, New York, NY 10001",
-    "state": true
-  }
-]
-```
-
-### 常见错误
-
-- 未登录或 Token 无效：按网关/ABP 返回 401 及统一错误体
-- 无用户上下文：`用户未登录`
-
----
-
-## 与其他登录方式的区别
-
-| 场景 | 说明 |
-|------|------|
-| Web 管理端 | 仍使用 RBAC **`AccountService.PostLoginAsync`**，一般为人 **`userName`** + 密码 |
-| 美国版 App | **仅**本模块 **`/api/app/us-app-auth/login`** 使用 **邮箱 + 密码** |
-
-两者共用同一 `User` 表与 JWT 体系；App 端需保证账号已维护 **`Email`** 字段，否则无法通过邮箱登录。