review：【AI 大模型】工作流的编辑功能

src/views/ai/workflow/form/WorkflowDesign.vue

@@ -36,6 +36,7 @@
             <el-input class="w-200px!" v-model="param.value" placeholder="参数值" />
             <el-input class="w-200px!" v-model="param.value" placeholder="参数值" />
             <el-button type="danger" plain :icon="Delete" circle @click="removeParam(index)" />
             <el-button type="danger" plain :icon="Delete" circle @click="removeParam(index)" />
           </div>
           </div>
+          <!-- TODO @lesan：是不是不用添加和删除参数，直接把必填和选填列出来，然后加上参数校验？ -->
           <el-button type="primary" plain @click="addParam">添加参数</el-button>
           <el-button type="primary" plain @click="addParam">添加参数</el-button>
         </div>
         </div>
       </fieldset>
       </fieldset>
@@ -52,9 +53,9 @@
           <div v-else> <el-text type="info">点击运行查看结果</el-text> </div>
           <div v-else> <el-text type="info">点击运行查看结果</el-text> </div>
         </div>
         </div>
       </fieldset>
       </fieldset>
-      <el-button class="mt-20px w-100%" size="large" type="success" @click="goRun"
-        >运行流程</el-button
-      >
+      <el-button class="mt-20px w-100%" size="large" type="success" @click="goRun">
+        运行流程
+      </el-button>
     </el-drawer>
     </el-drawer>
   </div>
   </div>
 </template>
 </template>
@@ -62,6 +63,7 @@
 <script setup lang="ts">
 <script setup lang="ts">
 import Tinyflow from '@/components/Tinyflow/Tinyflow.vue'
 import Tinyflow from '@/components/Tinyflow/Tinyflow.vue'
 import * as WorkflowApi from '@/api/ai/workflow'
 import * as WorkflowApi from '@/api/ai/workflow'
+// TODO @lesan：要不使用 ICon 哪个组件哈
 import { Delete } from '@element-plus/icons-vue'
 import { Delete } from '@element-plus/icons-vue'
 
 
 defineProps<{
 defineProps<{

src/views/ai/workflow/form/index.vue

@@ -59,7 +59,7 @@
         <WorkflowDesign
         <WorkflowDesign
           v-if="currentStep === 1"
           v-if="currentStep === 1"
           v-model="formData"
           v-model="formData"
-          :provider="provider"
+          :provider="llmProvider"
           ref="workflowDesignRef"
           ref="workflowDesignRef"
         />
         />
       </div>
       </div>
@@ -74,6 +74,7 @@ import * as WorkflowApi from '@/api/ai/workflow'
 import BasicInfo from './BasicInfo.vue'
 import BasicInfo from './BasicInfo.vue'
 import WorkflowDesign from './WorkflowDesign.vue'
 import WorkflowDesign from './WorkflowDesign.vue'
 import { ModelApi } from '@/api/ai/model/model'
 import { ModelApi } from '@/api/ai/model/model'
+import { AiModelTypeEnum } from '@/views/ai/utils/constants'
 
 
 const router = useRouter()
 const router = useRouter()
 const { delView } = useTagsViewStore()
 const { delView } = useTagsViewStore()
@@ -104,31 +105,35 @@ const formData: any = ref({
   graph: '',
   graph: '',
   status: CommonStatusEnum.ENABLE
   status: CommonStatusEnum.ENABLE
 })
 })
-// TODO @lesan：待接入
-const provider = ref<any>()
+const llmProvider = ref<any>([])
 const workflowData = ref<any>({})
 const workflowData = ref<any>({})
 provide('workflowData', workflowData)
 provide('workflowData', workflowData)
 
 
 /** 初始化数据 */
 /** 初始化数据 */
 const actionType = route.params.type as string
 const actionType = route.params.type as string
 const initData = async () => {
 const initData = async () => {
+  // 编辑情况下，需要加载工作流配置
   if (actionType === 'update') {
   if (actionType === 'update') {
     const workflowId = route.params.id as string
     const workflowId = route.params.id as string
     formData.value = await WorkflowApi.getWorkflow(workflowId)
     formData.value = await WorkflowApi.getWorkflow(workflowId)
     workflowData.value = JSON.parse(formData.value.graph)
     workflowData.value = JSON.parse(formData.value.graph)
   }
   }
 
 
-  const apiKeys = await ModelApi.getModelSimpleList(1)
-  provider.value = {
+  // 加载模型列表
+  const models = await ModelApi.getModelSimpleList(AiModelTypeEnum.CHAT)
+  llmProvider.value = {
     llm: () =>
     llm: () =>
-      apiKeys.map(({ id, name }) => ({
+      models.map(({ id, name }) => ({
         value: id,
         value: id,
         label: name
         label: name
       })),
       })),
     knowledge: () => [],
     knowledge: () => [],
     internal: () => []
     internal: () => []
   }
   }
+  // TODO @lesan：知识库（可以看下 knowledge）
+  // TODO @lesan：搜索引擎（这个之前有个 pr 搞了，，，可能来接下）
 
 
+  // 设置当前步骤
   currentStep.value = 0
   currentStep.value = 0
 }
 }
 
 
@@ -164,17 +169,17 @@ const handleSave = async () => {
 
 
     // 更新表单数据
     // 更新表单数据
     const data = {
     const data = {
-      ...formData.value
+      ...formData.value,
+      graph: JSON.stringify(workflowData.value)
     }
     }
-
-    data.graph = JSON.stringify(workflowData.value)
-
     if (actionType === 'update') {
     if (actionType === 'update') {
       await WorkflowApi.updateWorkflow(data)
       await WorkflowApi.updateWorkflow(data)
     } else {
     } else {
       await WorkflowApi.createWorkflow(data)
       await WorkflowApi.createWorkflow(data)
     }
     }
 
 
+    // 保存成功，提示并跳转到列表页
+    message.success('保存成功')
     delView(unref(router.currentRoute))
     delView(unref(router.currentRoute))
     await router.push({ name: 'AiWorkflow' })
     await router.push({ name: 'AiWorkflow' })
   } catch (error: any) {
   } catch (error: any) {