# TikTok Shop - Tính năng

## Tổng quan

AutoShopee Kit tích hợp TikTok Shop với các tính năng chính:
- **Clone sản phẩm** từ TikTok sang Shopee (qua Seller API)
- **Upload sản phẩm** từ Shopee sang TikTok Shop (qua AutoShopee API)
- **Spy/Phân tích thị trường** theo danh mục TikTok
- **Content script** inject vào trang TikTok Shop

## Clone sản phẩm (TikTok -> Shopee)

### Luồng hoạt động

```
TikTok Product Page
       │
       ▼
getTiktokProductId()        ← Lấy dữ liệu sản phẩm từ TikTok PDP API
       │
       ▼
TiktokProductMirgateShopee  ← Adapter chuyển đổi dữ liệu TikTok → format Shopee
       │
       ▼
shopeeSellerCreateProduct() ← Tạo sản phẩm trên Shopee Seller
```

### View: `src/app/views/Tiktok/Product/Clone.vue`

Nhận `productId` từ route params, render component `ProductClone`.

### Component: `src/app/components/Tiktok/Product/Clone/Index.vue`

Giao diện clone sản phẩm bao gồm:

| Thành phần | Mô tả |
|---|---|
| **Tên sản phẩm** | Input chỉnh sửa tên sản phẩm TikTok |
| **SKU** | Mặc định là product ID từ TikTok |
| **Mô tả** | Textarea chỉnh sửa mô tả, parse từ `desc_detail` JSON |
| **Danh mục Shopee** | Select filterable, tự động mapping bằng Fuse.js fuzzy search |
| **Prepend/Append title** | Thêm tiền tố/hậu tố vào tên sản phẩm |
| **Prepend/Append description** | Thêm tiền tố/hậu tố vào mô tả |
| **Cân nặng** | Mặc định 10g |
| **Ngày hết hạn** | Mặc định 365 ngày |
| **Thay đổi giá** | Công thức điều chỉnh giá (ví dụ: +10%, -5000) |
| **Thay thế SĐT** | Thay thế số điện thoại trong mô tả |
| **Giá trước giảm** | Checkbox sử dụng giá trước giảm giá |
| **Xoay ảnh** | Checkbox spin ảnh sản phẩm |
| **Bỏ qua SKU trùng** | Checkbox kiểm tra SKU trùng trước khi clone (mặc định bật) |
| **Unlisted** | Checkbox đăng sản phẩm ở trạng thái ẩn |
| **GPT Writer** | Viết lại tên/mô tả bằng GPT (yêu cầu quota) |
| **Kho hàng** | Chọn warehouse Shopee (nếu có) |

### Mixin: `src/app/components/Tiktok/Product/Clone/mixin.js`

Logic chính của quá trình clone:

1. **Lấy dữ liệu sản phẩm**: `getTiktokProductId(productId)` gọi TikTok PDP API
2. **Render sản phẩm**: Parse `product_base.title`, `desc_detail`, `images`
3. **Tự động mapping danh mục**: Dùng `Fuse.js` fuzzy search để tìm danh mục Shopee tương ứng, threshold 0.4-0.5
4. **Lưu mapping danh mục**: Sử dụng PouchDB model `MappingProductCategory` để lưu và tái sử dụng mapping
5. **Clone sản phẩm**:
   - Kiểm tra SKU trùng qua `shopeeSellerSearchProductList`
   - Kiểm tra logistics đã bật
   - Migrate ảnh qua `MirgateProductShopee.mirgateImageList()`
   - Tạo payload qua `MirgateProductShopee.getPayload()`
   - GPT rewrite tên/mô tả (nếu bật)
   - Gọi `shopeeSellerCreateProduct()` với retry 3 lần
6. **Xử lý lỗi tự động**: Auto-retry khi gặp lỗi image invalid, hỏa tốc, size chart, brand, product duplicated, condition enum
7. **Ghi usage**: `UsageTiktok.insert()` và `usageStore.incTiktokCloneProduct()`

### Tải ảnh

