From 713d6ca9cbd53302ee11a17ea7dbdac5f71d11d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Mon, 28 Apr 2025 15:35:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(intelligent-agent):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=99=BA=E8=83=BD=E4=BD=93=E5=88=9B=E5=BB=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加智能体创建页面和相关组件
- 实现智能体名称、图标、背景色选择功能
- 增加应用类型选择功能
-优化 emoji 选择器样式
- 调整卡片布局和样式
---
 src/assets/sass/renderSass/button.scss        |  17 ++
 src/main.js                                   |  16 +-
 src/views/app/login/index.vue                 |   4 +-
 .../components/info/index.vue                 | 147 +++++++++++++++++-
 src/views/intelligent-agent/index.vue         |   8 +-
 src/views/knowledge/detail/index.vue          |   2 +-
 src/views/knowledge/index.vue                 |   4 +-
 7 files changed, 179 insertions(+), 19 deletions(-)

diff --git a/src/assets/sass/renderSass/button.scss b/src/assets/sass/renderSass/button.scss
index 71736e8..696ca04 100644
--- a/src/assets/sass/renderSass/button.scss
+++ b/src/assets/sass/renderSass/button.scss
@@ -227,4 +227,21 @@
       }
     }
   }
+  //&.is-active {
+  //  background: #fff;
+  //}
+}
+
+.render-group {
+  padding: 5px 10px;
+  background: #f8f8f8;
+  & .el-radio-button {
+    text-align: center;
+    &.is-active {
+      background: #fff !important;
+    }
+    & .el-radio-button__inner {
+      padding: 2px 5px;
+    }
+  }
 }
diff --git a/src/main.js b/src/main.js
index 8ef58b9..dd835b5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -39,11 +39,17 @@ Vue.component('VEditor', VueEditor)
 // 富文本编辑器 可视化代码
 Vue.component('MEditor', MavonEditor)
 Vue.prototype.$messageBox = function(isOk, message, type, title) {
-  this.$confirm(message ? message : '是否确认删除当前数据', title ? title : '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: type ? type : 'error'
-  }).then(() => {
+  this.$confirm(
+    message ? message : '是否确认删除当前数据',
+    title ? title : '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: type ? type : 'error',
+      confirmButtonClass: 'render-button',
+      cancelButtonClass: 'render-button'
+    }
+  ).then(() => {
     isOk('ok')
   })
 }
diff --git a/src/views/app/login/index.vue b/src/views/app/login/index.vue
index aeffe63..db60b73 100644
--- a/src/views/app/login/index.vue
+++ b/src/views/app/login/index.vue
@@ -61,13 +61,13 @@
 </template>
 
 <script>
