feat(agent): 新增智能体应用功能

- 添加智能体列表页面和相关API
- 实现聊天功能，包括历史对话和当前对话
- 新增工作流功能，包括表单提交和结果展示- 优化路由配置，增加智能体相关路由
- 添加全局常量和枚举，用于智能体类型区分

package.json

@@ -29,6 +29,7 @@
     "update": "^0.7.4",
     "vue": "^3.2.45",
     "vue-cropper": "^1.1.4",
+    "vue-draggable-next": "^2.2.1",
     "vue-draggable-plus": "^0.6.0",
     "vue-echarts": "^7.0.3",
     "vue-router": "^4.1.6",

src/api/all/agent.ts

@@ -1,6 +1,28 @@
-// 投放账号计划
 import Http from '@/api';
 // 获取聊天智能体
 export const getChatAgent = (id: number) => {
   return Http.get(`/v1/agent/getChatAgent/${id}`);
 };
+
+// 获取历史聊天
+export const getHistoryChat = (params: any) => {
+  return Http.get(`/v1/agent/getConversations`, { params });
+};
+// 获取智能体分类
+export const getCategoriesMenus = () => {
+  return Http.get(`/v1/agent/getCategoriesMenus`);
+};
+
+export const getAgentList = () => {
+  return Http.get(`/v1/agent/getAgentList`);
+};
+
+// 获取工作流详情
+export const getWorkFlowInfo = (id: number) => {
+  return Http.get(`/v1/agent/getWorkFlowInfo/${id}`);
+};
+
+// 执行工作流
+export const executeWorkFlow = (params: any) => {
+  return Http.post(`/v1/agent/executeWorkFlow`, params);
+};

src/components/_base/navbar/index.vue

@@ -10,7 +10,7 @@ import router from '@/router';
 // import { useRoute } from 'vue-router';
 import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
 // import { appRoutes } from '@/router/routes';
-// import { MENU_LIST } from './constants';
+// import { MENU_LIST } from './AgentConstants.ts';
 
 const sidebarStore = useSidebarStore();
 // const enterpriseStore = useEnterpriseStore();

src/router/constants.ts

@@ -26,4 +26,5 @@ export const MENU_GROUP_IDS = {
   MANAGEMENT_ID: -1, // 管理中心
   PROPERTY_ID: 10, // 资产营销平台
   WORK_BENCH_ID: -99, // 工作台
+  AGENT: 2, // 智能体
 };

src/router/routes/modules/agent.ts

@@ -1,7 +1,3 @@
-/**
- * 智能体应用
- */
-
 import type { AppRouteRecordRaw } from '../types';
 import { MENU_GROUP_IDS } from '@/router/constants';
 
@@ -12,16 +8,46 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     path: '/agent',
     name: 'Agent',
     redirect: 'agent/listData',
-    component: () => import('@/views/Agent/Chat/index.vue'),
     meta: {
       locale: '扣子智能体',
       icon: IconRepository,
       requiresAuth: true,
       requireLogin: true,
       roles: ['*'],
-      id: MENU_GROUP_IDS.PROPERTY_ID,
+      id: MENU_GROUP_IDS.AGENT,
     },
-    children: [],
+    children: [
+      {
+        path: 'index',
+        name: 'AgentListData',
+        component: () => import('@/views/agent/index'),
+        meta: {
+          locale: '智能体列表',
+          requiresAuth: false,
+          requireLogin: true,
+        },
+      },
+      {
+        path: 'chat',
+        name: 'Chat',
+        component: () => import('@/views/agent/chat'),
+        meta: {
+          hideSidebar: true,
+          requiresAuth: false,
+          requireLogin: true,
+        },
+      },
+      {
+        path: 'workFlow',
+        name: 'AgentWorkFlow',
+        component: () => import('@/views/agent/work-flow'),
+        meta: {
+          hideSidebar: true,
+          requiresAuth: false,
+          requireLogin: true,
+        },
+      },
+    ],
   },
 ];
 

src/views/Agent/AgentConstants.ts

@@ -0,0 +1,4 @@
+export enum AGENT_TYPE {
+  AGENT = 1, // 智能体
+  WORKFLLOW = 2, // 工作流
+}

src/views/Agent/Chat/components/CozeChat.vue

