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/setting/GlobalSetting.vue

@@ -1,77 +1,76 @@
 <template>
   <div class="global-setting-container">
-    <!-- 页面头部 -->
-    <div class="page-header">
-      <div class="left">
-        <h2 class="title">全局设置</h2>
-        <el-tag type="info" effect="plain" class="info-tag">系统全局配置管理</el-tag>
+    <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-input v-model="queryParams.name" placeholder="请输入设置名称" clearable />
+            </el-form-item>
+            <el-form-item label="权限">
+              <el-select v-model="queryParams.authority" placeholder="请选择权限" clearable style="width: 120px">
+                <el-option label="全部" value="" />
+                <el-option label="公有" value="0" />
+                <el-option label="私有" value="1" />
+              </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-icon><Delete /></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 @click="handleRefresh">
+              <el-icon><Refresh /></el-icon>刷新
+            </el-button>
+          </div>
+        </div>
       </div>
-      <div class="actions">
-        <el-button type="primary" @click="handleAdd" :icon="Plus" class="action-btn">
-          新增设置
-        </el-button>
-        <el-button type="success" @click="handleRefresh" :icon="Refresh" class="action-btn">
-          刷新
-        </el-button>
-      </div>
-    </div>
 
-    <!-- 搜索筛选 -->
-    <!-- <el-card class="filter-container" shadow="never">
-      <el-form :inline="true" :model="queryParams" class="search-form">
-        <el-form-item label="设置名称">
-          <el-input v-model="queryParams.name" placeholder="请输入设置名称" clearable />
-        </el-form-item>
-        <el-form-item label="权限">
-          <el-select v-model="queryParams.authority" placeholder="请选择权限" clearable>
-            <el-option label="全部" value="" />
-            <el-option label="公有" value="0" />
-            <el-option label="私有" value="1" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleQuery" :icon="Search">查询</el-button>
-          <el-button @click="resetQuery" :icon="Delete">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card> -->
-
-    <!-- 设置列表 -->
-    <el-card class="table-container" shadow="never">
-      <el-table
-        v-loading="loading"
-        :data="settingsList"
-        style="width: 100%"
-        border
-        stripe
-      >
-        <el-table-column prop="setting_id" label="ID" width="80" />
-        <el-table-column prop="name" label="Name值" min-width="200" show-overflow-tooltip />
-        <el-table-column prop="value" label="Value值" min-width="150" show-overflow-tooltip />
-        <el-table-column label="权限" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="getAuthorityType(row.authority)" size="small">
-              {{ getAuthorityText(row.authority) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="notes" label="备注" min-width="200" show-overflow-tooltip />
-        <el-table-column prop="created_at" label="创建时间" width="180" />
-        <el-table-column label="操作" width="200" fixed="right" align="center">
-          <template #default="{ row }">
-            <div class="action-buttons">
+      <!-- 设置列表 -->
+      <div class="table-section">
+        <el-table
+          v-loading="loading"
+          :data="settingsList"
+          style="width: 100%"
+          :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
+        >
+          <el-table-column prop="setting_id" label="ID" width="80" />
+          <el-table-column prop="name" label="Name值" min-width="200" show-overflow-tooltip />
+          <el-table-column prop="value" label="Value值" min-width="150" show-overflow-tooltip />
+          <el-table-column label="权限" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="getAuthorityType(row.authority)" size="small">
+                {{ getAuthorityText(row.authority) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="notes" label="备注" min-width="200" show-overflow-tooltip />
+          <el-table-column prop="created_at" label="创建时间" width="180" />
+          <el-table-column label="操作" width="150" fixed="right" align="center">
+            <template #default="{ row }">
               <el-tooltip content="编辑" placement="top">
-                <el-button type="primary" :icon="Edit" circle size="small" @click="handleEdit(row)" />
+                <el-button type="primary" link @click="handleEdit(row)">
+                  <el-icon><Edit /></el-icon>编辑
+                </el-button>
               </el-tooltip>
               <el-tooltip content="删除" placement="top">
-                <el-button type="danger" :icon="Delete" circle size="small" @click="handleDelete(row)" />
+                <el-button type="danger" link @click="handleDelete(row)">
+                  <el-icon><Delete /></el-icon>删除
+                </el-button>
               </el-tooltip>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      
-     
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </el-card>
 
     <!-- 新增/编辑设置对话框 -->
@@ -256,13 +255,17 @@ const getAuthorityText = (authority) => {
   return authority === 0 ? '公有' : '私有'
 }
 
+// 查询
+const handleQuery = () => {
+  getList()
+}
 
-
-
-
-
-
-
+// 重置查询
+const resetQuery = () => {
+  queryParams.name = ''
+  queryParams.authority = ''
+  getList()
+}
 
 // 刷新
 const handleRefresh = () => {
@@ -387,65 +390,83 @@ onMounted(() => {
 
 <style scoped>
 .global-setting-container {
-  padding: 20px;
-  min-height: calc(100vh - 120px);
-  background-color: #f5f7fa;
+  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;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #ebeef5;
-}
-
-.page-header .left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.page-header .title {
-  margin: 0;
-  font-size: 24px;
-  font-weight: 600;
-  color: #303133;
-}
-
-.info-tag {
-  font-size: 13px;
-}
-
-.page-header .actions {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-/* 筛选容器 */
-.filter-container {
-  margin-bottom: 20px;
+  padding: 16px 20px;
+  gap: 20px;
+  flex-wrap: wrap;
 }
 
 .search-form {
-  margin-bottom: 0;
-}
-
-/* 表格容器 */
-.table-container {
-  margin-bottom: 20px;
-}
-
-.action-buttons {
+  margin: 0;
+  flex: 1;
   display: flex;
-  justify-content: center;
-  gap: 8px;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
+.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;
+}
+
+/* 表格样式优化 */
+: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;
+}
 
 /* 对话框底部 */
 .dialog-footer {
@@ -455,20 +476,18 @@ onMounted(() => {
 
 /* 响应式设计 */
 @media screen and (max-width: 768px) {
-  .page-header {
+  .filter-content {
     flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
+    align-items: stretch;
   }
   
-  .page-header .actions {
+  .search-form {
     width: 100%;
-    flex-wrap: wrap;
   }
   
-  .action-buttons {
-    flex-direction: column;
-    gap: 4px;
+  .action-bar {
+    width: 100%;
+    justify-content: flex-start;
   }
 }
 </style>