From 0285999cf3c4ac27c328204e2d6e8ba74c8463d2 Mon Sep 17 00:00:00 2001
From: xs <xins@mesnac.com>
Date: Mon, 22 Sep 2025 15:37:19 +0800
Subject: [PATCH] =?UTF-8?q?1.5.6=E5=89=8D=E7=AB=AF=20AI=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E5=A1=AB=E6=8A=A5=E5=AE=8C=E5=96=84=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8A=A5=E5=B7=A5=E6=B5=8B=E8=AF=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=8C=E5=B9=B6=E4=B8=94=E5=A2=9E=E5=8A=A0=E8=AF=AD?=
 =?UTF-8?q?=E9=9F=B3=E7=9A=84=E8=AF=86=E5=88=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  10 +-
 src/api/ai/base/aiFormSetting/index.ts        |  15 +
 src/api/ai/base/aiFormSetting/types.ts        |   5 +
 src/api/ai/skill/aiAssistant/index.ts         |  43 +
 src/api/ai/skill/aiAssistant/types.ts         |  22 +
 src/layout/components/TopBar/aiAssistant.vue  | 833 +++++++++++++-----
 src/views/ai/base/aiFormSetting/index.vue     |   1 +
 .../ai/skill/aiForm/prodPlanFillTest.vue      | 177 ++++
 8 files changed, 904 insertions(+), 202 deletions(-)
 create mode 100644 src/api/ai/skill/aiAssistant/index.ts
 create mode 100644 src/api/ai/skill/aiAssistant/types.ts
 create mode 100644 src/views/ai/skill/aiForm/prodPlanFillTest.vue

diff --git a/src/App.vue b/src/App.vue
index 3775a7c..761d55e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
     <router-view />
   </el-config-provider>
   <PrintView ref="printView" />
-  <ai-assistant ref="aiAssistantRef" :isLeft="false" />
+  <ai-assistant ref="aiAssistantRef" />
   <div class="floatIcon" @click="openAiAssistantMenu">
     <svg-icon class-name="search-icon" icon-class="Ai" />
   </div>
@@ -37,12 +37,16 @@ const openAiAssistantMenu = () => {
 };
 
 </script>
-<style>
+<style lang="less">
 .floatIcon {
   position: fixed;
   top: 50%;
-  right: 0;
+  right: 10px;
   width: 24px;
   height: 24px;
 }
+
+/deep/.el-message {
+  z-index:8006 !important;
+}
 </style>
