feat:优化代码

src/assets/css/dropsize.less

@@ -1,8 +1,17 @@
+.dropsize-col-resize {
+  cursor: col-resize !important;
+}
+
+.dropsize-row-resize {
+  cursor: row-resize !important;
+}
+
 .dropsize-line {
   position: absolute;
   cursor: col-resize;
 
-  &:hover {
+  &:hover,
+  &.dropsize-resizing {
     background-color: #1890ff;
   }
 

src/components/talk/message/AudioMessage.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { ref, reactive } from 'vue'
 import { PlayOne, PauseOne } from '@icon-park/vue-next'
-import { TalkRecordExtraAudio, IMessageRecord } from '@/types/chat'
+import { ITalkRecordExtraAudio, ITalkRecord } from '@/types/chat'
 
 defineProps<{
-  extra: TalkRecordExtraAudio
-  data: IMessageRecord
-  maxWidth: Boolean
+  extra: ITalkRecordExtraAudio
+  data: ITalkRecord
+  maxWidth?: Boolean
 }>()
 
 const audioRef = ref()

src/components/talk/message/CodeMessage.vue

@@ -4,12 +4,12 @@ import { NCode } from 'naive-ui'
 import { Copy, Stretching } from '@icon-park/vue-next'
 import { clipboard } from '@/utils/common'
 import { message } from '@/utils/util'
-import { TalkRecordExtraCode, IMessageRecord } from '@/types/chat'
+import { ITalkRecordExtraCode, ITalkRecord } from '@/types/chat'
 
 const props = defineProps<{
-  extra: TalkRecordExtraCode
-  data: IMessageRecord
-  maxWidth: Boolean
+  extra: ITalkRecordExtraCode
+  data: ITalkRecord
+  maxWidth?: Boolean
 }>()
 
 const lineMumber = props.extra.code.trim().split('\n').length

src/components/talk/message/FileMessage.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { fileFormatSize } from '@/utils/strings'
 import { download } from '@/utils/functions'
-import { TalkRecordExtraFile, IMessageRecord } from '@/types/chat'
+import { ITalkRecordExtraFile, ITalkRecord } from '@/types/chat'
 
 defineProps<{
-  extra: TalkRecordExtraFile
-  data: IMessageRecord
-  maxWidth: Boolean
+  extra: ITalkRecordExtraFile
+  data: ITalkRecord
+  maxWidth?: Boolean
 }>()
 </script>
 

src/components/talk/message/ForwardMessage.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import ForwardRecord from '../ForwardRecord.vue'
-import { TalkRecordExtraForward, IMessageRecord } from '@/types/chat'
+import { ITalkRecordExtraForward, ITalkRecord } from '@/types/chat'
 
 const props = defineProps<{
-  extra: TalkRecordExtraForward
-  data: IMessageRecord
-  maxWidth: Boolean
+  extra: ITalkRecordExtraForward
+  data: ITalkRecord
+  maxWidth?: Boolean
 }>()
 
 const isShowRecord = ref(false)

src/components/talk/message/GroupNoticeMessage.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { TalkRecordExtraGroupNotice, IMessageRecord } from '@/types/chat'
+import { ITalkRecordExtraGroupNotice, ITalkRecord } from '@/types/chat'
 
 defineProps<{
-  extra: TalkRecordExtraGroupNotice
-  data: IMessageRecord
-  maxWidth: Boolean
+  extra: ITalkRecordExtraGroupNotice
+  data: ITalkRecord
+  maxWidth?: Boolean
 }>()
 
 let show = ref(false)

src/components/talk/message/ImageMessage.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { NImage } from 'naive-ui'
 import { getImageInfo } from '@/utils/functions'
-import { TalkRecordExtraImage, IMessageRecord } from '@/types/chat'
+import { ITalkRecordExtraImage, ITalkRecord } from '@/types/chat'
 
 defineProps<{
-  extra: TalkRecordExtraImage
-  data: IMessageRecord
-  maxWidth: Boolean
+  extra: ITalkRecordExtraImage
+  data: ITalkRecord
+  maxWidth?: Boolean
 }>()
 
 const img = (src: string, width = 200) => {

src/components/talk/message/LoginMessage.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { TalkRecordExtraLogin, IMessageRecord } from '@/types/chat'
+import { ITalkRecordExtraLogin, ITalkRecord } from '@/types/chat'
 
 defineProps<{
-  extra: TalkRecordExtraLogin
-  data: IMessageRecord
-  maxWidth: Boolean
+  extra: ITalkRecordExtraLogin
+  data: ITalkRecord
+  maxWidth?: Boolean
 }>()
 
 function getExploreName(userAgent = '') {

src/components/talk/message/MixedMessage.vue

@@ -3,12 +3,12 @@ import { NImage } from 'naive-ui'
 import { textReplaceEmoji } from '@/utils/emojis'
 import { textReplaceLink } from '@/utils/strings'
 import { getImageInfo } from '@/utils/functions'
-import { TalkRecordExtraMixed, IMessageRecord } from '@/types/chat'
+import { ITalkRecordExtraMixed, ITalkRecord } from '@/types/chat'
 
 const props = defineProps<{
-  extra: TalkRecordExtraMixed
-  data: IMessageRecord
-  maxWidth: Boolean
+  extra: ITalkRecordExtraMixed
+  data: ITalkRecord
+  maxWidth?: Boolean
 }>()
 
 const float = props.data.float

src/components/talk/message/TextMessage.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import { textReplaceEmoji } from '@/utils/emojis'
 import { textReplaceLink, textReplaceMention } from '@/utils/strings'
-import { TalkRecordExtraText, IMessageRecord } from '@/types/chat'
+import { ITalkRecordExtraText, ITalkRecord } from '@/types/chat'
 
 const props = defineProps<{
-  extra: TalkRecordExtraText
-  data: IMessageRecord
-  maxWidth?: Boolean
+  extra: ITalkRecordExtraText
+  data: ITalkRecord
+  maxWidth?: boolean
+  source?: 'panel' | 'forward' | 'history'
 }>()
 
 const float = props.data.float
@@ -28,7 +29,8 @@ textContent = textReplaceEmoji(textContent)
     :class="{
       left: float == 'left',
       right: float == 'right',
-      maxwidth: maxWidth
+      maxwidth: maxWidth,
+      'radius-reset': source != 'panel'
     }"
   >
     <pre v-html="textContent" />
@@ -54,6 +56,10 @@ textContent = textReplaceEmoji(textContent)
     max-width: 70%;
   }
 
+  &.radius-reset {
+    border-radius: 0;
+  }
+
   pre {
     white-space: pre-wrap;
     overflow: hidden;

src/components/talk/message/VideoMessage.vue

@@ -5,12 +5,12 @@ import { NImage, NModal, NCard } from 'naive-ui'
 import { Play, Close } from '@icon-park/vue-next'
 import { getImageInfo } from '@/utils/functions'
 import Player from 'xgplayer'
-import { TalkRecordExtraVideo, IMessageRecord } from '@/types/chat'
+import { ITalkRecordExtraVideo, ITalkRecord } from '@/types/chat'
 
 const props = defineProps<{
-  extra: TalkRecordExtraVideo
-  data: IMessageRecord
-  maxWidth: Boolean
+  extra: ITalkRecordExtraVideo
+  data: ITalkRecord
+  maxWidth?: Boolean
 }>()
 
 const img = (src: string, width = 200) => {

src/connect.ts

@@ -84,6 +84,7 @@ class Connect {
     this.onImMessageRead()
     this.onImContactStatus()
     this.onImMessageRevoke()
+    this.onImMessageKeyboard()
   }
 
   onPing() {

src/constant/theme.js

@@ -2,14 +2,13 @@
 export const overrides = {
   common: {
     primaryColor: '#1890ff',
-    // primaryColor: '#4a72ef',
     primaryColorHover: '#1890ff',
     primaryColorPressed: '#1890ff',
     primaryColorSuppl: '#1890ff',
     bodyColor: '#ffffff'
-  }
+  },
 
-  // Dialog: {
-  //   borderRadius: '10px',
-  // },
+  Dialog: {
+    borderRadius: '10px'
+  }
 }

src/directive/dropsize.js

@@ -7,23 +7,26 @@ function getCacheKey(key, direction) {
 }
 
 export default {
-  // binding.value = {min:10,max:100,direction:"top",key:""}
   mounted: function (el, binding) {
     let { min, max, direction = 'right', key = '' } = binding.value
 
-    const cacheKey = getCacheKey(key, direction)
-
     el.style.position = 'relative'
     el.touch = { status: false, pageX: 0, pageY: 0, width: 0, height: 0 }
 
-    let linedom = document.createElement('div')
+    const cacheKey = getCacheKey(key, direction)
+    const cursor = ['left', 'right'].includes(direction) ? 'col-resize' : 'row-resize'
+
+    const linedom = document.createElement('div')
     linedom.className = `dropsize-line dropsize-line-${direction}`
 
     el.linedomMouseup = function () {
       if (!el.touch.status) return
+
       el.touch.status = false
 
-      document.querySelector('body').style.cursor = ''
+      linedom.classList.remove('dropsize-resizing')
+
+      document.querySelector('body').classList.remove(`dropsize-${cursor}`)
     }
 
     el.linedomMousemove = function (e) {
@@ -74,16 +77,16 @@ export default {
         height: el.offsetHeight
       }
 
-      let cursor = ['left', 'right'].includes(direction) ? 'col-resize' : 'row-resize'
+      this.classList.add('dropsize-resizing')
 
-      document.querySelector('body').style.cursor = cursor
+      document.querySelector('body').classList.add(`dropsize-${cursor}`)
 
       document.addEventListener('mouseup', el.linedomMouseup)
       document.addEventListener('mousemove', el.linedomMousemove)
     })
 
     if (cacheKey) {
-      let value = storage.get(cacheKey)
+      const value = storage.get(cacheKey)
 
       if (direction == 'left' || direction == 'right') {
         el.style.width = `${value}px`

src/directive/index.ts

@@ -1,15 +1,19 @@
 import dropsize from './dropsize'
 import focus from './focus'
-import paste from './paste'
-import drag from './drag'
+// import paste from './paste'
 import loading from './loading'
-import copy from './copy'
+// import copy from './copy'
+
+const directives = {
+  dropsize,
+  focus,
+  // paste,
+  loading
+  // copy
+}
 
 export function setupDirective(app: any) {
-  app.directive('dropsize', dropsize)
-  app.directive('focus', focus)
-  app.directive('paste', paste)
-  app.directive('drag', drag)
-  app.directive('loading', loading)
-  app.directive('copy', copy)
+  for (const key in directives) {
+    app.directive(key, directives[key])
+  }
 }

src/directive/loading.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import Loading from './loading.vue'
+import Loading from './inner/loading.vue'
 
 export default {
   mounted(el, binding) {

src/event/socket/keyboard.js

@@ -28,7 +28,7 @@ class Keyboard extends Base {
     let params = this.getTalkParams()
 
     // 判断当前是否正在对话
-    if (params.index_name === null) {
+    if (!params.index_name) {
       return false
     }
 

src/hooks/useTalkRecord.ts

@@ -1,7 +1,7 @@
 import { reactive, computed, nextTick } from 'vue'
 import { ServeTalkRecords } from '@/api/chat'
 import { useDialogueStore } from '@/store'
-import { IMessageRecord } from '@/types/chat'
+import { ITalkRecord } from '@/types/chat'
 import { formatTalkRecord } from '@/utils/talk'
 import { addClass, removeClass } from '@/utils/dom'
 
@@ -14,7 +14,7 @@ interface Params {
 export const useTalkRecord = (uid: number) => {
   const dialogueStore = useDialogueStore()
 
-  const records = computed((): IMessageRecord[] => dialogueStore.records)
+  const records = computed((): ITalkRecord[] => dialogueStore.records)
 
   const location = reactive({
     msgid: '',
@@ -97,7 +97,7 @@ export const useTalkRecord = (uid: number) => {
       return (location.msgid = '')
     }
 
-    const items = (data.items || []).map((item: IMessageRecord) => formatTalkRecord(uid, item))
+    const items = (data.items || []).map((item: ITalkRecord) => formatTalkRecord(uid, item))
 
     if (request.cursor == 0) {
       // 判断是否是初次加载