diff --git a/.env b/.env
new file mode 100644
index 0000000..7a30cbc
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VITE_API_BASE_URL='https://apiservertest.s1f.ren'
\ No newline at end of file
diff --git a/src/api/admin/product-test.js b/src/api/admin/product-test.js
deleted file mode 100644
index 1d1c49b..0000000
--- a/src/api/admin/product-test.js
+++ /dev/null
@@ -1,79 +0,0 @@
-// 商品管理 API 接口测试文件
-// 此文件用于验证所有接口是否正确对接 OpenAPI 文档
-
-import { 
-  // 商品分组管理
-  getProductGroupList,
-  createProductGroup,
-  updateProductGroup,
-  hideProductGroup,
-  startProductGroup,
-  deleteProductGroup,
-  
-  // 商品管理
-  getProductList,
-  getProductTagList,
-  createProduct,
-  updateProduct,
-  deleteProduct,
-  
-  // 商品参数管理
-  getProductParameterList,
-  createProductParameter,
-  getProductParameterDetail,
-  updateProductParameter,
-  deleteProductParameter,
-  addProductParameterValue,
-  deleteProductParameterValue,
-  updateProductParameterValue
-} from './product'
-
-/**
- * 商品管理 API 接口对接验证
- * 
- * 根据 OpenAPI 文档，所有接口已完整对接：
- * 
- * 1. 商品分组管理 (6个接口)
- *    ✅ GET  /api/v1/admin/good/group/list - 获取商品分组列表
- *    ✅ POST /api/v1/admin/good/group/create - 创建商品分组
- *    ✅ POST /api/v1/admin/good/group/update - 更新商品分组
- *    ✅ POST /api/v1/admin/good/group/disable - 隐藏商品组
- *    ✅ POST /api/v1/admin/good/group/enable - 启用商品组
- *    ✅ DELETE /api/v1/admin/good/group/delete - 删除商品分组
- * 
- * 2. 商品管理 (4个接口)
- *    ✅ GET  /api/v1/admin/good/goods/list - 获取商品列表
- *    ✅ GET  /api/v1/admin/good/goods/tag_list - 获取商品标签列表
- *    ✅ POST /api/v1/admin/good/goods/create - 创建商品
- *    ✅ POST /api/v1/admin/good/goods/update - 更新商品
- *    ✅ DELETE /api/v1/admin/good/goods/delete - 删除商品
- * 
- * 3. 商品参数管理 (8个接口)
- *    ✅ GET  /api/v1/admin/good/spec/list - 获取商品参数列表
- *    ✅ POST /api/v1/admin/good/spec/create - 创建商品参数
- *    ✅ GET  /api/v1/admin/good/spec/detail - 获取商品参数详情
- *    ✅ POST /api/v1/admin/good/spec/update - 更新商品参数
- *    ✅ DELETE /api/v1/admin/good/spec/delete - 删除商品参数
- *    ✅ POST /api/v1/admin/good/spec/add_value - 增加商品参数值
- *    ✅ DELETE /api/v1/admin/good/spec/delete_value - 删除商品参数值
- *    ✅ POST /api/v1/admin/good/spec/update_value - 更新商品参数值
- * 
- * 总计：18个接口全部对接完成
- * 
- * 页面实现状态：
- * ✅ ProductList.vue - 商品列表管理页面（包含商品参数管理）
- * ✅ ProductGroup.vue - 商品分组管理页面
- * 
- * 注意事项：
- * 1. 所有 POST/DELETE 接口使用 multipart/form-data 格式
- * 2. 更新商品参数接口使用 query 参数而非 body
- * 3. 价格字段以分为单位存储
- * 4. 商品标签从 tag_list 接口获取
- */
-
-export const API_STATUS = {
-  totalApis: 18,
-  implementedApis: 18,
-  completionRate: '100%',
-  lastUpdated: new Date().toISOString()
-}
\ No newline at end of file
diff --git a/src/config/env.js b/src/config/env.js
new file mode 100644
index 0000000..b91a842
--- /dev/null
+++ b/src/config/env.js
@@ -0,0 +1,55 @@
+/**
+ * 环境配置文件
+ * 所有硬编码的 URL / 域名 / 环境变量统一在此管理
+ */
+
+// 当前环境
+const isDevelopment = import.meta.env.MODE === 'development'
+
+// API 基础地址
+// 开发环境使用 vite 代理 (baseUrl 为空)，生产环境使用实际地址
+const API_BASE_MAP = {
+  development: '',  // 开发环境通过 vite proxy 代理
+  production: import.meta.env.VITE_API_BASE_URL || 'https://cloudapi.007yjs.com',
+  staging: import.meta.env.VITE_API_BASE_URL || 'https://apiservertest.s1f.ren'
+}
+
+// 获取当前环境的 API 基础地址
+const currentEnv = import.meta.env.VITE_APP_ENV || import.meta.env.MODE || 'development'
+export const baseUrl = API_BASE_MAP[currentEnv] || API_BASE_MAP.development
+
+// ACS 服务基础地址
+export const acsBaseUrl = isDevelopment ? '' : baseUrl
+
+// 网站标题
+export const siteTitle = '007UI管理系统'
+
+// 请求超时时间（毫秒）
+export const requestTimeout = 50000
+export const acsRequestTimeout = 30000
+
+// Token 存储键名
+export const TOKEN_KEY = 'token'
+export const TOKEN_EXPIRE_KEY = 'tokenExpire'
+export const USER_INFO_KEY = 'userInfo'
+
+// 不需要 token 认证的 URL 前缀
+export const noAuthUrls = [
+  '/v1/user/login',
+  '/v1/user/check/get_code_img',
+  '/v1/user/register',
+  '/v1/user/refresh_token'
+]
+
+export default {
+  isDevelopment,
+  baseUrl,
+  acsBaseUrl,
+  siteTitle,
+  requestTimeout,
+  acsRequestTimeout,
+  TOKEN_KEY,
+  TOKEN_EXPIRE_KEY,
+  USER_INFO_KEY,
+  noAuthUrls
+}
diff --git a/src/config/menus.js b/src/config/menus.js
index dbb2875..87c1f83 100644
--- a/src/config/menus.js
+++ b/src/config/menus.js
@@ -40,12 +40,8 @@ export const menus = [
     icon: 'Goods',
     children: [
       {
-        path: '/product/list',
-        title: '商品列表'
-      },
-      {
-        path: '/product/group',
-        title: '商品分组'
+        path: '/product/manage',
+        title: '商品管理'
       }
     ]
   },
diff --git a/src/router/index.js b/src/router/index.js
index c4c0daa..0f8db57 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -224,7 +224,7 @@ const routes = [
           }
         ]
       },
-      // 商品管理路由
+      // 商品管理路由（已合并商品列表和商品分组到统一树形视图）
       {
         path: 'product',
         name: 'Product',
@@ -232,23 +232,24 @@ const routes = [
           title: '商品管理',
           icon: 'Goods'
         },
-        redirect: '/product/list',
+        redirect: '/product/manage',
         children: [
           {
-            path: 'list',
-            name: 'ProductList',
-            component: () => import('../views/product/ProductList.vue'),
+            path: 'manage',
+            name: 'ProductManage',
+            component: () => import('../views/product/ProductGroup.vue'),
             meta: {
-              title: '商品列表'
+              title: '商品管理'
             }
           },
+          {
+            // 保留旧路由兼容，重定向到新路由
+            path: 'list',
+            redirect: '/product/manage'
+          },
           {
             path: 'group',
-            name: 'ProductGroup',
-            component: () => import('../views/product/ProductGroup.vue'),
-            meta: {
-              title: '商品分组'
-            }
+            redirect: '/product/manage'
           }
         ]
       },
diff --git a/src/utils/request.js b/src/utils/request.js
index 7a39598..2ea6943 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -2,23 +2,17 @@ import axios from 'axios'
 import { ElMessage } from 'element-plus'
 import router from '@/router'
 import {getRefreshToken,refreshAccessToken} from "@/api/login.js";
