refactor: extract image form to standalone page and implement tags view store

- Created ImageForm.vue as standalone page for add/edit image functionality
- Removed dialog-based image form from VmImages.vue
- Implemented tagsViewStore for global tab state management
- Added automatic tab closing on form cancel/back
- Fixed data persistence issue when switching between image edits
- Removed quick actions section from ImageForm
- Updated router configuration for new image form route

src/views/product/ProductGroup.vue

@@ -1,57 +1,77 @@
 <template>
   <div class="product-group-container">
-    <!-- 操作栏 -->
-    <el-card class="filter-container" shadow="never">
-      <div class="action-bar">
-        <el-button type="primary" @click="handleAdd">
-          <el-icon><Plus /></el-icon>新增商品分组
-        </el-button>
-        <el-button type="success" @click="fetchGroupList">
-          <el-icon><Refresh /></el-icon>刷新
-        </el-button>
+    <!-- 主容器 -->
+    <el-card class="main-container" shadow="never">
+      <!-- 操作栏 -->
+      <div class="filter-section">
+        <div class="filter-content">
+          <div class="action-bar">
+            <el-button type="primary" @click="handleAdd">
+              <el-icon><Plus /></el-icon>新增商品分组
+            </el-button>
+            <el-button type="success" @click="fetchGroupList">
+              <el-icon><Refresh /></el-icon>刷新
+            </el-button>
+          </div>
+        </div>
       </div>
-    </el-card>
 
-    <!-- 商品分组列表 -->
-    <el-card class="table-container" shadow="never">
-      <el-table
-        v-loading="loading"
-        :data="groupList"
-        style="width: 100%"
-      >
-        <el-table-column prop="id" label="分组ID" width="100" />
-        <el-table-column prop="name" label="分组名称" min-width="200" />
-        <el-table-column prop="note" label="备注" min-width="250" />
-        <el-table-column label="状态" width="100">
-          <template #default="{ row }">
-            <el-switch
-              v-model="row.disable"
-              :active-value="false"
-              :inactive-value="true"
-              @change="(val) => handleStatusChange(row, val)"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="180" fixed="right">
-          <template #default="{ row }">
-            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      
-      <!-- 分页 -->
-      <el-pagination
-        v-model:current-page="queryParams.page"
-        v-model:page-size="queryParams.count"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        background
-        class="pagination"
-      />
+      <!-- 商品分组列表 -->
+      <div class="table-section">
+        <!-- 骨架屏 -->
+        <div v-if="loading" class="skeleton-container">
+          <div v-for="i in 5" :key="i" class="skeleton-row">
+            <div class="skeleton-cell skeleton-id"></div>
+            <div class="skeleton-cell skeleton-name"></div>
+            <div class="skeleton-cell skeleton-note"></div>
+            <div class="skeleton-cell skeleton-status"></div>
+            <div class="skeleton-cell skeleton-action"></div>
+          </div>
+        </div>
+
+        <el-table
+          v-else
+          v-loading="loading"
+          :data="groupList"
+          style="width: 100%"
+          :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
+        >
+          <el-table-column prop="id" label="分组ID" width="100" />
+          <el-table-column prop="name" label="分组名称" min-width="200" />
+          <el-table-column prop="note" label="备注" min-width="250" show-overflow-tooltip />
+          <el-table-column label="状态" width="100">
+            <template #default="{ row }">
+              <el-switch
+                v-model="row.disable"
+                :active-value="false"
+                :inactive-value="true"
+                @change="(val) => handleStatusChange(row, val)"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="180" fixed="right">
+            <template #default="{ row }">
+              <div class="action-buttons">
+                <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
+                <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        
+        <!-- 分页 -->
+        <el-pagination
+          v-model:current-page="queryParams.page"
+          v-model:page-size="queryParams.count"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          background
+          class="pagination"
+        />
+      </div>
     </el-card>
 
     <!-- 商品分组表单对话框 -->
@@ -59,6 +79,7 @@
       v-model="dialogVisible"
       :title="dialogType === 'add' ? '新增商品分组' : '编辑商品分组'"
       width="600px"
+      append-to-body
     >
       <el-form
         ref="groupFormRef"
@@ -80,8 +101,10 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitForm">确定</el-button>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitForm">确定</el-button>
+        </div>
       </template>
     </el-dialog>
   </div>
