diff --git a/src/views/system/SettingManage.vue b/src/views/system/SettingManage.vue index 3b69a68..4a2a1de 100644 --- a/src/views/system/SettingManage.vue +++ b/src/views/system/SettingManage.vue @@ -75,20 +75,20 @@ - + @@ -371,8 +370,8 @@
-
- +
+
@@ -380,7 +379,7 @@
-
+
@@ -397,33 +396,15 @@
+ + 修改图片 + 删除
- - -
- 将文件拖到此处,或点击上传 -
- -
- -
- 从文件库选择 - - - 上传文件 - -
@@ -493,14 +464,7 @@
{{ formatFileSize(fileInfo.size) }}
- - - +
@@ -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 { diff --git a/问题.MD b/问题.MD index 7b3e6c2..c3d5695 100644 --- a/问题.MD +++ b/问题.MD @@ -5,6 +5,20 @@ 2.,需要做相近字排序,比如前缀都是轮播图的展示在一起这样方便后续修改理解意思,还有是运用在同一处地方的可以展示在一起 ✅已完成 +3.配置管理后台:表格table名称列的图标向下与文字保持平行 ✅已完成 + +4.table的值字段浮动不展示tip,并且点击可以打开对应的编辑弹窗 ✅已完成 + +5.将编辑配置的设置值的上传文件按钮进行删除,并且点击编辑修改文件图标打开的还得是imageSelector组件 ✅已完成 + +6.点击编辑配置的的修改图片的按钮,应该打开imageSelector.vue组件进行替换图片 ✅已完成 + +7.配置管理后台:表格table名称列的图标向下与文字保持平行,需要保持在同一行,只需要图标向下移动一点与文字保持水平 ✅已完成 + +8.现在这种不好看,需要图标在左边,文字在右边 ✅已完成 + +9.中间这个值列表,当是文字的时候,只展示一行,在配置管理的table表格中 ✅已完成 + -----------------------------------------------------------------------------------------------需要解决