shiran/ApiServer-Web-admin_dashboard_pc
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 修改值字段的文字展示样式
Build and Deploy Vue3 / build (push) Successful in 1m18s
Details
Build and Deploy Vue3 / deploy (push) Successful in 56s
Details

Browse Source
This commit is contained in:
2256907009
2026-03-11 18:58:01 +08:00
parent 193db5735f
commit 3e751d4c42
2 changed files with 76 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/system/SettingManage.vue
+62 -51
View File
@@ -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-else-if="row.type === 'setting'">
<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="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 :title="row.data.value">{{ truncateFileName(row.data.value, 15) }}</span>
</span>
<span class="text-value" :title="row.data.value">{{ truncateText(row.data.value, 30) }}</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">
<img :src="fileInfo.localUrl || processImageUrl(fileInfo.url)" :alt="fileInfo.realName" class="preview-image" @click="previewImage(fileInfo.localUrl || fileInfo.url)" @error="handleImageError" />
<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>
@@ -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
: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="openImageSelectorForListItem(index)" :icon="Edit" title="替换文件" />
<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 {