-import { validuserName } from '@/assets/js/utils/validate'
+import { validUsername } from '@/assets/js/utils/validate.js'
 // import { indexUser } from '@/api/app/user'
 export default {
   name: 'Login',
   data() {
     const validateuserName = (rule, value, callback) => {
-      if (!validuserName(value)) {
+      if (!validUsername(value)) {
         callback(new Error('请输入用户名'))
       } else {
         callback()
diff --git a/src/views/intelligent-agent/components/info/index.vue b/src/views/intelligent-agent/components/info/index.vue
index e53d61a..55e76bd 100644
--- a/src/views/intelligent-agent/components/info/index.vue
+++ b/src/views/intelligent-agent/components/info/index.vue
@@ -9,7 +9,43 @@ export default {
   },
   data() {
     return {
-      chooseBack: ['#fff'],
+      isImage: '0',
+      background: '',
+      chooseBack: [
+        'rgb(255, 255, 255)',
+        'rgb(228, 251, 204)',
+        'rgb(239, 241, 245)',
+        'rgb(224, 234, 255)',
+        'rgb(254, 247, 195)',
+        'rgb(213, 245, 246)',
+        'rgb(209, 233, 255)',
+        'rgb(209, 224, 255)',
+        'rgb(213, 217, 235)',
+        'rgb(255, 228, 232)'
+      ],
+      // 应用类型
+      agentType: [
+        {
+          label: '聊天助手',
+          value: 'knowledge'
+        },
+        {
+          label: '知识库+知识库',
+          value: 'knowledge_knowledge'
+        },
+        {
+          label: '知识库+知识库+知识库',
+          value: 'sd'
+        },
+        {
+          label: '知识库+知识库+知识库',
+          value: 'sd'
+        },
+        {
+          label: '知识库+知识库+知识库',
+          value: 'sd'
+        }
+      ],
       rules: {
         name: [
           { required: true, message: '请输入智能体名称', trigger: 'blur' }
@@ -21,6 +57,9 @@ export default {
     }
   },
   methods: {
+    chooseGround(colors) {
+      this.$set(this.dialog.agent, 'background', colors)
+    },
     /**
      * 提交表单
      */
@@ -61,22 +100,74 @@ export default {
         <el-form-item label="名称与图标" prop="name" style="flex:1">
           <el-input v-model="dialog.agent.name" size="medium" />
         </el-form-item>
-        <el-form-item label="" prop="imageId" class="mt30 ml40">
+        <el-form-item label="" prop="imageId" class="mt30 ml20">
           <el-popover trigger="click">
             <div style="width: 28vw">
-              <VEmojiPicker @select="selectEmoji" class="emoji " />
-              <div v-if="dialog.agent.imageId">
-                <div></div>
+              <el-radio-group
+                v-model="isImage"
+                style="width: 100%;"
+                class="flex render-group"
+              >
+                <el-radio-button label="0" style="flex:1">表情</el-radio-button>
+                <el-radio-button label="1" style="flex:1">图片</el-radio-button>
+              </el-radio-group>
+              <div class="mt10" v-if="isImage === '0'">
+                <VEmojiPicker @select="selectEmoji" class="emoji " />
+                <div
+                  v-if="dialog.agent.imageId"
+                  class="flex mt10 back-content justify-content-b"
+                >
+                  <template v-for="item in chooseBack">
+                    <div
+                      class="emoji-background"
+                      :style="`background:${item}`"
+                      @click="chooseGround(item)"
+                    >
+                      {{ dialog.agent.imageId }}
+                    </div>
+                  </template>
+                </div>
               </div>
             </div>
 
-            <div class="emoji-content" slot="reference">
+            <div
+              class="emoji-content"
+              slot="reference"
+              :style="`background:${dialog.agent.background}`"
+            >
               {{ dialog.agent.imageId }}
             </div>
           </el-popover>
         </el-form-item>
       </div>
 
+      <el-form-item label="选择应用类型" required prop="">
+        <div class="card-container" style="flex-wrap: wrap;">
+          <el-card
+            v-for="item in agentType"
+            :key="item.value"
+            shadow="hover"
+            class="card-item"
+          >
+            <div class="flex align-items-c">
+              <img
+                src="@/assets/images/knowledge.png"
+                alt=""
+                style="width: 50px;height: 50px"
+              />
+              <div class="ml20" style="flex:1;overflow: hidden">
+                <div class="ellipsis">
+                  {{ item.label }}
+                </div>
+                <div class="ellipsis">
+                  {{ item.label }}
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </div>
+      </el-form-item>
+
       <el-form-item label="描述" prop="description">
         <el-input
           size="medium"
@@ -103,10 +194,29 @@ export default {
   border: 1px solid #dcdfe6;
   text-align: center;
   line-height: 50px;
-  font-size: 30px;
+  font-size: 20px;
   cursor: pointer;
   background: rgb(209, 233, 255);
 }
+
+.back-content {
+  flex-wrap: wrap;
+}
+.emoji-content + .emoji-content {
+  //margin-left: 2%;
+}
+.emoji-background {
+  cursor: pointer;
+  flex: 0 0 calc(10% - 10px);
+  border-radius: 8px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 20px;
+  border: 1px solid #dcdfe6;
+  text-align: center;
+  //margin-left: 10px;
+  margin-bottom: 10px;
+}
 .emoji {
   width: 100% !important;
   height: 100%;
@@ -127,4 +237,27 @@ export default {
     }
   }
 }
+.card-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start; // 确保卡片之间有间距
+}
+.grid-emojis {
+  grid-template-columns: repeat(10, 10%) !important;
+}
+.card-item {
+  cursor: pointer;
+  flex: 0 0 calc(33% - 1%); // 每个卡片占据三分之一的宽度，减去间距
+  margin-bottom: 10px; // 卡片之间的垂直间距
+  margin-left: 1%;
+  & .el-card__body {
+    padding: 5px 10px;
+  }
+  & .ellipsis {
+    white-space: nowrap; // 确保文本不换行
+    overflow: hidden; // 隐藏超出部分
+    text-overflow: ellipsis; // 超出部分显示省略号
+    max-width: 100%; // 设置最大宽度以限制文本长度
+  }
+}
 </style>
diff --git a/src/views/intelligent-agent/index.vue b/src/views/intelligent-agent/index.vue
index 5cc8792..d7d7c83 100644
--- a/src/views/intelligent-agent/index.vue
+++ b/src/views/intelligent-agent/index.vue
@@ -167,7 +167,10 @@ export default {
               创建者：
               <div>{{ listItem.createdUser }}</div>
             </div>
-            <div class="opacity-button">
+            <div
+              class="opacity-button flex align-items-c"
+              style="justify-content: flex-end"
+            >
               <el-button
                 class="default "
                 size="medium"
@@ -195,6 +198,7 @@ export default {
       :title="dialog.title"
       :close-on-click-modal="false"
       @confirm="infoConfirm"
+      width="50vw"
     >
       <component :is="dialog.component" ref="infoDialog" />
     </r-dialog>
@@ -313,7 +317,7 @@ export default {
     padding: 20px 20px 0;
     display: flex;
     justify-content: space-between;
-    align-items: start;
+    align-items: flex-start;
 
     .folder-content {
       display: flex;
diff --git a/src/views/knowledge/detail/index.vue b/src/views/knowledge/detail/index.vue
index 1fb61ed..d2ba1fc 100644
--- a/src/views/knowledge/detail/index.vue
+++ b/src/views/knowledge/detail/index.vue
@@ -220,7 +220,7 @@ import {
 } from '@/assets/js/utils/utilOptions'
 import DocumentDrawer from './components/documentDetail/DocumentDrawer.vue'
 import knowledgeForm from '@/views/knowledge/detail/components/knowledgeForm.vue'
-import knowledgePng_1 from '@/assets/images/konwledge/konwledge-1.png'
+import knowledgePng_1 from '@/assets/images/konwledge/knowledge-1.png'
 import hitTest from '@/views/knowledge/detail/components/HitTest/Index.vue'
 import meteData from '@/views/knowledge/detail/components/meteData/Index.vue'
 import MeteData from '@/views/knowledge/detail/components/meteData/Index.vue'
diff --git a/src/views/knowledge/index.vue b/src/views/knowledge/index.vue
index f06015c..11c381c 100644
--- a/src/views/knowledge/index.vue
+++ b/src/views/knowledge/index.vue
@@ -103,7 +103,7 @@
   </div>
 </template>
 <script>
-import { docManageDataset, datasetDelete } from '@/api/generatedApi/index'
+import { docManageDataset, datasetDelete } from '@/api/generatedApi/index.js'
 import knowledgeForm from '@/views/knowledge/detail/components/knowledgeForm.vue'
 import knowledgePng_1 from '@/assets/images/konwledge/knowledge-1.png'
 import knowledgePng_2 from '@/assets/images/konwledge/knowledge-2.png'
@@ -327,7 +327,7 @@ export default {
     padding: 20px 20px 0;
     display: flex;
     justify-content: space-between;
-    align-items: start;
+    align-items: flex-start;
 
     //align-items: center;