feat：合并dev分支代码

src/api/index.ts

@@ -5,6 +5,7 @@ import * as login from './module/login'
 import * as other from './module/other'
 import * as notificationMessage from './module/notificationMessage'
 import * as system from './module/system'
+import * as AIRobot from './module/AIRobot'
 /**
  * api 对象接口定义
  */
@@ -23,7 +24,8 @@ const apis = generateApiMap({
   ...login,
   ...other,
   ...notificationMessage,
-  ...system
+  ...system,
+  ...AIRobot
 })
 export default {
   ...apis // 取出所有可遍历属性赋值在新的对象上

src/api/module/AIRobot.ts

@@ -0,0 +1,60 @@
+import HttpAxios from '@/utils/axios'
+
+const base = import.meta.env.VITE_API_HOST
+const baseUrl = `${base}/main_new_version.php`
+
+/**
+ * Prompt Configuration数据
+ */
+export const getPromptConfiguration = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'robot',
+      ...params
+    },
+    config
+  )
+}
+/**
+ * 保存Prompt Configuration数据
+ */
+export const SavePromptConfiguration = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'robot',
+      operate: 'save',
+      ...params
+    },
+    config
+  )
+}
+/**
+ * 编辑返回prompt数据
+ */
+export const EditPrompt = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'robot',
+      operate: 'preview_propmpt_witout_save',
+      ...params
+    },
+    config
+  )
+}
+/**
+ * AI测试问题
+ */
+export const PromptAITest = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'robot',
+      operate: 'test_with_ds_claude',
+      ...params
+    },
+    config
+  )
+}

src/auto-imports.d.ts

