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/marketing/DiscountUsers.vue

@@ -1,92 +1,114 @@
 <template>
   <div class="discount-users-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.code_id" 
-            placeholder="请选择代金券"
-            filterable
-            clearable
-            style="width: 280px"
-          >
-            <el-option
-              v-for="item in voucherListOptions"
-              :key="item.id"
-              :label="`${item.name} (¥${(item.amount / 100).toFixed(2)})`"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleQuery" :disabled="!queryParams.code_id">
-            <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="fetchUsersList">
-          <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.code_id" 
+                placeholder="请选择代金券"
+                filterable
+                clearable
+                style="width: 280px"
+              >
+                <el-option
+                  v-for="item in voucherListOptions"
+                  :key="item.id"
+                  :label="`${item.name} (¥${(item.amount / 100).toFixed(2)})`"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleQuery" :disabled="!queryParams.code_id">
+                <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="fetchUsersList">
+              <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="usersList"
-        @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="discountId" label="代金券ID" width="120" />
-        <el-table-column label="关联对象ID" width="130">
-          <template #default="{ row }">
-            {{ row.userId || row.userGroupId || '-' }}
-          </template>
-        </el-table-column>
-        <el-table-column label="类型" width="120">
-          <template #default="{ row }">
-            <el-tag :type="getUserTypeTagByRow(row)">
-              {{ getUserTypeNameByRow(row) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="创建时间" width="180">
-          <template #default="{ row }">
-            {{ formatDate(row.CreatedAt) }}
-          </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="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-discount-id"></div>
+            <div class="skeleton-cell skeleton-related-id"></div>
+            <div class="skeleton-cell skeleton-type"></div>
+            <div class="skeleton-cell skeleton-time"></div>
+            <div class="skeleton-cell skeleton-action"></div>
+          </div>
+        </div>
+
+        <el-table
+          v-else
+          v-loading="loading"
+          :data="usersList"
+          @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="discountId" label="代金券ID" width="120" />
+          <el-table-column label="关联对象ID" width="130">
+            <template #default="{ row }">
+              {{ row.userId || row.userGroupId || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="类型" width="120">
+            <template #default="{ row }">
+              <el-tag :type="getUserTypeTagByRow(row)">
+                {{ getUserTypeNameByRow(row) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" width="180">
+            <template #default="{ row }">
+              {{ formatDate(row.CreatedAt) }}
+            </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="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>
 
     <!-- 添加/编辑用户关联对话框 -->
@@ -94,6 +116,7 @@
       v-model="dialogVisible"
       :title="dialogType === 'add' ? '新增用户关联' : '编辑用户关联'"
       width="600px"
+      append-to-body
     >
       <el-form
         ref="formRef"
@@ -173,11 +196,11 @@
           <el-form-item v-if="form.select_type === 'user'" label="用户ID" prop="user_id">
             <div class="user-selector-wrapper">
                 <div class="selected-user-display" v-if="form.user_id">
-                  <el-tage type="primary" closable @close="clearSelectedUser">
+                  <el-tag type="primary" closable @close="clearSelectedUser">
                     {{ getSelectedUserName() }}
-                  </el-tage>
+                  </el-tag>
                 </div>
-                <el-button type="primary" plan @click="openUserSelector" style="width: 100%;">
+                <el-button type="primary" plain @click="openUserSelector" style="width: 100%;">
                   <el-icon><User /></el-icon>
                   {{ form.user_id ? '重新选择用户' : '选择用户' }}
                 </el-button>
@@ -193,8 +216,10 @@
         </template>
       </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>
 
@@ -204,6 +229,7 @@
       title="选择用户"
       width="800px"
       class="user-selector-dialog"
+      append-to-body
     >
       <!-- 搜索栏 -->
       <div class="selector-search">
@@ -261,10 +287,12 @@
       />
 
       <template #footer>
-        <el-button @click="userSelectorVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmUserSelection" :disabled="!selectedUserTemp">
-          确定选择
-        </el-button>
+        <div class="dialog-footer">
+          <el-button @click="userSelectorVisible = false">取消</el-button>
+          <el-button type="primary" @click="confirmUserSelection" :disabled="!selectedUserTemp">
+            确定选择
+          </el-button>
+        </div>
       </template>
     </el-dialog>
   </div>
@@ -818,29 +846,100 @@ 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;
 }
 
 .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;
+}
+
 /* 用户选择器样式 */
 .user-selector-wrapper {
   width: 100%;
@@ -879,5 +978,42 @@ onMounted(() => {
 :deep(.current-row) {
   background-color: #ecf5ff !important;
 }
-</style>
 
+/* 骨架屏样式 */
+.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-discount-id { width: 120px; }
+.skeleton-related-id { width: 130px; }
+.skeleton-type { width: 120px; }
+.skeleton-time { width: 180px; }
+.skeleton-action { width: 200px; height: 32px; }
+
+@keyframes skeleton-loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+</style>