智能体管理的页面开发和功能开发

src/views/dmx/IntelligentAgent/components/addAgent.vue

@@ -16,11 +16,14 @@
       <a-form-item field="name" label="智能体名称">
         <a-input v-model="form.name" placeholder="请输入名称"/>
       </a-form-item>
-
+      <a-form-item  label="你希望智能体的角色是什么，具体完成什么任务？">
+        <a-textarea v-model="form.prompt_config.system" placeholder="" style="height: 180px"/>
+      </a-form-item>
       <a-form-item>
         <div style="width: 100%;text-align: right">
           <a-button @click="visible = false">取消</a-button>
           <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>
+          <editAgent ref="editAgentKuai" typeAngint="add" :formData="form"></editAgent>
         </div>
       </a-form-item>
     </a-form>
@@ -29,28 +32,47 @@
 
 <script lang="ts" setup>
 import { onMounted ,onBeforeMount, reactive, ref } from "vue";
+import editAgent from "@/views/dmx/IntelligentAgent/components/editAgent.vue";
 
 const visible = ref(false);
 const loading = ref(false);
+const editAgentKuai = ref();
 const form = reactive({
-  size: "medium",
   name: "",
-  age: undefined,
-  section: "0",
-  province: "haidian",
-  options: [],
-  date: "",
-  time: "",
-  radio: "radio one",
-  slider: 5,
-  score: 5,
-  switch: false,
-  multiSelect: ["section one"],
-  treeSelect: "",
-  raptor: false,
-  prompt: '请总结以下段落。 小心数字，不要编造。 段落如下：\n' +
-    '      {cluster_content}\n' +
-    '以上就是你需要总结的内容。',
+  icon: "",
+  language: "English",
+  prompt_config: {
+    empty_response: "",
+    prologue: "你好！ 我是你的助理，有什么可以帮到你的吗？",
+    quote: true,
+    self_rag: true,
+    system: "示例：\n" +
+      "你是 XX，具有 XX 经验，擅长 XX，…\n" +
+      "你的任务是 XX ，需要按照以下步骤执行：\n" +
+      "1. XX\n" +
+      "2. XX\n" +
+      "3. …\n",
+    parameters: [
+      {
+        "key": "knowledge",
+        "optional": false
+      }
+    ]
+  },
+  kb_ids: [
+    "985eda244efc11ef9a7a0242ac120006"
+  ],
+  llm_id: "qwen-plus",
+  llm_setting: {
+    temperature: 0.1,
+    top_p: 0.3,
+    presence_penalty: 0.4,
+    frequency_penalty: 0.7,
+    max_tokens: 512
+  },
+  similarity_threshold: 0.2,
+  vector_similarity_weight: 0.30000000000000004,
+  top_n: 8
 });
 const formRef = ref(null);
 
