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/acs/images/ContainerImages.vue

@@ -1,61 +1,59 @@
 <template>
   <div class="container-images-container" v-loading="loading">
-    <div class="page-header">
-      <h2>容器镜像</h2>
-      <div class="header-actions">
-        <el-button type="primary" @click="handleRefresh">
-          <el-icon><refresh /></el-icon>刷新
-        </el-button>
-      </div>
-    </div>
-
-    <!-- 服务器选择和搜索区域 -->
-    <el-card class="search-card">
-      <el-form :inline="true" :model="searchForm" class="search-form">
-        <el-form-item label="服务器">
-          <el-select v-model="selectedServerId" placeholder="请选择服务器" @change="handleServerChange" style="width: 200px">
-            <el-option 
-              v-for="server in serverList" 
-              :key="server.server_id" 
-              :label="server.name" 
-              :value="server.server_id" 
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="镜像名称">
-          <el-input v-model="searchForm.name" placeholder="请输入镜像名称" clearable />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">
-            <el-icon><search /></el-icon>搜索
-          </el-button>
-          <el-button @click="resetSearch">
-            <el-icon><refresh /></el-icon>重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <!-- 当前服务器镜像列表 -->
-    <div v-if="currentServer" class="server-section">
-      <div class="server-header">
-        <h3>{{ currentServer.name }}</h3>
-        <div class="server-actions">
-          <el-button type="primary" @click="handleAdd(currentServer.server_id)">
-            <el-icon><plus /></el-icon>上传镜像
-          </el-button>
-          <el-button type="success" @click="TosyncMirror(currentServer.server_id)">
-            <el-icon><refresh /></el-icon>同步镜像
-          </el-button>
+    <el-card class="main-container" shadow="never">
+      <!-- 搜索和操作栏 -->
+      <div class="filter-section">
+        <div class="filter-content">
+          <el-form :inline="true" :model="searchForm" class="search-form">
+            <el-form-item label="服务器">
+              <el-select v-model="selectedServerId" placeholder="请选择服务器" @change="handleServerChange" style="width: 200px">
+                <el-option 
+                  v-for="server in serverList" 
+                  :key="server.server_id" 
+                  :label="server.name" 
+                  :value="server.server_id" 
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="镜像名称">
+              <el-input v-model="searchForm.name" placeholder="请输入镜像名称" clearable style="width: 200px" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSearch">
+                <el-icon><search /></el-icon>搜索
+              </el-button>
+              <el-button @click="resetSearch">
+                <el-icon><refresh /></el-icon>重置
+              </el-button>
+            </el-form-item>
+          </el-form>
+          <div class="action-bar">
+            <el-button type="primary" @click="handleRefresh">
+              <el-icon><refresh /></el-icon>刷新
+            </el-button>
+          </div>
         </div>
       </div>
 
-      <el-card class="table-card">
+      <!-- 当前服务器镜像列表 -->
+      <div v-if="currentServer" class="table-section">
+        <div class="server-header">
+          <h3>{{ currentServer.name }}</h3>
+          <div class="server-actions">
+            <el-button type="primary" @click="handleAdd(currentServer.server_id)">
+              <el-icon><plus /></el-icon>上传镜像
+            </el-button>
+            <el-button type="success" @click="TosyncMirror(currentServer.server_id)">
+              <el-icon><refresh /></el-icon>同步镜像
+            </el-button>
+          </div>
+        </div>
+
         <el-table
           :data="currentMirrorList"
-          border
           style="width: 100%"
           row-key="image_id"
+          :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
         >
           <el-table-column type="index" label="序号" width="60" align="center" />
           <el-table-column label="镜像信息" min-width="250">
@@ -65,7 +63,7 @@
                 <div class="image-info-content">
                   <div class="image-name-row">
                     <span class="table-image-name">{{ scope.row.name }}</span>
-                    <el-tag>{{ scope.row.tag || '无标签' }}</el-tag>
+                    <el-tag size="small">{{ scope.row.tag || '无标签' }}</el-tag>
                   </div>
                   <div class="image-desc-row">{{ scope.row.description || '暂无描述' }}</div>
                 </div>
@@ -104,17 +102,17 @@
         </el-table>
 
         <!-- 分页 -->
-        <div class="pagination-container">
-          <el-pagination
-            v-model:current-page="currentPage"
-            :page-size="10"
-            :total="total"
-            layout="prev, pager, next"
-            @current-change="handleCurrentPageChange"
-          />
-        </div>
-      </el-card>
-    </div>
+        <el-pagination
+          v-model:current-page="currentPage"
+          :page-size="10"
+          :total="total"
+          layout="prev, pager, next"
+          @current-change="handleCurrentPageChange"
+          background
+          class="pagination"
+        />
+      </div>
+    </el-card>
 
     <!-- 镜像详情对话框 -->
     <el-dialog
@@ -201,12 +199,6 @@
               </el-option>
           </el-select>
         </el-form-item>