@@ -116,7 +116,6 @@ export default {
       }
     };
 
-    // 重试机制
     const retry = async () => {
       error.value = false;
       loading.value = true;
@@ -130,7 +129,6 @@ export default {
       }
     };
 
-    // 组件挂载时初始化
     onMounted(async () => {
       try {
         await loadSDK();
@@ -142,13 +140,11 @@ export default {
       }
     });
 
-    // 组件卸载时清理
     onBeforeUnmount(() => {
       if (chatClient && typeof chatClient.destroy === 'function') {
         chatClient.destroy();
       }
 
-      // 移除我们添加的脚本
       if (scriptLoaded) {
         const scripts = document.querySelectorAll('script[src*="coze.cn"]');
         scripts.forEach((script) => script.remove());

src/views/Agent/Chat/components/HistoryChat.vue

@@ -1,12 +1,13 @@
 <template>
   <a-layout-sider width="250" style="background: #fff">
-    <div class="logo" style="text-align: center; padding: 20px">
+    <div class="logo">
-      <img :src="props?.icon_url" alt="Logo" style="width: 100px" />
+      <img :src="cozeInfo?.icon_url" style="width: 100%; height: 70%" />
     </div>
     <a-menu mode="inline" theme="light">
       <a-menu-item key="1">
-        <span>舆情脉络整理</span>
+        <span>{{ cozeInfo.title }}</span>
-        <span style="color: #8492ff; font-size: 12px">（对话式）</span>
+        <span style="color: #8492ff; font-size: 12px">{{ cozeInfo.type == 1 ? '智能体' : '对话式' }}</span>
+        <span style="float: right">{{ cozeInfo.views }}次使用</span>
       </a-menu-item>
       <a-menu-item key="2">历史对话</a-menu-item>
       <a-menu-item key="3">梳理这次舆情的时间线和关键节点</a-menu-item>
@@ -20,17 +21,27 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { defineProps } from 'vue';
 
-const props = defineComponent({
+const props = defineProps({
-  props: {
+  cozeInfo: {
-    info: {
+    type: Object as () => any,
-      type: Object,
+    default: () => ({}),
-      default: {},
+  },
-    },
+  botId: {
+    type: String,
+    default: '',
   },
 });
-console.log(props.info, 'props.info');
+const getHistoryChat = async () => {
+  const { code, data } = await getHistoryChat({ botId: props.botId });
+  console.log(data, 'data');
+  // 获取历史对话
+};
+
+onMounted(() => {
+  getHistoryChat();
+});
 </script>
 
 <style scoped>

src/views/Agent/Chat/index.vue

@@ -1,5 +1,105 @@
 <template>
-  <div>测试2</div>
+  <div class="chat-wrap">
+    <span class="span-back"> <icon-left /> 返回空间 </span>
+    <div class="chat-contain">
+      <a-layout>
+        <HistoryChat :cozeInfo="cozeInfo" :botId="cozeWebSDKConfig?.config?.bot_id" />
+        <a-layout>
+          <a-layout-content style="padding: 24px; background: #fff; min-height: 280px">
+            <a-card :bordered="false">
+              <div id="coze-chat-container" style="width: 100%; margin-left: 100px"></div>
+            </a-card>
+          </a-layout-content>
+        </a-layout>
+      </a-layout>
+    </div>
+  </div>
 </template>
-<script setup lang="ts"></script>
+
-<style scoped lang="scss"></style>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { getChatAgent } from '@/api/all/agent';
+import HistoryChat from './components/HistoryChat.vue';
+import ChatBox from './components/ChatBox.vue';
+import { useRoute } from 'vue-router';
+// 存储认证令牌
+const authToken = ref('pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg');
+
+// 模拟从API获取token
+const fetchToken = async () => {
+  // 实际开发中应替换为真实的 API 请求
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('pat_' + Math.random().toString(36).substring(2, 15));
+    }, 500);
+  });
+};
+
+// 刷新token
+const refreshToken = async () => {
+  authToken.value = await fetchToken();
+};
+
+// 动态加载脚本函数
+const loadScript = (src) =>
+  new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = src;
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+
+const route = useRoute();
+const id = route.params.id;
+const query = reactive({
+  id: id,
+});
+
+const cozeWebSDKConfig = reactive({
+  config: {},
+  auth: {},
+  userInfo: {},
+  ui: {},
+});
+
+const cozeInfo = reactive({
+  title: '',
+  description: '',
+  icon_url: '',
+});
+
+let cozeWebSDK = null;
+const initChat = async () => {
+  console.log(2323);
+  const { code, data } = await getChatAgent(query.id);
+  if (code != 200) {
+    return false;
+  }
+  Object.assign(cozeWebSDKConfig, data.cozeConfig);
+  Object.assign(cozeInfo, data.info);
+  await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
+  let config = data.cozeConfig;
+  config.ui.chatBot.el = document.getElementById('coze-chat-container');
+  config.ui.width = '900px';
+  config.auth.onRefreshToken = function () {
+    return 'pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg';
+  };
+  cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(config);
+  showChatPage();
+};
+
+const showChatPage = () => {
+  // 显示聊天页面
+  console.log(cozeWebSDK, 'chatClient');
+  cozeWebSDK.showChatBot();
+};
+
+onMounted(() => {
+  initChat();
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/Agent/Chat/style.scss

@@ -0,0 +1,27 @@
+.chat-wrap {
+  .chat-contain {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #2c3e50;
+    margin-top: 24px;
+
+    .span-back {
+      color: var(--Text-2, #3C4043);
+      font-size: 14px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      line-height: 62px;
+      word-wrap: break-word
+    }
+  }
+
+  .span-back {
+    color: var(--Text-2, #3C4043);
+    font-size: 14px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 22px;
+    word-wrap: break-word
+  }
+}

src/views/Agent/Index/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="agent-wrap">
+    <div v-for="(item, index) in list" :key="index">
+      <span class="span-title">{{ item.name }}</span>
+      <a-row class="grid-demo" :gutter="24">
+        <a-col :span="6" v-if="item.agent_products.length > 0" v-for="(product, k) in item.agent_products">
+          <a-card @click="goDetail(product?.agent_system?.type, product?.id)">
+            <template #actions>
+              <span class="icon-hover"> {{ product?.views }}次调用 </span>
+            </template>
+            <template #cover>
+              <div>
+                <img
+                  :style="{ width: '100%', transform: 'translateY(-20px)' }"
+                  alt="dessert"
+                  :src="product?.agent_system?.icon_url"
+                />
+              </div>
+            </template>
+            <a-card-meta :title="product?.agent_system?.title" :description="product?.agent_system?.description">
+              <template #avatar>
+                <div :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }">
+                  <a-typography-text>{{ product?.agent_system?.type == 1 ? '对话式' : '工作流' }}</a-typography-text>
+                </div>
+              </template>
+            </a-card-meta>
+          </a-card>
+        </a-col>
+        <NoData v-else />
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { getAgentList } from '@/api/all/agent';
+
+const router = useRouter();
+
+const list = ref([]);
+const getData = async () => {
+  const { code, data } = await getAgentList();
+  list.value = data;
+};
+
+const goDetail = (type: number, id: number) => {
+  if (type === 1) {
+    router.push({
+      path: '/agent/chat',
+      query: { id: id },
+    });
+  } else if (type === 2) {
+    router.push({
+      path: '/agent/workFlow',
+      query: { id: id },
+    });
+  }
+};
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/Agent/Index/style.scss

@@ -0,0 +1,20 @@
+.agent-wrap {
+  padding: 24px;
+  background: #fff;
+  border-radius: 4px;
+
+  .ant-card-cover img {
+    height: 150px;
+    object-fit: cover;
+  }
+
+  .span-title {
+    color: var(--Text-2, #3C4043);
+    font-size: 16px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 44px;
+    word-wrap: break-word;
+    padding-bottom: 20px;
+  }
+}

src/views/Agent/work-flow/components/DynamicForm.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="form-container">
+    <a-form :model="formData" ref="formRef" layout="vertical">
+      <a-form-item
+        v-for="(field, index) in formFields"
+        :key="index"
+        :label="field.label"
+        :field="field.key"
+        :rules="field.rules"
+      >
+        <a-input v-if="field.type === 'input'" v-model="formData[field.key]" :placeholder="field.placeholder" />
+        <a-textarea v-if="field.type === 'textarea'" v-model="formData[field.key]" :placeholder="field.placeholder" />
+        <ImageUpload v-if="field.type == 'upload'" v-model="formData[field.key]" :limit="1"></ImageUpload>
+
+        <a-select v-else-if="field.type === 'select'" v-model="formData[field.key]" :placeholder="field.placeholder">
+          <a-option v-for="(option, optIndex) in field.options" :key="optIndex" :value="option.value">
+            {{ option.label }}
+          </a-option>
+        </a-select>
+      </a-form-item>
+    </a-form>
+    <a-button type="primary" @click="handleSubmit">提交执行</a-button>
+  </div>
+</template>
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import ImageUpload from '@/components/upload/ImageUpload.vue';
+
+const props = defineProps({
+  formFields: {
+    type: Array,
+    required: true,
+  },
+  formData: {
+    type: Object,
+    required: true,
+  },
+});
+const emit = defineEmits(['submit']);
+const formRef = ref(null);
+const handleSubmit = async () => {
+  const errors = await formRef.value.validate();
+  if (errors) return;
+
+  emit('submit', props.formData);
+};
+</script>
+
+<style scoped lang="scss">
+.form-container {
+  padding: 24px;
+
+  :deep(.arco-input-wrapper),
+  :deep(.arco-textarea-wrapper) {
+    border-radius: 4px;
+    border-color: #d7d7d9;
+    background-color: #fff;
+    height: 35px;
+    width: 400px;
+
+    &:focus-within,
+    &.arco-input-focus {
+      background-color: var(--color-bg-2);
+      border-color: rgb(var(--primary-6));
+      box-shadow: 0 0 0 0 var(--color-primary-light-2);
+    }
+
+    &.arco-textarea-wrapper {
+      height: 60px;
+    }
+  }
+}
+</style>

src/views/Agent/work-flow/components/HistoryChat.vue

@@ -0,0 +1,52 @@
+<template>
+  <a-layout-sider width="250" style="background: #fff">
+    <div class="logo">
+      <img :src="cozeInfo?.icon_url" style="width: 100%; height: 70%; border-radius: 6px" />
+    </div>
+    <a-menu mode="inline" theme="light">
+      <a-menu-item key="1">
+        <span>{{ cozeInfo.title }}</span>
+        <span style="color: #8492ff; font-size: 12px">{{ cozeInfo.type == 1 ? '智能体' : '对话式' }}</span>
+        <span style="float: right">{{ cozeInfo.views }}次使用</span>
+      </a-menu-item>
+      <a-menu-item key="2">历史对话</a-menu-item>
+      <a-menu-item key="3">梳理这次舆情的时间线和关键节点</a-menu-item>
+      <a-menu-item key="4">提取事件发展的五阶段脉络</a-menu-item>
+      <a-menu-item key="5">提炼不同群体的主要观点和态度立场</a-menu-item>
+      <a-menu-item key="6">分类汇总正面、中立、负面声音要点</a-menu-item>
+      <a-menu-item key="7">分析文本中的情绪类型及占比</a-menu-item>
+      <a-menu-item key="8">识别负面情绪集中的评论内容</a-menu-item>
+    </a-menu>
+  </a-layout-sider>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  cozeInfo: {
+    type: Object as () => any,
+    default: () => ({}),
+  },
+  botId: {
+    type: String,
+    default: '',
+  },
+});
+console.log(props.cozeInfo, 'cozeInfo');
+const getHistoryChat = async () => {
+  const { code, data } = await getHistoryChat({ botId: props.botId });
+  console.log(data, 'data');
+  // 获取历史对话
+};
+
+onMounted(() => {
+  getHistoryChat();
+});
+</script>
+
+<style scoped>
+.logo {
+  margin-bottom: 20px;
+}
+</style>

src/views/Agent/work-flow/components/WorkFlow.vue

@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <!-- 聊天容器 -->
+    <div ref="chatContainer" class="coze-chat-container"></div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-state">
+      <div class="spinner"></div>
+      <p>正在加载聊天服务...</p>
+    </div>
+
+    <!-- 错误提示 -->
+    <div v-if="error" class="error-state">
+      <p>⚠️ 聊天服务加载失败</p>
+      <button @click="retry">重新加载</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+export default {
+  props: {
+    botId: {
+      type: String,
+      default: '7522056630889381923',
+    },
+    title: {
+      type: String,
+      default: 'Coze助手',
+    },
+    token: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const chatContainer = ref(null);
+    const loading = ref(true);
+    const error = ref(false);
+    let chatClient = null;
+    let scriptLoaded = false;
+
+    // 加载SDK脚本
+    const loadSDK = () => {
+      return new Promise((resolve, reject) => {
+        // 检查是否已加载
+        if (window.CozeWebSDK) {
+          resolve();
+          return;
+        }
+
+        // 检查是否正在加载
+        if (document.querySelector('script[src*="coze.cn"]')) {
+          const checkInterval = setInterval(() => {
+            if (window.CozeWebSDK) {
+              clearInterval(checkInterval);
+              resolve();
+            }
+          }, 100);
+          return;
+        }
+
+        // 创建新脚本
+        const script = document.createElement('script');
+        script.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js';
+        script.onload = () => {
+          scriptLoaded = true;
+          resolve();
+        };
+        script.onerror = (err) => {
+          console.error('SDK加载失败:', err);
+          reject(new Error('无法加载聊天SDK'));
+        };
+        document.head.appendChild(script);
+      });
+    };
+
+    // 初始化聊天
+    const initChat = () => {
+      try {
+        if (!window.CozeWebSDK) {
+          throw new Error('SDK未加载');
+        }
+
+        chatClient = new window.CozeWebSDK.WebChatClient({
+          container: chatContainer.value,
+          config: {
+            bot_id: props.botId,
+          },
+          componentProps: {
+            title: props.title,
+            // 可选配置
+            // theme: 'light',
+            // welcome_message: '您好！需要什么帮助？',
+            // input_placeholder: '输入您的问题...'
+          },
+          auth: {
+            type: 'token',
+            token: props.token,
+            onRefreshToken: () => {
+              // 实际项目中应从API获取新token
+              console.log('Token刷新');
+              return props.token;
+            },
+          },
+        });
+
+        loading.value = false;
+      } catch (err) {
+        console.error('聊天初始化失败:', err);
+        error.value = true;
+        loading.value = false;
+      }
+    };
+
+    const retry = async () => {
+      error.value = false;
+      loading.value = true;
+      try {
+        await loadSDK();
+        initChat();
+      } catch (err) {
+        console.error('重试失败:', err);
+        error.value = true;
+        loading.value = false;
+      }
+    };
+
+    onMounted(async () => {
+      try {
+        await loadSDK();
+        initChat();
+      } catch (err) {
+        console.error('初始化失败:', err);
+        error.value = true;
+        loading.value = false;
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (chatClient && typeof chatClient.destroy === 'function') {
+        chatClient.destroy();
+      }
+
+      if (scriptLoaded) {
+        const scripts = document.querySelectorAll('script[src*="coze.cn"]');
+        scripts.forEach((script) => script.remove());
+        window.CozeWebSDK = undefined;
+      }
+    });
+
+    return {
+      chatContainer,
+      loading,
+      error,
+      retry,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.coze-chat-container {
+  height: 600px;
+  width: 100%;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  background: #f5f7fa;
+}
+
+.loading-state,
+.error-state {
+  height: 600px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #f9f9f9;
+  border-radius: 12px;
+  border: 1px dashed #ddd;
+}
+
+.spinner {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: #3498db;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin-bottom: 16px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.error-state button {
+  margin-top: 16px;
+  padding: 8px 16px;
+  background: #3498db;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.error-state button:hover {
+  background: #2980b9;
+}
+</style>

src/views/Agent/work-flow/form/FormFieldRenderer.vue

@@ -0,0 +1,37 @@
+<template>
+  <a-form-item
+    :label="field.label"
+    :rules="field.required ? [{ required: true, message: `${field.label}不能为空` }] : []"
+  >
+    <!-- 输入框 -->
+    <a-input
+      v-if="field.type === 'input'"
+      :value="field.value"
+      @input="updateValue($event.target.value)"
+      :placeholder="field.placeholder"
+    />
+
+    <!-- 下拉选择 -->
+    <a-select
+      v-else-if="field.type === 'select'"
+      :value="field.value"
+      @change="updateValue"
+      :placeholder="field.placeholder"
+      :options="field.options"
+    />
+
+    <!-- 其他字段类型... -->
+  </a-form-item>
+</template>
+
+<script setup>
+const props = defineProps({
+  field: Object // 直接传递整个字段对象
+});
+
+// 更新值的方法
+const updateValue = (value) => {
+  // 直接修改父组件传递的字段对象的 value 属性
+  props.field.value = value;
+};
+</script>

src/views/Agent/work-flow/form/InputField.vue

@@ -0,0 +1,31 @@
+<template>
+  <a-form-item :label="label">
+    <a-input v-model:value="localValue" :placeholder="placeholder" />
+  </a-form-item>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '请输入',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+</script>

src/views/Agent/work-flow/form/SelectField.vue

@@ -0,0 +1,31 @@
+<template>
+  <a-form-item :label="field.label" :rules="[{ required: field.required, message: '请选择内容' }]">
+    <a-select v-model:value="value" :placeholder="field.placeholder">
+      <a-select-option v-for="option in field.options" :key="option.value" :value="option.value">
+        {{ option.label }}
+      </a-select-option>
+    </a-select>
+  </a-form-item>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  field: {
+    type: Object,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+</script>

src/views/Agent/work-flow/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="chat-wrap">
+    <div class="chat-contain">
+      <a-layout>
+        <a-layout-header>
+          <div>
+            <span > <icon-left /> 返回空间 </span>
+          </div>
+        </a-layout-header>
+        <a-layout>
+          <a-layout-sider width="20%">
+            <HistoryChat :cozeInfo="cozeInfo" />
+          </a-layout-sider>
+          <a-layout-sider class="layout-sider" width="17%">
+            <DynamicForm :formFields="formFields" :formData="formData" @submit="handleSubmit" />
+          </a-layout-sider>
+          <a-layout-content ref="contentRef" class="content-container">
+            <a-spin :loading="loading" tip="生成中">
+              <div>
+                <span class="work-res-span">
+                  {{ workFlowRes.output }}
+                </span>
+              </div>
+            </a-spin>
+          </a-layout-content>
+        </a-layout>
+      </a-layout>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import HistoryChat from './components/historyChat.vue';
+import { executeWorkFlow, getWorkFlowInfo } from '@/api/all/agent';
+import { useRoute } from 'vue-router';
+import DynamicForm from './components/DynamicForm.vue';
+
+const formFields = ref([]);
+
+// 表单数据对象（动态生成初始值）
+const formData = ref({});
+
+const route = useRoute();
+const id = route.query.id;
+const query = reactive({
+  id: id,
+});
+
+const loading = ref(false);
+
+const cozeInfo = reactive({
+  title: '',
+  description: '',
+  icon_url: '',
+  workflow_id: '',
+});
+const getData = async () => {
+  const { code, data } = await getWorkFlowInfo(query.id);
+  Object.assign(cozeInfo, data.info);
+  formFields.value = data.form_config;
+};
+const workFlowRes = reactive({});
+// 提交表单
+const handleSubmit = async (formData) => {
+  console.log(formData, 'formData');
+  const param = { form_data: formData, workflow_id: cozeInfo.workflow_id };
+  loading.value = true;
+  const { code, data } = await executeWorkFlow(param);
+  if (code === 200) {
+    Object.assign(workFlowRes, data.data);
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/Agent/work-flow/style.scss

@@ -0,0 +1,41 @@
+.chat-wrap {
+  .chat-contain {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #2c3e50;
+    margin-top: 24px;
+
+    .span-back {
+      color: var(--Text-2, #3C4043);
+      font-size: 14px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      line-height: 62px;
+      word-wrap: break-word
+    }
+  }
+
+  .span-back {
+    color: var(--Text-2, #3C4043);
+    font-size: 14px;
+    font-family: Alibaba PuHuiTi;
+    line-height: 22px;
+    word-wrap: break-word
+  }
+
+  .content-container {
+    width: 40%;
+    background-color: #fff;
+  }
+
+  .work-res-span {
+    padding: 24px;
+    line-height: 34px;
+  }
+
+  .layout-sider{
+    border-radius: 6px;
+    margin-left: 20px;
+  }
+}