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
2025-11-28 14:15:29 +08:00
parent 067e0539ba
commit f7c3be1d30
45 changed files with 8776 additions and 6881 deletions
@@ -1,91 +1,116 @@
 <template>
  <div class="discount-code-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="fetchDiscountList">
-          <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">
+          <div class="action-bar">
+            <el-button type="primary" @click="handleAdd">
+              <el-icon><Plus /></el-icon>新增优惠码
+            </el-button>
+            <el-button type="success" @click="fetchDiscountList">
+              <el-icon><Refresh /></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="discountList"
-        @selection-change="handleSelectionChange"
-        style="width: 100%"
-      >
-        <el-table-column type="selection" width="55" />
-        <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column prop="code" label="优惠码" min-width="150" />
-        <el-table-column prop="name" label="名称" min-width="180" />
-        <el-table-column label="优惠类型" width="120">
-          <template #default="{ row }">
-            <el-tag :type="row.percentage ? 'success' : 'primary'">
-              {{ row.percentage ? '百分比折扣' : '固定金额' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="优惠值" width="120">
-          <template #default="{ row }">
-            <span v-if="row.percentage" class="discount-value">{{ (row.percentage / 100).toFixed(0) }}%</span>
-            <span v-else class="amount">¥{{ (row.amount / 100).toFixed(2) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="最低消费" width="120">
-          <template #default="{ row }">
-            ¥{{ (row.minAmount / 100).toFixed(2) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="最大抵扣" width="120">
-          <template #default="{ row }">
-            <span v-if="row.maxAmount">¥{{ (row.maxAmount / 100).toFixed(2) }}</span>
-            <span v-else>-</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="maxTimes" label="最大使用次数" width="120" />
-        <el-table-column prop="userTimes" label="单用户次数" width="120" />
-        <el-table-column label="可叠加" width="100" align="center">
-          <template #default="{ row }">
-            <el-icon v-if="row.canStacking" color="#67c23a" :size="20"><SuccessFilled /></el-icon>
-            <el-icon v-else color="#f56c6c" :size="20"><CircleCloseFilled /></el-icon>
-          </template>
-        </el-table-column>
-        <el-table-column label="续费可用" width="100" align="center">
-          <template #default="{ row }">
-            <el-icon v-if="row.renew" color="#67c23a" :size="20"><SuccessFilled /></el-icon>
-            <el-icon v-else color="#f56c6c" :size="20"><CircleCloseFilled /></el-icon>
-          </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="success" link @click="handleView(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-code"></div>
+            <div class="skeleton-cell skeleton-name"></div>
+            <div class="skeleton-cell skeleton-type"></div>
+            <div class="skeleton-cell skeleton-value"></div>
+            <div class="skeleton-cell skeleton-min"></div>
+            <div class="skeleton-cell skeleton-max"></div>
+            <div class="skeleton-cell skeleton-times"></div>
+            <div class="skeleton-cell skeleton-action"></div>
+          </div>
+        </div>
+
+        <el-table
+          v-else
+          v-loading="loading"
+          :data="discountList"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column prop="code" label="优惠码" min-width="150" />
+          <el-table-column prop="name" label="名称" min-width="180" />
+          <el-table-column label="优惠类型" width="120">
+            <template #default="{ row }">
+              <el-tag :type="row.percentage ? 'success' : 'primary'">
+                {{ row.percentage ? '百分比折扣' : '固定金额' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="优惠值" width="120">
+            <template #default="{ row }">
+              <span v-if="row.percentage" class="discount-value">{{ (row.percentage / 100).toFixed(0) }}%</span>
+              <span v-else class="amount">¥{{ (row.amount / 100).toFixed(2) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="最低消费" width="120">
+            <template #default="{ row }">
+              ¥{{ (row.minAmount / 100).toFixed(2) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="最大抵扣" width="120">
+            <template #default="{ row }">
+              <span v-if="row.maxAmount">¥{{ (row.maxAmount / 100).toFixed(2) }}</span>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="maxTimes" label="最大使用次数" width="120" />
+          <el-table-column prop="userTimes" label="单用户次数" width="120" />
+          <el-table-column label="可叠加" width="100" align="center">
+            <template #default="{ row }">
+              <el-icon v-if="row.canStacking" color="#67c23a" :size="20"><SuccessFilled /></el-icon>
+              <el-icon v-else color="#f56c6c" :size="20"><CircleCloseFilled /></el-icon>
+            </template>
+          </el-table-column>
+          <el-table-column label="续费可用" width="100" align="center">
+            <template #default="{ row }">
+              <el-icon v-if="row.renew" color="#67c23a" :size="20"><SuccessFilled /></el-icon>
+              <el-icon v-else color="#f56c6c" :size="20"><CircleCloseFilled /></el-icon>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="200" 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="handleView(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>

    <!-- 优惠码表单对话框 -->
@@ -93,6 +118,7 @@
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增优惠码' : '编辑优惠码'"
      width="700px"
+      append-to-body
    >
      <el-form
        ref="discountFormRef"
@@ -161,8 +187,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>

@@ -489,18 +517,40 @@ 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;
 }

 .amount {
@@ -516,9 +566,91 @@ onMounted(() => {
 }

 .pagination {
-  margin-top: 24px;
+  margin-top: 20px;
+  padding: 16px 20px;
+  border-top: 1px solid #e1e8ed;
+  background: #fafbfc;
  justify-content: flex-end;
 }
+
+.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-checkbox { width: 55px; }
+.skeleton-id { width: 80px; }
+.skeleton-code { width: 150px; }
+.skeleton-name { width: 180px; }
+.skeleton-type { width: 120px; }
+.skeleton-value { width: 120px; }
+.skeleton-min { width: 120px; }
+.skeleton-max { width: 120px; }
+.skeleton-times { width: 120px; }
+.skeleton-action { width: 200px; height: 32px; }
+
+@keyframes skeleton-loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
 </style>

 <style>