@@ -67,6 +89,9 @@ const rules = {
 
 const handleSubmit = ({values, errors}) => {
   console.log('values:', values, '\nerrors:', errors)
+  if(!errors){
+    editAgentKuai.value.handleClick(form)
+  }
 }
 
 const handleClick = () => {
@@ -81,13 +106,20 @@ const handleCancel = () => {
 }
 
 const handleOpened =(el) => {
-  Object.assign(form,{
-    name: '',// 用户名
-    nameJoin: '',// 昵称
-    post: '',// 岗位
-    txt: '',// 备注
-  });
+  // Object.assign(form,{
+  //   name: '',// 用户名
+  //   nameJoin: '',// 昵称
+  //   post: '',// 岗位
+  //   txt: '',// 备注
+  // });
   formRef.value.resetFields();
+  form.name = ''
+  form.prompt_config.system = "示例：\n" +
+    "你是 XX，具有 XX 经验，擅长 XX，…\n" +
+    "你的任务是 XX ，需要按照以下步骤执行：\n" +
+    "1. XX\n" +
+    "2. XX\n" +
+    "3. …\n"
 }
 
 const file = ref();

src/views/dmx/IntelligentAgent/components/editAgent.vue

@@ -1,119 +1,99 @@
 
 <template>
-  <a-button  type="text" size="small" @click="handleClick">
+  <a-button  v-if="typeAngint=='edit'" type="text" size="small" @click="handleClick">
     <template #icon>
       <icon-tool />
     </template>
   </a-button>
-
-  <a-modal v-model:visible="visible" title="添加模式"
+<!--  <a-button v-if="typeAngint=='add'" style="margin-left: 10px" type="primary" @click="handleClick">确定</a-button>-->
+  <a-modal v-model:visible="visible" title=""
            @before-open="handleOpened"
            @cancel="handleCancel"
            :footer="false"
            title-align="start"
-           width="600px"
+           fullscreen
   >
-    <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" :style="{width:'90%',margin:'0 auto'}" layout="vertical" >
-      <a-form-item field="name" label="模型类型">
-        <a-select v-model="form.section" placeholder="请选择">
-          <a-option value="section one">Section One</a-option>
-          <a-option value="section two">Section Two</a-option>
-          <a-option value="section three">Section Three</a-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item field="name" label="模型名称">
-        <a-input v-model="form.name" placeholder="请输入名称"/>
-      </a-form-item>
-      <a-form-item field="section" label="模型图片">
-        <a-space direction="vertical" :style="{ width: '100%' }">
-          <a-upload
-            action="/"
-            :fileList="file ? [file] : []"
-            :show-file-list="false"
-            @change="onChange"
-            @progress="onProgress"
-          >
-            <template #upload-button>
-              <div
-                :class="`arco-upload-list-item${
-            file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
-          }`"
-              >
-                <div
-                  class="arco-upload-list-picture custom-upload-avatar"
-                  v-if="file && file.url"
-                >
-                  <img :src="file.url" />
-                  <div class="arco-upload-list-picture-mask">
-                    <IconEdit />
-                  </div>
-                  <a-progress
-                    v-if="file.status === 'uploading' && file.percent < 100"
-                    :percent="file.percent"
-                    type="circle"
-                    size="mini"
-                    :style="{
-                position: 'absolute',
-                left: '50%',
-                top: '50%',
-                transform: 'translateX(-50%) translateY(-50%)',
-              }"
-                  />
-                </div>
-                <div class="arco-upload-picture-card" v-else>
-                  <div class="arco-upload-picture-card-text">
-                    <IconPlus />
-                    <div style="margin-top: 10px; font-weight: 600">上传</div>
-                  </div>
-                </div>
+  <div class="main-container">
+    <div class="main-container-lf">
+      <div style="padding: 10px;font-size: 16px;background:#eeeeee;">智能体配置</div>
+      <div style="display: flex;width: 100%;" :style="{height:height}">
+        <div style="width: 50%;height: 100%">
+          <div style="padding: 10px;font-size: 12px;color: #2a2a2b;">智能体画像</div>
+          <div>
+
+          </div>
+
+        </div>
+        <div style="background:#eeeeee;width: 50%;">
+          <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit"  layout="vertical" >
+
+            <a-collapse :default-active-key="['1']">
+              <a-collapse-item header="AI模型配置" key="1">
+
+              </a-collapse-item>
+              <a-collapse-item header="开场引导" :key="'2'">
+
+              </a-collapse-item>
+              <a-collapse-item header="知识库" key="3">
+
+              </a-collapse-item>
+              <a-collapse-item header="工具" key="4" disabled>
+              </a-collapse-item>
+              <a-collapse-item header="工作流" key="5" disabled>
+              </a-collapse-item>
+            </a-collapse>
+
+            <a-form-item>
+              <div style="position: absolute;right: 10px;top: 10px">
+<!--                <a-button @click="visible = false">取消</a-button>-->
+                <a-button style="margin-left: 10px" type="primary" html-type="submit">保存</a-button>
               </div>
-            </template>
-          </a-upload>
-        </a-space>
-      </a-form-item>
-      <a-form-item field="name" label="基础Url">
-        <a-input v-model="form.name" placeholder="请输入名称"/>
-      </a-form-item>
-      <a-form-item field="raptor" label="是否支持 Vision">
-        <a-switch v-model="form.raptor" />
-      </a-form-item>
-
-      <a-form-item>
-        <div style="width: 100%;text-align: right">
-          <a-button @click="visible = false">取消</a-button>
-          <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>
+            </a-form-item>
+          </a-form>
+        </div>
+      </div>
+    </div>
+    <div class="main-container-rt">
+      <div :style="{height:heightrg}">
+        <div style="padding: 10px">
+          <a-avatar :style="{ backgroundColor: '#3370ff' }">
+            <img
+              :style="{ width: '100%'}"
+              alt="dessert"
+              src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
+            />
+          </a-avatar>
+          调试预览
+        </div>
+        <a-divider style="margin: 0;margin-left: 10px"/>
+
+        <div class="bottom">
+          <div class="input">
+            <a-input  placeholder="输入您想了解的内容，按Enter发送">
+              <template #suffix>
+                <icon-send  style="cursor: pointer" />
+              </template>
+            </a-input></div>
+          <div class="text">内容由AI生成，仅供参考</div>
         </div>
-      </a-form-item>
-    </a-form>
+      </div>
+    </div>
+  </div>
   </a-modal>
 </template>
 
 <script lang="ts" setup>
-import { onMounted ,onBeforeMount, reactive, ref } from "vue";
-
+import { onMounted, onBeforeMount, reactive, ref, nextTick } from "vue";
+import { IconSend } from "@arco-design/web-vue/es/icon";
+const props =  defineProps(['typeAngint','formData'])
 const visible = ref(false);
 const loading = ref(false);
 const form = reactive({
-  size: "medium",
-  name: "",
-  age: undefined,
-  section: "0",
-  province: "haidian",
-  options: [],
-  date: "",
-  time: "",
-  radio: "radio one",
-  slider: 5,
-  score: 5,
-  switch: false,
-  multiSelect: ["section one"],
-  treeSelect: "",
-  raptor: false,
-  prompt: '请总结以下段落。 小心数字，不要编造。 段落如下：\n' +
-    '      {cluster_content}\n' +
-    '以上就是你需要总结的内容。',
+
 });
 const formRef = ref(null);
+const height = ref('calc(100vh - 150px)')
+const heightrg = ref('calc(100vh - 100px)')
 
 const rules = {
   name: [
@@ -129,9 +109,16 @@ const handleSubmit = ({values, errors}) => {
   console.log('values:', values, '\nerrors:', errors)
 }
 
-const handleClick = () => {
+const handleClick = (data) => {
   visible.value = true;
+  nextTick(()=>{
+    Object.assign(form,data);
+    console.log(form);
+  })
 };
+defineExpose({
+  handleClick
+})
 const handleBeforeOk = (done) => {
     formRef.value.validate().then(res => {
       console.log('form:', form)
@@ -148,12 +135,6 @@ const handleCancel = () => {
 }
 
 const handleOpened =(el) => {
-  Object.assign(form,{
-    name: '',// 用户名
-    nameJoin: '',// 昵称
-    post: '',// 岗位
-    txt: '',// 备注
-  });
   formRef.value.resetFields();
 }
 
@@ -178,11 +159,32 @@ onMounted(()=>{
 })
 </script>
 
-<script lang="ts">
-export default {
-  name: 'add',
-  methods: {
-
+<style scoped lang="less">
+.main-container {
+  width: 100%;
+  display: flex;
+  .main-container-lf {
+    width: 60%;
   }
-};
-</script>
+  .main-container-rt {
+    position: relative;
+    width: 40%;
+  }
+}
+.bottom{
+  width: 100%;
+  position: absolute;
+  bottom: 40px;
+  left:0;
+  .input{
+    margin-left: 20%;
+    width: 60%;
+  }
+  .text{
+    margin-left: 40%;
+    font-size: 12px;
+    color: lightgrey;
+    line-height: 40px;
+  }
+}
+</style>

src/views/dmx/IntelligentAgent/index.vue

@@ -71,7 +71,7 @@
                     </div>
                     <div style="position: absolute; bottom: 1rem; right: 1rem;">
                       <a-space>
-                        <editAgent></editAgent>
+<!--                        <editAgent typeAngint="edit"></editAgent>-->
                         <a-popconfirm :content="'确定删除吗'" type="warning" @ok="deleteItem(record)">
                           <a-button  type="text" size="small">
                             <template #icon>

src/views/dmx/knowledgeLib/index.vue

@@ -11,7 +11,7 @@
           <addKnow @knowledgeData="knowledgeData"></addKnow>
         </div>
         <div class="lf-container-down">
-          <div class="tabs">
+          <a-scrollbar style="height:56rem;overflow: auto;">
             <div
               class="tab"
               v-for="(tab, index) in tabs"
@@ -29,8 +29,8 @@
                 </template>
               </a-popover>
             </div>
+          </a-scrollbar>
           </div>
-        </div>
       </div>
       <div class="rt-container">
         <a-tabs default-active-key="1">
@@ -794,16 +794,21 @@ const   changeFetchData =  async (row)=>{
         .lf-container-down{
           display: flex;
           flex-direction: column;
+          box-sizing: border-box;
           width: 90%;
-          height: 56rem;
+          //height: 56rem;
           border: 1px solid #eeeeee;
-          overflow: auto;
-          padding: 10px;
+          //padding: 10px;
           margin-bottom: 10px;
-          .tabs .tab {
+          //.tabs{
+          //  width: 100%;
+          //  height: 100%;
+          //  overflow: auto;
+          //}
+          .tab {
             cursor: pointer;
             box-sizing: border-box;
-            margin: 10px 0;
+            margin: 10px 10px;
             padding:0 10px;
             color: rgba(0, 0, 0, 0.88);
             font-size: 14px;
@@ -815,12 +820,12 @@ const   changeFetchData =  async (row)=>{
             border: 1px solid #f0f0f0;
             border-radius: 8px;
           }
-          .tabs .tab:hover {
+          .tab:hover {
             border: 1px solid #ffffff;
             background: #e8e8ea;
             box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
           }
-          .tabs .tab.active {
+          .tab.active {
             border: 1px solid #e8e8ea;
             background: #e8e8ea;
             cursor: pointer;