-        <!-- <el-form-item label="分类ID" prop="class_id">
-          <el-input v-model="form.class_id" placeholder="请输入分类ID" />
-        </el-form-item>
-        <el-form-item label="分类名称" prop="class_name">
-          <el-input v-model="form.class_name" placeholder="请输入分类名称" />
-        </el-form-item> -->
         <el-form-item label="图标">
           <div class="image-icon-upload">
             <img v-if="form.image_ico" :src="mainUrl + form.image_ico" class="preview-icon" />
@@ -986,65 +978,65 @@ onMounted(() => {
 
 <style scoped>
 .container-images-container {
-  padding: 24px;
-  background-color: #f5f7fa;
-  min-height: calc(100vh - 60px);
+  padding: 0;
 }
 
-.page-header {
+.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;
-  margin-bottom: 24px;
-  background: #fff;
-  padding: 16px 24px;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
-}
-
-.page-header h2 {
-  margin: 0;
-  font-size: 22px;
-  color: #303133;
-  font-weight: 600;
-}
-
-.header-actions {
-  display: flex;
-  gap: 12px;
-}
-
-.search-card {
-  margin-bottom: 24px;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  padding: 16px 20px;
+  gap: 20px;
+  flex-wrap: wrap;
 }
 
 .search-form {
+  margin: 0;
+  flex: 1;
   display: flex;
+  align-items: center;
+  gap: 12px;
   flex-wrap: wrap;
-  gap: 16px;
-  padding: 8px;
 }
 
-.server-section {
-  margin-bottom: 32px;
+.search-form :deep(.el-form-item) {
+  margin-bottom: 0;
+  margin-right: 12px;
+}
+
+.action-bar {
+  display: flex;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.table-section {
+  padding: 0;
 }
 
 .server-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e1e8ed;
   background: #fff;
-  padding: 16px 24px;
-  border-radius: 8px 8px 0 0;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
 }
 
 .server-header h3 {
   margin: 0;
-  font-size: 18px;
+  font-size: 16px;
   color: #303133;
   font-weight: 600;
   display: flex;
@@ -1055,7 +1047,7 @@ onMounted(() => {
   content: '';
   display: inline-block;
   width: 4px;
-  height: 18px;
+  height: 16px;
   background-color: #409EFF;
   margin-right: 10px;
   border-radius: 2px;
@@ -1066,12 +1058,6 @@ onMounted(() => {
   gap: 12px;
 }
 
-.table-card {
-  margin-bottom: 24px;
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
-}
-
 .image-info-cell {
   display: flex;
   align-items: center;
@@ -1118,11 +1104,12 @@ onMounted(() => {
   -webkit-box-orient: vertical;
 }
 
-.pagination-container {
+.pagination {
   margin-top: 20px;
-  display: flex;
+  padding: 16px 20px;
+  border-top: 1px solid #e1e8ed;
+  background: #fafbfc;
   justify-content: flex-end;
-  padding: 0 16px 16px;
 }
 
 /* 详情对话框样式 */
@@ -1263,75 +1250,34 @@ onMounted(() => {
   background-color: #ecf5ff;
 }
 
-/* 对话框样式优化 */
-:deep(.el-dialog__header) {
-  border-bottom: 1px solid #ebeef5;
-  padding: 16px 20px;
-}
-
-:deep(.el-dialog__body) {
-  padding: 24px;
-}
-
-:deep(.el-dialog__footer) {
-  border-top: 1px solid #ebeef5;
-  padding: 16px 20px;
-}
-
-:deep(.el-form-item__label) {
-  font-weight: 500;
-}
-
+/* 表格样式优化 */
 :deep(.el-table) {
-  border-radius: 8px;
-  overflow: hidden;
+  border: none;
+  color: #2c3e50;
+}
+
+:deep(.el-table__header) {
+  background: #f8f9fa;
 }
 
 :deep(.el-table th) {
-  background-color: #f5f7fa;
-  color: #606266;
+  background: #f8f9fa !important;
+  border-bottom: 2px solid #e1e8ed;
+  color: #2c3e50;
   font-weight: 600;
+  font-size: 13px;
 }
 
-:deep(.el-table__row:hover) {
-  background-color: #ecf5ff !important;
+:deep(.el-table td) {
+  border-bottom: 1px solid #f0f2f5;
+  color: #34495e;
 }
 
-:deep(.el-button--link) {
-  padding: 4px 8px;
+:deep(.el-table tr:hover > td) {
+  background-color: #f8f9fa !important;
 }
 
-:deep(.el-button--link):hover {
-  background-color: #f0f2f5;
-  border-radius: 4px;
-}
-
-/* 响应式调整 */
-@media (max-width: 768px) {
-  .server-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 12px;
-  }
-  
-  .server-actions {
-    width: 100%;
-  }
-  
-  .image-info-cell {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  
-  .image-info-content {
-    margin-left: 0;
-    margin-top: 12px;
-    width: 100%;
-  }
-  
-  .table-image-logo {
-    width: 60px;
-    height: 60px;
-  }
+:deep(.el-card__body) {
+  padding: 0;
 }
 </style>