聊天工具栏抽组件

package.json

@@ -1,6 +1,6 @@
 {
   "name": "anylink-web",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "type": "module",
   "scripts": {

src/const/userConst.js

@@ -1,6 +1,6 @@
 export const CLIENT_TYPE = 2
 export const CLIENT_NAME = 'web'
-export const CLIENT_VERSION = '1.0.0'
+export const CLIENT_VERSION = '1.0.1'
 
 export const LEAVING_AFTER_DURATION = 5 * 60 * 1000
 export const LOGOUT_AFTER_DURATION = 8 * 60 * 60 * 1000

src/views/message/MessageLayout.vue

@@ -6,10 +6,6 @@ import {
   VideoCamera,
   MoreFilled,
   CirclePlus,
-  LocationInformation,
-  Clock,
-  FolderAdd,
-  CreditCard,
   ArrowDownBold,
   ArrowUp
 } from '@element-plus/icons-vue'
@@ -17,7 +13,7 @@ import DragLine from '@/components/common/DragLine.vue'
 import SearchBox from '@/components/search/SearchBox.vue'
 import AddButton from '@/components/common/AddButton.vue'
 import SessionItem from '@/views/message/components/SessionItem.vue'
-import InputTool from '@/views/message/components/InputTool.vue'
+import ToolBar from './components/ToolBar.vue'
 import InputEditor from '@/views/message/components/InputEditor.vue'
 import MessageItem from '@/views/message/components/MessageItem.vue'
 import SessionTag from '@/views/message/components/SessionTag.vue'
@@ -50,8 +46,6 @@ import { BEGIN_MSG_ID } from '@/const/msgConst'
 import EditDialog from '@/components/common/EditDialog.vue'
 import AddOprMenu from './components/AddOprMenu.vue'
 import MessageGroupRightSide from './components/MessageGroupRightSide.vue'
-import EmojiBox from './components/EmojiBox.vue'
-import EmojiIcon from '@/assets/svg/emoji.svg'
 import HashNoData from '@/components/common/HasNoData.vue'
 import { playMsgSend } from '@/js/utils/audio'
 
@@ -79,7 +73,7 @@ const newMsgTips = ref({
   firstElement: null
 })
 
-const isShowEmojiBox = ref(false)
+const toolBarRef = ref()
 
 const myAccount = computed(() => {
   return userData.user.account
@@ -481,7 +475,7 @@ const handleSendMessage = (content, resendSeq = '') => {
     return
   }
 
-  isShowEmojiBox.value = false
+  toolBarRef.value.closeWindow()
 
   const msg = {
     sessionId: selectedSessionId.value,
@@ -1143,37 +1137,11 @@ const onSendEmoji = (key) => {
             <div class="input-box bdr-t" :style="{ height: inputBoxHeight + 'px' }">
               <el-container class="input-box-container">
                 <el-header class="input-box-header">
-                  <div class="tool-set">
-                    <div v-if="!isNotInGroup" class="left-tools">
-                      <InputTool tips="表情" @click="isShowEmojiBox = true">
-                        <template #iconSlot>
-                          <EmojiIcon />
-                        </template>
-                      </InputTool>
-                      <InputTool tips="文件" @click="ElMessage.warning('功能开发中')">
-                        <template #iconSlot>
-                          <FolderAdd />
-                        </template>
-                      </InputTool>
-                      <InputTool tips="代码" @click="ElMessage.warning('功能开发中')">
-                        <template #iconSlot>
-                          <CreditCard />
-                        </template>
-                      </InputTool>
-                      <InputTool tips="位置" @click="ElMessage.warning('功能开发中')">
-                        <template #iconSlot>
-                          <LocationInformation />
-                        </template>
-                      </InputTool>
-                    </div>
-                    <div class="right-tools">
-                      <InputTool tips="聊天记录" @click="ElMessage.warning('功能开发中')">
-                        <template #iconSlot>
-                          <Clock />
-                        </template>
-                      </InputTool>
-                    </div>
-                  </div>
+                  <ToolBar
+                    ref="toolBarRef"
+                    :isShowToolSet="!isNotInGroup"
+                    @sendEmoji="onSendEmoji"
+                  ></ToolBar>
                   <DragLine
                     direction="top"
                     :min="inputBoxHeightMin"
@@ -1181,11 +1149,6 @@ const onSendEmoji = (key) => {
                     :origin-size="inputBoxHeight"
                     @drag-update="onInputBoxDragUpdate"
                   ></DragLine>
-                  <EmojiBox
-                    :isShow="isShowEmojiBox"
-                    @close="isShowEmojiBox = false"
-                    @sendEmoji="onSendEmoji"
-                  ></EmojiBox>
                 </el-header>
                 <el-main class="input-box-main">
                   <div
@@ -1446,20 +1409,6 @@ const onSendEmoji = (key) => {
               height: auto;
               padding: 0;
               position: relative;
-
-              .tool-set {
-                display: flex;
-                position: relative;
-
-                .left-tools {
-                  display: flex;
-                }
-
-                .right-tools {
-                  position: absolute;
-                  right: 0;
-                }
-              }
             }
 
             .input-box-main {

src/views/message/components/ToolBar.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { ref } from 'vue'
+import { LocationInformation, Clock, FolderAdd, CreditCard } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import EmojiIcon from '@/assets/svg/emoji.svg'
+import EmojiBox from './EmojiBox.vue'
+import InputTool from '@/views/message/components/InputTool.vue'
+
+const props = defineProps(['isShowToolSet'])
+const emit = defineEmits(['sendEmoji'])
+
+const isShowEmojiBox = ref(false)
+
+const onSelectedFile = () => {
+  console.log('onSelectedFile')
+}
+
+const onSendEmoji = (key) => {
+  emit('sendEmoji', key)
+}
+
+/**
+ * 关掉bar上弹出的窗口
+ */
+const closeWindow = () => {
+  isShowEmojiBox.value = false
+}
+
+defineExpose({
+  closeWindow
+})
+</script>
+
+<template>
+  <div class="tool-set">
+    <div v-if="props.isShowToolSet" class="left-tools">
+      <InputTool tips="表情" @click="isShowEmojiBox = true">
+        <template #iconSlot>
+          <EmojiIcon />
+        </template>
+      </InputTool>
+      <el-upload :auto-upload="false" :show-file-list="false" :on-change="onSelectedFile">
+        <template #trigger>
+          <InputTool tips="文件">
+            <template #iconSlot>
+              <FolderAdd />
+            </template>
+          </InputTool>
+        </template>
+      </el-upload>
+      <InputTool tips="代码" @click="ElMessage.warning('功能开发中')">
+        <template #iconSlot>
+          <CreditCard />
+        </template>
+      </InputTool>
+      <InputTool tips="位置" @click="ElMessage.warning('功能开发中')">
+        <template #iconSlot>
+          <LocationInformation />
+        </template>
+      </InputTool>
+    </div>
+    <div class="right-tools">
+      <InputTool tips="聊天记录" @click="ElMessage.warning('功能开发中')">
+        <template #iconSlot>
+          <Clock />
+        </template>
+      </InputTool>
+    </div>
+  </div>
+  <EmojiBox
+    :isShow="isShowEmojiBox"
+    @close="isShowEmojiBox = false"
+    @sendEmoji="onSendEmoji"
+  ></EmojiBox>
+</template>
+
+<style lang="scss" scoped>
+.tool-set {
+  height: 42px;
+  display: flex;
+  position: relative;
+
+  .left-tools {
+    display: flex;
+
+    // 调整文件按钮选中之后的颜色，默认是rgb(64, 158, 255)
+    :deep(.el-upload) {
+      color: #000;
+      fill: #000;
+      outline-color: #000;
+    }
+  }
+
+  .right-tools {
+    position: absolute;
+    right: 0;
+  }
+}
+</style>