feat(admin): redesign GoodsView with dual-tree UX, filter bar, inline CRUD

- Two-line good nodes with country + tag chips, hover tooltip
- Resizable dual-tree with fixed-height panels (no node overlap)
- Filter bar: search, country filter, tag filter (multi-select with rename)
- Mode switch (品类/国家) pushed to right via spacer
- Inline create country/tag in edit & config modals via quick-create buttons
- Right tree node height auto-fix for locate highlight
- Filter dropdown styles in global scope for teleported popper
- Backend: multi-tag (GoodTag junction), goodImage column, origin goods tree API
- Admin response interceptor unwraps {data, success} envelope
- Simplified sidebar to single 商品管理 entry with tabs
- SyncView simplified to product sync only
This commit is contained in:
yeuimu
2026-06-22 01:47:20 +08:00
parent c3472a449b
commit a903dd4903
30 changed files with 1970 additions and 1209 deletions
@@ -0,0 +1,92 @@
# Goods Management Redesign
## Date: 2026-06-21
## Problem
1. **Origin Good name not displayed**: GoodsView doesn't show the origin product name/image/price
2. **Single tag per good**: Current schema only allows one tag per good via `goods.tag_id` FK
3. **Easy to miss unconfigured origin products**: Flat paginated table with no visibility into which origin products have been configured vs not
## Solution
### 1. Multi-Tag Support (GoodTag Junction Table)
**Schema change:**
- New `good_tags` junction table: `(good_id, tag_id)` composite PK
- Migrate existing `goods.tag_id` data into `good_tags`
- Set `goods.tag_id` to nullable (will be dropped in a future migration)
**Backend:**
- `CreateGoodDto`: `tagIds: number[]` (replaces `tagId`)
- `UpdateGoodDto`: `tagIds?: number[]` (replaces `tagId`)
- `BatchCreateGoodDto`: `tagIds?: number[]` (replaces `tagId`)
- `QueryGoodDto`: `tagId` filter queries `tags.some` instead of direct FK
- `GoodsService.create/update`: manage `good_tags` records in transaction
- `GOOD_INCLUDE`: include `tags: { include: { tag: true } }`
### 2. Origin Goods Tree API
New endpoint: `GET /origin-goods/tree`
Returns origin goods grouped by SDS category, with configuration status:
```json
[
{
"sdsCategoryId": "4185",
"categoryName": "(包邮)180g纯棉T恤-单面印花",
"originGoods": [
{
"id": "123",
"goodName": "产品A",
"goodImage": "https://...",
"goodPrice": "12.50",
"sdsGoodId": "p-123",
"configuredCount": 2,
"configuredCountries": ["美国", "英国"]
}
]
}
]
```
Origin goods without `sdsCategoryId` are grouped under "未分类".
### 3. Admin UI: Dual Tree Layout
```
┌──────────────────────────────────────────────────────────┐
│ [搜索原产品] [210/439 已配置] │
├───────────────────┬─────────────────────────────────────┤
│ 首页分类树 │ 原产品分类树 │
│ │ │
│ ▼ 美国 │ ▼ (包邮)180g纯棉T恤 │
│ ▼ T恤 │ ✓ 产品A [美国,英国] │
│ ▼ 卫衣 │ ✗ 产品B [未配置] │
│ ▼ 英国 │ ▼ 未分类 │
│ ▼ 韩国 │ ✗ 产品C [未配置] │
├───────────────────┴─────────────────────────────────────┤
│ 详情/操作区域 │
│ - 选左侧分类: 该分类下所有 goods 表格 │
│ - 选右侧原产品: 该原产品的配置详情 + 快捷配置按钮 │
│ - 多标签选择 (el-select multiple) │
└──────────────────────────────────────────────────────────┘
```
**Key interactions:**
- Left tree click: filter goods by selected category
- Right tree click: show origin good detail + all its goods configs
- Right tree badges: ✓ configured / ✗ unconfigured
- Quick configure: select country+category+tags, click origin goods to batch create
- Statistics bar: configured/total count
### 4. Data Migration
```sql
-- Step 1: Create good_tags table
-- Step 2: Copy existing tag_id data
INSERT INTO good_tags (good_id, tag_id, created_at)
SELECT good_id, tag_id, NOW() FROM goods WHERE tag_id IS NOT NULL;
-- Step 3: Good.tag_id becomes nullable (already nullable)
```