- **Tải tất cả ảnh**: Zip tất cả ảnh (main + variation) thành file `.zip`
- **Xem ảnh**: Mở popup xem tất cả ảnh sản phẩm

## Upload sản phẩm (Shopee -> TikTok)

### Component: `src/app/components/Tiktok/Shopee/Upload.vue`

Giao diện upload sản phẩm từ Shopee sang TikTok Shop:

| Thành phần | Mô tả |
|---|---|
| **Chọn shop** | Select shop TikTok đã kết nối OAuth |
| **Chọn kho hàng** | Select warehouse của shop TikTok |
| **Lưu & Chỉnh sửa** | Lưu sản phẩm lên AutoShopee server để chỉnh sửa trước khi upload |
| **Upload trực tiếp** | Upload sản phẩm trực tiếp lên TikTok Shop (tốn score) |

### Mixin: `src/app/components/Tiktok/Shopee/mixin.js`

Luồng upload:

1. **Lấy sản phẩm Shopee**: Từ Vuex getter `getProductShopee`
2. **Refactor sản phẩm**: Chuẩn hóa giá, weight, dimension rồi gọi `importProduct()` (AutoShopee API)
3. **Lưu upload**: `saveUpload()` gửi dữ liệu lên server, mở trang chỉnh sửa trên web
4. **Upload trực tiếp**: `handlerUpload()` gọi API upload, mở trang sản phẩm trên TikTok Seller Center
5. **Score system**: Mỗi lần upload trực tiếp tốn 1 score, cần mua thêm nếu hết

### Quản lý shop TikTok

- Kết nối shop qua OAuth: `{appHost}/tiktok/shop/oauth`
- Lấy danh sách shop: Vuex action `TiktokGetListShop`
- Chọn shop: Vuex action `TiktokSelectShop`
- Lấy kho hàng: Vuex action `TiktokGetListWarehouse`

## Spy/Phân tích thị trường TikTok

### View: `src/app/views/Tiktok/Spy/Market.vue`

Trang chính hiển thị cây danh mục TikTok, cho phép duyệt và chọn danh mục để phân tích.

### View: `src/app/views/Tiktok/Spy/Category.vue`

Trang phân tích sản phẩm theo danh mục. Yêu cầu gói trả phí (`wrap-require-paid`).

Lấy thông tin danh mục từ `getTiktokCategoryHome()` và hiển thị component `CategorySearch`.

### Component: Cây danh mục

Có 2 phiên bản cây danh mục:

**`Tree.vue`** - Dùng dữ liệu seller categories (`getTiktokCategorySeller()`):
- Flat data, build tree theo `parent_id`
- Slug hóa tên danh mục bằng `slugify`
- Tìm kiếm real-time, highlight kết quả khớp (màu cam, font bold)
- Link đến trang TikTok Shop: `https://shop-vn.tiktok.com/c/{slug}/{id}`
- Link spy nội bộ: `/tiktok/spy/category/{id}`

**`TreeHome.vue`** - Dùng dữ liệu client categories (`getTiktokCategoryList()`):
- Dữ liệu dạng nested tree sẵn, convert qua `convertNode()`
- Cùng chức năng tìm kiếm và hiển thị như `Tree.vue`

### Component: `src/app/components/Tiktok/Spy/Search/Category.vue`

Phân tích sản phẩm trong danh mục:

**Thống kê tổng quan (header):**
- Tổng sản phẩm
- Tổng danh mục con
- Tổng thương hiệu
- Tổng đã bán
- Tổng doanh thu
- Tổng follower

**Bảng sản phẩm:**
- Tên sản phẩm (có link video nếu có)
- Ảnh sản phẩm
- Danh mục
- Thương hiệu
- Ngày tạo
- Giá, giảm giá
- Tồn kho
- Đã bán
- Doanh thu
- Nút spy chi tiết

**Phân tích Top Sell (Modal):**
- Theo thời gian (năm)
- Theo khoảng giá (dưới 10k, 10k-100k, 100k-200k, 200k-300k, 300k-500k, 500k-1tr, trên 1tr)
- Theo thương hiệu
- Theo danh mục con

