From 86f3835e51a5890491042ed4353c19cf0a031098 Mon Sep 17 00:00:00 2001
From: 2256907009 <2256907009@qq.com>
Date: Wed, 11 Mar 2026 10:27:29 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=A1=A8=E6=A0=BC=E5=80=BC=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5=E7=9A=84list=E7=B1=BB=E5=9E=8B=E5=8F=AA=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E6=96=87=E4=BB=B6=E6=95=B0=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?note=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/SettingManage.vue | 266 +++++++++++++++++++++++++----
 1 file changed, 237 insertions(+), 29 deletions(-)

diff --git a/src/views/system/SettingManage.vue b/src/views/system/SettingManage.vue
index 6677a7d..cfa5726 100644
--- a/src/views/system/SettingManage.vue
+++ b/src/views/system/SettingManage.vue
@@ -89,31 +89,19 @@
                   <span v-else>-</span>
                 </span>
                 <span v-else-if="row.data.type === 'file_list'">
-                  <div v-if="row.data.value" class="file-list-display">
-                    <el-link 
-                      v-for="(fileId, index) in getFileList(row.data.value)" 
-                      :key="fileId"
-                      type="primary" 
-                      @click="previewFile(fileId)"
-                      class="file-link"
-                      :title="`文件${index + 1}: ${fileId}`"
-                    >
-                      {{ truncateFileName(`文件${index + 1}: ${fileId}`, 25) }}
-                    </el-link>
+                  <div v-if="row.data.value" class="file-list-summary">
+                    <el-tag type="primary" size="small">
+                      <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-display">
-                    <el-tag 
-                      v-for="(item, index) in getStringList(row.data.value)" 
-                      :key="index"
-                      type="primary"
-                      size="small"
-                      class="string-tag"
-                      :title="item"
-                    >
-                      {{ truncateFileName(item, 25) }}
+                  <div v-if="row.data.value" class="string-list-summary">
+                    <el-tag type="success" size="small">
+                      <el-icon><Document /></el-icon>
+                      共 {{ getStringList(row.data.value).length }} 条字符串
                     </el-tag>
                   </div>
                   <span v-else>-</span>
@@ -138,6 +126,13 @@
               {{ 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="200" fixed="right">
             <template #default="{ row }">
               <el-button v-if="row.type === 'group'" type="primary" link size="small" @click="handleEditGroup(row.data)">
@@ -188,16 +183,32 @@
                     <span v-else>-</span>
                   </span>
                   <span v-else-if="selectedNode.data.type === 'file_list'">
-                    <div v-if="selectedNode.data.value" class="file-list-display">
-                      <el-link 
+                    <div v-if="selectedNode.data.value" class="table-file-list">
+                      <div 
                         v-for="(fileId, index) in getFileList(selectedNode.data.value)" 
                         :key="fileId"
-                        type="primary" 
-                        @click="previewFile(fileId)"
-                        class="file-link"
+                        class="table-file-item"
                       >
-                        {{ truncateFileName(`文件${index + 1}: ${fileId}`, 25) }}
-                      </el-link>
+                        <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>
@@ -2597,7 +2608,153 @@ onMounted(() => {
   gap: 8px;
 }
 
+/* 文件列表摘要样式 */
+.file-list-summary {
+  display: flex;
+  align-items: center;
+}
+
+.file-list-summary .el-tag {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* 字符串列表摘要样式 */
+.string-list-summary {
+  display: flex;
+  align-items: center;
+}
+
+.string-list-summary .el-tag {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
 /* 表格中的文件列表和字符串列表样式 */
+.table-file-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 120px;
+  overflow-y: auto;
+}
+
+.table-file-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;
+}
+
+.table-file-item:hover {
+  background-color: #e9ecef;
+  border-color: #dee2e6;
+}
+
+.file-preview-mini {
+  width: 24px;
+  height: 24px;
+  border-radius: 3px;
+  overflow: hidden;
+  flex-shrink: 0;
+  border: 1px solid #dee2e6;
+}
+
+.preview-mini-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.file-placeholder-mini {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f8f9fa;
+  color: #6c757d;
+  font-size: 10px;
+}
+
+.file-info-mini {
+  flex: 1;
+  min-width: 0;
+}
+
+.file-name-mini {
+  font-size: 12px;
+  font-weight: 500;
+  color: #495057;
+  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;
+}
+
+.table-string-list {
+  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;
+}
+
+.string-content {
+  font-size: 12px;
+  color: #495057;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
 .file-list-display {
   display: flex;
   flex-direction: column;
@@ -2836,7 +2993,58 @@ onMounted(() => {
   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;
+  }
+}
+
+@media (max-width: 1200px) {
+  .table-file-list {
+    max-height: 100px;
+  }
+  
+  .table-string-list {
+    max-height: 100px;
+  }
+}
+
 @media (max-width: 768px) {
   .file-name {
     max-width: 120px !important;