diff --git a/src/api/ai/base/aiFormSetting/index.ts b/src/api/ai/base/aiFormSetting/index.ts
index d7a458f..601fac0 100644
--- a/src/api/ai/base/aiFormSetting/index.ts
+++ b/src/api/ai/base/aiFormSetting/index.ts
@@ -78,6 +78,7 @@ export function getAiFormSettingList (query) {
 
 
 
+
 // 获取数据源名称
 export const getDataNames = () => {
   return request({
@@ -104,3 +105,17 @@ export const listDbTableColumn = (query: DbTableQuery): AxiosPromise<AiFormSetti
     params: query
   });
 };
+
+
+/**
+ * 查询AI表单设置属性详情列表
+ * @param query
+ * @returns {*}
+ */
+export function getAiFormSettingDetailList (query) {
+  return request({
+    url: '/ai/aiFormSetting/getAiFormSettingDetailList',
+    method: 'get',
+    params: query
+  });
+};
diff --git a/src/api/ai/base/aiFormSetting/types.ts b/src/api/ai/base/aiFormSetting/types.ts
index b44f331..0994366 100644
--- a/src/api/ai/base/aiFormSetting/types.ts
+++ b/src/api/ai/base/aiFormSetting/types.ts
@@ -54,6 +54,11 @@ export interface AiFormSettingVO {
    */
   remark: string;
 
+  /**
+   * AI表单设置属性详情列表
+   */
+  aiFormSettingDetailList: AiFormSettingDetailVO[];
+
 }
 
 export interface AiFormSettingForm extends BaseEntity {
diff --git a/src/api/ai/skill/aiAssistant/index.ts b/src/api/ai/skill/aiAssistant/index.ts
new file mode 100644
index 0000000..9ecdeeb
--- /dev/null
+++ b/src/api/ai/skill/aiAssistant/index.ts
@@ -0,0 +1,43 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { AIFillFormRequestVO } from '@/api/ai/skill/aiAssistant/types';
+import {AiKnowledgeBaseTypeForm} from "@/api/ai/base/aiKnowledgeBaseType/types";
+
+
+
+export const aiFillForm = (data?: AIFillFormRequestVO): AxiosPromise<AIFillFormRequestVO[]> => {
+  return request({
+    url: '/ai/assistant/aiFillForm',
+    method: 'post',
+    data: data,
+    timeout: 1000000
+  });
+};
+
+
+export const asr = (data: any) => {
+  return request({
+    url: '/ai/api/speech/recognize',
+    method: 'post',
+    data: data,
+    timeout: 1000000
+  });
+};
+
+export const uploadFile = (data: any) => {
+  return request({
+    url: '/resource/oss/upload',
+    method: 'post',
+    data: data
+  });
+};
+
+export const recognizeSpeechByUrl = (audioUrl: string) => {
+  return request({
+    url: '/ai/asr/recognizeSpeechByUrl',
+    method: 'post',
+    params: {audioUrl}
+  });
+};
+
+
diff --git a/src/api/ai/skill/aiAssistant/types.ts b/src/api/ai/skill/aiAssistant/types.ts
new file mode 100644
index 0000000..924d2d7
--- /dev/null
+++ b/src/api/ai/skill/aiAssistant/types.ts
@@ -0,0 +1,22 @@
+import {AiFormSettingDetailVO} from "@/api/ai/base/aiFormSetting/types";
+
+export interface AIFillFormRequestVO {
+  /**
+   * AI表单设置ID
+   */
+  formSettingId: number;
+
+
+  /**
+   * 提问的问题（prompt）
+   */
+  naturalLanguageQuery: string;
+
+  /**
+   * AI表单设置属性详情列表
+   */
+  formSettingDetailList: AiFormSettingDetailVO[];
+
+
+}
+
diff --git a/src/layout/components/TopBar/aiAssistant.vue b/src/layout/components/TopBar/aiAssistant.vue
index b9fee4e..9734170 100644
--- a/src/layout/components/TopBar/aiAssistant.vue
+++ b/src/layout/components/TopBar/aiAssistant.vue
@@ -1,25 +1,24 @@
 <template>
   <div v-if="state.isShowSearch" class="ai-float-window ai-float-fullscreen">
     <div class="ai-float-main">
-      <div v-if="props.isLeft" class="ai-float-left">
-        <iframe
-          ref="iframeRef"
-          :src="iframeSrc"
-          class="ai-left-iframe"
-          @load="onIframeLoad"
-        />
+      <div class="ai-float-left" v-if="isShowLeft">
+        <component :is="currentComponent" v-bind="currentProps" v-if="currentComponent"/>
       </div>
-      <div class="ai-float-right" ref="rightPaneRef">
+      <div class="ai-float-right" v-loading="aiLoading">
         <div class="ai-float-header" @mousedown="onDragStart">
           <span>AI智能填报助手</span>
-          <el-icon class="ai-float-close" @click="close"><Close /></el-icon>
+          <el-icon class="ai-float-close" @click="close">
+            <Close/>
+          </el-icon>
         </div>
         <div class="ai-float-form-list ai-float-scroll">
           <div class="ai-float-welcome">👋 欢迎使用AI智能填报助手</div>
           <div class="form-list-title">请选择需要填报的表单：</div>
           <!-- 加载状态 -->
           <div v-if="formsLoading" class="loading-container">
-            <el-icon class="is-loading"><Loading /></el-icon>
+            <el-icon class="is-loading">
+              <Loading/>
+            </el-icon>
             <span>加载表单中...</span>
           </div>
           <!-- 表单列表 -->
@@ -34,7 +33,9 @@
             >
               {{ aiFormSetting.formName }}
             </el-tag>
-            <el-button v-if="aiFormSettingList.length > 5" type="text" class="more-btn" @click="showMore = !showMore">更多</el-button>
+            <el-button v-if="aiFormSettingList.length > 5" type="text" class="more-btn" @click="showMore = !showMore">
+              更多
+            </el-button>
           </div>
           <el-dialog v-model="showMore" title="选择其他表单" width="400px" @close="moreFilterText = ''">
             <el-input
@@ -60,7 +61,8 @@
         </div>
         <!-- 聊天区始终渲染，内容为空时不显示消息 -->
         <div class="ai-float-chat-list" ref="chatListRef">
-          <div v-for="(msg, idx) in chatList" :key="idx" :class="['ai-float-chat-item', msg.from === 'ai' ? 'ai-chat-ai' : 'ai-chat-user']">
+          <div v-for="(msg, idx) in chatList" :key="idx"
+               :class="['ai-float-chat-item', msg.from === 'ai' ? 'ai-chat-ai' : 'ai-chat-user']">
             <template v-if="msg.from === 'ai'">
               <div class="ai-avatar">🤖</div>
               <div class="ai-float-chat-bubble ai-float-chat-bubble-ai">
@@ -70,8 +72,13 @@
                     <div v-for="(list, lidx) in msg.selectLists" :key="lidx" class="ai-select-list-block">
                       <div class="ai-select-list-title">{{ list.title }}</div>
                       <div class="ai-select-options">
-                        <el-button v-for="opt in list.options.slice(0,4)" :key="opt" size="small" @click="() => handleSelectOption(opt)" :type="selectedOption === opt ? 'primary' : 'default'">{{ opt }}</el-button>
-                        <el-button v-if="list.options.length > 4" size="small" type="primary" link @click="() => openSelectDialog(list)">更多</el-button>
+                        <el-button v-for="opt in list.options.slice(0,4)" :key="opt" size="small"
+                                   @click="() => handleSelectOption(opt)"
+                                   :type="selectedOption === opt ? 'primary' : 'default'">{{ opt }}
+                        </el-button>
+                        <el-button v-if="list.options.length > 4" size="small" type="primary" link
+                                   @click="() => openSelectDialog(list)">更多
+                        </el-button>
                       </div>
                     </div>
                   </div>
@@ -97,13 +104,18 @@
               style="margin-bottom: 12px;"
             />
             <div class="ai-select-options">
-              <el-button v-for="opt in filteredSelectDialogOptions" :key="opt" size="small" @click="() => handleSelectOption(opt)" :type="selectedOption === opt ? 'primary' : 'default'">{{ opt }}</el-button>
+              <el-button v-for="opt in filteredSelectDialogOptions" :key="opt" size="small"
+                         @click="() => handleSelectOption(opt)" :type="selectedOption === opt ? 'primary' : 'default'">
+                {{ opt }}
+              </el-button>
             </div>
           </div>
         </el-dialog>
         <div class="ai-float-input-area">
           <div v-if="selectedFormSettingId" class="ai-float-form-info">
-            <div class="form-info-title">当前表单：{{ aiFormSettingList.find(f => f.formSettingId === selectedFormSettingId)?.formName }}</div>
+            <div class="form-info-title">
+              当前表单：{{ aiFormSettingList.find(f => f.formSettingId === selectedFormSettingId)?.formName }}
+            </div>
             <div class="form-info-tip">请根据下方示例填写内容，AI将自动为您智能填报。</div>
             <div class="form-info-example">示例：如"申请10个物料A用于生产线1，计划交付日期为2024-07-01"</div>
           </div>
@@ -129,6 +141,13 @@
               circle
               type="primary"
             />
+            <el-button
+              @click="toggleRecording"
+              :class="{ 'recording': isRecording }"
+              v-loading="audioAsrLoading"
+            >
+              {{ isRecording ? '停止录音' : '开始录音' }}
+            </el-button>
           </div>
         </div>
       </div>
@@ -137,19 +156,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick, shallowRef, watch, getCurrentInstance } from 'vue'
-import { ElMessage } from 'element-plus'
-import { Close, Loading } from '@element-plus/icons-vue'
-import type { ComponentInternalInstance } from 'vue'
+import {ref, reactive, computed, onMounted, onBeforeUnmount, nextTick, shallowRef, watch, getCurrentInstance} from 'vue'
+import {ElMessage} from 'element-plus'
+import {Close, Loading} from '@element-plus/icons-vue'
+import type {ComponentInternalInstance} from 'vue'
+import {getAiFormSettingList, getAiFormSettingDetailList} from '@/api/ai/base/aiFormSetting';
+import {AiFormSettingVO, AiFormSettingDetailVO} from '@/api/ai/base/aiFormSetting/types';
+import {aiFillForm, recognizeSpeechByUrl, uploadFile} from '@/api/ai/skill/aiAssistant';
 import router from "@/router"
 
-import {getAiFormSettingList} from '@/api/ai/base/aiFormSetting';
-import {AiFormSettingVO} from '@/api/ai/base/aiFormSetting/types';
+const {proxy} = getCurrentInstance() as ComponentInternalInstance
 
-const props = defineProps({
-  isLeft: Boolean
-});
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const aiFormSettingList = ref<AiFormSettingVO[]>([])
+const aiFormSettingDetailListMap = ref<Record<number, AiFormSettingDetailVO[]>>({});
+const selectedFormSettingId = ref<number | null>(null)
+const formsLoading = ref(false)
+const isShowLeft = ref(false);
+const aiLoading = ref(false);
 
 // 用reactive对象直接定义state
 const state = reactive({
@@ -158,11 +181,6 @@ const state = reactive({
   menuList: []
 });
 
-
-const aiFormSettingList = ref<AiFormSettingVO[]>([])
-const selectedFormSettingId = ref<number | null>(null)
-const formsLoading = ref(false)
-
 // 搜索弹窗打开
 const openSearch = () => {
   state.menuQuery = '';
@@ -173,15 +191,6 @@ const openSearch = () => {
     });
   });
 };
