瀏覽代碼

添加图片及修改字体大小

yangg 8 月之前
父節點
當前提交
b93eea1028

文件差異過大導致無法顯示
+ 0 - 0
dist/index.html


文件差異過大導致無法顯示
+ 0 - 0
dist/static/css/app.adfe3f1b.css


+ 0 - 1
dist/static/css/chunk-52d27877.24915812.css

@@ -1 +0,0 @@
-.header[data-v-45729730]{margin-left:20px}.header h2[data-v-45729730]{margin-bottom:0}.center[data-v-45729730]{margin:10px}.center[data-v-45729730] .el-form--inline .el-form-item{display:block}.center[data-v-45729730] .el-input-number--medium{width:150px}.footer[data-v-45729730]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin:0 100px 20px}

+ 1 - 0
dist/static/css/chunk-6262d025.8f453586.css

@@ -0,0 +1 @@
+.header[data-v-1b38362d]{margin-left:20px}.header h2[data-v-1b38362d]{margin-bottom:0}.center[data-v-1b38362d]{margin:10px}.center[data-v-1b38362d] .el-form--inline .el-form-item{display:block}.center[data-v-1b38362d] .el-input-number--medium{width:150px}.footer[data-v-1b38362d]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin:0 100px 20px}[data-v-1b38362d] .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.avatar-uploader .el-upload[data-v-1b38362d]:hover{border-color:#409eff}.avatar-uploader-icon[data-v-1b38362d]{font-size:28px;color:#8c939d;width:100px;height:100px;line-height:100px;text-align:center}.avatar[data-v-1b38362d]{width:100px;height:100px;display:block}

文件差異過大導致無法顯示
+ 0 - 0
dist/static/js/app.25ab9a4c.js


文件差異過大導致無法顯示
+ 0 - 0
dist/static/js/app.8a93c4f3.js


文件差異過大導致無法顯示
+ 0 - 0
dist/static/js/chunk-52d27877.8490bad0.js


文件差異過大導致無法顯示
+ 0 - 0
dist/static/js/chunk-6262d025.bd91ba8c.js


+ 7 - 5
src/components/ai.vue

@@ -312,7 +312,7 @@ export default {
           });
           const result = await response.json();
           this.session_id = result.data.session_id;
