From ad23807ec1ddaf8067fc54a604627a40aeca08c9 Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期二, 06 八月 2024 15:09:03 +0800
Subject: [PATCH] 智能体配置页面修改

---
 src/views/dmx/IntelligentAgent/index.vue |  184 +++++++++++++++++++++++++++------------------
 1 files changed, 109 insertions(+), 75 deletions(-)

diff --git a/src/views/dmx/IntelligentAgent/index.vue b/src/views/dmx/IntelligentAgent/index.vue
index fd06fda..86b52ec 100644
--- a/src/views/dmx/IntelligentAgent/index.vue
+++ b/src/views/dmx/IntelligentAgent/index.vue
@@ -4,80 +4,106 @@
     <a-row :gutter="20" align="stretch">
       <a-col :span="24">
         <a-card class="general-card" :title="$t('鏅鸿兘浣撶鐞�')">
-          <div style="display: flex;justify-content: right;">
+          <div style="display: flex; justify-content: right">
             <a-input-search
               :placeholder="$t('cardList.searchInput.placeholder')"
-              style="width: 240px;"
+              style="width: 240px"
               @change="queryList"
             />
+            <agent></agent>
           </div>
           <a-divider style="margin: 10px 0" />
           <a-row justify="space-between">
             <a-col :span="24">
-              <div style="display: flex; flex-wrap: wrap;">
-                <div class="card-wrap" style="cursor: pointer;" @click="handleAdd">
-                  <a-card :bordered="false" hoverable >
-                    <div style="margin-top: 30px;text-align: center">
-                      <a-avatar style="background: #3370ff;">
-                        <icon-plus />
-                      </a-avatar>
-                    </div>
-                    <div class="arco-card-body-content">
-                      <div style="text-align: center;margin-top: 10px">
-                        鏂板缓鏅鸿兘浣�
-                      </div>
-                      <div style="text-align:center;margin-top: 10px;font-size: 12px;color: #999999">
-                        閫氳繃鎻忚堪瑙掕壊鍜屼换鍔℃潵鍒涘缓浣犵殑鏅鸿兘浣�<br>
-                        鏅鸿兘浣撳彲浠ヨ皟鐢ㄥ涓伐浣滄祦鍜屽伐鍏�
-                      </div>
-                    </div>
-                    <add-agent ref="addAgents"></add-agent>
-<!--                    <div style="position: absolute; bottom: 1rem; right: 1rem;">-->
-<!--                      <a-space>-->
-<!--                      </a-space>-->
+              <div style="display: flex; flex-wrap: wrap">
+<!--                <div-->
+<!--                  class="card-wrap"-->
+<!--                  style="cursor: pointer"-->
+<!--                  @click="handleAdd"-->
+<!--                >-->
+<!--                  <a-card :bordered="false" hoverable>-->
+<!--                    <div style="margin-top: 30px; text-align: center">-->
+<!--                      <a-avatar style="background: #3370ff">-->
+<!--                        <icon-plus />-->
+<!--                      </a-avatar>-->
 <!--                    </div>-->
-                  </a-card>
-                </div>
-                <div class="card-wrap"    v-for="(item, index) of agentList" :key="item.id">
-                  <a-card :bordered="false" hoverable >
+<!--                    <div class="arco-card-body-content">-->
+<!--                      <div style="text-align: center; margin-top: 10px">-->
+<!--                        鏂板缓鏅鸿兘浣�-->
+<!--                      </div>-->
+<!--                      <div-->
+<!--                        style="-->
+<!--                          text-align: center;-->
+<!--                          margin-top: 10px;-->
+<!--                          font-size: 12px;-->
+<!--                          color: #999999;-->
+<!--                        "-->
+<!--                      >-->
+<!--                        閫氳繃鎻忚堪瑙掕壊鍜屼换鍔℃潵鍒涘缓浣犵殑鏅鸿兘浣�<br />-->
+<!--                        鏅鸿兘浣撳彲浠ヨ皟鐢ㄥ涓伐浣滄祦鍜屽伐鍏�-->
+<!--                      </div>-->
+<!--                    </div>-->
+<!--                    <add-agent ref="addAgents"></add-agent>-->
+<!--                    &lt;!&ndash;                    <div style="position: absolute; bottom: 1rem; right: 1rem;">&ndash;&gt;-->
+<!--                    &lt;!&ndash;                      <a-space>&ndash;&gt;-->
+<!--                    &lt;!&ndash;                      </a-space>&ndash;&gt;-->
+<!--                    &lt;!&ndash;                    </div>&ndash;&gt;-->
+<!--                  </a-card>-->
+<!--                </div>-->
+                <div
+                  class="card-wrap"
+                  v-for="(item, index) of agentList"
+                  :key="item.id"
+                >
+                  <a-card :bordered="false" hoverable>
                     <a-avatar :style="{ backgroundColor: '#3370ff' }">
                       <img
-                        :style="{ width: '100%'}"
+                        :style="{ width: '100%' }"
                         alt="dessert"
                         src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
                       />
                     </a-avatar>
-                    <a-switch v-model="item.off" style="position: absolute;top: 10px;right: 10px" size="medium" @change="handleChange(item)">
-                      <template #checked>
-                        涓婄嚎
-                      </template>
-                      <template #unchecked>
-                        涓嬬嚎
-                      </template>
+                    <a-switch
+                      v-model="item.off"
+                      style="position: absolute; top: 10px; right: 10px"
+                      size="medium"
+                      @change="handleChange(item)"
+                    >
+                      <template #checked> 涓婄嚎 </template>
+                      <template #unchecked> 涓嬬嚎 </template>
                     </a-switch>
                     <div class="arco-card-body-content">
                       <div class="arco-card-body-content-top">
