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

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

src/api/all/agent.ts

@@ -6,15 +6,15 @@ export const getChatAgent = (id: number) => {
 
 // 获取历史聊天
 export const getHistoryChat = (params: any) => {
-  return Http.get(`/v1/agent/getConversations`, { params });
+  return Http.get(`/v1/agent/getConversations`, params);
 };
 // 获取智能体分类
 export const getCategoriesMenus = () => {
   return Http.get(`/v1/agent/getCategoriesMenus`);
 };
 
-export const getAgentList = () => {
+export const getAgentList = (params: any) => {
-  return Http.get(`/v1/agent/getAgentList`);
+  return Http.get(`/v1/agent/getAgentList`, params);
 };
 
 // 获取工作流详情
@@ -26,3 +26,7 @@ export const getWorkFlowInfo = (id: number) => {
 export const executeWorkFlow = (params: any) => {
   return Http.post(`/v1/agent/executeWorkFlow`, params);
 };
+
+export const delAgentMessage = (params: any) => {
+  return Http.post(`/v1/agent/delAgentMessage`, params);
+};

src/main.ts

@@ -14,9 +14,16 @@ import './core';
 import 'uno.css';
 import './mock';
 // import '@/styles/vars.css'; // 优先加载
+import { loadDynamicMenus } from './router/routes/modules/agentDynamic';
 
 const app = createApp(App);
 app.use(store);
 app.use(router);
 app.component('NoData', NoData);
+
+router.isReady().then(async () => {
+  await loadDynamicMenus(router); // 传入 router 实例
+
+  console.log(router,'router')
   app.mount('#app');
+});

src/router/routes/modules/agentDynamic.ts

@@ -0,0 +1,46 @@
+import { getCategoriesMenus } from '@/api/all/agent';
+import type { AppRouteRecordRaw } from '../types';
+import { MENU_GROUP_IDS } from '@/router/constants';
+import IconRepository from '@/assets/svg/icon-repository.svg';
+import { IconBookmark } from '@arco-design/web-vue/es/icon';
+
+export const loadDynamicMenus = async (routerInstance) => {
+  try {
+    const { code, data } = await getCategoriesMenus();
+
+    let router = [
+      {
+        path: '/repository233',
+        name: 'Repository',
+        redirect: 'repository/brandMaterials',
+        meta: {
+          locale: '品牌资产管理',
+          icon: IconRepository,
+          requiresAuth: true,
+          requireLogin: true,
+          roles: ['*'],
+          id: MENU_GROUP_IDS.PROPERTY_ID,
+        },
+        children: [
+          {
+            path: 'brandMaterials',
+            name: 'RepositoryBrandMaterials',
+            meta: {
+              locale: '品牌信息',
+              requiresAuth: true,
+              requireLogin: true,
+              roles: ['*'],
+            },
+            component: () => import('@/views/property-marketing/brands/brand-materials/index.vue'),
+          },
+        ],
+      },
+    ];
+    // 添加子路由到名为 Agent 的父路由下
+    router.forEach(route => {
+      routerInstance.addRoute('Agent', route);
+    });
+  } catch (error) {
+    console.error('Failed to load dynamic menus:', error);
+  }
+};

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

@@ -1,27 +1,39 @@
 <template>
-  <a-layout-sider width="250" style="background: #fff">
+  <div>
     <div class="logo">
-      <img :src="cozeInfo?.icon_url" style="width: 100%; height: 70%" />
+      <img :src="cozeInfo?.icon_url" class="agent-img" />
     </div>
+
     <a-menu mode="inline" theme="light">
       <a-menu-item key="1">
-        <span>{{ cozeInfo.title }}</span>
+        <span class="menu-title">{{ cozeInfo.title }}</span>
         <span style="color: #8492ff; font-size: 12px">{{ cozeInfo.type == 1 ? '智能体' : '对话式' }}</span>
         <span style="float: right">{{ cozeInfo.views }}次使用</span>
+        <p>{{ cozeInfo.description }}</p>
       </a-menu-item>
-      <a-menu-item key="2">历史对话</a-menu-item>
+
-      <a-menu-item key="3">梳理这次舆情的时间线和关键节点</a-menu-item>
+      <div v-for="(item, index) in conversations" :key="index">
-      <a-menu-item key="4">提取事件发展的五阶段脉络</a-menu-item>
+        <a-dropdown-button>
-      <a-menu-item key="5">提炼不同群体的主要观点和态度立场</a-menu-item>
+          <span> {{ item.content }} </span>
-      <a-menu-item key="6">分类汇总正面、中立、负面声音要点</a-menu-item>
+          <template #content>
-      <a-menu-item key="7">分析文本中的情绪类型及占比</a-menu-item>
+            <a-doption>重命名</a-doption>
-      <a-menu-item key="8">识别负面情绪集中的评论内容</a-menu-item>
+            <a-popconfirm
+              content="确认删除对话吗？删除后，聊天记录将不可恢复。"
+              @ok="delMessage(item.chat_id, item.conversation_id)"
+              type="error"
+            >
+              <a-button>删除</a-button>
+            </a-popconfirm>
+          </template>
+        </a-dropdown-button>
+      </div>
     </a-menu>
-  </a-layout-sider>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { defineProps } from 'vue';
+import { delAgentMessage, getHistoryChat } from '@/api/all/agent';
 
 const props = defineProps({
   cozeInfo: {
@@ -33,14 +45,29 @@ const props = defineProps({
     default: '',
   },
 });
-const getHistoryChat = async () => {
+
-  const { code, data } = await getHistoryChat({ botId: props.botId });
+const delMessage = async (chatId, conversationId) => {
+  const { code, data } = await delAgentMessage({ chat_id: chatId, conversation_id: conversationId });
+  if (code === 200) {
     console.log(data, 'data');
-  // 获取历史对话
+  }
+};
+
+const conversations = ref([]);
+
+const getHistoryChatData = async (botId) => {
+  const { code, data } = await getHistoryChat({ bot_id: botId });
+  if (code === 200) {
+    conversations.value = data.list;
+  }
+};
+const truncateText = (text: string, maxLength = 30) => {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength) + '...';
 };
 
 onMounted(() => {
-  getHistoryChat();
+  getHistoryChatData(props.botId);
 });
 </script>
 
@@ -48,4 +75,19 @@ onMounted(() => {
 .logo {
   margin-bottom: 20px;
 }
+
+.menu-title {
+  color: var(--Text-1, #211f24);
+  font-size: 18px;
+  font-family: Alibaba PuHuiTi;
+  font-weight: 400;
+  line-height: 26px;
+  word-wrap: break-word;
+}
+.agent-img {
+  width: 100%;
+  height: 230px;
+  border-radius: 4px;
+}
+
 </style>

src/views/Agent/Chat/index.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="chat-wrap">
-    <span class="span-back"> <icon-left /> 返回空间 </span>
+    <span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
     <div class="chat-contain">
       <a-layout>
-        <HistoryChat :cozeInfo="cozeInfo" :botId="cozeWebSDKConfig?.config?.bot_id" />
+        <a-layout-sider width="15%" style="background: #fff">
+          <HistoryChat
+            v-if="cozeWebSDKConfig?.config?.bot_id"
+            :cozeInfo="cozeInfo"
+            :botId="cozeWebSDKConfig?.config?.bot_id"
+          />
+        </a-layout-sider>
         <a-layout>
           <a-layout-content style="padding: 24px; background: #fff; min-height: 280px">
             <a-card :bordered="false">
@@ -20,8 +26,9 @@
 import { ref, onMounted } from 'vue';
 import { getChatAgent } from '@/api/all/agent';
 import HistoryChat from './components/HistoryChat.vue';
-import ChatBox from './components/ChatBox.vue';
+import { useRouter } from 'vue-router';
-import { useRoute } from 'vue-router';
+const router = useRouter();
+
 // 存储认证令牌
 const authToken = ref('pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg');
 
@@ -40,6 +47,12 @@ const refreshToken = async () => {
   authToken.value = await fetchToken();
 };
 
+const goChatIndex = async () => {
+  router.push({
+    path: '/agent/index',
+  });
+};
+
 // 动态加载脚本函数
 const loadScript = (src) =>
   new Promise((resolve, reject) => {
@@ -51,7 +64,7 @@ const loadScript = (src) =>
   });
 
 const route = useRoute();
-const id = route.params.id;
+const id = route.query.id;
 const query = reactive({
   id: id,
 });
@@ -78,10 +91,10 @@ const initChat = async () => {
   }
   Object.assign(cozeWebSDKConfig, data.cozeConfig);
   Object.assign(cozeInfo, data.info);
+  console.log(cozeWebSDKConfig?.config?.bot_id, 'cozeWebSDKConfig?.config?.bot_id');
   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 = editUi(data);
-  config.ui.width = '900px';
   config.auth.onRefreshToken = function () {
     return 'pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg';
   };
@@ -89,9 +102,28 @@ const initChat = async () => {
   showChatPage();
 };
 
+const editUi = (config) => {
+  let uiConfig = {
+    chatBot: {
+      el: document.getElementById('coze-chat-container'),
+      width: '70%',
+      height: '100%',
+      title: config?.info?.title,
+      isNeedFunctionCallMessage: true,
+    },
+    base: {
+      icon: '',
+      zIndex: 1000,
+    },
+    header: {
+      isShow: true,
+      isNeedClose: false,
+    },
+  };
+  return uiConfig;
+};
+
 const showChatPage = () => {
-  // 显示聊天页面
-  console.log(cozeWebSDK, 'chatClient');
   cozeWebSDK.showChatBot();
 };
 

src/views/Agent/Index/index.vue

@@ -1,33 +1,53 @@
 <template>
   <div class="agent-wrap">
+    <a-input
+      style="float: right; width: 300px"
+      v-model="query.title"
+      @blur="getData()"
+      placeholder="搜索智能体"
+      size="medium"
+      allow-clear
+    >
+      <template #prefix>
+        <icon-search />
+      </template>
+    </a-input>
     <div v-for="(item, index) in list" :key="index">
       <span class="span-title">{{ item.name }}</span>
-      <a-row class="grid-demo" :gutter="24">
+      <a-row class="grid-demo" :gutter="24" v-if="item.agent_products.length > 0">
-        <a-col :span="6" v-if="item.agent_products.length > 0" v-for="(product, k) in item.agent_products">
+        <a-col :span="3" v-for="(product, k) in item.agent_products">
-          <a-card @click="goDetail(product?.agent_system?.type, product?.id)">
+
-            <template #actions>
+          <div class="card-container" @click="goDetail(product?.agent_system?.type, product?.id)">
-              <span class="icon-hover"> {{ product?.views }}次调用 </span>
+            <div class="card-image-container">
-            </template>
+              <img class="card-image" :src="product?.agent_system?.icon_url" />
-            <template #cover>
+            </div>
-              <div>
+            <div class="card-content">
-                <img
+              <div class="card-title">{{ product?.title }}</div>
-                  :style="{ width: '100%', transform: 'translateY(-20px)' }"
+              <div class="card-description">{{ product?.agent_system?.description }}</div>
-                  alt="dessert"
+            </div>
-                  :src="product?.agent_system?.icon_url"
+            <div class="card-footer">
-                />
+              <div
+                :class="['tag', { red: product?.agent_system?.type === 1, blue: product?.agent_system?.type === 2 }]"
+              >
+                <div
+                  :class="[
+                    'tag-text',
+                    { red: product?.agent_system?.type === 1, blue: product?.agent_system?.type === 2 },
+                  ]"
+                >
+                  {{ product?.agent_system?.type == 1 ? '对话式' : '工作流' }}
+                </div>
+              </div>
+              <div class="usage-info">
+                <span class="usage-count">{{ product?.views }}</span>
+                <span class="usage-label">次使用</span>
+              </div>
             </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>
+
+      <NoData v-else />
     </div>
   </div>
 </template>
@@ -40,10 +60,13 @@ const router = useRouter();
 
 const list = ref([]);
 const getData = async () => {
-  const { code, data } = await getAgentList();
+  const { code, data } = await getAgentList(query);
   list.value = data;
 };
 
+const query = reactive({
+  title: '',
+});
 const goDetail = (type: number, id: number) => {
   if (type === 1) {
     router.push({

src/views/Agent/Index/style.scss

@@ -1,6 +1,5 @@
 .agent-wrap {
   padding: 24px;
-  background: #fff;
   border-radius: 4px;
 
   .ant-card-cover img {
@@ -17,4 +16,154 @@
     word-wrap: break-word;
     padding-bottom: 20px;
   }
+
+  .card-container {
+    width: 100%;
+    height: 100%;
+    padding: 12px;
+    background: var(--BG-White, white);
+    overflow: hidden;
+    border-radius: 8px;
+    outline: 1px solid var(--BG-300, #e6e6e8);
+    outline-offset: -1px;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .card-image-container {
+    position: relative;
+    align-self: stretch;
+    height: 120px;
+    background: #ffe9e7; /* 可以替换成变量 */
+    overflow: hidden;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+
+  .card-image {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: -3px;
+    position: absolute;
+  }
+
+  .card-content {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .card-title {
+    color: var(--Text-1, #211f24);
+    font-size: 16px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+
+  .card-description {
+    color: var(--Text-3, #737478);
+    font-size: 14px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 22px;
+    word-wrap: break-word;
+  }
+
+  .card-footer {
+    align-self: stretch;
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .tag {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    height: 20px;
+    padding: 0 8px;
+    border-radius: 2px;
+
+    &.red {
+      color: var(--Functional-Red-6, #f64b31);
+    }
+
+    &.blue {
+      color: var(--Functional-Blue-6, #3366ff);
+    }
+
+  }
+
+  .tag-icon {
+    width: 12px;
+    height: 12px;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 11.5px;
+      height: 10.75px;
+      left: 0.25px;
+      top: 0.63px;
+      background: var(--Functional-Red-6, #f64b31);
+    }
+  }
+
+  .tag-text {
+    font-size: 12px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 20px;
+    word-wrap: break-word;
+
+    &.red {
+      color: var(--Functional-Red-6, #f64b31);
+    }
+
+    &.blue {
+      color: var(--Functional-Blue-6, #3366ff);
+    }
+  }
+
+  .usage-info {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    color: var(--Text-3, #737478);
+    font-size: 12px;
+    font-family: HarmonyOS Sans SC, Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+
+  :deep(.arco-input-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;
+    }
+  }
+
 }

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

@@ -19,7 +19,7 @@
         </a-select>
       </a-form-item>
     </a-form>
-    <a-button type="primary" @click="handleSubmit">提交执行</a-button>
+    <a-button type="primary" :disabled="loading" @click="handleSubmit">提交执行</a-button>
   </div>
 </template>
 <script setup>
@@ -35,6 +35,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(['submit']);
 const formRef = ref(null);

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

@@ -1,7 +1,7 @@
 <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" />
+      <img :src="cozeInfo?.icon_url" class="agent-img" />
     </div>
     <a-menu mode="inline" theme="light">
       <a-menu-item key="1">
@@ -10,12 +10,7 @@
         <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>
@@ -49,4 +44,10 @@ onMounted(() => {
 .logo {
   margin-bottom: 20px;
 }
+
+.agent-img {
+  width: 100%;
+  height: 260px;
+  border-radius: 4px;
+}
 </style>

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

@@ -1,37 +0,0 @@
-<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

@@ -1,31 +0,0 @@
-<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

@@ -1,31 +0,0 @@
-<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

@@ -1,27 +1,21 @@
 <template>
   <div class="chat-wrap">
+    <span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
+
     <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" />
+            <DynamicForm :formFields="formFields" :formData="formData" :loading="loading" @submit="handleSubmit" />
           </a-layout-sider>
           <a-layout-content ref="contentRef" class="content-container">
-            <a-spin :loading="loading" tip="生成中">
+            <a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
-              <div>
+            <div class="work-res">
-                <span class="work-res-span">
+              <span > {{ workFlowRes?.output }}</span>
-                  {{ workFlowRes.output }}
-                </span>
             </div>
-            </a-spin>
           </a-layout-content>
         </a-layout>
       </a-layout>
@@ -33,8 +27,8 @@
 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';
+import { useRoute, useRouter } from 'vue-router';
 
 const formFields = ref([]);
 
@@ -46,7 +40,12 @@ const id = route.query.id;
 const query = reactive({
   id: id,
 });
-
+const router = useRouter();
+const goChatIndex = async () => {
+  router.push({
+    path: '/agent/index',
+  });
+};
 const loading = ref(false);
 
 const cozeInfo = reactive({
@@ -64,6 +63,8 @@ const workFlowRes = reactive({});
 // 提交表单
 const handleSubmit = async (formData) => {
   console.log(formData, 'formData');
+
+  try {
     const param = { form_data: formData, workflow_id: cozeInfo.workflow_id };
     loading.value = true;
     const { code, data } = await executeWorkFlow(param);
@@ -71,6 +72,10 @@ const handleSubmit = async (formData) => {
       Object.assign(workFlowRes, data.data);
       loading.value = false;
     }
+  } catch (error) {
+    console.log(error, 'error');
+    loading.value = false;
+  }
 };
 
 onMounted(() => {

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

@@ -38,4 +38,20 @@
     border-radius: 6px;
     margin-left: 20px;
   }
+
+
+  .spin-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+
+  .work-res {
+    line-height: 26px;
+    font-size: 15px;
+    padding: 20px;
+
+  }
+
 }