diff --git a/src/views/system/SettingManage.vue b/src/views/system/SettingManage.vue
index ce1137c..c30e4c7 100644
--- a/src/views/system/SettingManage.vue
+++ b/src/views/system/SettingManage.vue
@@ -1,282 +1,189 @@
 <template>
   <div class="setting-manage-container">
-    <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.key" placeholder="请输入关键词" clearable style="width: 200px" />
-            </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="handleAddGroup">
-              <el-icon><Plus /></el-icon>新增配置组
-            </el-button>
-            <el-button type="primary" @click="handleAddSetting">
-              <el-icon><Plus /></el-icon>新增配置
-            </el-button>
-            <el-button type="success" @click="handleBatchImport">
-              <el-icon><UploadFilled /></el-icon>一键导入配置
-            </el-button>
-            <el-button type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
-              <el-icon><Delete /></el-icon>批量删除 ({{ selectedRows.length }})
-            </el-button>
+    <!-- 顶部操作栏 -->
+    <div class="top-action-bar">
+      <div class="action-left">
+        <el-input
+          v-model="queryParams.key"
+          placeholder="搜索配置名称..."
+          clearable
+          prefix-icon="Search"
+          class="search-input"
+          @keyup.enter="handleQuery"
+          @clear="handleQuery"
+        />
+        <el-button type="primary" @click="handleQuery">
+          <el-icon><Search /></el-icon>查询
+        </el-button>
+      </div>
+      <div class="action-right">
+        <el-button type="primary" @click="handleAddGroup">
+          <el-icon><FolderAdd /></el-icon>新增配置组
+        </el-button>
+        <el-button type="primary" @click="handleAddSetting">
+          <el-icon><Plus /></el-icon>新增配置
+        </el-button>
+        <el-button type="success" @click="handleBatchImport">
+          <el-icon><UploadFilled /></el-icon>导入配置
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 配置组 Tab 栏 -->
+    <div class="tabs-wrapper">
+      <el-tabs
+        v-model="activeGroupId"
+        type="card"
+        class="group-tabs"
+        @tab-change="handleTabChange"
+      >
+        <el-tab-pane
+          v-for="group in allGroupList"
+          :key="group.id"
+          :name="String(group.id)"
+        >
+          <template #label>
+            <div class="tab-label">
+              <el-icon class="tab-icon"><Folder /></el-icon>
+              <span class="tab-name">{{ group.name }}</span>
+              <el-badge v-if="group._settingCount" :value="group._settingCount" :max="99" class="tab-badge" />
+            </div>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+
+      <!-- 当前配置组信息与操作 -->
+      <div class="group-info-bar" v-if="activeGroupId && currentGroup">
+        <div class="group-meta">
+          <div class="group-meta-item">
+            <el-icon class="meta-icon"><InfoFilled /></el-icon>
+            <span class="meta-label">备注：</span>
+            <span class="meta-value">{{ currentGroup.note || '暂无备注' }}</span>
+          </div>
+          <div class="group-meta-item">
+            <el-icon class="meta-icon"><Clock /></el-icon>
+            <span class="meta-label">创建时间：</span>
+            <span class="meta-value">{{ formatDate(currentGroup.CreatedAt) }}</span>
+          </div>
+          <div class="group-meta-item" v-if="currentGroup._settingCount !== undefined">
+            <el-icon class="meta-icon"><Document /></el-icon>
+            <span class="meta-label">配置数：</span>
+            <span class="meta-value meta-count">{{ currentGroup._settingCount }}</span>
           </div>
         </div>