-// 搜索弹窗关闭
-const closeSearch = () => {
-  state.isShowSearch = false;
-};
-
-// 暴露变量
-defineExpose({
-  openSearch
-});
 
 // 动态生成的表单页面映射
 const formPageMap = ref<Record<number, { loader: () => Promise<any>, props: any }>>({})
@@ -194,7 +203,7 @@ const loadForms = async () => {
     if (res.code === 200) {
       aiFormSettingList.value = res.data || []
       // 动态生成formPageMap
-      // initFormPageMap()
+      initFormPageMap()
     }
   } catch (error) {
     console.error('加载表单数据失败:', error)
@@ -209,20 +218,24 @@ const initFormPageMap = () => {
   const newFormPageMap: Record<number, { loader: () => Promise<any>, props: any }> = {}
 
   aiFormSettingList.value.forEach(form => {
-    // 根据表单的formPath字段动态生成组件路径
-    const componentPath = `../../../views/${form.formPath}.vue`
+    // // 根据表单的formPath字段动态生成组件路径
+    // let componentPath = form.formPath
+    // if(!form.dialogVisibleVariable ||  form.dialogVisibleVariable===''){
+    //   componentPath = '../../../views/'+componentPath;
+    // }else{
+    //   componentPath = "/"+componentPath;
+    // }
     // 创建动态加载器
     const loader = () => {
       try {
-
         // const dd = new URL(`@/views/system/user/index.vue`, import.meta.url).href;
-        // alert("--"+componentPath.replace('@/', '../../../'))
         // return import(`${componentPathUrl}`);
-        // localStorage.setItem("previousRoute", "ai");
-        return import(/* @vite-ignore */ componentPath)
+        if (!form.dialogVisibleVariable || form.dialogVisibleVariable === '') {
+          const componentPath = '../../../views/' + form.formPath;
+          return import(/* @vite-ignore */ componentPath)
+        }
       } catch (error) {
-        console.error(`加载组件失败: ${componentPath}`, error)
-        // 如果加载失败，返回默认组件
+        // console.error(`加载组件失败: ${componentPath}`, error)
         // return import('@/views/ai/skill/aiForm/index.vue')
       }
     }
@@ -230,38 +243,515 @@ const initFormPageMap = () => {
     // 根据表单类型设置不同的props
     const props = getFormProps(form)
 
-    newFormPageMap[form.formSettingId] = { loader, props }
+    newFormPageMap[form.formSettingId] = {loader, props}
   })
 
   formPageMap.value = newFormPageMap
 }
 
-function selectForm(aiFormSetting: AiFormSettingVO) {
-  selectedFormSettingId.value = aiFormSetting.formSettingId
-  console.log('选择表单:', aiFormSetting.formPath)
-}
-
-
 // 根据表单信息生成props
 const getFormProps = (form: AiFormSettingVO) => {
   const baseProps = {
     formSettingId: form.formSettingId,
     formName: form.formName,
     formType: form.formType,
+    dialogVisibleVariable: form.dialogVisibleVariable,
+    formPath: form.formPath,
     userInput: ''
   }
 
   // 根据表单类型添加特定props
   switch (form.formType) {
     case 'system':
-      return { ...baseProps, pageNum: 1, pageSize: 10 }
+      return {...baseProps, pageNum: 1, pageSize: 10}
     case 'ai':
-      return { ...baseProps, aiType: 'form', mode: 'edit' }
+      return {...baseProps, aiType: 'form', mode: 'edit'}
     default:
       return baseProps
   }
 }
 
+const selectForm = async (aiFormSetting: AiFormSettingVO) => {
+  selectedFormSettingId.value = aiFormSetting.formSettingId
+  aiLoading.value = true
+  try {
+    if (!aiFormSettingDetailListMap.value[aiFormSetting.formSettingId]) {
+      const res = await getAiFormSettingDetailList(
+        {formSettingId: aiFormSetting.formSettingId, settingFlag: '1'})
+      if (res.code === 200) {
+        aiFormSettingDetailListMap.value[aiFormSetting.formSettingId] = res.data || []
+      }
+    }
+  } finally {
+    aiLoading.value = false
+  }
+  console.log(aiFormSettingDetailListMap.value[aiFormSetting.formSettingId])
+}
+
+// function selectForm(aiFormSetting: AiFormSettingVO) {
+//   selectedFormSettingId.value = aiFormSetting.formSettingId
+//   if(!aiFormSettingDetailListMap[aiFormSetting.formSettingId]){
+//     const res = await getAiFormSettingDetailList({formSettingId: aiFormSetting.formSettingId})
+//     if (res.code === 200) {
+//       aiFormSettingDetailListMap.value[aiFormSetting.formSettingId] = res.data || []
+//     }
+//   }
+// }
+
+
+const currentComponent = shallowRef(null)
+const currentProps = ref({})
+watch(selectedFormSettingId, async (formSettingId) => {
+  if (formSettingId && formPageMap.value[formSettingId]) {
+    try {
+      if (formPageMap.value[formSettingId].props && formPageMap.value[formSettingId].props.dialogVisibleVariable && formPageMap.value[formSettingId].props.dialogVisibleVariable !== '') {
+        isShowLeft.value = false
+        router.push("/" + formPageMap.value[formSettingId].props.formPath)
+        // proxy.$store.commit('aiFormSettingId', formSettingId)
+        // proxy.$store.commit('aiFormSetting', formPageMap.value[formSettingId])
+      } else {
+        isShowLeft.value = true
+        const mod = await formPageMap.value[formSettingId].loader()
+        console.log(formPageMap.value[formSettingId].props)
+        currentComponent.value = mod.default
+        currentProps.value = {...formPageMap.value[formSettingId].props, userInput: ''}
+      }
+
+
+    } catch (error) {
+      console.error('加载表单组件失败:', error)
+      ElMessage.error('加载表单组件失败')
+      currentComponent.value = null
+      currentProps.value = {}
+    }
+  } else {
+    currentComponent.value = null
+    currentProps.value = {}
+  }
+})
+
+// 暴露变量
+defineExpose({
+  openSearch
+});
+
+
+watch(state, (newVal) => {
+  if (newVal.isShowSearch) {
+    loadForms()
+  }
+});
+
+
+const handleSend = async (selectedText?: string) => {
+  if ((!canSend.value || aiThinking.value) && !selectedText) return
+  const userMsg = selectedText || inputValue.value
+  chatList.value.push({text: userMsg, from: 'user', type: 'text'})
+  scrollToBottom()
+  aiThinking.value = true
+  inputValue.value = 'AI思考中....'
+  aiLoading.value = true
+  console.log(aiFormSettingDetailListMap.value[selectedFormSettingId.value]);
+  try {
+    let params = {
+      naturalLanguageQuery: userMsg,
+      formSettingId: selectedFormSettingId.value,
+      formSettingDetailList: aiFormSettingDetailListMap.value[selectedFormSettingId.value],
+      modelId: 1,
+      platformId: 1
+    }
+
+    // currentProps.value = {completeAmount:10,productionTime:16.6};
+    // return;
+
+    const response = await aiFillForm(params)
+    currentProps.value = response;
+    inputValue.value = ''
+    aiThinking.value = false
+    // 固定AI回复+多个选择列表
+    chatList.value.push({
+      text: '操作成功，请选择相关信息：',
+      from: 'ai',
+      type: 'select',
+      selectLists: [
+        {title: '物料信息', options: ['物料A', '物料B', '物料C', '物料D', '物料E', '物料F']},
+        {title: 'BOM信息', options: ['BOM-001', 'BOM-002', 'BOM-003', 'BOM-004', 'BOM-005']}
+      ]
+    })
+    scrollToBottom()
+
+    console.log(1)
+    console.log(response)
+    console.log(2)
+
+  } catch (error) {
+    proxy?.$modal.msgError(error);
+    console.log("Error:" + error)
+
+  } finally {
+    aiLoading.value = false
+  }
+}
+
+// 录音相关对象
+const isRecording = ref(false);
+let mediaRecorder = null
+let microphoneStream = null
+let audioChunks = []
+let audioContext = null
+const targetSampleRate = 16000 // 目标采样率，可根据后端要求调整
+
+// 状态变量
+const audioAsrLoading = ref(false);
+const isUploading = ref(false)
+const uploadProgress = ref(0)
+const recognitionResult = ref('')
+const recordings = ref([])
+
+const toggleRecording = () => {
+  if (isRecording.value) {
+    stopRecording();
+  } else {
+    startRecording();
+  }
+}
+
+// 开始录音
+async function startRecording() {
+  alert('您的浏览器不支持录音功能1')
+  proxy.$modal.msgError('您的浏览器不支持录音功能')
+  try {
+    // 检查浏览器支持
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+      proxy.$modal.msgError('您的浏览器不支持录音功能')
+      return
+    }
+
+    // 获取用户麦克风权限
+    microphoneStream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        echoCancellation: true,
+        noiseSuppression: true,
+        autoGainControl: true
+      }
+    })
+
+    // 初始化Web Audio API用于后续处理
+    if (!audioContext) {
+      audioContext = new (window.AudioContext)()
+    }
+
+    // 设置MediaRecorder
+    const options = {
+      mimeType: 'audio/webm;codecs=opus' // 优先使用opus编码
+    }
+
+    // 降级处理，确保兼容性
+    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
+      options.mimeType = 'audio/webm'
+      if (!MediaRecorder.isTypeSupported(options.mimeType)) {
+        options.mimeType = 'audio/ogg;codecs=opus'
+        if (!MediaRecorder.isTypeSupported(options.mimeType)) {
+          proxy.$modal.msgError('您的浏览器不支持高质量录音格式')
+          return
+        }
+      }
+    }
+
+    mediaRecorder = new MediaRecorder(microphoneStream, options)
+    audioChunks = []
+
+    // 收集音频数据
+    mediaRecorder.ondataavailable = (event) => {
+      if (event.data.size > 0) {
+        audioChunks.push(event.data)
+      }
+    }
+
+    // 录音开始
+    mediaRecorder.start()
+    isRecording.value = true
+    // addLog('录音已开始')
+
+  } catch (error) {
+    console.error('开始录音失败:', error)
+    // addLog(`开始录音失败: ${error.message}`)
+    stopRecording()
+  }
+}
+
+// 停止录音
+function stopRecording() {
+
+  try {
+    if (!isRecording.value) return
+    // 更新录音状态
+    isRecording.value = false
+    // 停止MediaRecorder
+    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+      mediaRecorder.stop()
+      // 录音停止后的处理
+      mediaRecorder.onstop = async () => {
+        audioAsrLoading.value = true;
+        try {
+          // 关闭麦克风流
+          if (microphoneStream) {
+            microphoneStream.getTracks().forEach(track => track.stop())
+            microphoneStream = null
+          }
+
+          // addLog('录音已停止，正在处理音频...')
+
+          // 将录音数据转换为WAV格式
+          const wavBlob = await convertToWav(audioChunks)
+
+          // 保存录音到历史记录
+          const recordingName = `recording_${new Date().toISOString().replace(/[:.]/g, '-')}.wav`
+          const recordingUrl = URL.createObjectURL(wavBlob)
+          recordings.value.unshift({
+            name: recordingName,
+            url: recordingUrl,
+            file: wavBlob
+          })
+
+          // 限制历史记录数量
+          if (recordings.value.length > 5) {
+            const oldestRecording = recordings.value.pop()
+            URL.revokeObjectURL(oldestRecording.url)
+          }
+
+          // addLog(`音频处理完成，文件大小: ${(wavBlob.size / 1024).toFixed(2)}KB`)
+
+          // 自动上传录音文件
+          await uploadAudioFile(wavBlob, recordingName)
+
+        } catch (error) {
+          console.error('处理录音文件失败:', error)
+          proxy.$modal.msgError('处理录音文件失败，请重试', error)
+          // addLog(`处理录音文件失败: ${error.message}`)
+        }finally{
+
+        }
+      }
+    }
+
+  } catch (error) {
+    console.error('停止录音失败:', error)
+    // addLog(`停止录音失败: ${error.message}`)
+  } finally {
+
+  }
+}
+
+// 将音频数据转换为WAV格式
+async function convertToWav(audioChunks) {
+  // 将音频块合并为单个Blob
+  const audioBlob = new Blob(audioChunks)
+
+  // 读取音频数据并转换为WAV
+  return new Promise((resolve, reject) => {
+    const fileReader = new FileReader()
+    fileReader.onload = async (e) => {
+      try {
+        // 获取ArrayBuffer
+        const arrayBuffer = e.target.result
+
+        // 使用Web Audio API解码音频数据
+        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer)
+
+        // 转换为目标采样率的WAV格式
+        const wavBuffer = await resampleAndConvertToWav(audioBuffer, targetSampleRate)
+
+        resolve(new Blob([wavBuffer], {type: 'audio/wav'}))
+      } catch (error) {
+        reject(error)
+      }
+    }
+    fileReader.onerror = reject
+    fileReader.readAsArrayBuffer(audioBlob)
+  })
+}
+
+// 重采样并转换为WAV格式
+async function resampleAndConvertToWav(audioBuffer, targetRate) {
+  // 获取原始音频数据
+  const channels = audioBuffer.numberOfChannels
+  const sampleRate = audioBuffer.sampleRate
+  const length = audioBuffer.length
+
+  // 计算重采样后的长度
+  const newLength = Math.floor(length * targetRate / sampleRate)
+
+  // 创建目标采样率的AudioContext
+  const offlineContext = new OfflineAudioContext(channels, newLength, targetRate)
+
+  // 创建缓冲区源节点
+  const source = offlineContext.createBufferSource()
+  source.buffer = audioBuffer
+
+  // 连接到输出
+  source.connect(offlineContext.destination)
+
+  // 开始播放
+  source.start()
+
+  // 渲染重采样后的音频
+  const renderedBuffer = await offlineContext.startRendering()
+
+  // 将AudioBuffer转换为WAV格式
+  return encodeWAV(renderedBuffer)
+}
+
+// 将AudioBuffer编码为WAV格式
+function encodeWAV(audioBuffer) {
+  const numberOfChannels = audioBuffer.numberOfChannels
+  const sampleRate = audioBuffer.sampleRate
+  const bitDepth = 16
+
+  // 获取所有声道的数据
+  const channels = []
+  for (let i = 0; i < numberOfChannels; i++) {
+    channels.push(audioBuffer.getChannelData(i))
+  }
+
+  // 计算总样本数
+  const sampleCount = channels[0].length
+  const byteRate = sampleRate * numberOfChannels * bitDepth / 8
+
+  // 创建WAV文件头部
+  const wavHeader = new ArrayBuffer(44)
+  const view = new DataView(wavHeader)
+
+  // RIFF标识符
+  writeString(view, 0, 'RIFF')
+  // 文件大小
+  view.setUint32(4, 36 + sampleCount * numberOfChannels * 2, true)
+  // WAVE标识符
+  writeString(view, 8, 'WAVE')
+  // fmt子块标识符
+  writeString(view, 12, 'fmt ')
+  // fmt子块大小
+  view.setUint32(16, 16, true)
+  // 音频格式（PCM）
+  view.setUint16(20, 1, true)
+  // 声道数
+  view.setUint16(22, numberOfChannels, true)
+  // 采样率
+  view.setUint32(24, sampleRate, true)
+  // 字节率
+  view.setUint32(28, byteRate, true)
+  // 块对齐
+  view.setUint16(32, numberOfChannels * 2, true)
+  // 位深度
+  view.setUint16(34, bitDepth, true)
+  // data子块标识符
+  writeString(view, 36, 'data')
+  // data子块大小
+  view.setUint32(40, sampleCount * numberOfChannels * 2, true)
+
+  // 创建PCM数据
+  const pcmBytes = new ArrayBuffer(wavHeader.byteLength + sampleCount * numberOfChannels * 2)
+  const pcmView = new DataView(pcmBytes)
+
+  // 复制WAV头部
+  for (let i = 0; i < wavHeader.byteLength; i++) {
+    pcmView.setUint8(i, new Uint8Array(wavHeader)[i])
+  }
+
+  // 写入PCM数据
+  let offset = 44
+  for (let i = 0; i < sampleCount; i++) {
+    for (let channel = 0; channel < numberOfChannels; channel++) {
+      const sample = Math.max(-1, Math.min(1, channels[channel][i]))
+      // 将Float32转换为Int16
+      pcmView.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7FFF, true)
+      offset += 2
+    }
+  }
+
+  return pcmBytes
+}
+
+// 写入字符串到DataView
+function writeString(view, offset, string) {
+  for (let i = 0; i < string.length; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i))
+  }
+}
+
+// 上传音频文件
+async function uploadAudioFile(blob, fileName) {
+  try {
+    isUploading.value = true
+    uploadProgress.value = 0
+    recognitionResult.value = ''
+
+    // addLog(`开始上传音频文件: ${fileName}`)
+
+    // 创建FormData对象
+    const formData = new FormData()
+    formData.append('file', blob, fileName)
+
+    const response = await uploadFile(formData);
+    console.log(response)
+
+    // 处理响应
+    if (response.code === 200) {
+      // addLog('音频上传成功，正在识别')
+
+      // alert(response.data.url)
+      const response1 = await recognizeSpeechByUrl(response.data.url);
+      if (response1.code === 200) {
+        console.log("--" + response1);
+        inputValue.value += response1.data.text
+        // recognitionResult.value = response1.data.text || '识别成功，但未返回文本结果'
+        // alert(recognitionResult.value)
+        // addLog('识别成功，结果为: ' + recognitionResult.value)
+      }
+    } else {
+      // addLog(`上传失败，状态码: ${response.status}`)
+    }
+
+  } catch (error) {
+    console.error('上传音频文件失败:', error)
+    proxy.$message.error('上传音频文件失败', error)
+    // addLog(`上传音频文件失败: ${error.message || '未知错误'}`)
+  } finally {
+    isUploading.value = false
+    uploadProgress.value = 0
+  }
+}
+
+
+function handleSend1(selectedText?: string) {
+  if ((!canSend.value || aiThinking.value) && !selectedText) return
+  const userMsg = selectedText || inputValue.value
+  chatList.value.push({text: userMsg, from: 'user', type: 'text'})
+  // 动态传递userInput参数给左侧组件
+  if (currentComponent.value) {
+    currentProps.value = {...currentProps.value, userInput: userMsg}
+  }
+  scrollToBottom()
+  aiThinking.value = true
+  inputValue.value = 'AI思考中....'
+  setTimeout(() => {
+    inputValue.value = ''
+    aiThinking.value = false
+    // 固定AI回复+多个选择列表
+    chatList.value.push({
+      text: '操作成功，请选择相关信息：',
+      from: 'ai',
+      type: 'select',
+      selectLists: [
+        {title: '物料信息', options: ['物料A', '物料B', '物料C', '物料D', '物料E', '物料F']},
+        {title: 'BOM信息', options: ['BOM-001', 'BOM-002', 'BOM-003', 'BOM-004', 'BOM-005']}
+      ]
+    })
+    scrollToBottom()
+  }, 2000)
+}
+
+
 const showMore = ref(false)
 const inputValue = ref('')
 const canSend = computed(() => selectedFormSettingId.value && inputValue.value.trim().length > 0)