-
-// 基础URL
-const baseUrl = 'https://apiservertest.s1f.ren'  // SSL证书有问题
-// const baseUrl = 'http://apiservertest.s1f.ren'  // HTTP版本
-// const baseUrl = 'https://cloudapi.007yjs.com'  // 尝试备用地址
+import { baseUrl, acsBaseUrl, noAuthUrls as noAuthUrlList, requestTimeout, acsRequestTimeout, TOKEN_KEY, TOKEN_EXPIRE_KEY, USER_INFO_KEY } from '@/config/env.js'
 
 // 检查URL是否需要认证
 const urlNeedAuth = (url) => {
-  // 这里可以添加不需要认证的URL列表
-  const noAuthUrls = ['/v1/user/login', '/v1/user/check/get_code_img', '/v1/user/register', '/v1/user/refresh_token']
-  return !noAuthUrls.some(noAuthUrl => url.includes(noAuthUrl))
+  return !noAuthUrlList.some(noAuthUrl => url.includes(noAuthUrl))
 }
 
 // 检查token是否过期
 const isTokenExpired = () => {
-  const token = localStorage.getItem('token')
-  const expire = localStorage.getItem('tokenExpire')
+  const token = localStorage.getItem(TOKEN_KEY)
+  const expire = localStorage.getItem(TOKEN_EXPIRE_KEY)
   if (!token) return true
   
   // 检查过期时间
@@ -34,7 +28,7 @@ const isTokenExpired = () => {
 
 // 检查token是否即将过期（5分钟内）
 const isTokenExpiringSoon = () => {
-  const expire = localStorage.getItem('tokenExpire')
+  const expire = localStorage.getItem(TOKEN_EXPIRE_KEY)
   if (!expire) return false
   
   const expireTime = parseInt(expire) * 1000 // 转换为毫秒
@@ -81,26 +75,26 @@ const doRefreshToken = async () => {
       
       if (newTokenRes.data?.code === 200 && newTokenRes.data?.data?.token) {
         const { token, expire } = newTokenRes.data.data
-        localStorage.setItem('token', token)
+        localStorage.setItem(TOKEN_KEY, token)
         if (expire) {
-          localStorage.setItem('tokenExpire', expire.toString())
+          localStorage.setItem(TOKEN_EXPIRE_KEY, expire.toString())
         }
         return token
       }
     }
     // 刷新失败，触发登出逻辑
-    localStorage.removeItem('token')
-    localStorage.removeItem('tokenExpire')
-    localStorage.removeItem('userInfo')
+    localStorage.removeItem(TOKEN_KEY)
+    localStorage.removeItem(TOKEN_EXPIRE_KEY)
+    localStorage.removeItem(USER_INFO_KEY)
     ElMessage.warning('登录过期，请重新登录')
     router.push('/login')
     return null
   } catch (error) {
     console.error('Token刷新失败:', error)
     // 刷新失败，触发登出逻辑
-    localStorage.removeItem('token')
-    localStorage.removeItem('tokenExpire')
-    localStorage.removeItem('userInfo')
+    localStorage.removeItem(TOKEN_KEY)
+    localStorage.removeItem(TOKEN_EXPIRE_KEY)
+    localStorage.removeItem(USER_INFO_KEY)
     ElMessage.warning('登录过期，请重新登录')
     router.push('/login')
     return null
@@ -121,7 +115,7 @@ class Request {
             (config) => {
                 // 在发送请求之前做些什么
                 // 例如：添加 token
-                const token = localStorage.getItem('token')
+                const token = localStorage.getItem(TOKEN_KEY)
                 if (token) {
                     config.headers.Authorization = `Bearer ${token}`
                 }
@@ -190,7 +184,7 @@ class Request {
 // 创建默认实例
 const request = new Request({
     baseURL: baseUrl,
-    timeout: 50000,
+    timeout: requestTimeout,
     headers: {
         'Content-Type': 'multipart/form-data'
     }
@@ -201,21 +195,21 @@ export const baseURL = baseUrl
 
 export const http2 = axios.create({
     baseURL: baseUrl,
-    timeout: 30000,
+    timeout: acsRequestTimeout,
     headers: {},
 });
 
 http2.interceptors.request.use(async config => {
-    const token = localStorage.getItem('token')
+    const token = localStorage.getItem(TOKEN_KEY)
     
     // 检查是否需要认证
     if (urlNeedAuth(config.url)) {
         // 检查token是否已过期
         if (isTokenExpired()) {
             if (token) {
-                localStorage.removeItem('token')
-                localStorage.removeItem('tokenExpire')
-                localStorage.removeItem('userInfo')
+                localStorage.removeItem(TOKEN_KEY)
+                localStorage.removeItem(TOKEN_EXPIRE_KEY)
+                localStorage.removeItem(USER_INFO_KEY)
                 ElMessage.warning('登录过期，请重新登录')
             }
             router.push('/login')
@@ -275,7 +269,7 @@ http2.interceptors.response.use(
         }
         const { status } = error.response;
         if (status === 401) {
-            localStorage.removeItem('token');
+            localStorage.removeItem(TOKEN_KEY);
             ElMessage.warning('登陆过期，请重新登陆')
             router.push('/login')
             return Promise.reject();
diff --git a/src/views/product/ProductGroup.vue b/src/views/product/ProductGroup.vue
index b8dd4e1..456f675 100644
--- a/src/views/product/ProductGroup.vue
+++ b/src/views/product/ProductGroup.vue
@@ -44,6 +44,9 @@
                 <el-button type="primary" @click="handleAdd(null)">
                   <el-icon><Plus /></el-icon>新增顶级分组
                 </el-button>
+                <el-button type="success" @click="handleAddProduct">
+                  <el-icon><Plus /></el-icon>新增商品
+                </el-button>
                 <el-button type="success" @click="fetchGroupList">
                   <el-icon><Refresh /></el-icon>刷新
                 </el-button>
@@ -59,7 +62,6 @@
                     </el-radio-button>
                   </el-radio-group>
                 </div>
-              
               </div>
             </div>
           </div>
@@ -87,12 +89,12 @@
           row-key="id"
           :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
         >
-          <el-table-column prop="name" label="分组名称" min-width="280">
+          <el-table-column prop="name" label="名称" min-width="320">
             <template #default="{ row }">
-              <div class="group-name-cell" :style="{ paddingLeft: (row.level - 1) * 24 + 'px' }">
-                <!-- 展开/收起按钮 -->
+              <div class="group-name-cell" :style="{ paddingLeft: row.isProduct ? ((row.level - 1) * 24 + 24) + 'px' : (row.level - 1) * 24 + 'px' }">
+                <!-- 分组的展开/收起按钮 -->
                 <span 
-                  v-if="row.existSub" 
+                  v-if="row.isGroup" 
                   class="expand-icon"
                   @click="toggleExpand(row)"
                 >
@@ -100,29 +102,62 @@
                   <el-icon v-else :class="{ 'is-expanded': row._expanded }"><ArrowRight /></el-icon>
                 </span>
                 <span v-else class="expand-placeholder"></span>
-                <el-avatar v-if="row.cover" :size="32" :src="row.cover" />
-                <el-avatar v-else :size="32" :style="{ background: getLevelColor(row.level) }">
+                
+                <!-- 类型图标 -->
+                <el-avatar v-if="row.isGroup && row.cover" :size="32" :src="row.cover" />
+                <el-avatar v-else-if="row.isGroup" :size="32" :style="{ background: getLevelColor(row.level) }">
                   <el-icon><Folder /></el-icon>
                 </el-avatar>
+                <el-avatar v-else-if="row.isProduct && row.data?.coverId" :size="32" :src="getFileUrl(row.data.coverId)" />
+                <el-avatar v-else-if="row.isProduct" :size="32" :style="{ background: '#409eff' }">
+                  <el-icon><Document /></el-icon>
+                </el-avatar>
+                
+                <!-- 类型标签 -->
+                <el-tag v-if="row.isGroup" type="primary" size="small" style="margin-left: 8px;">分组</el-tag>
+                <el-tag v-else-if="row.isProduct" type="success" size="small" style="margin-left: 8px;">商品</el-tag>
+                
                 <span class="group-name">{{ row.name }}</span>
               </div>
             </template>
           </el-table-column>
-          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column label="ID" width="100">
+            <template #default="{ row }">
+              <span v-if="row.isProduct">{{ row.data?.id }}</span>
+              <span v-else>{{ row.id }}</span>
+            </template>
+          </el-table-column>
           <el-table-column label="标签" width="120">
             <template #default="{ row }">
-              <el-tag v-if="row.tag" size="small">{{ row.tag.name }}</el-tag>
+              <el-tag v-if="row.isGroup && row.tag" size="small">{{ row.tag.name }}</el-tag>
+              <el-tag v-else-if="row.isProduct && row.data?.tag" size="small" type="success">{{ row.data.tag }}</el-tag>
               <span v-else class="text-muted">-</span>
             </template>
           </el-table-column>
           <el-table-column label="层级" width="80">
             <template #default="{ row }">
-              <el-tag :type="getLevelType(row.level)" size="small">
+              <el-tag v-if="row.isGroup" :type="getLevelType(row.level)" size="small">
                 {{ getLevelText(row.level) }}
               </el-tag>
+              <span v-else class="text-muted">-</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="排序" width="80">
+            <template #default="{ row }">
+              <el-tag type="info" size="small">{{ row.index || 0 }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="note" label="备注/价格" min-width="320" show-overflow-tooltip>
+            <template #default="{ row }">
+              <span v-if="row.isGroup">{{ row.note || '-' }}</span>
+              <div v-else-if="row.isProduct" class="product-info-inline">
+                <span class="product-price">¥{{ (row.data.price / 100).toFixed(2) }}</span>
+                <el-tag v-if="row.data.inventoryControl" type="info" size="small">库存: {{ row.data.inventory }}</el-tag>
+                <el-tag v-if="row.data.recommend" type="warning" size="small">推荐</el-tag>
+                <el-tag v-if="row.data.expireTime && row.data.expireTime > 0" type="info" size="small">有效期: {{ row.data.expireTime }}天</el-tag>
+              </div>
             </template>
           </el-table-column>
-          <el-table-column prop="note" label="备注" min-width="150" show-overflow-tooltip />
           <el-table-column label="状态" width="80">
             <template #default="{ row }">
               <el-switch
@@ -136,9 +171,17 @@
           <el-table-column label="操作" width="200" fixed="right">
             <template #default="{ row }">
               <div class="action-buttons">
-                <el-button type="success" link @click="handleAdd(row)">添加子级</el-button>
-                <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-                <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
+                <template v-if="row.isGroup">
+                  <el-button type="success" link @click="handleAdd(row)">添加子级</el-button>
+                  <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
+                  <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
+                </template>
+                <template v-else-if="row.isProduct">
+                  <el-button type="primary" link @click="handleEditProduct(row.data, row.parentId)">编辑</el-button>
+                  <el-button type="success" link @click="handlePlan(row.data)">套餐</el-button>
+                  <el-button type="warning" link @click="handleParameter(row.data)">参数</el-button>
+                  <el-button type="danger" link @click="handleDeleteProduct(row.data)">删除</el-button>
+                </template>
               </div>
             </template>
           </el-table-column>
@@ -244,6 +287,7 @@
             >
               <el-table-column prop="id" label="标签ID" width="100" />
               <el-table-column prop="name" label="标签名称" min-width="200" />
+              <el-table-column prop="index" label="排序" width="100" sortable />
               <el-table-column label="操作" width="180" fixed="right">
                 <template #default="{ row }">
                   <div class="action-buttons">
@@ -371,6 +415,16 @@
         <el-form-item label="备注" prop="note">
           <el-input v-model="groupForm.note" type="textarea" :rows="4" placeholder="请输入备注" />
         </el-form-item>
+        <el-form-item label="排序索引" prop="index">
+          <el-input-number 
+            v-model="groupForm.index" 
+            :min="0" 
+            :max="9999"
+            placeholder="请输入排序索引，数值越小排序越靠前"
+            style="width: 100%"
+          />
+          <div class="form-tip">数值越小排序越靠前，相同索引按创建时间排序</div>
+        </el-form-item>
         <el-form-item label="状态" prop="disable">
           <el-radio-group v-model="groupForm.disable">
             <el-radio :value="false">启用</el-radio>
@@ -439,6 +493,9 @@
         <el-form-item label="标签名称" prop="name">
           <el-input v-model="tagForm.name" placeholder="请输入标签名称" />
         </el-form-item>
+        <el-form-item label="排序索引" prop="index">
+          <el-input-number v-model="tagForm.index" :min="0" :max="9999" placeholder="数值越小越靠前" style="width: 100%" />
+        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -488,13 +545,516 @@
         <el-button type="primary" @click="confirmTagSelect">确定</el-button>
       </template>
     </el-dialog>
+
+    <!-- 商品表单对话框 -->
+    <el-dialog
+      v-model="productDialogVisible"
+      :title="productDialogType === 'add' ? '新增商品' : '编辑商品'"
+      width="800px"
+      append-to-body
+    >
+      <el-form
+        ref="productFormRef"
+        :model="productForm"
+        :rules="productRules"
+        label-width="120px"
+      >
+        <el-form-item label="商品名称" prop="name">
+          <el-input v-model="productForm.name" placeholder="请输入商品名称" />
+        </el-form-item>
+        <el-form-item label="商品所属表" prop="table">
+          <el-input v-model="productForm.table" placeholder="请输入商品所属表" />
+        </el-form-item>
+        <el-form-item label="商品分组" prop="good_group_id">
+          <div class="recommend-user-selector">
+            <el-input 
+              :model-value="selectedGroupName" 
+              placeholder="请选择商品分组" 
+              readonly 
+              @click="showProductGroupSelector = true"
+            >
+              <template #prefix>
+                <el-icon><Folder /></el-icon>
+              </template>
+            </el-input>
+            <el-button 
+              v-if="productForm.good_group_id" 
+              type="danger" 
+              link 
+              @click="clearProductGroup"
+              class="clear-btn"
+            >
+              清除
+            </el-button>
+          </div>
+        </el-form-item>
+        <el-form-item label="商品内容" prop="content">
+          <el-input v-model="productForm.content" type="textarea" :rows="4" placeholder="请输入商品内容" />
+        </el-form-item>
+        <el-form-item label="商品封面" prop="cover_id">
+          <div class="recommend-user-selector">
+            <el-input 
+              :model-value="productForm.cover_id ? `文件ID: ${productForm.cover_id}` : ''" 
+              placeholder="点击选择封面图片" 
+              readonly 
+              @click="coverSelectorVisible = true"
+            >
+              <template #prefix>
+                <el-icon><Picture /></el-icon>
+              </template>
+            </el-input>
+            <el-button 
+              v-if="productForm.cover_id" 
+              type="danger" 
+              link 
+              @click="clearProductCover"
+              class="clear-btn"
+            >
+              清除
+            </el-button>
+          </div>
+        </el-form-item>
+        
+        <!-- 封面选择器弹窗 -->
+        <AvatarSelector
+          v-model="coverSelectorVisible"
+          :user-id="1"
+          :current-cover-id="productForm.cover_id"
+          @confirm="handleProductCoverSelect"
+        />
+        
+        <el-form-item label="库存控制" prop="inventory_control">
+          <el-switch v-model="productForm.inventory_control" active-text="启用" inactive-text="禁用" />
+        </el-form-item>
+        <el-form-item label="库存数量" prop="inventory">
+          <el-input-number v-model="productForm.inventory" :min="0" placeholder="请输入库存" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="商品价格(元)" prop="price">
+          <el-input-number v-model="productForm.price" :min="0" :precision="2" :step="0.01" placeholder="请输入价格(元)" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="单个商品数量" prop="pay_num">
+          <el-input-number v-model="productForm.pay_num" :min="1" placeholder="请输入单个商品数量" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="有效期(天)" prop="expire_time">
+          <el-input-number v-model="productForm.expire_time" :min="0" placeholder="请输入有效期" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="推荐" prop="recommend">
+          <el-switch v-model="productForm.recommend" active-text="启用" inactive-text="禁用" />
+        </el-form-item>
+        <el-form-item label="推荐返还(%)" prop="recommend_rebate">
+          <el-input-number v-model="productForm.recommend_rebate" :min="0" :max="100" placeholder="请输入返还百分比" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="参数类型" prop="arg_type">
+          <el-select v-model="productForm.arg_type" placeholder="请选择参数类型" style="width: 100%">
+            <el-option label="所有参数" value="all" />
+            <el-option label="套餐" value="plan" />
+            <el-option label="自定义" value="customize" />
+          </el-select>
+          <div class="form-tip">all: 所有参数 / plan: 套餐 / customize: 自定义</div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="productDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitProductForm">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 商品分组选择弹窗 -->
+    <el-dialog
+      v-model="showProductGroupSelector"
+      title="选择商品分组"
+      width="600px"
+      append-to-body
+    >
+      <el-table
+        :data="allGroupList"
+        highlight-current-row
+        @current-change="handleProductGroupSelect"
+        style="width: 100%"
+        max-height="400px"
+      >
+        <el-table-column prop="name" label="分组名称" />
+        <el-table-column prop="level" label="层级" width="80">
+          <template #default="{ row }">
+            <el-tag :type="getLevelType(row.level)" size="small">
+              {{ getLevelText(row.level) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+      <template #footer>
+        <el-button @click="showProductGroupSelector = false">取消</el-button>
+        <el-button type="primary" @click="confirmProductGroupSelect">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- ==================== 商品参数管理 ==================== -->
+    <el-dialog
+      v-model="paramDialogVisible"
+      title="商品参数管理"
+      width="900px"
+    >
+      <div class="filter-section" style="border: none; padding: 0 0 16px 0;">
+        <div class="action-bar">
+          <el-button type="primary" @click="handleAddParameter">
+            <el-icon><Plus /></el-icon>新增参数
+          </el-button>
+          <el-button type="success" @click="fetchParameterList">
+            <el-icon><Refresh /></el-icon>刷新
+          </el-button>
+        </div>
+      </div>
+      <el-table
+        v-loading="paramLoading"
+        :data="parameterList"
+        style="width: 100%"
+        :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
+      >
+        <el-table-column prop="id" label="参数ID" width="80" />
+        <el-table-column prop="name" label="参数名称" min-width="120" />
+        <el-table-column prop="type" label="参数类型" width="100">
+          <template #default="{ row }">
+            <el-tag :type="getArgTypeTag(row.type)">{{ getArgTypeText(row.type) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="数值配置" min-width="180">
+          <template #default="{ row }">
+            <template v-if="row.type === 'number'">
+              <span class="number-config">步进: {{ row.step || '-' }} | 范围: {{ row.min ?? '-' }} ~ {{ row.max ?? '-' }}</span>
+            </template>
+            <span v-else class="text-muted">-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="250" fixed="right">
+          <template #default="{ row }">
+            <div class="action-buttons">
+              <el-button type="primary" link @click="handleEditParameter(row)">编辑</el-button>
+              <el-button type="success" link @click="handleViewParamValues(row)">查看参数值</el-button>
+              <el-button type="danger" link @click="handleDeleteParameter(row)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <!-- 商品参数表单对话框 -->
+    <el-dialog
+      v-model="paramFormDialogVisible"
+      :title="paramFormType === 'add' ? '新增商品参数' : '编辑商品参数'"
+      width="600px"
+      append-to-body
+    >
+      <el-form ref="paramFormRef" :model="paramForm" :rules="paramRules" label-width="120px">
+        <el-form-item label="参数名称" prop="arg_name">
+          <el-input v-model="paramForm.arg_name" placeholder="请输入参数名称" />
+        </el-form-item>
+        <el-form-item label="参数类型" prop="arg_type">
+          <el-radio-group v-model="paramForm.arg_type">
+            <el-radio label="string">字符串</el-radio>
+            <el-radio label="number">数字</el-radio>
+            <el-radio label="select">选择</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="是否必选" prop="must">
+          <el-switch v-model="paramForm.must" :active-value="true" :inactive-value="false" active-text="必选" inactive-text="可选" />
+        </el-form-item>
+        <template v-if="paramForm.arg_type === 'number'">
+          <el-divider content-position="left">数值参数配置</el-divider>
+          <el-form-item label="步进值" prop="arg_step">
+            <el-input-number v-model="paramForm.arg_step" :min="1" placeholder="步进值" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="最小值" prop="arg_min">
+            <el-input-number v-model="paramForm.arg_min" placeholder="最小值" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="最大值" prop="arg_max">
+            <el-input-number v-model="paramForm.arg_max" placeholder="最大值" style="width: 100%" />
+          </el-form-item>
+        </template>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="paramFormDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitParamForm">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 参数值管理对话框 -->
+    <el-dialog v-model="paramValuesDialogVisible" title="参数值管理" width="800px" append-to-body>
+      <div class="values-header">
+        <span>参数：{{ currentParam?.name }}</span>
+        <el-button type="primary" @click="handleAddParamValue">
+          <el-icon><Plus /></el-icon>添加参数值
+        </el-button>
+      </div>
+      <el-table
+        v-loading="paramValuesLoading"
+        :data="paramValueList"
+        style="width: 100%; margin-top: 20px"
+        :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
+      >
+        <el-table-column prop="id" label="值ID" width="80" />
+        <el-table-column prop="name" label="值名称" min-width="120" />
+        <el-table-column label="值/范围" min-width="150">
+          <template #default="{ row }">
+            <template v-if="currentParam?.type === 'select'">{{ row.value || '-' }}</template>
+            <template v-else-if="currentParam?.type === 'number'">
+              <el-tag size="small" type="info">{{ getRangeTypeText(row.rangeType) }} {{ row.range }}</el-tag>
+            </template>
+            <template v-else>{{ row.value || '-' }}</template>
+          </template>
+        </el-table-column>
+        <el-table-column prop="index" label="排序" width="80" />
+        <el-table-column label="价格" width="100">
+          <template #default="{ row }">¥{{ (row.price / 100).toFixed(2) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" fixed="right">
+          <template #default="{ row }">
+            <div class="action-buttons">
+              <el-button type="primary" link @click="handleEditParamValue(row)">编辑</el-button>
+              <el-button type="danger" link @click="handleDeleteParamValue(row)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <!-- 参数值表单对话框 -->
+    <el-dialog
+      v-model="paramValueFormDialogVisible"
+      :title="paramValueFormType === 'add' ? '添加参数值' : '编辑参数值'"
+      width="550px"
+      append-to-body
+    >
+      <el-form ref="paramValueFormRef" :model="paramValueForm" :rules="paramValueRules" label-width="120px">
+        <el-form-item label="值名称" prop="attr_name">
+          <el-input v-model="paramValueForm.attr_name" placeholder="请输入值名称" />
+        </el-form-item>
+        <el-form-item v-if="currentParam?.type === 'select'" label="参数值" prop="attr_value">
+          <el-input v-model="paramValueForm.attr_value" placeholder="请输入参数值" />
+        </el-form-item>
+        <template v-if="currentParam?.type === 'number'">
+          <el-divider content-position="left">数值范围配置（phase）</el-divider>
+          <el-form-item label="范围类型" prop="range_type">
+            <el-select v-model="paramValueForm.range_type" placeholder="请选择范围类型" style="width: 100%">
+              <el-option label="小于等于 (before)" value="before" />
+              <el-option label="大于等于 (after)" value="after" />
+              <el-option label="等于 (equal)" value="equal" />
+            </el-select>
+            <div class="form-tip">before: 数值 ≤ phase 时匹配 | after: 数值 ≥ phase 时匹配</div>
+          </el-form-item>
+          <el-form-item label="阈值" prop="attr_range">
+            <el-input-number v-model="paramValueForm.attr_range" :min="0" placeholder="范围阈值" style="width: 100%" />
+          </el-form-item>
+        </template>
+        <el-form-item label="排序索引" prop="index">
+          <el-input-number v-model="paramValueForm.index" :min="0" placeholder="排序索引" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="价格" prop="attr_price">
+          <el-input-number v-model="paramValueForm.attr_price" :min="0" placeholder="请输入价格" style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="paramValueFormDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitParamValueForm">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- ==================== 商品套餐管理 ==================== -->
+    <el-dialog
+      v-model="planDialogVisible"
+      :title="`商品套餐管理 - ${currentPlanProductName}`"
+      width="900px"
+      append-to-body
+    >
+      <div class="plan-management">
+        <div class="plan-header">
+          <el-button type="primary" @click="handleAddPlan">
+            <el-icon><Plus /></el-icon>新增套餐
+          </el-button>
+          <el-button type="success" @click="fetchPlanList">
+            <el-icon><Refresh /></el-icon>刷新
+          </el-button>
+        </div>
+        <el-table
+          v-loading="planLoading"
+          :data="planList"
+          style="width: 100%"
+          :header-cell-style="{ background: '#f8f9fa', color: '#2c3e50', fontWeight: 600 }"
+        >
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column prop="name" label="套餐名称" min-width="120" />
+          <el-table-column label="参数配置" min-width="200">
+            <template #default="{ row }">
+              <div v-if="row.argsParsed && row.argsParsed.length > 0" class="args-list">
+                <el-tag v-for="(arg, index) in row.argsParsed" :key="index" size="small" type="info" style="margin-right: 4px; margin-bottom: 4px;">
+                  {{ arg.name || arg.value || `参数${arg.arg_id}` }}
+                </el-tag>
+              </div>
+              <span v-else class="text-muted">-</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="note" label="说明" min-width="150" show-overflow-tooltip />
+          <el-table-column prop="index" label="排序" width="70" />
+          <el-table-column label="状态" width="80">
+            <template #default="{ row }">
+              <el-tag :type="row.disable ? 'danger' : 'success'" size="small">{{ row.disable ? '禁用' : '启用' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="首页展示" width="90">
+            <template #default="{ row }">
+              <el-tag :type="row.showHome || row.show_home ? 'success' : 'info'" size="small">
+                {{ row.showHome || row.show_home ? '展示' : '不展示' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="180">
+            <template #default="{ row }">
+              <el-button type="primary" link @click="handleEditPlan(row)">编辑</el-button>
+              <el-button :type="row.disable ? 'success' : 'warning'" link @click="handleTogglePlanStatus(row)">
+                {{ row.disable ? '启用' : '禁用' }}
+              </el-button>
+              <el-button type="danger" link @click="handleDeletePlan(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
+
+    <!-- 套餐表单对话框 -->
+    <el-dialog
+      v-model="planFormDialogVisible"
+      :title="planFormType === 'add' ? '新增套餐' : '编辑套餐'"
+      width="700px"
+      append-to-body
+      class="plan-form-dialog"
+    >
+      <div class="plan-form-content">
+        <el-form ref="planFormRef" :model="planForm" :rules="planFormRules" label-width="100px">
+          <el-form-item label="套餐名称" prop="name">
+            <el-input v-model="planForm.name" placeholder="请输入套餐名称" />
+          </el-form-item>
+          <el-form-item label="说明" prop="note">
+            <el-input v-model="planForm.note" type="textarea" :rows="2" placeholder="请输入套餐说明" />
+          </el-form-item>
+          <el-form-item label="参数配置" prop="args">
+            <div class="args-config-container">
+              <div class="args-select-row">
+                <el-select v-model="selectedArgIds" multiple placeholder="请选择需要配置的参数" style="width: 100%" @change="onSelectedArgsChange">
+                  <el-option v-for="spec in planSpecList" :key="spec.id" :label="spec.name" :value="spec.id" />
+                </el-select>
+              </div>
+              <div v-if="selectedArgSpecs.length > 0" class="args-selector">
+                <div v-for="spec in selectedArgSpecs" :key="spec.id" class="spec-item">
+                  <div class="spec-label">{{ spec.name }}</div>
+                  <div class="spec-values">
+                    <template v-if="spec.type === 'select' && spec.attrs && spec.attrs.length > 0">
+                      <el-radio-group v-model="selectedArgs[spec.id]" size="small" @change="updateArgsJson">
+                        <el-radio-button v-for="attr in spec.attrs" :key="attr.id" :value="attr.id">{{ attr.name }}</el-radio-button>
+                      </el-radio-group>
+                    </template>
+                    <template v-else-if="spec.type === 'number'">
+                      <div class="number-input-wrapper">
+                        <el-input-number v-model="selectedArgs[spec.id]" :min="spec.min || 0" :max="spec.max || 9999" :step="spec.step || 1" :step-strictly="true" size="small" @change="updateArgsJson" />
+                        <span class="number-range">(范围: {{ spec.min || 0 }} - {{ spec.max || 9999 }}，步长: {{ spec.step || 1 }})</span>
+                      </div>
+                      <div v-if="spec.attrs && spec.attrs.length > 0 && selectedArgs[spec.id]" class="matched-attr-info">
+                        <el-tag type="success" size="small">匹配区间: {{ getMatchedAttrName(spec, selectedArgs[spec.id]) }}</el-tag>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <el-input v-model="selectedArgs[spec.id]" placeholder="请输入值" size="small" style="width: 200px" @input="updateArgsJson" />
+                    </template>
+                  </div>
+                </div>
+              </div>
+              <el-empty v-else-if="planSpecList.length > 0" description="请先选择需要配置的参数" :image-size="60" />
+              <el-empty v-else description="暂无参数配置，请先为商品添加参数" :image-size="60" />
+              <div class="args-actions" v-if="selectedArgSpecs.length > 0">
+                <el-button type="info" plain size="small" @click="showArgsPreview = true">
+                  <el-icon><View /></el-icon>查看配置JSON
+                </el-button>
+                <el-button type="warning" plain size="small" @click="clearArgsSelection">
+                  <el-icon><Delete /></el-icon>清空选择
+                </el-button>
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item label="额外参数">
+            <div class="args-config-container">
+              <div class="form-tip" style="margin-bottom: 8px;">选择参数配置中未选择的参数作为额外参数</div>
+              <el-select v-model="selectedExtraArgIds" multiple placeholder="请选择额外参数" style="width: 100%" @change="onSelectedExtraArgsChange">
+                <el-option v-for="spec in extraSpecList" :key="spec.id" :label="`${spec.name} (ID: ${spec.id})`" :value="spec.id" />
+              </el-select>
+              <el-empty v-if="extraSpecList.length === 0" description="所有参数已在参数配置中选择" :image-size="40" />
+            </div>
+          </el-form-item>
+          <el-form-item label="库存数量" prop="inventory">
+            <el-input-number v-model="planForm.inventory" :min="0" style="width: 100%" placeholder="库存数量" />
+            <div class="form-tip">0 表示没有库存</div>
+          </el-form-item>
+          <el-form-item label="启用固定价格" prop="enable_fixed_price">
+            <el-switch v-model="planForm.enable_fixed_price" :active-value="true" :inactive-value="false" active-text="启用" inactive-text="禁用" :loading="fixedPriceLoading" @change="handleFixedPriceChange" />
+            <div class="form-tip">启用后套餐价格将使用固定价格，不再根据参数计算</div>
+          </el-form-item>
+          <el-form-item label="固定价格(元)" prop="fixed_price" v-if="planForm.enable_fixed_price === true">
+            <el-input-number v-model="planForm.fixed_price" :min="0" :precision="2" :step="0.01" style="width: 100%" placeholder="请输入固定价格(元)" />
+          </el-form-item>
+          <el-form-item label="排序索引" prop="index">
+            <el-input-number v-model="planForm.index" :min="0" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="状态" prop="disable" v-if="planFormType === 'edit'">
+            <el-radio-group v-model="planForm.disable">
+              <el-radio :value="false">启用</el-radio>
+              <el-radio :value="true">禁用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="首页展示" prop="show_home">
+            <el-switch v-model="planForm.show_home" active-text="展示" inactive-text="不展示" />
+            <div class="form-tip">控制商品套餐是否在首页显示</div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="planFormDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitPlanForm">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 参数配置预览对话框 -->
+    <el-dialog v-model="showArgsPreview" title="参数配置预览" width="500px" append-to-body>
+      <div class="args-preview">
+        <div class="preview-header">
+          <span>已选择 {{ Object.keys(selectedArgs).filter(k => selectedArgs[k] !== undefined && selectedArgs[k] !== '').length }} 个参数</span>
+          <el-tag :type="isArgsValid ? 'success' : 'warning'" size="small">{{ isArgsValid ? '配置有效' : '部分参数未选择' }}</el-tag>
+        </div>
+        <el-divider />
+        <div class="preview-list">
+          <div v-for="spec in planSpecList" :key="spec.id" class="preview-item">
+            <span class="preview-label">{{ spec.name }}:</span>
+            <span class="preview-value" :class="{ 'not-selected': !getSelectedValueDisplay(spec) }">{{ getSelectedValueDisplay(spec) || '未选择' }}</span>
+          </div>
+        </div>
+        <el-divider content-position="left">JSON 数据</el-divider>
+        <pre class="json-preview">{{ formatArgsJsonPreview() }}</pre>
+      </div>
+      <template #footer>
+        <el-button @click="showArgsPreview = false">关闭</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Refresh, Search, Folder, ArrowDown, ArrowUp, ArrowRight, Loading, Grid, List } from '@element-plus/icons-vue'
+import { Plus, Refresh, Search, Folder, ArrowDown, ArrowUp, ArrowRight, Loading, Grid, List, Document, Picture, Delete, View } from '@element-plus/icons-vue'
 import { 
   getProductGroupList, 
   createProductGroup, 
@@ -505,8 +1065,31 @@ import {
   getProductGroupTagList,
   createProductGroupTag,
   updateProductGroupTag,
-  deleteProductGroupTag
+  deleteProductGroupTag,
+  getProductList,
+  createProduct,
+  updateProduct,
+  deleteProduct,
+  getProductTagList,
+  getProductParameterList,
+  getProductParameterDetail,
+  createProductParameter,
+  updateProductParameter,
+  deleteProductParameter,
+  addProductParameterValue,
+  updateProductParameterValue,
+  deleteProductParameterValue,
+  getProductPlanList,
+  getProductPlanDetail,
+  createProductPlan,
+  updateProductPlan,
+  deleteProductPlan,
+  disableProductPlan,
+  enableProductPlan,
+  disablePlanFixedPrice,
+  enablePlanFixedPrice
 } from '@/api/admin/product'
+import { getFileDetail } from '@/api/admin/file'
 import AvatarSelector from '@/components/admin/AvatarSelector.vue'
 
 // Tab切换
@@ -546,7 +1129,8 @@ const groupForm = reactive({
   level: 1,
   parent_id: undefined,
   cover_id: undefined,
-  tag_id: undefined
+  tag_id: undefined,
+  index: 0 // 添加排序索引字段
 })
 
 const groupRules = {
@@ -570,6 +1154,83 @@ const dialogTitle = computed(() => {
   return '编辑商品分组'
 })
 
+// 商品相关状态
+const productList = ref([]) // 商品列表
+const productLoading = ref(false) // 商品加载状态
+const expandedGroups = ref(new Set()) // 记录展开的分组ID
+const loadedProductGroups = ref(new Set()) // 记录已加载商品的分组ID，避免重复请求
+const groupProductsMap = ref(new Map()) // 按分组ID存储商品列表 Map<groupId, product[]>
+
+// 文件URL缓存 Map<fileId, url>
+const fileUrlCache = ref(new Map())
+
+// 获取文件URL（带缓存）
+const getFileUrl = (fileId) => {
+  if (!fileId) return ''
+  const cached = fileUrlCache.value.get(fileId)
+  if (cached) return cached
+  // 异步加载
+  getFileDetail({ file_id: fileId }).then(res => {
+    if (res.data.code === 200 && res.data.data?.url) {
+      const newCache = new Map(fileUrlCache.value)
+      newCache.set(fileId, res.data.data.url)
+      fileUrlCache.value = newCache
+    }
+  }).catch(() => {})
+  return '' // 先返回空，加载完成后会响应式更新
+}
+
+// 商品表单
+const productForm = reactive({
+  id: undefined,
+  name: '',
+  table: '',
+  tag: '',
+  content: '',
+  cover_id: undefined,
+  good_group_id: undefined,
+  inventory_control: false,
+  inventory: 0,
+  price: 0,
+  pay_num: 1,
+  expire_time: 0,
+  recommend: false,
+  recommend_rebate: 0,
+  arg_type: 'all'
+})
+
+const productRules = {
+  name: [
+    { required: true, message: '请输入商品名称', trigger: 'blur' }
+  ],
+  table: [
+    { required: true, message: '请输入商品所属表', trigger: 'blur' }
+  ],
+  content: [
+    { required: true, message: '请输入商品内容', trigger: 'blur' }
+  ],
+  good_group_id: [
+    { required: true, message: '请选择商品分组', trigger: 'change' }
+  ],
+  price: [
+    { required: true, message: '请输入商品价格', trigger: 'blur' },
+    { type: 'number', message: '请输入数字', trigger: 'blur' }
+  ]
+}
+
+// 商品对话框状态
+const productDialogVisible = ref(false)
+const productDialogType = ref('add')
+const productFormRef = ref(null)
+const coverSelectorVisible = ref(false)
+
+// 商品分组选择相关
+const showProductGroupSelector = ref(false)
+const selectedProductGroup = ref(null)
+const selectedGroupName = computed(() => {
+  return selectedProductGroup.value?.name || ''
+})
+
 // 是否正在添加子级分组（用于禁用父级选择）
 const isAddingChild = computed(() => {
   return dialogType.value === 'add' && groupForm.parent_id
@@ -579,63 +1240,214 @@ const groupFormRef = ref(null)
 // 树形表格展开控制
 const treeTableRef = ref(null)
 
-// 树形显示数据（扁平化用于表格显示）
+// 根据ID在树中查找原始分组对象（递归搜索）
+const findGroupById = (id) => {
+  const rootItems = treeDataMap.value.get(0) || []
+  const search = (items) => {
+    for (const item of items) {
+      if (item.id === id) return item
+      if (item._children && item._children.length > 0) {
+        const found = search(item._children)
+        if (found) return found
+      }
+    }
+    return null
+  }
+  return search(rootItems)
+}
+
+// 用于强制触发视图更新的计数器
+const treeVersion = ref(0)
+
+// 树形显示数据（扁平化用于表格显示，包含分组和商品）
 const treeDisplayData = computed(() => {
+  // 依赖 treeVersion 以便手动触发重新计算
+  const _v = treeVersion.value
   const result = []
   const rootItems = treeDataMap.value.get(0) || []
+  // 触发 groupProductsMap 的响应式依赖
+  const productsMap = groupProductsMap.value
   
-  const flatten = (items, parentExpanded = true) => {
-    if (!parentExpanded) return
-    items.forEach(item => {
-      result.push(item)
-      if (item._expanded && item._children && item._children.length > 0) {
-        flatten(item._children, true)
-      }
+  // 递归处理分组节点
+  const processGroup = (group, displayLevel) => {
+    // 添加分组行（保留原始对象引用，附加显示属性）
+    result.push({
+      ...group,
+      _origRef: group,
+      level: displayLevel,
+      isGroup: true
     })
+    
+    // 如果分组已展开
+    if (group._expanded) {
+      // 触发加载该分组下的商品（异步，不阻塞渲染）
+      if (expandedGroups.value.has(group.id) && !loadedProductGroups.value.has(group.id)) {
+        loadProductsForGroup(group.id)
+      }
+      
+      // 添加子分组
+      if (group._children && group._children.length > 0) {
+        for (const child of group._children) {
+          processGroup(child, displayLevel + 1)
+        }
+      }
+      
+      // 添加该分组下的商品（从 groupProductsMap 中读取）
+      const products = productsMap.get(group.id)
+      if (products && products.length > 0) {
+        for (const product of products) {
+          result.push({
+            ...product,
+            level: displayLevel + 1,
+            isProduct: true
+          })
+        }
+      }
+    }
+  }
+  
+  // 处理所有根级分组
+  for (const item of rootItems) {
+    if (item.isGroup) {
+      processGroup(item, item.level || 1)
+    }
   }
   
-  flatten(rootItems)
   return result
 })
 
+// 清除所有商品缓存（在重新获取分组列表时调用）
+const clearProductCache = () => {
+  loadedProductGroups.value.clear()
+  groupProductsMap.value = new Map()
+  console.log('清除所有商品加载缓存')
+}
+
+// 加载分组下的商品
+const loadProductsForGroup = async (groupId) => {
+  // 检查是否已经加载过该分组的商品
+  if (loadedProductGroups.value.has(groupId)) {
+    return
+  }
+  
+  try {
+    const res = await getProductList({ 
+      good_group_id: groupId, 
+      page: 1, 
+      count: 100,
+      delete: false 
+    })
+    
+    if (res.data.code === 200) {
+      const products = res.data.data.data || []
+      console.log(`加载分组 ${groupId} 的商品:`, products)
+      
+      // 标记该分组已加载过商品
+      loadedProductGroups.value.add(groupId)
+      
+      // 创建商品项并存入 groupProductsMap
+      const productItems = products.map(product => ({
+        id: `product_${product.id}`,
+        type: 'product',
+        isProduct: true,
+        data: product,
+        hasChildren: false,
+        existSub: false,
+        _expanded: false,
+        _children: [],
+        _loading: false,
+        name: product.name,
+        price: product.price,
+        image: product.image,
+        inventoryControl: product.inventoryControl,
+        inventory: product.inventory,
+        recommend: product.recommend,
+        disable: product.disable,
+        parentId: groupId
+      }))
+      
+      // 存入商品映射（使用新 Map 触发响应式更新）
+      const newMap = new Map(groupProductsMap.value)
+      newMap.set(groupId, productItems)
+      groupProductsMap.value = newMap
+      
+      console.log(`成功加载 ${productItems.length} 个商品到分组 ${groupId}`)
+    }
+  } catch (error) {
+    console.error('加载商品失败:', error)
+    ElMessage.error('加载商品失败')
+  }
+}
+
 // 切换展开状态
 const toggleExpand = async (row) => {
-  if (row._loading) return
+  // 通过 _origRef 获取原始对象，或通过 findGroupById 查找
+  const group = row._origRef || findGroupById(row.id)
+  if (!group || group._loading) return
   
-  if (row._expanded) {
+  if (group._expanded) {
     // 收起
-    row._expanded = false
-  } else {
-    // 展开 - 如果还没加载子级，先加载
-    if (row.existSub && (!row._children || row._children.length === 0)) {
-      row._loading = true
-      try {
-        const childLevel = row.level + 1
-        const res = await getProductGroupList({ 
-          parent_id: row.id, 
-          level: childLevel,
-          count: 100 
-        })
-        if (res.data.code === 200) {
-          const children = res.data.data.data || []
-          row._children = children.map(child => ({
-            ...child,
-            _expanded: false,
-            _children: [],
-            _loading: false
-          }))
-          // 更新allGroupList
-          allGroupList.value = [...allGroupList.value, ...children]
-        }
-      } catch (error) {
-        console.error('加载子级失败:', error)
-        ElMessage.error('加载子级分组失败')
-      } finally {
-        row._loading = false
-      }
+    group._expanded = false
+    // 从展开分组记录中移除
+    expandedGroups.value.delete(group.id)
+    
+    // 清除该分组的商品加载缓存，允许重新加载
+    loadedProductGroups.value.delete(group.id)
+    
+    // 从 groupProductsMap 中移除该分组的商品
+    if (groupProductsMap.value.has(group.id)) {
+      const newMap = new Map(groupProductsMap.value)
+      newMap.delete(group.id)
+      groupProductsMap.value = newMap
+    }
+  } else {
+    // 展开
+    group._expanded = true
+    // 添加到展开分组记录中
+    expandedGroups.value.add(group.id)
+    
+    if (group.isGroup) {
+      // 如果还没加载子级分组，先加载子级分组
+      if (group.existSub && (!group._children || group._children.length === 0)) {
+        group._loading = true
+        treeVersion.value++ // 触发重新渲染以显示loading图标
+        try {
+          const childLevel = (group.level || 1) + 1
+          const res = await getProductGroupList({ 
+            parent_id: group.id, 
+            level: childLevel,
+            count: 100 
+          })
+          if (res.data.code === 200) {
+            const children = res.data.data.data || []
+            console.log(`加载分组 ${group.name} 的子级分组:`, children)
+            group._children = children.map(child => ({
+              ...child,
+              type: 'group',
+              isGroup: true,
+              _expanded: false,
+              _children: [],
+              _loading: false,
+              existSub: child.existSub || false
+            }))
+            // 更新allGroupList
+            allGroupList.value = [...allGroupList.value, ...children]
+          }
+        } catch (error) {
+          console.error('加载子级分组失败:', error)
+          ElMessage.error('加载子级分组失败')
+        } finally {
+          group._loading = false
+        }
+      }
+      
+      // 加载该分组下的商品（无论是否加载子级分组）
+      loadProductsForGroup(group.id)
     }
-    row._expanded = true
   }
+  
+  // 强制触发视图更新
+  treeVersion.value++
 }
 
 // 全部展开（递归加载所有子级）
@@ -644,19 +1456,29 @@ const expandAll = async () => {
     for (const item of items) {
       if (item.existSub) {
         if (!item._children || item._children.length === 0) {
+          // 用原始对象调用 toggleExpand（这里 item 已经是原始对象）
+          item._origRef = item
           await toggleExpand(item)
         } else {
           item._expanded = true
+          expandedGroups.value.add(item.id)
+          loadProductsForGroup(item.id)
         }
         if (item._children && item._children.length > 0) {
           await loadAndExpand(item._children)
         }
+      } else {
+        // 没有子分组也展开（加载商品）
+        item._expanded = true
+        expandedGroups.value.add(item.id)
+        loadProductsForGroup(item.id)
       }
     }
   }
   
   const rootItems = treeDataMap.value.get(0) || []
   await loadAndExpand(rootItems)
+  treeVersion.value++
 }
 
 // 全部收起
@@ -672,6 +1494,9 @@ const collapseAll = () => {
   
   const rootItems = treeDataMap.value.get(0) || []
   collapse(rootItems)
+  expandedGroups.value.clear()
+  clearProductCache()
+  treeVersion.value++
 }
 
 // 父级选择相关
@@ -819,6 +1644,10 @@ const getParentName = (parentId) => {
 // 获取商品分组列表
 const fetchGroupList = async () => {
   loading.value = true
+  
+  // 清除商品缓存，允许重新加载
+  clearProductCache()
+  
   try {
     const params = { ...queryParams }
     
@@ -853,6 +1682,8 @@ const fetchGroupList = async () => {
           // 无筛选条件：只显示一级数据
           const rootItems = data.map(item => ({
             ...item,
+            type: 'group',
+            isGroup: true,
             _expanded: false,
             _children: [],
             _loading: false
@@ -886,6 +1717,8 @@ const buildTreeFromFilteredData = (data) => {
   data.forEach(item => {
     nodeMap.set(item.id, {
       ...item,
+      type: 'group',
+      isGroup: true,
       _expanded: true, // 筛选后默认展开
       _children: [],
       _loading: false
@@ -957,7 +1790,8 @@ const handleAdd = (parentRow) => {
       level: parentRow.level + 1,
       parent_id: parentRow.id,
       cover_id: undefined,
-      tag_id: parentTagId || undefined
+      tag_id: parentTagId || undefined,
+      index: 0 // 默认排序索引为0
     })
     console.log('添加子级，父级信息:', parentRow.name, 'ID:', parentRow.id, 'Level:', parentRow.level, '标签:', parentRow.tag)
   } else {
@@ -971,7 +1805,8 @@ const handleAdd = (parentRow) => {
       level: 1,
       parent_id: undefined,
       cover_id: undefined,
-      tag_id: undefined
+      tag_id: undefined,
+      index: 0 // 默认排序索引为0
     })
   }
   
@@ -997,7 +1832,8 @@ const handleEdit = (row) => {
     level: row.level || 1,
     parent_id: row.parentId || undefined,
     cover_id: row.coverId || undefined,
-    tag_id: row.tag?.id || row.tagId || undefined
+    tag_id: row.tag?.id || row.tagId || undefined,
+    index: row.index || 0 // 添加排序索引字段
   })
   
   dialogVisible.value = true
@@ -1006,6 +1842,187 @@ const handleEdit = (row) => {
   console.log('表单数据:', groupForm, '表单disable:', groupForm.disable)
 }
 
+// 删除商品
+const handleDeleteProduct = async (product) => {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除商品"${product.name}"吗？此操作不可恢复！`,
+      '删除确认',
+      {
+        confirmButtonText: '确定删除',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+    
+    const res = await deleteProduct({ id: product.id })
+    if (res.data.code === 200) {
+      ElMessage.success('删除商品成功')
+      
+      // 从商品列表中移除
+      const index = productList.value.findIndex(p => p.id === product.id)
+      if (index > -1) {
+        productList.value.splice(index, 1)
+      }
+      
+      // 重新加载对应分组的商品
+      const groupId = product.good_group_id || product.goodGroupId
+      if (groupId) {
+        // 清除该分组的商品缓存，允许重新加载
+        loadedProductGroups.value.delete(groupId)
+        const newMap = new Map(groupProductsMap.value)
+        newMap.delete(groupId)
+        groupProductsMap.value = newMap
+        // 重新加载
+        loadProductsForGroup(groupId)
+      }
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除商品失败:', error)
+      ElMessage.error('删除商品失败')
+    }
+  }
+}
+
+// 新增商品
+const handleAddProduct = () => {
+  productDialogType.value = 'add'
+  productFormRef.value?.resetFields()
+  
+  Object.assign(productForm, {
+    id: undefined,
+    name: '',
+    table: '',
+    tag: '',
+    content: '',
+    cover_id: undefined,
+    good_group_id: undefined,
+    inventory_control: false,
+    inventory: 0,
+    price: 0,
+    pay_num: 1,
+    expire_time: 0,
+    recommend: false,
+    recommend_rebate: 0,
+    arg_type: 'all'
+  })
+  
+  selectedProductGroup.value = null
+  productDialogVisible.value = true
+}
+
+// 编辑商品
+const handleEditProduct = (product, parentGroupId) => {
+  productDialogType.value = 'edit'
+  
+  // 获取分组ID：优先使用传入的parentGroupId，其次从product中获取
+  const groupId = parentGroupId || product.good_group_id || product.goodGroupId
+  
+  // 设置选中的分组
+  if (groupId) {
+    selectedProductGroup.value = allGroupList.value.find(g => g.id === groupId)
+  }
+  
+  Object.assign(productForm, {
+    id: product.id,
+    name: product.name,
+    table: product.table,
+    tag: product.tag,
+    content: product.content,
+    cover_id: product.coverId,
+    good_group_id: groupId,
+    inventory_control: product.inventoryControl,
+    inventory: product.inventory,
+    price: product.price / 100,
+    pay_num: product.payNum,
+    expire_time: product.expireTime,
+    recommend: product.recommend,
+    recommend_rebate: product.recommendRebate,
+    arg_type: product.argType || 'all'
+  })
+  
+  productDialogVisible.value = true
+}
+
+// 提交商品表单
+const submitProductForm = () => {
+  productFormRef.value?.validate(async (valid) => {
+    if (valid) {
+      try {
+        const submitData = {
+          name: productForm.name.trim(),
+          table: productForm.table.trim(),
+          tag: productForm.tag.trim(),
+          content: productForm.content.trim(),
+          cover_id: productForm.cover_id,
+          good_group_id: productForm.good_group_id,
+          inventory_control: productForm.inventory_control,
+          inventory: Number(productForm.inventory) || 0,
+          price: Number(productForm.price) || 0,
+          pay_num: Number(productForm.pay_num) || 1,
+          expire_time: Number(productForm.expire_time) || 0,
+          recommend: productForm.recommend,
+          recommend_rebate: Number(productForm.recommend_rebate) || 0,
+          arg_type: productForm.arg_type
+        }
+        
+        let res
+        if (productDialogType.value === 'add') {
+          res = await createProduct(submitData)
+        } else {
+          submitData.id = productForm.id
+          res = await updateProduct(submitData)
+        }
+        
+        if (res.data.code === 200) {
+          ElMessage.success(productDialogType.value === 'add' ? '新增成功' : '修改成功')
+          productDialogVisible.value = false
+          
+          // 重新加载对应分组的商品
+          if (productForm.good_group_id) {
+            loadedProductGroups.value.delete(productForm.good_group_id)
+            const newMap = new Map(groupProductsMap.value)
+            newMap.delete(productForm.good_group_id)
+            groupProductsMap.value = newMap
+            loadProductsForGroup(productForm.good_group_id)
+          }
+        }
+      } catch (error) {
+        console.error('提交失败:', error)
+        ElMessage.error('操作失败')
+      }
+    }
+  })
+}
+
+// 商品分组选择相关
+const handleProductGroupSelect = (row) => {
+  selectedProductGroup.value = row
+}
+
+const confirmProductGroupSelect = () => {
+  if (selectedProductGroup.value) {
+    productForm.good_group_id = selectedProductGroup.value.id
+    showProductGroupSelector.value = false
+  }
+}
+
+const clearProductGroup = () => {
+  productForm.good_group_id = undefined
+  selectedProductGroup.value = null
+}
+
+// 商品封面选择相关
+const handleProductCoverSelect = (file) => {
+  productForm.cover_id = file.id
+  coverSelectorVisible.value = false
+}
+
+const clearProductCover = () => {
+  productForm.cover_id = undefined
+}
+
 // 清除父级
 const clearParent = () => {
   groupForm.parent_id = undefined
@@ -1089,7 +2106,8 @@ const submitForm = () => {
         const submitData = {
           name: groupForm.name.trim(),
           note: groupForm.note || '',
-          disable: groupForm.disable
+          disable: groupForm.disable,
+          index: Number(groupForm.index) || 0 // 添加排序索引字段
         }
         
         // 处理 level 和 parent_id
@@ -1153,7 +2171,8 @@ const tagDialogType = ref('add')
 const tagFormRef = ref(null)
 const tagForm = reactive({
   id: undefined,
-  name: ''
+  name: '',
+  index: 0
 })
 
 const tagRules = {
@@ -1216,7 +2235,8 @@ const handleAddTag = () => {
   tagDialogVisible.value = true
   Object.assign(tagForm, {
     id: undefined,
-    name: ''
+    name: '',
+    index: 0
   })
   tagFormRef.value?.resetFields()
 }
@@ -1227,7 +2247,8 @@ const handleEditTag = (row) => {
   tagDialogVisible.value = true
   Object.assign(tagForm, {
     id: row.id,
-    name: row.name
+    name: row.name,
+    index: row.index || 0
   })
 }
 
@@ -1257,9 +2278,9 @@ const submitTagForm = () => {
       try {
         let res
         if (tagDialogType.value === 'add') {
-          res = await createProductGroupTag({ name: tagForm.name })
+          res = await createProductGroupTag({ name: tagForm.name, index: tagForm.index })
         } else {
-          res = await updateProductGroupTag({ id: tagForm.id, name: tagForm.name })
+          res = await updateProductGroupTag({ id: tagForm.id, name: tagForm.name, index: tagForm.index })
         }
         if (res.data.code === 200) {
           ElMessage.success(tagDialogType.value === 'add' ? '新增成功' : '修改成功')
@@ -1280,6 +2301,451 @@ watch(activeTab, (newVal) => {
   }
 })
 
+// ==================== 商品参数管理 ====================
+const paramDialogVisible = ref(false)
+const paramLoading = ref(false)
+const parameterList = ref([])
+const currentProductId = ref(null)
+
+const paramFormDialogVisible = ref(false)
+const paramFormType = ref('add')
+const paramFormRef = ref(null)
+const paramForm = reactive({
+  arg_id: undefined,
+  arg_name: '',
+  arg_type: 'string',
+  must: false,
+  arg_step: 1,
+  arg_min: 0,
+  arg_max: 100
+})
+const paramRules = {
+  arg_name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
+  arg_type: [{ required: true, message: '请选择参数类型', trigger: 'change' }]
+}
+
+const paramValuesDialogVisible = ref(false)
+const paramValuesLoading = ref(false)
+const paramValueList = ref([])
+const currentParam = ref(null)
+
+const paramValueFormDialogVisible = ref(false)
+const paramValueFormType = ref('add')
+const paramValueFormRef = ref(null)
+const paramValueForm = reactive({
+  attr_id: undefined,
+  attr_name: '',
+  attr_value: '',
+  attr_price: 0,
+  index: 0,
+  attr_range: 0,
+  range_type: 'equal'
+})
+const paramValueRules = {
+  attr_name: [{ required: true, message: '请输入值名称', trigger: 'blur' }]
+}
+
+// 打开参数管理
+const handleParameter = (row) => {
+  currentProductId.value = row.id
+  paramDialogVisible.value = true
+  fetchParameterList()
+}
+
+// 获取参数列表
+const fetchParameterList = async () => {
+  if (!currentProductId.value) return
+  paramLoading.value = true
+  try {
+    const res = await getProductParameterList({ good_id: currentProductId.value })
+    if (res.data.code === 200) {
+      parameterList.value = res.data.data || []
+    }
+  } catch (error) {
+    ElMessage.error('获取参数列表失败')
+  } finally {
+    paramLoading.value = false
+  }
+}
+
+const getArgTypeText = (type) => {
+  const typeMap = { 'string': '字符串', 'number': '数字', 'select': '选择' }
+  return typeMap[type] || '未知'
+}
+const getArgTypeTag = (type) => {
+  const tagMap = { 'string': 'primary', 'number': 'success', 'select': 'warning' }
+  return tagMap[type] || 'info'
+}
+const getRangeTypeText = (type) => {
+  const typeMap = { 'after': '大于 >', 'before': '小于 <', 'equal': '等于 =' }
+  return typeMap[type] || type || '-'
+}
+
+const handleAddParameter = () => {
+  paramFormType.value = 'add'
+  paramFormDialogVisible.value = true
+  Object.assign(paramForm, { arg_id: undefined, arg_name: '', arg_type: 'string', must: false, arg_step: 1, arg_min: 0, arg_max: 100 })
+  nextTick(() => { paramFormRef.value?.resetFields() })
+}
+
+const handleEditParameter = (row) => {
+  paramFormType.value = 'edit'
+  paramFormDialogVisible.value = true
+  Object.assign(paramForm, { arg_id: row.id, arg_name: row.name, arg_type: row.type, must: row.must || false, arg_step: row.step || 1, arg_min: row.min || 0, arg_max: row.max || 100 })
+}
+
+const handleDeleteParameter = (row) => {
+  ElMessageBox.confirm(`确认删除参数 ${row.name} 吗？`, '警告', {
+    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
+  }).then(async () => {
+    try {
+      const res = await deleteProductParameter({ good_id: currentProductId.value, arg_id: row.id })
+      if (res.data.code === 200) { ElMessage.success('删除成功'); fetchParameterList() }
+    } catch (error) { ElMessage.error('删除失败') }
+  }).catch(() => {})
+}
+
+const submitParamForm = () => {
+  paramFormRef.value?.validate(async (valid) => {
+    if (valid) {
+      try {
+        const submitData = { good_id: Number(currentProductId.value), arg_name: paramForm.arg_name, arg_type: paramForm.arg_type, must: paramForm.must === true }
+        if (paramForm.arg_type === 'number') {
+          submitData.arg_step = Number(paramForm.arg_step)
+          submitData.arg_min = Number(paramForm.arg_min)
+          submitData.arg_max = Number(paramForm.arg_max)
+        }
+        if (paramFormType.value === 'edit') submitData.arg_id = paramForm.arg_id
+        const res = paramFormType.value === 'add' ? await createProductParameter(submitData) : await updateProductParameter(submitData)
+        if (res.data.code === 200) { ElMessage.success(paramFormType.value === 'add' ? '新增成功' : '修改成功'); paramFormDialogVisible.value = false; fetchParameterList() }
+      } catch (error) { ElMessage.error(error.response?.data?.message || '操作失败') }
+    }
+  })
+}
+
+const handleViewParamValues = (row) => {
+  currentParam.value = row
+  paramValuesDialogVisible.value = true
+  fetchParamValuesList()
+}
+
+const fetchParamValuesList = async () => {
+  if (!currentProductId.value || !currentParam.value) return
+  paramValuesLoading.value = true
+  try {
+    const res = await getProductParameterDetail({ good_id: currentProductId.value, arg_id: currentParam.value.id })
+    if (res.data.code === 200) paramValueList.value = res.data.data.attrs || []
+  } catch (error) { ElMessage.error('获取参数值列表失败') }
+  finally { paramValuesLoading.value = false }
+}
+
+const handleAddParamValue = () => {
+  paramValueFormType.value = 'add'
+  paramValueFormDialogVisible.value = true
+  Object.assign(paramValueForm, { attr_id: undefined, attr_name: '', attr_value: '', attr_price: 0, index: 0, attr_range: 0, range_type: 'equal' })
+  nextTick(() => { paramValueFormRef.value?.resetFields() })
+}
+
+const handleEditParamValue = (row) => {
+  paramValueFormType.value = 'edit'
+  paramValueFormDialogVisible.value = true
+  Object.assign(paramValueForm, { attr_id: row.id, attr_name: row.name, attr_value: row.value || '', attr_price: row.price / 100 || 0, index: row.index || 0, attr_range: row.phase || 0, range_type: row.rangeType || 'equal' })
+}
+
+const handleDeleteParamValue = (row) => {
+  ElMessageBox.confirm(`确认删除参数值 ${row.name} 吗？`, '警告', {
+    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
+  }).then(async () => {
+    try {
+      const res = await deleteProductParameterValue({ good_id: currentProductId.value, attr_id: row.id })
+      if (res.data.code === 200) { ElMessage.success('删除成功'); fetchParamValuesList() }
+    } catch (error) { ElMessage.error('删除失败') }
+  }).catch(() => {})
+}
+
+const submitParamValueForm = () => {
+  paramValueFormRef.value?.validate(async (valid) => {
+    if (valid) {
+      try {
+        const submitData = { good_id: Number(currentProductId.value), arg_id: Number(currentParam.value.id), attr_name: paramValueForm.attr_name, index: Number(paramValueForm.index), attr_price: Number(paramValueForm.attr_price) }
+        if (currentParam.value.type === 'select') submitData.attr_value = paramValueForm.attr_value
+        if (currentParam.value.type === 'number') { submitData.attr_range = Number(paramValueForm.attr_range); submitData.range_type = paramValueForm.range_type }
+        if (paramValueFormType.value === 'edit') submitData.attr_id = paramValueForm.attr_id
+        const res = paramValueFormType.value === 'add' ? await addProductParameterValue(submitData) : await updateProductParameterValue(submitData)
+        if (res.data.code === 200) { ElMessage.success(paramValueFormType.value === 'add' ? '添加成功' : '修改成功'); paramValueFormDialogVisible.value = false; fetchParamValuesList() }
+      } catch (error) { ElMessage.error(error.response?.data?.message || '操作失败') }
+    }
+  })
+}
+
+// ==================== 商品套餐管理 ====================
+const planDialogVisible = ref(false)
+const planLoading = ref(false)
+const planList = ref([])
+const currentPlanProductId = ref(null)
+const currentPlanProductName = ref('')
+
+const planFormDialogVisible = ref(false)
+const planFormType = ref('add')
+const planFormRef = ref(null)
+const fixedPriceLoading = ref(false)
+const planForm = reactive({
+  plan_id: undefined,
+  name: '',
+  note: '',
+  args: '',
+  extra_arg_ids: '',
+  extra_arg_ids_array: [],
+  inventory: 0,
+  fixed_price: 0,
+  enable_fixed_price: false,
+  index: 0,
+  disable: false,
+  show_home: false
+})
+const planFormRules = {
+  name: [{ required: true, message: '请输入套餐名称', trigger: 'blur' }]
+}
+
+const planSpecList = ref([])
+const selectedArgIds = ref([])
+const selectedArgs = reactive({})
+const showArgsPreview = ref(false)
+const selectedExtraArgIds = ref([])
+
+const selectedArgSpecs = computed(() => planSpecList.value.filter(spec => selectedArgIds.value.includes(spec.id)))
+const extraSpecList = computed(() => planSpecList.value.filter(spec => !selectedArgIds.value.includes(spec.id)))
+
+const parseArgs = (argsStr) => {
+  if (!argsStr) return []
+  try { const parsed = JSON.parse(argsStr); return Array.isArray(parsed) ? parsed : [] }
+  catch (e) { return [] }
+}
+
+const handlePlan = (row) => {
+  currentPlanProductId.value = row.id
+  currentPlanProductName.value = row.name
+  planDialogVisible.value = true
+  fetchPlanList()
+}
+
+const fetchPlanSpecList = async () => {
+  if (!currentPlanProductId.value) return
+  try {
+    const res = await getProductParameterList({ good_id: currentPlanProductId.value })
+    if (res.data.code === 200) planSpecList.value = res.data.data || []
+  } catch (error) { planSpecList.value = [] }
+}
+
+const onSelectedArgsChange = () => {
+  for (const key in selectedArgs) { if (!selectedArgIds.value.includes(Number(key))) delete selectedArgs[key] }
+  selectedExtraArgIds.value = selectedExtraArgIds.value.filter(id => !selectedArgIds.value.includes(id))
+  updateArgsJson()
+  updateExtraArgIds()
+}
+
+const onSelectedExtraArgsChange = () => { updateExtraArgIds() }
+const updateExtraArgIds = () => { planForm.extra_arg_ids = selectedExtraArgIds.value.join(','); planForm.extra_arg_ids_array = [...selectedExtraArgIds.value] }
+
+const updateArgsJson = () => {
+  const argsArray = []
+  for (const specId of selectedArgIds.value) {
+    const spec = planSpecList.value.find(s => s.id === specId)
+    if (!spec) continue
+    const selectedValue = selectedArgs[spec.id]
+    if (selectedValue === undefined || selectedValue === '') continue
+    if (spec.type === 'select') {
+      const attrObj = spec.attrs?.find(a => a.id === selectedValue)
+      if (attrObj) argsArray.push({ arg_id: spec.id, name: spec.name, attr_id: attrObj.id, value: attrObj.value || '' })
+    } else if (spec.type === 'number') {
+      const numValue = Number(selectedValue)
+      const matchedAttr = findMatchingNumberAttr(spec, numValue)
+      argsArray.push({ arg_id: spec.id, name: spec.name, attr_id: matchedAttr ? matchedAttr.id : 0, number: numValue })
+    } else {
+      argsArray.push({ arg_id: spec.id, name: spec.name, attr_id: 0, value: String(selectedValue) })
+    }
+  }
+  planForm.args = argsArray.length > 0 ? JSON.stringify(argsArray) : ''
+}
+
+const findMatchingNumberAttr = (spec, numValue) => {
+  if (!spec.attrs || spec.attrs.length === 0) return null
+  const sortedAttrs = [...spec.attrs].sort((a, b) => (a.index || 0) - (b.index || 0))
+  for (const attr of sortedAttrs) {
+    const phase = attr.phase || 0
+    const rangeType = attr.rangeType || 'before'
+    if (rangeType === 'before' && numValue <= phase) return attr
+    else if (rangeType === 'after' && numValue >= phase) return attr
+    else if (rangeType === 'equal' && numValue === phase) return attr
+  }
+  return sortedAttrs[sortedAttrs.length - 1]
+}
+
+const getMatchedAttrName = (spec, numValue) => {
+  const matchedAttr = findMatchingNumberAttr(spec, Number(numValue))
+  if (matchedAttr) { const priceText = matchedAttr.price ? ` (+¥${(matchedAttr.price / 100).toFixed(2)})` : ''; return `${matchedAttr.name}${priceText}` }
+  return '无匹配区间'
+}
+
+const clearArgsSelection = () => {
+  selectedArgIds.value = []
+  for (const key in selectedArgs) delete selectedArgs[key]
+  selectedExtraArgIds.value = []
+  planForm.args = ''
+  planForm.extra_arg_ids = ''
+  planForm.extra_arg_ids_array = []
+}
+
+const getSelectedValueDisplay = (spec) => {
+  const selectedValue = selectedArgs[spec.id]
+  if (selectedValue === undefined || selectedValue === '') return null
+  if (spec.type === 'select') { const attrObj = spec.attrs?.find(a => a.id === selectedValue); return attrObj ? attrObj.name : null }
+  return String(selectedValue)
+}
+
+const isArgsValid = computed(() => Object.keys(selectedArgs).some(k => selectedArgs[k] !== undefined && selectedArgs[k] !== ''))
+
+const formatArgsJsonPreview = () => {
+  if (!planForm.args) return '[]'
+  try { return JSON.stringify(JSON.parse(planForm.args), null, 2) } catch { return planForm.args }
+}
+
+const initSelectedArgsFromJson = (argsJson, extraArgIds = []) => {
+  clearArgsSelection()
+  const argsParamIds = []
+  if (argsJson) {
+    try {
+      const argsArray = typeof argsJson === 'string' ? JSON.parse(argsJson) : argsJson
+      if (Array.isArray(argsArray)) {
+        for (const arg of argsArray) {
+          const spec = planSpecList.value.find(s => s.id === arg.arg_id)
+          if (!spec) continue
+          argsParamIds.push(spec.id)
+          if (spec.type === 'select') {
+            if (arg.attr_id) selectedArgs[spec.id] = arg.attr_id
+            else if (arg.id) selectedArgs[spec.id] = arg.id
+            else { const attrObj = spec.attrs?.find(a => a.value === arg.value || a.name === arg.name); if (attrObj) selectedArgs[spec.id] = attrObj.id }
+          } else if (spec.type === 'number') { selectedArgs[spec.id] = Number(arg.number !== undefined ? arg.number : arg.value) }
+          else { selectedArgs[spec.id] = arg.value }
+        }
+      }
+    } catch (e) { console.error('解析args失败:', e) }
+  }
+  selectedArgIds.value = argsParamIds
+  if (extraArgIds && extraArgIds.length > 0) selectedExtraArgIds.value = extraArgIds.filter(id => !argsParamIds.includes(id))
+  updateArgsJson()
+  updateExtraArgIds()
+}
+
+const fetchPlanList = async () => {
+  if (!currentPlanProductId.value) return
+  planLoading.value = true
+  try {
+    const res = await getProductPlanList({ good_id: String(currentPlanProductId.value) })
+    if (res.data.code === 200) {
+      let data = res.data.data
+      if (Array.isArray(data)) planList.value = data.map(item => ({ ...item, argsParsed: parseArgs(item.args) }))
+      else if (data && data.list) planList.value = data.list.map(item => ({ ...item, argsParsed: parseArgs(item.args) }))
+      else if (data && data.data) planList.value = data.data.map(item => ({ ...item, argsParsed: parseArgs(item.args) }))
+      else planList.value = []
+    }
+  } catch (error) { ElMessage.error('获取套餐列表失败') }
+  finally { planLoading.value = false }
+}
+
+const handleAddPlan = async () => {
+  planFormType.value = 'add'
+  await fetchPlanSpecList()
+  clearArgsSelection()
+  selectedArgIds.value = planSpecList.value.map(spec => spec.id)
+  Object.assign(planForm, { plan_id: undefined, name: '', note: '', args: '', extra_arg_ids: '', extra_arg_ids_array: [], inventory: 0, fixed_price: 0, enable_fixed_price: false, index: 0, disable: false, show_home: false })
+  planFormDialogVisible.value = true
+  nextTick(() => { planFormRef.value?.resetFields() })
+}
+
+const handleEditPlan = async (row) => {
+  planFormType.value = 'edit'
+  await fetchPlanSpecList()
+  try {
+    const res = await getProductPlanDetail({ good_id: String(currentPlanProductId.value), plan_id: String(row.id) })
+    if (res.data.code === 200) {
+      const data = res.data.data
+      let extraArgIdsArray = []
+      const extraArgIdsRaw = data.extraArgIds || data.extra_arg_ids
+      const extraArgsRaw = data.extraArgs || data.extra_args
+      if (extraArgIdsRaw) {
+        if (Array.isArray(extraArgIdsRaw)) extraArgIdsArray = extraArgIdsRaw.map(Number)
+        else if (typeof extraArgIdsRaw === 'string' && extraArgIdsRaw.trim()) extraArgIdsArray = extraArgIdsRaw.split(',').filter(Boolean).map(Number)
+      } else if (extraArgsRaw && Array.isArray(extraArgsRaw)) {
+        extraArgIdsArray = extraArgsRaw.map(arg => arg.id || arg.arg_id || arg.argId).filter(Boolean).map(Number)
+      }
+      Object.assign(planForm, {
+        plan_id: data.id, name: data.name || '', note: data.note || '', args: data.args || '',
+        extra_arg_ids: extraArgIdsArray.join(','), extra_arg_ids_array: extraArgIdsArray,
+        inventory: data.inventory || 0, fixed_price: ((data.fixedPrice || data.fixed_price || 0) / 100).toFixed(2) * 1,
+        enable_fixed_price: !!(data.enableFixedPrice || data.enable_fixed_price),
+        index: data.index || 0, disable: data.disable || false, show_home: !!(data.showHome || data.show_home)
+      })
+      initSelectedArgsFromJson(data.args, extraArgIdsArray)
+      planFormDialogVisible.value = true
+    }
+  } catch (error) { ElMessage.error('获取套餐详情失败') }
+}
+
+const handleDeletePlan = (row) => {
+  ElMessageBox.confirm(`确认删除套餐 ${row.name} 吗？`, '警告', {
+    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
+  }).then(async () => {
+    try {
+      const res = await deleteProductPlan({ good_id: String(currentPlanProductId.value), plan_id: String(row.id) })
+      if (res.data.code === 200) { ElMessage.success('删除成功'); fetchPlanList() }
+    } catch (error) { ElMessage.error('删除失败') }
+  }).catch(() => {})
+}
+
+const handleTogglePlanStatus = async (row) => {
+  try {
+    const res = row.disable
+      ? await enableProductPlan({ good_id: String(currentPlanProductId.value), plan_id: String(row.id) })
+      : await disableProductPlan({ good_id: String(currentPlanProductId.value), plan_id: String(row.id) })
+    if (res.data.code === 200) { ElMessage.success(row.disable ? '启用成功' : '禁用成功'); fetchPlanList() }
+  } catch (error) { ElMessage.error('操作失败') }
+}
+
+const handleFixedPriceChange = async (value) => {
+  if (planFormType.value !== 'edit' || !planForm.plan_id) return
+  fixedPriceLoading.value = true
+  try {
+    const data = { good_id: String(currentPlanProductId.value), plan_id: String(planForm.plan_id) }
+    const res = value === true ? await enablePlanFixedPrice(data) : await disablePlanFixedPrice(data)
+    if (res.data.code === 200) ElMessage.success(value ? '已启用固定价格' : '已禁用固定价格')
+    else { planForm.enable_fixed_price = !value; ElMessage.error(res.data.message || '操作失败') }
+  } catch (error) { planForm.enable_fixed_price = !value; ElMessage.error('操作失败') }
+  finally { fixedPriceLoading.value = false }
+}
+
+const submitPlanForm = () => {
+  planFormRef.value?.validate(async (valid) => {
+    if (valid) {
+      try {
+        const extraArgIdsStr = selectedExtraArgIds.value.join(',')
+        const submitData = {
+          good_id: String(currentPlanProductId.value), name: planForm.name, note: planForm.note || '',
+          args: planForm.args || '', extra_arg_ids: extraArgIdsStr || planForm.extra_arg_ids || '',
+          inventory: Number(planForm.inventory) || 0, fixed_price: Math.round(Number(planForm.fixed_price) * 100) || 0,
+          index: Number(planForm.index) || 0, show_home: planForm.show_home === true
+        }
+        if (planFormType.value === 'add') submitData.enable_fixed_price = planForm.enable_fixed_price === true
+        let res
+        if (planFormType.value === 'add') res = await createProductPlan(submitData)
+        else { submitData.plan_id = String(planForm.plan_id); submitData.disable = planForm.disable; res = await updateProductPlan(submitData) }
+        if (res.data.code === 200) { ElMessage.success(planFormType.value === 'add' ? '新增成功' : '修改成功'); planFormDialogVisible.value = false; fetchPlanList() }
+        else ElMessage.error(res.data.message || '操作失败')
+      } catch (error) { ElMessage.error(error.response?.data?.message || '操作失败') }
+    }
+  })
+}
+
 // 初始化
 onMounted(() => {
   fetchGroupList()
@@ -1463,6 +2929,66 @@ onMounted(() => {
 
 .recommend-user-selector .clear-btn {
   flex-shrink: 0;
+  color: #f56c6c;
+}
+
+/* 商品相关样式 */
+.product-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.product-info .price {
+  font-weight: 600;
+  color: #e74c3c;
+  font-size: 14px;
+}
+
+.product-info .table-name {
+  font-size: 12px;
+  color: #606266;
+}
+
+.product-info .inventory {
+  font-size: 12px;
+  color: #909399;
+}
+
+.product-info .recommend {
+  margin-top: 2px;
+}
+
+.product-info .expire-time {
+  font-size: 11px;
+  color: #909399;
+}
+
+/* 商品行横排信息 */
+.product-info-inline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.product-info-inline .product-price {
+  font-weight: 600;
+  color: #e74c3c;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.product-tags {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.product-tags .text-muted {
+  font-size: 12px;
+  color: #c0c4cc;
 }
 
 /* 表格样式优化 */
@@ -1538,6 +3064,195 @@ onMounted(() => {
   100% { background-position: -200% 0; }
 }
 
+/* 套餐管理样式 */
+.plan-management {
+  padding: 0;
+}
+
+.plan-header {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.args-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.values-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.number-config {
+  color: #909399;
+  font-size: 13px;
+}
+
+/* 套餐表单样式 */
+.plan-form-content {
+  max-height: 60vh;
+  overflow-y: auto;
+  padding-right: 8px;
+  margin-right: -8px;
+}
+
+.plan-form-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.plan-form-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.plan-form-content::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 3px;
+  transition: background-color 0.3s;
+}
+
+.plan-form-content:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(144, 147, 153, 0.3);
+}
+
+/* 参数配置选择器样式 */
+.args-config-container {
+  width: 100%;
+}
+
+.args-select-row {
+  margin-bottom: 12px;
+}
+
+.args-selector {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 12px;
+  background: #fafafa;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.spec-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 10px 0;
+  border-bottom: 1px dashed #e4e7ed;
+}
+
+.spec-item:last-child {
+  border-bottom: none;
+}
+
+.spec-label {
+  width: 100px;
+  flex-shrink: 0;
+  font-weight: 500;
+  color: #606266;
+  padding-top: 4px;
+}
+
+.spec-values {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.spec-values :deep(.el-radio-group) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.spec-values :deep(.el-radio-button__inner) {
+  padding: 6px 12px;
+}
+
+.number-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.number-range {
+  color: #909399;
+  font-size: 12px;
+}
+
+.matched-attr-info {
+  margin-top: 6px;
+}
+
+.args-actions {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+}
+
+/* 参数预览样式 */
+.args-preview {
+  padding: 0;
+}
+
+.preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.preview-list {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.preview-item {
+  display: flex;
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.preview-item:last-child {
+  border-bottom: none;
+}
+
+.preview-label {
+  width: 120px;
+  flex-shrink: 0;
+  color: #606266;
+  font-weight: 500;
+}
+
+.preview-value {
+  color: #409eff;
+  font-weight: 500;
+}
+
+.preview-value.not-selected {
+  color: #c0c4cc;
+  font-style: italic;
+}
+
+.json-preview {
+  background: #f5f7fa;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 12px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 12px;
+  color: #606266;
+  max-height: 200px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+}
+
 /* 移动端适配 */
 @media (max-width: 768px) {
   .filter-content {
diff --git a/src/views/user/UserDetail.vue b/src/views/user/UserDetail.vue
index 59d9057..54ef64a 100644
--- a/src/views/user/UserDetail.vue
+++ b/src/views/user/UserDetail.vue
@@ -45,14 +45,12 @@
             </div>
           </div>
           <!-- 统一的用户数据概览区域 -->
-          <div class="profile-stats-unified">
+          <div class="profile-stats">
             <!-- 余额数据 -->
             <div class="stat-item" v-for="balance in userBalanceList" :key="balance.id">
               <div class="stat-label">{{ balance.typeName }}</div>
-              <div class="stat-value" :style="{ color: balance.typeColor }">{{ formatBalance(balance.price) }}</div>
+              <div class="stat-value">{{ formatBalance(balance.price) }}</div>
             </div>
-            <!-- 分隔线 -->
-            <el-divider direction="vertical" v-if="userBalanceList.length > 0" class="stats-divider" />
             <!-- 其他状态数据 -->
             <div class="stat-item">
               <div class="stat-label">实名状态</div>
@@ -1478,7 +1476,7 @@ onActivated(() => {
 }
 
 /* 统一的用户数据概览区域 */
-.profile-stats-unified {
+.profile-stats {
   display: flex;
   align-items: center;
   gap: 24px;
@@ -1486,18 +1484,18 @@ onActivated(() => {
   flex-wrap: wrap;
 }
 
-.profile-stats-unified .stat-item {
+.profile-stats .stat-item {
   text-align: center;
   min-width: 70px;
 }
 
-.profile-stats-unified .stat-label {
+.profile-stats .stat-label {
   font-size: 12px;
   color: #909399;
   margin-bottom: 4px;
 }
 
-.profile-stats-unified .stat-value {
+.profile-stats .stat-value {
   font-size: 16px;
   font-weight: 600;
   color: #303133;
@@ -1710,7 +1708,7 @@ onActivated(() => {
     gap: 20px;
   }
   
-  .profile-stats-unified {
+  .profile-stats {
     width: 100%;
     justify-content: flex-start;
     background: #f9fafc;
@@ -1733,11 +1731,11 @@ onActivated(() => {
     grid-template-columns: 1fr;
   }
   
-  .profile-stats-unified {
+  .profile-stats {
     gap: 16px;
   }
   
-  .profile-stats-unified .stat-item {
+  .profile-stats .stat-item {
     min-width: 60px;
   }
 }
diff --git a/vite.config.js b/vite.config.js
index e0b3c1a..5172787 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,24 +1,59 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { resolve } from 'path'
 
+// 清除系统代理环境变量，避免本地开发时系统代理（VPN/Clash等）干扰 vite proxy
+delete process.env.HTTP_PROXY
+delete process.env.HTTPS_PROXY
+delete process.env.http_proxy
+delete process.env.https_proxy
+delete process.env.ALL_PROXY
+delete process.env.all_proxy
+// 设置 NO_PROXY 确保本地连接不走代理
+process.env.NO_PROXY = 'localhost,127.0.0.1,::1'
+process.env.no_proxy = 'localhost,127.0.0.1,::1'
+
 // https://vite.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, 'src')
-    }
-  },
-  optimizeDeps: {
-    include: ['monaco-editor']
-  },
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
   
-  build: {
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          'monaco-editor': ['monaco-editor']
+  // 开发环境代理目标，默认测试服务器
+  const proxyTarget = env.VITE_API_BASE_URL || 'https://apiservertest.s1f.ren'
+  
+  return {
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src')
+      }
+    },
+    optimizeDeps: {
+      include: ['monaco-editor']
+    },
+    server: {
+      // 强制绑定 IPv4 回环地址，避免 TUN/VPN 代理模式拦截 IPv6 或通配地址
+      host: '127.0.0.1',
+      port: 5174,
+      strictPort: false,
+      proxy: {
+        '/api': {
+          target: proxyTarget,
+          changeOrigin: true,
+          secure: false
+        },
+        '/acs': {
+          target: proxyTarget,
+          changeOrigin: true,
+          secure: false
+        }
+      }
+    },
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            'monaco-editor': ['monaco-editor']
+          }
         }
       }
     }
diff --git a/问题.MD b/问题.MD
deleted file mode 100644
index c3d5695..0000000
--- a/问题.MD
+++ /dev/null
@@ -1,221 +0,0 @@
-✅已完成、⚠️部分完成、❌未完成这样显示
------------------------------------------------------------------------------------------------需要解决
-
-1.管理员后台在配置管理展示的类型，有两行都是相同的，只需要展示一行 ✅已完成
-
-2.，需要做相近字排序，比如前缀都是轮播图的展示在一起这样方便后续修改理解意思，还有是运用在同一处地方的可以展示在一起 ✅已完成
-
-3.配置管理后台：表格table名称列的图标向下与文字保持平行 ✅已完成
-
-4.table的值字段浮动不展示tip，并且点击可以打开对应的编辑弹窗 ✅已完成
-
-5.将编辑配置的设置值的上传文件按钮进行删除，并且点击编辑修改文件图标打开的还得是imageSelector组件 ✅已完成
-
-6.点击编辑配置的的修改图片的按钮，应该打开imageSelector.vue组件进行替换图片 ✅已完成
-
-7.配置管理后台：表格table名称列的图标向下与文字保持平行，需要保持在同一行，只需要图标向下移动一点与文字保持水平 ✅已完成
-
-8.现在这种不好看，需要图标在左边，文字在右边 ✅已完成
-
-9.中间这个值列表，当是文字的时候，只展示一行，在配置管理的table表格中 ✅已完成
-
-
------------------------------------------------------------------------------------------------需要解决
-
-规则限制：
-1.在-------需要解决的中间进行写是否解决问题的判断也可以列todolist便于查看是否完成
-2.不要将我原本的问题进行删除了，只需要在范围的最后面添加todolist判断对应问题是否完成就可以了
-3.在以后只要有添加时间选择器就要遵循以下规则     
-时间选择器接受的是毫秒级时间戳，获取时的时间转换，将ISO格式转换为毫秒级时间戳
-   - 列表展示使用formatDate函数
-   - 时间选择器正确显示毫秒级时间戳
-   - 提交时转换为秒级时间戳
-4.后续每次写的页面，组件都需要兼容移动端
-5.只要是关于选择用户，文件，优惠卷，代金卷的都使用组件
-6.只要是弹窗需要使用选择组件的都参照用户列表的编辑用户的推介人的选择样式在弹窗中
-7.如果给出需要访问的地址文档信息，自行访问下面的接口地址内容
-
-
-
-## 一、项目结构 ✅
-
-```
-src/
-├── api/                    # API接口层
-│   ├── admin/              # 管理后台API (12个文件)
-│   │   ├── activity.js     ├── cdn.js        ├── discount.js
-│   │   ├── file.js         ├── group.js      ├── order.js
-│   │   ├── Permission.js   ├── product.js    ├── product-test.js
-│   │   ├── router.js       ├── setting.js    └── user.js
-│   ├── domain.js           ├── groupBuy.js
-│   ├── login.js            └── ticket.js
-├── components/             # 公共组件 (14个)
-│   ├── admin/
-│   │   ├── AvatarSelector.vue   # 头像选择组件
-│   │   └── FileSelector.vue     # 文件/封面选择组件 ✅新增
-│   ├── Charts/             # 图表组件 (4个)
-│   ├── layout/             # 布局组件 (4个)
-│   ├── marketing/DiscountDetailDialog.vue
-│   ├── UserSelector/index.vue   # 用户选择组件(推荐人选择)
-│   ├── Container.vue       ├── MonacoEditor.vue
-│   ├── Qrcode.vue          └── TextTruncate.vue
-├── views/                  # 页面视图 (67个)
-├── store/                  # 状态管理 (2个)
-├── router/index.js         # 路由配置
-├── utils/                  # 工具函数
-│   └── acs/                # ACS云服务工具 (12个)
-├── config/menus.js         # 菜单配置
-├── assets/                 # 静态资源
-├── App.vue                 # 应用入口
-├── main.js                 # 主入口
-└── style.css               # 全局样式
-```
-
-## 二、API接口统计 ✅ (约240+个)
-
-| 模块 | 文件 | 接口数 |
-|------|------|--------|
-| 登录认证 | login.js | 2 |
-| 工单管理 | ticket.js | 12 |
-| 域名白名单 | domain.js | 3 |
-| 拼团管理 | groupBuy.js | 18 |
-| 用户管理 | admin/user.js | 28 |
-| 商品管理 | admin/product.js | 19 |
-| 订单管理 | admin/order.js | 5 |
-| 优惠码/代金券 | admin/discount.js | 21 |
-| 权限管理 | admin/Permission.js | 8 |
-| 管理员组 | admin/group.js | 6 |
-| 配置管理 | admin/setting.js | 11 |
-| 文件管理 | admin/file.js | 7 |
-| 活动管理 | admin/activity.js | 8 |
-| 路由管理 | admin/router.js | 2 |
-| CDN管理 | admin/cdn.js | 1 |
-| ACS服务器 | utils/acs/server.js | 60+ |
-| ACS镜像 | utils/acs/mirror.js | 11 |
-| ACS消息 | utils/acs/message.js | 8 |
-| ACS审计 | utils/acs/audit.js | 4 |
-| ACS远程桌面 | utils/acs/guacamole.js | 5 |
-
-## 三、页面视图统计 ✅ (67个)
-
-| 分类 | 页面 | 数量 |
-|------|------|------|
-| 基础页面 | Login, Dashboard, NotFound, Redirect, About, Home | 6 |
-| 用户管理 | UserList, UserDetail, UserBalance, UserGroup, AdminGroup | 5 |
-| 商品管理 | ProductList, ProductGroup | 2 |
-| 订单管理 | OrderList | 1 |
-| 优惠营销 | DiscountCode, Voucher, VoucherManagement + 6个子页面 | 9 |
-| 活动管理 | SigninActivity, GroupBuyActivity, GroupBuyType | 3 |
-| 工单管理 | TicketList, TicketDetail, TicketChat | 3 |
-| 系统管理 | PermissionRoute/Admin, SystemFile, DomainWhitelist, SettingGroup, Setting, OperationLog, Users | 8 |
-| 站点审计 | AllSites, ViolationSites | 2 |
-| 全局设置 | GlobalSetting | 1 |
-| 个人中心 | UserInfo, ChangePassword | 2 |
-| ACS消息 | Announcements, Policies, News | 3 |
-| ACS镜像 | VmImages, ContainerImages, ImageCategories, ImageForm, ImageRequests | 5 |
-| ACS节点 | Nodes, server, ServerForm, VmDetail, containDetail, containerConsole, containFile + 2组件 | 9 |
-| ACS远程桌面 | Guacamole | 1 |
-
-## 四、CSS样式统计 ✅
-
-### style.css 全局样式
-| 类型 | 内容 |
-|------|------|
-| 重置样式 | `* { margin:0; padding:0; box-sizing:border-box; }` |
-| 文字颜色 | `.text-primary` `.text-success` `.text-warning` `.text-danger` `.text-info` |
-| 文字对齐 | `.text-center` `.text-left` `.text-right` |
-| Flex布局 | `.flex` `.flex-column` `.justify-center` `.justify-between` `.items-center` |
-| 尺寸 | `.w-full` `.h-full` |
-| 间距 | `.mb-10` `.mt-10` `.mr-10` `.ml-10` `.p-10` `.py-10` `.px-10` |
-| 响应式 | `.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` |
-
-### App.vue 全局样式
-| 类型 | 内容 |
-|------|------|
-| 过渡动画 | `.fade-enter-active` `.fade-leave-active` |
-| 滚动条 | `::-webkit-scrollbar` 自定义滚动条 |
-| 按钮扁平化 | `.el-button--primary/success/danger/default` 无圆角深蓝灰主题 |
-| 输入框扁平化 | `.el-input__wrapper` 无圆角边框 |
-| 标签扁平化 | `.el-tag--success/danger/info` 无圆角彩色背景 |
-| 卡片扁平化 | `.el-card` 无圆角1px边框 |
-| 表格扁平化 | `.el-table` 深蓝灰表头 |
-| 分页扁平化 | `.el-pagination` 无圆角深蓝灰选中 |
-| 下拉菜单 | `.el-dropdown-menu` 无圆角阴影边框 |
-| 对话框 | `.el-dialog` 无圆角扁平化头部尾部 |
-
-## 五、全局主题配置 ✅
-
-### 主色调
-| 颜色 | 值 | 用途 |
-|------|------|------|
-| 主色 | `#1890ff` | Element Plus主题色 |
-| 深蓝灰 | `#2c3e50` | 按钮主色、表头、激活状态 |
-| 次深蓝灰 | `#34495e` | 悬浮状态、文字 |
-| 绿色 | `#27ae60` / `#52c41a` | 成功状态 |
-| 红色 | `#e74c3c` / `#f5222d` | 危险/错误状态 |
-| 橙色 | `#faad14` | 警告状态 |
-| 蓝色 | `#3498db` | 链接、信息 |
-| 紫色 | `#722ed1` | 转化率图表 |
-| 背景灰 | `#f5f7fa` / `#f0f2f5` | 页面背景 |
-| 边框灰 | `#e1e8ed` / `#d5d9e0` | 边框分割线 |
-
-### 设计风格
-| 特性 | 说明 |
-|------|------|
-| 圆角 | 全局0圆角扁平化设计 |
-| 阴影 | 轻阴影 `0 2px 8px rgba(44,62,80,0.1)` |
-| 字体 | Helvetica Neue, PingFang SC, Microsoft YaHei |
-| 字号 | 基础14px |
-
-## 六、Store状态管理 ✅
-
-| Store | 功能 |
-|-------|------|
-| userStore.js | 用户信息存储 `userInfo` `setUserInfo()` |
-| tagsViewStore.js | 多标签页管理 `visitedViews` `addVisitedView()` `delVisitedView()` `delOthersViews()` `delAllViews()` `delLeftViews()` `delRightViews()` |
-
-## 七、技术栈 ✅
-
-| 技术 | 版本 |
-|------|------|
-| Vue | ^3.5.13 |
-| Vite | ^6.0.3 |
-| Element Plus | ^2.9.1 |
-| Vue Router | ^4.5.0 |
-| Pinia | ^3.0.2 |
-| Axios | ^1.7.9 |
-| ECharts | ^5.6.0 |
-| VueUse | ^13.1.0 |
-| Monaco Editor | ^0.52.2 |
-| Xterm.js | ^5.3.0 |
-| qrcode | ^1.5.4 |
-| dayjs | ^1.11.13 |
-
-
-## 表单组件优化 ✅已完成
-
-### 1. FileSelector 文件选择组件 ✅
-位置: `src/components/admin/FileSelector.vue`
-功能:
-- 通用文件/封面选择器
-- 支持文件列表分页、搜索
-- 支持文件上传
-- 支持图片预览
-- 支持按文件类型筛选(image/document/video/audio)
-- 已选文件信息显示
-
-### 2. UserSelector 用户选择组件 ✅
-位置: `src/components/UserSelector/index.vue`
-功能:
-- 用户列表搜索选择
-- 用于推荐人ID等需要选择用户的场景
-- 显示用户ID、用户名、邮箱
-
-### 3. UserDetail 编辑表单优化 ✅
-- 推荐人ID: 改为使用UserSelector组件，显示用户头像、用户名、ID
-- 用户封面: 新增FileSelector组件，支持预览和选择图片
-
------------------------------------------------------------------------------------------------需要解决
-每次解决后的内容写在-需要解决之间，不要写在外面
-我不要你解释，不是我主动告诉你解释需求，那么你就根据问题开始直接编写代码解决问题或者完善功能，问题都是用-需要解决隔开的
-对应完成的部分在当前文档记录并且进行标记✅已完成、⚠️部分完成、❌未完成这样显示