@@ -253,23 +276,121 @@ onMounted(() => {
   padding: 0;
 }
 
-.filter-container {
-  margin-bottom: 20px;
-  border-radius: 8px;
+.main-container {
+  border: 1px solid #e1e8ed;
+  background: #ffffff;
+}
+
+.filter-section {
+  padding: 0;
+  border-bottom: 1px solid #e1e8ed;
+  background: #fafbfc;
+}
+
+.filter-content {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 16px 20px;
+  gap: 20px;
+  flex-wrap: wrap;
 }
 
 .action-bar {
   display: flex;
   gap: 12px;
+  flex-shrink: 0;
 }
 
-.table-container {
-  border-radius: 8px;
+.table-section {
+  padding: 0;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  align-items: center;
 }
 
 .pagination {
-  margin-top: 24px;
+  margin-top: 20px;
+  padding: 16px 20px;
+  border-top: 1px solid #e1e8ed;
+  background: #fafbfc;
   justify-content: flex-end;
 }
-</style>
 
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 0;
+}
+
+/* 表格样式优化 */
+:deep(.el-table) {
+  border: none;
+  color: #2c3e50;
+}
+
+:deep(.el-table__header) {
+  background: #f8f9fa;
+}
+
+:deep(.el-table th) {
+  background: #f8f9fa !important;
+  border-bottom: 2px solid #e1e8ed;
+  color: #2c3e50;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+:deep(.el-table td) {
+  border-bottom: 1px solid #f0f2f5;
+  color: #34495e;
+}
+
+:deep(.el-table tr:hover > td) {
+  background-color: #f8f9fa !important;
+}
+
+:deep(.el-card__body) {
+  padding: 0;
+}
+
+/* 骨架屏样式 */
+.skeleton-container {
+  padding: 20px;
+}
+
+.skeleton-row {
+  display: flex;
+  align-items: center;
+  padding: 16px 0;
+  border-bottom: 1px solid #f0f0f0;
+  gap: 16px;
+}
+
+.skeleton-row:last-child {
+  border-bottom: none;
+}
+
+.skeleton-cell {
+  height: 20px;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+
+.skeleton-id { width: 100px; }
+.skeleton-name { width: 200px; }
+.skeleton-note { flex: 1; min-width: 250px; }
+.skeleton-status { width: 100px; }
+.skeleton-action { width: 180px; height: 32px; }
+
+@keyframes skeleton-loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+</style>

src/views/product/ProductList.vue

@@ -1,101 +1,123 @@
 <template>
   <div class="product-list-container">
-    <!-- 搜索和操作栏 -->
-    <el-card class="filter-container" shadow="never">
-      <el-form :inline="true" :model="queryParams" class="search-form">
-        <el-form-item label="商品分组">
-          <el-select v-model="queryParams.good_group_id" placeholder="请选择分组" clearable style="width: 200px">
-            <el-option
-              v-for="item in groupOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleQuery">
-            <el-icon><Search /></el-icon>查询
-          </el-button>
-          <el-button @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
-      <div class="action-bar">
-        <el-button type="primary" @click="handleAdd">
-          <el-icon><Plus /></el-icon>新增商品
-        </el-button>
-        <el-button type="success" @click="fetchProductList">
-          <el-icon><Refresh /></el-icon>刷新
-        </el-button>
-        <el-button type="danger" :disabled="!selectedRows.length" @click="handleBatchDelete">
-          <el-icon><Delete /></el-icon>批量删除
-        </el-button>
+    <!-- 搜索和商品列表 -->
+    <el-card class="main-container" shadow="never">
+      <!-- 搜索和操作栏 -->
+      <div class="filter-section">
+        <div class="filter-content">
+          <el-form :inline="true" :model="queryParams" class="search-form">
+            <el-form-item label="商品分组">
+              <el-select v-model="queryParams.good_group_id" placeholder="请选择分组" clearable style="width: 200px">
+                <el-option
+                  v-for="item in groupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleQuery">
+                <el-icon><Search /></el-icon>查询
+              </el-button>
+              <el-button @click="resetQuery">重置</el-button>
+              <el-button type="success" @click="fetchProductList">
+                <el-icon><Refresh /></el-icon>刷新
+              </el-button>
+            </el-form-item>
+          </el-form>
+          <div class="action-bar">
+            <el-button type="primary" @click="handleAdd">
+              <el-icon><Plus /></el-icon>新增商品
+            </el-button>
+            <el-button type="danger" :disabled="!selectedRows.length" @click="handleBatchDelete">
+              <el-icon><Delete /></el-icon>批量删除
+            </el-button>
+          </div>
+        </div>
       </div>
-    </el-card>
 
-    <!-- 商品列表 -->
-    <el-card class="table-container" shadow="never">
-      <el-table
-        v-loading="loading"
-        :data="productList"
-        @selection-change="handleSelectionChange"
-        style="width: 100%"
-      >
-        <el-table-column type="selection" width="55" />
-        <el-table-column prop="id" label="商品ID" width="100" />
-        <el-table-column label="商品图片" width="100">
-          <template #default="{ row }">
-            <el-image
-              :src="row.image || '/logo.svg'"
-              fit="cover"
-              style="width: 60px; height: 60px; border-radius: 4px"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column prop="name" label="商品名称" min-width="200" />
-        <el-table-column prop="table" label="商品所属表" width="150" />
-        <el-table-column label="价格" width="120">
-          <template #default="{ row }">
-            <span class="price">¥{{ (row.price / 100).toFixed(2) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="库存控制" width="100">
-          <template #default="{ row }">
-            <el-tag :type="row.inventory_control ? 'success' : 'info'">
-              {{ row.inventory_control ? '已启用' : '未启用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="inventory" label="库存" width="100" />
-        <el-table-column prop="payNum" label="单次数量" width="100" />
-        <el-table-column label="推荐" width="80">
-          <template #default="{ row }">
-            <el-tag :type="row.recommend ? 'success' : 'info'" size="small">
-              {{ row.recommend ? '是' : '否' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200" fixed="right">
-          <template #default="{ row }">
-            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <!-- <el-button type="warning" link @click="handleSpec(row)">规格</el-button> -->
-            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      
-      <!-- 分页 -->
-      <el-pagination
-        v-model:current-page="queryParams.page"
-        v-model:page-size="queryParams.count"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        background
-        class="pagination"
-      />
+      <!-- 商品列表 -->
+      <div class="table-section">
+        <!-- 骨架屏 -->
+        <div v-if="loading" class="skeleton-container">
+          <div v-for="i in 5" :key="i" class="skeleton-row">
+            <div class="skeleton-cell skeleton-checkbox"></div>
+            <div class="skeleton-cell skeleton-id"></div>
+            <div class="skeleton-cell skeleton-image"></div>
+            <div class="skeleton-cell skeleton-name"></div>
+            <div class="skeleton-cell skeleton-table"></div>
+            <div class="skeleton-cell skeleton-price"></div>
+            <div class="skeleton-cell skeleton-tag"></div>
+            <div class="skeleton-cell skeleton-inventory"></div>
+            <div class="skeleton-cell skeleton-action"></div>
+          </div>
+        </div>
+
+        <el-table
+          v-else
+          v-loading="loading"
+          :data="productList"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          :header-cell-style="{ background: '#f8f9fa', color: '#2c3e50', fontWeight: 600 }"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="id" label="商品ID" width="100" />
+          <el-table-column label="商品图片" width="100">
+            <template #default="{ row }">
+              <el-image
+                :src="row.image || '/logo.svg'"
+                fit="cover"
+                style="width: 60px; height: 60px"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="商品名称" min-width="200" />
+          <el-table-column prop="table" label="商品所属表" width="150" />
+          <el-table-column label="价格" width="120">
+            <template #default="{ row }">
+              <span class="price">¥{{ (row.price / 100).toFixed(2) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="库存控制" width="100">
+            <template #default="{ row }">
+              <el-tag :type="row.inventory_control ? 'success' : 'info'">
+                {{ row.inventory_control ? '已启用' : '未启用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="inventory" label="库存" width="100" />
+          <el-table-column prop="payNum" label="单次数量" width="100" />
+          <el-table-column label="推荐" width="80">
+            <template #default="{ row }">
+              <el-tag :type="row.recommend ? 'success' : 'info'" size="small">
+                {{ row.recommend ? '是' : '否' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="200" fixed="right">
+            <template #default="{ row }">
+              <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
+              <!-- <el-button type="warning" link @click="handleSpec(row)">规格</el-button> -->
+              <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        
+        <!-- 分页 -->
+        <el-pagination
+          v-model:current-page="queryParams.page"
+          v-model:page-size="queryParams.count"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          background
+          class="pagination"
+        />
+      </div>
     </el-card>
 
     <!-- 商品表单对话框 -->
@@ -465,33 +487,125 @@ onMounted(() => {
   padding: 0;
 }
 
-.filter-container {
-  margin-bottom: 20px;
-  border-radius: 8px;
+.main-container {
+  border: 1px solid #e1e8ed;
+  background: #ffffff;
+}
+
+.filter-section {
+  padding: 0;
+  border-bottom: 1px solid #e1e8ed;
+  background: #fafbfc;
+}
+
+.filter-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  gap: 20px;
+  flex-wrap: wrap;
 }
 
 .search-form {
-  margin-bottom: 15px;
+  margin: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 400px;
+}
+
+.search-form :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.search-form :deep(.el-form-item__label) {
+  margin-right: 8px;
+  white-space: nowrap;
 }
 
 .action-bar {
   display: flex;
   gap: 12px;
+  flex-shrink: 0;
 }
 
-.table-container {
-  border-radius: 8px;
+@media (max-width: 768px) {
+  .filter-content {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .search-form {
+    min-width: 100%;
+  }
+  
+  .action-bar {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+.table-section {
+  padding: 0;
 }
 
 .price {
-  color: #f56c6c;
+  color: #e74c3c;
   font-weight: bold;
   font-size: 14px;
 }
 
 .pagination {
-  margin-top: 24px;
+  padding: 16px 20px;
+  border-top: 1px solid #e1e8ed;
+  background: #fafbfc;
   justify-content: flex-end;
 }
+
+:deep(.el-card__body) {
+  padding: 0;
+}
+
+/* 骨架屏样式 */
+.skeleton-container {
+  padding: 20px;
+}
+
+.skeleton-row {
+  display: flex;
+  align-items: center;
+  padding: 16px 0;
+  border-bottom: 1px solid #f0f0f0;
+  gap: 16px;
+}
+
+.skeleton-row:last-child {
+  border-bottom: none;
+}
+
+.skeleton-cell {
+  height: 20px;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+
+.skeleton-checkbox { width: 55px; }
+.skeleton-id { width: 100px; }
+.skeleton-image { width: 60px; height: 60px; }
+.skeleton-name { width: 200px; }
+.skeleton-table { width: 150px; }
+.skeleton-price { width: 120px; }
+.skeleton-tag { width: 100px; }
+.skeleton-inventory { width: 100px; }
+.skeleton-action { width: 200px; height: 32px; }
+
+@keyframes skeleton-loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
 </style>
 

src/views/product/ProductParameter.vue

@@ -1,94 +1,113 @@
 <template>
   <div class="product-parameter-container">
-    <!-- 操作栏 -->
-    <el-card class="filter-container" shadow="never">
-      <el-form ref="queryFormRef" label-width="100px" :inline="true" :model="queryParams" class="search-form">
-        <el-form-item label="商品分组">
-          <el-select 
-            v-model="queryParams.good_group_id" 
-            placeholder="请选择商品分组" 
-            clearable
-            @change="handleGroupChange"
-            style="width: 200px"
-          >
-            <el-option 
-              v-for="item in groupOptions" 
-              :key="item.id" 
-              :label="item.name" 
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="商品">
-          <el-select 
-            v-model="queryParams.good_id" 
-            placeholder="请先选择商品分组" 
-            clearable
-            :disabled="!queryParams.good_group_id"
-            style="width: 200px"
-          >
-            <el-option 
-              v-for="item in productOptions" 
-              :key="item.id" 
-              :label="item.name" 
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleQuery">
-            <el-icon><Search /></el-icon>查询
-          </el-button>
-          <el-button @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
-      <div class="action-bar">
-        <el-button type="primary" @click="handleAdd">
-          <el-icon><Plus /></el-icon>新增商品参数
-        </el-button>
-        <el-button type="success" @click="fetchParameterList">
-          <el-icon><Refresh /></el-icon>刷新
-        </el-button>
+    <!-- 主容器 -->
+    <el-card class="main-container" shadow="never">
+      <!-- 操作栏 -->
+      <div class="filter-section">
+        <div class="filter-content">
+          <el-form ref="queryFormRef" label-width="80px" :inline="true" :model="queryParams" class="search-form">
+            <el-form-item label="商品分组">
+              <el-select 
+                v-model="queryParams.good_group_id" 
+                placeholder="请选择商品分组" 
+                clearable
+                @change="handleGroupChange"
+                style="width: 200px"
+              >
+                <el-option 
+                  v-for="item in groupOptions" 
+                  :key="item.id" 
+                  :label="item.name" 
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="商品">
+              <el-select 
+                v-model="queryParams.good_id" 
+                placeholder="请先选择商品分组" 
+                clearable
+                :disabled="!queryParams.good_group_id"
+                style="width: 200px"
+              >
+                <el-option 
+                  v-for="item in productOptions" 
+                  :key="item.id" 
+                  :label="item.name" 
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleQuery">
+                <el-icon><Search /></el-icon>查询
+              </el-button>
+              <el-button @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+          <div class="action-bar">
+            <el-button type="primary" @click="handleAdd">
+              <el-icon><Plus /></el-icon>新增商品参数
+            </el-button>
+            <el-button type="success" @click="fetchParameterList">
+              <el-icon><Refresh /></el-icon>刷新
+            </el-button>
+          </div>
+        </div>
       </div>
-    </el-card>
 
-    <!-- 商品参数列表 -->
-    <el-card class="table-container" shadow="never">
-      <el-table
-        v-loading="loading"
-        :data="parameterList"
-        style="width: 100%"
-      >
-        <el-table-column prop="id" label="参数ID" width="100" />
-        <el-table-column prop="name" label="参数名称" min-width="200" />
-        <el-table-column prop="type" label="参数类型" width="120">
-          <template #default="{ row }">
-            <el-tag :type="getArgTypeTag(row.type)">
-              {{ getArgTypeText(row.type) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="250" fixed="right">
-          <template #default="{ row }">
-            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button type="success" link @click="handleViewValues(row)">查看参数值</el-button>
-            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      
-      <!-- 分页 -->
-      <el-pagination
-        v-model:current-page="queryParams.page"
-        v-model:page-size="queryParams.count"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        background
-        class="pagination"
-      />
+      <!-- 商品参数列表 -->
+      <div class="table-section">
+        <!-- 骨架屏 -->
+        <div v-if="loading" class="skeleton-container">
+          <div v-for="i in 5" :key="i" class="skeleton-row">
+            <div class="skeleton-cell skeleton-id"></div>
+            <div class="skeleton-cell skeleton-name"></div>
+            <div class="skeleton-cell skeleton-type"></div>
+            <div class="skeleton-cell skeleton-action"></div>
+          </div>
+        </div>
+
+        <el-table
+          v-else
+          v-loading="loading"
+          :data="parameterList"
+          style="width: 100%"
+          :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
+        >
+          <el-table-column prop="id" label="参数ID" width="100" />
+          <el-table-column prop="name" label="参数名称" min-width="200" />
+          <el-table-column prop="type" label="参数类型" width="120">
+            <template #default="{ row }">
+              <el-tag :type="getArgTypeTag(row.type)">
+                {{ getArgTypeText(row.type) }}
+              </el-tag>
+            </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="handleEdit(row)">编辑</el-button>
+                <el-button type="success" link @click="handleViewValues(row)">查看参数值</el-button>
+                <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        
+        <!-- 分页 -->
+        <el-pagination
+          v-model:current-page="queryParams.page"
+          v-model:page-size="queryParams.count"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          background
+          class="pagination"
+        />
+      </div>
     </el-card>
 
     <!-- 商品参数表单对话框 -->
@@ -96,6 +115,7 @@
       v-model="dialogVisible"
       :title="dialogType === 'add' ? '新增商品参数' : '编辑商品参数'"
       width="600px"
+      append-to-body
     >
       <el-form
         ref="parameterFormRef"
@@ -115,8 +135,10 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitForm">确定</el-button>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitForm">确定</el-button>
+        </div>
       </template>
     </el-dialog>
 
@@ -125,6 +147,7 @@
       v-model="valuesDialogVisible"
       title="参数值管理"
       width="800px"
+      append-to-body
     >
       <div class="values-header">
         <span>参数：{{ currentParameter?.arg_name }}</span>
@@ -137,6 +160,7 @@
         v-loading="valuesLoading"
         :data="valuesList"
         style="width: 100%; margin-top: 20px"
+        :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
       >
         <el-table-column prop="id" label="值ID" width="100" />
         <el-table-column prop="name" label="值名称" min-width="150" />
@@ -148,8 +172,10 @@
         </el-table-column>
         <el-table-column label="操作" width="200" fixed="right">
           <template #default="{ row }">
-            <el-button type="primary" link @click="handleEditValue(row)">编辑</el-button>
-            <el-button type="danger" link @click="handleDeleteValue(row)">删除</el-button>
+            <div class="action-buttons">
+              <el-button type="primary" link @click="handleEditValue(row)">编辑</el-button>
+              <el-button type="danger" link @click="handleDeleteValue(row)">删除</el-button>
+            </div>
           </template>
         </el-table-column>
       </el-table>
@@ -160,6 +186,7 @@
       v-model="valueDialogVisible"
       :title="valueDialogType === 'add' ? '添加参数值' : '编辑参数值'"
       width="500px"
+      append-to-body
     >
       <el-form
         ref="valueFormRef"
@@ -178,8 +205,10 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="valueDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitValueForm">确定</el-button>
+        <div class="dialog-footer">
+          <el-button @click="valueDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitValueForm">确定</el-button>
+        </div>
       </template>
     </el-dialog>
   </div>
@@ -604,22 +633,52 @@ onMounted(() => {
   padding: 0;
 }
 
-.filter-container {
-  margin-bottom: 20px;
-  border-radius: 8px;
+.main-container {
+  border: 1px solid #e1e8ed;
+  background: #ffffff;
+}
+
+.filter-section {
+  padding: 0;
+  border-bottom: 1px solid #e1e8ed;
+  background: #fafbfc;
+}
+
+.filter-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  gap: 20px;
+  flex-wrap: wrap;
 }
 
 .search-form {
-  margin-bottom: 15px;
+  margin: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.search-form :deep(.el-form-item) {
+  margin-bottom: 0;
 }
 
 .action-bar {
   display: flex;
   gap: 12px;
+  flex-shrink: 0;
 }
 
-.table-container {
-  border-radius: 8px;
+.table-section {
+  padding: 0;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  align-items: center;
 }
 
 .values-header {
@@ -630,8 +689,83 @@ onMounted(() => {
 }
 
 .pagination {
-  margin-top: 24px;
+  margin-top: 20px;
+  padding: 16px 20px;
+  border-top: 1px solid #e1e8ed;
+  background: #fafbfc;
   justify-content: flex-end;
 }
-</style>
 
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 0;
+}
+
+/* 表格样式优化 */
+:deep(.el-table) {
+  border: none;
+  color: #2c3e50;
+}
+
+:deep(.el-table__header) {
+  background: #f8f9fa;
+}
+
+:deep(.el-table th) {
+  background: #f8f9fa !important;
+  border-bottom: 2px solid #e1e8ed;
+  color: #2c3e50;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+:deep(.el-table td) {
+  border-bottom: 1px solid #f0f2f5;
+  color: #34495e;
+}
+
+:deep(.el-table tr:hover > td) {
+  background-color: #f8f9fa !important;
+}
+
+:deep(.el-card__body) {
+  padding: 0;
+}
+
+/* 骨架屏样式 */
+.skeleton-container {
+  padding: 20px;
+}
+
+.skeleton-row {
+  display: flex;
+  align-items: center;
+  padding: 16px 0;
+  border-bottom: 1px solid #f0f0f0;
+  gap: 16px;
+}
+
+.skeleton-row:last-child {
+  border-bottom: none;
+}
+
+.skeleton-cell {
+  height: 20px;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+
+.skeleton-id { width: 100px; }
+.skeleton-name { width: 200px; }
+.skeleton-type { width: 120px; }
+.skeleton-action { width: 250px; height: 32px; }
+
+@keyframes skeleton-loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+</style>