**Chức năng khác:**
- Export Excel danh sách sản phẩm
- Export Excel báo cáo phân tích
- Copy URL sản phẩm đã chọn
- Phân trang với nhiều tùy chọn kích thước (10-10000)

### Mixin bảng: `src/app/components/Tiktok/Spy/mixin/Table.js`

Định nghĩa cấu trúc bảng và hàm `renderTableProduct()` để chuyển đổi dữ liệu sản phẩm thô thành dữ liệu hiển thị. Tính toán giá, doanh thu, phân loại danh mục, format ngày tháng.

## API TikTok

### Client API (`src/app/api/tiktok/client/`)

**`init.js`** - Khởi tạo Axios instance:
- Base URL: `configTiktokApi.shop` (TikTok Shop domain)
- Timeout: 10 giây
- Sử dụng `fetch-adapter` cho Chrome MV3

**`product.js`** - API sản phẩm:
- `getTiktokProductId(productId)`: Lấy chi tiết sản phẩm TikTok qua PDP endpoint
- Có cache bằng `CacheTiktokProductId`

**`category.js`** - API danh mục:
- `getTiktokCategoryHome()`: Danh mục trang chủ (từ JSON tĩnh)
- `getTiktokCategoryList()`: Danh sách danh mục đầy đủ (từ JSON tĩnh)
- `getTiktokCategorySeller()`: Danh mục seller (từ JSON tĩnh)
- `tiktokSearchListProductCategoryId(categoryId, productIdSkip)`: Tìm sản phẩm theo danh mục, hỗ trợ pagination qua exclude IDs, có cache

### Seller API (`src/app/api/tiktok/seller/`)

**`init.js`** - Khởi tạo Axios instance cho TikTok Seller Center:
- Base URL: `TIKTOK_DOMAIN_SELLER`
- Sử dụng `fetch-adapter`

**`get.js`** - API seller:
- `getTiktokSellerInfo()`: Lấy thông tin seller từ `/api/v1/seller/common/get`

## Content Script TikTok

### `src/content/tiktok/loader.js`

File content script hiện tại chưa có logic xử lý (placeholder). Content script được inject vào các trang TikTok Shop theo cấu hình manifest.

## Dữ liệu tĩnh

Danh mục TikTok được lưu dưới dạng JSON tĩnh:
- `src/app/data/tiktok/category/tree.json` - Cây danh mục trang chủ
- `src/app/data/tiktok/category/list.json` - Danh sách danh mục
- `src/app/data/tiktok/category/seller.json` - Danh mục seller

## Cấu trúc file

```
src/app/
├── views/Tiktok/
│   ├── Product/Clone.vue          # Trang clone sản phẩm TikTok → Shopee
│   └── Spy/
│       ├── Market.vue             # Trang chính spy thị trường
│       └── Category.vue           # Trang phân tích danh mục
├── components/Tiktok/
│   ├── Product/Clone/
│   │   ├── Index.vue              # UI clone sản phẩm
│   │   └── mixin.js               # Logic clone sản phẩm
│   ├── Shopee/
│   │   ├── Upload.vue             # UI upload Shopee → TikTok
│   │   └── mixin.js               # Logic upload sản phẩm
│   └── Spy/
│       ├── Category/
│       │   ├── Tree.vue           # Cây danh mục seller
│       │   └── TreeHome.vue       # Cây danh mục client
│       ├── Search/
│       │   └── Category.vue       # Phân tích sản phẩm theo danh mục
│       └── mixin/
│           └── Table.js           # Cấu trúc bảng dữ liệu spy
├── api/tiktok/
│   ├── client/
│   │   ├── init.js                # Axios instance TikTok client
│   │   ├── product.js             # API sản phẩm
│   │   └── category.js            # API danh mục
│   └── seller/
│       ├── init.js                # Axios instance TikTok seller
│       └── get.js                 # API thông tin seller
└── adapter/tiktok/
    └── product.js                 # Adapter chuyển đổi TikTok → Shopee
```