-                        <span style="font-size: 18px;font-weight: 900">
+                        <span style="font-size: 18px; font-weight: 900">
                           {{ item.name }}
                         </span>
                       </div>
                       <div class="arco-card-body-content-down">
-                        {{item.prompt_config.prologue}}
+                        {{ item.prompt_config.prologue }}
                       </div>
-
                     </div>
-                    <div style="position: absolute; bottom: 1.4rem; left: 1rem;">
-                      <icon-user /> <span style="font-size: 12px">
-<!--                      {{ item.name }}-->
-                    </span>
+                    <div style="position: absolute; bottom: 1.4rem; left: 1rem">
+                      <icon-user />
+                      <span style="font-size: 12px">
+                        <!--                      {{ item.name }}-->
+                      </span>
                     </div>
-                    <div style="position: absolute; bottom: 1rem; right: 1rem;">
+                    <div style="position: absolute; bottom: 1rem; right: 1rem">
                       <a-space>
                         <span v-show="!item.off">
-                          <editAgent  ref="editAgentKuai" typeAngint="edit" :formData="form" @cancelModal="handleCancel"></editAgent>
+                          <editAgent
+                            ref="editAgentKuai"
+                            typeAngint="edit"
+                            :formData="form"
+                            @cancelModal="handleCancel"
+                          ></editAgent>
                         </span>
-                        <a-popconfirm :content="'纭畾鍒犻櫎鍚�'" type="warning" @ok="deleteItem(item)">
-                          <a-button  type="text" size="small">
+                        <a-popconfirm
+                          :content="'纭畾鍒犻櫎鍚�'"
+                          type="warning"
+                          @ok="deleteItem(item)"
+                        >
+                          <a-button type="text" >
                             <template #icon>
                               <icon-delete />
                             </template>
@@ -97,14 +123,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, nextTick, onBeforeMount } from "vue";
-  import addAgent from "@/views/dmx/IntelligentAgent/components/addAgent.vue";
-  import editAgent from "@/views/dmx/IntelligentAgent/components/editAgent.vue";
-  import { kbdocumentrm, queryKbList } from "@/api/kbList";
-  import { Message } from "@arco-design/web-vue";
-import { deletedialog, querydialogList } from "@/api/Agent";
-  import useLoading from "@/hooks/loading";
+import { ref, reactive, nextTick, onBeforeMount, onMounted, onBeforeUnmount } from "vue";
+  import addAgent from '@/views/dmx/IntelligentAgent/components/addAgent.vue';
+  import editAgent from '@/views/dmx/IntelligentAgent/components/editAgent.vue';
+  import agent  from "@/views/dmx/IntelligentAgent/components/agentConfig.vue";
+  import { kbdocumentrm, queryKbList } from '@/api/kbList';
+  import { Message } from '@arco-design/web-vue';
+  import { deletedialog, querydialogList } from '@/api/Agent';
+  import useLoading from '@/hooks/loading';
   const { loading, setLoading } = useLoading(true);
+  import EventBus from '@/utils/EventBus';
 
   let count = 5;
   const activeKey = ref(1);
@@ -127,9 +155,9 @@
     //   content: 'Content of Tab Panel 4',
     // },
   ]);
-const changeTabs = (val) => {
-  activeKey.value = val;
-}
+  const changeTabs = (val) => {
+    activeKey.value = val;
+  };
   const handleAdd = () => {
     addAgents.value.handleClick();
   };
@@ -144,9 +172,7 @@
     // name: '',
   });
 
-  const queryList = async (
-    params = {  }
-  ) => {
+  const queryList = async (params = {}) => {
     setLoading(true);
     try {
       const { data } = await querydialogList(params);
@@ -155,7 +181,7 @@
         return {
           ...item,
           off: true,
-        }
+        };
       });
     } catch (err) {
       // you can report use errorHandler or other
@@ -164,21 +190,21 @@
     }
   };
 
-  const   deleteItem =  async (row)=>{
+  const deleteItem = async (row) => {
     console.log(row);
-    let data = await deletedialog({dialog_ids: [row.id]})
-    if(data.code == 0){
+    let data = await deletedialog({ dialog_ids: [row.id] });
+    if (data.code == 0) {
       Message.success('鍒犻櫎鎴愬姛');
-      queryList()
+      queryList();
     }
-  }
+  };
   const handleChange = async (item) => {
-    if (item){
-      Object.assign(form,item)
+    if (item) {
+      Object.assign(form, item);
     }
   };
   const handleCancel = () => {
-    queryList()
+    queryList();
   };
   const handleSubmit = ({ values, errors }) => {
     this.$refs.formRef.validate().then((res, a, b) => {
@@ -186,8 +212,16 @@
       console.log('values', values);
     });
   };
-  onBeforeMount(()=>{
+  onBeforeMount(() => {
     queryList();
+  });
+  onMounted(()=>{
+    EventBus.on('queryList',()=>{
+      queryList();
+    })
+  })
+  onBeforeUnmount(()=>{
+    EventBus.off('queryList')
   })
 </script>
 
@@ -241,9 +275,9 @@
     }
   }
   .card-wrap {
-    width: 20%;
+    width: 23%;
     height: 200px;
-    margin: 10px;
+    margin: 1%;
     transition: all 0.3s;
     border: 1px solid var(--color-neutral-3);
     border-radius: 4px;
@@ -301,13 +335,13 @@
       }
     }
   }
-  .arco-card-body-content{
-    .arco-card-body-content-top{
+  .arco-card-body-content {
+    .arco-card-body-content-top {
       margin-top: 10px;
       text-align: center;
     }
-    .arco-card-body-content-down{
-      text-align:center;
+    .arco-card-body-content-down {
+      text-align: center;
       margin-top: 10px;
       font-size: 12px;
       color: #999999;

--
Gitblit v1.8.0