修复上次恢复时使用了错误的版本(95a9d3e),缺少后续功能: - 长文本配置项预览+弹窗编辑功能 - 长文本编辑弹窗接近全屏显示 - 长文本编辑区域高度问题修复 - 弹窗打开时锁定背景页面滚动 现在使用正确的版本(e45fe81,定时任务提交前的最后正确版本)
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, computed, watch } from 'vue'
|
import { ref, reactive, onMounted, computed, watch } from 'vue'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
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 api from '@/api'
|
||||||
import { useAuthStore } from '@/stores/auth'
|
import { useAuthStore } from '@/stores/auth'
|
||||||
|
|
||||||
@@ -87,6 +87,36 @@ function getOptionLabel(schema, optionValue) {
|
|||||||
return 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 必须是有效的应用
|
// 验证 app_code 必须是有效的应用
|
||||||
const validateAppCode = (rule, value, callback) => {
|
const validateAppCode = (rule, value, callback) => {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
@@ -134,6 +164,15 @@ const batchForm = reactive({
|
|||||||
selected_apps: []
|
selected_apps: []
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 长文本编辑弹窗
|
||||||
|
const textEditDialogVisible = ref(false)
|
||||||
|
const textEditData = reactive({
|
||||||
|
index: -1,
|
||||||
|
label: '',
|
||||||
|
value: '',
|
||||||
|
placeholder: ''
|
||||||
|
})
|
||||||
|
|
||||||
// 获取租户尚未订阅的应用列表
|
// 获取租户尚未订阅的应用列表
|
||||||
const availableAppsForBatch = computed(() => {
|
const availableAppsForBatch = computed(() => {
|
||||||
if (!batchForm.tenant_id) return appList.value
|
if (!batchForm.tenant_id) return appList.value
|
||||||
@@ -677,8 +716,14 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 编辑对话框 -->
|
<!-- 编辑对话框 -->
|
||||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="750px">
|
<el-dialog
|
||||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
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-form-item label="租户" prop="tenant_id">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="form.tenant_id"
|
v-model="form.tenant_id"
|
||||||
@@ -740,13 +785,32 @@ onMounted(() => {
|
|||||||
<span v-if="schema.required" class="required-star">*</span>
|
<span v-if="schema.required" class="required-star">*</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- text 类型 -->
|
<!-- text 类型 - 短文本直接编辑,长文本用弹窗 -->
|
||||||
<template v-if="schema.type === '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
|
<el-input
|
||||||
|
v-else
|
||||||
v-model="form.custom_configs[index].value"
|
v-model="form.custom_configs[index].value"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
:rows="2"
|
:rows="2"
|
||||||
:autosize="{ minRows: 2, maxRows: 12 }"
|
:autosize="{ minRows: 1, maxRows: 4 }"
|
||||||
:placeholder="schema.placeholder || '请输入'"
|
:placeholder="schema.placeholder || '请输入'"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
@@ -1001,6 +1065,35 @@ onMounted(() => {
|
|||||||
<el-button @click="batchTokenDialogVisible = false">关闭</el-button>
|
<el-button @click="batchTokenDialogVisible = false">关闭</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -1134,6 +1227,82 @@ onMounted(() => {
|
|||||||
white-space: nowrap;
|
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 {
|
.token-dialog-content {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user