修复上次恢复时使用了错误的版本(95a9d3e),缺少后续功能: - 长文本配置项预览+弹窗编辑功能 - 长文本编辑弹窗接近全屏显示 - 长文本编辑区域高度问题修复 - 弹窗打开时锁定背景页面滚动 现在使用正确的版本(e45fe81,定时任务提交前的最后正确版本)
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user