perf: 优化右侧聊天

package.json

@@ -94,7 +94,6 @@
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
     "chalk": "2.4.2",
-    "deasync": "^0.1.29",
     "compression-webpack-plugin": "^6.1.1",
     "connect": "3.6.6",
     "deasync": "^0.1.29",

src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue

@@ -3,15 +3,16 @@
     <div class="chat-input">
       <el-input
         v-model="value"
-        type="textarea"
         :disabled="isLoading"
-        @compositionstart="isIM = true"
+        :placeholder="$t('common.EnterMessage')"
+        type="textarea"
         @compositionend="isIM = false"
+        @compositionstart="isIM = true"
         @keypress.native="onKeyEnter"
       />
       <div class="input-action">
         <span class="right">
-          <i class="fa fa-send" :class="{'active': value }" @click="onSendHandle" />
+          <i :class="{'active': value }" class="fa fa-send" @click="onSendHandle" />
         </span>
       </div>
     </div>
@@ -21,6 +22,7 @@
 <script>
 import { mapState } from 'vuex'
 import { useChat } from '../../useChat.js'
+
 const { setLoading } = useChat()
 
 export default {

src/components/Apps/ChatAi/components/ChitChat/index.vue

@@ -9,7 +9,6 @@
           </div>
           <div class="content">
             {{ item.content }}
-            <i class="fa fa-arrow-right" />
           </div>
         </div>
       </div>
@@ -18,10 +17,10 @@
     <div class="input-box">
       <el-button
         v-if="isLoading && socket && socket.readyState === 1"
-        round
-        size="small"
         class="stop"
         icon="fa fa-stop-circle-o"
+        round
+        size="small"
         @click="onStopHandle"
       >{{ $tc('common.Stop') }}</el-button>
       <ChatInput @send="onSendHandle" />
@@ -33,7 +32,7 @@
 import ChatInput from './ChatInput.vue'
 import ChatMessage from './ChatMessage.vue'
 import { mapState } from 'vuex'
-import { createWebSocket, closeWebSocket, ws, onSend } from '@/utils/socket'
+import { closeWebSocket, createWebSocket, onSend, ws } from '@/utils/socket'
 import { getInputFocus, useChat } from '../../useChat.js'
 
 const {
@@ -67,10 +66,6 @@ export default {
         {
           title: this.$t('common.introduction.IdeaTitle'),
           content: this.$t('common.introduction.IdeaContent')
-        },
-        {
-          title: this.$t('common.introduction.ArticleTitle'),
-          content: this.$t('common.introduction.ArticleContent')
         }
       ]
     }

src/components/Apps/ChatAi/index.vue

@@ -37,7 +37,7 @@ export default {
     title: {
       type: String,
       default: function() {
-        return this.$t('common.Chat')
+        return this.$t('setting.ChatAI')
       }
     }
   },

src/components/Apps/DrawerPanel/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="drawer" :class="{show: show}" class="drawer">
-    <div class="modal" :style="{'background-color': modal ? 'rgba(0, 0, 0, .3)' : 'transparent'}" />
-    <div class="drawer-panel" :style="{'width': width}">
+    <div :style="{'background-color': modal ? 'rgba(0, 0, 0, .3)' : 'transparent'}" class="modal" />
+    <div :style="{'width': width}" class="drawer-panel">
       <div v-show="!show" ref="dragBox" class="handle-button">
         <i v-if="icon.startsWith('fa') || icon.startsWith('el')" :class="show ? 'el-icon-close': icon" />
         <img v-else :src="icon" alt="">
@@ -142,7 +142,6 @@ export default {
   height: 100vh;
   user-select: none;
   border-radius: 20px 0 0 20px;
-  box-shadow: 0 0 15px 0 rgba(0, 0, 0, .05);
   transition: transform .25s cubic-bezier(.7, .3, .1, 1);
   box-shadow: 0 0 8px 4px #00000014;
   transform: translate(100%);
@@ -195,10 +194,6 @@ export default {
     left: -52px !important;
     width: 52px !important;
     transform: scale(1.1);
-    background-color: rgba(182, 181, 186, .9);
-    img {
-      filter: grayscale(1);
-    }
   }
   i {
     font-size: 20px;

src/i18n/langs/ja.json

@@ -743,12 +743,7 @@
     "Chat": "チャット",
     "CollapseSidebar": "サイドバーを閉じる",
     "introduction": {
-      "ConceptTitle": "🤔 複雑な概念を説明する",
-      "ConceptContent": "ビッグバンについて教えてください。5歳の子供に説明することができます",
-      "IdeaTitle": "🧠 これまでにないアイデアを集めて考える",
-      "IdeaContent": "友達の誕生日に10個のプレゼントアイデアを提供してください",
-      "ArticleTitle": "💭 すぐに朗らかなタイトルを手に入れる",
-      "ArticleContent": "ChatGPTの使用例に関する記事を作成するために、5つの朗々としたタイトルを生成します"
+
     },
     "imExport": {
       "ExportAll": "すべてをエクスポート",

src/i18n/langs/zh.json

@@ -792,14 +792,13 @@
     "Reconnect": "重新连接",
     "NewChat": "新聊天",
     "Chat": "聊天",
+    "EnterMessage": "请输入问题， Enter 发送",
     "CollapseSidebar": "收起侧边栏",
     "introduction": {
-      "ConceptTitle": "🤔 解释一个复杂的概念",
-      "ConceptContent": "告诉我一些关于大爆炸的事情，这样我就可以向我 5 岁的孩子解释",
-      "IdeaTitle": "🧠 集思广益前所未有的想法",
-      "IdeaContent": "请为我朋友的生日提供 10 个礼物创意",
-      "ArticleTitle": "💭 立即获得朗朗上口的标题",
-      "ArticleContent": "为我撰写有关 ChatGPT 用例的文章生成五个朗朗上口的标题"
+      "ConceptTitle": "\uD83E\uDD14 查询命令",
+      "ConceptContent": "如何使用 mysql 命令连接数据库?",
+      "IdeaTitle": "\uD83C\uDF31 部署项目",
+      "IdeaContent": "如何在 CentOS 上部署 Docker?"
     },
     "imExport": {
       "ExportAll": "导出所有",
@@ -1742,7 +1741,7 @@
     "MailSend": "邮件发送",
     "LDAPServerInfo": "LDAP 服务器",
     "LDAPUser": "LDAP 用户",
-    "ChatAI": "聊天 AI",
+    "ChatAI": "智能问答",
     "helpText": {
       "TempPassword": "临时密码有效期为 300 秒，使用后立刻失效",
       "ApiKeyList": "使用 Api key 签名请求头进行认证，每个请求的头部是不一样的， 相对于 Token 方式，更加安全，请查阅文档使用;<br>为降低泄露风险，Secret 仅在生成时可以查看, 每个用户最多支持创建 10 个",