-      </div>
-
-      <!-- 树状图显示区域 -->
-      <div class="tree-section">
-        <!-- 树形表格视图 -->
-        <el-table
-          ref="treeTableRef"
-          :data="treeDisplayData"
-          style="width: 100%"
-          row-key="id"
-          :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
-          class="setting-tree-table"
-          @selection-change="handleSelectionChange"
-        >
-          <el-table-column type="selection" width="55" />
-          <el-table-column label="名称" min-width="300">
-            <template #default="{ row }">
-              <div class="tree-item-content" :style="{ paddingLeft: (row.level - 1) * 24 + 'px' }">
-                <!-- 展开/收起按钮 -->
-                <span 
-                  v-if="row.type === 'group' && row.hasChildren" 
-                  class="expand-icon"
-                  @click="toggleExpand(row)"
-                >
-                  <el-icon v-if="row._loading"><Loading /></el-icon>
-                  <el-icon v-else :class="{ 'is-expanded': row._expanded }"><ArrowRight /></el-icon>
-                </span>
-                <span v-else class="expand-placeholder"></span>
-                <div class="tree-node">
-                  <el-icon class="tree-icon" v-if="row.type === 'group'">
-                    <Folder />
-                  </el-icon>
-                  <el-icon class="tree-icon" v-else-if="row.type === 'setting'">
-                    <Document />
-                  </el-icon>
-                  <span class="tree-label">{{ row.label }}</span>
-                </div>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="类型" width="100">
-            <template #default="{ row }">
-              <el-tag v-if="row.type === 'group'" type="primary" size="small">配置组</el-tag>
-              <el-tag v-else-if="row.type === 'setting'" :type="getTypeColor(row.data.type)" size="small">
-                {{ row.data.type }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="值" min-width="200">
-            <template #default="{ row }">
-              <span v-if="row.type === 'group'" style="cursor: default;">{{ row.data.note || '-' }}</span>
-              <span v-else-if="row.type === 'setting'" style="cursor: pointer;" @click="handleEditSetting(row.data)">
-                <span v-if="row.data.type === 'bool'">{{ row.data.value ? '是' : '否' }}</span>
-                <span v-else-if="row.data.type === 'file'">
-                  <el-link v-if="row.data.value" type="primary" @click.stop="previewFile(row.data.value)">
-                    文件ID: {{ row.data.value }}
-                  </el-link>
-                  <span v-else>-</span>
-                </span>
-                <span v-else-if="row.data.type === 'file_list'">
-                  <div v-if="row.data.value" class="file-list-summary">
-                    <el-tag type="primary" size="small" @click.stop="handleEditSetting(row.data)" style="cursor: pointer;">
-                      <el-icon><Folder /></el-icon>
-                      共 {{ getFileList(row.data.value).length }} 个文件
-                    </el-tag>
-                  </div>
-                  <span v-else>-</span>
-                </span>
-                <span v-else-if="row.data.type === 'string_list'">
-                  <div v-if="row.data.value" class="string-list-summary">
-                    <el-tag type="success" size="small" @click.stop="handleEditSetting(row.data)" style="cursor: pointer;">
-                      <el-icon><Document /></el-icon>
-                      共 {{ getStringList(row.data.value).length }} 条字符串
-                    </el-tag>
-                  </div>
-                  <span v-else>-</span>
-                </span>
-                <span v-else>
-                  <span class="text-value" :title="row.data.value">{{ truncateText(row.data.value, 30) }}</span>
-                </span>
-              </span>
-            </template>
-          </el-table-column>
-          <el-table-column label="状态" width="100">
-            <template #default="{ row }">
-              <el-tag v-if="row.type === 'group'" type="success" size="small">正常</el-tag>
-              <el-tag v-else-if="row.type === 'setting'" :type="row.data.open ? 'success' : 'info'" size="small">
-                {{ row.data.open ? '开放' : '私有' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="创建时间" width="180">
-            <template #default="{ row }">
-              {{ formatDate(row.data.CreatedAt) }}
-            </template>
-          </el-table-column>
-          <el-table-column label="备注" min-width="150" show-overflow-tooltip>
-            <template #default="{ row }">
-              <span v-if="row.type === 'group'">{{ row.data.note || '-' }}</span>
-              <span v-else-if="row.type === 'setting'">{{ row.data.note || '-' }}</span>
-              <span v-else>-</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="320" fixed="right">
-            <template #default="{ row }">
-              <el-button v-if="row.type === 'group'" type="primary" link size="small" @click="handleEditGroup(row.data)">
-                编辑
-              </el-button>
-              <el-button v-if="row.type === 'group'" type="success" link size="small" @click="handleAddSettingToGroup(row.data)">
-                新增配置
-              </el-button>
-              <el-button v-if="row.type === 'group'" type="warning" link size="small" @click="handleCopyGroupSettings(row)">
-                一键复制
-              </el-button>
-              <el-button v-if="row.type === 'group'" type="success" link size="small" @click="handleImportToGroup(row.data)">
-                一键导入
-              </el-button>
-              <el-button v-if="row.type === 'setting'" type="primary" link size="small" @click="handleEditSetting(row.data)">
-                编辑
-              </el-button>
-              <el-button type="danger" link size="small" @click="handleDelete(row)">
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-
-      <!-- 详细信息面板 -->
-      <div class="detail-section" v-if="selectedNode">
-        <el-divider content-position="left">{{ selectedNode.type === 'group' ? '配置组详情' : '配置详情' }}</el-divider>
-        <div class="detail-content">
-          <template v-if="selectedNode.type === 'group'">
-            <el-descriptions :column="2" border>
-              <el-descriptions-item label="ID">{{ selectedNode.data.id }}</el-descriptions-item>
-              <el-descriptions-item label="名称">{{ selectedNode.data.name }}</el-descriptions-item>
-              <el-descriptions-item label="备注" :span="2">{{ selectedNode.data.note || '-' }}</el-descriptions-item>
-              <el-descriptions-item label="创建时间">{{ formatDate(selectedNode.data.CreatedAt) }}</el-descriptions-item>
-              <el-descriptions-item label="更新时间">{{ formatDate(selectedNode.data.UpdatedAt) }}</el-descriptions-item>
-            </el-descriptions>
-          </template>
-          <template v-else-if="selectedNode.type === 'setting'">
-            <el-descriptions :column="2" border>
-              <el-descriptions-item label="ID">{{ selectedNode.data.id }}</el-descriptions-item>
-              <el-descriptions-item label="名称">{{ selectedNode.data.name }}</el-descriptions-item>
-              <el-descriptions-item label="类型">
-                <el-tag :type="getTypeColor(selectedNode.data.type)">{{ selectedNode.data.type }}</el-tag>
-              </el-descriptions-item>
-              <el-descriptions-item label="配置组">{{ selectedNode.data.settingGroupID || '-' }}</el-descriptions-item>
-              <el-descriptions-item label="值" :span="2" class="value-descriptions-item">
-                <div class="value-content">
-                  <span v-if="selectedNode.data.type === 'bool'">{{ selectedNode.data.value ? '是' : '否' }}</span>
-                  <span v-else-if="selectedNode.data.type === 'file'">
-                    <el-link v-if="selectedNode.data.value" type="primary" @click="previewFile(selectedNode.data.value)">
-                      文件ID: {{ selectedNode.data.value }}
-                    </el-link>
-                    <span v-else>-</span>
-                  </span>
-                  <span v-else-if="selectedNode.data.type === 'file_list'">
-                    <div v-if="selectedNode.data.value" class="table-file-list">
-                      <div 
-                        v-for="(fileId, index) in getFileList(selectedNode.data.value)" 
-                        :key="fileId"
-                        class="table-file-item"
-                      >
-                        <div class="file-preview-mini">
-                          <img 
-                            v-if="selectedNode.data.parsedValue && selectedNode.data.parsedValue[index]"
-                            :src="processImageUrl(selectedNode.data.parsedValue[index])" 
-                            :alt="`文件${index + 1}`"
-                            class="preview-mini-image"
-                            @click="previewImage(selectedNode.data.parsedValue[index])"
-                            @error="handleImageError"
-                          />
-                          <div v-else class="file-placeholder-mini">
-                            <el-icon><Document /></el-icon>
-                          </div>
-                        </div>
-                        <div class="file-info-mini">
-                          <div class="file-name-mini" :title="`文件${index + 1}: ${fileId}`">
-                            文件{{ index + 1 }}
-                          </div>
-                          <div class="file-id-mini">ID: {{ fileId }}</div>
-                        </div>
-                      </div>
-                    </div>
-                    <span v-else>-</span>
-                  </span>
-                  <span v-else-if="selectedNode.data.type === 'string_list'">
-                    <div class="editable-string-list">
-                      <div class="string-list-header">
-                        <span class="list-title">字符串列表 ({{ getStringList(selectedNode.data.value).length }} 项)</span>
-                        <el-button type="primary" size="small" @click="addEditableStringItem">添加项目</el-button>
-                      </div>
-                      <div class="string-list-items">
-                        <div
-                          v-for="(item, index) in getEditableStringList()"
-                          :key="`editable-${index}`"
-                          class="string-list-item"
-                          draggable="true"
-                          @dragstart="handleDragStart($event, index)"
-                          @dragover.prevent
-                          @drop="handleDrop($event, index)"
-                        >
-                          <div class="drag-handle">
-                            <el-icon><Rank /></el-icon>
-                          </div>
-                          <div class="item-content">
-                            <el-input
-                              v-if="item.editing"
-                              v-model="item.value"
-                              size="small"
-                              @blur="finishEditItem(index)"
-                              @keyup.enter="finishEditItem(index)"
-                              ref="editInput"
-                              @mounted="focusEditInput"
-                            />
-                            <span v-else class="item-text" @dblclick="startEditItem(index)">
-                              {{ truncateFileName(item.value, 40) }}
-                            </span>
-                          </div>
-                          <div class="item-actions">
-                            <el-button type="text" size="small" @click="startEditItem(index)" :icon="Edit" />
-                            <el-button type="text" size="small" @click="removeEditableStringItem(index)" :icon="Delete" class="danger-btn" />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </span>
-                  <span v-else class="text-value">
-                    {{ selectedNode.data.value }}
-                  </span>
-                </div>
-              </el-descriptions-item>
-              <el-descriptions-item label="是否开放">
-                <el-tag :type="selectedNode.data.open ? 'success' : 'info'">
-                  {{ selectedNode.data.open ? '开放' : '私有' }}
-                </el-tag>
-              </el-descriptions-item>
-              <el-descriptions-item label="备注" :span="2">{{ selectedNode.data.note || '-' }}</el-descriptions-item>
-              <el-descriptions-item label="创建时间">{{ formatDate(selectedNode.data.CreatedAt) }}</el-descriptions-item>
-              <el-descriptions-item label="更新时间">{{ formatDate(selectedNode.data.UpdatedAt) }}</el-descriptions-item>
-            </el-descriptions>
-          </template>
+        <div class="group-actions">
+          <el-button class="action-btn action-btn--edit" @click="handleEditGroup(currentGroup)">
+            <el-icon><Edit /></el-icon><span>编辑</span>
+          </el-button>
+          <el-button class="action-btn action-btn--add" @click="handleAddSettingToGroup(currentGroup)">
+            <el-icon><Plus /></el-icon><span>新增配置</span>
+          </el-button>
+          <el-button class="action-btn action-btn--copy" @click="handleCopyGroupSettings(currentGroup)">
+            <el-icon><CopyDocument /></el-icon><span>复制</span>
+          </el-button>
+          <el-button class="action-btn action-btn--import" @click="handleImportToGroup(currentGroup)">
+            <el-icon><UploadFilled /></el-icon><span>导入</span>
+          </el-button>
+          <el-button class="action-btn action-btn--delete" @click="handleDeleteGroup(currentGroup)">
+            <el-icon><Delete /></el-icon><span>删除</span>
+          </el-button>
         </div>
       </div>
-    </el-card>
+    </div>
+
+    <!-- 配置项卡片区域 -->
+    <div class="cards-section" v-loading="settingLoading">
+      <transition-group name="card-list" tag="div" class="cards-grid" v-if="settingList.length > 0">
+        <div
+          v-for="setting in settingList"
+          :key="setting.id"
+          class="setting-card"
+          :class="{ 'is-private': !setting.open }"
+          @click="handleEditSetting(setting)"
+        >
+          <!-- 卡片头部 -->
+          <div class="card-header">
+            <div class="card-title-row">
+              <div class="card-name-wrap">
+                <span class="card-name" :title="setting.name">{{ setting.name }}</span>
+                <el-icon class="copy-name-btn" @click.stop="copySettingName(setting.name)"><CopyDocument /></el-icon>
+              </div>
+              <el-tag :type="getTypeColor(setting.type)" size="small" effect="light" class="card-type-tag">
+                {{ setting.type }}
+              </el-tag>
+            </div>
+            <div class="card-status">
+              <el-tag :type="setting.open ? 'success' : 'info'" size="small" effect="plain" round>
+                {{ setting.open ? '公开' : '私有' }}
+              </el-tag>
+            </div>
+          </div>
+
+          <!-- 卡片内容 -->
+          <div class="card-body">
+            <div class="card-value">
+              <span v-if="setting.type === 'bool'" class="value-bool">
+                <el-icon :class="setting.value ? 'bool-true' : 'bool-false'">
+                  <component :is="setting.value ? 'CircleCheck' : 'CircleClose'" />
+                </el-icon>
+                {{ setting.value ? '是' : '否' }}
+              </span>
+              <span v-else-if="setting.type === 'file'" class="value-file">
+                <el-icon><Picture /></el-icon>
+                文件ID: {{ truncateText(setting.value, 12) }}
+              </span>
+              <span v-else-if="setting.type === 'file_list'" class="value-file-list">
+                <el-icon><Folder /></el-icon>
+                共 {{ getFileList(setting.value).length }} 个文件
+              </span>
+              <span v-else-if="setting.type === 'string_list'" class="value-string-list">
+                <el-icon><Document /></el-icon>
+                共 {{ getStringList(setting.value).length }} 条
+              </span>
+              <span v-else class="value-text" :title="setting.value">
+                {{ truncateText(setting.value, 40) || '-' }}
+              </span>
+            </div>
+          </div>
+
+          <!-- 卡片底部 -->
+          <div class="card-footer">
+            <span class="card-note" :title="setting.note">{{ setting.note || '暂无备注' }}</span>
+            <div class="card-actions" @click.stop>
+              <el-button type="primary" link size="small" @click.stop="handleEditSetting(setting)">
+                <el-icon><Edit /></el-icon>
+              </el-button>
+              <el-button type="danger" link size="small" @click.stop="handleDeleteSetting(setting)">
+                <el-icon><Delete /></el-icon>
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </transition-group>
+
+      <!-- 空状态 -->
+      <div v-else-if="!settingLoading" class="empty-state">
+        <el-empty :description="activeGroupId ? '该配置组暂无配置项' : '请选择一个配置组'">
+          <el-button v-if="activeGroupId" type="primary" @click="handleAddSettingToGroup(currentGroup)">
+            <el-icon><Plus /></el-icon>新增配置
+          </el-button>
+        </el-empty>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-wrapper" v-if="settingTotal > 0">
+        <el-pagination
+          v-model:current-page="settingPagination.page"
+          v-model:page-size="settingPagination.pageSize"
+          :page-sizes="[12, 24, 36, 48]"
+          :total="settingTotal"
+          layout="total, sizes, prev, pager, next, jumper"
+          background
+          @size-change="handlePageSizeChange"
+          @current-change="handlePageChange"
+        />
+      </div>
+    </div>
 
     <!-- 配置组表单对话框 -->
     <el-dialog
@@ -385,32 +292,23 @@
           <div v-else-if="settingForm.type === 'file'" class="file-upload-section">
             <div class="file-info-display" v-if="settingForm.value && fileInfo">
               <div class="file-item" :class="{ 'uploading': fileUploading && fileInfo.isLocal }">
-                <!-- 图片预览 -->
                 <div class="file-preview" v-if="fileInfo.url || fileInfo.localUrl" @click="openImageSelector" style="cursor: pointer;">
                   <img :src="fileInfo.localUrl || processImageUrl(fileInfo.url)" :alt="fileInfo.realName" class="preview-image" @click.stop="previewImage(fileInfo.localUrl || fileInfo.url)" @error="handleImageError" />
-                  <!-- 上传状态指示器 -->
                   <div v-if="fileUploading && fileInfo.isLocal" class="upload-overlay">
                     <el-icon class="is-loading"><Loading /></el-icon>
                     <span>上传中...</span>
                   </div>
                 </div>
-                <!-- 图片加载失败占位符 -->
                 <div class="file-preview" v-else @click="openImageSelector" style="cursor: pointer;">
                   <div class="file-placeholder">
                     <el-icon><Document /></el-icon>
                   </div>
                 </div>
-                
-                <!-- 文件信息 -->
                 <div class="file-details">
                   <span class="file-name" :title="fileInfo.realName || fileInfo.saveName">{{ truncateFileName(fileInfo.realName || fileInfo.saveName) }}</span>
                   <span class="file-id">文件ID: {{ settingForm.value }}</span>
                   <span class="file-size">{{ formatFileSize(fileInfo.size) }}</span>
-                  <!-- 非图片文件预览链接 -->
-                  
                 </div>
-                
-                <!-- 操作按钮 -->
                 <div class="file-actions">
                   <el-button type="primary" size="small" @click="openImageSelector" :icon="Picture">
                     修改图片
@@ -444,7 +342,7 @@
               </div>
               <div class="file-list-items">
                 <div
-                  v-for="(fileInfo, index) in getEditableFormFileList()"
+                  v-for="(fileItem, index) in getEditableFormFileList()"
                   :key="`form-file-${index}`"
                   class="file-list-item"
                   draggable="true"
@@ -457,27 +355,27 @@
                   </div>
                   <div class="file-preview">
                     <img 
-                      v-if="fileInfo.url || fileInfo.localUrl" 
-                      :src="fileInfo.localUrl || processImageUrl(fileInfo.url)" 
-                      :alt="fileInfo.realName" 
+                      v-if="fileItem.url || fileItem.localUrl" 
+                      :src="fileItem.localUrl || processImageUrl(fileItem.url)" 
+                      :alt="fileItem.realName" 
                       class="preview-image" 
-                      @click="previewImage(fileInfo.localUrl || fileInfo.url)" 
+                      @click="previewImage(fileItem.localUrl || fileItem.url)" 
                       @error="handleImageError" 
                     />
                     <div v-else class="file-placeholder">
                       <el-icon><Document /></el-icon>
                     </div>
-                    <div v-if="fileInfo.uploading" class="upload-overlay">
+                    <div v-if="fileItem.uploading" class="upload-overlay">
                       <el-icon class="is-loading"><Loading /></el-icon>
                       <span>上传中...</span>
                     </div>
                   </div>
                   <div class="file-info">
-                    <div class="file-name" :title="fileInfo.realName || fileInfo.saveName">
-                      {{ truncateFileName(fileInfo.realName || fileInfo.saveName, 30) }}
+                    <div class="file-name" :title="fileItem.realName || fileItem.saveName">
+                      {{ truncateFileName(fileItem.realName || fileItem.saveName, 30) }}
                     </div>
-                    <div class="file-id">ID: {{ fileInfo.id || '上传中' }}</div>
-                    <div class="file-size">{{ formatFileSize(fileInfo.size) }}</div>
+                    <div class="file-id">ID: {{ fileItem.id || '上传中' }}</div>
+                    <div class="file-size">{{ formatFileSize(fileItem.size) }}</div>
                   </div>
                   <div class="file-actions">
                     <el-button type="text" size="small" @click="openImageSelectorForListItem(index)" :icon="Edit" title="替换文件" />
@@ -585,7 +483,6 @@
         </template>
       </el-alert>
 
-      <!-- 导入进度面板 -->
       <div v-if="batchImportLoading" class="import-progress-panel">
         <div class="progress-header">
           <el-icon class="is-loading" :size="20" color="#409eff"><Loading /></el-icon>
@@ -608,10 +505,8 @@
         </div>
       </div>
 
-      <!-- 非导入中时显示表单 -->
       <template v-if="!batchImportLoading">
         <el-form label-width="100px">
-          <!-- 自动识别的配置组 -->
           <el-form-item label="配置组">
             <div v-if="batchImportGroupName" style="display: flex; align-items: center; gap: 8px; width: 100%;">
               <el-tag :type="batchImportGroupExists ? 'success' : 'warning'" size="large" style="font-size: 14px;">
@@ -638,7 +533,6 @@
           </el-form-item>
         </el-form>
 
-        <!-- 解析预览 -->
         <div v-if="batchImportParsed.length > 0" style="margin-top: 8px">
           <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px">
             <span style="font-weight: 600; font-size: 14px; color: #303133">
@@ -713,7 +607,7 @@
 import { ref, reactive, onMounted, watch, nextTick, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Search, Plus, Delete, UploadFilled, Folder, Document, ArrowRight, Loading, Picture, Edit, Rank } from '@element-plus/icons-vue'
+import { Search, Plus, Delete, UploadFilled, Folder, Document, Loading, Picture, Edit, Rank, FolderAdd, CopyDocument, CircleCheck, CircleClose, InfoFilled, Clock } from '@element-plus/icons-vue'
 import {
   getSettingGroupList,
   getSettingGroupInfo,
@@ -732,55 +626,29 @@ import ImageSelector from '@/components/admin/ImageSelector.vue'
 
 const route = useRoute()
 
-// 树状图相关状态
-const treeTableRef = ref(null)
-const treeData = ref([])
-const allGroupList = ref([]) // 存储所有已加载的配置组
-const treeDataMap = ref(new Map()) // 存储树形数据，key为group_id
-const selectedNode = ref(null)
-const editableStringList = ref([]) // 弹窗中可编辑的字符串列表
-const draggedIndex = ref(-1) // 拖拽的索引
+// ==================== 配置组 Tab 相关 ====================
+const activeGroupId = ref('')
+const allGroupList = ref([])
 
-// 表单相关可编辑列表
-const editableFormStringList = ref([]) // 表单中可编辑的字符串列表
-const editableFormFileList = ref([]) // 表单中可编辑的文件列表
-const formDraggedIndex = ref(-1) // 表单拖拽索引
-const formFileDraggedIndex = ref(-1) // 表单文件拖拽索引
+const currentGroup = computed(() => {
+  return allGroupList.value.find(g => String(g.id) === activeGroupId.value) || null
+})
+
+// ==================== 配置项列表 ====================
+const settingLoading = ref(false)
+const settingList = ref([])
+const settingTotal = ref(0)
+const settingPagination = reactive({
+  page: 1,
+  pageSize: 12
+})
 
 // 查询参数
 const queryParams = reactive({
-  key: '',
-  page: 1,
-  count: 10
+  key: ''
 })
 
-// 树状图配置
-const treeProps = {
-  children: 'children',
-  label: 'label',
-  hasChildren: 'hasChildren'
-}
-
-// 树形显示数据（扁平化用于表格显示）
-const treeDisplayData = computed(() => {
-  const result = []
-  const rootItems = treeData.value || []
-  
-  const flatten = (items, parentExpanded = true) => {
-    if (!parentExpanded) return
-    items.forEach(item => {
-      result.push(item)
-      if (item._expanded && item._children && item._children.length > 0) {
-        flatten(item._children, true)
-      }
-    })
-  }
-  
-  flatten(rootItems)
-  return result
-})
-
-// ==================== 配置组相关 ====================
+// ==================== 配置组表单 ====================
 const groupForm = reactive({
   id: undefined,
   name: '',
@@ -794,27 +662,11 @@ const groupRules = {
 }
 
 const groupLoading = ref(false)
-const groupList = ref([])
-const groupTotal = ref(0)
 const groupDialogVisible = ref(false)
 const groupDialogTitle = ref('新增配置组')
 const groupFormRef = ref(null)
 
-// 添加缺失的变量
-const groupQueryParams = reactive({
-  key: '',
-  page: 1,
-  count: 10
-})
-
-const settingQueryParams = reactive({
-  group_id: undefined,
-  key: '',
-  page: 1,
-  count: 10
-})
-
-// ==================== 配置相关 ====================
+// ==================== 配置表单 ====================
 const settingForm = reactive({
   id: undefined,
   name: '',
@@ -837,13 +689,9 @@ const settingRules = {
   ]
 }
 
-const settingLoading = ref(false)
-const settingList = ref([])
-const settingTotal = ref(0)
 const settingDialogVisible = ref(false)
 const settingDialogTitle = ref('新增配置')
 const settingFormRef = ref(null)
-const toggleLoading = ref(null)
 const fileInfo = ref(null)
 const fileUploading = ref(false)
 const fileListInfo = ref([])
@@ -852,132 +700,39 @@ const imageViewerVisible = ref(false)
 const currentViewImage = ref('')
 const imageSelectorVisible = ref(false)
 const currentImageSelectorFileId = ref('')
-const imageSelectorMode = ref('single') // 'single' 或 'list'
+const imageSelectorMode = ref('single')
 
-// 批量选择相关
-const selectedRows = ref([])
+// 表单相关可编辑列表
+const editableFormStringList = ref([])
+const editableFormFileList = ref([])
+const formDraggedIndex = ref(-1)
+const formFileDraggedIndex = ref(-1)
 
-// 格式化日期时间
-const formatDate = (dateString) => {
-  if (!dateString) return '-'
-  const date = new Date(dateString)
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  const hours = String(date.getHours()).padStart(2, '0')
-  const minutes = String(date.getMinutes()).padStart(2, '0')
-  const seconds = String(date.getSeconds()).padStart(2, '0')
-  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
-}
+// ==================== 批量导入 ====================
+const batchImportDialogVisible = ref(false)
+const batchImportText = ref('')
+const batchImportParsed = ref([])
+const batchImportGroupId = ref(undefined)
+const batchImportGroupName = ref('')
+const batchImportGroupExists = ref(false)
+const batchImportOpen = ref(true)
+const batchImportLoading = ref(false)
+const batchImportProgress = ref(0)
+const batchImportTotal = ref(0)
+const batchImportStatusText = ref('')
 
-// ==================== 树状图方法 ====================
+// ==================== 数据加载 ====================
 
-// 相近字排序函数
-const sortBySimilarity = (settings) => {
-  if (!settings || settings.length <= 1) return settings
-  
-  // 提取所有配置项的名称
-  const names = settings.map(item => item.name || '')
-  
-  // 按名称排序，相近的名称会排在一起
-  return settings.sort((a, b) => {
-    const nameA = (a.name || '').toLowerCase()
-    const nameB = (b.name || '').toLowerCase()
-    
-    // 先按前缀分组排序
-    const prefixA = nameA.substring(0, 2)
-    const prefixB = nameB.substring(0, 2)
-    
-    if (prefixA !== prefixB) {
-      return prefixA.localeCompare(prefixB, 'zh-CN')
-    }
-    
-    // 前缀相同则按完整名称排序
-    return nameA.localeCompare(nameB, 'zh-CN')
-  })
-}
-
-// 加载配置项子节点
-const loadChildren = async (row) => {
-  if (!row || row.type !== 'group') return
-  
-  row._loading = true
-  try {
-    const groupId = row.data.id
-    console.log('Loading children for group:', groupId)
-    const res = await getSettingList({ group_id: groupId, page: 1, count: 10 })
-    console.log('getSettingList response:', res.data)
-    if (res.data.code === 200) {
-      let settings = res.data.data.data || []
-      console.log('settings loaded:', settings)
-      
-      // 应用相近字排序
-      settings = sortBySimilarity(settings)
-      console.log('settings after sorting:', settings)
-      
-      const settingNodes = settings.map(setting => ({
-        id: `setting_${setting.id}`,
-        label: setting.name,
-        type: 'setting',
-        data: setting,
-        level: row.level + 1,
-        hasChildren: false, // 配置项没有子节点
-        _expanded: false,
-        _children: [],
-        _loading: false
-      }))
-      console.log('settingNodes created:', settingNodes)
-      
-      row._children = settingNodes
-      console.log('updated row with children:', row)
-    }
-  } catch (error) {
-    console.error('加载配置列表失败:', error)
-    ElMessage.error('加载配置列表失败')
-  } finally {
-    row._loading = false
-  }
-}
-
-// 切换展开状态
-const toggleExpand = async (row) => {
-  if (row._loading) return
-  
-  if (row._expanded) {
-    // 收起
-    row._expanded = false
-  } else {
-    // 展开 - 如果还没加载子级，先加载
-    if (row.type === 'group' && (!row._children || row._children.length === 0)) {
-      await loadChildren(row)
-    }
-    row._expanded = true
-  }
-}
-
-// 初始化加载配置组
 const loadGroups = async () => {
   try {
-    const res = await getSettingGroupList({ page: 1, count: 10 })
-    console.log('getSettingGroupList response:', res.data)
+    const res = await getSettingGroupList({ page: 1, count: 100 })
     if (res.data.code === 200) {
       const groups = res.data.data.data || []
-      console.log('groups loaded:', groups)
-      const treeNodes = groups.map(group => ({
-        id: `group_${group.id}`,
-        label: group.name,
-        type: 'group',
-        data: group,
-        level: 1,
-        hasChildren: true, // 标记有子节点
-        _expanded: false,
-        _children: [],
-        _loading: false
-      }))
-      console.log('treeNodes created:', treeNodes)
-      treeData.value = treeNodes
       allGroupList.value = groups
-      console.log('data set to reactive refs')
+      if (groups.length > 0 && !activeGroupId.value) {
+        activeGroupId.value = String(groups[0].id)
+        loadSettings()
+      }
     }
   } catch (error) {
     console.error('加载配置组失败:', error)
@@ -985,139 +740,78 @@ const loadGroups = async () => {
   }
 }
 
-// 节点点击事件
-const handleNodeClick = (row) => {
-  selectedNode.value = row
-  
-  // 如果是字符串列表类型，初始化可编辑列表
-  if (row.data.type === 'string_list') {
-    initEditableStringList()
-  }
-}
-
-// 查询处理
-const handleQuery = () => {
-  // 重新加载树
-  treeData.value = []
-  selectedNode.value = null
-  
-  // 重新加载配置组
-  loadGroups()
-}
-
-// 重置查询
-const resetQuery = () => {
-  queryParams.key = ''
-  handleQuery()
-}
-
-// 批量删除
-const handleBatchDelete = () => {
-  if (selectedRows.value.length === 0) {
-    ElMessage.warning('请先选择要删除的项目')
+const loadSettings = async () => {
+  if (!activeGroupId.value) {
+    settingList.value = []
+    settingTotal.value = 0
     return
   }
-  
-  // 分离配置组和配置项
-  const groups = selectedRows.value.filter(row => row.type === 'group')
-  const settings = selectedRows.value.filter(row => row.type === 'setting')
-  
-  let confirmMessage = ''
-  if (groups.length > 0 && settings.length > 0) {
-    confirmMessage = `确认删除选中的 ${groups.length} 个配置组和 ${settings.length} 个配置项吗？删除配置组将同时删除其下的所有配置项。`
-  } else if (groups.length > 0) {
-    confirmMessage = `确认删除选中的 ${groups.length} 个配置组吗？删除配置组将同时删除其下的所有配置项。`
-  } else {
-    confirmMessage = `确认删除选中的 ${settings.length} 个配置项吗？`
-  }
-  
-  ElMessageBox.confirm(confirmMessage, '批量删除警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(async () => {
-    const deletePromises = []
-    
-    // 删除配置组
-    groups.forEach(row => {
-      deletePromises.push(deleteSettingGroup({ setting_group_id: row.data.id }))
-    })
-    
-    // 删除配置项
-    settings.forEach(row => {
-      deletePromises.push(deleteSetting({ id: row.data.id }))
-    })
-    
-    try {
-      const results = await Promise.all(deletePromises)
-      const successCount = results.filter(res => res.data.code === 200).length
-      
-      if (successCount === selectedRows.value.length) {
-        ElMessage.success('批量删除成功')
-      } else {
-        ElMessage.warning(`成功删除 ${successCount} 项，失败 ${selectedRows.value.length - successCount} 项`)
-      }
-      
-      // 清空选择
-      selectedRows.value = []
-      handleQuery()
-    } catch (error) {
-      console.error('批量删除失败:', error)
-      ElMessage.error('批量删除失败')
+
+  settingLoading.value = true
+  try {
+    const params = {
+      group_id: activeGroupId.value,
+      page: settingPagination.page,
+      count: settingPagination.pageSize
     }
-  }).catch(() => {})
-}
-
-// 删除节点
-const handleDelete = (data) => {
-  const type = data.type
-  const rowData = data.data
-  
-  if (type === 'group') {
-    ElMessageBox.confirm(`确认删除配置组 "${rowData.name}" 吗？`, '警告', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(async () => {
-      try {
-        const res = await deleteSettingGroup({ setting_group_id: rowData.id })
-        if (res.data.code === 200) {
-          ElMessage.success('删除成功')
-          handleQuery()
-        }
-      } catch (error) {
-        console.error('删除失败:', error)
-        ElMessage.error(error.response?.data?.message || '删除失败')
+    if (queryParams.key) {
+      params.key = queryParams.key
+    }
+    const res = await getSettingList(params)
+    if (res.data.code === 200) {
+      settingList.value = sortBySimilarity(res.data.data.data || [])
+      settingTotal.value = res.data.data.all_count || 0
+      // 更新当前组的配置数量
+      const groupIndex = allGroupList.value.findIndex(g => String(g.id) === activeGroupId.value)
+      if (groupIndex !== -1) {
+        allGroupList.value[groupIndex]._settingCount = settingTotal.value
       }
-    }).catch(() => {})
-  } else if (type === 'setting') {
-    ElMessageBox.confirm(`确认删除配置 "${rowData.name}" 吗？`, '警告', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(async () => {
-      try {
-        const res = await deleteSetting({ id: rowData.id })
-        if (res.data.code === 200) {
-          ElMessage.success('删除成功')
-          handleQuery()
-        }
-      } catch (error) {
-        console.error('删除失败:', error)
-        ElMessage.error(error.response?.data?.message || '删除失败')
-      }
-    }).catch(() => {})
+    }
+  } catch (error) {
+    console.error('加载配置列表失败:', error)
+    ElMessage.error('加载配置列表失败')
+  } finally {
+    settingLoading.value = false
   }
 }
 
-// 处理表格选择变化
-const handleSelectionChange = (selection) => {
-  selectedRows.value = selection
+const sortBySimilarity = (settings) => {
+  if (!settings || settings.length <= 1) return settings
+  return settings.sort((a, b) => {
+    const nameA = (a.name || '').toLowerCase()
+    const nameB = (b.name || '').toLowerCase()
+    const prefixA = nameA.substring(0, 2)
+    const prefixB = nameB.substring(0, 2)
+    if (prefixA !== prefixB) {
+      return prefixA.localeCompare(prefixB, 'zh-CN')
+    }
+    return nameA.localeCompare(nameB, 'zh-CN')
+  })
+}
+
+// ==================== Tab / 分页 事件 ====================
+
+const handleTabChange = (tabId) => {
+  settingPagination.page = 1
+  loadSettings()
+}
+
+const handlePageChange = (page) => {
+  loadSettings()
+}
+
+const handlePageSizeChange = (size) => {
+  settingPagination.page = 1
+  loadSettings()
+}
+
+const handleQuery = () => {
+  settingPagination.page = 1
+  loadSettings()
 }
 
 // ==================== 配置组方法 ====================
 
-// 新增配置组
 const handleAddGroup = () => {
   groupDialogTitle.value = '新增配置组'
   Object.assign(groupForm, {
@@ -1128,11 +822,11 @@ const handleAddGroup = () => {
   groupDialogVisible.value = true
 }
 
-// 编辑配置组
-const handleEditGroup = async (row) => {
+const handleEditGroup = async (group) => {
+  if (!group) return
   groupDialogTitle.value = '编辑配置组'
   try {
-    const res = await getSettingGroupInfo({ setting_group_id: row.id })
+    const res = await getSettingGroupInfo({ setting_group_id: group.id })
     if (res.data.code === 200) {
       Object.assign(groupForm, {
         id: res.data.data.id,
@@ -1147,7 +841,27 @@ const handleEditGroup = async (row) => {
   }
 }
 
-// 提交配置组表单
+const handleDeleteGroup = (group) => {
+  if (!group) return
+  ElMessageBox.confirm(`确认删除配置组 "${group.name}" 吗？删除后其下所有配置项也将被删除。`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const res = await deleteSettingGroup({ setting_group_id: group.id })
+      if (res.data.code === 200) {
+        ElMessage.success('删除成功')
+        activeGroupId.value = ''
+        await loadGroups()
+      }
+    } catch (error) {
+      console.error('删除失败:', error)
+      ElMessage.error(error.response?.data?.message || '删除失败')
+    }
+  }).catch(() => {})
+}
+
 const submitGroupForm = () => {
   groupFormRef.value?.validate(async (valid) => {
     if (valid) {
@@ -1165,7 +879,11 @@ const submitGroupForm = () => {
         if (res.data.code === 200) {
           ElMessage.success(groupForm.id ? '修改成功' : '创建成功')
           groupDialogVisible.value = false
-          handleQuery()
+          await loadGroups()
+          if (!groupForm.id && res.data.data?.id) {
+            activeGroupId.value = String(res.data.data.id)
+            loadSettings()
+          }
         }
       } catch (error) {
         console.error('提交失败:', error)
@@ -1177,7 +895,6 @@ const submitGroupForm = () => {
 
 // ==================== 配置方法 ====================
 
-// 新增配置
 const handleAddSetting = () => {
   settingDialogTitle.value = '新增配置'
   Object.assign(settingForm, {
@@ -1185,35 +902,38 @@ const handleAddSetting = () => {
     name: '',
     value: '',
     type: 'string',
-    settingGroupID: selectedNode.value?.type === 'group' ? selectedNode.value.data.id : undefined,
+    settingGroupID: activeGroupId.value ? Number(activeGroupId.value) : undefined,
     open: true,
     note: ''
   })
   fileInfo.value = null
   fileListInfo.value = []
   newStringItem.value = ''
+  editableFormStringList.value = []
+  editableFormFileList.value = []
   settingDialogVisible.value = true
 }
 
-// 为指定配置组新增配置
-const handleAddSettingToGroup = (groupData) => {
+const handleAddSettingToGroup = (group) => {
+  if (!group) return
   settingDialogTitle.value = '新增配置'
   Object.assign(settingForm, {
     id: undefined,
     name: '',
     value: '',
     type: 'string',
-    settingGroupID: groupData.id,
+    settingGroupID: group.id,
     open: true,
     note: ''
   })
   fileInfo.value = null
   fileListInfo.value = []
   newStringItem.value = ''
+  editableFormStringList.value = []
+  editableFormFileList.value = []
   settingDialogVisible.value = true
 }
 
-// 编辑配置
 const handleEditSetting = async (row) => {
   settingDialogTitle.value = '编辑配置'
   try {
@@ -1236,11 +956,10 @@ const handleEditSetting = async (row) => {
       } else if (data.type === 'float') {
         settingForm.value = parseFloat(data.value) || 0
       } else if (data.type === 'file') {
-        // 处理单个文件类型，获取文件信息
         if (data.parsedValue && typeof data.parsedValue === 'string') {
           fileInfo.value = {
             id: data.value,
-            url: processImageUrl(data.parsedValue), // 使用processImageUrl处理URL
+            url: processImageUrl(data.parsedValue),
             realName: '文件',
             saveName: 'file',
             size: 0
@@ -1249,30 +968,27 @@ const handleEditSetting = async (row) => {
           fileInfo.value = null
         }
       } else if (data.type === 'string_list') {
-        // 处理字符串列表类型，对每个字符串进行截断
         if (data.parsedValue && Array.isArray(data.parsedValue)) {
           const truncatedValues = data.parsedValue.map(item => truncateFileName(item, 25))
           settingForm.value = truncatedValues.join(',')
-          initEditableFormStringList() // 初始化表单可编辑字符串列表
+          initEditableFormStringList()
         } else {
           settingForm.value = ''
           editableFormStringList.value = []
         }
         newStringItem.value = ''
       } else if (data.type === 'file_list') {
-        // 处理文件列表类型，使用parsedValue来获取文件信息
         if (data.parsedValue && Array.isArray(data.parsedValue)) {
           fileListInfo.value = data.parsedValue.map((url, index) => {
             const fileIds = getFileList(data.value)
             return {
               id: fileIds[index] || `file_${index}`,
-              url: processImageUrl(url), // 使用processImageUrl处理URL
+              url: processImageUrl(url),
               realName: `文件${index + 1}`,
               saveName: `file_${index}`,
               size: 0
             }
           })
-          // 确保在设置fileListInfo后再初始化表单可编辑文件列表
           nextTick(() => {
             initEditableFormFileList()
           })
@@ -1289,7 +1005,34 @@ const handleEditSetting = async (row) => {
   }
 }
 
-// 获取类型颜色
+const handleDeleteSetting = (setting) => {
+  ElMessageBox.confirm(`确认删除配置 "${setting.name}" 吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const res = await deleteSetting({ id: setting.id })
+      if (res.data.code === 200) {
+        ElMessage.success('删除成功')
+        loadSettings()
+      }
+    } catch (error) {
+      console.error('删除失败:', error)
+      ElMessage.error(error.response?.data?.message || '删除失败')
+    }
+  }).catch(() => {})
+}
+
+const copySettingName = async (name) => {
+  try {
+    await navigator.clipboard.writeText(name)
+    ElMessage.success('已复制配置名称')
+  } catch (e) {
+    ElMessage.error('复制失败')
+  }
+}
+
 const getTypeColor = (type) => {
   const colorMap = {
     'string': 'primary',
@@ -1303,35 +1046,6 @@ const getTypeColor = (type) => {
   return colorMap[type] || ''
 }
 
-// 添加缺失的辅助函数
-const fetchGroupList = async () => {
-  groupLoading.value = true
-  try {
-    const res = await getSettingGroupList(groupQueryParams)
-    if (res.data.code === 200) {
-      groupList.value = res.data.data.data || []
-      groupTotal.value = res.data.data.all_count || 0
-    }
-  } catch (error) {
-    console.error('获取配置组列表失败:', error)
-    ElMessage.error('获取配置组列表失败')
-  } finally {
-    groupLoading.value = false
-  }
-}
-
-const fetchAllGroupList = async () => {
-  try {
-    const res = await getSettingGroupList({ page: 1, count: 10 })
-    if (res.data.code === 200) {
-      allGroupList.value = res.data.data.data || []
-    }
-  } catch (error) {
-    console.error('获取配置组列表失败:', error)
-  }
-}
-
-// JSON 值检测与格式化
 const isJsonValue = computed(() => {
   if (settingForm.type !== 'string' || !settingForm.value) return false
   const v = settingForm.value.trim()
@@ -1356,9 +1070,7 @@ const compressJson = () => {
   }
 }
 
-// 类型切换处理 - 重置值和相关状态
 const handleTypeChange = (newType) => {
-  // 重置表单值为对应类型的默认值
   if (newType === 'bool') {
     settingForm.value = false
   } else if (newType === 'int') {
@@ -1368,8 +1080,6 @@ const handleTypeChange = (newType) => {
   } else {
     settingForm.value = ''
   }
-  
-  // 重置所有相关状态
   fileInfo.value = null
   fileListInfo.value = []
   editableFormStringList.value = []
@@ -1377,887 +1087,6 @@ const handleTypeChange = (newType) => {
   newStringItem.value = ''
 }
 
-// 文件相关函数
-const handleFileChange = async (file) => {
-  fileUploading.value = true
-  
-  // 创建本地预览URL
-  const localUrl = URL.createObjectURL(file.raw)
-  const isImage = file.raw.type.startsWith('image/')
-  
-  // 立即显示本地预览
-  fileInfo.value = {
-    id: '', // 暂时为空，上传成功后会更新
-    url: isImage ? localUrl : '',
-    realName: file.name,
-    saveName: file.name,
-    size: file.size,
-    isLocal: true // 标记为本地文件
-  }
-  
-  try {
-    const formData = new FormData()
-    formData.append('file_names', file.name)
-    formData.append('files', file.raw)
-    formData.append('update_type','cover')
-    formData.append('open_down','true')
-    
-    const res = await uploadFile(formData)
-    if (res.data.code === 200 && res.data.data && res.data.data.length > 0) {
-      const uploadedFile = res.data.data[0]
-      settingForm.value = String(uploadedFile.id || '')
-      
-      // 释放本地URL（暂时不释放，保留用于渲染）
-      // if (fileInfo.value?.isLocal) {
-      //   URL.revokeObjectURL(fileInfo.value.url)
-      // }
-      
-      // 更新为服务器返回的文件信息，但保留本地URL用于渲染
-      fileInfo.value = {
-        id: uploadedFile.id || '',
-        url: processImageUrl(uploadedFile.url || uploadedFile.realName || ''),
-        localUrl: fileInfo.value?.url || '', // 保留本地URL用于渲染
-        realName: uploadedFile.realName || '文件',
-        saveName: uploadedFile.saveName || 'file',
-        size: uploadedFile.size || 0,
-        isLocal: false // 标记为已上传，但保留本地渲染
-      }
-      ElMessage.success('文件上传成功')
-    } else {
-      // 上传失败，保留本地预览，但显示错误消息
-      ElMessage.error(res.data.message || '文件上传失败')
-      // 注意：不清理本地预览，让用户可以重新上传或删除
-    }
-  } catch (error) {
-    console.error('文件上传失败:', error)
-    ElMessage.error('文件上传失败')
-  } finally {
-    fileUploading.value = false
-  }
-}
-
-const clearFile = () => {
-  // 释放本地URL
-  if (fileInfo.value?.localUrl) {
-    URL.revokeObjectURL(fileInfo.value.localUrl)
-  }
-  if (fileInfo.value?.isLocal && fileInfo.value?.url) {
-    URL.revokeObjectURL(fileInfo.value.url)
-  }
-  
-  settingForm.value = ''
-  fileInfo.value = null
-}
-
-const formatFileSize = (bytes) => {
-  if (!bytes) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-}
-
-const truncateFileName = (fileName, maxLength = 25) => {
-  if (!fileName) return ''
-  if (fileName.length <= maxLength) return fileName
-  
-  const extension = fileName.includes('.') ? '.' + fileName.split('.').pop() : ''
-  const nameWithoutExt = fileName.substring(0, fileName.lastIndexOf('.'))
-  
-  if (nameWithoutExt.length <= maxLength) {
-    return fileName
-  }
-  
-  const truncatedName = nameWithoutExt.substring(0, maxLength - 3) // 留3个字符给"...和扩展名"
-  console.log('111',truncatedName + '...' + extension)
-  return truncatedName + '...' + extension
-}
-
-// ==================== 可编辑字符串列表功能 ====================
-
-// 获取可编辑的字符串列表
-const getEditableStringList = () => {
-  if (!selectedNode.value || selectedNode.value.data.type !== 'string_list') {
-    return []
-  }
-  return editableStringList.value
-}
-
-// 初始化可编辑字符串列表
-const initEditableStringList = () => {
-  if (!selectedNode.value || selectedNode.value.data.type !== 'string_list') {
-    editableStringList.value = []
-    return
-  }
-  
-  const stringItems = getStringList(selectedNode.value.data.value)
-  editableStringList.value = stringItems.map(item => ({
-    value: item,
-    editing: false
-  }))
-}
-
-// 开始拖拽
-const handleDragStart = (event, index) => {
-  draggedIndex.value = index
-  event.dataTransfer.effectAllowed = 'move'
-  event.dataTransfer.setData('text/html', event.target.outerHTML)
-  event.target.style.opacity = '0.5'
-}
-
-// 拖拽放下
-const handleDrop = (event, dropIndex) => {
-  event.preventDefault()
-  const dragIndex = draggedIndex.value
-  
-  if (dragIndex === dropIndex) return
-  
-  // 重新排列数组
-  const newList = [...editableStringList.value]
-  const [draggedItem] = newList.splice(dragIndex, 1)
-  newList.splice(dropIndex, 0, draggedItem)
-  
-  editableStringList.value = newList
-  draggedIndex.value = -1
-  
-  // 更新selectedNode中的数据
-  const updatedValues = newList.map(item => item.value)
-  selectedNode.value.data.value = updatedValues.join(',')
-  
-  event.target.style.opacity = '1'
-}
-
-// 添加新字符串项目
-const addEditableStringItem = () => {
-  const newItem = {
-    value: '',
-    editing: true
-  }
-  editableStringList.value.push(newItem)
-  
-  // 更新selectedNode中的数据
-  const updatedValues = editableStringList.value.map(item => item.value)
-  selectedNode.value.data.value = updatedValues.join(',')
-  
-  // 聚焦到新添加的输入框
-  nextTick(() => {
-    const inputs = document.querySelectorAll('.string-list-item input')
-    if (inputs.length > 0) {
-      inputs[inputs.length - 1].focus()
-    }
-  })
-}
-
-// 开始编辑项目
-const startEditItem = (index) => {
-  editableStringList.value[index].editing = true
-  
-  nextTick(() => {
-    const inputs = document.querySelectorAll('.string-list-item input')
-    if (inputs[index]) {
-      inputs[index].focus()
-      inputs[index].select()
-    }
-  })
-}
-
-// 完成编辑项目
-const finishEditItem = (index) => {
-  editableStringList.value[index].editing = false
-  
-  // 更新selectedNode中的数据
-  const updatedValues = editableStringList.value.map(item => item.value)
-  selectedNode.value.data.value = updatedValues.join(',')
-}
-
-// 删除字符串项目
-const removeEditableStringItem = (index) => {
-  ElMessageBox.confirm('确定要删除这个项目吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    editableStringList.value.splice(index, 1)
-    
-    // 更新selectedNode中的数据
-    const updatedValues = editableStringList.value.map(item => item.value)
-    selectedNode.value.data.value = updatedValues.join(',')
-    
-    ElMessage.success('删除成功')
-  })
-}
-
-// 聚焦输入框
-const focusEditInput = () => {
-  // 这个方法会被 @mounted 调用
-}
-
-// ==================== 表单可编辑字符串列表功能 ====================
-
-// 获取表单可编辑的字符串列表
-const getEditableFormStringList = () => {
-  return editableFormStringList.value
-}
-
-// 初始化表单可编辑字符串列表
-const initEditableFormStringList = () => {
-  const stringItems = getStringList(settingForm.value)
-  editableFormStringList.value = stringItems.map(item => ({
-    value: item,
-    editing: false
-  }))
-}
-
-// 开始表单拖拽
-const handleFormDragStart = (event, index) => {
-  formDraggedIndex.value = index
-  event.dataTransfer.effectAllowed = 'move'
-  event.dataTransfer.setData('text/html', event.target.outerHTML)
-  event.target.style.opacity = '0.5'
-}
-
-// 表单拖拽放下
-const handleFormDrop = (event, dropIndex) => {
-  event.preventDefault()
-  const dragIndex = formDraggedIndex.value
-  
-  if (dragIndex === dropIndex) return
-  
-  // 重新排列数组
-  const newList = [...editableFormStringList.value]
-  const [draggedItem] = newList.splice(dragIndex, 1)
-  newList.splice(dropIndex, 0, draggedItem)
-  
-  editableFormStringList.value = newList
-  formDraggedIndex.value = -1
-  
-  // 更新表单值
-  const updatedValues = newList.map(item => item.value)
-  settingForm.value = updatedValues.join(',')
-  
-  event.target.style.opacity = '1'
-}
-
-// 添加表单新字符串项目
-const addFormEditableStringItem = () => {
-  const newItem = {
-    value: '',
-    editing: true
-  }
-  editableFormStringList.value.push(newItem)
-  
-  // 更新表单值
-  const updatedValues = editableFormStringList.value.map(item => item.value)
-  settingForm.value = updatedValues.join(',')
-  
-  // 聚焦到新添加的输入框
-  nextTick(() => {
-    const inputs = document.querySelectorAll('.string-list-item input')
-    if (inputs.length > 0) {
-      inputs[inputs.length - 1].focus()
-    }
-  })
-}
-
-// 开始编辑表单项目
-const startFormEditItem = (index) => {
-  editableFormStringList.value[index].editing = true
-  
-  nextTick(() => {
-    const inputs = document.querySelectorAll('.string-list-item input')
-    if (inputs[index]) {
-      inputs[index].focus()
-      inputs[index].select()
-    }
-  })
-}
-
-// 完成编辑表单项目
-const finishFormEditItem = (index) => {
-  editableFormStringList.value[index].editing = false
-  
-  // 更新表单值
-  const updatedValues = editableFormStringList.value.map(item => item.value)
-  settingForm.value = updatedValues.join(',')
-}
-
-// 删除表单字符串项目
-const removeFormEditableStringItem = (index) => {
-  ElMessageBox.confirm('确定要删除这个项目吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    editableFormStringList.value.splice(index, 1)
-    
-    // 更新表单值
-    const updatedValues = editableFormStringList.value.map(item => item.value)
-    settingForm.value = updatedValues.join(',')
-    
-    ElMessage.success('删除成功')
-  })
-}
-
-// 聚焦表单输入框
-const focusFormEditInput = () => {
-  // 这个方法会被 @mounted 调用
-}
-
-// ==================== 表单可编辑文件列表功能 ====================
-
-// 获取表单可编辑的文件列表
-const getEditableFormFileList = () => {
-  return editableFormFileList.value
-}
-
-// 初始化表单可编辑文件列表
-const initEditableFormFileList = () => {
-  if (settingForm.type === 'file_list' && fileListInfo.value && fileListInfo.value.length > 0) {
-    editableFormFileList.value = fileListInfo.value.map(file => ({
-      id: file.id || '',
-      url: file.url || '',
-      localUrl: file.localUrl || '', // 保留本地URL字段
-      realName: file.realName || '文件',
-      saveName: file.saveName || 'file',
-      size: file.size || 0,
-      uploading: false
-    }))
-  } else {
-    editableFormFileList.value = []
-  }
-}
-
-// 开始表单文件拖拽
-const handleFormFileDragStart = (event, index) => {
-  formFileDraggedIndex.value = index
-  event.dataTransfer.effectAllowed = 'move'
-  event.dataTransfer.setData('text/html', event.target.outerHTML)
-  event.target.style.opacity = '0.5'
-}
-
-// 表单文件拖拽放下
-const handleFormFileDrop = (event, dropIndex) => {
-  event.preventDefault()
-  const dragIndex = formFileDraggedIndex.value
-  
-  if (dragIndex === dropIndex) return
-  
-  // 重新排列数组
-  const newList = [...editableFormFileList.value]
-  const [draggedItem] = newList.splice(dragIndex, 1)
-  newList.splice(dropIndex, 0, draggedItem)
-  
-  editableFormFileList.value = newList
-  formFileDraggedIndex.value = -1
-  
-  // 更新fileListInfo和表单值（使用独立副本，避免引用同一数组）
-  fileListInfo.value = newList.map(item => ({ ...item }))
-  updateFormFileListValue()
-  
-  event.target.style.opacity = '1'
-}
-
-// 表单文件列表变更
-const handleFormFileListChange = async (file) => {
-  // 创建本地预览URL
-  const localUrl = URL.createObjectURL(file.raw)
-  const isImage = file.raw.type.startsWith('image/')
-  
-  // 立即添加到表单文件列表
-  const tempFile = {
-    id: '', // 暂时为空，上传成功后会更新
-    url: isImage ? localUrl : '',
-    realName: file.name,
-    saveName: file.name,
-    size: file.size,
-    isLocal: true,
-    uploading: true
-  }
-  
-  editableFormFileList.value.push(tempFile)
-  
-  try {
-    const formData = new FormData()
-    formData.append('file_names', file.name)
-    formData.append('files', file.raw)
-    formData.append('update_type','cover')
-    formData.append('open_down','true')
-    
-    const res = await uploadFile(formData)
-    if (res.data.code === 200 && res.data.data && res.data.data.length > 0) {
-      const uploadedFile = res.data.data[0]
-      
-      // 找到对应的本地文件并更新
-      const index = editableFormFileList.value.findIndex(f => f.isLocal && f.realName === file.name)
-      if (index !== -1) {
-        editableFormFileList.value[index] = {
-          id: uploadedFile.id || '',
-          url: processImageUrl(uploadedFile.url || uploadedFile.realName || ''),
-          localUrl: localUrl, // 保留本地URL用于渲染
-          realName: uploadedFile.realName || '文件',
-          saveName: uploadedFile.saveName || 'file',
-          size: uploadedFile.size || 0,
-          isLocal: false,
-          uploading: false
-        }
-      }
-      
-      updateFormFileListValue()
-      ElMessage.success('文件上传成功')
-    } else {
-      // 上传失败，移除临时文件
-      const index = editableFormFileList.value.findIndex(f => f.isLocal && f.realName === file.name)
-      if (index !== -1) {
-        editableFormFileList.value.splice(index, 1)
-      }
-      ElMessage.error(res.data.message || '文件上传失败')
-    }
-  } catch (error) {
-    console.error('文件上传失败:', error)
-    // 上传失败，移除临时文件
-    const index = editableFormFileList.value.findIndex(f => f.isLocal && f.realName === file.name)
-    if (index !== -1) {
-      editableFormFileList.value.splice(index, 1)
-    }
-    ElMessage.error('文件上传失败')
-  }
-}
-
-// 表单文件替换
-const handleFormFileReplace = async (file, index) => {
-  if (!editableFormFileList.value[index]) return
-  
-  // 创建本地预览URL
-  const localUrl = URL.createObjectURL(file.raw)
-  const isImage = file.raw.type.startsWith('image/')
-  
-  // 更新文件信息
-  editableFormFileList.value[index] = {
-    ...editableFormFileList.value[index],
-    url: isImage ? localUrl : '',
-    realName: file.name,
-    saveName: file.name,
-    size: file.size,
-    isLocal: true,
-    uploading: true
-  }
-  
-  try {
-    const formData = new FormData()
-    formData.append('file_names', file.name)
-    formData.append('files', file.raw)
-    formData.append('update_type','cover')
-    formData.append('open_down','true')
-    
-    const res = await uploadFile(formData)
-    if (res.data.code === 200 && res.data.data && res.data.data.length > 0) {
-      const uploadedFile = res.data.data[0]
-      
-      // 更新文件信息
-      editableFormFileList.value[index] = {
-        id: uploadedFile.id || '',
-        url: processImageUrl(uploadedFile.url || uploadedFile.realName || ''),
-        localUrl: localUrl, // 保留本地URL用于渲染
-        realName: uploadedFile.realName || '文件',
-        saveName: uploadedFile.saveName || 'file',
-        size: uploadedFile.size || 0,
-        isLocal: false,
-        uploading: false
-      }
-      
-      updateFormFileListValue()
-      ElMessage.success('文件替换成功')
-    } else {
-      // 上传失败，恢复原文件信息
-      ElMessage.error(res.data.message || '文件替换失败')
-    }
-  } catch (error) {
-    console.error('文件替换失败:', error)
-    ElMessage.error('文件替换失败')
-  }
-}
-
-// 删除表单文件项目
-const removeFormEditableFileItem = (index) => {
-  ElMessageBox.confirm('确定要删除这个文件吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    // 释放本地URL
-    if (editableFormFileList.value[index].localUrl) {
-      URL.revokeObjectURL(editableFormFileList.value[index].localUrl)
-    }
-    if (editableFormFileList.value[index].isLocal && editableFormFileList.value[index].url) {
-      URL.revokeObjectURL(editableFormFileList.value[index].url)
-    }
-    
-    editableFormFileList.value.splice(index, 1)
-    
-    // 更新fileListInfo和表单值
-    fileListInfo.value = editableFormFileList.value
-    updateFormFileListValue()
-    
-    ElMessage.success('删除成功')
-  })
-}
-
-// 更新表单文件列表值
-const updateFormFileListValue = () => {
-  if (!editableFormFileList.value || !Array.isArray(editableFormFileList.value)) {
-    return
-  }
-  
-  const fileIds = editableFormFileList.value.map(file => file.id).filter(id => id)
-  settingForm.value = fileIds.join(',')
-}
-
-// 文件预览
-const previewFile = async (fileId) => {
-  if (!fileId) return
-  try {
-    // 先获取文件详情拿到下载URL
-    const res = await getFileDetail({ file_id: fileId })
-    if (res.data.code === 200 && res.data.data?.url) {
-      const url = processImageUrl(res.data.data.url)
-      const fileName = res.data.data.data?.realName || ''
-      // 判断是否为图片
-      const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg']
-      const ext = fileName.toLowerCase().substring(fileName.lastIndexOf('.'))
-      if (imageExts.includes(ext) || url.match(/\.(jpg|jpeg|png|gif|bmp|webp|svg)/i)) {
-        // 图片类型：使用内置图片查看器
-        currentViewImage.value = url
-        imageViewerVisible.value = true
-      } else {
-        // 非图片类型：在新窗口打开
-        window.open(url, '_blank')
-      }
-    } else {
-      // 降级：尝试用下载接口
-      const downRes = await downloadFile({ file_id: fileId })
-      if (downRes.data.code === 200 && downRes.data.data?.url) {
-        window.open(processImageUrl(downRes.data.data.url), '_blank')
-      } else {
-        ElMessage.error('获取文件预览失败')
-      }
-    }
-  } catch (error) {
-    console.error('文件预览失败:', error)
-    ElMessage.error('文件预览失败')
-  }
-}
-
-const previewUrl = (url) => {
-  window.open(url, '_blank')
-}
-
-// 检查是否为图片文件
-const isImageFile = (url) => {
-  if (!url) return false
-  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg']
-  // 使用相同的URL处理逻辑
-  const processedUrl = processImageUrl(url)
-  const extension = processedUrl.toLowerCase().substring(processedUrl.lastIndexOf('.'))
-  return imageExtensions.includes(extension)
-}
-
-// 处理图片URL，确保正确显示
-const processImageUrl = (url) => {
-  if (!url) return ''
-  // 先处理转义字符：将 \u0026 替换为 &
-  let processedUrl = url.replace(/\\u0026/g, '&')
-  // 再进行URL解码
-  return decodeURIComponent(processedUrl)
-}
-
-// 图片预览
-const previewImage = (url) => {
-  // 使用图片查看器对话框
-  currentViewImage.value = processImageUrl(url)
-  imageViewerVisible.value = true
-}
-
-// 处理图片加载失败
-const handleImageError = (event) => {
-  // 图片加载失败时，可以隐藏图片或显示占位符
-  console.error('图片加载失败:', event.target.src)
-  // 这里可以添加更多的错误处理逻辑
-}
-
-// ==================== 图像选择器相关 ====================
-
-// 打开图像选择器（单个文件）
-const openImageSelector = () => {
-  imageSelectorMode.value = 'single'
-  currentImageSelectorFileId.value = settingForm.value || ''
-  imageSelectorVisible.value = true
-}
-
-// 打开图像选择器（文件列表）
-const openImageSelectorForList = () => {
-  imageSelectorMode.value = 'list'
-  currentImageSelectorFileId.value = ''
-  imageSelectorVisible.value = true
-}
-
-// 打开图像选择器（文件列表中的特定项）
-const openImageSelectorForListItem = (index) => {
-  imageSelectorMode.value = 'list-item'
-  currentImageSelectorFileId.value = index
-  imageSelectorVisible.value = true
-}
-
-// 处理图像选择器确认
-const handleImageSelectorConfirm = (selectedFileOrFiles) => {
-  if (imageSelectorMode.value === 'list' && Array.isArray(selectedFileOrFiles)) {
-    // 多选文件列表模式 - 接收文件数组
-    if (selectedFileOrFiles.length === 0) {
-      ElMessage.warning('未选择任何文件')
-      return
-    }
-    
-    if (!fileListInfo.value) {
-      fileListInfo.value = []
-    }
-    
-    for (const selectedFile of selectedFileOrFiles) {
-      if (!selectedFile || !selectedFile.id) continue
-      
-      const newFile = {
-        id: selectedFile.id,
-        url: processImageUrl(selectedFile.url || ''),
-        realName: selectedFile.realName || '文件',
-        saveName: selectedFile.realName || 'file',
-        size: selectedFile.size || 0
-      }
-      fileListInfo.value.push(newFile)
-      
-      // 同步更新 editableFormFileList（表单UI读取的数据源）
-      editableFormFileList.value.push({
-        id: selectedFile.id,
-        url: processImageUrl(selectedFile.url || ''),
-        localUrl: '',
-        realName: selectedFile.realName || '文件',
-        saveName: selectedFile.realName || 'file',
-        size: selectedFile.size || 0,
-        uploading: false
-      })
-    }
-    
-    updateFormFileListValue()
-    ElMessage.success(`已添加 ${selectedFileOrFiles.length} 个文件`)
-    imageSelectorVisible.value = false
-    return
-  }
-  
-  // 以下为单选模式处理
-  const selectedFile = selectedFileOrFiles
-  if (!selectedFile || !selectedFile.id) {
-    ElMessage.warning('选择的文件无效')
-    return
-  }
-  
-  if (imageSelectorMode.value === 'single') {
-    // 单个文件模式
-    settingForm.value = selectedFile.id
-    fileInfo.value = {
-      id: selectedFile.id,
-      url: processImageUrl(selectedFile.url || ''),
-      realName: selectedFile.realName || '文件',
-      saveName: selectedFile.realName || 'file',
-      size: selectedFile.size || 0
-    }
-  } else if (imageSelectorMode.value === 'list') {
-    // 单选兼容：文件列表模式（单个文件对象）
-    if (!fileListInfo.value) {
-      fileListInfo.value = []
-    }
-    
-    const newFile = {
-      id: selectedFile.id,
-      url: processImageUrl(selectedFile.url || ''),
-      realName: selectedFile.realName || '文件',
-      saveName: selectedFile.realName || 'file',
-      size: selectedFile.size || 0
-    }
-    fileListInfo.value.push(newFile)
-    
-    // 同步更新 editableFormFileList（表单UI读取的数据源）
-    editableFormFileList.value.push({
-      id: selectedFile.id,
-      url: processImageUrl(selectedFile.url || ''),
-      localUrl: '',
-      realName: selectedFile.realName || '文件',
-      saveName: selectedFile.realName || 'file',
-      size: selectedFile.size || 0,
-      uploading: false
-    })
-    
-    updateFormFileListValue()
-  } else if (imageSelectorMode.value === 'list-item') {
-    // 文件列表中的特定项替换模式
-    const index = currentImageSelectorFileId.value
-    const updatedFile = {
-      id: selectedFile.id,
-      url: processImageUrl(selectedFile.url || ''),
-      realName: selectedFile.realName || '文件',
-      saveName: selectedFile.realName || 'file',
-      size: selectedFile.size || 0
-    }
-    
-    if (fileListInfo.value && fileListInfo.value[index] !== undefined) {
-      fileListInfo.value[index] = updatedFile
-    }
-    
-    // 同步更新 editableFormFileList
-    if (editableFormFileList.value && editableFormFileList.value[index] !== undefined) {
-      editableFormFileList.value[index] = {
-        ...updatedFile,
-        localUrl: '',
-        uploading: false
-      }
-    }
-    
-    updateFormFileListValue()
-    ElMessage.success('文件替换成功')
-  }
-  
-  imageSelectorVisible.value = false
-}
-
-const getFileList = (value) => {
-  if (!value || typeof value !== 'string') return []
-  return value.split(',').filter(id => id && id.trim())
-}
-
-const getStringList = (value) => {
-  if (!value || typeof value !== 'string') return []
-  return value.split(',').filter(str => str && str.trim())
-}
-
-const truncateText = (text, maxLength = 30) => {
-  if (!text) return ''
-  if (text.length <= maxLength) return text
-  return text.substring(0, maxLength) + '...'
-}
-
-const handleFileListChange = async (file) => {
-  fileUploading.value = true
-  
-  // 创建本地预览URL
-  const localUrl = URL.createObjectURL(file.raw)
-  const isImage = file.raw.type.startsWith('image/')
-  
-  // 立即添加本地预览到列表
-  if (!fileListInfo.value) {
-    fileListInfo.value = []
-  }
-  
-  const tempFile = {
-    id: '', // 暂时为空，上传成功后会更新
-    url: isImage ? localUrl : '',
-    realName: file.name,
-    saveName: file.name,
-    size: file.size,
-    isLocal: true // 标记为本地文件
-  }
-  
-  fileListInfo.value.push(tempFile)
-  
-  try {
-    const formData = new FormData()
-    formData.append('file_names', file.name)
-    formData.append('files', file.raw)
-    formData.append('update_type','cover')
-    formData.append('open_down','true')
-    
-    const res = await uploadFile(formData)
-    if (res.data.code === 200 && res.data.data && res.data.data.length > 0) {
-      const uploadedFile = res.data.data[0]
-      const currentFileIds = getFileList(settingForm.value)
-      currentFileIds.push(String(uploadedFile.id || ''))
-      settingForm.value = currentFileIds.join(',')
-      
-      // 找到对应的本地文件并更新
-      const index = fileListInfo.value.findIndex(f => f.isLocal && f.realName === file.name)
-      if (index !== -1) {
-        // 释放本地URL（暂时不释放，保留用于渲染）
-        // if (fileListInfo.value[index].isLocal) {
-        //   URL.revokeObjectURL(fileListInfo.value[index].url)
-        // }
-        
-        // 更新为服务器返回的文件信息，但保留本地URL用于渲染
-        fileListInfo.value[index] = {
-          id: uploadedFile.id || '',
-          url: processImageUrl(uploadedFile.url || uploadedFile.realName || ''),
-          localUrl: fileListInfo.value[index]?.url || '', // 保留本地URL用于渲染
-          realName: uploadedFile.realName || '文件',
-          saveName: uploadedFile.saveName || 'file',
-          size: uploadedFile.size || 0,
-          isLocal: false // 标记为已上传，但保留本地渲染
-        }
-      }
-      
-      updateFileListValue()
-      ElMessage.success('文件上传成功')
-    } else {
-      // 上传失败，不清理本地预览，让用户可以重新上传或删除
-      ElMessage.error(res.data.message || '文件上传失败')
-    }
-  } catch (error) {
-    console.error('文件上传失败:', error)
-    // 上传失败，不清理本地预览，让用户可以重新上传或删除
-    ElMessage.error('文件上传失败')
-  } finally {
-    fileUploading.value = false
-  }
-}
-
-const removeFile = (index) => {
-  if (!fileListInfo.value || index < 0 || index >= fileListInfo.value.length) {
-    return
-  }
-  
-  // 释放本地URL
-  if (fileListInfo.value[index].localUrl) {
-    URL.revokeObjectURL(fileListInfo.value[index].localUrl)
-  }
-  if (fileListInfo.value[index].isLocal && fileListInfo.value[index].url) {
-    URL.revokeObjectURL(fileListInfo.value[index].url)
-  }
-  
-  const currentFileIds = getFileList(settingForm.value) || []
-  currentFileIds.splice(index, 1)
-  settingForm.value = currentFileIds.join(',')
-  fileListInfo.value.splice(index, 1)
-}
-
-// 更新文件列表值
-const updateFileListValue = () => {
-  if (!fileListInfo.value || !Array.isArray(fileListInfo.value)) {
-    return
-  }
-  
-  const fileIds = fileListInfo.value.map(file => file.id).filter(id => id)
-  settingForm.value = fileIds.join(',')
-}
-
-const addStringItem = () => {
-  if (newStringItem.value.trim()) {
-    const currentItems = getStringList(settingForm.value)
-    currentItems.push(newStringItem.value.trim())
-    settingForm.value = currentItems.join(',')
-    newStringItem.value = ''
-  }
-}
-
-const removeStringItem = (index) => {
-  const currentItems = getStringList(settingForm.value)
-  currentItems.splice(index, 1)
-  settingForm.value = currentItems.join(',')
-}
-
-// 提交配置表单
 const submitSettingForm = async () => {
   if (!settingFormRef.value) return
   
@@ -2274,8 +1103,7 @@ const submitSettingForm = async () => {
       note: settingForm.note
     }
     
-    // 保存原始的开放状态用于比较
-    const originalOpen = selectedNode.value?.data?.open
+    const originalOpen = settingList.value.find(s => s.id === settingForm.id)?.open
     const newOpen = settingForm.open
     
     const res = settingForm.id 
@@ -2283,14 +1111,9 @@ const submitSettingForm = async () => {
       : await createSetting(submitData)
       
     if (res.data.code === 200) {
-      // 如果是修改配置且开放状态有变化，调用setSettingOpen
       if (settingForm.id && originalOpen !== newOpen) {
         try {
-          await setSettingOpen({
-            id: settingForm.id,
-            open: newOpen
-          })
-          console.log('配置开放状态已更新:', { id: settingForm.id, open: newOpen })
+          await setSettingOpen({ id: settingForm.id, open: newOpen })
         } catch (openError) {
           console.error('更新开放状态失败:', openError)
           ElMessage.warning('配置已更新，但开放状态更新失败')
@@ -2299,22 +1122,7 @@ const submitSettingForm = async () => {
       
       ElMessage.success(settingForm.id ? '修改成功' : '创建成功')
       settingDialogVisible.value = false
-      
-      // 重新加载数据
-      if (settingForm.settingGroupID) {
-        // 找到对应的配置组并重新加载其配置项
-        const groupNode = treeData.value.find(item => 
-          item.type === 'group' && item.data.id === settingForm.settingGroupID
-        )
-        if (groupNode) {
-          groupNode._children = []
-          groupNode._expanded = false
-          await toggleExpand(groupNode)
-        }
-      } else {
-        // 重新加载所有数据
-        loadGroups()
-      }
+      loadSettings()
     } else {
       ElMessage.error(res.data.message || '操作失败')
     }
@@ -2324,18 +1132,381 @@ const submitSettingForm = async () => {
   }
 }
 
-// ==================== 一键导入配置 ====================
-const batchImportDialogVisible = ref(false)
-const batchImportText = ref('')
-const batchImportParsed = ref([])
-const batchImportGroupId = ref(undefined)
-const batchImportGroupName = ref('')
-const batchImportGroupExists = ref(false)
-const batchImportOpen = ref(true)
-const batchImportLoading = ref(false)
-const batchImportProgress = ref(0)
-const batchImportTotal = ref(0)
-const batchImportStatusText = ref('')
+// ==================== 文件相关 ====================
+
+const clearFile = () => {
+  if (fileInfo.value?.localUrl) {
+    URL.revokeObjectURL(fileInfo.value.localUrl)
+  }
+  if (fileInfo.value?.isLocal && fileInfo.value?.url) {
+    URL.revokeObjectURL(fileInfo.value.url)
+  }
+  settingForm.value = ''
+  fileInfo.value = null
+}
+
+const formatFileSize = (bytes) => {
+  if (!bytes) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+const truncateFileName = (fileName, maxLength = 25) => {
+  if (!fileName) return ''
+  if (fileName.length <= maxLength) return fileName
+  const extension = fileName.includes('.') ? '.' + fileName.split('.').pop() : ''
+  const nameWithoutExt = fileName.substring(0, fileName.lastIndexOf('.'))
+  if (nameWithoutExt.length <= maxLength) {
+    return fileName
+  }
+  const truncatedName = nameWithoutExt.substring(0, maxLength - 3)
+  return truncatedName + '...' + extension
+}
+
+const getFileList = (value) => {
+  if (!value || typeof value !== 'string') return []
+  return value.split(',').filter(id => id && id.trim())
+}
+
+const getStringList = (value) => {
+  if (!value || typeof value !== 'string') return []
+  return value.split(',').filter(str => str && str.trim())
+}
+
+const truncateText = (text, maxLength = 30) => {
+  if (!text) return ''
+  if (typeof text !== 'string') text = String(text)
+  if (text.length <= maxLength) return text
+  return text.substring(0, maxLength) + '...'
+}
+
+const formatDate = (dateString) => {
+  if (!dateString) return '-'
+  const date = new Date(dateString)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const seconds = String(date.getSeconds()).padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
+
+// ==================== 表单可编辑字符串列表 ====================
+
+const getEditableFormStringList = () => {
+  return editableFormStringList.value
+}
+
+const initEditableFormStringList = () => {
+  const stringItems = getStringList(settingForm.value)
+  editableFormStringList.value = stringItems.map(item => ({
+    value: item,
+    editing: false
+  }))
+}
+
+const handleFormDragStart = (event, index) => {
+  formDraggedIndex.value = index
+  event.dataTransfer.effectAllowed = 'move'
+  event.dataTransfer.setData('text/html', event.target.outerHTML)
+  event.target.style.opacity = '0.5'
+}
+
+const handleFormDrop = (event, dropIndex) => {
+  event.preventDefault()
+  const dragIndex = formDraggedIndex.value
+  if (dragIndex === dropIndex) return
+  const newList = [...editableFormStringList.value]
+  const [draggedItem] = newList.splice(dragIndex, 1)
+  newList.splice(dropIndex, 0, draggedItem)
+  editableFormStringList.value = newList
+  formDraggedIndex.value = -1
+  const updatedValues = newList.map(item => item.value)
+  settingForm.value = updatedValues.join(',')
+  event.target.style.opacity = '1'
+}
+
+const addFormEditableStringItem = () => {
+  const newItem = { value: '', editing: true }
+  editableFormStringList.value.push(newItem)
+  const updatedValues = editableFormStringList.value.map(item => item.value)
+  settingForm.value = updatedValues.join(',')
+  nextTick(() => {
+    const inputs = document.querySelectorAll('.string-list-item input')
+    if (inputs.length > 0) {
+      inputs[inputs.length - 1].focus()
+    }
+  })
+}
+
+const startFormEditItem = (index) => {
+  editableFormStringList.value[index].editing = true
+  nextTick(() => {
+    const inputs = document.querySelectorAll('.string-list-item input')
+    if (inputs[index]) {
+      inputs[index].focus()
+      inputs[index].select()
+    }
+  })
+}
+
+const finishFormEditItem = (index) => {
+  editableFormStringList.value[index].editing = false
+  const updatedValues = editableFormStringList.value.map(item => item.value)
+  settingForm.value = updatedValues.join(',')
+}
+
+const removeFormEditableStringItem = (index) => {
+  ElMessageBox.confirm('确定要删除这个项目吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    editableFormStringList.value.splice(index, 1)
+    const updatedValues = editableFormStringList.value.map(item => item.value)
+    settingForm.value = updatedValues.join(',')
+    ElMessage.success('删除成功')
+  })
+}
+
+const focusFormEditInput = () => {}
+
+// ==================== 表单可编辑文件列表 ====================
+
+const getEditableFormFileList = () => {
+  return editableFormFileList.value
+}
+
+const initEditableFormFileList = () => {
+  if (settingForm.type === 'file_list' && fileListInfo.value && fileListInfo.value.length > 0) {
+    editableFormFileList.value = fileListInfo.value.map(file => ({
+      id: file.id || '',
+      url: file.url || '',
+      localUrl: file.localUrl || '',
+      realName: file.realName || '文件',
+      saveName: file.saveName || 'file',
+      size: file.size || 0,
+      uploading: false
+    }))
+  } else {
+    editableFormFileList.value = []
+  }
+}
+
+const handleFormFileDragStart = (event, index) => {
+  formFileDraggedIndex.value = index
+  event.dataTransfer.effectAllowed = 'move'
+  event.dataTransfer.setData('text/html', event.target.outerHTML)
+  event.target.style.opacity = '0.5'
+}
+
+const handleFormFileDrop = (event, dropIndex) => {
+  event.preventDefault()
+  const dragIndex = formFileDraggedIndex.value
+  if (dragIndex === dropIndex) return
+  const newList = [...editableFormFileList.value]
+  const [draggedItem] = newList.splice(dragIndex, 1)
+  newList.splice(dropIndex, 0, draggedItem)
+  editableFormFileList.value = newList
+  formFileDraggedIndex.value = -1
+  fileListInfo.value = newList.map(item => ({ ...item }))
+  updateFormFileListValue()
+  event.target.style.opacity = '1'
+}
+
+const removeFormEditableFileItem = (index) => {
+  ElMessageBox.confirm('确定要删除这个文件吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    if (editableFormFileList.value[index].localUrl) {
+      URL.revokeObjectURL(editableFormFileList.value[index].localUrl)
+    }
+    if (editableFormFileList.value[index].isLocal && editableFormFileList.value[index].url) {
+      URL.revokeObjectURL(editableFormFileList.value[index].url)
+    }
+    editableFormFileList.value.splice(index, 1)
+    fileListInfo.value = editableFormFileList.value
+    updateFormFileListValue()
+    ElMessage.success('删除成功')
+  })
+}
+
+const updateFormFileListValue = () => {
+  if (!editableFormFileList.value || !Array.isArray(editableFormFileList.value)) return
+  const fileIds = editableFormFileList.value.map(file => file.id).filter(id => id)
+  settingForm.value = fileIds.join(',')
+}
+
+// ==================== 文件预览 ====================
+
+const previewFile = async (fileId) => {
+  if (!fileId) return
+  try {
+    const res = await getFileDetail({ file_id: fileId })
+    if (res.data.code === 200 && res.data.data?.url) {
+      const url = processImageUrl(res.data.data.url)
+      const fileName = res.data.data.data?.realName || ''
+      const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg']
+      const ext = fileName.toLowerCase().substring(fileName.lastIndexOf('.'))
+      if (imageExts.includes(ext) || url.match(/\.(jpg|jpeg|png|gif|bmp|webp|svg)/i)) {
+        currentViewImage.value = url
+        imageViewerVisible.value = true
+      } else {
+        window.open(url, '_blank')
+      }
+    } else {
+      const downRes = await downloadFile({ file_id: fileId })
+      if (downRes.data.code === 200 && downRes.data.data?.url) {
+        window.open(processImageUrl(downRes.data.data.url), '_blank')
+      } else {
+        ElMessage.error('获取文件预览失败')
+      }
+    }
+  } catch (error) {
+    console.error('文件预览失败:', error)
+    ElMessage.error('文件预览失败')
+  }
+}
+
+const processImageUrl = (url) => {
+  if (!url) return ''
+  let processedUrl = url.replace(/\\u0026/g, '&')
+  return decodeURIComponent(processedUrl)
+}
+
+const previewImage = (url) => {
+  currentViewImage.value = processImageUrl(url)
+  imageViewerVisible.value = true
+}
+
+const handleImageError = (event) => {
+  console.error('图片加载失败:', event.target.src)
+}
+
+// ==================== 图像选择器 ====================
+
+const openImageSelector = () => {
+  imageSelectorMode.value = 'single'
+  currentImageSelectorFileId.value = settingForm.value || ''
+  imageSelectorVisible.value = true
+}
+
+const openImageSelectorForList = () => {
+  imageSelectorMode.value = 'list'
+  currentImageSelectorFileId.value = ''
+  imageSelectorVisible.value = true
+}
+
+const openImageSelectorForListItem = (index) => {
+  imageSelectorMode.value = 'list-item'
+  currentImageSelectorFileId.value = index
+  imageSelectorVisible.value = true
+}
+
+const handleImageSelectorConfirm = (selectedFileOrFiles) => {
+  if (imageSelectorMode.value === 'list' && Array.isArray(selectedFileOrFiles)) {
+    if (selectedFileOrFiles.length === 0) {
+      ElMessage.warning('未选择任何文件')
+      return
+    }
+    if (!fileListInfo.value) {
+      fileListInfo.value = []
+    }
+    for (const selectedFile of selectedFileOrFiles) {
+      if (!selectedFile || !selectedFile.id) continue
+      const newFile = {
+        id: selectedFile.id,
+        url: processImageUrl(selectedFile.url || ''),
+        realName: selectedFile.realName || '文件',
+        saveName: selectedFile.realName || 'file',
+        size: selectedFile.size || 0
+      }
+      fileListInfo.value.push(newFile)
+      editableFormFileList.value.push({
+        id: selectedFile.id,
+        url: processImageUrl(selectedFile.url || ''),
+        localUrl: '',
+        realName: selectedFile.realName || '文件',
+        saveName: selectedFile.realName || 'file',
+        size: selectedFile.size || 0,
+        uploading: false
+      })
+    }
+    updateFormFileListValue()
+    ElMessage.success(`已添加 ${selectedFileOrFiles.length} 个文件`)
+    imageSelectorVisible.value = false
+    return
+  }
+  
+  const selectedFile = selectedFileOrFiles
+  if (!selectedFile || !selectedFile.id) {
+    ElMessage.warning('选择的文件无效')
+    return
+  }
+  
+  if (imageSelectorMode.value === 'single') {
+    settingForm.value = selectedFile.id
+    fileInfo.value = {
+      id: selectedFile.id,
+      url: processImageUrl(selectedFile.url || ''),
+      realName: selectedFile.realName || '文件',
+      saveName: selectedFile.realName || 'file',
+      size: selectedFile.size || 0
+    }
+  } else if (imageSelectorMode.value === 'list') {
+    if (!fileListInfo.value) {
+      fileListInfo.value = []
+    }
+    const newFile = {
+      id: selectedFile.id,
+      url: processImageUrl(selectedFile.url || ''),
+      realName: selectedFile.realName || '文件',
+      saveName: selectedFile.realName || 'file',
+      size: selectedFile.size || 0
+    }
+    fileListInfo.value.push(newFile)
+    editableFormFileList.value.push({
+      id: selectedFile.id,
+      url: processImageUrl(selectedFile.url || ''),
+      localUrl: '',
+      realName: selectedFile.realName || '文件',
+      saveName: selectedFile.realName || 'file',
+      size: selectedFile.size || 0,
+      uploading: false
+    })
+    updateFormFileListValue()
+  } else if (imageSelectorMode.value === 'list-item') {
+    const index = currentImageSelectorFileId.value
+    const updatedFile = {
+      id: selectedFile.id,
+      url: processImageUrl(selectedFile.url || ''),
+      realName: selectedFile.realName || '文件',
+      saveName: selectedFile.realName || 'file',
+      size: selectedFile.size || 0
+    }
+    if (fileListInfo.value && fileListInfo.value[index] !== undefined) {
+      fileListInfo.value[index] = updatedFile
+    }
+    if (editableFormFileList.value && editableFormFileList.value[index] !== undefined) {
+      editableFormFileList.value[index] = {
+        ...updatedFile,
+        localUrl: '',
+        uploading: false
+      }
+    }
+    updateFormFileListValue()
+    ElMessage.success('文件替换成功')
+  }
+  
+  imageSelectorVisible.value = false
+}
+
+// ==================== 批量导入 ====================
 
 const handleBatchImport = async () => {
   batchImportText.value = ''
@@ -2355,17 +1526,24 @@ const handleBatchImport = async () => {
       batchImportText.value = clipText.trim()
     }
   } catch (e) {
-    console.warn('读取剪贴板失败（可能需要用户授权）:', e)
+    console.warn('读取剪贴板失败:', e)
   }
 }
 
-/**
- * 解析 Markdown 表格文本为配置项数组
- * 支持格式：
- *   | 配置名 | 类型 | 默认值 | 说明 |
- *   |--------|------|--------|------|
- *   | `移动端_主题主色` | `string` | `#2B7EFB` | 按钮、链接、选中态主色 |
- */
+const handleImportToGroup = (group) => {
+  if (!group) return
+  batchImportText.value = ''
+  batchImportParsed.value = []
+  batchImportGroupId.value = group.id
+  batchImportGroupName.value = group.name
+  batchImportGroupExists.value = true
+  batchImportOpen.value = true
+  batchImportProgress.value = 0
+  batchImportTotal.value = 0
+  batchImportStatusText.value = ''
+  batchImportDialogVisible.value = true
+}
+
 const parseBatchImportText = () => {
   const text = batchImportText.value.trim()
   if (!text) {
@@ -2376,10 +1554,8 @@ const parseBatchImportText = () => {
   const lines = text.split('\n').map(l => l.trim()).filter(l => l.length > 0)
   const validTypes = ['string', 'int', 'float', 'bool', 'file', 'file_list', 'string_list']
   const results = []
-
   const stripBackticks = (str) => str.replace(/`/g, '').trim()
 
-  // 识别 [配置组] 行
   let detectedGroupName = ''
   for (const line of lines) {
     const groupMatch = line.match(/^\[配置组\]\s*(.+)$/)
@@ -2387,28 +1563,19 @@ const parseBatchImportText = () => {
       detectedGroupName = groupMatch[1].trim()
       continue
     }
-
     if (/^[\s|:\-]+$/.test(line)) continue
     if (/配置名|类型.*默认值|名称.*类型/.test(line)) continue
-
     const parts = line.split('|').map(s => s.trim()).filter(s => s.length > 0)
     if (parts.length < 3) continue
-
     const name = stripBackticks(parts[0])
     const type = stripBackticks(parts[1]).toLowerCase()
     const value = stripBackticks(parts[2])
     const note = parts.length >= 4 ? stripBackticks(parts[3]) : ''
-
     if (!name) continue
-    if (!validTypes.includes(type)) {
-      console.warn(`跳过无效类型 "${type}" (配置名: ${name})`)
-      continue
-    }
-
+    if (!validTypes.includes(type)) continue
     results.push({ name, type, value, note, _duplicate: false })
   }
 
-  // 更新配置组识别结果
   if (detectedGroupName) {
     batchImportGroupName.value = detectedGroupName
     const existingGroup = allGroupList.value.find(g => g.name === detectedGroupName)
@@ -2421,7 +1588,6 @@ const parseBatchImportText = () => {
     }
   }
 
-  // 标记重复项
   const nameSet = new Set()
   results.forEach(item => {
     if (nameSet.has(item.name)) {
@@ -2432,7 +1598,6 @@ const parseBatchImportText = () => {
   })
 
   batchImportParsed.value = results
-
   if (results.length === 0) {
     ElMessage.warning('未能解析到有效的配置项，请检查格式')
   } else {
@@ -2441,7 +1606,6 @@ const parseBatchImportText = () => {
   }
 }
 
-// 监听文本变化自动解析
 watch(batchImportText, (val) => {
   if (val && val.trim().split('\n').length >= 2) {
     parseBatchImportText()
@@ -2466,7 +1630,6 @@ const submitBatchImport = async () => {
   let failCount = 0
   const errors = []
 
-  // 步骤 1：确保配置组存在
   let targetGroupId = batchImportGroupId.value
   if (!targetGroupId) {
     batchImportStatusText.value = `正在创建配置组「${batchImportGroupName.value}」...`
@@ -2490,7 +1653,6 @@ const submitBatchImport = async () => {
     }
   }
 
-  // 步骤 2：逐条导入配置项
   for (let i = 0; i < items.length; i++) {
     const item = items[i]
     batchImportStatusText.value = `正在导入：${item.name}`
@@ -2538,32 +1700,23 @@ const submitBatchImport = async () => {
     }
   }
 
-  // 刷新配置组树
   await loadGroups()
-  await nextTick()
-  const groupNode = treeData.value.find(item =>
-    item.type === 'group' && item.data.id === targetGroupId
-  )
-  if (groupNode) {
-    groupNode._children = []
-    groupNode._expanded = false
-    await toggleExpand(groupNode)
+  if (targetGroupId) {
+    activeGroupId.value = String(targetGroupId)
+    await loadSettings()
   }
 }
 
-// 一键复制：将配置组的所有配置项格式化为 Markdown 批量导入表格并复制到剪贴板
-const handleCopyGroupSettings = async (row) => {
-  const groupId = row.data.id
-  const groupName = row.data.name
+// 一键复制
+const handleCopyGroupSettings = async (group) => {
+  if (!group) return
+  const groupId = group.id
+  const groupName = group.name
   try {
+    const res = await getSettingList({ group_id: groupId, page: 1, count: 100 })
     let settings = []
-    if (row._expanded && row._children && row._children.length > 0) {
-      settings = row._children.map(child => child.data)
-    } else {
-      const res = await getSettingList({ group_id: groupId, page: 1, count: 10 })
-      if (res.data.code === 200) {
-        settings = res.data.data.data || []
-      }
+    if (res.data.code === 200) {
+      settings = res.data.data.data || []
     }
 
     if (settings.length === 0) {
@@ -2594,166 +1747,609 @@ const handleCopyGroupSettings = async (row) => {
   }
 }
 
-// 一键导入：打开批量导入弹窗并预选当前配置组
-const handleImportToGroup = (groupData) => {
-  batchImportText.value = ''
-  batchImportParsed.value = []
-  batchImportGroupId.value = groupData.id
-  batchImportGroupName.value = groupData.name
-  batchImportGroupExists.value = true
-  batchImportOpen.value = true
-  batchImportProgress.value = 0
-  batchImportTotal.value = 0
-  batchImportStatusText.value = ''
-  batchImportDialogVisible.value = true
-}
-
-// 初始化
+// ==================== 初始化 ====================
 onMounted(() => {
-  // 初始化时加载配置组数据
   loadGroups()
 })
 </script>
 
 <style scoped>
 .setting-manage-container {
-  padding: 0;
-}
-
-.main-container {
-  border: 1px solid #e1e8ed;
-  background: #ffffff;
-}
-
-/* 树状图样式 */
-.tree-section {
   padding: 20px;
-  min-height: 400px;
-  max-height: 500px;
-  overflow-y: auto;
-  /* 隐藏滚动条 */
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-}
-
-.tree-section::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera */
-}
-
-.setting-tree-table {
-  background: white;
-}
-
-/* 树状层级样式 */
-.tree-item-content {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 0;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 100%;
 }
 
-.expand-icon {
-  width: 20px;
-  height: 20px;
+/* 顶部操作栏 */
+.top-action-bar {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: #606266;
-  transition: transform 0.2s ease;
+  padding: 16px 20px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  border: 1px solid #f0f2f5;
 }
 
-.expand-icon:hover {
-  color: #409eff;
-}
-
-.expand-icon .is-expanded {
-  transform: rotate(90deg);
-}
-
-.expand-placeholder {
-  width: 20px;
-  height: 20px;
-}
-
-.tree-node {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.tree-icon {
-  color: #409eff;
-  font-size: 16px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
-
-.tree-label {
-  font-weight: 500;
-  color: #303133;
-  font-size: 14px;
-  flex: 1;
-  line-height: 16px; /* 与图标高度保持一致 */
-}
-
-/* 表格中文字值样式 */
-.text-value {
-  display: inline-block;
-  max-width: 200px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: middle;
-}
-
-/* 文件预览样式 */
-.file-preview {
-  margin-top: 8px;
-  position: relative;
-  flex-shrink: 0;
-}
-
-.preview-image {
-  width: 80px;
-  height: 80px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: transform 0.2s ease;
-  border: 1px solid #e1e8ed;
-  object-fit: cover;
-}
-
-.preview-image:hover {
-  transform: scale(1.1);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.file-preview-link {
-  margin-top: 8px;
-}
-
-.file-item {
-  border: 1px solid #e1e8ed;
-  border-radius: 4px;
-  padding: 12px;
-  margin-bottom: 8px;
-  background: #fafbfc;
+.action-left {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.file-placeholder {
-  width: 80px;
-  height: 80px;
-  border-radius: 4px;
-  border: 1px solid #e1e8ed;
+.search-input {
+  width: 280px;
+}
+
+.search-input :deep(.el-input__wrapper) {
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px #e4e7ed inset;
+  transition: all 0.3s;
+}
+
+.search-input :deep(.el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px #c0c4cc inset;
+}
+
+.search-input :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px #409eff inset;
+}
+
+.action-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* Tab 栏 */
+.tabs-wrapper {
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 16px 20px 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  border: 1px solid #f0f2f5;
+  position: relative;
+}
+
+.group-tabs :deep(.el-tabs__header) {
+  margin: 0;
+  border-bottom: none;
+}
+
+.group-tabs :deep(.el-tabs__nav-wrap) {
+  margin-bottom: 0;
+}
+
+.group-tabs :deep(.el-tabs__nav-wrap::after) {
+  display: none;
+}
+
+.group-tabs :deep(.el-tabs__item) {
+  border: 1px solid transparent;
+  border-radius: 8px 8px 0 0;
+  padding: 0 20px;
+  height: 42px;
+  line-height: 42px;
+  margin-right: 4px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   background: #f5f7fa;
+}
+
+.group-tabs :deep(.el-tabs__item:hover) {
+  background: #ecf5ff;
+  border-color: #d9ecff;
+  color: #409eff;
+}
+
+.group-tabs :deep(.el-tabs__item.is-active) {
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  color: #ffffff;
+  border-color: transparent;
+  font-weight: 600;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+}
+
+.group-tabs :deep(.el-tabs__item.is-active .tab-icon) {
+  color: #ffffff;
+}
+
+.group-tabs :deep(.el-tabs__item.is-active .tab-badge .el-badge__content) {
+  background-color: #ffffff;
+  color: #409eff;
+}
+
+.tab-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.tab-icon {
+  font-size: 15px;
+  color: #909399;
+  transition: color 0.3s;
+}
+
+.tab-name {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tab-badge {
+  margin-left: 4px;
+}
+
+.tab-badge :deep(.el-badge__content) {
+  font-size: 10px;
+  height: 16px;
+  line-height: 16px;
+  padding: 0 5px;
+}
+
+.group-info-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 0 16px;
+  border-top: 1px solid #f0f2f5;
+  margin-top: 12px;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.group-meta {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.group-meta-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  color: #606266;
+}
+
+.meta-icon {
+  font-size: 14px;
+  color: #909399;
+}
+
+.meta-label {
+  color: #909399;
+  white-space: nowrap;
+}
+
+.meta-value {
+  color: #303133;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meta-count {
+  font-weight: 600;
+  color: #409eff;
+}
+
+.group-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  height: 32px;
+}
+
+.action-btn span {
+  line-height: 1;
+}
+
+.action-btn--edit {
+  background: #ecf5ff;
+  color: #409eff;
+}
+
+.action-btn--edit:hover {
+  background: #409eff;
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.35);
+  transform: translateY(-1px);
+}
+
+.action-btn--add {
+  background: #f0f9eb;
+  color: #67c23a;
+}
+
+.action-btn--add:hover {
+  background: #67c23a;
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.35);
+  transform: translateY(-1px);
+}
+
+.action-btn--copy {
+  background: #fdf6ec;
+  color: #e6a23c;
+}
+
+.action-btn--copy:hover {
+  background: #e6a23c;
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(230, 162, 60, 0.35);
+  transform: translateY(-1px);
+}
+
+.action-btn--import {
+  background: #f4f4f5;
+  color: #909399;
+}
+
+.action-btn--import:hover {
+  background: #909399;
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(144, 147, 153, 0.35);
+  transform: translateY(-1px);
+}
+
+.action-btn--delete {
+  background: #fef0f0;
+  color: #f56c6c;
+}
+
+.action-btn--delete:hover {
+  background: #f56c6c;
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.35);
+  transform: translateY(-1px);
+}
+
+/* 卡片区域 */
+.cards-section {
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  border: 1px solid #f0f2f5;
+  min-height: 400px;
+  flex: 1;
+}
+
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px;
+}
+
+/* 卡片样式 */
+.setting-card {
+  background: #ffffff;
+  border: 1px solid #ebeef5;
+  border-radius: 12px;
+  padding: 20px;
+  cursor: pointer;
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.setting-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #409eff, #66b1ff);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.setting-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 28px rgba(64, 158, 255, 0.12);
+  border-color: #d9ecff;
+}
+
+.setting-card:hover::before {
+  opacity: 1;
+}
+
+.setting-card.is-private {
+  border-left: 3px solid #909399;
+}
+
+.setting-card.is-private::before {
+  background: linear-gradient(90deg, #909399, #b1b3b8);
+}
+
+/* 卡片头部 */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 14px;
+}
+
+.card-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.card-name-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+}
+
+.card-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.copy-name-btn {
+  font-size: 16px;
+  color: #c0c4cc;
+  cursor: pointer;
+  flex-shrink: 0;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.25s;
+}
+
+.copy-name-btn:hover {
+  color: #409eff;
+  background: #ecf5ff;
+}
+
+.card-type-tag {
+  flex-shrink: 0;
+}
+
+/* 卡片内容 */
+.card-body {
+  margin-bottom: 14px;
+  padding: 12px;
+  background: #f8f9fc;
+  border-radius: 8px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+}
+
+.card-value {
+  font-size: 13px;
+  color: #606266;
+  width: 100%;
+  overflow: hidden;
+}
+
+.value-bool {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
+}
+
+.bool-true {
+  color: #67c23a;
+  font-size: 18px;
+}
+
+.bool-false {
+  color: #f56c6c;
+  font-size: 18px;
+}
+
+.value-file,
+.value-file-list,
+.value-string-list {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #409eff;
+}
+
+.value-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: 'SF Mono', Consolas, monospace;
+  font-size: 12.5px;
+  color: #5a6b7b;
+}
+
+/* 卡片底部 */
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
+  border-top: 1px solid #f2f3f5;
+}
+
+.card-note {
+  font-size: 12px;
+  color: #909399;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.setting-card:hover .card-actions {
+  opacity: 1;
+}
+
+/* 空状态 */
+.empty-state {
   display: flex;
   align-items: center;
   justify-content: center;
+  min-height: 300px;
+}
+
+/* 分页 */
+.pagination-wrapper {
+  display: flex;
+  justify-content: center;
+  padding-top: 24px;
+  margin-top: 16px;
+  border-top: 1px solid #f2f3f5;
+}
+
+/* 卡片列表动画 */
+.card-list-enter-active,
+.card-list-leave-active {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card-list-enter-from {
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+}
+
+.card-list-leave-to {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.95);
+}
+
+.card-list-move {
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 弹窗样式 */
+:deep(.dialog-scrollable .el-dialog) {
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+}
+
+:deep(.dialog-scrollable .el-dialog__body) {
+  max-height: calc(90vh - 120px);
+  overflow-y: auto;
+  padding: 20px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+:deep(.dialog-scrollable .el-dialog__body)::-webkit-scrollbar {
+  display: none;
+}
+
+:deep(.dialog-scrollable .el-dialog__header) {
+  flex-shrink: 0;
+}
+
+:deep(.dialog-scrollable .el-dialog__footer) {
+  flex-shrink: 0;
+  padding: 20px;
+  border-top: 1px solid #e4e7ed;
+}
+
+/* JSON 工具栏 */
+.json-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 6px 10px;
+  background: #f5f7fa;
+  border-radius: 6px;
+}
+
+/* 文件相关样式 */
+.file-upload-section {
+  width: 100%;
+}
+
+.file-info-display {
+  width: 100%;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background: #f8f9fc;
+}
+
+.file-item.uploading {
+  border-color: #409eff;
+  background: #f0f9ff;
+}
+
+.file-preview {
+  width: 80px;
+  height: 80px;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid #e4e7ed;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.preview-image:hover {
+  transform: scale(1.05);
+}
+
+.file-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f7fa;
   color: #909399;
   font-size: 24px;
 }
@@ -2765,6 +2361,25 @@ onMounted(() => {
   flex: 1;
 }
 
+.file-name {
+  font-weight: 500;
+  color: #303133;
+  max-width: 200px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.file-id {
+  font-size: 12px;
+  color: #909399;
+}
+
+.file-size {
+  font-size: 12px;
+  color: #909399;
+}
+
 .file-actions {
   display: flex;
   flex-direction: column;
@@ -2773,464 +2388,20 @@ onMounted(() => {
   flex-shrink: 0;
 }
 
-.file-name {
-  font-weight: 500;
-  color: #303133;
-}
-
-.file-id {
-  font-size: 12px;
-  color: #909399;
-}
-
-.file-size {
-  font-size: 12px;
-  color: #909399;
-}
-
-/* 表格行样式 */
-:deep(.setting-tree-table .el-table__row--level-1) {
-  background-color: #fafbfc;
-}
-
-:deep(.setting-tree-table .el-table__row--level-2) {
-  background-color: #f5f7fa;
-}
-
-/* 表格样式优化 */
-:deep(.setting-tree-table .el-table) {
-  border: none;
-  color: #2c3e50;
-}
-
-:deep(.setting-tree-table .el-table__header) {
-  background: #f8f9fa;
-}
-
-:deep(.setting-tree-table .el-table th) {
-  background: #f8f9fa !important;
-  border-bottom: 2px solid #e1e8ed;
-  color: #2c3e50;
-  font-weight: 600;
-  font-size: 13px;
-}
-
-:deep(.setting-tree-table .el-table td) {
-  border-bottom: 1px solid #f0f2f5;
-  color: #34495e;
-}
-
-:deep(.setting-tree-table .el-table tr:hover > td) {
-  background-color: #f8f9fa !important;
-}
-
-/* 详细信息面板样式 */
-.detail-section {
-  padding: 20px;
-  background: #fafbfc;
-  border-top: 1px solid #e1e8ed;
-}
-
-.detail-content {
-  background: white;
-  border-radius: 8px;
-  padding: 20px;
-}
-
-.filter-section {
-  padding: 0;
-  border-bottom: 1px solid #e1e8ed;
-  background: #fafbfc;
-  margin: 0 -20px;
-}
-
-.filter-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  gap: 20px;
-  flex-wrap: wrap;
-}
-
-.search-form {
-  margin: 0;
-  flex: 1;
-  display: flex;
-  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: 20px 0;
-}
-
-.pagination {
-  margin-top: 20px;
-  padding: 16px 0;
-  border-top: 1px solid #e1e8ed;
-  justify-content: flex-end;
-}
-
-/* 表格样式优化 */
-: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(.dialog-scrollable .el-dialog) {
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-}
-
-:deep(.dialog-scrollable .el-dialog__body) {
-  max-height: calc(90vh - 120px);
-  overflow-y: auto;
-  padding: 20px;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-}
-
-/* 完全隐藏滚动条但保持滚动功能 */
-:deep(.dialog-scrollable .el-dialog__body)::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera */
-}
-
-/* 确保弹窗内容区域正确布局 */
-:deep(.dialog-scrollable .el-dialog__header) {
-  flex-shrink: 0;
-}
-
-:deep(.dialog-scrollable .el-dialog__footer) {
-  flex-shrink: 0;
-  padding: 20px;
-  border-top: 1px solid #e4e7ed;
-}
-
-/* 移动端适配 */
-@media (max-width: 768px) {
-  :deep(.dialog-scrollable .el-dialog) {
-    max-height: 95vh;
-    width: 95vw !important;
-    margin: 0 auto;
-  }
-  
-  :deep(.dialog-scrollable .el-dialog__body) {
-    max-height: calc(95vh - 140px);
-    padding: 15px;
-  }
-  
-  :deep(.dialog-scrollable .el-dialog__footer) {
-    padding: 15px;
-  }
-
-  .tree-section {
-    max-height: 300px;
-    min-height: 300px;
-    padding: 10px;
-  }
-
-  .tree-item-content {
-    padding: 4px 0;
-  }
-
-  .tree-label {
-    font-size: 13px;
-    line-height: 14px; /* 移动端调整行高 */
-  }
-
-  .tree-icon {
-    font-size: 14px;
-  }
-
-  :deep(.setting-tree-table .el-table th) {
-    font-size: 12px;
-    padding: 8px 4px;
-  }
-
-  :deep(.setting-tree-table .el-table td) {
-    font-size: 12px;
-    padding: 8px 4px;
-  }
-}
-
-/* 确保表单在弹窗中正确显示 */
-:deep(.dialog-scrollable .el-form) {
-  margin: 0;
-}
-
-:deep(.dialog-scrollable .el-form-item) {
-  margin-bottom: 20px;
-}
-
-/* 文件上传组件在弹窗中的样式优化 */
-:deep(.dialog-scrollable .file-uploader) {
-  margin-bottom: 10px;
-}
-
-:deep(.dialog-scrollable .file-info-display),
-:deep(.dialog-scrollable .file-list-info-display) {
-  margin-bottom: 15px;
-}
-
-:deep(.el-tabs__header) {
-  margin: 0;
-  padding: 0 0 0 0;
-  border-bottom: 1px solid #e1e8ed;
-}
-
-:deep(.el-tabs__nav-wrap::after) {
-  display: none;
-}
-
-:deep(.el-tabs__item) {
-  padding: 0 20px;
-  height: 50px;
-  line-height: 50px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-:deep(.el-tabs__item.is-active) {
-  color: #2c3e50;
-  font-weight: 600;
-}
-
-:deep(.el-tabs__active-bar) {
-  background-color: #2c3e50;
-}
-
-/* JSON 编辑工具栏 */
-.json-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-/* 导入进度面板 */
-.import-progress-panel {
-  padding: 40px 20px;
-  text-align: center;
-}
-
-.progress-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  margin-bottom: 24px;
-}
-
-.progress-info {
-  max-width: 500px;
-  margin: 0 auto;
-}
-
-/* 文件上传相关样式 */
-.file-upload-section {
-  width: 100%;
-}
-
-.file-uploader {
-  width: 100%;
-}
-
-.file-upload-options {
-  width: 100%;
-}
-
-.upload-methods {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  align-items: center;
-}
-
-.divider {
-  position: relative;
-  text-align: center;
-  color: #909399;
-  font-size: 14px;
-  margin: 8px 0;
-}
-
-.divider::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: #dcdfe6;
-}
-
-.divider {
-  background: #fff;
-  padding: 0 16px;
-}
-
-.image-selector-btn {
-  width: 200px;
-  height: 40px;
-}
-
-:deep(.file-uploader .el-upload) {
-  width: 100%;
-}
-
-:deep(.file-uploader .el-upload-dragger) {
-  width: 100%;
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  transition: border-color 0.3s;
-}
-
-:deep(.file-uploader .el-upload-dragger:hover) {
-  border-color: #409eff;
-}
-
-.file-info-display {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  border: 1px solid #e4e7ed;
-  border-radius: 6px;
-  background-color: #f5f7fa;
-}
-
-.file-details {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.file-name {
-  font-weight: 500;
-  color: #303133;
-  max-width: 200px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: inline-block;
-}
-
-.file-id {
-  font-size: 12px;
-  color: #909399;
-}
-
-.file-size {
-  font-size: 12px;
-  color: #909399;
-}
-
-/* 文件列表相关样式 */
-.file-list-section {
-  width: 100%;
-}
-
-.file-list-info-display {
-  margin-bottom: 16px;
-}
-
-.file-list-details {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.file-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  border: 1px solid #e4e7ed;
-  border-radius: 6px;
-  background-color: #f5f7fa;
-}
-
-.file-item .file-details {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-}
-
-.file-item .file-name {
-  font-weight: 500;
-  color: #303133;
-  max-width: 180px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: inline-block;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-.file-item .file-name:hover {
-  color: #409eff;
-}
-
-/* 上传状态指示器样式 */
-.file-item.uploading {
-  border-color: #409eff;
-  background-color: #f0f9ff;
-}
-
 .upload-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.6);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 12px;
-  border-radius: 4px;
+  border-radius: 6px;
 }
 
 .upload-overlay .el-icon {
@@ -3242,231 +2413,134 @@ onMounted(() => {
   font-size: 11px;
 }
 
-/* 字符串列表相关样式 */
-.string-list-section {
+.image-selector-btn {
+  width: 200px;
+  height: 40px;
+}
+
+/* 文件列表样式 */
+.file-list-section {
   width: 100%;
 }
 
-.string-list-display {
-  margin-bottom: 16px;
+.editable-file-list {
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  padding: 16px;
+  background: #fafbfc;
 }
 
-.string-list-items {
+.file-list-header {
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ebeef5;
 }
 
-.string-item {
-  margin: 0;
-}
-
-.string-list-input {
+.header-actions {
   display: flex;
-  flex-direction: column;
   gap: 8px;
 }
 
-/* 文件列表摘要样式 */
-.file-list-summary {
-  display: flex;
-  align-items: center;
+.list-title {
+  font-weight: 500;
+  color: #303133;
+  font-size: 14px;
 }
 
-.file-list-summary .el-tag {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.file-list-summary .el-tag:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-/* 字符串列表摘要样式 */
-.string-list-summary {
-  display: flex;
-  align-items: center;
-}
-
-.string-list-summary .el-tag {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.string-list-summary .el-tag:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-/* 表格中的文件列表和字符串列表样式 */
-.table-file-list {
+.file-list-items {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  max-height: 120px;
-  overflow-y: auto;
+  gap: 10px;
 }
 
-.table-file-item {
+.file-list-item {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 4px 6px;
-  background-color: #f8f9fa;
-  border-radius: 4px;
-  border: 1px solid #e9ecef;
-  transition: all 0.2s ease;
+  gap: 12px;
+  padding: 12px;
+  background: #ffffff;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  transition: all 0.3s;
+  cursor: move;
 }
 
-.table-file-item:hover {
-  background-color: #e9ecef;
-  border-color: #dee2e6;
+.file-list-item:hover {
+  border-color: #c0c4cc;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
-.file-preview-mini {
-  width: 24px;
-  height: 24px;
-  border-radius: 3px;
+.file-list-item .file-preview {
+  width: 50px;
+  height: 50px;
+  border-radius: 6px;
   overflow: hidden;
+  border: 1px solid #e4e7ed;
   flex-shrink: 0;
-  border: 1px solid #dee2e6;
+  position: relative;
 }
 
-.preview-mini-image {
+.file-list-item .preview-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   cursor: pointer;
 }
 
-.file-placeholder-mini {
+.file-list-item .file-placeholder {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #f8f9fa;
-  color: #6c757d;
-  font-size: 10px;
+  background: #f5f7fa;
+  color: #909399;
 }
 
-.file-info-mini {
+.file-list-item .file-info {
   flex: 1;
   min-width: 0;
 }
 
-.file-name-mini {
-  font-size: 12px;
+.file-list-item .file-name {
   font-weight: 500;
-  color: #495057;
+  color: #303133;
   margin-bottom: 2px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.file-id-mini {
-  font-size: 10px;
-  color: #6c757d;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.file-list-item .file-id {
+  font-size: 12px;
+  color: #909399;
 }
 
-.table-string-list {
+.file-list-item .file-size {
+  font-size: 12px;
+  color: #909399;
+}
+
+.file-list-item .file-actions {
   display: flex;
-  flex-direction: column;
   gap: 4px;
-  max-height: 120px;
-  overflow-y: auto;
-}
-
-.table-string-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 6px;
-  background-color: #f8f9fa;
-  border-radius: 3px;
-  border-left: 3px solid #007bff;
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.table-string-item:hover {
-  background-color: #e9ecef;
-  border-left-color: #0056b3;
-}
-
-.string-index {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  background-color: #007bff;
-  color: white;
-  font-size: 10px;
-  font-weight: bold;
-  border-radius: 50%;
   flex-shrink: 0;
+  flex-direction: row;
 }
 
-.string-content {
-  font-size: 12px;
-  color: #495057;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  flex: 1;
+/* 字符串列表样式 */
+.string-list-section {
+  width: 100%;
 }
 
-.file-list-display {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.file-link {
-  font-size: 12px;
-  margin-right: 8px;
-  max-width: 150px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.string-list-display {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.string-tag {
-  margin: 0;
-  max-width: 120px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: inline-block;
-}
-
-/* 可编辑字符串列表样式 */
 .editable-string-list {
   border: 1px solid #e4e7ed;
-  border-radius: 4px;
+  border-radius: 8px;
   padding: 16px;
-  background-color: #fafafa;
+  background: #fafbfc;
 }
 
 .string-list-header {
@@ -3478,12 +2552,6 @@ onMounted(() => {
   border-bottom: 1px solid #ebeef5;
 }
 
-.list-title {
-  font-weight: 500;
-  color: #303133;
-  font-size: 14px;
-}
-
 .string-list-items {
   display: flex;
   flex-direction: column;
@@ -3493,18 +2561,18 @@ onMounted(() => {
 .string-list-item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 8px 12px;
-  background-color: #ffffff;
+  gap: 10px;
+  padding: 10px 12px;
+  background: #ffffff;
   border: 1px solid #e4e7ed;
-  border-radius: 4px;
-  transition: all 0.3s ease;
+  border-radius: 6px;
+  transition: all 0.3s;
   cursor: move;
 }
 
 .string-list-item:hover {
   border-color: #c0c4cc;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
 }
 
 .drag-handle {
@@ -3525,7 +2593,7 @@ onMounted(() => {
 .item-text {
   padding: 4px 8px;
   border-radius: 4px;
-  transition: background-color 0.3s ease;
+  transition: background-color 0.3s;
   cursor: pointer;
   word-break: break-word;
   white-space: normal;
@@ -3533,7 +2601,7 @@ onMounted(() => {
 }
 
 .item-text:hover {
-  background-color: #f5f7fa;
+  background: #f5f7fa;
 }
 
 .item-actions {
@@ -3550,190 +2618,95 @@ onMounted(() => {
   color: #f78989;
 }
 
-/* 可编辑文件列表样式 */
-.editable-file-list {
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
-  padding: 16px;
-  background-color: #fafafa;
+/* 导入进度面板 */
+.import-progress-panel {
+  padding: 24px;
+  text-align: center;
 }
 
-.file-list-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #ebeef5;
-}
-
-.header-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.file-list-items {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.file-list-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  background-color: #ffffff;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
-  transition: all 0.3s ease;
-  cursor: move;
-}
-
-.file-list-item:hover {
-  border-color: #c0c4cc;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.file-list-item .file-preview {
-  width: 60px;
-  height: 60px;
-  border-radius: 4px;
-  overflow: hidden;
-  border: 1px solid #e4e7ed;
-  flex-shrink: 0;
-  position: relative;
-}
-
-.file-list-item .preview-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  cursor: pointer;
-}
-
-.file-list-item .file-placeholder {
-  width: 100%;
-  height: 100%;
+.progress-header {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #f5f7fa;
-  color: #909399;
+  gap: 10px;
+  margin-bottom: 20px;
 }
 
-.file-list-item .file-info {
-  flex: 1;
-  min-width: 0;
+.progress-info {
+  max-width: 400px;
+  margin: 0 auto;
 }
 
-.file-list-item .file-name {
-  font-weight: 500;
-  color: #303133;
-  margin-bottom: 4px;
-  overflow: hidden;
+/* 文本值 */
+.text-value {
+  display: inline-block;
+  max-width: 200px;
   white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.file-list-item .file-id {
-  font-size: 12px;
-  color: #909399;
-  margin-bottom: 2px;
-}
-
-.file-list-item .file-size {
-  font-size: 12px;
-  color: #909399;
-}
-
-.file-list-item .file-actions {
-  display: flex;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-/* 弹窗中值内容的省略号样式 */
-.value-content {
-  max-width: 100%;
-}
-
-.value-content .text-value {
-  display: block;
-  max-width: 100%;
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
-  word-break: break-all;
-}
-
-/* 响应式样式 */
-@media (max-width: 768px) {
-  .table-file-list {
-    max-height: 80px;
-  }
-  
-  .table-string-list {
-    max-height: 80px;
-  }
-  
-  .file-preview-mini {
-    width: 20px;
-    height: 20px;
-  }
-  
-  .file-name-mini {
-    font-size: 11px;
-  }
-  
-  .file-id-mini {
-    font-size: 9px;
-  }
-  
-  .string-index {
-    width: 16px;
-    height: 16px;
-    font-size: 9px;
-  }
-  
-  .string-content {
-    font-size: 11px;
-  }
-  
-  .file-link {
-    max-width: 100px !important;
-  }
-  
-  .string-tag {
-    max-width: 80px !important;
-  }
+  vertical-align: middle;
 }
 
+/* 响应式 */
 @media (max-width: 1200px) {
-  .table-file-list {
-    max-height: 100px;
-  }
-  
-  .table-string-list {
-    max-height: 100px;
+  .cards-grid {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   }
 }
 
 @media (max-width: 768px) {
-  .file-name {
-    max-width: 120px !important;
+  .setting-manage-container {
+    padding: 12px;
+    gap: 12px;
   }
-  
-  .file-item .file-name {
-    max-width: 100px !important;
+
+  .top-action-bar {
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
   }
-  
-  .file-link {
-    max-width: 100px !important;
+
+  .action-left {
+    width: 100%;
   }
-  
-  .string-tag {
-    max-width: 80px !important;
+
+  .search-input {
+    width: 100%;
+    flex: 1;
+  }
+
+  .action-right {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .cards-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .group-info-bar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .group-actions {
+    flex-wrap: wrap;
+  }
+
+  .cards-section {
+    padding: 16px;
+  }
+
+  :deep(.dialog-scrollable .el-dialog) {
+    max-height: 95vh;
+    width: 95vw !important;
+    margin: 0 auto;
+  }
+
+  :deep(.dialog-scrollable .el-dialog__body) {
+    max-height: calc(95vh - 140px);
+    padding: 15px;
   }
 }
 </style>