@@ -276,13 +766,11 @@ type ChatSelectList = { title: string, options: string[] }
 type ChatMsg = { text: string, from: 'user' | 'ai', type?: 'text' | 'select', selectLists?: ChatSelectList[] }
 const chatList = ref<ChatMsg[]>([])
 const selectDialog = ref(false)
-const selectDialogList = ref<ChatSelectList|null>(null)
+const selectDialogList = ref<ChatSelectList | null>(null)
 const aiThinking = ref(false)
 const chatListRef = ref<HTMLElement | null>(null)
-const rightPaneRef = ref<HTMLElement | null>(null)
 const selectedOption = ref('')
 const iframeRef = ref<HTMLIFrameElement | null>(null)
-const iframeSrc = ref<string>('')
 
 // 新增：AI更多弹窗过滤输入
 const selectDialogFilterText = ref('')
@@ -304,20 +792,17 @@ const floatStyle = reactive({
 
 // 默认显示在最右侧
 onMounted(() => {
-  // 放宽对话框焦点陷阱以允许右侧输入
-  document.addEventListener('focusin', focusTrapBypass, true);
   floatStyle.left = (window.innerWidth - 440) + 'px';
   floatStyle.top = '0px';
   // 加载表单数据
+  // loadForms()
+
 })
 
-
-
-
-
 let drag = false
 let offsetX = 0
 let offsetY = 0
+
 function onDragStart(e: MouseEvent) {
   drag = true
   offsetX = e.clientX - parseInt(floatStyle.left)
@@ -325,6 +810,7 @@ function onDragStart(e: MouseEvent) {
   document.addEventListener('mousemove', onDragging)
   document.addEventListener('mouseup', onDragEnd)
 }
+
 function onDragging(e: MouseEvent) {
   if (!drag) return
   let newLeft = e.clientX - offsetX
@@ -335,31 +821,38 @@ function onDragging(e: MouseEvent) {
   floatStyle.left = newLeft + 'px'
   floatStyle.top = newTop + 'px'
 }
+
 function onDragEnd() {
   drag = false
   document.removeEventListener('mousemove', onDragging)
   document.removeEventListener('mouseup', onDragEnd)
 }
 
-function focusTrapBypass(e: FocusEvent) {
-  const overlay = document.querySelector('.el-overlay') as HTMLElement | null
-  const dialog = overlay?.querySelector('.el-dialog') as HTMLElement | null
-  if (!overlay || !dialog) return
-  const rightPane = rightPaneRef.value
-  if (!rightPane) return
-  // 如果焦点转移到右侧面板内，允许通过
-  if (rightPane.contains(e.target as Node)) {
-    // 取消Element Plus 可能的焦点回滚
-    e.stopPropagation()
-  }
-}
-
 onBeforeUnmount(() => {
   document.removeEventListener('mousemove', onDragging)
   document.removeEventListener('mouseup', onDragEnd)
-  document.removeEventListener('focusin', focusTrapBypass, true)
 })
 
+// 组件卸载时清理资源
+onUnmounted(() => {
+  // 停止MediaRecorder
+  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+    mediaRecorder.stop()
+  }
+
+  // 关闭音频上下文
+  if (audioContext) {
+    audioContext.close()
+    audioContext = null
+  }
+
+  // 释放URL对象
+  recordings.value.forEach(recording => {
+    URL.revokeObjectURL(recording.url)
+  })
+
+
+})
 
 
 function scrollToBottom() {
@@ -370,60 +863,17 @@ function scrollToBottom() {
   })
 }
 
-function onIframeLoad() {
-  // 载入完成后同步一次参数
-  const form = aiFormSettingList.value.find(f => f.formSettingId === selectedFormSettingId.value)
-  if (form) {
-    alert(233333)
-    console.log('iframe 加载完成，开始传参');
-    sendToIframe({ type: 'init', payload:` getFormProps(form)` })
-  }
-}
-
-function sendToIframe(message: any) {
-  const iframeEl = iframeRef.value
-  try {
-    iframeEl?.contentWindow?.postMessage(message, '*')
-  } catch (e) {
-    // 忽略跨域异常
-    console.error('传参失败:', e);
-  }
-}
-
-function handleSend(selectedText?: string) {
-  if ((!canSend.value || aiThinking.value) && !selectedText) return
-  const userMsg = selectedText || inputValue.value
-  chatList.value.push({ text: userMsg, from: 'user', type: 'text' })
-  // 同步用户输入到 iframe 页面
-  sendToIframe({ type: 'userInput', payload: userMsg })
-  scrollToBottom()
-  aiThinking.value = true
-  inputValue.value = 'AI思考中....'
-  setTimeout(() => {
-    inputValue.value = ''
-    aiThinking.value = false
-    // 固定AI回复+多个选择列表
-    chatList.value.push({
-      text: '操作成功，请选择相关信息：',
-      from: 'ai',
-      type: 'select',
-      selectLists: [
-        { title: '物料信息', options: ['物料A', '物料B', '物料C', '物料D', '物料E', '物料F'] },
-        { title: 'BOM信息', options: ['BOM-001', 'BOM-002', 'BOM-003', 'BOM-004', 'BOM-005'] }
-      ]
-    })
-    scrollToBottom()
-  }, 2000)
-}
 
 // 保证所有方法直接在<script setup>中定义
 function handleSelectOption(opt: string) {
   selectedOption.value = opt
 }
+
 function openSelectDialog(list: ChatSelectList) {
   selectDialogList.value = list
   selectDialog.value = true
 }
+
 function formatMsg(text: string) {
   // 转换换行符为<br>，并做简单转义防XSS
   return text
@@ -432,6 +882,7 @@ function formatMsg(text: string) {
     .replace(/>/g, '&gt;')
     .replace(/\n/g, '<br>')
 }
+
 function onInputKeydown(e: KeyboardEvent) {
   if (e.key === 'Enter' && !e.shiftKey) {
     e.preventDefault();
@@ -444,79 +895,33 @@ function close() {
   state.isShowSearch = false
 }
 
+// 搜索弹窗关闭
+const closeSearch = () => {
+  state.isShowSearch = false;
+};
 
 
-
-
-
-
-
-const currentComponent = shallowRef(null)
-const currentProps = ref({})
-
-function buildIframeSrc(form: AiFormSettingVO) {
-  try {
-    const resolved = router.resolve({ path: `/${form.formPath}` })
-    resolved.href += "?ai=true"
-    return resolved.href
-  } catch (e) {
-    return `/${form.formPath}`
-  }
-}
-
-watch(selectedFormSettingId, async (formSettingId) => {
-  const form = aiFormSettingList.value.find(f => f.formSettingId === formSettingId)
-  if (form) {
-    iframeSrc.value = buildIframeSrc(form)
-    // alert(iframeSrc.value)
-    // 同时准备将初始参数 postMessage 给 iframe
-    // 使用 nextTick 确保 iframe 已更新
-    // nextTick(() => {
-    //   sendToIframe({ type: 'init', payload: 'getFormProps(form)' })
-    //   alert(12)
-    // })
-  }
-})
-
-watch(state, (newVal) => {
-  if (newVal.isShowSearch) {
-    loadForms()
-  }
-
-});
 </script>
 
-<style scoped>
+<style scoped lang="less">
+.el-message {
+  z-index:8006 !important;
+}
+
 .ai-float-fullscreen {
   position: fixed;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
-  z-index: 2005;
+  z-index: 7005;
   background: #fff;
   border-radius: 0;
   box-shadow: none;
 }
-/* 让全局弹窗显示在浮窗之上 */
-:deep(.el-overlay) {
-  z-index: 3000 !important;
-}
-:deep(.el-overlay .el-dialog) {
-  z-index: 3001 !important;
-}
-/* 允许遮罩不拦截右侧输入：只有遮罩变为不拦截，弹窗可交互 */
-:deep(.el-overlay) {
-  pointer-events: none;
-}
-:deep(.el-overlay .el-dialog),
-:deep(.el-overlay .el-message-box),
-:deep(.el-overlay .el-drawer),
-:deep(.el-overlay .el-popup) {
-  pointer-events: auto;
-}
+
 .ai-float-window {
-  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
   background: #fff;
   border-radius: 12px;
   padding: 0 0 16px 0;
@@ -525,31 +930,28 @@ watch(state, (newVal) => {
   display: flex;
   flex-direction: column;
   height: 100vh;
-  width: 90vw;
+  width: 60vw;
   right: 0;
   left: auto;
   top: 0;
   position: fixed;
-  z-index: 2005;
+  z-index: 7005;
 }
+
 .ai-float-main {
   display: flex;
   height: 100vh;
 }
+
 .ai-float-left {
   flex: 7 7 0;
   min-width: 400px;
   background: #f7f8fa;
   border-right: 1px solid #e0e7ef;
-  overflow: hidden;
+  overflow: auto;
   height: 100%;
 }
-.ai-left-iframe {
-  width: 100%;
-  height: 100%;
-  border: 0;
-  display: block;
-}
+
 .ai-float-right {
   flex: 3 3 0;
   min-width: 260px;
@@ -557,6 +959,7 @@ watch(state, (newVal) => {
   display: flex;
   flex-direction: column;
 }
+
 .ai-float-header {
   display: flex;
   align-items: center;
@@ -567,47 +970,56 @@ watch(state, (newVal) => {
   cursor: move;
   border-bottom: 1px solid #f0f0f0;
 }
+
 .ai-float-welcome {
   font-size: 16px;
   color: #409eff;
   margin-bottom: 10px;
   font-weight: 500;
 }
+
 .ai-float-close {
   font-size: 20px;
   cursor: pointer;
   color: #888;
   transition: color 0.2s;
 }
+
 .ai-float-close:hover {
   color: #f56c6c;
 }
+
 .ai-float-form-list {
   padding: 16px 24px 0 24px;
   flex-shrink: 0;
   max-height: 220px;
   overflow-y: auto;
 }
+
 .form-list-title {
   font-size: 15px;
   margin-bottom: 8px;
   color: #333;
 }
+
 .form-list {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
 }
+
 .form-tag {
   cursor: pointer;
   margin-bottom: 4px;
 }
+
 .more-btn {
   margin-left: 8px;
   font-size: 13px;
   padding: 0 4px;
 }
+
 .loading-container {
   display: flex;
   align-items: center;
@@ -616,6 +1028,7 @@ watch(state, (newVal) => {
   color: #666;
   gap: 8px;
 }
+
 .ai-float-input-area {
   padding: 6px 24px 0 24px;
   flex-shrink: 0;
@@ -625,42 +1038,50 @@ watch(state, (newVal) => {
   flex-direction: column;
   justify-content: flex-end;
 }
+
 .ai-float-form-info {
   margin-bottom: 8px;
   background: #f6f8fa;
   border-radius: 1px;
   padding: 10px 14px;
 }
+
 .form-info-title {
   font-weight: bold;
   color: #333;
   margin-bottom: 2px;
 }
+
 .form-info-tip {
   color: #666;
   font-size: 13px;
   margin-bottom: 2px;
 }
+
 .form-info-example {
   color: #999;
   font-size: 13px;
 }
+
 .ai-float-input-row {
   display: flex;
   align-items: flex-end;
   gap: 8px;
 }
+
 .ai-float-input {
   flex: 1 1 auto;
 }
+
 .ai-float-send-btn {
   margin-bottom: 4px;
 }
+
 .ai-float-chat-list {
   flex: 1 1 auto;
   margin: 0 24px;
   margin-top: 12px;
-  margin-bottom:20px;
+  margin-bottom: 20px;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -668,14 +1089,17 @@ watch(state, (newVal) => {
   min-height: 0;
   max-height: calc(100vh - 170px - 140px - 32px);
 }
+
 .ai-float-chat-item {
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
 }
+
 .ai-chat-ai {
   justify-content: flex-start;
 }
+
 .ai-avatar {
   width: 32px;
   height: 32px;
@@ -686,35 +1110,39 @@ watch(state, (newVal) => {
   justify-content: center;
   font-size: 20px;
   margin-right: 8px;
-  box-shadow: 0 2px 8px rgba(64,158,255,0.08);
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
 }
+
 .ai-float-chat-bubble {
   background: linear-gradient(135deg, #409eff 0%, #6ec1ff 100%);
   color: #fff;
   border-radius: 20px 20px 4px 24px;
   padding: 12px 22px;
   max-width: 80%;
-  font-size: 16px;
+  font-size: 14px;
   word-break: break-all;
-  box-shadow: 0 4px 16px rgba(64,158,255,0.13);
+  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.13);
   line-height: 1.85;
   min-height: 36px;
   display: inline-block;
-  text-shadow: 0 1px 2px rgba(0,0,0,0.08);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
+
 .ai-float-chat-bubble-ai {
   background: linear-gradient(135deg, #f4f4f4 0%, #e9f0fb 100%);
   color: #333;
   border-radius: 16px 16px 16px 6px;
-  box-shadow: 0 2px 12px rgba(64,158,255,0.10);
+  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.10);
   border: 1px solid #e0e7ef;
 }
+
 .ai-select-lists {
   display: flex;
   flex-direction: column;
   gap: 12px;
   align-items: stretch;
 }
+
 .ai-select-list-block {
   width: 100%;
   text-align: left;
@@ -724,6 +1152,7 @@ watch(state, (newVal) => {
   padding: 0;
   margin: 0;
 }
+
 .ai-select-list-title {
   font-weight: 500;
   color: #333;
@@ -732,6 +1161,7 @@ watch(state, (newVal) => {
   margin: 0;
   padding: 0;
 }
+
 .ai-select-options {
   display: flex;
   flex-direction: column;
@@ -741,6 +1171,7 @@ watch(state, (newVal) => {
   margin: 0;
   padding: 0;
 }
+
 .ai-select-options .el-button {
   width: 100%;
   text-align: left;
@@ -748,20 +1179,24 @@ watch(state, (newVal) => {
   padding-left: 0 !important;
   justify-content: flex-start;
 }
+
 .el-dialog__body .ai-select-title {
   margin-bottom: 8px;
 }
+
 .el-dialog__body .ai-select-options {
   width: 100%;
   justify-content: flex-start;
   gap: 8px;
 }
+
 .ai-float-chat-bubble-user-wrap {
   display: flex;
   align-items: flex-end;
   justify-content: flex-end;
   gap: 8px;
 }
+
 .ai-avatar-user {
   background: linear-gradient(135deg, #e0e7ef 0%, #d0eaff 100%);
   color: #409eff;
diff --git a/src/views/ai/base/aiFormSetting/index.vue b/src/views/ai/base/aiFormSetting/index.vue
index ad9cdf7..2a1f58e 100644
--- a/src/views/ai/base/aiFormSetting/index.vue
+++ b/src/views/ai/base/aiFormSetting/index.vue
@@ -43,6 +43,7 @@
     <!-- 列表展示 -->
     <el-card shadow="never" class="mt-4">
       <el-table v-loading="loading" :data="aiFormSettingList" @selection-change="handleSelectionChange">
+        <el-table-column label="编号" align="center" prop="formSettingId"/>
         <el-table-column label="表名称" align="center" prop="tableName"/>
         <el-table-column label="表单名称" align="center" prop="formName"/>
         <el-table-column label="客户端类型" align="center" prop="clientType">
diff --git a/src/views/ai/skill/aiForm/prodPlanFillTest.vue b/src/views/ai/skill/aiForm/prodPlanFillTest.vue
new file mode 100644
index 0000000..774c8a4
--- /dev/null
+++ b/src/views/ai/skill/aiForm/prodPlanFillTest.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="mes-report-container">
+    <el-card class="report-card">
+      <template #header>
+        <div class="card-header">
+          <span>报工</span>
+        </div>
+      </template>
+
+      <el-form
+        ref="reportForm"
+        :model="formData"
+        :rules="rules"
+        label-width="120px"
+        label-position="left"
+      >
+        <el-form-item label="工单号" prop="planCode">
+          WO20250917001
+        </el-form-item>
+        <el-form-item label="产品名称" prop="materialName">
+          淮阴零排放破碎机控制柜
+        </el-form-item>
+        <el-form-item label="产品规格" prop="materialSpec">
+          淮阴零排放项目（尺寸：H500*W400*D250mm，材质：304不锈钢，本色）
+        </el-form-item>
+        <el-form-item label="计划数量" prop="planAmount">
+          100
+        </el-form-item>
+        <el-form-item label="已完成数量" prop="completeAmount1">
+          75
+        </el-form-item>
+        <el-form-item label="单位" prop="unit">
+          个
+        </el-form-item>
+        <el-form-item label="工序名称" prop="processName">
+          装配
+        </el-form-item>
+        <el-form-item label="计划开始时间" prop="planBeginTime">
+          2025-09-17 09:00:00
+        </el-form-item>
+        <el-form-item label="计划结束时间" prop="planEndTime">
+          2025-12-17 18:00:00
+        </el-form-item>
+
+        <el-divider>报工信息</el-divider>
+        <el-form-item label="报工数量" prop="completeAmount">
+          <el-input-number
+            v-model="formData.completeAmount"
+            :min="1"
+            :max="100000"
+            controls-position="right"
+          />
+        </el-form-item>
+
+        <el-form-item label="工时(分钟)" prop="productionTime">
+          <el-input-number
+            v-model="formData.productionTime"
+            :min="1"
+            :max="1000"
+            controls-position="right"
+          />
+        </el-form-item>
+
+
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+
+
+        <el-form-item>
+          <el-button type="primary" @click="submitForm">提交报工</el-button>
+          <el-button @click="resetForm">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 报工结果展示 -->
+    <el-card v-if="resultData" class="result-card">
+      <template #header>
+        <div class="card-header">
+          <span>报工结果</span>
+        </div>
+      </template>
+      <pre>{{ JSON.stringify(resultData, null, 2) }}</pre>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+
+interface FormData {
+  completeAmount: number;
+  productionTime: number;
+  remark: string;
+}
+
+const props = defineProps<FormData>()
+
+const formData = reactive<FormData>({
+  completeAmount: undefined,
+  productionTime:undefined,
+  remark: '',
+});
+
+// 初始化赋值
+// Object.keys(formData).forEach(key => {
+//   if (props[key] !== undefined) {
+//     formData[key] = props[key]
+//   }
+// })
+
+// 响应props变化
+watch(
+  () => ({ ...props }),
+  (newProps) => {
+    Object.keys(formData).forEach(key => {
+      console.log("---12323-");
+      if (newProps[key] !== undefined) {
+        formData[key] = newProps[key]
+        console.log(newProps[key]);
+      }
+    })
+  },
+  { immediate: true, deep: true }
+)
+
+const processOptions = [
+  { label: '工序A', value: 'processA' },
+  { label: '工序B', value: 'processB' },
+  { label: '工序C', value: 'processC' },
+];
+
+const rules = {
+  completeAmount: [{ required: true, message: '请输入报工数量', trigger: 'blur' }],
+  productionTime: [{ required: true, message: '请输入工时', trigger: 'blur' }],
+};
+
+const resultData = ref(null);
+const reportForm = ref(null);
+
+const submitForm = () => {
+  reportForm.value.validate((valid) => {
+    if (valid) {
+      // 模拟提交
+      resultData.value = {
+        status: 'success',
+        message: '报工成功',
+        data: formData.value,
+      };
+      ElMessage.success('报工提交成功！');
+    } else {
+      ElMessage.error('请填写完整表单！');
+    }
+  });
+};
+
+const resetForm = () => {
+  reportForm.value.resetFields();
+  resultData.value = null;
+};
+</script>
+
+<style scoped>
+.mes-report-container {
+  padding: 20px;
+}
+.report-card,
+.result-card {
+  margin-bottom: 20px;
+}
+.card-header {
+  font-size: 18px;
+  font-weight: bold;
+}
+</style>