fix: 修正租户应用订阅页面恢复版本
All checks were successful
continuous-integration/drone/push Build is passing

修复上次恢复时使用了错误的版本(95a9d3e),缺少后续功能:
- 长文本配置项预览+弹窗编辑功能
- 长文本编辑弹窗接近全屏显示
- 长文本编辑区域高度问题修复
- 弹窗打开时锁定背景页面滚动

现在使用正确的版本(e45fe81,定时任务提交前的最后正确版本)
This commit is contained in:
2026-01-29 17:42:21 +08:00
parent 158481ff75
commit 66e6dc844c

View File

@@ -1,7 +1,7 @@
<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Plus, CopyDocument, Grid } from '@element-plus/icons-vue'
import { Delete, Plus, CopyDocument, Grid, Edit } from '@element-plus/icons-vue'
import api from '@/api'
import { useAuthStore } from '@/stores/auth'
@@ -87,6 +87,36 @@ function getOptionLabel(schema, optionValue) {
return optionValue
}
// 打开长文本编辑弹窗
function openTextEdit(index, schema) {
textEditData.index = index
textEditData.label = schema.label || schema.key
textEditData.value = form.custom_configs[index]?.value || ''
textEditData.placeholder = schema.placeholder || '请输入内容'
textEditDialogVisible.value = true
}
// 保存长文本编辑
function saveTextEdit() {
if (textEditData.index >= 0 && form.custom_configs[textEditData.index]) {
form.custom_configs[textEditData.index].value = textEditData.value
}
textEditDialogVisible.value = false
}
// 获取文本预览截取前N个字符
function getTextPreview(text, maxLength = 80) {
if (!text) return '(未填写)'
if (text.length <= maxLength) return text
return text.slice(0, maxLength) + '...'
}
// 判断文本是否为长文本超过80字符或多行
function isLongText(text) {
if (!text) return false
return text.length > 80 || text.includes('\n')
}
// 验证 app_code 必须是有效的应用
const validateAppCode = (rule, value, callback) => {
if (!value) {
@@ -134,6 +164,15 @@ const batchForm = reactive({
selected_apps: []
})
// 长文本编辑弹窗
const textEditDialogVisible = ref(false)
const textEditData = reactive({
index: -1,
label: '',
value: '',
placeholder: ''
})
// 获取租户尚未订阅的应用列表
const availableAppsForBatch = computed(() => {
if (!batchForm.tenant_id) return appList.value
@@ -677,8 +716,14 @@ onMounted(() => {
</div>
<!-- 编辑对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="750px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="750px"
:lock-scroll="true"
class="config-dialog"
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="config-form">
<el-form-item label="租户" prop="tenant_id">
<el-select
v-model="form.tenant_id"
@@ -740,13 +785,32 @@ onMounted(() => {
<span v-if="schema.required" class="required-star">*</span>
</div>
<!-- text 类型 -->
<!-- text 类型 - 短文本直接编辑长文本用弹窗 -->
<template v-if="schema.type === 'text'">
<!-- 长文本使用预览+弹窗编辑 -->
<div
v-if="isLongText(form.custom_configs[index]?.value) || schema.key?.includes('prompt')"
class="text-preview-container"
>
<div class="text-preview" @click="openTextEdit(index, schema)">
{{ getTextPreview(form.custom_configs[index]?.value, 100) }}
</div>
<el-button
type="primary"
size="small"
@click="openTextEdit(index, schema)"
>
<el-icon><Edit /></el-icon>
编辑
</el-button>
</div>
<!-- 短文本直接编辑 -->
<el-input
v-else
v-model="form.custom_configs[index].value"
type="textarea"
:rows="2"
:autosize="{ minRows: 2, maxRows: 12 }"
:autosize="{ minRows: 1, maxRows: 4 }"
:placeholder="schema.placeholder || '请输入'"
/>
</template>
@@ -1001,6 +1065,35 @@ onMounted(() => {
<el-button @click="batchTokenDialogVisible = false">关闭</el-button>
</template>
</el-dialog>
<!-- 长文本编辑弹窗 - 接近全屏 -->
<el-dialog
v-model="textEditDialogVisible"
:title="`编辑:${textEditData.label}`"
width="90vw"
top="5vh"
:close-on-click-modal="false"
:lock-scroll="true"
:append-to-body="true"
class="text-edit-dialog"
>
<div class="text-edit-wrapper">
<el-input
v-model="textEditData.value"
type="textarea"
:placeholder="textEditData.placeholder"
class="text-edit-textarea"
resize="none"
/>
</div>
<div class="text-edit-stats">
字符数{{ textEditData.value?.length || 0 }}
</div>
<template #footer>
<el-button @click="textEditDialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveTextEdit">保存</el-button>
</template>
</el-dialog>
</div>
</template>
@@ -1134,6 +1227,82 @@ onMounted(() => {
white-space: nowrap;
}
/* 长文本预览样式 */
.text-preview-container {
display: flex;
align-items: flex-start;
gap: 12px;
}
.text-preview {
flex: 1;
padding: 10px 12px;
background: #f5f7fa;
border: 1px solid #dcdfe6;
border-radius: 6px;
color: #606266;
font-size: 13px;
line-height: 1.5;
cursor: pointer;
transition: all 0.2s;
min-height: 40px;
max-height: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-wrap;
word-break: break-all;
}
.text-preview:hover {
border-color: #409eff;
background: #ecf5ff;
}
/* 长文本编辑弹窗样式 - 接近全屏 */
.text-edit-dialog :deep(.el-dialog) {
max-width: 1200px;
margin: 0 auto;
}
.text-edit-dialog :deep(.el-dialog__body) {
padding: 16px 20px;
}
.text-edit-wrapper {
height: calc(70vh - 60px);
}
.text-edit-wrapper :deep(.el-textarea) {
height: 100%;
}
.text-edit-wrapper :deep(.el-textarea__inner) {
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
font-size: 14px;
line-height: 1.7;
height: 100% !important;
resize: none;
padding: 16px;
}
.text-edit-stats {
margin-top: 12px;
text-align: right;
color: #909399;
font-size: 12px;
}
/* 配置对话框优化 */
.config-dialog :deep(.el-dialog__body) {
max-height: 60vh;
overflow-y: auto;
padding-right: 20px;
}
.config-form {
padding-right: 10px;
}
.token-dialog-content {
padding: 0 10px;
}