-          console.log(result.status);
+          console.log(result);
           if (result.code !== 200) {
             const errorText = await response.text(); // 获取错误文本
             throw new Error(
@@ -410,7 +410,7 @@ export default {
 
     async handleResponse(value, existingMessage) {
       const data = value.data.answer//outputs[0].outputs[0].results.message;
-      
+      console.log("this.messages",this.messages);
       existingMessage.messageType = data;
       /* existingMessage.time = data.timestamp; */
       existingMessage.message = '';
@@ -804,6 +804,7 @@ export default {
   white-space: normal; /* 确保文本会换行 */
   word-wrap: break-word; /* 长单词或 URL 会被断开以适应容器宽度 */
   overflow: auto;
+  font-size: 14px;
 }
 .message-text ::v-deep p {
   font-size: 14px !important;
@@ -819,18 +820,19 @@ export default {
 .message-text ::v-deep .source-section h3 {
   margin: 20px 0 3px;
   color: #333;
-  font-size: 1.1em;
+  font-size: 16px;
 }
 .message-text ::v-deep ol li {
   padding-top: 3px;
 }
 .message-text ::v-deep ol li a {
+  font-size: 14px;
   color: #1296db;
 }
 .input-container {
   position: absolute; /* 改为绝对定位 */
   bottom: -115px; /* 距离底部的距离 */
-  left: 50%;
+  left: 38%;
   transform: translateX(-50%);
   width: 90%; /* 设置宽度为弹窗宽度的90% */
   max-width: 800px; /* 设置最大宽度 */
@@ -852,7 +854,7 @@ textarea {
   border: none;
   outline: none;
   resize: none;
-  background: #fdfdfd;
+  background-color: #fdfdfd;
 }
 
 .input-container textarea {

+ 329 - 327
src/components/webAi/css/ChatBox.css

@@ -1,490 +1,492 @@
 
 .chat-container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    margin: 10px 20px 0;
-    margin-bottom: 150px;
-     /* 或者按照实际需要调整高度 */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 10px 20px 0;
+  margin-bottom: 150px;
+   /* 或者按照实际需要调整高度 */
 }
 .chat-container .header{
-  width: 90%;
-    margin: 10px auto 0;
-    border: 1px solid #d7d7d7;
-    border-radius: 10px;
+width: 90%;
+  margin: 10px auto 0;
+  border: 1px solid #d7d7d7;
+  border-radius: 10px;
 }
 .form-container {
-  max-width: 1200px; /* 或者其他适合你布局的宽度 */
-  margin: 0 auto; /* 这会使容器水平居中 */
-  padding: 0 15px; /* 添加一些左右内边距 */
+max-width: 1200px; /* 或者其他适合你布局的宽度 */
+margin: 0 auto; /* 这会使容器水平居中 */
+padding: 0 15px; /* 添加一些左右内边距 */
 }
 
 .el-form-item {
-  margin-bottom: 15px;
+margin-bottom: 15px;
 }
 
 .el-select {
-  width: 100%;
+width: 100%;
 }
 .generate-button {
-  margin-top: 10px; /* 在小屏幕上给按钮一些上边距 */
-  margin-right: 25px;
+margin-top: 10px; /* 在小屏幕上给按钮一些上边距 */
+margin-right: 25px;
 }
 
 @media (max-width: 768px) {
-  .selection-summary {
-    flex-direction: column;
-  }
-  
-  .generate-button {
-    margin-left: 0;
-    margin-top: 15px;
-    align-self: flex-end; /* 在小屏幕上将按钮右对齐 */
-  }
+.selection-summary {
+  flex-direction: column;
+}
+
+.generate-button {
+  margin-left: 0;
+  margin-top: 15px;
+  align-self: flex-end; /* 在小屏幕上将按钮右对齐 */
+}
 }
 .selection-summary {
-  background-color: #f2f2f2;
-  border-radius: 4px;
-  padding: 15px;
-  margin: 15px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-radius:10px;
+background-color: #f2f2f2;
+border-radius: 4px;
+padding: 15px;
+margin: 15px;
+display: flex;
+justify-content: space-between;
+align-items: center;
+border-radius:10px;
 }
 
 .summary-content {
-  flex-grow: 1;
+flex-grow: 1;
 }
 
 .summary-label {
-  font-weight: bold;
-  color: #7f7f7f;
-  margin-right: 10px;
+font-weight: bold;
+color: #7f7f7f;
+margin-right: 10px;
 }
 
 .summary-text {
-  color: #606266;
-  margin: 0;
-  margin-top: 3px;
-  font-size: 14px;
+color: #606266;
+margin: 0;
+margin-top: 3px;
+font-size: 14px;
 }
 .title{
-  width: 90%;
- /*  margin: 0 auto 15px; */
-  display: flex;
-  align-items: center;
+width: 90%;
+/*  margin: 0 auto 15px; */
+display: flex;
+align-items: center;
 
 }
 .title_info{
-  cursor: pointer;
-  color: #1296db;
-  font-size: 14px;
-  margin-left: 10px;
+cursor: pointer;
+color: #1296db;
+font-size: 14px;
+margin-left: 10px;
 }
 /* .chat-container .header ::v-deep .el-select .el-input--medium .el-input__inner{
-    border: none;
+  border: none;
 }
 .chat-container .header ::v-deep .el-select .el-input--medium .el-input__suffix .el-input__suffix-inner{
-    display: none;
+  display: none;
 } */
 .chat-container .content {
-    display: flex;
-    justify-content: flex-start;
+  display: flex;
+  justify-content: flex-start;
 }
 
 .chat-container .content .left{
-    margin-left: 10px;
-    width: 330px;
-    height: 87vh;
+  margin-left: 10px;
+  width: 330px;
+  height: 87vh;
 }
 .chat-item {
-    border-radius: 10px;
-    padding: 10px;
-    border-bottom: 1px solid #e8edf2;
-    background-color: #f5f5fa;
-    margin-bottom: 10px;
-  }
-  
-  .chat-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 5px;
-  }
-  
-  .avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 10px;
-  }
-  
-  .user-info {
-    flex-grow: 1;
-  }
-  .user-info .info_header{
-    display: flex;
-    align-items: flex-end;
-  }
-  
-  .username {
-    font-weight: bold;
-  }
-  
-  .timestamp {
-    margin-left:13px;
-    font-size: 0.8em;
-    color: #888;
-  }
-  
-  .more-options {
-    cursor: pointer;
-  }
-  
-  .chat-message {
-    font-weight: bold;
-    margin-top: 8px;
-    margin-bottom: 10px;
-  }
-  
-  .chat-preview {
-    font-size: 0.9em;
-    color: #666;
-  }
-  
-  /* Adjust existing styles */
-  .left {
-    width: 300px; /* Increased width to accommodate the new layout */
-  }
-  
-  .chat-history {
-    width: 330px;
-    height: 100%;
-    overflow-y: auto;
-  }
+  border-radius: 10px;
+  padding: 10px;
+  border-bottom: 1px solid #e8edf2;
+  background-color: #f5f5fa;
+  margin-bottom: 10px;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.user-info {
+  flex-grow: 1;
+}
+.user-info .info_header{
+  display: flex;
+  align-items: flex-end;
+}
+
+.username {
+  font-weight: bold;
+}
+
+.timestamp {
+  margin-left:13px;
+  font-size: 0.8em;
+  color: #888;
+}
+
+.more-options {
+  cursor: pointer;
+}
+
+.chat-message {
+  font-weight: bold;
+  margin-top: 8px;
+  margin-bottom: 10px;
+}
+
+.chat-preview {
+  font-size: 0.9em;
+  color: #666;
+}
+
+/* Adjust existing styles */
+.left {
+  width: 300px; /* Increased width to accommodate the new layout */
+}
+
+.chat-history {
+  width: 330px;
+  height: 100%;
+  overflow-y: auto;
+}
 
 .messages {
-    width: 1180px; /* 设置消息列表宽度为屏幕宽度的 80% */
-    max-width: 90%; /* 限制最大宽度,避免超出视口 */
-    margin: 0 auto; /* 上下保持原有的 margin,左右自动调整以居中 */
-    overflow-y: auto; /* 如果消息太多,允许滚动 */
-    height: calc(100vh - 230px); /* 高度需要根据输入框和其他元素的高度调整 */
-    padding: 10px; /* 或你希望的内边距大小 */
-    margin-bottom: 120px;
+  width: 1180px; /* 设置消息列表宽度为屏幕宽度的 80% */
+  max-width: 90%; /* 限制最大宽度,避免超出视口 */
+  margin: 0 auto; /* 上下保持原有的 margin,左右自动调整以居中 */
+  overflow-y: auto; /* 如果消息太多,允许滚动 */
+  height: calc(100vh - 230px); /* 高度需要根据输入框和其他元素的高度调整 */
+  padding: 10px; /* 或你希望的内边距大小 */
+  margin-bottom: 120px;
 }
 /* 针对手机端的媒体查询 */
 @media screen and (max-width: 768px) {
-    .messages {
-        width: 100%;
-        max-width: 100%;
-        margin: 0;
-        margin-bottom: 120px;
-    }
+  .messages {
+      width: 100%;
+      max-width: 100%;
+      margin: 0;
+      margin-bottom: 120px;
+  }
 }
 .user-message {
-    display: flex;
-    flex-direction: column !important;
-    align-items: flex-end !important;
-  }
-  
-  .user-message .message-content {
-    order: 1;
-    text-align: right;
-  }
-  
-  .user-message .avatar {
-    order: 2;
-    margin-left: 10px;
-    margin-right: 0;
-  }
-  
-  .message-text {
-    margin-top: 5px;
-  }
+  display: flex;
+  flex-direction: column !important;
+  align-items: flex-end !important;
+}
+
+.user-message .message-content {
+  order: 1;
+  text-align: right;
+}
+
+.user-message .avatar {
+  order: 2;
+  margin-left: 10px;
+  margin-right: 0;
+}
+
+.message-text {
+  margin-top: 5px;
+}
 .messages li {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    align-items: flex-start; /* 这将确保所有子元素对齐到容器的顶部 */
-   /*  margin-bottom: 10px; */
+  align-items: flex-start; /* 这将确保所有子元素对齐到容器的顶部 */
+ /*  margin-bottom: 10px; */
 }
 
 .avatar {
-    width: 40px; /* 头像的尺寸 */
-    height: 40px;
-    border-radius: 50%; /* 圆形头像 */
-    /*background-color: #e9e0e0;  暂时用灰色代替,你可以用图片替换 */
-    align-self: start; /* 这将覆盖 flex 容器的 align-items 并将头像对齐到顶部 */
-    margin-right: 10px; /* 按需调整以在头像和消息之间提供空间 */
+  width: 40px; /* 头像的尺寸 */
+  height: 40px;
+  border-radius: 50%; /* 圆形头像 */
+  /*background-color: #e9e0e0;  暂时用灰色代替,你可以用图片替换 */
+  align-self: start; /* 这将覆盖 flex 容器的 align-items 并将头像对齐到顶部 */
+  margin-right: 10px; /* 按需调整以在头像和消息之间提供空间 */
 }
 
 
 .user-avatar {
 
-    background-image: url('../assets/用户.png') ;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-   /*  background-color: #93939d; */ /* 用户头像颜色 */
+  background-image: url('../assets/用户.png') ;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+ /*  background-color: #93939d; */ /* 用户头像颜色 */
 }
 
 .bot-avatar {
-  
-    background-image: url('../assets/机器人.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    /* background-color: green; */ /* AI头像颜色 */
+
+  background-image: url('../assets/机器人.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  /* background-color: green; */ /* AI头像颜色 */
 }
 /* 针对手机端的媒体查询 */
 @media screen and (max-width: 768px) {
-    .user-avatar, .bot-avatar {
-        width: 30px;  /* 或其他更小的尺寸 */
-        height: 30px;
-    }
+  .user-avatar, .bot-avatar {
+      width: 30px;  /* 或其他更小的尺寸 */
+      height: 30px;
+  }
 }
 
 .message_name{
-    display: flex;
-    align-items: center;
-    padding-top: 5px;
-    padding-bottom: 5px;
+  display: flex;
+  align-items: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
 }
 .name{
-    margin-left: 8px;
-    /* margin-bottom: 5px; */
+  margin-left: 8px;
+  /* margin-bottom: 5px; */
 }
 
 .message-content {
-    background-color: #f0f0f0; /* 消息背景 */
-    padding-left: 20px; /* 上下左右的内边距 */
-    padding-right: 20px; /* 上下左右的内边距 */
-    padding-top: 10px; /* 上下左右的内边距 */
-    padding-bottom: 0px; /* 上下左右的内边距 */
-    max-width: calc(90% - 10px); /* 计算头像和间距 */
-    border-radius: 7px; /* 边框圆角 */
-    /* margin-bottom: 10px; 和下一条消息之间的间距 */
-    /* 消息内容样式 */
-    display: flex;
-    flex-direction: column; /* 排列文本 */
-    margin-top: 0;
+  background-color: #f0f0f0; /* 消息背景 */
+  padding-left: 20px; /* 上下左右的内边距 */
+  padding-right: 20px; /* 上下左右的内边距 */
+  padding-top: 10px; /* 上下左右的内边距 */
+  padding-bottom: 0px; /* 上下左右的内边距 */
+  max-width: calc(90% - 10px); /* 计算头像和间距 */
+  border-radius: 7px; /* 边框圆角 */
+  /* margin-bottom: 10px; 和下一条消息之间的间距 */
+  /* 消息内容样式 */
+  display: flex;
+  flex-direction: column; /* 排列文本 */
+  margin-top: 0;
 }
 
 
 .message-text {
-    margin: 0;
-    white-space: normal; /* 确保文本会换行 */
-    word-wrap: break-word; /* 长单词或 URL 会被断开以适应容器宽度 */
-    overflow: auto;
+  margin: 0;
+  white-space: normal; /* 确保文本会换行 */
+  word-wrap: break-word; /* 长单词或 URL 会被断开以适应容器宽度 */
+  overflow: auto;
+  font-size: 14px;
 }
 .message-text ::v-deep p {
-    font-size: 14px !important;
-    margin: 5px 0 10px;
-    padding: 0;
-    font-size: inherit;
-    line-height: 22px;
-    font-weight: inherit;
-  }
-  .message-text ::v-deep ol{
-    padding-bottom: 10px ;
+  font-size: 14px !important;
+  margin: 5px 0 10px;
+  padding: 0;
+  font-size: inherit;
+  line-height: 22px;
+  font-weight: inherit;
+}
+.message-text ::v-deep ol{
+  padding-bottom: 10px ;
 
-  }
-  .message-text ::v-deep .source-section h3 {
-    margin: 20px 0 3px;
-    color: #333;
-    font-size: 1.1em;
-  }
-  .message-text ::v-deep ol li{
-    padding-top:3px ;
-  }
-  .message-text ::v-deep ol li a{
-    color: #1296db;
-  }
+}
+.message-text ::v-deep .source-section h3 {
+  margin: 20px 0 3px;
+  color: #333;
+  font-size: 16px;
+}
+.message-text ::v-deep ol li{
+  padding-top:3px ;
+}
+.message-text ::v-deep ol li a{
+  font-size: 14px;
+  color: #1296db;
+}
 .input-container {
-    position: absolute; /* 改为绝对定位 */
-    bottom: 10px; /* 距离底部的距离 */
-    left: 50%;
-    transform: translateX(-50%);
-    width: 90%; /* 设置宽度为弹窗宽度的90% */
-    max-width: 800px; /* 设置最大宽度 */
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    background: white;
-    border-radius: 10px;
-    box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
+  position: absolute; /* 改为绝对定位 */
+  bottom: 10px; /* 距离底部的距离 */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90%; /* 设置宽度为弹窗宽度的90% */
+  max-width: 800px; /* 设置最大宽度 */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
 }
 
 textarea {
-    font-size: 16px;
-    width: 100%; /* 可以根据需要调整 */
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    border: none;
-  outline: none;
-  resize: none;
+  font-size: 16px;
+  width: 100%; /* 可以根据需要调整 */
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  border: none;
+outline: none;
+resize: none;
 }
 
 .input-container textarea {
-    width: 100%; /* 输入框占据所有可用空间 */
-    padding: 10px;
-    margin-right: 10px; /* 与按钮的间隔 */
-    box-sizing: border-box;
+  width: 100%; /* 输入框占据所有可用空间 */
+  padding: 10px;
+  margin-right: 10px; /* 与按钮的间隔 */
+  box-sizing: border-box;
 }
 
 .input-container button {
-    min-width: 80px; /* 例如,按钮的最小宽度为 100px */
-    white-space: nowrap; /* 防止文字折行 */
-    padding: 10px 20px;
-    cursor: pointer;
+  min-width: 80px; /* 例如,按钮的最小宽度为 100px */
+  white-space: nowrap; /* 防止文字折行 */
+  padding: 10px 20px;
+  cursor: pointer;
 }
 
 
 
 
 .sender-name {
-    font-weight: bold;
-    color: #333;
-    margin-left: -5px;
+  font-weight: bold;
+  color: #333;
+  margin-left: -5px;
 }
 
 .btn {
-    font-size: 16px;
-    color: #ffffff;
-    border-radius: 5px;
-    border: none;
-    background-color: #3cbade;
-    padding: 10px 20px;  /* 添加内边距 */
-    width: auto;  /* 让宽度自适应内容 */
+  font-size: 16px;
+  color: #ffffff;
+  border-radius: 5px;
+  border: none;
+  background-color: #3cbade;
+  padding: 10px 20px;  /* 添加内边距 */
+  width: auto;  /* 让宽度自适应内容 */
 }
 
 /* 针对手机端的媒体查询 */
 @media screen and (max-width: 768px) {
-    .btn {
-        font-size: 14px;  /* 稍微减小字体大小 */
-        padding: 8px 16px;  /* 减小内边距 */
-        
-        max-width: 80px;  /* 限制最大宽度 */
-        margin: 0 auto;  /* 居中显示 */
-    }
+  .btn {
+      font-size: 14px;  /* 稍微减小字体大小 */
+      padding: 8px 16px;  /* 减小内边距 */
+      
+      max-width: 80px;  /* 限制最大宽度 */
+      margin: 0 auto;  /* 居中显示 */
+  }
 }
 
 .content_card{
-  width: 98%;
-  margin: 0 20px;
+width: 98%;
+margin: 0 20px;
 }
 
 /* 应用卡片 */
 .card-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
+display: flex;
+flex-wrap: wrap;
+gap: 20px;
 }
 
 .card {
-  width: calc(20% - 16px);
-  background-color: #fff;
-  height: 300px;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  padding: 20px;
+width: calc(20% - 16px);
+background-color: #fff;
+height: 300px;
+border-radius: 8px;
+box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+padding: 20px;
 }
 
 .card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
+display: flex;
+justify-content: space-between;
+align-items: center;
+margin-bottom: 10px;
 }
 
 .card-header h2 {
-  margin: 0;
-  font-size: 22px;
-  margin-bottom: 5px;
+margin: 0;
+font-size: 22px;
+margin-bottom: 5px;
 }
 
 .card-description {
-  color: #000;
-  font-size: 18px;
-  font-weight: 600;
-  margin-bottom: 15px;
+color: #000;
+font-size: 18px;
+font-weight: 600;
+margin-bottom: 15px;
 }
 
 .file-types {
-  margin-top: 10px;
-  display: flex;
-  gap: 15px;
-  margin-bottom: 15px;
+margin-top: 10px;
+display: flex;
+gap: 15px;
+margin-bottom: 15px;
 }
 
 .file-type {
-  display: flex;
-  align-items: center;
-  gap: 5px;
+display: flex;
+align-items: center;
+gap: 5px;
 }
 
 .file-type i {
-  font-size: 20px;
+font-size: 20px;
 }
 
 .card_info{
-  width: 100%;
-  height: 60px;
-  font-size: 14px;
-  overflow:hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 3;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
+width: 100%;
+height: 60px;
+font-size: 14px;
+overflow:hidden;
+text-overflow: ellipsis;
+-webkit-line-clamp: 3;
+display: -webkit-box;
+-webkit-box-orient: vertical;
 }
 
 .card-footer {
-  margin-top: 20px;
-  font-size: 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+margin-top: 20px;
+font-size: 12px;
+display: flex;
+justify-content: space-between;
+align-items: center;
 }
 .footer_left{
 
 }
 .footer_right{
-  color: #1296db;
+color: #1296db;
 }
 
 ::v-deep .el-collapse{
-  border: none;
+border: none;
 }
 ::v-deep .el-collapse-item__wrap{
-  border-bottom: none;
+border-bottom: none;
 }
 
 .header_btn{
-  display: flex;
-  justify-content: flex-end;
+display: flex;
+justify-content: flex-end;
 }
 
-
 ::v-deep .el-form--inline .el-form-item{
-  display: block;
+display: block;
 }
 .truncate-text {
-  max-width: calc(100% - 30px); /* 调整这个值以适应下拉菜单的宽度 */
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+max-width: calc(100% - 30px); /* 调整这个值以适应下拉菜单的宽度 */
+white-space: nowrap;
+overflow: hidden;
+text-overflow: ellipsis;
 }
 /* Add this to your existing styles */
 .knowledge-base-name {
-  display: inline-block;
-  max-width: 100px; /* Adjust this value as needed */
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-right: 5px; /* Add some spacing between spans */
+display: inline-block;
+max-width: 100px; /* Adjust this value as needed */
+white-space: nowrap;
+overflow: hidden;
+text-overflow: ellipsis;
+margin-right: 5px; /* Add some spacing between spans */
 }
+
 ::v-deep .el-input-number--medium{
-  width: 150px;
+width: 150px;
 }

+ 2 - 2
src/components/webAi/index.vue

@@ -467,7 +467,7 @@
                 v-for="(count, type) in card.knowledge_base_names"
                 :key="type"
                 class="knowledge-base-name"
-                >{{ count }}</span
+                >{{ getKnowledgeBaseName(count) }}</span
               >
             </div>
           </div>
@@ -476,7 +476,7 @@
           </div>
           <div class="card-footer">
             <div class="footer_left">
-              <img src="../../assets/images/u5.png" alt="" />
+              <img style="width: 50px;height: 50px; object-fit: cover;" :src="card.aiagent_icon ? card.aiagent_icon : require('../../assets/images/u5.png')" alt="" />
             </div>
             <div class="footer_right">
               <span @click="openChatDialog(card)" style="cursor: pointer"

+ 4 - 0
src/components/webAi/js/ChatBox.js

@@ -187,6 +187,10 @@ export default {
     }
   },
   methods: {
+    getKnowledgeBaseName(kbId) {
+      const kb = this.kneList.find(kb => kb.id === kbId);
+      return kb ? kb.name : kbId;
+    },
     /* 检索知识库名称 */
     getKnowledgeBaseNamesForView(knowledgeBaseIds) {
       return knowledgeBaseIds.map(id => {

+ 207 - 61
src/views/appConfig/index.vue

@@ -129,6 +129,33 @@
           </el-col>
         </el-row>
         <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="应用图标:">
+              <!-- aiagent_icon -->
+              <el-upload
+                class="avatar-uploader"
+                :action="uploadUrl"
+                method="post"
+                :data="params"
+                :show-file-list="false"
+                :on-success="onUploadAddSuccess"
+              >
+                <img
+                  v-if="
+                    AIform.aiagent_icon != null && AIform.aiagent_icon != ''
+                  "
+                  :src="AIform.aiagent_icon"
+                  class="avatar"
+                />
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                <!-- <svg-icon
+                  icon-class="header"
+                  style="height: 70px; width: 70px"
+                  v-else
+                /> -->
+              </el-upload>
+            </el-form-item></el-col
+          >
           <el-col :span="12">
             <el-form-item label="描 述:">
               <el-input
@@ -547,6 +574,33 @@
           </el-col>
         </el-row>
         <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="应用图标:">
+              <!-- aiagent_icon -->
+              <el-upload
+                class="avatar-uploader"
+                :action="uploadUrl"
+                method="post"
+                :data="params"
+                :show-file-list="false"
+                :on-success="onUploadEditSuccess"
+              >
+                <img
+                  v-if="
+                    editForm.aiagent_icon != null && editForm.aiagent_icon != ''
+                  "
+                  :src="editForm.aiagent_icon"
+                  class="avatar"
+                />
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                <!-- <svg-icon
+                  icon-class="header"
+                  style="height: 70px; width: 70px"
+                  v-else
+                /> -->
+              </el-upload>
+            </el-form-item></el-col
+          >
           <el-col :span="12">
             <el-form-item label="描 述:">
               <el-input
@@ -960,6 +1014,34 @@
           </el-col>
         </el-row>
         <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="应用图标:">
+              <!-- aiagent_icon -->
+              <el-upload
+              disabled
+                class="avatar-uploader"
+                :action="uploadUrl"
+                method="post"
+                :data="params"
+                :show-file-list="false"
+                :on-success="onUploadEditSuccess"
+              >
+                <img
+                  v-if="
+                    viewForm.aiagent_icon != null && viewForm.aiagent_icon != ''
+                  "
+                  :src="viewForm.aiagent_icon"
+                  class="avatar"
+                />
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                <!-- <svg-icon
+                  icon-class="header"
+                  style="height: 70px; width: 70px"
+                  v-else
+                /> -->
+              </el-upload>
+            </el-form-item></el-col
+          >
           <el-col :span="12">
             <el-form-item label="描 述:">
               <el-input
@@ -1318,10 +1400,12 @@ export default {
         role_description: "",
         role_permissions: "",
         custom_variables: "",
-        custom_prompt: "",
+        custom_prompt:
+          "使用以下上下文来回答问题。如果你不知道答案,就说你不知道,不要试图编造答案。上下文: {context} 人类: {question}AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}",
         application_type: "",
         is_default: false,
         generate_new_api_key: true,
+        aiagent_icon: "",
       },
       /* 模型库 */
       modelList: [],
@@ -1384,7 +1468,8 @@ export default {
         role_description: "",
         role_permissions: "",
         custom_variables: "",
-        custom_prompt: "",
+        custom_prompt:
+          "使用以下上下文来回答问题。如果你不知道答案,就说你不知道,不要试图编造答案。上下文: {context} 人类: {question}AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}",
         application_type: "",
         is_default: false,
         generate_new_api_key: true,
@@ -1416,11 +1501,17 @@ export default {
         role_description: "",
         role_permissions: "",
         custom_variables: "",
-        custom_prompt: "",
+        custom_prompt:
+          "使用以下上下文来回答问题。如果你不知道答案,就说你不知道,不要试图编造答案。上下文: {context} 人类: {question}AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}",
         application_type: "",
         is_default: false,
         generate_new_api_key: true,
+        aiagent_icon: "",
+      },
+      params: {
+        token: "",
       },
+      uploadUrl: "",
     };
   },
 
@@ -1461,8 +1552,14 @@ export default {
    * el 被新创建的 vm.$ el 替换,并挂载到实例上去之后调用该钩子。
    * 如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$ el 也在文档内。
    */
+  created() {
+    let _this = this;
+    _this.uploadUrl = process.env.VUE_APP_BASE_API + "/upload/file";
+    _this.params.token = _this.$store.getters.token;
+  },
   mounted() {
     /* 初始化列表 */
+
     this.init();
     this.type = this.$route.query.type;
     this.id = this.$route.query.id;
@@ -1477,6 +1574,10 @@ export default {
   /*组件方法*/
   methods: {
     /* 编辑 */
+    /* 上传图标 */
+    onUploadEditSuccess(e) {
+      this.editForm.aiagent_icon = e.data.fileUrl;
+    },
     handleEditDocumentChange(selectedValues) {
       if (selectedValues.includes("all")) {
         // 如果选择了"全部",则清空其他选项
@@ -1495,7 +1596,6 @@ export default {
         if (valid) {
           try {
             const convertedForm = { ...this.editForm };
-            console.log(this.editForm);
             // 转换知识库、文档目录和文档的ID为名称
             /*  convertedForm.knowledge_base_names = this.safeGetNamesByIds(this.editForm.knowledge_base_names, this.kneList); */
             /*  convertedForm.documents = this.safeGetNamesByIds(this.editForm.documents, this.editDocumentList); */
@@ -1506,10 +1606,10 @@ export default {
             ) {
               convertedForm.documents = []; // 全选或未选择时传空数组给后台
             } else {
-              /* convertedForm.documents = this.safeGetNamesByIds(
+              convertedForm.documents = this.safeGetNamesByIds(
                 convertedForm.documents,
                 this.editDocumentList
-              ); */
+              );
             }
             convertedForm.document_directories = this.safeGetNamesByIds(
               this.editForm.document_directories,
@@ -1572,15 +1672,7 @@ export default {
       let totalDocuments = 0;
       let otherFolderCount = 0;
 
-      for (const kbName of val) {
-        // 根据知识库名称找到对应的 ID
-        const kbId = this.kneList.find((kb) => kb.name === kbName)?.id;
-
-        /* if (!kbId) {
-          console.error(`No matching knowledge base found for name: ${kbName}`);
-          continue;
-        } */
-
+      const promises = val.map(async (kbName) => {
         const typeForm = {
           page: 1,
           pageSize: 9999,
@@ -1604,17 +1696,21 @@ export default {
           }
         } catch (error) {
           console.error(
-            `Error loading directory list for kb_id ${kbId}:`,
+            `Error loading directory list for kb_id ${kbName}:`,
             error
           );
         }
-      }
+      });
+
+      await Promise.all(promises);
 
       this.editDirectoryList.unshift({
         id: "001",
         name: "全部",
         document_count: totalDocuments + otherFolderCount,
       });
+
+      return this.editDirectoryList;
     },
     /* 监听目录选择 */
     loadEditDocumentList(val) {
@@ -1640,8 +1736,9 @@ export default {
             : this.getDirectoryIdByName(selectedDirectoryName),
       };
 
-      getBucketContents(queryForm).then((res) => {
+      return getBucketContents(queryForm).then((res) => {
         this.editDocumentList = res.data.documents;
+        return this.editDocumentList;
       });
     },
     // 添加一个辅助方法来根据目录名称获取目录ID
@@ -1653,6 +1750,10 @@ export default {
     },
 
     /* 新增 */
+    /* 上传图片 */
+    onUploadAddSuccess(e) {
+      this.AIform.aiagent_icon = e.data.fileUrl;
+    },
     /* 重置表单 */
     resetForm() {
       if (this.$refs.AIformRef) {
@@ -1681,10 +1782,12 @@ export default {
         role_description: "",
         role_permissions: "",
         custom_variables: "",
-        custom_prompt: "",
+        custom_prompt:
+          "使用以下上下文来回答问题。如果你不知道答案,就说你不知道,不要试图编造答案。上下文: {context} 人类: {question}AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}",
         application_type: "",
         is_default: false,
         generate_new_api_key: true,
+        aiagent_icon: "",
       };
     },
     /* 取消 */
@@ -1726,10 +1829,10 @@ export default {
             const convertedForm = { ...this.AIform };
 
             // 将知识库 ID 转换为名称
-            convertedForm.knowledge_base_names = this.safeGetNamesByIds(
+            /* convertedForm.knowledge_base_names = this.safeGetNamesByIds(
               this.AIform.knowledge_base_names,
               this.kneList
-            );
+            ); */
 
             /* // 将文档 ID 转换为名称
             convertedForm.documents = this.safeGetNamesByIds(
@@ -1921,16 +2024,53 @@ export default {
     },
     /* 编辑查看 */
     initEdit() {
-      // 根据 card 的数据填充 editForm
-      this.editForm = JSON.parse(JSON.stringify(this.$route.query.card)); // 深拷贝以避免直接修改原对象
+      // 深拷贝以避免直接修改原对象
+      this.editForm = JSON.parse(JSON.stringify(this.$route.query.card));
 
-      // 处理 knowledge_base_names
-      this.editForm.knowledge_base_names =
-        this.editForm.knowledge_base_names.map((name) => {
-          const kb = this.kneList.find((kb) => kb.name == name);
-          console.log(this.kneList);
-          return kb ? kb.id : name; // 如果找不到对应的知识库,保留原名称
-        });
+      // 处理 role_permissions 和 custom_variables
+      this.handleJsonFields();
+
+      // 加载知识库对应的目录列表
+      this.loadEditDirectoryList(this.editForm.knowledge_base_names).then(
+        () => {
+          // 在目录列表加载完成后,设置选中的目录
+          if (
+            this.editForm.document_directories &&
+            this.editForm.document_directories.length > 0
+          ) {
+            const dirId = this.editDirectoryList.find(
+              (dir) => dir.name === this.editForm.document_directories[0]
+            )?.id;
+            if (dirId) {
+              this.editForm.document_directories = dirId;
+              // 加载文档列表
+              this.loadEditDocumentList(dirId).then(() => {
+                this.$nextTick(() => {
+                  // 在文档列表加载完成且DOM更新后,设置选中的文档
+                  if (
+                    !this.editForm.documents ||
+                    this.editForm.documents.length === 0
+                  ) {
+                    // 如果 documents 为空,设置为 "全部"
+                    this.editForm.documents = ["all"];
+                  } else if (this.editForm.documents.includes("全部")) {
+                    this.editForm.documents = ["all"];
+                  } else {
+                    this.editForm.documents = this.editDocumentList
+                      .filter((doc) =>
+                        this.editForm.documents.includes(doc.name)
+                      )
+                      .map((doc) => doc.id);
+                  }
+                });
+              });
+            }
+          }
+        }
+      );
+    },
+
+    handleJsonFields() {
       // 处理 role_permissions
       if (this.editForm.role_permissions) {
         if (typeof this.editForm.role_permissions !== "string") {
@@ -1955,37 +2095,6 @@ export default {
       } else {
         this.editForm.custom_variables = "";
       }
-
-      // 加载知识库对应的目录列表
-      this.loadEditDirectoryList(this.editForm.knowledge_base_names).then(
-        () => {
-          // 在目录列表加载完成后,设置选中的目录
-          if (
-            this.editForm.document_directories &&
-            this.editForm.document_directories.length > 0
-          ) {
-            const dirId = this.editDirectoryList.find(
-              (dir) => dir.name === this.editForm.document_directories[0]
-            )?.id;
-            if (dirId) {
-              this.editForm.document_directories = dirId;
-              // 加载文档列表
-              this.loadEditDocumentList(dirId).then(() => {
-                // 在文档列表加载完成后,设置选中的文档
-                if (
-                  this.editForm.documents &&
-                  this.editForm.documents.length > 0
-                ) {
-                  this.editForm.documents = this.editDocumentList
-                    .filter((doc) => this.editForm.documents.includes(doc.name))
-                    .map((doc) => doc.id);
-                }
-              });
-            }
-          }
-        }
-      );
-      /* this.loadEditDocumentList(this.editForm.document_directories[0]); */
     },
     /* 查看 */
     initView() {
@@ -2024,6 +2133,20 @@ export default {
         this.viewForm.custom_variables = "";
       }
 
+      // 处理文档选择
+      if (
+        !this.viewForm.documents ||
+        this.viewForm.documents.length === 0 ||
+        this.viewForm.documents.includes("全部")
+      ) {
+        this.viewForm.documents = ["全部"];
+      } else {
+        // 将文档名称转换为ID(如果需要的话)
+        this.viewForm.documents = this.viewForm.documents.map((docName) => {
+          const doc = this.editDocumentList.find((d) => d.name === docName);
+          return doc ? doc.id : docName;
+        });
+      }
       /* // 处理文档选择
        if (this.editForm.documents.length === 0 || this.editForm.documents.includes('全部')) {
         this.editForm.documents = ['all'];
@@ -2061,4 +2184,27 @@ export default {
   justify-content: flex-end;
   margin: 0 100px 20px;
 }
+::v-deep .avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+}
+.avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
 </style>

部分文件因文件數量過多而無法顯示