@@ -3,7 +3,6 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
-// biome-ignore lint: disable
 export {}
 declare global {
   const $api: typeof import('@/api/index')['default']
@@ -69,6 +68,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

src/styles/elementui.scss

@@ -861,4 +861,9 @@ div .prompt-dialog {
 div .prompt-dialog-inner .el-dialog__header {
   padding: 0;
   height: 48px;
+}
+div .prompt-dialog-inner .el-dialog__body {
+  max-height: 720px;
+  overflow-y: scroll;
+  line-height: 21px; 
 }

src/views/AIRobotChat/src/components/AIQuestions.vue

@@ -139,7 +139,6 @@ const generatePages = () => {
     currentPage = { row1: [], row2: [] }
   }
   pages.value = result.filter((p) => p.row1.length > 0)
-  console.log(pages.value)
 }
 onMounted(() => {
   prepareGroups()

src/views/Layout/src/components/Menu/MenuView.vue

@@ -77,7 +77,6 @@ router.afterEach(() => {
 
 // 路由跳转函数
 const changeRouter = (path: any) => {
-  console.log(path)
   if (path == '/PromptConfiguration') {
     emitter.emit('checkPrompt')
   } else {

src/views/PromptConfiguration/src/PromptConfiguration.vue

@@ -4,57 +4,29 @@ import TableConfiguration from './components/TableConfiguration.vue'
 import RespnseConfiguration from './components/RespnseConfiguration.vue'
 import OutputConfiguration from './components/OutputConfiguration.vue'
 import PreviewTesting from './components/PreviewTesting.vue'
+import submitsucessful from './images/icon_success_big@2x.png'
 import moment from 'moment'
 
 const rolename = ref('')
+const tablename = ref('')
 const professionalfield = ref('')
+const tabledescription = ref('')
 const maintasks = ref('')
+const outputvalue = ref('')
+const editid = ref('')
+const prompttextvalue = ref('')
 const TableConfigurationref = ref()
 const RespnseConfigurationref = ref()
+const tableDataList = ref([])
+const stepData = ref([])
+const formatList = ref([])
+const promptValue = ref([])
 const PromptdialogVisible = ref(false)
 const PromptdialogInnerVisible = ref(false)
-const ChangeLogList = ref([
-  {
-    time: '2025-04-23 09:30 Prompt1',
-    person: '提交人：caroline@kln.com',
-    text: '您是专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL1...'
-  },
-  {
-    time: '2025-04-23 09:30 Prompt2',
-    person: '提交人：caroline@kln.com',
-    text: '您是专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL2...'
-  },
-  {
-    time: '2025-04-23 09:30 Prompt3',
-    person: '提交人：caroline@kln.com',
-    text: '您是专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL3...'
-  },
-  {
-    time: '2025-04-23 09:30 Prompt4',
-    person: '提交人：caroline@kln.com',
-    text: '您是专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL4...'
-  },
-  {
-    time: '2025-04-23 09:30 Prompt5',
-    person: '提交人：caroline@kln.com',
-    text: '您是专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL5...'
-  },
-  {
-    time: '2025-04-23 09:30 Prompt6',
-    person: '提交人：caroline@kln.com',
-    text: '您是专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL6...'
-  },
-  {
-    time: '2025-04-23 09:30 Prompt7',
-    person: '提交人：caroline@kln.com',
-    text: '您是专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL7...'
-  },
-  {
-    time: '2025-04-23 09:30 Prompt8',
-    person: '提交人：caroline@kln.com',
-    text: '您是专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL专家顾问专門从事货运代理行业的SQL8...'
-  }
-])
+const testquestion = ref(false)
+const UnableSaveVisible = ref(false)
+const SaveedVisible = ref(false)
+const ChangeLogList = ref([])
 const prompttext = ref('')
 
 const AddTableConfiguration = () => {
@@ -65,23 +37,93 @@ const addstepdata = () => {
   RespnseConfigurationref.value.addstepdata()
 }
 
-const stepData = ref([
-  {
-    description: '分析用户的具体问题，确定是否可以通过现有的表字段进行查询。'
-  },
-  {
-    description: '如果查询可行，根据确定的条件生成可直接执行的SQL语句。'
-  },
-  {
-    description: '如果因为表的字段未覆盖不能查询，说明原因，并联网查询该用户问题，并以KLN公司业务代表的角度回答问题，放在response里，如果回复要使用公司名称，请使用：KLN。'
-  },
-  {
-    description: '如果不能查询是因为问题缺失具体条件，请在response里面反馈让客户输入具体的reference number来进行查询。'
-  },
-  {
-    description: '请使用与用户消息相同的语言回复。如果用户使用中文提问，请用中文回答；如果用户使用英文提问，请使用英文回答；以此类推。始终以用户实际使用的语言为准，不要参考system prompt的语言。'
+const getPromptConfiguration = () => {
+  $api.getPromptConfiguration().then((res) => {
+    if (res.code === 200) {
+      rolename.value = res.data.character_name
+      professionalfield.value = res.data.professional_field
+      maintasks.value = res.data.main_tasks
+      tablename.value = res.data.table_name
+      tabledescription.value = res.data.table_description
+      tableDataList.value = res.data.tableData
+      stepData.value = res.data.stepData
+      formatList.value = res.data.formatList
+      outputvalue.value = res.data.formatListType
+      prompttextvalue.value = res.data.complete_prompt
+      promptValue.value = res.data.prompt_summary
+      editid.value = res.data.id
+      ChangeLogList.value = res.data.prompt_log_record
+      if(rolename.value != '' && professionalfield.value != '' && maintasks.value != '' && professionalfield.value != '' && tableDataList.value.length != 0 && stepData.value.length != 0 &&  formatList.value.length != 0 &&  outputvalue.value != '' && prompttextvalue.value != '') {
+        testquestion.value = false
+      } else {
+        testquestion.value = true
+      }
+    }
+  })
+}
+// 保存
+const missingmessage = ref()
+const SavePromptConfiguration = () => {
+  missingmessage.value = ''
+  if(rolename.value != '' && professionalfield.value != '' && maintasks.value != '' && professionalfield.value != '' && tableDataList.value.length != 0 && stepData.value.length != 0 &&  formatList.value.length != 0 &&  outputvalue.value != '' && prompttextvalue.value != '') {
+    $api.SavePromptConfiguration({
+      role_name: rolename.value,
+      professional_field: professionalfield.value,
+      main_tasks: maintasks.value,
+      table_name: tablename.value,
+      table_description: tabledescription.value,
+      tableDataList: tableDataList.value,
+      stepData: stepData.value,
+      formatList: formatList.value,
+      outputvalue: outputvalue.value,
+      prompttextvalue: prompttextvalue.value,
+      id: editid.value
+    }).then((res) => {
+      if (res.code === 200) {
+        SaveedVisible.value = true
+        setTimeout(() => {
+          window.location.reload()
+        }, 3000)
+      }
+    })
+  } else {
+    if(rolename.value == '' || professionalfield.value == '' || maintasks.value == '') {
+      missingmessage.value += '系统角色配置, '
+    }
+    if(tablename.value == '' || tableDataList.value.length == 0) {
+      missingmessage.value += '表结构配置, '
+    }
+    if(stepData.value.length == 0) {
+      missingmessage.value += '响应规则配置, '
+    }
+    if(formatList.value.length == 0 || outputvalue.value == '') {
+      missingmessage.value += '输出格式配置, '
+    }
+    missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
+    UnableSaveVisible.value = true
   }
-])
+}
+
+const EditPrompt = () => {
+  $api.EditPrompt({
+      role_name: rolename.value,
+      professional_field: professionalfield.value,
+      main_tasks: maintasks.value,
+      table_name: tablename.value,
+      table_description: tabledescription.value,
+      tableDataList: tableDataList.value,
+      stepData: stepData.value,
+      formatList: formatList.value,
+      outputvalue: outputvalue.value,
+      prompttextvalue: prompttextvalue.value,
+      id: editid.value
+    }).then((res) => {
+      if (res.code === 200) {
+        prompttextvalue.value = res.data.complete_prompt
+        promptValue.value = res.data.prompt_summary
+      }
+    })
+}
 
 // 导出为txt
 const exporttxt = () => {
@@ -103,7 +145,6 @@ const exporttxt = () => {
 
 // 查看日志
 const ViewPrompt = (item: any) => {
-  console.log(item)
   PromptdialogInnerVisible.value = true
   prompttext.value = item
 }
@@ -113,6 +154,9 @@ const Backprompt = () => {
   PromptdialogInnerVisible.value = false
 }
 
+onMounted(() => {
+  getPromptConfiguration()
+})
 </script>
 
 <template>
@@ -120,7 +164,7 @@ const Backprompt = () => {
     <div>Prompt Configuration</div>
     <div>
       <el-button class="el-button--default title-button" style="margin-right: 8px;" @click="PromptdialogVisible = true"><span class="font_family icon-icon_dashboard_b icon_dark" style="margin-right: 5px;"></span>变更日志查看</el-button>
-      <el-button class="el-button--main title-button"><span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px;"></span>保存生效</el-button>
+      <el-button class="el-button--main title-button" @click="SavePromptConfiguration"><span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px;"></span>保存生效</el-button>
     </div>
   </div>
   <el-dialog
@@ -166,9 +210,9 @@ const Backprompt = () => {
         <el-button class="el-button--default" @click="exporttxt"><span class="font_family icon-icon_import_b icon_dark" style="margin-right: 5px;" ></span>导出完整日志</el-button>
       </div>
     </template>
-    <div class="diaolog-content">
+    <pre class="diaolog-content">
       {{ prompttext }}
-    </div>
+    </pre>
   </el-dialog>
   <div class="prompt-content">
     <!-- 系统角色设置 -->
@@ -195,16 +239,16 @@ const Backprompt = () => {
       <div class="flex">
         <div style="width: 50%; margin-right: 8px;">
           <div class="little-title"><span class="stars_red">*</span>表名</div>
-          <el-input v-model="rolename" placeholder="创建一个表名" class="input-name"></el-input>
+          <el-input v-model="tablename" placeholder="创建一个表名" class="input-name"></el-input>
         </div>
         <div style="width: 50%;">
           <div class="little-title">表描述</div>
-          <el-input v-model="professionalfield" placeholder="简要描述表的用途" class="input-name"></el-input>
+          <el-input v-model="tabledescription" placeholder="简要描述表的用途" class="input-name"></el-input>
         </div>
       </div>
       <div style="margin-top: 16px;">
         <el-button class="el-button--noborder--configuration prompt-button" @click="AddTableConfiguration">+ 添加字段</el-button>
-        <TableConfiguration ref="TableConfigurationref"></TableConfiguration>
+        <TableConfiguration ref="TableConfigurationref" :tableDataList="tableDataList"></TableConfiguration>
       </div>
     </div>
     <!-- 响应规则配置 -->
@@ -219,17 +263,48 @@ const Backprompt = () => {
     <div class="prompt-border">
       <div class="prompt-title">输出格式配置</div>
       <div style="margin-top: 16px;">
-        <OutputConfiguration ref="OutputConfigurationref"></OutputConfiguration>
+        <OutputConfiguration ref="OutputConfigurationref" :formatList="formatList" :outputvalue="outputvalue"></OutputConfiguration>
       </div>
     </div>
     <!-- 预览与测试 -->
      <div class="propmt-border-colorful">
         <div class="prompt-title" style="padding: 0 14px;">预览与测试</div>
         <div style="margin-top: 16px;">
-          <PreviewTesting ref="PreviewTestingref"></PreviewTesting>
+          <PreviewTesting ref="PreviewTestingref" :prompttext="prompttextvalue" :testquestion="testquestion" :promptValue="promptValue" @handleprompt="EditPrompt"></PreviewTesting>
         </div>
      </div>
-     <div class="propmt-save"><el-button class="el-button--main"><span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px;"></span>保存生效</el-button></div>
+     <div class="propmt-save"><el-button class="el-button--main" @click="SavePromptConfiguration"><span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px;"></span>保存生效</el-button></div>
+     <!-- 保存失败 -->
+    <el-dialog v-model="UnableSaveVisible" width="480">
+      <div>{{ missingmessage }} missing.</div>
+      <div>Please complete all required fields.</div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button
+            class="el-button--danger"
+            @click="UnableSaveVisible = false"
+            style="width: 100px"
+          >
+            OK
+          </el-button>
+        </div>
+      </template>
+      <template #header>
+        <div class="cancel_header">
+          <span class="iconfont_icon iconfont_warning">
+            <svg class="iconfont icon_danger" aria-hidden="true">
+              <use xlink:href="#icon-icon_fail_fill_b"></use>
+            </svg>
+          </span>
+          Unable to Save
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 保存成功 -->
+    <el-dialog v-model="SaveedVisible" width="320" style="height: 212px">
+      <div style="text-align: center"><el-image :src="submitsucessful" style="width: 64px;" /></div>
+      <div style="text-align: center; margin-top: 20px">Saved successfully</div>
+    </el-dialog>
   </div>
 </template>
 
@@ -326,6 +401,8 @@ const Backprompt = () => {
   padding: 16px;
   margin-bottom: 8px;
   border-radius: 6px;
+  line-height: 21px; 
+  white-space: break-spaces;
 }
 .diaolog-flex {
   display: flex;
@@ -380,4 +457,18 @@ const Backprompt = () => {
       color: var(--color-theme);
     }
 }
+.cancel_header {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-neutral-1);
+  display: flex;
+  align-items: center;
+}
+.icon_danger {
+  fill: var(--color-btn-danger-bg);
+}
+.iconfont_warning {
+  display: flex;
+  align-items: center;
+}
 </style>

src/views/PromptConfiguration/src/components/CodeBlock.vue

@@ -86,4 +86,7 @@ pre {
 :deep(.hljs-number) {
   color: #42b0d5;
 }
+:deep(.hljs-literal) {
+  color: #42b0d5;
+}
 </style>

src/views/PromptConfiguration/src/components/OutputConfiguration.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import addimg from '../images/default_add@2x.png'
 
-const outputvalue = ref('JSON')
 const editdialogVisible = ref(false)
 const isEdit = ref(false)
 const UnableSaveVisible = ref(false)
@@ -27,43 +27,35 @@ const Editdescribe = ref('')
 const isSelectedvalue = ref('')
 const Condition = ref('')
 
-const formatList = ref([
-  {
-    name: 'can_query',
-    type: 'Boolean',
-    describe: '是否可以通过表字段查询',
-    selecttype: '必填字段',
-    requirements: ''
-  },
-  {
-    name: 'reason',
-    type: 'String',
-    describe: '分析原因',
-    selecttype: '必填字段',
-    requirements: ''
-  },
-  {
-    name: 'sql',
-    type: 'String',
-    describe: '生成的SQL（如果表字段可查询），生成SQL时必须包含WHERE条件，只保留SQL规范的内容，不需要包含SQL语句之外的其他内容',
-    selecttype: '有条件必填',
-    requirements: ''
-  },
-  {
-    name: 'reference',
-    type: 'String',
-    describe: '给出使用SQL查询结果进行替换的回复用户问题的自然语言模板',
-    selecttype: '有条件必填',
-    requirements: ''
-  },
-  {
-    name: 'response',
-    type: 'String',
-    describe: '步骤3和步骤4的情况才可以在这里赋值，其他时候留空',
-    selecttype: '有条件必填',
-    requirements: ''
+interface TypeItem {
+  name: string
+  type: string
+  describe: string
+  selecttype: string
+  requirements: string
+}
+interface Props {
+  formatList: TypeItem []
+  outputvalue: String
+}
+const props = withDefaults(defineProps<Props>(), {})
+
+const formatList = ref(props.formatList)
+const outputvalue = ref(props.outputvalue)
+watch(
+  () => props.formatList,
+  (current) => {
+    formatList.value = current
+    if(formatList.value == null) {
+      formatList.value = []
+    }
+  }
+)
+watch(
+  () => props.outputvalue,
+  (current) => {
+    outputvalue.value = current
   }
-]
 )
 
 // 编辑字段
@@ -163,6 +155,11 @@ const handleclicksave = () => {
     }
   }
 }
+
+// 删除字段
+const handelclickdelete = (val: any) => {
+  formatList.value.splice(formatList.value.indexOf(val), 1)
+}
 </script>
 <template>
   <div>
@@ -184,6 +181,12 @@ const handleclicksave = () => {
     <div>
       <el-button class="el-button--noborder--configuration prompt-button" @click="handleaddclick">+ 添加字段</el-button>
     </div>
+    <div class="empty" v-if="formatList.length == 0 ">
+      <div>
+        <div><img :src="addimg" width="100" /></div>
+        <el-button @click="handleaddclick" class="el-button--main">+ 添加字段</el-button>
+      </div>
+    </div>
     <div class="output-item" v-for="(item, index) in formatList" :key="index">
       <div class="output-flex">
         <div class="output-flex-left">
@@ -194,7 +197,7 @@ const handleclicksave = () => {
           <el-button class="el-button--blue" style="height: 24px;width: 24px;" @click="handelclickedit(item)">
             <span class="font_family icon-icon_edit_b icon_dark"></span>
           </el-button>
-          <el-button class="el-button--blue" style="height: 24px;width: 24px;">
+          <el-button @click="handelclickdelete(item)" class="el-button--blue" style="height: 24px;width: 24px;">
             <span class="font_family icon-icon_delete_b icon_dark"></span>
           </el-button>
         </div>
@@ -274,6 +277,11 @@ const handleclicksave = () => {
 .stars_red {
   color: var(--color-danger);
 }
+.empty {
+  display: flex;
+  justify-content: center;
+  height: 215px;
+}
 .output-title {
   font-size: 12px;
   font-weight: 400;

src/views/PromptConfiguration/src/components/PreviewTesting.vue

@@ -3,14 +3,43 @@ import icon from '../images/icon_ai_test@2x.png'
 import CodeBlock from './CodeBlock.vue'
 import moment from 'moment'
 
-const promptValue = ref(['您是专門从事货运代理行业的SQL专家顾问...', '表名：{public.kln_ocean}...', '响应规则，请按以下步骤处理...'])
 const PromptdialogVisible = ref(false)
-const testquestion = ref(false)
 const testquestionvalue = ref('')
-const prompttext = ref('您是专门从事货运代理行业的SQL专家顾问，您是专门从事货运代理行业的SQL专家顾问，您是专门从事货运代理行业的SQL专家顾问，您是专门从事货运代理行业的SQL专家顾问您是专门从事货运代理行业的SQL专家顾问，您是专门从事货运代理行业的SQL专家顾问您是专门从事货运代理行业的SQL专家顾问，您是专门从事货运代理行业的SQL专家顾问您是专门从事货运代理行业的SQL专家顾问，您是专门从事货运代理行业的SQL专家顾问您是专门从事货运代理行业的SQL专家顾问，您是专门从事货运代理行业的SQL专家顾问。publickln_ocean}ublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_oceanublic.kln_ocean 响应规则，请按以下步骤处理步骤处理步骤处理步骤处理步骤处理步骤处理步骤处理步骤处理步骤处理步骤处理步骤处理步骤处理步骤处理')
+
+const props = defineProps({
+  prompttext: {
+    type: String
+  },
+  testquestion: {
+    type: Boolean,
+    default: true
+  },
+  promptValue: {
+    type: Array
+  },
+  
+})
+
+const prompttext = ref(props.prompttext)
+const testquestion = ref(props.testquestion)
+watch(
+  () => props.prompttext,
+  (current) => {
+    prompttext.value = current
+  }
+)
+watch(
+  () => props.testquestion,
+  (current) => {
+    testquestion.value = current
+  }
+)
+
+const emits = defineEmits(['handleprompt'])
 
 const handleclickprompt = () => {
   PromptdialogVisible.value = true
+  emits('handleprompt')
 }
 
 // 导出为txt
@@ -31,14 +60,21 @@ const exporttxt = () => {
   URL.revokeObjectURL(link.href)
 }
 
-const unformattedJson = ref({
-  name: "Vue3",
-  features: [{
-    name: "123",
-    text: "156"
-  }],
-  version: 3.2
-})
+const unformattedJson = ref({})
+
+const PromptAITest = (val:any) => {
+  if(testquestion.value == false) {
+    $api.PromptAITest({
+      test_ai_method: val,
+      test_question: testquestionvalue.value,
+      prompt: prompttext.value
+    }).then((res) => {
+      if (res.code === 200) {
+        unformattedJson.value = res.data
+      }
+    })
+  }
+}
 
 </script>
 
@@ -62,14 +98,14 @@ const unformattedJson = ref({
             <el-button class="el-button--default" @click="exporttxt"><span class="font_family icon-icon_import_b icon_dark" style="margin-right: 5px;" ></span>导出完整日志</el-button>
           </div>
         </template>
-        <div class="diaolog-content">
+        <pre class="diaolog-content">
           {{ prompttext }}
-        </div>
+        </pre>
       </el-dialog>
       <div class="preview_content" v-if="promptValue.length == 0">暂无数据</div>
       <div class="preview_content" v-else>
         <div class="preview_content_title">提示词摘要</div>
-        <div class="preview_content_item" v-for="item in promptValue" :key="item">{{ item }}</div>
+        <div class="preview_content_item" v-for="(item, index) in promptValue" :key="index">{{ item }}</div>
       </div>
     </div>
     <div class="test">
@@ -83,10 +119,10 @@ const unformattedJson = ref({
         <el-input type="textarea" v-model="testquestionvalue"></el-input>
       </div>
       <div class="test_flex">
-        <div class="test_button" :class="{opacity: testquestion}">
+        <div class="test_button" :class="{opacity: testquestion}" @click="PromptAITest('DS')">
           <div class="test_button_color"><img :src="icon" width="16px" /> Test with DS</div>
         </div>
-        <div class="test_button" :class="{opacity: testquestion}">
+        <div class="test_button" :class="{opacity: testquestion}" @click="PromptAITest('Claude')">
           <div class="test_button_color"><img :src="icon" width="16px" />Test with Claude</div>
         </div>
       </div>
@@ -94,8 +130,8 @@ const unformattedJson = ref({
         测试结果
       </div>
       <div class="test_result">
-        <!-- 暂无数据 -->
-        <CodeBlock language="json" :raw-code="JSON.stringify(unformattedJson)">
+        <div v-if="Object.keys(unformattedJson).length == 0" class="test_result_text">暂无数据</div>
+        <CodeBlock v-else language="json" :raw-code="JSON.stringify(unformattedJson)">
         </CodeBlock>
       </div>
     </div>
@@ -176,6 +212,9 @@ const unformattedJson = ref({
   color: rgba(240, 241, 243, 0.30);
   border-radius: 6px;
 }
+.test_result_text {
+  color: rgba(240, 241, 243, 0.30);
+}
 .opacity {
   opacity: 0.3;
   cursor: no-drop;
@@ -205,6 +244,7 @@ const unformattedJson = ref({
   max-height: 720px;
   line-height: 21px; 
   overflow-y: scroll;
+  white-space: break-spaces;
 }
 :deep(.el-dialog) {
   min-height: 800px;

src/views/PromptConfiguration/src/components/RespnseConfiguration.vue

@@ -15,6 +15,9 @@ watch(
   () => props.stepDataprops,
   (current) => {
     stepData.value = current
+    if(stepData.value == null) {
+      stepData.value = []
+    }
   }
 )
 

src/views/PromptConfiguration/src/components/TableConfiguration.vue

@@ -24,14 +24,28 @@ const headerCoulumn = ref([
     width: '5%'
   }
 ])
-const tableData = ref([
-  {
-    name: '',
-    type: '',
-    description: '',
-    exampledata: '',
+
+interface TypeItem {
+  name: string
+  type: string
+  description: string
+  exampledata: string
+}
+interface Props {
+  tableDataList: TypeItem []
+}
+const props = withDefaults(defineProps<Props>(), {})
+
+const tableData = ref(props.tableDataList)
+watch(
+  () => props.tableDataList,
+  (current) => {
+    tableData.value = current
+    if(tableData.value == null) {
+      tableData.value = []
+    }
   }
-])
+)
 
 const addNewTableColumn = () => {
   const item = {