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 @@ - - - - {{ truncateFileName(`文件${index + 1}: ${fileId}`, 25) }} - + + + + 共 {{ getFileList(row.data.value).length }} 个文件 + - - - - {{ truncateFileName(item, 25) }} + + + + 共 {{ getStringList(row.data.value).length }} 条字符串 - @@ -138,6 +126,13 @@ {{ formatDate(row.data.CreatedAt) }} + + + {{ row.data.note || '-' }} + {{ row.data.note || '-' }} + - + + @@ -188,16 +183,32 @@ - - - + - {{ truncateFileName(`文件${index + 1}: ${fileId}`, 25) }} - + + + + + + + + + 文件{{ index + 1 }} + + ID: {{ fileId }} + + - @@ -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;