style: 修改值字段的文字展示样式

src/views/system/SettingManage.vue

@@ -75,20 +75,20 @@
               </el-tag>
             </template>
           </el-table-column>
-          <el-table-column label="值" min-width="200" show-overflow-tooltip>
+          <el-table-column label="值" min-width="200">
             <template #default="{ row }">
-              <span v-if="row.type === 'group'">{{ row.data.note || '-' }}</span>
+              <span v-if="row.type === 'group'" style="cursor: default;">{{ row.data.note || '-' }}</span>
-              <span v-else-if="row.type === 'setting'">
+              <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="previewFile(row.data.value)">
+                  <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="handleEditSetting(row.data)" style="cursor: pointer;">
+                    <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>
@@ -97,7 +97,7 @@
                 </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="handleEditSetting(row.data)" style="cursor: pointer;">
+                    <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>
@@ -105,9 +105,8 @@
                   <span v-else>-</span>
                 </span>
                 <span v-else>
-                <span :title="row.data.value">{{ truncateFileName(row.data.value, 25) }}</span>
+                  <span class="text-value" :title="row.data.value">{{ truncateText(row.data.value, 30) }}</span>
-                <span :title="row.data.value">{{ truncateFileName(row.data.value, 15) }}</span>
+                </span>
-              </span>
               </span>
             </template>
           </el-table-column>
@@ -371,8 +370,8 @@
             <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">
+                <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="previewImage(fileInfo.localUrl || fileInfo.url)" @error="handleImageError" />
+                  <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>
@@ -380,7 +379,7 @@
                   </div>
                 </div>
                 <!-- 图片加载失败占位符 -->
-                <div class="file-preview" v-else>
+                <div class="file-preview" v-else @click="openImageSelector" style="cursor: pointer;">
                   <div class="file-placeholder">
                     <el-icon><Document /></el-icon>
                   </div>
@@ -397,33 +396,15 @@
                 
                 <!-- 操作按钮 -->
                 <div class="file-actions">
+                  <el-button type="primary" size="small" @click="openImageSelector" :icon="Picture">
+                    修改图片
+                  </el-button>
                   <el-button type="danger" size="small" @click="clearFile">删除</el-button>
                 </div>
               </div>
             </div>
             <div v-else class="file-upload-options">
               <div class="upload-methods">
-                <el-upload
-                  :auto-upload="false"
-                  :show-file-list="false"
-                  :on-change="handleFileChange"
-                  accept="*/*"
-                  drag
-                  class="file-uploader"
-                >
-                  <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
-                  <div class="el-upload__text">
-                    将文件拖到此处，或<em>点击上传</em>
-                  </div>
-                  <template #tip>
-                    <div class="el-upload__tip">
-                      支持任意文件类型，文件上传后将自动保存并获取文件ID
-                    </div>
-                  </template>
-                </el-upload>
-                
-                <div class="divider">或</div>
-                
                 <el-button 
                   type="primary" 
                   @click="openImageSelector"
@@ -443,16 +424,6 @@
                   <el-button size="small" @click="openImageSelectorForList" :icon="Picture">
                     从文件库选择
                   </el-button>
-                  <el-upload
-                    :auto-upload="false"
-                    :show-file-list="false"
-                    :on-change="handleFormFileListChange"
-                    accept="*/*"
-                  >
-                    <el-button size="small" :icon="UploadFilled">
-                      上传文件
-                    </el-button>
-                  </el-upload>
                 </div>
               </div>
               <div class="file-list-items">
@@ -493,14 +464,7 @@
                     <div class="file-size">{{ formatFileSize(fileInfo.size) }}</div>
                   </div>
                   <div class="file-actions">
-                    <el-upload
+                    <el-button type="text" size="small" @click="openImageSelectorForListItem(index)" :icon="Edit" title="替换文件" />
-                      :auto-upload="false"
-                      :show-file-list="false"
-                      :on-change="(file) => handleFormFileReplace(file, index)"
-                      accept="*/*"
-                    >
-                      <el-button type="text" size="small" :icon="Edit" title="替换文件" />
-                    </el-upload>
                     <el-button type="text" size="small" @click="removeFormEditableFileItem(index)" :icon="Delete" class="danger-btn" title="删除文件" />
                   </div>
                 </div>
@@ -1809,6 +1773,13 @@ const openImageSelectorForList = () => {
   imageSelectorVisible.value = true
 }
 
+// 打开图像选择器（文件列表中的特定项）
+const openImageSelectorForListItem = (index) => {
+  imageSelectorMode.value = 'list-item'
+  currentImageSelectorFileId.value = index
+  imageSelectorVisible.value = true
+}
+
 // 处理图像选择器确认
 const handleImageSelectorConfirm = (selectedFile) => {
   if (!selectedFile || !selectedFile.id) {
@@ -1841,6 +1812,20 @@ const handleImageSelectorConfirm = (selectedFile) => {
     }
     fileListInfo.value.push(newFile)
     updateFileListValue()
+  } else if (imageSelectorMode.value === 'list-item') {
+    // 文件列表中的特定项替换模式
+    const index = currentImageSelectorFileId.value
+    if (fileListInfo.value && fileListInfo.value[index] !== undefined) {
+      fileListInfo.value[index] = {
+        id: selectedFile.id,
+        url: processImageUrl(selectedFile.url || ''),
+        realName: selectedFile.realName || '文件',
+        saveName: selectedFile.realName || 'file',
+        size: selectedFile.size || 0
+      }
+      updateFileListValue()
+      ElMessage.success('文件替换成功')
+    }
   }
   
   imageSelectorVisible.value = false
@@ -1856,6 +1841,12 @@ const getStringList = (value) => {
   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
   
@@ -2107,10 +2098,18 @@ onMounted(() => {
   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 {
@@ -2118,6 +2117,17 @@ onMounted(() => {
   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;
 }
 
 /* 文件预览样式 */
@@ -2382,6 +2392,7 @@ onMounted(() => {
 
   .tree-label {
     font-size: 13px;
+    line-height: 14px; /* 移动端调整行高 */
   }
 
   .tree-icon {

问题.MD

@@ -5,6 +5,20 @@
 
 2.，需要做相近字排序，比如前缀都是轮播图的展示在一起这样方便后续修改理解意思，还有是运用在同一处地方的可以展示在一起 ✅已完成
 
+3.配置管理后台：表格table名称列的图标向下与文字保持平行 ✅已完成
+
+4.table的值字段浮动不展示tip，并且点击可以打开对应的编辑弹窗 ✅已完成
+
+5.将编辑配置的设置值的上传文件按钮进行删除，并且点击编辑修改文件图标打开的还得是imageSelector组件 ✅已完成
+
+6.点击编辑配置的的修改图片的按钮，应该打开imageSelector.vue组件进行替换图片 ✅已完成
+
+7.配置管理后台：表格table名称列的图标向下与文字保持平行，需要保持在同一行，只需要图标向下移动一点与文字保持水平 ✅已完成
+
+8.现在这种不好看，需要图标在左边，文字在右边 ✅已完成
+
+9.中间这个值列表，当是文字的时候，只展示一行，在配置管理的table表格中 ✅已完成
+
 
 -----------------------------------------------------------------------------------------------需要解决