feat(deploy): production deployment setup and fixes

- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma
  binaryTargets for openssl 3.0
- nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal
  cron, http->https redirect
- prisma: add origin_goods.delisted migration, sync missing schema
  (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz
- api: CORS wildcard reflection, helmet CORP cross-origin, price
  backfill in persistProductDetail, categoryIcon ancestor fallback,
  mediaByColor per-color gallery in public goods detail
- admin: /admin base path (vite + router)
- import-data.mjs: udt_name casting, serial sequence advance fix

apps/admin/src/App.vue

@@ -1,14 +1,14 @@
-<script setup lang="ts">
-// Root component renders router-managed views.
-</script>
-
-<template>
-  <router-view />
-</template>
-
-<style>
-#app {
-  width: 100%;
-  height: 100%;
-}
-</style>
+<script setup lang="ts">
+// Root component renders router-managed views.
+</script>
+
+<template>
+  <router-view />
+</template>
+
+<style>
+#app {
+  width: 100%;
+  height: 100%;
+}
+</style>

apps/admin/src/api/auth.ts

@@ -1,19 +1,19 @@
-import request from './request'
-import type { LoginRequest, LoginResponse, User } from '@/types'
-
-export const authApi = {
-  // Login
-  login: (data: LoginRequest) => {
-    return request.post<any, LoginResponse>('/auth/login', data)
-  },
-
-  // Get current user
-  getCurrentUser: () => {
-    return request.get<any, User>('/auth/me')
-  },
-
-  // Logout
-  logout: () => {
-    return request.post('/auth/logout')
-  },
+import request from './request'
+import type { LoginRequest, LoginResponse, User } from '@/types'
+
+export const authApi = {
+  // Login
+  login: (data: LoginRequest) => {
+    return request.post<any, LoginResponse>('/auth/login', data)
+  },
+
+  // Get current user
+  getCurrentUser: () => {
+    return request.get<any, User>('/auth/me')
+  },
+
+  // Logout
+  logout: () => {
+    return request.post('/auth/logout')
+  },
 }

apps/admin/src/api/categories.ts

@@ -1,41 +1,41 @@
-import request from './request'
-import type {
-  Category,
-  CategoryTree,
-  CreateCategoryRequest,
-  UpdateCategoryRequest,
-  CategoryFilter,
-  PaginatedResult,
-} from '@/types'
-
-export const categoriesApi = {
-  // Get categories list
-  getCategoriesList: (params: CategoryFilter) => {
-    return request.get<any, PaginatedResult<Category>>('/categories', { params })
-  },
-
-  // Get category tree
-  getCategoryTree: () => {
-    return request.get<any, CategoryTree[]>('/categories')
-  },
-
-  // Get category by id
-  getCategoryById: (id: string) => {
-    return request.get<any, Category>(`/categories/${id}`)
-  },
-
-  // Create category
-  createCategory: (data: CreateCategoryRequest) => {
-    return request.post<any, Category>('/categories', data)
-  },
-
-  // Update category
-  updateCategory: (id: string, data: UpdateCategoryRequest) => {
-    return request.patch<any, Category>(`/categories/${id}`, data)
-  },
-
-  // Delete category
-  deleteCategory: (id: string) => {
-    return request.delete(`/categories/${id}`)
-  },
+import request from './request'
+import type {
+  Category,
+  CategoryTree,
+  CreateCategoryRequest,
+  UpdateCategoryRequest,
+  CategoryFilter,
+  PaginatedResult,
+} from '@/types'
+
+export const categoriesApi = {
+  // Get categories list
+  getCategoriesList: (params: CategoryFilter) => {
+    return request.get<any, PaginatedResult<Category>>('/categories', { params })
+  },
+
+  // Get category tree
+  getCategoryTree: () => {
+    return request.get<any, CategoryTree[]>('/categories')
+  },
+
+  // Get category by id
+  getCategoryById: (id: string) => {
+    return request.get<any, Category>(`/categories/${id}`)
+  },
+
+  // Create category
+  createCategory: (data: CreateCategoryRequest) => {
+    return request.post<any, Category>('/categories', data)
+  },
+
+  // Update category
+  updateCategory: (id: string, data: UpdateCategoryRequest) => {
+    return request.patch<any, Category>(`/categories/${id}`, data)
+  },
+
+  // Delete category
+  deleteCategory: (id: string) => {
+    return request.delete(`/categories/${id}`)
+  },
 }

apps/admin/src/api/countries.ts

@@ -1,35 +1,35 @@
-import request from './request'
-import type {
-  Country,
-  CreateCountryRequest,
-  UpdateCountryRequest,
-  CountryFilter,
-  PaginatedResult,
-} from '@/types'
-
-export const countriesApi = {
-  // Get countries list
-  getCountriesList: (params: CountryFilter) => {
-    return request.get<any, PaginatedResult<Country>>('/countries', { params })
-  },
-
-  // Get country by id
-  getCountryById: (id: string) => {
-    return request.get<any, Country>(`/countries/${id}`)
-  },
-
-  // Create country
-  createCountry: (data: CreateCountryRequest) => {
-    return request.post<any, Country>('/countries', data)
-  },
-
-  // Update country
-  updateCountry: (id: string, data: UpdateCountryRequest) => {
-    return request.patch<any, Country>(`/countries/${id}`, data)
-  },
-
-  // Delete country
-  deleteCountry: (id: string) => {
-    return request.delete(`/countries/${id}`)
-  },
+import request from './request'
+import type {
+  Country,
+  CreateCountryRequest,
+  UpdateCountryRequest,
+  CountryFilter,
+  PaginatedResult,
+} from '@/types'
+
+export const countriesApi = {
+  // Get countries list
+  getCountriesList: (params: CountryFilter) => {
+    return request.get<any, PaginatedResult<Country>>('/countries', { params })
+  },
+
+  // Get country by id
+  getCountryById: (id: string) => {
+    return request.get<any, Country>(`/countries/${id}`)
+  },
+
+  // Create country
+  createCountry: (data: CreateCountryRequest) => {
+    return request.post<any, Country>('/countries', data)
+  },
+
+  // Update country
+  updateCountry: (id: string, data: UpdateCountryRequest) => {
+    return request.patch<any, Country>(`/countries/${id}`, data)
+  },
+
+  // Delete country
+  deleteCountry: (id: string) => {
+    return request.delete(`/countries/${id}`)
+  },
 }

apps/admin/src/api/goods.ts

@@ -1,29 +1,29 @@
-import request from './request'
-import type {
+import request from './request'
+import type {
   Good,
   GoodDetail,
-  CreateGoodRequest,
-  UpdateGoodRequest,
-  BatchCreateGoodsRequest,
-  BatchPriorityRequest,
+  CreateGoodRequest,
+  UpdateGoodRequest,
+  BatchCreateGoodsRequest,
+  BatchPriorityRequest,
   GoodsFilter,
   PaginatedResult,
   CreateCustomGoodRequest,
   UpdateCustomGoodContentRequest,
-} from '@/types'
-
-export const goodsApi = {
-  // Get goods list
-  getGoodsList: (params: GoodsFilter) => {
-    return request.get<any, PaginatedResult<Good>>('/goods', { params })
-  },
-
-  // Get good by id
-  getGoodById: (id: string) => {
+} from '@/types'
+
+export const goodsApi = {
+  // Get goods list
+  getGoodsList: (params: GoodsFilter) => {
+    return request.get<any, PaginatedResult<Good>>('/goods', { params })
+  },
+
+  // Get good by id
+  getGoodById: (id: string) => {
     return request.get<any, GoodDetail>(`/goods/${id}`)
-  },
-
-  // Create good
+  },
+
+  // Create good
   createGood: (data: CreateGoodRequest) => {
     return request.post<any, Good>('/goods', data)
   },
@@ -35,24 +35,24 @@ export const goodsApi = {
   updateCustomGoodContent: (id: string, data: UpdateCustomGoodContentRequest) => {
     return request.patch<any, GoodDetail>(`/goods/${id}/custom-content`, data)
   },
-
-  // Update good
-  updateGood: (id: string, data: UpdateGoodRequest) => {
-    return request.patch<any, Good>(`/goods/${id}`, data)
-  },
-
-  // Delete good
-  deleteGood: (id: string) => {
-    return request.delete(`/goods/${id}`)
-  },
-
-  // Batch create goods
-  batchCreateGoods: (data: BatchCreateGoodsRequest) => {
-    return request.post<any, Good[]>('/goods/batch', data)
-  },
-
-  // Batch update priority
-  batchUpdatePriority: (data: BatchPriorityRequest) => {
-    return request.patch<any, { count: number }>('/goods/batch-priority', data)
-  },
+
+  // Update good
+  updateGood: (id: string, data: UpdateGoodRequest) => {
+    return request.patch<any, Good>(`/goods/${id}`, data)
+  },
+
+  // Delete good
+  deleteGood: (id: string) => {
+    return request.delete(`/goods/${id}`)
+  },
+
+  // Batch create goods
+  batchCreateGoods: (data: BatchCreateGoodsRequest) => {
+    return request.post<any, Good[]>('/goods/batch', data)
+  },
+
+  // Batch update priority
+  batchUpdatePriority: (data: BatchPriorityRequest) => {
+    return request.patch<any, { count: number }>('/goods/batch-priority', data)
+  },
 }

apps/admin/src/api/origin-goods.ts

@@ -1,12 +1,12 @@
-import request from './request'
-import type { OriginGood, OriginGoodsTreeResponse, PaginatedResult } from '@/types'
-
-export const originGoodsApi = {
-  getTree: () => {
-    return request.get<any, OriginGoodsTreeResponse>('/origin-goods/tree')
-  },
-
-  getOriginGoodsList: (params: { page?: number; pageSize?: number; keyword?: string }) => {
-    return request.get<any, PaginatedResult<OriginGood>>('/origin-goods', { params })
-  },
-}
+import request from './request'
+import type { OriginGood, OriginGoodsTreeResponse, PaginatedResult } from '@/types'
+
+export const originGoodsApi = {
+  getTree: () => {
+    return request.get<any, OriginGoodsTreeResponse>('/origin-goods/tree')
+  },
+
+  getOriginGoodsList: (params: { page?: number; pageSize?: number; keyword?: string }) => {
+    return request.get<any, PaginatedResult<OriginGood>>('/origin-goods', { params })
+  },
+}

apps/admin/src/api/positions.ts

@@ -1,35 +1,35 @@
-import request from './request'
-import type {
-  Position,
-  CreatePositionRequest,
-  UpdatePositionRequest,
-  PositionFilter,
-  PaginatedResult,
-} from '@/types'
-
-export const positionsApi = {
-  // Get positions list
-  getPositionsList: (params: PositionFilter) => {
-    return request.get<any, PaginatedResult<Position>>('/positions', { params })
-  },
-
-  // Get position by id
-  getPositionById: (id: string) => {
-    return request.get<any, Position>(`/positions/${id}`)
-  },
-
-  // Create position
-  createPosition: (data: CreatePositionRequest) => {
-    return request.post<any, Position>('/positions', data)
-  },
-
-  // Update position
-  updatePosition: (id: string, data: UpdatePositionRequest) => {
-    return request.patch<any, Position>(`/positions/${id}`, data)
-  },
-
-  // Delete position
-  deletePosition: (id: string) => {
-    return request.delete(`/positions/${id}`)
-  },
+import request from './request'
+import type {
+  Position,
+  CreatePositionRequest,
+  UpdatePositionRequest,
+  PositionFilter,
+  PaginatedResult,
+} from '@/types'
+
+export const positionsApi = {
+  // Get positions list
+  getPositionsList: (params: PositionFilter) => {
+    return request.get<any, PaginatedResult<Position>>('/positions', { params })
+  },
+
+  // Get position by id
+  getPositionById: (id: string) => {
+    return request.get<any, Position>(`/positions/${id}`)
+  },
+
+  // Create position
+  createPosition: (data: CreatePositionRequest) => {
+    return request.post<any, Position>('/positions', data)
+  },
+
+  // Update position
+  updatePosition: (id: string, data: UpdatePositionRequest) => {
+    return request.patch<any, Position>(`/positions/${id}`, data)
+  },
+
+  // Delete position
+  deletePosition: (id: string) => {
+    return request.delete(`/positions/${id}`)
+  },
 }

apps/admin/src/api/request.ts

@@ -1,81 +1,81 @@
-import axios from 'axios'
-import type { AxiosInstance, AxiosResponse, AxiosError, InternalAxiosRequestConfig } from 'axios'
-import { ElMessage } from 'element-plus'
-import router from '@/router'
-
-const request: AxiosInstance = axios.create({
-  baseURL: import.meta.env.VITE_API_BASE || '/api',
-  timeout: 30000,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-  // Session tokens live in HttpOnly cookies — send them along.
-  withCredentials: true,
-})
-
-// Response interceptor
-request.interceptors.response.use(
-  (response: AxiosResponse) => {
-    // Backend wraps everything in { data, success } — unwrap to data
-    const body = response.data
-    if (body && typeof body === 'object' && 'success' in body && 'data' in body) {
-      return body.data
-    }
-    return body
-  },
-  async (error: AxiosError) => {
-    // Access token expired: try the refresh cookie once, then retry the
-    // original request. A second 401 (refresh failed) logs the user out.
-    const config = error.config as (InternalAxiosRequestConfig & { _retried?: boolean }) | undefined
-    if (
-      error.response?.status === 401 &&
-      config &&
-      !config._retried &&
-      !config.url?.includes('/auth/login') &&
-      !config.url?.includes('/auth/refresh')
-    ) {
-      config._retried = true
-      try {
-        await axios.post(
-          `${import.meta.env.VITE_API_BASE || '/api'}/auth/refresh`,
-          {},
-          { withCredentials: true },
-        )
-        return request.request(config)
-      } catch {
-        // fall through to the 401 handling below
-      }
-    }
-
-    if (error.response) {
-      const { status, data } = error.response
-
-      switch (status) {
-        case 401:
-          ElMessage.error('Unauthorized, please login')
-          router.push('/login')
-          break
-        case 403:
-          ElMessage.error('Forbidden')
-          break
-        case 404:
-          ElMessage.error('Resource not found')
-          break
-        case 500:
-          ElMessage.error('Server error')
-          break
-        default:
-          const errorMessage = (data as any)?.message || 'Request failed'
-          ElMessage.error(errorMessage)
-      }
-    } else if (error.request) {
-      ElMessage.error('Network error')
-    } else {
-      ElMessage.error('Request failed')
-    }
-
-    return Promise.reject(error)
-  }
-)
-
-export default request
+import axios from 'axios'
+import type { AxiosInstance, AxiosResponse, AxiosError, InternalAxiosRequestConfig } from 'axios'
+import { ElMessage } from 'element-plus'
+import router from '@/router'
+
+const request: AxiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE || '/api',
+  timeout: 30000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  // Session tokens live in HttpOnly cookies — send them along.
+  withCredentials: true,
+})
+
+// Response interceptor
+request.interceptors.response.use(
+  (response: AxiosResponse) => {
+    // Backend wraps everything in { data, success } — unwrap to data
+    const body = response.data
+    if (body && typeof body === 'object' && 'success' in body && 'data' in body) {
+      return body.data
+    }
+    return body
+  },
+  async (error: AxiosError) => {
+    // Access token expired: try the refresh cookie once, then retry the
+    // original request. A second 401 (refresh failed) logs the user out.
+    const config = error.config as (InternalAxiosRequestConfig & { _retried?: boolean }) | undefined
+    if (
+      error.response?.status === 401 &&
+      config &&
+      !config._retried &&
+      !config.url?.includes('/auth/login') &&
+      !config.url?.includes('/auth/refresh')
+    ) {
+      config._retried = true
+      try {
+        await axios.post(
+          `${import.meta.env.VITE_API_BASE || '/api'}/auth/refresh`,
+          {},
+          { withCredentials: true },
+        )
+        return request.request(config)
+      } catch {
+        // fall through to the 401 handling below
+      }
+    }
+
+    if (error.response) {
+      const { status, data } = error.response
+
+      switch (status) {
+        case 401:
+          ElMessage.error('Unauthorized, please login')
+          router.push('/login')
+          break
+        case 403:
+          ElMessage.error('Forbidden')
+          break
+        case 404:
+          ElMessage.error('Resource not found')
+          break
+        case 500:
+          ElMessage.error('Server error')
+          break
+        default:
+          const errorMessage = (data as any)?.message || 'Request failed'
+          ElMessage.error(errorMessage)
+      }
+    } else if (error.request) {
+      ElMessage.error('Network error')
+    } else {
+      ElMessage.error('Request failed')
+    }
+
+    return Promise.reject(error)
+  }
+)
+
+export default request

apps/admin/src/api/sync.ts

@@ -1,13 +1,13 @@
-import request from './request'
-import type { SyncLog } from '@/types'
-
-export const syncApi = {
-  syncProducts: () => {
-    return request.post<any, { message: string }>('/sync/products')
-  },
-
+import request from './request'
+import type { SyncLog } from '@/types'
+
+export const syncApi = {
+  syncProducts: () => {
+    return request.post<any, { message: string }>('/sync/products')
+  },
+
   syncCategories: () => {
-    return request.post<any, { message: string }>('/sync/categories')
+    return request.post<any, { message: string }>('/sync/categories')
   },
 
   syncProductDetails: () => {
@@ -19,10 +19,10 @@ export const syncApi = {
       `/sync/products/${goodId}/detail`,
     )
   },
-
-  getSyncStatus: (limit?: number) => {
-    return request.get<any, SyncLog[]>('/sync/status', {
-      params: limit ? { limit } : undefined,
-    })
-  },
-}
+
+  getSyncStatus: (limit?: number) => {
+    return request.get<any, SyncLog[]>('/sync/status', {
+      params: limit ? { limit } : undefined,
+    })
+  },
+}

apps/admin/src/api/tag-groups.ts

@@ -1,33 +1,33 @@
-import request from './request'
-import type {
-  TagGroup,
-  CreateTagGroupRequest,
-  UpdateTagGroupRequest,
-  ReorderTagGroupsRequest,
-} from '@/types'
-
-export const tagGroupsApi = {
-  getTagGroupsList: () => {
-    return request.get<any, TagGroup[]>('/tag-groups')
-  },
-
-  getTagGroupById: (id: string) => {
-    return request.get<any, TagGroup>(`/tag-groups/${id}`)
-  },
-
-  createTagGroup: (data: CreateTagGroupRequest) => {
-    return request.post<any, TagGroup>('/tag-groups', data)
-  },
-
-  updateTagGroup: (id: string, data: UpdateTagGroupRequest) => {
-    return request.patch<any, TagGroup>(`/tag-groups/${id}`, data)
-  },
-
-  deleteTagGroup: (id: string) => {
-    return request.delete(`/tag-groups/${id}`)
-  },
-
-  reorderTagGroups: (data: ReorderTagGroupsRequest) => {
-    return request.patch('/tag-groups/sort', data)
-  },
-}
+import request from './request'
+import type {
+  TagGroup,
+  CreateTagGroupRequest,
+  UpdateTagGroupRequest,
+  ReorderTagGroupsRequest,
+} from '@/types'
+
+export const tagGroupsApi = {
+  getTagGroupsList: () => {
+    return request.get<any, TagGroup[]>('/tag-groups')
+  },
+
+  getTagGroupById: (id: string) => {
+    return request.get<any, TagGroup>(`/tag-groups/${id}`)
+  },
+
+  createTagGroup: (data: CreateTagGroupRequest) => {
+    return request.post<any, TagGroup>('/tag-groups', data)
+  },
+
+  updateTagGroup: (id: string, data: UpdateTagGroupRequest) => {
+    return request.patch<any, TagGroup>(`/tag-groups/${id}`, data)
+  },
+
+  deleteTagGroup: (id: string) => {
+    return request.delete(`/tag-groups/${id}`)
+  },
+
+  reorderTagGroups: (data: ReorderTagGroupsRequest) => {
+    return request.patch('/tag-groups/sort', data)
+  },
+}

apps/admin/src/api/tags.ts

@@ -1,41 +1,41 @@
-import request from './request'
-import type {
-  Tag,
-  CreateTagRequest,
-  UpdateTagRequest,
-  TagFilter,
-  ReorderTagsRequest,
-  PaginatedResult,
-} from '@/types'
-
-export const tagsApi = {
-  // Get tags list
-  getTagsList: (params: TagFilter) => {
-    return request.get<any, PaginatedResult<Tag>>('/tags', { params })
-  },
-
-  // Get tag by id
-  getTagById: (id: string) => {
-    return request.get<any, Tag>(`/tags/${id}`)
-  },
-
-  // Create tag
-  createTag: (data: CreateTagRequest) => {
-    return request.post<any, Tag>('/tags', data)
-  },
-
-  // Update tag
-  updateTag: (id: string, data: UpdateTagRequest) => {
-    return request.patch<any, Tag>(`/tags/${id}`, data)
-  },
-
-  // Delete tag
-  deleteTag: (id: string) => {
-    return request.delete(`/tags/${id}`)
-  },
-
-  // Reorder tags (and/or move across groups)
-  reorderTags: (data: ReorderTagsRequest) => {
-    return request.patch('/tags/sort', data)
-  },
+import request from './request'
+import type {
+  Tag,
+  CreateTagRequest,
+  UpdateTagRequest,
+  TagFilter,
+  ReorderTagsRequest,
+  PaginatedResult,
+} from '@/types'
+
+export const tagsApi = {
+  // Get tags list
+  getTagsList: (params: TagFilter) => {
+    return request.get<any, PaginatedResult<Tag>>('/tags', { params })
+  },
+
+  // Get tag by id
+  getTagById: (id: string) => {
+    return request.get<any, Tag>(`/tags/${id}`)
+  },
+
+  // Create tag
+  createTag: (data: CreateTagRequest) => {
+    return request.post<any, Tag>('/tags', data)
+  },
+
+  // Update tag
+  updateTag: (id: string, data: UpdateTagRequest) => {
+    return request.patch<any, Tag>(`/tags/${id}`, data)
+  },
+
+  // Delete tag
+  deleteTag: (id: string) => {
+    return request.delete(`/tags/${id}`)
+  },
+
+  // Reorder tags (and/or move across groups)
+  reorderTags: (data: ReorderTagsRequest) => {
+    return request.patch('/tags/sort', data)
+  },
 }

apps/admin/src/api/upload.ts

@@ -1,14 +1,14 @@
-import request from './request'
-
-export interface UploadResult {
-  url: string
-  filename: string
-}
-
-export const uploadApi = {
-  uploadImage: (file: File) => {
-    const formData = new FormData()
-    formData.append('file', file)
-    return request.post<any, UploadResult>('/upload/image', formData)
-  },
-}
+import request from './request'
+
+export interface UploadResult {
+  url: string
+  filename: string
+}
+
+export const uploadApi = {
+  uploadImage: (file: File) => {
+    const formData = new FormData()
+    formData.append('file', file)
+    return request.post<any, UploadResult>('/upload/image', formData)
+  },
+}

apps/admin/src/components/ImageUpload.vue

@@ -1,154 +1,154 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-import { Plus, Loading } from '@element-plus/icons-vue'
-import type { UploadProps } from 'element-plus'
-import { uploadApi } from '@/api/upload'
-
-const model = defineModel<string>({ default: '' })
-
-const props = withDefaults(defineProps<{
-  width?: number
-  height?: number
-  shape?: 'square' | 'circle'
-  label?: string
-}>(), {
-  width: 80,
-  height: 80,
-  shape: 'square',
-  label: '点击上传',
-})
-
-const uploading = ref(false)
-const previewVisible = ref(false)
-
-const customUpload: UploadProps['httpRequest'] = async (options) => {
-  const file = options.file as File
-  uploading.value = true
-  try {
-    const result = await uploadApi.uploadImage(file)
-    model.value = result.url
-  } catch (e: any) {
-    ElMessage.error(e?.response?.data?.message || '上传失败')
-  } finally {
-    uploading.value = false
-  }
-}
-
-function removeImage() {
-  model.value = ''
-}
-
-function onImgError() {
-  console.warn('Image failed to load:', model.value)
-}
-</script>
-
-<template>
-  <div class="img-upload">
-    <el-upload
-      class="img-uploader"
-      :show-file-list="false"
-      :http-request="customUpload"
-      accept="image/*"
-    >
-      <div v-if="model" class="img-preview-wrap" :style="{ width: width + 'px', height: height + 'px', borderRadius: shape === 'circle' ? '50%' : '8px' }">
-        <img :src="model" class="img-preview-img" @click.stop="previewVisible = true" @error="onImgError" />
-        <div class="img-overlay">
-          <span @click.stop="previewVisible = true">预览</span>
-          <span @click.stop="removeImage">删除</span>
-        </div>
-      </div>
-      <div v-else class="img-placeholder" :style="{ width: width + 'px', height: height + 'px', borderRadius: shape === 'circle' ? '50%' : '8px' }">
-        <el-icon v-if="!uploading" :size="20"><Plus /></el-icon>
-        <el-icon v-else :size="20" class="is-loading"><Loading /></el-icon>
-        <span class="img-placeholder-text">{{ uploading ? '上传中' : label }}</span>
-      </div>
-    </el-upload>
-
-    <el-image-viewer v-if="previewVisible" :url-list="[model]" @close="previewVisible = false" />
-  </div>
-</template>
-
-<style scoped>
-.img-upload {
-  display: inline-block;
-}
-
-.img-uploader {
-  display: inline-block;
-}
-
-.img-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  border: 1px dashed #d9d9d9;
-  background: #fafafa;
-  color: #a8abb2;
-  cursor: pointer;
-  transition: border-color 0.2s;
-  overflow: hidden;
-}
-
-.img-placeholder:hover {
-  border-color: var(--brand-color, #ff6800);
-  color: var(--brand-color, #ff6800);
-}
-
-.img-placeholder-text {
-  font-size: 12px;
-}
-
-.img-preview-wrap {
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-}
-
-.img-preview-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.img-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.img-preview-wrap:hover .img-overlay {
-  opacity: 1;
-}
-
-.img-overlay span {
-  color: #fff;
-  font-size: 13px;
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.15);
-}
-
-.img-overlay span:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.is-loading {
-  animation: rotating 1.5s linear infinite;
-}
-
-@keyframes rotating {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-</style>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus, Loading } from '@element-plus/icons-vue'
+import type { UploadProps } from 'element-plus'
+import { uploadApi } from '@/api/upload'
+
+const model = defineModel<string>({ default: '' })
+
+const props = withDefaults(defineProps<{
+  width?: number
+  height?: number
+  shape?: 'square' | 'circle'
+  label?: string
+}>(), {
+  width: 80,
+  height: 80,
+  shape: 'square',
+  label: '点击上传',
+})
+
+const uploading = ref(false)
+const previewVisible = ref(false)
+
+const customUpload: UploadProps['httpRequest'] = async (options) => {
+  const file = options.file as File
+  uploading.value = true
+  try {
+    const result = await uploadApi.uploadImage(file)
+    model.value = result.url
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || '上传失败')
+  } finally {
+    uploading.value = false
+  }
+}
+
+function removeImage() {
+  model.value = ''
+}
+
+function onImgError() {
+  console.warn('Image failed to load:', model.value)
+}
+</script>
+
+<template>
+  <div class="img-upload">
+    <el-upload
+      class="img-uploader"
+      :show-file-list="false"
+      :http-request="customUpload"
+      accept="image/*"
+    >
+      <div v-if="model" class="img-preview-wrap" :style="{ width: width + 'px', height: height + 'px', borderRadius: shape === 'circle' ? '50%' : '8px' }">
+        <img :src="model" class="img-preview-img" @click.stop="previewVisible = true" @error="onImgError" />
+        <div class="img-overlay">
+          <span @click.stop="previewVisible = true">预览</span>
+          <span @click.stop="removeImage">删除</span>
+        </div>
+      </div>
+      <div v-else class="img-placeholder" :style="{ width: width + 'px', height: height + 'px', borderRadius: shape === 'circle' ? '50%' : '8px' }">
+        <el-icon v-if="!uploading" :size="20"><Plus /></el-icon>
+        <el-icon v-else :size="20" class="is-loading"><Loading /></el-icon>
+        <span class="img-placeholder-text">{{ uploading ? '上传中' : label }}</span>
+      </div>
+    </el-upload>
+
+    <el-image-viewer v-if="previewVisible" :url-list="[model]" @close="previewVisible = false" />
+  </div>
+</template>
+
+<style scoped>
+.img-upload {
+  display: inline-block;
+}
+
+.img-uploader {
+  display: inline-block;
+}
+
+.img-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border: 1px dashed #d9d9d9;
+  background: #fafafa;
+  color: #a8abb2;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  overflow: hidden;
+}
+
+.img-placeholder:hover {
+  border-color: var(--brand-color, #ff6800);
+  color: var(--brand-color, #ff6800);
+}
+
+.img-placeholder-text {
+  font-size: 12px;
+}
+
+.img-preview-wrap {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.img-preview-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.img-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.img-preview-wrap:hover .img-overlay {
+  opacity: 1;
+}
+
+.img-overlay span {
+  color: #fff;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.img-overlay span:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.is-loading {
+  animation: rotating 1.5s linear infinite;
+}
+
+@keyframes rotating {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+</style>

apps/admin/src/layouts/DefaultLayout.vue

@@ -1,274 +1,274 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { ElMessageBox } from 'element-plus'
-import {
-  Goods,
-  Expand,
-  Fold,
-  ArrowDown,
-  User,
-  SwitchButton,
-} from '@element-plus/icons-vue'
-import { useAuthStore } from '@/stores/auth'
-import { useAppStore } from '@/stores/app'
-
-const router = useRouter()
-const route = useRoute()
-const authStore = useAuthStore()
-const appStore = useAppStore()
-
-interface MenuItem {
-  index: string
-  title: string
-  icon: string
-}
-
-const menuItems = ref<MenuItem[]>([
-  { index: '/goods', title: '商品管理', icon: 'Goods' },
-])
-
-const iconMap: Record<string, unknown> = {
-  Goods,
-}
-
-const activeMenu = computed(() => route.path)
-const collapsed = computed(() => appStore.sidebarCollapsed)
-const username = computed(() => authStore.user?.username || 'Admin')
-
-const breadcrumb = computed(() => {
-  const meta = route.meta as { title?: string } | undefined
-  return meta?.title || '商品管理'
-})
-
-function toggleSidebar() {
-  appStore.toggleSidebar()
-}
-
-async function handleLogout() {
-  try {
-    await ElMessageBox.confirm('确定退出登录吗？', '退出登录', {
-      confirmButtonText: '退出登录',
-      cancelButtonText: '取消',
-      type: 'warning',
-    })
-  } catch {
-    return
-  }
-  await authStore.logout()
-  router.push('/login')
-}
-
-function handleCommand(command: string) {
-  if (command === 'logout') {
-    handleLogout()
-  }
-}
-</script>
-
-<template>
-  <el-container class="layout-root">
-    <!-- Sidebar -->
-    <el-aside :width="collapsed ? '64px' : '240px'" class="layout-aside">
-      <div class="brand" :class="{ collapsed }">
-        <img src="/logo-unified.svg" class="brand-logo" alt="InkReach" />
-        <span v-if="!collapsed" class="brand-text">印美达官网后台</span>
-      </div>
-
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="collapsed"
-        :collapse-transition="false"
-        background-color="#1f1f24"
-        text-color="#d4d4d8"
-        active-text-color="#ff6800"
-        router
-      >
-        <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index">
-          <el-icon>
-            <component :is="iconMap[item.icon]" />
-          </el-icon>
-          <template #title>{{ item.title }}</template>
-        </el-menu-item>
-      </el-menu>
-    </el-aside>
-
-    <el-container>
-      <!-- Header -->
-      <el-header class="layout-header" height="56px">
-        <div class="header-left">
-          <el-button
-            text
-            class="collapse-btn"
-            :title="collapsed ? '展开侧边栏' : '折叠侧边栏'"
-            @click="toggleSidebar"
-          >
-            <el-icon :size="20">
-              <component :is="collapsed ? Expand : Fold" />
-            </el-icon>
-          </el-button>
-
-          <el-breadcrumb separator="/" class="breadcrumb">
-            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-            <el-breadcrumb-item>{{ breadcrumb }}</el-breadcrumb-item>
-          </el-breadcrumb>
-        </div>
-
-        <div class="header-right">
-          <el-dropdown trigger="click" @command="handleCommand">
-            <span class="user-trigger">
-              <el-icon><User /></el-icon>
-              <span class="user-name">{{ username }}</span>
-              <el-icon><ArrowDown /></el-icon>
-            </span>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item command="logout">
-                  <el-icon><SwitchButton /></el-icon>
-                  <span>退出登录</span>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </el-header>
-
-      <!-- Main content -->
-      <el-main class="layout-main">
-        <router-view v-slot="{ Component }">
-          <transition name="fade-slide" mode="out-in">
-            <component :is="Component" />
-          </transition>
-        </router-view>
-      </el-main>
-    </el-container>
-  </el-container>
-</template>
-
-<style scoped>
-.layout-root {
-  height: 100vh;
-}
-
-.layout-aside {
-  background: #1f1f24;
-  transition: width 0.2s ease;
-  overflow: hidden;
-}
-
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 56px;
-  padding: 0 20px;
-  border-bottom: 1px solid #2b2b33;
-  background: #16161a;
-  overflow: hidden;
-}
-
-.brand.collapsed {
-  justify-content: center;
-  padding: 0;
-}
-
-.brand-logo {
-  height: 24px;
-  width: auto;
-  object-fit: contain;
-  flex-shrink: 0;
-}
-
-.brand-text {
-  color: #e4e4e7;
-  font-size: 13px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.layout-aside :deep(.el-menu) {
-  border-right: none;
-}
-
-.layout-aside :deep(.el-menu-item.is-active) {
-  background: rgba(255, 104, 0, 0.12) !important;
-  border-right: 3px solid var(--brand-color);
-}
-
-.layout-aside :deep(.el-menu-item:hover) {
-  background: rgba(255, 255, 255, 0.04) !important;
-}
-
-.layout-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-  background: #ffffff;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.collapse-btn {
-  font-size: 18px;
-}
-
-.breadcrumb {
-  font-size: 14px;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.user-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-  padding: 6px 10px;
-  border-radius: 6px;
-  color: #374151;
-  font-size: 14px;
-  transition: background 0.15s ease;
-}
-
-.user-trigger:hover {
-  background: #f3f4f6;
-}
-
-.user-name {
-  font-weight: 500;
-}
-
-.layout-main {
-  background: #f5f7fa;
-  padding: 16px;
-  overflow: auto;
-}
-
-/* View transition */
-.fade-slide-enter-active,
-.fade-slide-leave-active {
-  transition:
-    opacity 0.18s ease,
-    transform 0.18s ease;
-}
-
-.fade-slide-enter-from {
-  opacity: 0;
-  transform: translateY(8px);
-}
-
-.fade-slide-leave-to {
-  opacity: 0;
-  transform: translateY(-8px);
-}
-</style>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
+import {
+  Goods,
+  Expand,
+  Fold,
+  ArrowDown,
+  User,
+  SwitchButton,
+} from '@element-plus/icons-vue'
+import { useAuthStore } from '@/stores/auth'
+import { useAppStore } from '@/stores/app'
+
+const router = useRouter()
+const route = useRoute()
+const authStore = useAuthStore()
+const appStore = useAppStore()
+
+interface MenuItem {
+  index: string
+  title: string
+  icon: string
+}
+
+const menuItems = ref<MenuItem[]>([
+  { index: '/goods', title: '商品管理', icon: 'Goods' },
+])
+
+const iconMap: Record<string, unknown> = {
+  Goods,
+}
+
+const activeMenu = computed(() => route.path)
+const collapsed = computed(() => appStore.sidebarCollapsed)
+const username = computed(() => authStore.user?.username || 'Admin')
+
+const breadcrumb = computed(() => {
+  const meta = route.meta as { title?: string } | undefined
+  return meta?.title || '商品管理'
+})
+
+function toggleSidebar() {
+  appStore.toggleSidebar()
+}
+
+async function handleLogout() {
+  try {
+    await ElMessageBox.confirm('确定退出登录吗？', '退出登录', {
+      confirmButtonText: '退出登录',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+  } catch {
+    return
+  }
+  await authStore.logout()
+  router.push('/login')
+}
+
+function handleCommand(command: string) {
+  if (command === 'logout') {
+    handleLogout()
+  }
+}
+</script>
+
+<template>
+  <el-container class="layout-root">
+    <!-- Sidebar -->
+    <el-aside :width="collapsed ? '64px' : '240px'" class="layout-aside">
+      <div class="brand" :class="{ collapsed }">
+        <img src="/logo-unified.svg" class="brand-logo" alt="InkReach" />
+        <span v-if="!collapsed" class="brand-text">印美达官网后台</span>
+      </div>
+
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="collapsed"
+        :collapse-transition="false"
+        background-color="#1f1f24"
+        text-color="#d4d4d8"
+        active-text-color="#ff6800"
+        router
+      >
+        <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index">
+          <el-icon>
+            <component :is="iconMap[item.icon]" />
+          </el-icon>
+          <template #title>{{ item.title }}</template>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+
+    <el-container>
+      <!-- Header -->
+      <el-header class="layout-header" height="56px">
+        <div class="header-left">
+          <el-button
+            text
+            class="collapse-btn"
+            :title="collapsed ? '展开侧边栏' : '折叠侧边栏'"
+            @click="toggleSidebar"
+          >
+            <el-icon :size="20">
+              <component :is="collapsed ? Expand : Fold" />
+            </el-icon>
+          </el-button>
+
+          <el-breadcrumb separator="/" class="breadcrumb">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item>{{ breadcrumb }}</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+
+        <div class="header-right">
+          <el-dropdown trigger="click" @command="handleCommand">
+            <span class="user-trigger">
+              <el-icon><User /></el-icon>
+              <span class="user-name">{{ username }}</span>
+              <el-icon><ArrowDown /></el-icon>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="logout">
+                  <el-icon><SwitchButton /></el-icon>
+                  <span>退出登录</span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-header>
+
+      <!-- Main content -->
+      <el-main class="layout-main">
+        <router-view v-slot="{ Component }">
+          <transition name="fade-slide" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<style scoped>
+.layout-root {
+  height: 100vh;
+}
+
+.layout-aside {
+  background: #1f1f24;
+  transition: width 0.2s ease;
+  overflow: hidden;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 56px;
+  padding: 0 20px;
+  border-bottom: 1px solid #2b2b33;
+  background: #16161a;
+  overflow: hidden;
+}
+
+.brand.collapsed {
+  justify-content: center;
+  padding: 0;
+}
+
+.brand-logo {
+  height: 24px;
+  width: auto;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.brand-text {
+  color: #e4e4e7;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.layout-aside :deep(.el-menu) {
+  border-right: none;
+}
+
+.layout-aside :deep(.el-menu-item.is-active) {
+  background: rgba(255, 104, 0, 0.12) !important;
+  border-right: 3px solid var(--brand-color);
+}
+
+.layout-aside :deep(.el-menu-item:hover) {
+  background: rgba(255, 255, 255, 0.04) !important;
+}
+
+.layout-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  background: #ffffff;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.collapse-btn {
+  font-size: 18px;
+}
+
+.breadcrumb {
+  font-size: 14px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.user-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  padding: 6px 10px;
+  border-radius: 6px;
+  color: #374151;
+  font-size: 14px;
+  transition: background 0.15s ease;
+}
+
+.user-trigger:hover {
+  background: #f3f4f6;
+}
+
+.user-name {
+  font-weight: 500;
+}
+
+.layout-main {
+  background: #f5f7fa;
+  padding: 16px;
+  overflow: auto;
+}
+
+/* View transition */
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition:
+    opacity 0.18s ease,
+    transform 0.18s ease;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>

apps/admin/src/main.ts

@@ -1,15 +1,15 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import './style.css'
-import App from './App.vue'
-import router from './router'
-
-const app = createApp(App)
-
-app.use(createPinia())
-app.use(router)
-app.use(ElementPlus)
-
-app.mount('#app')
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './style.css'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+app.use(ElementPlus)
+
+app.mount('#app')

apps/admin/src/router/index.ts

@@ -1,55 +1,55 @@
-import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
-
-const routes: RouteRecordRaw[] = [
-  {
-    path: '/login',
-    name: 'Login',
-    component: () => import('@/views/login/LoginView.vue'),
-    meta: { title: '登录', public: true },
-  },
-  {
-    path: '/',
-    component: () => import('@/layouts/DefaultLayout.vue'),
-    redirect: '/goods',
-    children: [
-      {
-        path: 'goods',
-        name: 'Goods',
-        component: () => import('@/views/product-management/ProductManagementView.vue'),
-        meta: { title: '商品管理' },
-      },
-    ],
-  },
-  {
-    path: '/:pathMatch(.*)*',
-    redirect: '/goods',
-  },
-]
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-})
-
-router.beforeEach((to) => {
-  const authStore = useAuthStore()
-  const isPublic = to.meta?.public === true
-
-  if (!authStore.isLoggedIn && !isPublic) {
-    return { path: '/login', replace: true }
-  }
-
-  if (authStore.isLoggedIn && to.path === '/login') {
-    return { path: '/', replace: true }
-  }
-
-  return true
-})
-
-router.afterEach((to) => {
-  const title = (to.meta?.title as string) || 'Inkreach 官网后台'
-  document.title = `${title} | Inkreach 官网后台`
-})
-
-export default router
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/login/LoginView.vue'),
+    meta: { title: '登录', public: true },
+  },
+  {
+    path: '/',
+    component: () => import('@/layouts/DefaultLayout.vue'),
+    redirect: '/goods',
+    children: [
+      {
+        path: 'goods',
+        name: 'Goods',
+        component: () => import('@/views/product-management/ProductManagementView.vue'),
+        meta: { title: '商品管理' },
+      },
+    ],
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/goods',
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory('/admin/'),
+  routes,
+})
+
+router.beforeEach((to) => {
+  const authStore = useAuthStore()
+  const isPublic = to.meta?.public === true
+
+  if (!authStore.isLoggedIn && !isPublic) {
+    return { path: '/login', replace: true }
+  }
+
+  if (authStore.isLoggedIn && to.path === '/login') {
+    return { path: '/', replace: true }
+  }
+
+  return true
+})
+
+router.afterEach((to) => {
+  const title = (to.meta?.title as string) || 'Inkreach 官网后台'
+  document.title = `${title} | Inkreach 官网后台`
+})
+
+export default router

apps/admin/src/stores/app.ts

@@ -1,26 +1,26 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-
-const SIDEBAR_KEY = 'app:sidebarCollapsed'
-
-export const useAppStore = defineStore('app', () => {
-  const sidebarCollapsed = ref<boolean>(
-    localStorage.getItem(SIDEBAR_KEY) === 'true'
-  )
-
-  function toggleSidebar() {
-    sidebarCollapsed.value = !sidebarCollapsed.value
-    localStorage.setItem(SIDEBAR_KEY, String(sidebarCollapsed.value))
-  }
-
-  function setSidebarCollapsed(value: boolean) {
-    sidebarCollapsed.value = value
-    localStorage.setItem(SIDEBAR_KEY, String(value))
-  }
-
-  return {
-    sidebarCollapsed,
-    toggleSidebar,
-    setSidebarCollapsed,
-  }
-})
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+const SIDEBAR_KEY = 'app:sidebarCollapsed'
+
+export const useAppStore = defineStore('app', () => {
+  const sidebarCollapsed = ref<boolean>(
+    localStorage.getItem(SIDEBAR_KEY) === 'true'
+  )
+
+  function toggleSidebar() {
+    sidebarCollapsed.value = !sidebarCollapsed.value
+    localStorage.setItem(SIDEBAR_KEY, String(sidebarCollapsed.value))
+  }
+
+  function setSidebarCollapsed(value: boolean) {
+    sidebarCollapsed.value = value
+    localStorage.setItem(SIDEBAR_KEY, String(value))
+  }
+
+  return {
+    sidebarCollapsed,
+    toggleSidebar,
+    setSidebarCollapsed,
+  }
+})

apps/admin/src/stores/auth.ts

@@ -1,67 +1,67 @@
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import type { LoginRequest, User } from '@/types'
-import { authApi } from '@/api/auth'
-
-export const useAuthStore = defineStore('auth', () => {
-  // The session lives in HttpOnly cookies set by the API; nothing
-  // security-relevant is stored client-side. `user` is just UI state,
-  // restored from the server via /auth/me on app start.
-  const user = ref<User | null>(null)
-  const sessionChecked = ref(false)
-
-  // Tokens moved to HttpOnly cookies; clean up any stale values from the
-  // previous localStorage-based session.
-  localStorage.removeItem('token')
-  localStorage.removeItem('user')
-
-  const isLoggedIn = computed(() => !!user.value)
-
-  // Restore the session once per app start. The router guard awaits this
-  // so a page refresh on a protected route does not bounce to /login.
-  async function ensureSessionChecked() {
-    if (sessionChecked.value) return
-    sessionChecked.value = true
-    try {
-      user.value = await authApi.getCurrentUser()
-    } catch {
-      user.value = null
-    }
-  }
-
-  function setUser(newUser: User | null) {
-    user.value = newUser
-  }
-
-  async function login(payload: LoginRequest) {
-    const res = await authApi.login(payload) as any
-    const userData: User | null = res.user ?? res.data?.user ?? null
-    sessionChecked.value = true
-    setUser(userData)
-    return res
-  }
-
-  async function fetchCurrentUser() {
-    const current = await authApi.getCurrentUser()
-    setUser(current)
-    return current
-  }
-
-  async function logout() {
-    try {
-      await authApi.logout()
-    } catch {
-      // Ignore network errors during logout
-    }
-    setUser(null)
-  }
-
-  return {
-    user,
-    isLoggedIn,
-    ensureSessionChecked,
-    login,
-    fetchCurrentUser,
-    logout,
-  }
-})
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { LoginRequest, User } from '@/types'
+import { authApi } from '@/api/auth'
+
+export const useAuthStore = defineStore('auth', () => {
+  // The session lives in HttpOnly cookies set by the API; nothing
+  // security-relevant is stored client-side. `user` is just UI state,
+  // restored from the server via /auth/me on app start.
+  const user = ref<User | null>(null)
+  const sessionChecked = ref(false)
+
+  // Tokens moved to HttpOnly cookies; clean up any stale values from the
+  // previous localStorage-based session.
+  localStorage.removeItem('token')
+  localStorage.removeItem('user')
+
+  const isLoggedIn = computed(() => !!user.value)
+
+  // Restore the session once per app start. The router guard awaits this
+  // so a page refresh on a protected route does not bounce to /login.
+  async function ensureSessionChecked() {
+    if (sessionChecked.value) return
+    sessionChecked.value = true
+    try {
+      user.value = await authApi.getCurrentUser()
+    } catch {
+      user.value = null
+    }
+  }
+
+  function setUser(newUser: User | null) {
+    user.value = newUser
+  }
+
+  async function login(payload: LoginRequest) {
+    const res = await authApi.login(payload) as any
+    const userData: User | null = res.user ?? res.data?.user ?? null
+    sessionChecked.value = true
+    setUser(userData)
+    return res
+  }
+
+  async function fetchCurrentUser() {
+    const current = await authApi.getCurrentUser()
+    setUser(current)
+    return current
+  }
+
+  async function logout() {
+    try {
+      await authApi.logout()
+    } catch {
+      // Ignore network errors during logout
+    }
+    setUser(null)
+  }
+
+  return {
+    user,
+    isLoggedIn,
+    ensureSessionChecked,
+    login,
+    fetchCurrentUser,
+    logout,
+  }
+})

apps/admin/src/style.css

@@ -1,100 +1,100 @@
-:root {
-  --brand-color: #ff6800;
-  --brand-color-hover: #ff7d1f;
-  --brand-color-active: #e65a00;
-
-  --sidebar-width: 240px;
-  --sidebar-width-collapsed: 64px;
-  --header-height: 56px;
-
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    'PingFang SC',
-    'Hiragino Sans GB',
-    'Microsoft YaHei',
-    sans-serif;
-  color: #1f2937;
-  background-color: #f5f7fa;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body,
-#app {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-/* Element Plus brand color overrides */
-:root {
-  --el-color-primary: var(--brand-color);
-  --el-color-primary-light-3: #ff8f3d;
-  --el-color-primary-light-5: #ffb073;
-  --el-color-primary-light-7: #ffd1a8;
-  --el-color-primary-light-8: #ffe0c2;
-  --el-color-primary-light-9: #fff0e0;
-  --el-color-primary-dark-2: #e65a00;
-}
-
-/* Brand-colored buttons */
-.el-button--primary {
-  --el-button-bg-color: var(--brand-color);
-  --el-button-border-color: var(--brand-color);
-  --el-button-hover-bg-color: var(--brand-color-hover);
-  --el-button-hover-border-color: var(--brand-color-hover);
-  --el-button-active-bg-color: var(--brand-color-active);
-  --el-button-active-border-color: var(--brand-color-active);
-}
-
-/* Page wrapper helper */
-.page-container {
-  padding: 16px;
-}
-
-.page-card {
-  background: #ffffff;
-  border-radius: 6px;
-  padding: 16px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
-}
-
-/* Compact filter bar */
-.filter-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.filter-bar .el-input,
-.filter-bar .el-select,
-.filter-bar .el-cascader {
-  width: 200px;
-}
-
-/* Action cell padding */
-.table-actions .el-button + .el-button {
-  margin-left: 8px;
-}
-
-/* Brand-colored dialog titles */
-.brand-title {
-  color: var(--brand-color);
-  font-weight: 600;
-}
+:root {
+  --brand-color: #ff6800;
+  --brand-color-hover: #ff7d1f;
+  --brand-color-active: #e65a00;
+
+  --sidebar-width: 240px;
+  --sidebar-width-collapsed: 64px;
+  --header-height: 56px;
+
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'PingFang SC',
+    'Hiragino Sans GB',
+    'Microsoft YaHei',
+    sans-serif;
+  color: #1f2937;
+  background-color: #f5f7fa;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Element Plus brand color overrides */
+:root {
+  --el-color-primary: var(--brand-color);
+  --el-color-primary-light-3: #ff8f3d;
+  --el-color-primary-light-5: #ffb073;
+  --el-color-primary-light-7: #ffd1a8;
+  --el-color-primary-light-8: #ffe0c2;
+  --el-color-primary-light-9: #fff0e0;
+  --el-color-primary-dark-2: #e65a00;
+}
+
+/* Brand-colored buttons */
+.el-button--primary {
+  --el-button-bg-color: var(--brand-color);
+  --el-button-border-color: var(--brand-color);
+  --el-button-hover-bg-color: var(--brand-color-hover);
+  --el-button-hover-border-color: var(--brand-color-hover);
+  --el-button-active-bg-color: var(--brand-color-active);
+  --el-button-active-border-color: var(--brand-color-active);
+}
+
+/* Page wrapper helper */
+.page-container {
+  padding: 16px;
+}
+
+.page-card {
+  background: #ffffff;
+  border-radius: 6px;
+  padding: 16px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+}
+
+/* Compact filter bar */
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.filter-bar .el-input,
+.filter-bar .el-select,
+.filter-bar .el-cascader {
+  width: 200px;
+}
+
+/* Action cell padding */
+.table-actions .el-button + .el-button {
+  margin-left: 8px;
+}
+
+/* Brand-colored dialog titles */
+.brand-title {
+  color: var(--brand-color);
+  font-weight: 600;
+}

apps/admin/src/types/index.ts

@@ -1,47 +1,47 @@
-// Common types
-export interface PaginatedResult<T> {
-  items: T[]
-  total: number
-  page: number
-  pageSize: number
-}
-
-// Auth types
-export interface LoginRequest {
-  username: string
-  password: string
-}
-
-export interface LoginResponse {
-  accessToken: string
-  user: User
-}
-
-export interface User {
-  id: string
-  username: string
-  email?: string
-}
-
-// Good types
+// Common types
+export interface PaginatedResult<T> {
+  items: T[]
+  total: number
+  page: number
+  pageSize: number
+}
+
+// Auth types
+export interface LoginRequest {
+  username: string
+  password: string
+}
+
+export interface LoginResponse {
+  accessToken: string
+  user: User
+}
+
+export interface User {
+  id: string
+  username: string
+  email?: string
+}
+
+// Good types
 export interface Good {
-  id: string
-  goodName: string
-  goodImage: string | null
-  goodPriority: number
-  originGoodId: string
-  originGood?: OriginGood
-  countryId: string
-  country?: Country
-  categoryId: string
-  category?: Category
-  tagId?: string
-  tag?: Tag
-  tags: Tag[]
-  positionId?: string
-  position?: Position
-  createdAt: string
-  updatedAt: string
+  id: string
+  goodName: string
+  goodImage: string | null
+  goodPriority: number
+  originGoodId: string
+  originGood?: OriginGood
+  countryId: string
+  country?: Country
+  categoryId: string
+  category?: Category
+  tagId?: string
+  tag?: Tag
+  tags: Tag[]
+  positionId?: string
+  position?: Position
+  createdAt: string
+  updatedAt: string
 }
 
 export interface OriginGoodDetail {
@@ -115,15 +115,15 @@ export interface GoodDetail extends Good {
   originDetail: OriginGoodDetail | null
   variants: OriginGoodVariant[]
 }
-
+
 export interface CreateGoodRequest {
-  goodName: string
-  goodImage?: string
-  originGoodId: number
-  countryId: number
-  categoryId: number
-  tagIds?: number[]
-  positionId?: number
+  goodName: string
+  goodImage?: string
+  originGoodId: number
+  countryId: number
+  categoryId: number
+  tagIds?: number[]
+  positionId?: number
   goodPriority?: number
 }
 
@@ -147,199 +147,199 @@ export interface UpdateCustomGoodContentRequest {
   detail?: CustomGoodDetailRequest
   variants?: CustomGoodVariantRequest[]
 }
-
-export interface UpdateGoodRequest {
-  goodName?: string
-  goodImage?: string | null
-  originGoodId?: number
-  countryId?: number
-  categoryId?: number
-  tagIds?: number[]
-  positionId?: number | null
-  goodPriority?: number
-}
-
-export interface BatchCreateItem {
-  originGoodId: number
-  priority?: number
-}
-
-export interface BatchCreateGoodsRequest {
-  items: BatchCreateItem[]
-  countryId: number
-  categoryId: number
-  tagIds?: number[]
-  positionId?: number
-  defaultPriority?: number
-}
-
-export interface UpdatePriorityRequest {
-  goodIds: string[]
-  priority: number
-}
-
-export interface BatchPriorityItem {
-  id: number
-  priority: number
-}
-
-export interface BatchPriorityRequest {
-  items: BatchPriorityItem[]
-}
-
-// Country types
-export interface Country {
-  id: string
-  countryName: string
-  countryIcon?: string | null
-  createdAt: string
-  updatedAt: string
-}
-
-export interface CreateCountryRequest {
-  countryName: string
-  countryIcon?: string
-}
-
-export interface UpdateCountryRequest {
-  countryName?: string
-  countryIcon?: string | null
-}
-
-// Category types
-export interface Category {
-  id: string
-  categoryName: string
-  categoryIcon?: string | null
-  sdsCategoryId?: string | null
-  parentCategoryId?: string | null
-  parent?: Category
-  children?: Category[]
-  _count?: {
-    children: number
-  }
-  createdAt: string
-  updatedAt: string
-}
-
-export interface CreateCategoryRequest {
-  categoryName: string
-  categoryIcon?: string
-  parentCategoryId?: number
-}
-
-export interface UpdateCategoryRequest {
-  categoryName?: string
-  categoryIcon?: string | null
-  parentCategoryId?: number | null
-}
-
-export interface CategoryTree extends Category {
-  children?: CategoryTree[]
-}
-
-// Tag types
-export interface Tag {
-  id: string
-  tagName: string
-  tagColor?: string | null
-  tagFontColor?: string | null
-  timing?: string | null
-  tagGroupId?: string | null
-  sortOrder?: number
-  tagGroup?: TagGroup | null
-  createdAt: string
-  updatedAt: string
-}
-
-export interface CreateTagRequest {
-  tagName: string
-  tagColor?: string
-  tagFontColor?: string
-  timing?: string
-  tagGroupId?: number
-  sortOrder?: number
-}
-
-export interface UpdateTagRequest {
-  tagName?: string
-  tagColor?: string | null
-  tagFontColor?: string | null
-  timing?: string | null
-  tagGroupId?: number | null
-  sortOrder?: number
-}
-
-// Tag Group types
-export interface TagGroup {
-  id: string
-  groupName: string
-  groupIcon?: string | null
-  groupColor?: string | null
-  sortOrder: number
-  createdAt: string
-  updatedAt: string
-  _count?: { tags: number }
-}
-
-export interface CreateTagGroupRequest {
-  groupName: string
-  groupIcon?: string
-  groupColor?: string
-  sortOrder?: number
-}
-
-export interface UpdateTagGroupRequest {
-  groupName?: string
-  groupIcon?: string | null
-  groupColor?: string | null
-  sortOrder?: number
-}
-
-export interface ReorderTagGroupsRequest {
-  items: Array<{ id: number; sortOrder: number }>
-}
-
-export interface ReorderTagsRequest {
-  items: Array<{ id: number; tagGroupId?: number | null; sortOrder: number }>
-}
-
-// Position types
-export interface Position {
-  id: string
-  indexVal: number
-  countryId?: string
-  country?: Country
-  categoryId?: string
-  category?: Category
-  createdAt: string
-  updatedAt: string
-}
-
-export interface CreatePositionRequest {
-  indexVal: number
-  countryId?: number
-  categoryId?: number
-}
-
-export interface UpdatePositionRequest {
-  indexVal?: number
-  countryId?: number | null
-  categoryId?: number | null
-}
-
-// Origin Good types
+
+export interface UpdateGoodRequest {
+  goodName?: string
+  goodImage?: string | null
+  originGoodId?: number
+  countryId?: number
+  categoryId?: number
+  tagIds?: number[]
+  positionId?: number | null
+  goodPriority?: number
+}
+
+export interface BatchCreateItem {
+  originGoodId: number
+  priority?: number
+}
+
+export interface BatchCreateGoodsRequest {
+  items: BatchCreateItem[]
+  countryId: number
+  categoryId: number
+  tagIds?: number[]
+  positionId?: number
+  defaultPriority?: number
+}
+
+export interface UpdatePriorityRequest {
+  goodIds: string[]
+  priority: number
+}
+
+export interface BatchPriorityItem {
+  id: number
+  priority: number
+}
+
+export interface BatchPriorityRequest {
+  items: BatchPriorityItem[]
+}
+
+// Country types
+export interface Country {
+  id: string
+  countryName: string
+  countryIcon?: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+export interface CreateCountryRequest {
+  countryName: string
+  countryIcon?: string
+}
+
+export interface UpdateCountryRequest {
+  countryName?: string
+  countryIcon?: string | null
+}
+
+// Category types
+export interface Category {
+  id: string
+  categoryName: string
+  categoryIcon?: string | null
+  sdsCategoryId?: string | null
+  parentCategoryId?: string | null
+  parent?: Category
+  children?: Category[]
+  _count?: {
+    children: number
+  }
+  createdAt: string
+  updatedAt: string
+}
+
+export interface CreateCategoryRequest {
+  categoryName: string
+  categoryIcon?: string
+  parentCategoryId?: number
+}
+
+export interface UpdateCategoryRequest {
+  categoryName?: string
+  categoryIcon?: string | null
+  parentCategoryId?: number | null
+}
+
+export interface CategoryTree extends Category {
+  children?: CategoryTree[]
+}
+
+// Tag types
+export interface Tag {
+  id: string
+  tagName: string
+  tagColor?: string | null
+  tagFontColor?: string | null
+  timing?: string | null
+  tagGroupId?: string | null
+  sortOrder?: number
+  tagGroup?: TagGroup | null
+  createdAt: string
+  updatedAt: string
+}
+
+export interface CreateTagRequest {
+  tagName: string
+  tagColor?: string
+  tagFontColor?: string
+  timing?: string
+  tagGroupId?: number
+  sortOrder?: number
+}
+
+export interface UpdateTagRequest {
+  tagName?: string
+  tagColor?: string | null
+  tagFontColor?: string | null
+  timing?: string | null
+  tagGroupId?: number | null
+  sortOrder?: number
+}
+
+// Tag Group types
+export interface TagGroup {
+  id: string
+  groupName: string
+  groupIcon?: string | null
+  groupColor?: string | null
+  sortOrder: number
+  createdAt: string
+  updatedAt: string
+  _count?: { tags: number }
+}
+
+export interface CreateTagGroupRequest {
+  groupName: string
+  groupIcon?: string
+  groupColor?: string
+  sortOrder?: number
+}
+
+export interface UpdateTagGroupRequest {
+  groupName?: string
+  groupIcon?: string | null
+  groupColor?: string | null
+  sortOrder?: number
+}
+
+export interface ReorderTagGroupsRequest {
+  items: Array<{ id: number; sortOrder: number }>
+}
+
+export interface ReorderTagsRequest {
+  items: Array<{ id: number; tagGroupId?: number | null; sortOrder: number }>
+}
+
+// Position types
+export interface Position {
+  id: string
+  indexVal: number
+  countryId?: string
+  country?: Country
+  categoryId?: string
+  category?: Category
+  createdAt: string
+  updatedAt: string
+}
+
+export interface CreatePositionRequest {
+  indexVal: number
+  countryId?: number
+  categoryId?: number
+}
+
+export interface UpdatePositionRequest {
+  indexVal?: number
+  countryId?: number | null
+  categoryId?: number | null
+}
+
+// Origin Good types
 export interface OriginGood {
-  id: string
-  goodName: string | null
-  goodImage: string | null
-  goodPrice: string | null
+  id: string
+  goodName: string | null
+  goodImage: string | null
+  goodPrice: string | null
   sdsGoodId: string
   source: 'SDS' | 'CUSTOM'
   isCustom: boolean
-  sdsCategoryId: string | null
-  delisted?: boolean
-  createdAt: string
+  sdsCategoryId: string | null
+  delisted?: boolean
+  createdAt: string
   updatedAt: string
   hasDetail?: boolean
   detailSyncedAt?: string | null
@@ -347,43 +347,43 @@ export interface OriginGood {
   sizeRowCount?: number
   packageRowCount?: number
   productCode?: string | null
-}
-
-// Origin Goods Tree types
+}
+
+// Origin Goods Tree types
 export interface OriginGoodsTreeNode {
-  id: string
-  goodName: string
-  goodImage: string | null
-  goodPrice: string | null
-  sdsGoodId: string
-  delisted: boolean
-  configuredCount: number
-  configuredCountries: string[]
+  id: string
+  goodName: string
+  goodImage: string | null
+  goodPrice: string | null
+  sdsGoodId: string
+  delisted: boolean
+  configuredCount: number
+  configuredCountries: string[]
   configuredTags: { tagName: string; tagColor: string | null; tagFontColor: string | null; tagGroupId: string | null; tagGroupName: string | null; sortOrder: number }[]
   hasDetail: boolean
   detailSyncedAt: string | null
   variantCount: number
   sizeRowCount: number
   packageRowCount: number
-}
-
-export interface OriginGoodsTreeCategoryNode {
-  categoryId: string
-  categoryName: string
-  sdsCategoryId: string | null
-  configuredCount: number
-  totalCount: number
-  children: OriginGoodsTreeCategoryNode[]
-  originGoods: OriginGoodsTreeNode[]
-}
-
-export interface OriginGoodsTreeResponse {
-  tree: OriginGoodsTreeCategoryNode[]
-  totalOriginGoods: number
-  configuredCount: number
-}
-
-// Sync types
+}
+
+export interface OriginGoodsTreeCategoryNode {
+  categoryId: string
+  categoryName: string
+  sdsCategoryId: string | null
+  configuredCount: number
+  totalCount: number
+  children: OriginGoodsTreeCategoryNode[]
+  originGoods: OriginGoodsTreeNode[]
+}
+
+export interface OriginGoodsTreeResponse {
+  tree: OriginGoodsTreeCategoryNode[]
+  totalOriginGoods: number
+  configuredCount: number
+}
+
+// Sync types
 export interface SyncLog {
   id: string
   type: 'CATEGORIES' | 'PRODUCTS' | 'PRODUCT_DETAILS'
@@ -392,39 +392,39 @@ export interface SyncLog {
   startedAt: string
   finishedAt: string | null
 }
-
-// Filter types
-export interface GoodsFilter {
-  countryId?: string
-  categoryId?: string
-  tagId?: string
-  keyword?: string
-  page?: number
-  pageSize?: number
-}
-
-export interface CategoryFilter {
-  parentCategoryId?: string
-  categoryName?: string
-  page?: number
-  pageSize?: number
-}
-
-export interface CountryFilter {
-  countryName?: string
-  page?: number
-  pageSize?: number
-}
-
-export interface TagFilter {
-  tagName?: string
-  page?: number
-  pageSize?: number
-}
-
-export interface PositionFilter {
-  countryId?: string
-  categoryId?: string
-  page?: number
-  pageSize?: number
-}
+
+// Filter types
+export interface GoodsFilter {
+  countryId?: string
+  categoryId?: string
+  tagId?: string
+  keyword?: string
+  page?: number
+  pageSize?: number
+}
+
+export interface CategoryFilter {
+  parentCategoryId?: string
+  categoryName?: string
+  page?: number
+  pageSize?: number
+}
+
+export interface CountryFilter {
+  countryName?: string
+  page?: number
+  pageSize?: number
+}
+
+export interface TagFilter {
+  tagName?: string
+  page?: number
+  pageSize?: number
+}
+
+export interface PositionFilter {
+  countryId?: string
+  categoryId?: string
+  page?: number
+  pageSize?: number
+}

apps/admin/src/views/categories/CategoriesView.vue

@@ -1,246 +1,246 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Edit, Delete, Refresh } from '@element-plus/icons-vue'
-import type {
-  Category,
-  CategoryTree,
-  CreateCategoryRequest,
-  UpdateCategoryRequest,
-} from '@/types'
-import { categoriesApi } from '@/api/categories'
-
-const loading = ref(false)
-const tree = ref<CategoryTree[]>([])
-
-async function fetchTree() {
-  loading.value = true
-  try {
-    tree.value = await categoriesApi.getCategoryTree()
-  } finally {
-    loading.value = false
-  }
-}
-
-// ---------- Cascader ----------
-interface CascaderNode {
-  value: string
-  label: string
-  children?: CascaderNode[]
-}
-
-const cascaderOptions = ref<CascaderNode[]>([])
-
-function buildCascader(nodes: CategoryTree[]): CascaderNode[] {
-  return nodes.map((n) => ({
-    value: n.id,
-    label: n.categoryName,
-    children: n.children?.length ? buildCascader(n.children) : undefined,
-  }))
-}
-
-function rebuildCascader() {
-  cascaderOptions.value = buildCascader(tree.value)
-}
-
-// ---------- Dialog ----------
-const dialogRef = ref()
-const dialogVisible = ref(false)
-const dialogMode = ref<'create' | 'edit'>('create')
-const dialogLoading = ref(false)
-
-const dialogForm = reactive<CreateCategoryRequest & { id?: string }>({
-  categoryName: '',
-  categoryIcon: '',
-  parentCategoryId: '',
-})
-
-const dialogRules = {
-  categoryName: [{ required: true, message: '名称是必填项', trigger: 'blur' }],
-}
-
-async function openAddDialog() {
-  dialogMode.value = 'create'
-  Object.assign(dialogForm, { id: undefined, categoryName: '', categoryIcon: '', parentCategoryId: '' })
-  rebuildCascader()
-  dialogVisible.value = true
-}
-
-async function openEditDialog(c: Category) {
-  dialogMode.value = 'edit'
-  Object.assign(dialogForm, {
-    id: c.id,
-    categoryName: c.categoryName,
-    categoryIcon: c.categoryIcon || '',
-    parentCategoryId: c.parentCategoryId || '',
-  })
-  rebuildCascader()
-  dialogVisible.value = true
-}
-
-async function handleSubmit() {
-  if (!dialogRef.value) return
-  await dialogRef.value.validate(async (valid: boolean) => {
-    if (!valid) return
-    dialogLoading.value = true
-    try {
-      const payload: CreateCategoryRequest = {
-        categoryName: dialogForm.categoryName,
-        categoryIcon: dialogForm.categoryIcon || undefined,
-        parentCategoryId: dialogForm.parentCategoryId || undefined,
-      }
-      if (dialogMode.value === 'create') {
-        await categoriesApi.createCategory(payload)
-        ElMessage.success('分类创建成功')
-      } else {
-        await categoriesApi.updateCategory(dialogForm.id!, payload as UpdateCategoryRequest)
-        ElMessage.success('分类更新成功')
-      }
-      dialogVisible.value = false
-      fetchTree()
-    } finally {
-      dialogLoading.value = false
-    }
-  })
-}
-
-async function handleDelete(c: Category) {
-  try {
-    await ElMessageBox.confirm(`确定删除「${c.categoryName}」吗？`, '确认', {
-      type: 'warning',
-      confirmButtonText: '删除',
-      cancelButtonText: '取消',
-    })
-  } catch {
-    return
-  }
-  await categoriesApi.deleteCategory(c.id)
-  ElMessage.success('删除成功')
-  fetchTree()
-}
-
-onMounted(fetchTree)
-</script>
-
-<template>
-  <div class="page-container">
-    <div class="page-card">
-      <div class="toolbar">
-        <el-button type="primary" @click="openAddDialog">
-          <el-icon><Plus /></el-icon>
-          <span>新增分类</span>
-        </el-button>
-        <el-button @click="fetchTree">
-          <el-icon><Refresh /></el-icon>
-          <span>刷新</span>
-        </el-button>
-      </div>
-
-      <el-table
-        v-loading="loading"
-        :data="tree"
-        border
-        row-key="id"
-        :tree-props="{ children: 'children' }"
-        default-expand-all
-      >
-        <el-table-column prop="categoryName" label="名称" min-width="220" />
-        <el-table-column label="图标" width="100">
-          <template #default="{ row }: { row: CategoryTree }">
-            <el-image
-              v-if="row.categoryIcon"
-              :src="row.categoryIcon"
-              :preview-src-list="[row.categoryIcon]"
-              fit="cover"
-              style="width: 32px; height: 32px; border-radius: 4px;"
-            />
-            <span v-else>-</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="父级">
-          <template #default="{ row }: { row: CategoryTree }">
-            {{ row.parent?.categoryName || '-' }}
-          </template>
-        </el-table-column>
-        <el-table-column label="子级数" width="100">
-          <template #default="{ row }: { row: CategoryTree }">
-            {{ row._count?.children ?? row.children?.length ?? 0 }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="180" fixed="right">
-          <template #default="{ row }: { row: CategoryTree }">
-            <div class="table-actions">
-              <el-button size="small" type="primary" plain @click="openEditDialog(row)">
-                <el-icon><Edit /></el-icon>
-                <span>编辑</span>
-              </el-button>
-              <el-button size="small" type="danger" plain @click="handleDelete(row)">
-                <el-icon><Delete /></el-icon>
-                <span>删除</span>
-              </el-button>
-            </div>
-          </template>
-        </el-table-column>
-        <template #empty>
-          <el-empty description="暂无分类" />
-        </template>
-      </el-table>
-    </div>
-
-    <el-dialog
-      v-model="dialogVisible"
-      :title="dialogMode === 'create' ? '新增分类' : '编辑分类'"
-      width="520px"
-      destroy-on-close
-    >
-      <el-form
-        ref="dialogRef"
-        :model="dialogForm"
-        :rules="dialogRules"
-        label-width="100px"
-      >
-        <el-form-item label="名称" prop="categoryName">
-          <el-input v-model="dialogForm.categoryName" placeholder="请输入分类名称" />
-        </el-form-item>
-        <el-form-item label="父级分类">
-          <el-cascader
-            v-model="dialogForm.parentCategoryId"
-            :options="cascaderOptions"
-            :props="{
-              checkStrictly: true,
-              value: 'value',
-              label: 'label',
-              children: 'children',
-              emitPath: false,
-            }"
-            placeholder="顶级（可选）"
-            clearable
-            style="width: 100%"
-          />
-        </el-form-item>
-        <el-form-item label="图标 URL">
-          <el-input v-model="dialogForm.categoryIcon" placeholder="https://..." />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="dialogLoading" @click="handleSubmit">
-          {{ dialogMode === 'create' ? '创建' : '保存' }}
-        </el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<style scoped>
-.toolbar {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.pagination {
-  margin-top: 16px;
-  justify-content: flex-end;
-}
-</style>
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Edit, Delete, Refresh } from '@element-plus/icons-vue'
+import type {
+  Category,
+  CategoryTree,
+  CreateCategoryRequest,
+  UpdateCategoryRequest,
+} from '@/types'
+import { categoriesApi } from '@/api/categories'
+
+const loading = ref(false)
+const tree = ref<CategoryTree[]>([])
+
+async function fetchTree() {
+  loading.value = true
+  try {
+    tree.value = await categoriesApi.getCategoryTree()
+  } finally {
+    loading.value = false
+  }
+}
+
+// ---------- Cascader ----------
+interface CascaderNode {
+  value: string
+  label: string
+  children?: CascaderNode[]
+}
+
+const cascaderOptions = ref<CascaderNode[]>([])
+
+function buildCascader(nodes: CategoryTree[]): CascaderNode[] {
+  return nodes.map((n) => ({
+    value: n.id,
+    label: n.categoryName,
+    children: n.children?.length ? buildCascader(n.children) : undefined,
+  }))
+}
+
+function rebuildCascader() {
+  cascaderOptions.value = buildCascader(tree.value)
+}
+
+// ---------- Dialog ----------
+const dialogRef = ref()
+const dialogVisible = ref(false)
+const dialogMode = ref<'create' | 'edit'>('create')
+const dialogLoading = ref(false)
+
+const dialogForm = reactive<CreateCategoryRequest & { id?: string }>({
+  categoryName: '',
+  categoryIcon: '',
+  parentCategoryId: '',
+})
+
+const dialogRules = {
+  categoryName: [{ required: true, message: '名称是必填项', trigger: 'blur' }],
+}
+
+async function openAddDialog() {
+  dialogMode.value = 'create'
+  Object.assign(dialogForm, { id: undefined, categoryName: '', categoryIcon: '', parentCategoryId: '' })
+  rebuildCascader()
+  dialogVisible.value = true
+}
+
+async function openEditDialog(c: Category) {
+  dialogMode.value = 'edit'
+  Object.assign(dialogForm, {
+    id: c.id,
+    categoryName: c.categoryName,
+    categoryIcon: c.categoryIcon || '',
+    parentCategoryId: c.parentCategoryId || '',
+  })
+  rebuildCascader()
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!dialogRef.value) return
+  await dialogRef.value.validate(async (valid: boolean) => {
+    if (!valid) return
+    dialogLoading.value = true
+    try {
+      const payload: CreateCategoryRequest = {
+        categoryName: dialogForm.categoryName,
+        categoryIcon: dialogForm.categoryIcon || undefined,
+        parentCategoryId: dialogForm.parentCategoryId || undefined,
+      }
+      if (dialogMode.value === 'create') {
+        await categoriesApi.createCategory(payload)
+        ElMessage.success('分类创建成功')
+      } else {
+        await categoriesApi.updateCategory(dialogForm.id!, payload as UpdateCategoryRequest)
+        ElMessage.success('分类更新成功')
+      }
+      dialogVisible.value = false
+      fetchTree()
+    } finally {
+      dialogLoading.value = false
+    }
+  })
+}
+
+async function handleDelete(c: Category) {
+  try {
+    await ElMessageBox.confirm(`确定删除「${c.categoryName}」吗？`, '确认', {
+      type: 'warning',
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+    })
+  } catch {
+    return
+  }
+  await categoriesApi.deleteCategory(c.id)
+  ElMessage.success('删除成功')
+  fetchTree()
+}
+
+onMounted(fetchTree)
+</script>
+
+<template>
+  <div class="page-container">
+    <div class="page-card">
+      <div class="toolbar">
+        <el-button type="primary" @click="openAddDialog">
+          <el-icon><Plus /></el-icon>
+          <span>新增分类</span>
+        </el-button>
+        <el-button @click="fetchTree">
+          <el-icon><Refresh /></el-icon>
+          <span>刷新</span>
+        </el-button>
+      </div>
+
+      <el-table
+        v-loading="loading"
+        :data="tree"
+        border
+        row-key="id"
+        :tree-props="{ children: 'children' }"
+        default-expand-all
+      >
+        <el-table-column prop="categoryName" label="名称" min-width="220" />
+        <el-table-column label="图标" width="100">
+          <template #default="{ row }: { row: CategoryTree }">
+            <el-image
+              v-if="row.categoryIcon"
+              :src="row.categoryIcon"
+              :preview-src-list="[row.categoryIcon]"
+              fit="cover"
+              style="width: 32px; height: 32px; border-radius: 4px;"
+            />
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="父级">
+          <template #default="{ row }: { row: CategoryTree }">
+            {{ row.parent?.categoryName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="子级数" width="100">
+          <template #default="{ row }: { row: CategoryTree }">
+            {{ row._count?.children ?? row.children?.length ?? 0 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="180" fixed="right">
+          <template #default="{ row }: { row: CategoryTree }">
+            <div class="table-actions">
+              <el-button size="small" type="primary" plain @click="openEditDialog(row)">
+                <el-icon><Edit /></el-icon>
+                <span>编辑</span>
+              </el-button>
+              <el-button size="small" type="danger" plain @click="handleDelete(row)">
+                <el-icon><Delete /></el-icon>
+                <span>删除</span>
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <el-empty description="暂无分类" />
+        </template>
+      </el-table>
+    </div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogMode === 'create' ? '新增分类' : '编辑分类'"
+      width="520px"
+      destroy-on-close
+    >
+      <el-form
+        ref="dialogRef"
+        :model="dialogForm"
+        :rules="dialogRules"
+        label-width="100px"
+      >
+        <el-form-item label="名称" prop="categoryName">
+          <el-input v-model="dialogForm.categoryName" placeholder="请输入分类名称" />
+        </el-form-item>
+        <el-form-item label="父级分类">
+          <el-cascader
+            v-model="dialogForm.parentCategoryId"
+            :options="cascaderOptions"
+            :props="{
+              checkStrictly: true,
+              value: 'value',
+              label: 'label',
+              children: 'children',
+              emitPath: false,
+            }"
+            placeholder="顶级（可选）"
+            clearable
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="图标 URL">
+          <el-input v-model="dialogForm.categoryIcon" placeholder="https://..." />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="dialogLoading" @click="handleSubmit">
+          {{ dialogMode === 'create' ? '创建' : '保存' }}
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.pagination {
+  margin-top: 16px;
+  justify-content: flex-end;
+}
+</style>

apps/admin/src/views/countries/CountriesView.vue

@@ -1,231 +1,231 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Edit, Delete, Refresh, Search } from '@element-plus/icons-vue'
-import type {
-  Country,
-  CreateCountryRequest,
-  UpdateCountryRequest,
-  CountryFilter,
-} from '@/types'
-import { countriesApi } from '@/api/countries'
-
-const loading = ref(false)
-const list = ref<Country[]>([])
-const total = ref(0)
-
-const filter = reactive<Required<CountryFilter>>({
-  countryName: '',
-  page: 1,
-  pageSize: 10,
-})
-
-async function fetchList() {
-  loading.value = true
-  try {
-    const res = await countriesApi.getCountriesList(filter)
-    const data = await countriesApi.getCountriesList(filter) as any
-    const arr = Array.isArray(data) ? data : (data.items ?? [])
-    list.value = arr
-    total.value = Array.isArray(data) ? data.length : (data.total ?? 0)
-  } finally {
-    loading.value = false
-  }
-}
-
-function handleSearch() {
-  filter.page = 1
-  fetchList()
-}
-
-function handleReset() {
-  filter.countryName = ''
-  filter.page = 1
-  fetchList()
-}
-
-const dialogRef = ref()
-const dialogVisible = ref(false)
-const dialogMode = ref<'create' | 'edit'>('create')
-const dialogLoading = ref(false)
-
-const dialogForm = reactive<CreateCountryRequest & { id?: string }>({
-  countryName: '',
-  countryIcon: '',
-})
-
-const dialogRules = {
-  countryName: [{ required: true, message: '名称是必填项', trigger: 'blur' }],
-}
-
-function openAddDialog() {
-  dialogMode.value = 'create'
-  Object.assign(dialogForm, { id: undefined, countryName: '', countryIcon: '' })
-  dialogVisible.value = true
-}
-
-function openEditDialog(c: Country) {
-  dialogMode.value = 'edit'
-  Object.assign(dialogForm, { id: c.id, countryName: c.countryName, countryIcon: c.countryIcon || '' })
-  dialogVisible.value = true
-}
-
-async function handleSubmit() {
-  if (!dialogRef.value) return
-  await dialogRef.value.validate(async (valid: boolean) => {
-    if (!valid) return
-    dialogLoading.value = true
-    try {
-      const payload: CreateCountryRequest = {
-        countryName: dialogForm.countryName,
-        countryIcon: dialogForm.countryIcon || undefined,
-      }
-      if (dialogMode.value === 'create') {
-        await countriesApi.createCountry(payload)
-        ElMessage.success('国家创建成功')
-      } else {
-        await countriesApi.updateCountry(dialogForm.id!, payload as UpdateCountryRequest)
-        ElMessage.success('国家更新成功')
-      }
-      dialogVisible.value = false
-      fetchList()
-    } finally {
-      dialogLoading.value = false
-    }
-  })
-}
-
-async function handleDelete(c: Country) {
-  try {
-    await ElMessageBox.confirm(`确定删除「${c.countryName}」吗？`, '确认', {
-      type: 'warning',
-      confirmButtonText: '删除',
-      cancelButtonText: '取消',
-    })
-  } catch {
-    return
-  }
-  await countriesApi.deleteCountry(c.id)
-  ElMessage.success('删除成功')
-  fetchList()
-}
-
-onMounted(fetchList)
-</script>
-
-<template>
-  <div class="page-container">
-    <div class="page-card">
-      <div class="filter-bar">
-        <el-input
-          v-model="filter.countryName"
-          placeholder="按名称搜索"
-          clearable
-          @keyup.enter="handleSearch"
-          @clear="handleSearch"
-        >
-          <template #prefix>
-            <el-icon><Search /></el-icon>
-          </template>
-        </el-input>
-        <el-button type="primary" @click="handleSearch">
-          <el-icon><Search /></el-icon>
-          <span>搜索</span>
-        </el-button>
-        <el-button @click="handleReset">
-          <el-icon><Refresh /></el-icon>
-          <span>重置</span>
-        </el-button>
-
-        <div class="filter-spacer" />
-
-        <el-button type="primary" @click="openAddDialog">
-          <el-icon><Plus /></el-icon>
-          <span>新增国家</span>
-        </el-button>
-      </div>
-
-      <el-table v-loading="loading" :data="list" border stripe>
-        <el-table-column label="图标" width="80">
-          <template #default="{ row }: { row: Country }">
-            <el-image
-              v-if="row.countryIcon"
-              :src="row.countryIcon"
-              :preview-src-list="[row.countryIcon]"
-              fit="cover"
-              style="width: 32px; height: 32px; border-radius: 4px;"
-            />
-            <span v-else>-</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="countryName" label="名称" min-width="200" />
-        <el-table-column label="创建时间" width="180">
-          <template #default="{ row }: { row: Country }">
-            {{ new Date(row.createdAt).toLocaleString() }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="180" fixed="right">
-          <template #default="{ row }: { row: Country }">
-            <div class="table-actions">
-              <el-button size="small" type="primary" plain @click="openEditDialog(row)">
-                <el-icon><Edit /></el-icon>
-                <span>编辑</span>
-              </el-button>
-              <el-button size="small" type="danger" plain @click="handleDelete(row)">
-                <el-icon><Delete /></el-icon>
-                <span>删除</span>
-              </el-button>
-            </div>
-          </template>
-        </el-table-column>
-        <template #empty>
-          <el-empty description="暂无国家" />
-        </template>
-      </el-table>
-
-      <el-pagination
-        class="pagination"
-        v-model:current-page="filter.page"
-        v-model:page-size="filter.pageSize"
-        :total="total"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        @current-change="(p: number) => { filter.page = p; fetchList() }"
-        @size-change="(s: number) => { filter.pageSize = s; filter.page = 1; fetchList() }"
-      />
-    </div>
-
-    <el-dialog
-      v-model="dialogVisible"
-      :title="dialogMode === 'create' ? '新增国家' : '编辑国家'"
-      width="480px"
-      destroy-on-close
-    >
-      <el-form ref="dialogRef" :model="dialogForm" :rules="dialogRules" label-width="100px">
-        <el-form-item label="名称" prop="countryName">
-          <el-input v-model="dialogForm.countryName" placeholder="请输入国家名称" />
-        </el-form-item>
-        <el-form-item label="图标 URL">
-          <el-input v-model="dialogForm.countryIcon" placeholder="https://..." />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="dialogLoading" @click="handleSubmit">
-          {{ dialogMode === 'create' ? '创建' : '保存' }}
-        </el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<style scoped>
-.filter-spacer {
-  flex: 1;
-}
-
-.pagination {
-  margin-top: 16px;
-  justify-content: flex-end;
-}
-</style>
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Edit, Delete, Refresh, Search } from '@element-plus/icons-vue'
+import type {
+  Country,
+  CreateCountryRequest,
+  UpdateCountryRequest,
+  CountryFilter,
+} from '@/types'
+import { countriesApi } from '@/api/countries'
+
+const loading = ref(false)
+const list = ref<Country[]>([])
+const total = ref(0)
+
+const filter = reactive<Required<CountryFilter>>({
+  countryName: '',
+  page: 1,
+  pageSize: 10,
+})
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await countriesApi.getCountriesList(filter)
+    const data = await countriesApi.getCountriesList(filter) as any
+    const arr = Array.isArray(data) ? data : (data.items ?? [])
+    list.value = arr
+    total.value = Array.isArray(data) ? data.length : (data.total ?? 0)
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSearch() {
+  filter.page = 1
+  fetchList()
+}
+
+function handleReset() {
+  filter.countryName = ''
+  filter.page = 1
+  fetchList()
+}
+
+const dialogRef = ref()
+const dialogVisible = ref(false)
+const dialogMode = ref<'create' | 'edit'>('create')
+const dialogLoading = ref(false)
+
+const dialogForm = reactive<CreateCountryRequest & { id?: string }>({
+  countryName: '',
+  countryIcon: '',
+})
+
+const dialogRules = {
+  countryName: [{ required: true, message: '名称是必填项', trigger: 'blur' }],
+}
+
+function openAddDialog() {
+  dialogMode.value = 'create'
+  Object.assign(dialogForm, { id: undefined, countryName: '', countryIcon: '' })
+  dialogVisible.value = true
+}
+
+function openEditDialog(c: Country) {
+  dialogMode.value = 'edit'
+  Object.assign(dialogForm, { id: c.id, countryName: c.countryName, countryIcon: c.countryIcon || '' })
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!dialogRef.value) return
+  await dialogRef.value.validate(async (valid: boolean) => {
+    if (!valid) return
+    dialogLoading.value = true
+    try {
+      const payload: CreateCountryRequest = {
+        countryName: dialogForm.countryName,
+        countryIcon: dialogForm.countryIcon || undefined,
+      }
+      if (dialogMode.value === 'create') {
+        await countriesApi.createCountry(payload)
+        ElMessage.success('国家创建成功')
+      } else {
+        await countriesApi.updateCountry(dialogForm.id!, payload as UpdateCountryRequest)
+        ElMessage.success('国家更新成功')
+      }
+      dialogVisible.value = false
+      fetchList()
+    } finally {
+      dialogLoading.value = false
+    }
+  })
+}
+
+async function handleDelete(c: Country) {
+  try {
+    await ElMessageBox.confirm(`确定删除「${c.countryName}」吗？`, '确认', {
+      type: 'warning',
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+    })
+  } catch {
+    return
+  }
+  await countriesApi.deleteCountry(c.id)
+  ElMessage.success('删除成功')
+  fetchList()
+}
+
+onMounted(fetchList)
+</script>
+
+<template>
+  <div class="page-container">
+    <div class="page-card">
+      <div class="filter-bar">
+        <el-input
+          v-model="filter.countryName"
+          placeholder="按名称搜索"
+          clearable
+          @keyup.enter="handleSearch"
+          @clear="handleSearch"
+        >
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+        <el-button type="primary" @click="handleSearch">
+          <el-icon><Search /></el-icon>
+          <span>搜索</span>
+        </el-button>
+        <el-button @click="handleReset">
+          <el-icon><Refresh /></el-icon>
+          <span>重置</span>
+        </el-button>
+
+        <div class="filter-spacer" />
+
+        <el-button type="primary" @click="openAddDialog">
+          <el-icon><Plus /></el-icon>
+          <span>新增国家</span>
+        </el-button>
+      </div>
+
+      <el-table v-loading="loading" :data="list" border stripe>
+        <el-table-column label="图标" width="80">
+          <template #default="{ row }: { row: Country }">
+            <el-image
+              v-if="row.countryIcon"
+              :src="row.countryIcon"
+              :preview-src-list="[row.countryIcon]"
+              fit="cover"
+              style="width: 32px; height: 32px; border-radius: 4px;"
+            />
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="countryName" label="名称" min-width="200" />
+        <el-table-column label="创建时间" width="180">
+          <template #default="{ row }: { row: Country }">
+            {{ new Date(row.createdAt).toLocaleString() }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="180" fixed="right">
+          <template #default="{ row }: { row: Country }">
+            <div class="table-actions">
+              <el-button size="small" type="primary" plain @click="openEditDialog(row)">
+                <el-icon><Edit /></el-icon>
+                <span>编辑</span>
+              </el-button>
+              <el-button size="small" type="danger" plain @click="handleDelete(row)">
+                <el-icon><Delete /></el-icon>
+                <span>删除</span>
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <el-empty description="暂无国家" />
+        </template>
+      </el-table>
+
+      <el-pagination
+        class="pagination"
+        v-model:current-page="filter.page"
+        v-model:page-size="filter.pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="(p: number) => { filter.page = p; fetchList() }"
+        @size-change="(s: number) => { filter.pageSize = s; filter.page = 1; fetchList() }"
+      />
+    </div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogMode === 'create' ? '新增国家' : '编辑国家'"
+      width="480px"
+      destroy-on-close
+    >
+      <el-form ref="dialogRef" :model="dialogForm" :rules="dialogRules" label-width="100px">
+        <el-form-item label="名称" prop="countryName">
+          <el-input v-model="dialogForm.countryName" placeholder="请输入国家名称" />
+        </el-form-item>
+        <el-form-item label="图标 URL">
+          <el-input v-model="dialogForm.countryIcon" placeholder="https://..." />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="dialogLoading" @click="handleSubmit">
+          {{ dialogMode === 'create' ? '创建' : '保存' }}
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.filter-spacer {
+  flex: 1;
+}
+
+.pagination {
+  margin-top: 16px;
+  justify-content: flex-end;
+}
+</style>

apps/admin/src/views/login/LoginView.vue

@@ -1,181 +1,181 @@
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
-import { useAuthStore } from '@/stores/auth'
-
-const router = useRouter()
-const authStore = useAuthStore()
-
-const formRef = ref<FormInstance>()
-const loading = ref(false)
-
-const form = reactive({
-  username: '',
-  password: '',
-})
-
-const rules: FormRules = {
-  username: [
-    { required: true, message: '请输入用户名', trigger: 'blur' },
-    { min: 2, max: 64, message: '长度 2-64', trigger: 'blur' },
-  ],
-  password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 4, max: 64, message: '长度 4-64', trigger: 'blur' },
-  ],
-}
-
-async function handleSubmit() {
-  if (!formRef.value) return
-  await formRef.value.validate(async (valid) => {
-    if (!valid) return
-    loading.value = true
-    try {
-      await authStore.login({ username: form.username, password: form.password })
-      ElMessage.success('登录成功')
-      router.push('/')
-    } catch (err) {
-      // Error toast is shown by axios response interceptor
-      console.error('Login failed', err)
-    } finally {
-      loading.value = false
-    }
-  })
-}
-</script>
-
-<template>
-  <div class="login-page">
-    <div class="login-bg" />
-    <div class="login-card">
-      <div class="login-brand">
-        <div class="brand-logo">Inkreach</div>
-        <div class="brand-subtitle">官网后台</div>
-      </div>
-
-      <el-form
-        ref="formRef"
-        :model="form"
-        :rules="rules"
-        size="large"
-        label-position="top"
-        @submit.prevent="handleSubmit"
-      >
-        <el-form-item label="用户名" prop="username">
-          <el-input
-            v-model="form.username"
-            placeholder="请输入用户名"
-            clearable
-            autocomplete="username"
-          >
-            <template #prefix>
-              <el-icon><User /></el-icon>
-            </template>
-          </el-input>
-        </el-form-item>
-
-        <el-form-item label="密码" prop="password">
-          <el-input
-            v-model="form.password"
-            type="password"
-            placeholder="请输入密码"
-            show-password
-            autocomplete="current-password"
-            @keyup.enter="handleSubmit"
-          >
-            <template #prefix>
-              <el-icon><Lock /></el-icon>
-            </template>
-          </el-input>
-        </el-form-item>
-
-        <el-form-item>
-          <el-button
-            type="primary"
-            class="login-button"
-            :loading="loading"
-            native-type="submit"
-            @click="handleSubmit"
-          >
-            登录
-          </el-button>
-        </el-form-item>
-      </el-form>
-
-      <div class="login-footer">
-        <span>© {{ new Date().getFullYear() }} Inkreach</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.login-page {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.login-bg {
-  position: absolute;
-  inset: 0;
-  background:
-    radial-gradient(circle at 20% 20%, rgba(255, 104, 0, 0.18), transparent 60%),
-    radial-gradient(circle at 80% 80%, rgba(255, 141, 31, 0.15), transparent 60%),
-    linear-gradient(135deg, #1f1f24 0%, #2b2b33 100%);
-  z-index: 0;
-}
-
-.login-card {
-  position: relative;
-  z-index: 1;
-  width: 420px;
-  max-width: calc(100vw - 32px);
-  padding: 40px 36px 28px;
-  background: rgba(255, 255, 255, 0.97);
-  border-radius: 12px;
-  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
-}
-
-.login-brand {
-  text-align: center;
-  margin-bottom: 24px;
-}
-
-.brand-logo {
-  font-size: 28px;
-  font-weight: 700;
-  color: var(--brand-color);
-  letter-spacing: 0.5px;
-}
-
-.brand-subtitle {
-  font-size: 13px;
-  color: #6b7280;
-  margin-top: 6px;
-}
-
-.login-button {
-  width: 100%;
-  height: 44px;
-  font-weight: 600;
-  font-size: 15px;
-}
-
-.login-footer {
-  text-align: center;
-  color: #9ca3af;
-  font-size: 12px;
-  margin-top: 8px;
-}
-
-:deep(.el-form-item__label) {
-  font-weight: 500;
-  color: #374151;
-}
-</style>
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const formRef = ref<FormInstance>()
+const loading = ref(false)
+
+const form = reactive({
+  username: '',
+  password: '',
+})
+
+const rules: FormRules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 2, max: 64, message: '长度 2-64', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 4, max: 64, message: '长度 4-64', trigger: 'blur' },
+  ],
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (!valid) return
+    loading.value = true
+    try {
+      await authStore.login({ username: form.username, password: form.password })
+      ElMessage.success('登录成功')
+      router.push('/')
+    } catch (err) {
+      // Error toast is shown by axios response interceptor
+      console.error('Login failed', err)
+    } finally {
+      loading.value = false
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="login-page">
+    <div class="login-bg" />
+    <div class="login-card">
+      <div class="login-brand">
+        <div class="brand-logo">Inkreach</div>
+        <div class="brand-subtitle">官网后台</div>
+      </div>
+
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        size="large"
+        label-position="top"
+        @submit.prevent="handleSubmit"
+      >
+        <el-form-item label="用户名" prop="username">
+          <el-input
+            v-model="form.username"
+            placeholder="请输入用户名"
+            clearable
+            autocomplete="username"
+          >
+            <template #prefix>
+              <el-icon><User /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="密码" prop="password">
+          <el-input
+            v-model="form.password"
+            type="password"
+            placeholder="请输入密码"
+            show-password
+            autocomplete="current-password"
+            @keyup.enter="handleSubmit"
+          >
+            <template #prefix>
+              <el-icon><Lock /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button
+            type="primary"
+            class="login-button"
+            :loading="loading"
+            native-type="submit"
+            @click="handleSubmit"
+          >
+            登录
+          </el-button>
+        </el-form-item>
+      </el-form>
+
+      <div class="login-footer">
+        <span>© {{ new Date().getFullYear() }} Inkreach</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-page {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.login-bg {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 20% 20%, rgba(255, 104, 0, 0.18), transparent 60%),
+    radial-gradient(circle at 80% 80%, rgba(255, 141, 31, 0.15), transparent 60%),
+    linear-gradient(135deg, #1f1f24 0%, #2b2b33 100%);
+  z-index: 0;
+}
+
+.login-card {
+  position: relative;
+  z-index: 1;
+  width: 420px;
+  max-width: calc(100vw - 32px);
+  padding: 40px 36px 28px;
+  background: rgba(255, 255, 255, 0.97);
+  border-radius: 12px;
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
+}
+
+.login-brand {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.brand-logo {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--brand-color);
+  letter-spacing: 0.5px;
+}
+
+.brand-subtitle {
+  font-size: 13px;
+  color: #6b7280;
+  margin-top: 6px;
+}
+
+.login-button {
+  width: 100%;
+  height: 44px;
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.login-footer {
+  text-align: center;
+  color: #9ca3af;
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 500;
+  color: #374151;
+}
+</style>

apps/admin/src/views/positions/PositionsView.vue

@@ -1,317 +1,317 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Edit, Delete, Refresh, Search } from '@element-plus/icons-vue'
-import type {
-  Position,
-  CreatePositionRequest,
-  UpdatePositionRequest,
-  PositionFilter,
-  Country,
-  Category,
-  CategoryTree,
-} from '@/types'
-import { positionsApi } from '@/api/positions'
-import { countriesApi } from '@/api/countries'
-import { categoriesApi } from '@/api/categories'
-
-const loading = ref(false)
-const list = ref<Position[]>([])
-const total = ref(0)
-
-const countries = ref<Country[]>([])
-const categoriesTree = ref<CategoryTree[]>([])
-
-const filter = reactive<Required<PositionFilter>>({
-  countryId: '',
-  categoryId: '',
-  page: 1,
-  pageSize: 10,
-})
-
-async function loadLookups() {
-  const [c, ct] = await Promise.all([
-    countriesApi.getCountriesList({ page: 1, pageSize: 500 }),
-    categoriesApi.getCategoryTree(),
-  ])
-  countries.value = c.items
-  categoriesTree.value = ct
-}
-
-async function fetchList() {
-  loading.value = true
-  try {
-    const res = await positionsApi.getPositionsList(filter)
-    const data = await positionsApi.getPositionsList(filter) as any
-    const arr = Array.isArray(data) ? data : (data.items ?? [])
-    list.value = arr
-    total.value = Array.isArray(data) ? data.length : (data.total ?? 0)
-  } finally {
-    loading.value = false
-  }
-}
-
-function handleSearch() {
-  filter.page = 1
-  fetchList()
-}
-
-function handleReset() {
-  filter.countryId = ''
-  filter.categoryId = ''
-  filter.page = 1
-  fetchList()
-}
-
-// ---------- Cascader ----------
-interface CascaderNode {
-  value: string
-  label: string
-  children?: CascaderNode[]
-}
-
-const cascaderOptions = ref<CascaderNode[]>([])
-
-function buildCascader(nodes: CategoryTree[]): CascaderNode[] {
-  return nodes.map((n) => ({
-    value: n.id,
-    label: n.categoryName,
-    children: n.children?.length ? buildCascader(n.children) : undefined,
-  }))
-}
-
-// ---------- Dialog ----------
-const dialogRef = ref()
-const dialogVisible = ref(false)
-const dialogMode = ref<'create' | 'edit'>('create')
-const dialogLoading = ref(false)
-
-const dialogForm = reactive<CreatePositionRequest & { id?: string }>({
-  indexVal: 0,
-  countryId: '',
-  categoryId: '',
-})
-
-const dialogRules = {
-  indexVal: [{ required: true, message: '排序值是必填项', trigger: 'blur' }],
-}
-
-function rebuildCascader() {
-  cascaderOptions.value = buildCascader(categoriesTree.value)
-}
-
-function openAddDialog() {
-  dialogMode.value = 'create'
-  Object.assign(dialogForm, { id: undefined, indexVal: 0, countryId: '', categoryId: '' })
-  rebuildCascader()
-  dialogVisible.value = true
-}
-
-function openEditDialog(p: Position) {
-  dialogMode.value = 'edit'
-  Object.assign(dialogForm, {
-    id: p.id,
-    indexVal: p.indexVal,
-    countryId: p.countryId || '',
-    categoryId: p.categoryId || '',
-  })
-  rebuildCascader()
-  dialogVisible.value = true
-}
-
-async function handleSubmit() {
-  if (!dialogRef.value) return
-  await dialogRef.value.validate(async (valid: boolean) => {
-    if (!valid) return
-    dialogLoading.value = true
-    try {
-      const payload: CreatePositionRequest = {
-        indexVal: Number(dialogForm.indexVal),
-        countryId: dialogForm.countryId || undefined,
-        categoryId: dialogForm.categoryId || undefined,
-      }
-      if (dialogMode.value === 'create') {
-        await positionsApi.createPosition(payload)
-        ElMessage.success('位置创建成功')
-      } else {
-        await positionsApi.updatePosition(dialogForm.id!, payload as UpdatePositionRequest)
-        ElMessage.success('位置更新成功')
-      }
-      dialogVisible.value = false
-      fetchList()
-    } finally {
-      dialogLoading.value = false
-    }
-  })
-}
-
-async function handleDelete(p: Position) {
-  try {
-    await ElMessageBox.confirm(`确定删除位置 #${p.indexVal} 吗？`, '确认', {
-      type: 'warning',
-      confirmButtonText: '删除',
-      cancelButtonText: '取消',
-    })
-  } catch {
-    return
-  }
-  await positionsApi.deletePosition(p.id)
-  ElMessage.success('删除成功')
-  fetchList()
-}
-
-function getCategoryName(p: Position): string {
-  if (!p.category) return p.categoryId || '-'
-  return p.category.parent ? `${p.category.parent.categoryName} / ${p.category.categoryName}` : p.category.categoryName
-}
-
-onMounted(async () => {
-  await loadLookups()
-  await fetchList()
-})
-</script>
-
-<template>
-  <div class="page-container">
-    <div class="page-card">
-      <div class="filter-bar">
-        <el-select
-          v-model="filter.countryId"
-          placeholder="请选择国家"
-          clearable
-          @change="handleSearch"
-        >
-          <el-option
-            v-for="c in countries"
-            :key="c.id"
-            :label="c.countryName"
-            :value="c.id"
-          />
-        </el-select>
-
-        <el-cascader
-          v-model="filter.categoryId"
-          :options="cascaderOptions"
-          :props="{ checkStrictly: true, value: 'value', label: 'label', children: 'children', emitPath: false }"
-          placeholder="请选择分类"
-          clearable
-          @change="handleSearch"
-        />
-
-        <el-button type="primary" @click="handleSearch">
-          <el-icon><Search /></el-icon>
-          <span>搜索</span>
-        </el-button>
-        <el-button @click="handleReset">
-          <el-icon><Refresh /></el-icon>
-          <span>重置</span>
-        </el-button>
-
-        <div class="filter-spacer" />
-
-        <el-button type="primary" @click="openAddDialog">
-          <el-icon><Plus /></el-icon>
-          <span>新增位置</span>
-        </el-button>
-      </div>
-
-      <el-table v-loading="loading" :data="list" border stripe>
-        <el-table-column label="排序值" prop="indexVal" width="100" sortable />
-        <el-table-column label="国家" min-width="160">
-          <template #default="{ row }: { row: Position }">
-            {{ row.country?.countryName || '-' }}
-          </template>
-        </el-table-column>
-        <el-table-column label="分类" min-width="200">
-          <template #default="{ row }: { row: Position }">
-            {{ getCategoryName(row) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="180" fixed="right">
-          <template #default="{ row }: { row: Position }">
-            <div class="table-actions">
-              <el-button size="small" type="primary" plain @click="openEditDialog(row)">
-                <el-icon><Edit /></el-icon>
-                <span>编辑</span>
-              </el-button>
-              <el-button size="small" type="danger" plain @click="handleDelete(row)">
-                <el-icon><Delete /></el-icon>
-                <span>删除</span>
-              </el-button>
-            </div>
-          </template>
-        </el-table-column>
-        <template #empty>
-          <el-empty description="暂无位置" />
-        </template>
-      </el-table>
-
-      <el-pagination
-        class="pagination"
-        v-model:current-page="filter.page"
-        v-model:page-size="filter.pageSize"
-        :total="total"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        @current-change="(p: number) => { filter.page = p; fetchList() }"
-        @size-change="(s: number) => { filter.pageSize = s; filter.page = 1; fetchList() }"
-      />
-    </div>
-
-    <el-dialog
-      v-model="dialogVisible"
-      :title="dialogMode === 'create' ? '新增位置' : '编辑位置'"
-      width="520px"
-      destroy-on-close
-    >
-      <el-form ref="dialogRef" :model="dialogForm" :rules="dialogRules" label-width="100px">
-        <el-form-item label="排序值" prop="indexVal">
-          <el-input-number v-model="dialogForm.indexVal" :min="0" :max="9999" />
-        </el-form-item>
-        <el-form-item label="国家">
-          <el-select v-model="dialogForm.countryId" placeholder="可选" clearable style="width: 100%">
-            <el-option
-              v-for="c in countries"
-              :key="c.id"
-              :label="c.countryName"
-              :value="c.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="分类">
-          <el-cascader
-            v-model="dialogForm.categoryId"
-            :options="cascaderOptions"
-            :props="{
-              checkStrictly: true,
-              value: 'value',
-              label: 'label',
-              children: 'children',
-              emitPath: false,
-            }"
-            placeholder="可选"
-            clearable
-            style="width: 100%"
-          />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="dialogLoading" @click="handleSubmit">
-          {{ dialogMode === 'create' ? '创建' : '保存' }}
-        </el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<style scoped>
-.filter-spacer {
-  flex: 1;
-}
-
-.pagination {
-  margin-top: 16px;
-  justify-content: flex-end;
-}
-</style>
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Edit, Delete, Refresh, Search } from '@element-plus/icons-vue'
+import type {
+  Position,
+  CreatePositionRequest,
+  UpdatePositionRequest,
+  PositionFilter,
+  Country,
+  Category,
+  CategoryTree,
+} from '@/types'
+import { positionsApi } from '@/api/positions'
+import { countriesApi } from '@/api/countries'
+import { categoriesApi } from '@/api/categories'
+
+const loading = ref(false)
+const list = ref<Position[]>([])
+const total = ref(0)
+
+const countries = ref<Country[]>([])
+const categoriesTree = ref<CategoryTree[]>([])
+
+const filter = reactive<Required<PositionFilter>>({
+  countryId: '',
+  categoryId: '',
+  page: 1,
+  pageSize: 10,
+})
+
+async function loadLookups() {
+  const [c, ct] = await Promise.all([
+    countriesApi.getCountriesList({ page: 1, pageSize: 500 }),
+    categoriesApi.getCategoryTree(),
+  ])
+  countries.value = c.items
+  categoriesTree.value = ct
+}
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await positionsApi.getPositionsList(filter)
+    const data = await positionsApi.getPositionsList(filter) as any
+    const arr = Array.isArray(data) ? data : (data.items ?? [])
+    list.value = arr
+    total.value = Array.isArray(data) ? data.length : (data.total ?? 0)
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSearch() {
+  filter.page = 1
+  fetchList()
+}
+
+function handleReset() {
+  filter.countryId = ''
+  filter.categoryId = ''
+  filter.page = 1
+  fetchList()
+}
+
+// ---------- Cascader ----------
+interface CascaderNode {
+  value: string
+  label: string
+  children?: CascaderNode[]
+}
+
+const cascaderOptions = ref<CascaderNode[]>([])
+
+function buildCascader(nodes: CategoryTree[]): CascaderNode[] {
+  return nodes.map((n) => ({
+    value: n.id,
+    label: n.categoryName,
+    children: n.children?.length ? buildCascader(n.children) : undefined,
+  }))
+}
+
+// ---------- Dialog ----------
+const dialogRef = ref()
+const dialogVisible = ref(false)
+const dialogMode = ref<'create' | 'edit'>('create')
+const dialogLoading = ref(false)
+
+const dialogForm = reactive<CreatePositionRequest & { id?: string }>({
+  indexVal: 0,
+  countryId: '',
+  categoryId: '',
+})
+
+const dialogRules = {
+  indexVal: [{ required: true, message: '排序值是必填项', trigger: 'blur' }],
+}
+
+function rebuildCascader() {
+  cascaderOptions.value = buildCascader(categoriesTree.value)
+}
+
+function openAddDialog() {
+  dialogMode.value = 'create'
+  Object.assign(dialogForm, { id: undefined, indexVal: 0, countryId: '', categoryId: '' })
+  rebuildCascader()
+  dialogVisible.value = true
+}
+
+function openEditDialog(p: Position) {
+  dialogMode.value = 'edit'
+  Object.assign(dialogForm, {
+    id: p.id,
+    indexVal: p.indexVal,
+    countryId: p.countryId || '',
+    categoryId: p.categoryId || '',
+  })
+  rebuildCascader()
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!dialogRef.value) return
+  await dialogRef.value.validate(async (valid: boolean) => {
+    if (!valid) return
+    dialogLoading.value = true
+    try {
+      const payload: CreatePositionRequest = {
+        indexVal: Number(dialogForm.indexVal),
+        countryId: dialogForm.countryId || undefined,
+        categoryId: dialogForm.categoryId || undefined,
+      }
+      if (dialogMode.value === 'create') {
+        await positionsApi.createPosition(payload)
+        ElMessage.success('位置创建成功')
+      } else {
+        await positionsApi.updatePosition(dialogForm.id!, payload as UpdatePositionRequest)
+        ElMessage.success('位置更新成功')
+      }
+      dialogVisible.value = false
+      fetchList()
+    } finally {
+      dialogLoading.value = false
+    }
+  })
+}
+
+async function handleDelete(p: Position) {
+  try {
+    await ElMessageBox.confirm(`确定删除位置 #${p.indexVal} 吗？`, '确认', {
+      type: 'warning',
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+    })
+  } catch {
+    return
+  }
+  await positionsApi.deletePosition(p.id)
+  ElMessage.success('删除成功')
+  fetchList()
+}
+
+function getCategoryName(p: Position): string {
+  if (!p.category) return p.categoryId || '-'
+  return p.category.parent ? `${p.category.parent.categoryName} / ${p.category.categoryName}` : p.category.categoryName
+}
+
+onMounted(async () => {
+  await loadLookups()
+  await fetchList()
+})
+</script>
+
+<template>
+  <div class="page-container">
+    <div class="page-card">
+      <div class="filter-bar">
+        <el-select
+          v-model="filter.countryId"
+          placeholder="请选择国家"
+          clearable
+          @change="handleSearch"
+        >
+          <el-option
+            v-for="c in countries"
+            :key="c.id"
+            :label="c.countryName"
+            :value="c.id"
+          />
+        </el-select>
+
+        <el-cascader
+          v-model="filter.categoryId"
+          :options="cascaderOptions"
+          :props="{ checkStrictly: true, value: 'value', label: 'label', children: 'children', emitPath: false }"
+          placeholder="请选择分类"
+          clearable
+          @change="handleSearch"
+        />
+
+        <el-button type="primary" @click="handleSearch">
+          <el-icon><Search /></el-icon>
+          <span>搜索</span>
+        </el-button>
+        <el-button @click="handleReset">
+          <el-icon><Refresh /></el-icon>
+          <span>重置</span>
+        </el-button>
+
+        <div class="filter-spacer" />
+
+        <el-button type="primary" @click="openAddDialog">
+          <el-icon><Plus /></el-icon>
+          <span>新增位置</span>
+        </el-button>
+      </div>
+
+      <el-table v-loading="loading" :data="list" border stripe>
+        <el-table-column label="排序值" prop="indexVal" width="100" sortable />
+        <el-table-column label="国家" min-width="160">
+          <template #default="{ row }: { row: Position }">
+            {{ row.country?.countryName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="分类" min-width="200">
+          <template #default="{ row }: { row: Position }">
+            {{ getCategoryName(row) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="180" fixed="right">
+          <template #default="{ row }: { row: Position }">
+            <div class="table-actions">
+              <el-button size="small" type="primary" plain @click="openEditDialog(row)">
+                <el-icon><Edit /></el-icon>
+                <span>编辑</span>
+              </el-button>
+              <el-button size="small" type="danger" plain @click="handleDelete(row)">
+                <el-icon><Delete /></el-icon>
+                <span>删除</span>
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <el-empty description="暂无位置" />
+        </template>
+      </el-table>
+
+      <el-pagination
+        class="pagination"
+        v-model:current-page="filter.page"
+        v-model:page-size="filter.pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="(p: number) => { filter.page = p; fetchList() }"
+        @size-change="(s: number) => { filter.pageSize = s; filter.page = 1; fetchList() }"
+      />
+    </div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogMode === 'create' ? '新增位置' : '编辑位置'"
+      width="520px"
+      destroy-on-close
+    >
+      <el-form ref="dialogRef" :model="dialogForm" :rules="dialogRules" label-width="100px">
+        <el-form-item label="排序值" prop="indexVal">
+          <el-input-number v-model="dialogForm.indexVal" :min="0" :max="9999" />
+        </el-form-item>
+        <el-form-item label="国家">
+          <el-select v-model="dialogForm.countryId" placeholder="可选" clearable style="width: 100%">
+            <el-option
+              v-for="c in countries"
+              :key="c.id"
+              :label="c.countryName"
+              :value="c.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="分类">
+          <el-cascader
+            v-model="dialogForm.categoryId"
+            :options="cascaderOptions"
+            :props="{
+              checkStrictly: true,
+              value: 'value',
+              label: 'label',
+              children: 'children',
+              emitPath: false,
+            }"
+            placeholder="可选"
+            clearable
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="dialogLoading" @click="handleSubmit">
+          {{ dialogMode === 'create' ? '创建' : '保存' }}
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.filter-spacer {
+  flex: 1;
+}
+
+.pagination {
+  margin-top: 16px;
+  justify-content: flex-end;
+}
+</style>

apps/admin/src/views/product-management/ProductManagementView.vue

@@ -1,55 +1,55 @@
-<script setup lang="ts">
-import { markRaw, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { Goods, Refresh } from '@element-plus/icons-vue'
-import GoodsView from '@/views/goods/GoodsView.vue'
-import SyncView from '@/views/sync/SyncView.vue'
-
-const route = useRoute()
-const router = useRouter()
-
-const tabs = [
-  { name: 'goods', label: '商品配置', icon: markRaw(Goods), comp: markRaw(GoodsView) },
-  { name: 'sync', label: '数据同步', icon: markRaw(Refresh), comp: markRaw(SyncView) },
-]
-
-const activeTab = ref((route.query.tab as string) || 'goods')
-
-watch(activeTab, (val) => {
-  router.replace({ query: { ...route.query, tab: val } })
-})
-</script>
-
-<template>
-  <div class="pm-wrapper">
-    <el-tabs v-model="activeTab" class="pm-tabs" type="card">
-      <el-tab-pane
-        v-for="t in tabs"
-        :key="t.name"
-        :name="t.name"
-      >
-        <template #label>
-          <span class="pm-tab-label">
-            <el-icon class="pm-tab-icon"><component :is="t.icon" /></el-icon>
-            {{ t.label }}
-          </span>
-        </template>
-        <component :is="t.comp" />
-      </el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-
-<style scoped>
-.pm-wrapper { height: 100%; display: flex; flex-direction: column; }
-.pm-tabs { height: 100%; display: flex; flex-direction: column; }
-.pm-tabs :deep(.el-tabs__header) { margin-bottom: 0; flex-shrink: 0; }
-.pm-tabs :deep(.el-tabs__content) { flex: 1; min-height: 0; overflow: hidden; }
-.pm-tabs :deep(.el-tab-pane) { height: 100%; }
-.pm-tab-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-.pm-tab-icon { font-size: 14px; }
-</style>
+<script setup lang="ts">
+import { markRaw, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { Goods, Refresh } from '@element-plus/icons-vue'
+import GoodsView from '@/views/goods/GoodsView.vue'
+import SyncView from '@/views/sync/SyncView.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const tabs = [
+  { name: 'goods', label: '商品配置', icon: markRaw(Goods), comp: markRaw(GoodsView) },
+  { name: 'sync', label: '数据同步', icon: markRaw(Refresh), comp: markRaw(SyncView) },
+]
+
+const activeTab = ref((route.query.tab as string) || 'goods')
+
+watch(activeTab, (val) => {
+  router.replace({ query: { ...route.query, tab: val } })
+})
+</script>
+
+<template>
+  <div class="pm-wrapper">
+    <el-tabs v-model="activeTab" class="pm-tabs" type="card">
+      <el-tab-pane
+        v-for="t in tabs"
+        :key="t.name"
+        :name="t.name"
+      >
+        <template #label>
+          <span class="pm-tab-label">
+            <el-icon class="pm-tab-icon"><component :is="t.icon" /></el-icon>
+            {{ t.label }}
+          </span>
+        </template>
+        <component :is="t.comp" />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<style scoped>
+.pm-wrapper { height: 100%; display: flex; flex-direction: column; }
+.pm-tabs { height: 100%; display: flex; flex-direction: column; }
+.pm-tabs :deep(.el-tabs__header) { margin-bottom: 0; flex-shrink: 0; }
+.pm-tabs :deep(.el-tabs__content) { flex: 1; min-height: 0; overflow: hidden; }
+.pm-tabs :deep(.el-tab-pane) { height: 100%; }
+.pm-tab-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.pm-tab-icon { font-size: 14px; }
+</style>

apps/admin/src/views/sync/SyncView.vue

@@ -1,31 +1,31 @@
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Refresh, Box, Clock, CircleCheck, CircleClose, Loading } from '@element-plus/icons-vue'
-import type { SyncLog } from '@/types'
-import { syncApi } from '@/api/sync'
-
-const logs = ref<SyncLog[]>([])
-const loading = ref(false)
-const syncing = ref(false)
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Refresh, Box, Clock, CircleCheck, CircleClose, Loading } from '@element-plus/icons-vue'
+import type { SyncLog } from '@/types'
+import { syncApi } from '@/api/sync'
+
+const logs = ref<SyncLog[]>([])
+const loading = ref(false)
+const syncing = ref(false)
 type SyncType = 'PRODUCTS' | 'CATEGORIES' | 'PRODUCT_DETAILS'
 const currentType = ref<SyncType>('PRODUCTS')
-
-let timer: ReturnType<typeof setInterval> | null = null
-let pollTimer: ReturnType<typeof setInterval> | null = null
-
-async function refreshLogs() {
-  loading.value = true
-  try {
-    const data = await syncApi.getSyncStatus(50) as any
-    logs.value = Array.isArray(data) ? data : []
-  } catch (err) {
-    console.warn('Failed to fetch sync status', err)
-  } finally {
-    loading.value = false
-  }
-}
-
+
+let timer: ReturnType<typeof setInterval> | null = null
+let pollTimer: ReturnType<typeof setInterval> | null = null
+
+async function refreshLogs() {
+  loading.value = true
+  try {
+    const data = await syncApi.getSyncStatus(50) as any
+    logs.value = Array.isArray(data) ? data : []
+  } catch (err) {
+    console.warn('Failed to fetch sync status', err)
+  } finally {
+    loading.value = false
+  }
+}
+
 function syncTypeLabel(type: SyncType): string {
   if (type === 'CATEGORIES') return '分类'
   if (type === 'PRODUCT_DETAILS') return '全部原产品详情'
@@ -33,33 +33,33 @@ function syncTypeLabel(type: SyncType): string {
 }
 
 async function pollUntilDone(type: SyncType) {
-  if (pollTimer) clearInterval(pollTimer)
-  pollTimer = setInterval(async () => {
-    try {
-      const data = await syncApi.getSyncStatus(5) as any
-      const latest = Array.isArray(data) ? data : []
-      if (latest.length > 0) logs.value = [...latest, ...logs.value.slice(latest.length)]
-      const top = latest.find((l: SyncLog) => l.type === type)
-      if (top && top.status !== 'RUNNING') {
-        if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
-        syncing.value = false
-        if (top.status === 'SUCCESS') {
+  if (pollTimer) clearInterval(pollTimer)
+  pollTimer = setInterval(async () => {
+    try {
+      const data = await syncApi.getSyncStatus(5) as any
+      const latest = Array.isArray(data) ? data : []
+      if (latest.length > 0) logs.value = [...latest, ...logs.value.slice(latest.length)]
+      const top = latest.find((l: SyncLog) => l.type === type)
+      if (top && top.status !== 'RUNNING') {
+        if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
+        syncing.value = false
+        if (top.status === 'SUCCESS') {
           ElMessage.success(`${syncTypeLabel(type)}同步完成`)
-        } else {
+        } else {
           ElMessage.error(`${syncTypeLabel(type)}同步失败`)
-        }
-        await refreshLogs()
-      }
-    } catch { /* ignore poll errors */ }
-  }, 3000)
-}
-
-async function handleSyncProducts() {
-  await doSync('PRODUCTS')
-}
-
+        }
+        await refreshLogs()
+      }
+    } catch { /* ignore poll errors */ }
+  }, 3000)
+}
+
+async function handleSyncProducts() {
+  await doSync('PRODUCTS')
+}
+
 async function handleSyncCategories() {
-  await doSync('CATEGORIES')
+  await doSync('CATEGORIES')
 }
 
 async function handleSyncProductDetails() {
@@ -68,94 +68,94 @@ async function handleSyncProductDetails() {
 
 async function doSync(type: SyncType) {
   const label = syncTypeLabel(type)
-  try {
-    await ElMessageBox.confirm(
+  try {
+    await ElMessageBox.confirm(
       `确定立即执行${label}同步吗？${type === 'PRODUCT_DETAILS' ? '将同步全部有效原产品，耗时取决于原产品数量。' : type !== 'CATEGORIES' ? '此操作可能需要几分钟。' : ''}`,
-      '确认',
-      { type: 'info', confirmButtonText: '执行', cancelButtonText: '取消' }
-    )
-  } catch { return }
-
-  syncing.value = true
-  currentType.value = type
-  try {
+      '确认',
+      { type: 'info', confirmButtonText: '执行', cancelButtonText: '取消' }
+    )
+  } catch { return }
+
+  syncing.value = true
+  currentType.value = type
+  try {
     if (type === 'PRODUCTS') {
       await syncApi.syncProducts()
     } else if (type === 'PRODUCT_DETAILS') {
       await syncApi.syncProductDetails()
-    } else {
-      await syncApi.syncCategories()
-    }
-    ElMessage.info(`${label}同步已开始`)
-    pollUntilDone(type)
-  } catch {
-    ElMessage.error(`${label}同步启动失败`)
-    syncing.value = false
-  }
-}
-
-function formatTime(s?: string): string {
-  if (!s) return '-'
-  const d = new Date(s)
-  return `${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
-}
-
-function formatDuration(start?: string, end?: string): string | null {
-  if (!start || !end) return null
-  const ms = new Date(end).getTime() - new Date(start).getTime()
-  if (ms < 1000) return `${ms}ms`
-  return `${(ms / 1000).toFixed(1)}s`
-}
-
-const stats = computed(() => {
+    } else {
+      await syncApi.syncCategories()
+    }
+    ElMessage.info(`${label}同步已开始`)
+    pollUntilDone(type)
+  } catch {
+    ElMessage.error(`${label}同步启动失败`)
+    syncing.value = false
+  }
+}
+
+function formatTime(s?: string): string {
+  if (!s) return '-'
+  const d = new Date(s)
+  return `${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
+}
+
+function formatDuration(start?: string, end?: string): string | null {
+  if (!start || !end) return null
+  const ms = new Date(end).getTime() - new Date(start).getTime()
+  if (ms < 1000) return `${ms}ms`
+  return `${(ms / 1000).toFixed(1)}s`
+}
+
+const stats = computed(() => {
   const total = logs.value.length
   const success = logs.value.filter(l => l.status === 'SUCCESS').length
   const failed = logs.value.filter(l => l.status === 'FAILED').length
   const lastLog = logs.value[0]
-  return { total, success, failed, lastLog }
-})
-
-onMounted(() => {
-  refreshLogs()
-  timer = setInterval(refreshLogs, 60_000)
-})
-
-onUnmounted(() => {
-  if (timer) clearInterval(timer)
-  if (pollTimer) clearInterval(pollTimer)
-})
-</script>
-
-<template>
-  <div class="sync-page" v-loading="loading">
-    <!-- Action Card -->
-    <div class="sync-action-card">
-      <div class="sync-action-info">
-        <div class="sync-action-icon">
-          <el-icon :size="28"><Box /></el-icon>
-        </div>
-        <div>
-          <h2 class="sync-action-title">数据同步</h2>
+  return { total, success, failed, lastLog }
+})
+
+onMounted(() => {
+  refreshLogs()
+  timer = setInterval(refreshLogs, 60_000)
+})
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+  if (pollTimer) clearInterval(pollTimer)
+})
+</script>
+
+<template>
+  <div class="sync-page" v-loading="loading">
+    <!-- Action Card -->
+    <div class="sync-action-card">
+      <div class="sync-action-info">
+        <div class="sync-action-icon">
+          <el-icon :size="28"><Box /></el-icon>
+        </div>
+        <div>
+          <h2 class="sync-action-title">数据同步</h2>
           <p class="sync-action-desc">分类和产品每小时自动同步；全部 SDS 原产品详情每天 03:30 自动同步，也可手动执行</p>
-        </div>
-      </div>
-      <div class="sync-action-buttons">
-        <el-button
-          size="large"
-          :loading="syncing && currentType === 'CATEGORIES'"
-          :disabled="syncing"
-          @click="handleSyncCategories"
-        >
-          同步分类
-        </el-button>
-        <el-button
-          type="primary"
-          size="large"
+        </div>
+      </div>
+      <div class="sync-action-buttons">
+        <el-button
+          size="large"
+          :loading="syncing && currentType === 'CATEGORIES'"
+          :disabled="syncing"
+          @click="handleSyncCategories"
+        >
+          同步分类
+        </el-button>
+        <el-button
+          type="primary"
+          size="large"
           :loading="syncing && currentType === 'PRODUCTS'"
-          :disabled="syncing"
-          :icon="Refresh"
-          @click="handleSyncProducts"
-        >
+          :disabled="syncing"
+          :icon="Refresh"
+          @click="handleSyncProducts"
+        >
           同步产品
         </el-button>
         <el-button
@@ -168,307 +168,307 @@ onUnmounted(() => {
         >
           同步全部原产品详情
         </el-button>
-      </div>
-    </div>
-
-    <!-- Stats Row -->
-    <div class="sync-stats">
-      <div class="stat-item">
-        <span class="stat-value">{{ stats.total }}</span>
-        <span class="stat-label">总同步次数</span>
-      </div>
-      <div class="stat-divider" />
-      <div class="stat-item">
-        <span class="stat-value stat-success">{{ stats.success }}</span>
-        <span class="stat-label">成功</span>
-      </div>
-      <div class="stat-divider" />
-      <div class="stat-item">
-        <span class="stat-value stat-failed">{{ stats.failed }}</span>
-        <span class="stat-label">失败</span>
-      </div>
-      <div class="stat-divider" />
-      <div class="stat-item">
+      </div>
+    </div>
+
+    <!-- Stats Row -->
+    <div class="sync-stats">
+      <div class="stat-item">
+        <span class="stat-value">{{ stats.total }}</span>
+        <span class="stat-label">总同步次数</span>
+      </div>
+      <div class="stat-divider" />
+      <div class="stat-item">
+        <span class="stat-value stat-success">{{ stats.success }}</span>
+        <span class="stat-label">成功</span>
+      </div>
+      <div class="stat-divider" />
+      <div class="stat-item">
+        <span class="stat-value stat-failed">{{ stats.failed }}</span>
+        <span class="stat-label">失败</span>
+      </div>
+      <div class="stat-divider" />
+      <div class="stat-item">
         <span class="stat-value stat-time">{{ stats.lastLog ? formatTime(stats.lastLog.startedAt) : '-' }}</span>
-        <span class="stat-label">最近同步</span>
-      </div>
-    </div>
-
-    <!-- Log Timeline -->
-    <div class="sync-logs">
-      <div class="sync-logs-head">
-        <h3 class="sync-logs-title">同步日志</h3>
-        <el-button text :icon="Refresh" @click="refreshLogs">刷新</el-button>
-      </div>
-
-      <div v-if="logs.length === 0 && !loading" class="sync-empty">
-        <el-empty description="暂无同步记录" :image-size="80" />
-      </div>
-
-      <div v-else class="sync-timeline">
-        <div
-          v-for="log in logs"
-          :key="log.id"
-          class="timeline-item"
-        >
-          <div class="timeline-dot" :class="log.status === 'SUCCESS' ? 'is-success' : (log.status === 'RUNNING' ? 'is-running' : 'is-failed')">
-            <el-icon :size="12">
-              <Loading v-if="log.status === 'RUNNING'" />
-              <CircleCheck v-else-if="log.status === 'SUCCESS'" />
-              <CircleClose v-else />
-            </el-icon>
-          </div>
-          <div class="timeline-content">
-            <div class="timeline-header">
+        <span class="stat-label">最近同步</span>
+      </div>
+    </div>
+
+    <!-- Log Timeline -->
+    <div class="sync-logs">
+      <div class="sync-logs-head">
+        <h3 class="sync-logs-title">同步日志</h3>
+        <el-button text :icon="Refresh" @click="refreshLogs">刷新</el-button>
+      </div>
+
+      <div v-if="logs.length === 0 && !loading" class="sync-empty">
+        <el-empty description="暂无同步记录" :image-size="80" />
+      </div>
+
+      <div v-else class="sync-timeline">
+        <div
+          v-for="log in logs"
+          :key="log.id"
+          class="timeline-item"
+        >
+          <div class="timeline-dot" :class="log.status === 'SUCCESS' ? 'is-success' : (log.status === 'RUNNING' ? 'is-running' : 'is-failed')">
+            <el-icon :size="12">
+              <Loading v-if="log.status === 'RUNNING'" />
+              <CircleCheck v-else-if="log.status === 'SUCCESS'" />
+              <CircleClose v-else />
+            </el-icon>
+          </div>
+          <div class="timeline-content">
+            <div class="timeline-header">
               <span class="timeline-type">{{ syncTypeLabel(log.type) }}</span>
-              <span class="timeline-status" :class="log.status === 'SUCCESS' ? 'is-success' : (log.status === 'RUNNING' ? 'is-running' : 'is-failed')">
-                {{ log.status === 'SUCCESS' ? '成功' : log.status === 'RUNNING' ? '进行中' : '失败' }}
-              </span>
+              <span class="timeline-status" :class="log.status === 'SUCCESS' ? 'is-success' : (log.status === 'RUNNING' ? 'is-running' : 'is-failed')">
+                {{ log.status === 'SUCCESS' ? '成功' : log.status === 'RUNNING' ? '进行中' : '失败' }}
+              </span>
               <span v-if="formatDuration(log.startedAt, log.finishedAt || undefined)" class="timeline-duration">
-                <el-icon :size="11"><Clock /></el-icon>
+                <el-icon :size="11"><Clock /></el-icon>
                 {{ formatDuration(log.startedAt, log.finishedAt || undefined) }}
-              </span>
-            </div>
-            <p v-if="log.message" class="timeline-message">{{ log.message }}</p>
+              </span>
+            </div>
+            <p v-if="log.message" class="timeline-message">{{ log.message }}</p>
             <span class="timeline-time">{{ formatTime(log.startedAt) }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.sync-page {
-  height: 100%;
-  overflow-y: auto;
-  padding: 4px;
-}
-
-/* Action Card */
-.sync-action-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 24px 28px;
-  background: #fff;
-  border-radius: 12px;
-  border: 1px solid #ebeef5;
-  margin-bottom: 16px;
-}
-
-.sync-action-info {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.sync-action-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, #fff2e8, #ffe0c2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--brand-color, #ff6800);
-  flex-shrink: 0;
-}
-
-.sync-action-title {
-  margin: 0 0 4px;
-  font-size: 18px;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.sync-action-desc {
-  margin: 0;
-  font-size: 13px;
-  color: #909399;
-}
-
-.sync-action-buttons {
-  display: flex;
-  gap: 12px;
-}
-
-/* Stats */
-.sync-stats {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  padding: 16px 28px;
-  background: #fff;
-  border-radius: 12px;
-  border: 1px solid #ebeef5;
-  margin-bottom: 16px;
-}
-
-.stat-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-}
-
-.stat-value {
-  font-size: 22px;
-  font-weight: 700;
-  color: #1f2937;
-  line-height: 1;
-}
-
-.stat-value.stat-success { color: #67c23a; }
-.stat-value.stat-failed { color: #f56c6c; }
-.stat-value.stat-time { font-size: 14px; font-weight: 600; color: #606266; }
-
-.stat-label {
-  font-size: 12px;
-  color: #909399;
-}
-
-.stat-divider {
-  width: 1px;
-  height: 32px;
-  background: #ebeef5;
-}
-
-/* Logs */
-.sync-logs {
-  background: #fff;
-  border-radius: 12px;
-  border: 1px solid #ebeef5;
-  overflow: hidden;
-}
-
-.sync-logs-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid #f5f5f5;
-}
-
-.sync-logs-title {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 600;
-  color: #1f2937;
-}
-
-.sync-empty {
-  padding: 40px 0;
-}
-
-/* Timeline */
-.sync-timeline {
-  padding: 16px 20px;
-  max-height: 500px;
-  overflow-y: auto;
-}
-
-.timeline-item {
-  display: flex;
-  gap: 12px;
-  padding-bottom: 20px;
-  position: relative;
-}
-
-.timeline-item:not(:last-child)::before {
-  content: '';
-  position: absolute;
-  left: 7px;
-  top: 22px;
-  bottom: 0;
-  width: 2px;
-  background: #f0f0f0;
-}
-
-.timeline-dot {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  z-index: 1;
-  margin-top: 2px;
-}
-
-.timeline-dot.is-success {
-  background: #f0f9eb;
-  color: #67c23a;
-}
-
-.timeline-dot.is-failed {
-  background: #fef0f0;
-  color: #f56c6c;
-}
-
-.timeline-dot.is-running {
-  background: #ecf5ff;
-  color: #409eff;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.timeline-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.timeline-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
-}
-
-.timeline-status {
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.timeline-status.is-success { color: #67c23a; }
-.timeline-status.is-failed { color: #f56c6c; }
-.timeline-status.is-running { color: #409eff; }
-
-.timeline-type {
-  font-size: 12px;
-  font-weight: 600;
-  color: #606266;
-  background: #f5f7fa;
-  padding: 2px 8px;
-  border-radius: 4px;
-}
-
-.timeline-duration {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  font-size: 11px;
-  color: #909399;
-  background: #f5f7fa;
-  padding: 2px 6px;
-  border-radius: 8px;
-}
-
-.timeline-message {
-  margin: 0 0 4px;
-  font-size: 12px;
-  color: #606266;
-  line-height: 1.5;
-  word-break: break-all;
-}
-
-.timeline-time {
-  font-size: 11px;
-  color: #c0c4cc;
-}
-</style>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sync-page {
+  height: 100%;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+/* Action Card */
+.sync-action-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 28px;
+  background: #fff;
+  border-radius: 12px;
+  border: 1px solid #ebeef5;
+  margin-bottom: 16px;
+}
+
+.sync-action-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.sync-action-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #fff2e8, #ffe0c2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--brand-color, #ff6800);
+  flex-shrink: 0;
+}
+
+.sync-action-title {
+  margin: 0 0 4px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.sync-action-desc {
+  margin: 0;
+  font-size: 13px;
+  color: #909399;
+}
+
+.sync-action-buttons {
+  display: flex;
+  gap: 12px;
+}
+
+/* Stats */
+.sync-stats {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 16px 28px;
+  background: #fff;
+  border-radius: 12px;
+  border: 1px solid #ebeef5;
+  margin-bottom: 16px;
+}
+
+.stat-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.stat-value {
+  font-size: 22px;
+  font-weight: 700;
+  color: #1f2937;
+  line-height: 1;
+}
+
+.stat-value.stat-success { color: #67c23a; }
+.stat-value.stat-failed { color: #f56c6c; }
+.stat-value.stat-time { font-size: 14px; font-weight: 600; color: #606266; }
+
+.stat-label {
+  font-size: 12px;
+  color: #909399;
+}
+
+.stat-divider {
+  width: 1px;
+  height: 32px;
+  background: #ebeef5;
+}
+
+/* Logs */
+.sync-logs {
+  background: #fff;
+  border-radius: 12px;
+  border: 1px solid #ebeef5;
+  overflow: hidden;
+}
+
+.sync-logs-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.sync-logs-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.sync-empty {
+  padding: 40px 0;
+}
+
+/* Timeline */
+.sync-timeline {
+  padding: 16px 20px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.timeline-item {
+  display: flex;
+  gap: 12px;
+  padding-bottom: 20px;
+  position: relative;
+}
+
+.timeline-item:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  left: 7px;
+  top: 22px;
+  bottom: 0;
+  width: 2px;
+  background: #f0f0f0;
+}
+
+.timeline-dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  z-index: 1;
+  margin-top: 2px;
+}
+
+.timeline-dot.is-success {
+  background: #f0f9eb;
+  color: #67c23a;
+}
+
+.timeline-dot.is-failed {
+  background: #fef0f0;
+  color: #f56c6c;
+}
+
+.timeline-dot.is-running {
+  background: #ecf5ff;
+  color: #409eff;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.timeline-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.timeline-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.timeline-status {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.timeline-status.is-success { color: #67c23a; }
+.timeline-status.is-failed { color: #f56c6c; }
+.timeline-status.is-running { color: #409eff; }
+
+.timeline-type {
+  font-size: 12px;
+  font-weight: 600;
+  color: #606266;
+  background: #f5f7fa;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.timeline-duration {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11px;
+  color: #909399;
+  background: #f5f7fa;
+  padding: 2px 6px;
+  border-radius: 8px;
+}
+
+.timeline-message {
+  margin: 0 0 4px;
+  font-size: 12px;
+  color: #606266;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.timeline-time {
+  font-size: 11px;
+  color: #c0c4cc;
+}
+</style>

apps/admin/src/views/tags/TagsView.vue

@@ -1,324 +1,324 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Edit, Delete, Refresh, Search } from '@element-plus/icons-vue'
-import type {
-  Tag,
-  TagGroup,
-  CreateTagRequest,
-  UpdateTagRequest,
-  TagFilter,
-} from '@/types'
-import { tagsApi } from '@/api/tags'
-import { tagGroupsApi } from '@/api/tag-groups'
-
-const loading = ref(false)
-const list = ref<Tag[]>([])
-const total = ref(0)
-const allGroups = ref<TagGroup[]>([])
-
-const filter = reactive<Required<TagFilter>>({
-  tagName: '',
-  page: 1,
-  pageSize: 10,
-})
-
-async function fetchList() {
-  loading.value = true
-  try {
-    const res = await tagsApi.getTagsList(filter)
-    const data = await tagsApi.getTagsList(filter) as any
-    const arr = Array.isArray(data) ? data : (data.items ?? [])
-    list.value = arr
-    total.value = Array.isArray(data) ? data.length : (data.total ?? 0)
-  } finally {
-    loading.value = false
-  }
-}
-
-async function loadGroups() {
-  allGroups.value = await tagGroupsApi.getTagGroupsList()
-}
-
-function handleSearch() {
-  filter.page = 1
-  fetchList()
-}
-
-function handleReset() {
-  filter.tagName = ''
-  filter.page = 1
-  fetchList()
-}
-
-const dialogRef = ref()
-const dialogVisible = ref(false)
-const dialogMode = ref<'create' | 'edit'>('create')
-const dialogLoading = ref(false)
-
-const dialogForm = reactive<CreateTagRequest & { id?: string; tagGroupId?: number | null }>({
-  id: undefined,
-  tagName: '',
-  tagColor: '#ff6800',
-  tagFontColor: '#ffffff',
-  timing: '',
-  tagGroupId: null,
-})
-
-const dialogRules = {
-  tagName: [{ required: true, message: '名称是必填项', trigger: 'blur' }],
-}
-
-function openAddDialog() {
-  dialogMode.value = 'create'
-  Object.assign(dialogForm, { id: undefined, tagName: '', tagColor: '#ff6800', tagFontColor: '#ffffff', timing: '', tagGroupId: null })
-  dialogVisible.value = true
-}
-
-function openEditDialog(t: Tag) {
-  dialogMode.value = 'edit'
-  Object.assign(dialogForm, {
-    id: t.id,
-    tagName: t.tagName,
-    tagColor: t.tagColor || '#ff6800',
-    tagFontColor: t.tagFontColor || '#ffffff',
-    timing: t.timing || '',
-    tagGroupId: t.tagGroupId ? Number(t.tagGroupId) : null,
-  })
-  dialogVisible.value = true
-}
-
-async function handleSubmit() {
-  if (!dialogRef.value) return
-  await dialogRef.value.validate(async (valid: boolean) => {
-    if (!valid) return
-    dialogLoading.value = true
-    try {
-      const payload: CreateTagRequest = {
-        tagName: dialogForm.tagName,
-        tagColor: dialogForm.tagColor || undefined,
-        tagFontColor: dialogForm.tagFontColor || undefined,
-        timing: dialogForm.timing || undefined,
-        tagGroupId: dialogForm.tagGroupId ?? undefined,
-      }
-      if (dialogMode.value === 'create') {
-        await tagsApi.createTag(payload)
-        ElMessage.success('标签创建成功')
-      } else {
-        await tagsApi.updateTag(dialogForm.id!, payload as UpdateTagRequest)
-        ElMessage.success('标签更新成功')
-      }
-      dialogVisible.value = false
-      fetchList()
-    } finally {
-      dialogLoading.value = false
-    }
-  })
-}
-
-async function handleDelete(t: Tag) {
-  try {
-    await ElMessageBox.confirm(`确定删除「${t.tagName}」吗？`, '确认', {
-      type: 'warning',
-      confirmButtonText: '删除',
-      cancelButtonText: '取消',
-    })
-  } catch {
-    return
-  }
-  await tagsApi.deleteTag(t.id)
-  ElMessage.success('删除成功')
-  fetchList()
-}
-
-onMounted(() => {
-  fetchList()
-  loadGroups()
-})
-</script>
-
-<template>
-  <div class="page-container">
-    <div class="page-card">
-      <div class="filter-bar">
-        <el-input
-          v-model="filter.tagName"
-          placeholder="按名称搜索"
-          clearable
-          @keyup.enter="handleSearch"
-          @clear="handleSearch"
-        >
-          <template #prefix>
-            <el-icon><Search /></el-icon>
-          </template>
-        </el-input>
-        <el-button type="primary" @click="handleSearch">
-          <el-icon><Search /></el-icon>
-          <span>搜索</span>
-        </el-button>
-        <el-button @click="handleReset">
-          <el-icon><Refresh /></el-icon>
-          <span>重置</span>
-        </el-button>
-
-        <div class="filter-spacer" />
-
-        <el-button type="primary" @click="openAddDialog">
-          <el-icon><Plus /></el-icon>
-          <span>新增标签</span>
-        </el-button>
-      </div>
-
-      <el-table v-loading="loading" :data="list" border stripe>
-        <el-table-column label="预览" width="120">
-          <template #default="{ row }: { row: Tag }">
-            <span
-              v-if="row.tagColor"
-              class="tag-preview"
-              :style="{ background: row.tagColor, color: row.tagFontColor || '#fff' }"
-            >{{ row.tagName }}</span>
-            <el-tag v-else effect="plain">{{ row.tagName }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="tagName" label="名称" min-width="200" />
-        <el-table-column label="背景色" width="140">
-          <template #default="{ row }: { row: Tag }">
-            <div class="color-cell">
-              <span class="color-swatch" :style="{ background: row.tagColor || '#d1d5db' }" />
-              <span class="color-hex">{{ row.tagColor || '-' }}</span>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="字体色" width="140">
-          <template #default="{ row }: { row: Tag }">
-            <div class="color-cell">
-              <span class="color-swatch" :style="{ background: row.tagFontColor || '#d1d5db' }" />
-              <span class="color-hex">{{ row.tagFontColor || '-' }}</span>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="所属分组" min-width="140">
-          <template #default="{ row }: { row: Tag }">
-            <span v-if="row.tagGroup">{{ row.tagGroup.groupName }}</span>
-            <span v-else style="color: #999;">未分组</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="timing" label="定时" min-width="120" />
-        <el-table-column label="操作" width="180" fixed="right">
-          <template #default="{ row }: { row: Tag }">
-            <div class="table-actions">
-              <el-button size="small" type="primary" plain @click="openEditDialog(row)">
-                <el-icon><Edit /></el-icon>
-                <span>编辑</span>
-              </el-button>
-              <el-button size="small" type="danger" plain @click="handleDelete(row)">
-                <el-icon><Delete /></el-icon>
-                <span>删除</span>
-              </el-button>
-            </div>
-          </template>
-        </el-table-column>
-        <template #empty>
-          <el-empty description="暂无标签" />
-        </template>
-      </el-table>
-
-      <el-pagination
-        class="pagination"
-        v-model:current-page="filter.page"
-        v-model:page-size="filter.pageSize"
-        :total="total"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        @current-change="(p: number) => { filter.page = p; fetchList() }"
-        @size-change="(s: number) => { filter.pageSize = s; filter.page = 1; fetchList() }"
-      />
-    </div>
-
-    <el-dialog
-      v-model="dialogVisible"
-      :title="dialogMode === 'create' ? '新增标签' : '编辑标签'"
-      width="480px"
-      destroy-on-close
-    >
-      <el-form ref="dialogRef" :model="dialogForm" :rules="dialogRules" label-width="100px">
-        <el-form-item label="名称" prop="tagName">
-          <el-input v-model="dialogForm.tagName" placeholder="请输入标签名称" />
-        </el-form-item>
-        <el-form-item label="背景色">
-          <el-color-picker v-model="dialogForm.tagColor" />
-          <span class="color-readout">{{ dialogForm.tagColor }}</span>
-        </el-form-item>
-        <el-form-item label="字体色">
-          <el-color-picker v-model="dialogForm.tagFontColor" />
-          <span class="color-readout">{{ dialogForm.tagFontColor }}</span>
-        </el-form-item>
-        <el-form-item label="所属分组">
-          <el-select v-model="dialogForm.tagGroupId" clearable placeholder="未分组" style="width: 100%">
-            <el-option
-              v-for="g in allGroups"
-              :key="g.id"
-              :label="g.groupName"
-              :value="Number(g.id)"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="定时">
-          <el-input v-model="dialogForm.timing" placeholder="例如 9:00-12:00" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" :loading="dialogLoading" @click="handleSubmit">
-          {{ dialogMode === 'create' ? '创建' : '保存' }}
-        </el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<style scoped>
-.filter-spacer {
-  flex: 1;
-}
-
-.pagination {
-  margin-top: 16px;
-  justify-content: flex-end;
-}
-
-.color-cell {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.color-swatch {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
-  border: 1px solid #e5e7eb;
-}
-
-.color-hex {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.color-readout {
-  margin-left: 12px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.tag-preview {
-  display: inline-block;
-  padding: 2px 12px;
-  border-radius: 4px;
-  font-size: 13px;
-  white-space: nowrap;
-}
-</style>
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Edit, Delete, Refresh, Search } from '@element-plus/icons-vue'
+import type {
+  Tag,
+  TagGroup,
+  CreateTagRequest,
+  UpdateTagRequest,
+  TagFilter,
+} from '@/types'
+import { tagsApi } from '@/api/tags'
+import { tagGroupsApi } from '@/api/tag-groups'
+
+const loading = ref(false)
+const list = ref<Tag[]>([])
+const total = ref(0)
+const allGroups = ref<TagGroup[]>([])
+
+const filter = reactive<Required<TagFilter>>({
+  tagName: '',
+  page: 1,
+  pageSize: 10,
+})
+
+async function fetchList() {
+  loading.value = true
+  try {
+    const res = await tagsApi.getTagsList(filter)
+    const data = await tagsApi.getTagsList(filter) as any
+    const arr = Array.isArray(data) ? data : (data.items ?? [])
+    list.value = arr
+    total.value = Array.isArray(data) ? data.length : (data.total ?? 0)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadGroups() {
+  allGroups.value = await tagGroupsApi.getTagGroupsList()
+}
+
+function handleSearch() {
+  filter.page = 1
+  fetchList()
+}
+
+function handleReset() {
+  filter.tagName = ''
+  filter.page = 1
+  fetchList()
+}
+
+const dialogRef = ref()
+const dialogVisible = ref(false)
+const dialogMode = ref<'create' | 'edit'>('create')
+const dialogLoading = ref(false)
+
+const dialogForm = reactive<CreateTagRequest & { id?: string; tagGroupId?: number | null }>({
+  id: undefined,
+  tagName: '',
+  tagColor: '#ff6800',
+  tagFontColor: '#ffffff',
+  timing: '',
+  tagGroupId: null,
+})
+
+const dialogRules = {
+  tagName: [{ required: true, message: '名称是必填项', trigger: 'blur' }],
+}
+
+function openAddDialog() {
+  dialogMode.value = 'create'
+  Object.assign(dialogForm, { id: undefined, tagName: '', tagColor: '#ff6800', tagFontColor: '#ffffff', timing: '', tagGroupId: null })
+  dialogVisible.value = true
+}
+
+function openEditDialog(t: Tag) {
+  dialogMode.value = 'edit'
+  Object.assign(dialogForm, {
+    id: t.id,
+    tagName: t.tagName,
+    tagColor: t.tagColor || '#ff6800',
+    tagFontColor: t.tagFontColor || '#ffffff',
+    timing: t.timing || '',
+    tagGroupId: t.tagGroupId ? Number(t.tagGroupId) : null,
+  })
+  dialogVisible.value = true
+}
+
+async function handleSubmit() {
+  if (!dialogRef.value) return
+  await dialogRef.value.validate(async (valid: boolean) => {
+    if (!valid) return
+    dialogLoading.value = true
+    try {
+      const payload: CreateTagRequest = {
+        tagName: dialogForm.tagName,
+        tagColor: dialogForm.tagColor || undefined,
+        tagFontColor: dialogForm.tagFontColor || undefined,
+        timing: dialogForm.timing || undefined,
+        tagGroupId: dialogForm.tagGroupId ?? undefined,
+      }
+      if (dialogMode.value === 'create') {
+        await tagsApi.createTag(payload)
+        ElMessage.success('标签创建成功')
+      } else {
+        await tagsApi.updateTag(dialogForm.id!, payload as UpdateTagRequest)
+        ElMessage.success('标签更新成功')
+      }
+      dialogVisible.value = false
+      fetchList()
+    } finally {
+      dialogLoading.value = false
+    }
+  })
+}
+
+async function handleDelete(t: Tag) {
+  try {
+    await ElMessageBox.confirm(`确定删除「${t.tagName}」吗？`, '确认', {
+      type: 'warning',
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+    })
+  } catch {
+    return
+  }
+  await tagsApi.deleteTag(t.id)
+  ElMessage.success('删除成功')
+  fetchList()
+}
+
+onMounted(() => {
+  fetchList()
+  loadGroups()
+})
+</script>
+
+<template>
+  <div class="page-container">
+    <div class="page-card">
+      <div class="filter-bar">
+        <el-input
+          v-model="filter.tagName"
+          placeholder="按名称搜索"
+          clearable
+          @keyup.enter="handleSearch"
+          @clear="handleSearch"
+        >
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+        <el-button type="primary" @click="handleSearch">
+          <el-icon><Search /></el-icon>
+          <span>搜索</span>
+        </el-button>
+        <el-button @click="handleReset">
+          <el-icon><Refresh /></el-icon>
+          <span>重置</span>
+        </el-button>
+
+        <div class="filter-spacer" />
+
+        <el-button type="primary" @click="openAddDialog">
+          <el-icon><Plus /></el-icon>
+          <span>新增标签</span>
+        </el-button>
+      </div>
+
+      <el-table v-loading="loading" :data="list" border stripe>
+        <el-table-column label="预览" width="120">
+          <template #default="{ row }: { row: Tag }">
+            <span
+              v-if="row.tagColor"
+              class="tag-preview"
+              :style="{ background: row.tagColor, color: row.tagFontColor || '#fff' }"
+            >{{ row.tagName }}</span>
+            <el-tag v-else effect="plain">{{ row.tagName }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="tagName" label="名称" min-width="200" />
+        <el-table-column label="背景色" width="140">
+          <template #default="{ row }: { row: Tag }">
+            <div class="color-cell">
+              <span class="color-swatch" :style="{ background: row.tagColor || '#d1d5db' }" />
+              <span class="color-hex">{{ row.tagColor || '-' }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="字体色" width="140">
+          <template #default="{ row }: { row: Tag }">
+            <div class="color-cell">
+              <span class="color-swatch" :style="{ background: row.tagFontColor || '#d1d5db' }" />
+              <span class="color-hex">{{ row.tagFontColor || '-' }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="所属分组" min-width="140">
+          <template #default="{ row }: { row: Tag }">
+            <span v-if="row.tagGroup">{{ row.tagGroup.groupName }}</span>
+            <span v-else style="color: #999;">未分组</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="timing" label="定时" min-width="120" />
+        <el-table-column label="操作" width="180" fixed="right">
+          <template #default="{ row }: { row: Tag }">
+            <div class="table-actions">
+              <el-button size="small" type="primary" plain @click="openEditDialog(row)">
+                <el-icon><Edit /></el-icon>
+                <span>编辑</span>
+              </el-button>
+              <el-button size="small" type="danger" plain @click="handleDelete(row)">
+                <el-icon><Delete /></el-icon>
+                <span>删除</span>
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <el-empty description="暂无标签" />
+        </template>
+      </el-table>
+
+      <el-pagination
+        class="pagination"
+        v-model:current-page="filter.page"
+        v-model:page-size="filter.pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="(p: number) => { filter.page = p; fetchList() }"
+        @size-change="(s: number) => { filter.pageSize = s; filter.page = 1; fetchList() }"
+      />
+    </div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogMode === 'create' ? '新增标签' : '编辑标签'"
+      width="480px"
+      destroy-on-close
+    >
+      <el-form ref="dialogRef" :model="dialogForm" :rules="dialogRules" label-width="100px">
+        <el-form-item label="名称" prop="tagName">
+          <el-input v-model="dialogForm.tagName" placeholder="请输入标签名称" />
+        </el-form-item>
+        <el-form-item label="背景色">
+          <el-color-picker v-model="dialogForm.tagColor" />
+          <span class="color-readout">{{ dialogForm.tagColor }}</span>
+        </el-form-item>
+        <el-form-item label="字体色">
+          <el-color-picker v-model="dialogForm.tagFontColor" />
+          <span class="color-readout">{{ dialogForm.tagFontColor }}</span>
+        </el-form-item>
+        <el-form-item label="所属分组">
+          <el-select v-model="dialogForm.tagGroupId" clearable placeholder="未分组" style="width: 100%">
+            <el-option
+              v-for="g in allGroups"
+              :key="g.id"
+              :label="g.groupName"
+              :value="Number(g.id)"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="定时">
+          <el-input v-model="dialogForm.timing" placeholder="例如 9:00-12:00" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="dialogLoading" @click="handleSubmit">
+          {{ dialogMode === 'create' ? '创建' : '保存' }}
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.filter-spacer {
+  flex: 1;
+}
+
+.pagination {
+  margin-top: 16px;
+  justify-content: flex-end;
+}
+
+.color-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.color-swatch {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border: 1px solid #e5e7eb;
+}
+
+.color-hex {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.color-readout {
+  margin-left: 12px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.tag-preview {
+  display: inline-block;
+  padding: 2px 12px;
+  border-radius: 4px;
+  font-size: 13px;
+  white-space: nowrap;
+}
+</style>