From 3c7903078c7059529340525e0407c5512e4af096 Mon Sep 17 00:00:00 2001
From: Admin <admin@ireborn.com.cn>
Date: Wed, 28 Jan 2026 11:05:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E9=95=BF=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E9=85=8D=E7=BD=AE=E9=A1=B9=E6=98=BE=E7=A4=BA=20-=20?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88+=E5=BC=B9=E7=AA=97=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/app-config/index.vue | 148 +++++++++++++++++++++++-
 1 file changed, 143 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/app-config/index.vue b/frontend/src/views/app-config/index.vue
index b95cdff..00318e6 100644
--- a/frontend/src/views/app-config/index.vue
+++ b/frontend/src/views/app-config/index.vue
@@ -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,8 @@ 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" 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 +779,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 +1059,30 @@ onMounted(() => {
         <el-button @click="batchTokenDialogVisible = false">关闭</el-button>
       </template>
     </el-dialog>
+    
+    <!-- 长文本编辑弹窗 -->
+    <el-dialog 
+      v-model="textEditDialogVisible" 
+      :title="`编辑：${textEditData.label}`" 
+      width="800px"
+      :close-on-click-modal="false"
+    >
+      <el-input
+        v-model="textEditData.value"
+        type="textarea"
+        :rows="15"
+        :autosize="{ minRows: 10, maxRows: 25 }"
+        :placeholder="textEditData.placeholder"
+        class="text-edit-textarea"
+      />
+      <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 +1216,62 @@ 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-textarea :deep(.el-textarea__inner) {
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.text-edit-stats {
+  margin-top: 8px;
+  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;
 }