feat:优化代码

env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { ComponentOptions } from 'vue'
+  const componentOptions: ComponentOptions
+  export default componentOptions
+}
+
+declare module 'quill-image-uploader'

src/components/common/DialogApi.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 import { defineComponent, getCurrentInstance } from 'vue'
 import { useDialog } from 'naive-ui'
 

src/components/common/MessageApi.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 import { defineComponent, getCurrentInstance } from 'vue'
 import { useMessage } from 'naive-ui'
 

src/components/common/NotificationApi.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 import { defineComponent, getCurrentInstance } from 'vue'
 import { useNotification } from 'naive-ui'
 

src/components/editor/Editor.vue

@@ -664,6 +664,13 @@ html[theme-mode='dark'] {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    display: flex;
+    justify-content: space-between;
+
+    .quote-card-remove {
+      margin-right: 15px;
+      font-size: 18px;
+    }
   }
 
   .quote-card-meta {

src/components/editor/MeEditorCode.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script lang="ts" setup>
 import { ref, reactive, computed } from 'vue'
 import { NModal, NInput, NPopselect } from 'naive-ui'
 import { options } from '@/constant/highlight.js'
@@ -17,11 +17,7 @@ const langText = computed(() => {
     return item.value == model.lang
   })
 
-  if (data) {
-    return data.label
-  }
-
-  return '请选择语言类型'
+  return data ? data.label : '请选择语言类型'
 })
 
 const isCanSubmit = computed(() => {

src/components/editor/MeEditorEmoticon.vue

@@ -1,37 +1,37 @@
-<script setup>
+<script lang="ts" setup>
 import { ref, computed } from 'vue'
 import { useEditorStore } from '@/store'
 import { UploadOne, Delete } from '@icon-park/vue-next'
-import { emojiList as emoji } from '@/utils/emojis'
+import { emojis } from '@/utils/emojis'
 
 const emit = defineEmits(['on-select'])
 const editorStore = useEditorStore()
 const fileImageRef = ref()
 const tabIndex = ref(0)
-const items = computed(() => editorStore.emoticon.items)
+const items = computed<any[]>(() => editorStore.emoticon.items)
 
 // 触发上传按钮事件
 const onTriggerUpload = () => {
   fileImageRef.value.click()
 }
 
 // 上传表情包
-const onUpload = (e) => {
+const onUpload = (e: any) => {
   let file = e.target.files[0]
 
   editorStore.uploadUserEmoticon(file)
 }
 
 // 删除表情包
-const onDelete = (index, id) => {
+const onDelete = (index: number, id: number) => {
   editorStore.removeUserEmoticon({ index, id })
 }
 
-const onTabs = (index) => {
+const onTabs = (index: number) => {
   tabIndex.value = index
 }
 
-const onSendEmoticon = (type, value, img = '') => {
+const onSendEmoticon = (type: any, value: any, img = '') => {
   if (img) {
     const imgSrcReg = /<img.*?src='(.*?)'/g
     let match = imgSrcReg.exec(img)
@@ -57,7 +57,7 @@ const onSendEmoticon = (type, value, img = '') => {
       <div class="symbol-box" v-if="tabIndex == 0">
         <div class="options">
           <div
-            v-for="(img, key) in emoji.emojis"
+            v-for="(img, key) in emojis"
             v-html="img"
             :key="key"
             @click="onSendEmoticon(1, key, img)"

src/components/editor/MeEditorImage.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script lang="ts" setup>
 import { reactive, onMounted } from 'vue'
 import { NModal } from 'naive-ui'
 import { fileFormatSize } from '@/utils/strings'
@@ -12,7 +12,7 @@ const props = defineProps({
   }
 })
 
-const state = reactive({
+const state: any = reactive({
   show: true,
   src: '',
   size: '',

src/components/editor/MeEditorRecorder.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script lang="ts" setup>
 import { ref, onUnmounted } from 'vue'
 import { NModal } from 'naive-ui'
 import { Voice } from '@icon-park/vue-next'
@@ -11,7 +11,7 @@ const isShow = ref(true)
 const status = ref(0) // 0 未开始 1录制中 2已结束
 const animation = ref(false)
 const duration = ref(0)
-let recorder = null
+let recorder: any = null
 
 const onMaskClick = () => {
   onDestroy()

src/components/editor/MeEditorVote.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script lang="ts" setup>
 import { reactive, computed, ref } from 'vue'
 import { NModal, NForm, NFormItem, NInput, NRadioGroup, NSpace, NRadio } from 'naive-ui'
 import { Delete } from '@icon-park/vue-next'
@@ -31,7 +31,7 @@ const addOption = () => {
   model.options.push({ value: '' })
 }
 
-const delOption = (index) => {
+const delOption = (index: number) => {
   model.options.length > 2 && model.options.splice(index, 1)
 }
 

src/components/editor/formats/quote.ts

@@ -7,7 +7,7 @@ class QuoteBlot extends BlockEmbed {
   static tagName = 'div'
   static className = 'quote-card'
 
-  static create(value): any {
+  static create(value: any): any {
     const node = super.create(value)
 
     const { id, title, describe, image } = value
@@ -22,9 +22,18 @@ class QuoteBlot extends BlockEmbed {
     const quoteCardContent = document.createElement('span')
     quoteCardContent.classList.add('quote-card-content')
 
+    const close = document.createElement('span')
+    close.classList.add('quote-card-remove')
+    close.textContent = '×'
+    close.addEventListener('click', () => {
+      node.remove()
+    })
+
     const quoteCardTitle = document.createElement('span')
     quoteCardTitle.classList.add('quote-card-title')
     quoteCardTitle.textContent = title
+    quoteCardTitle.appendChild(close)
+
     quoteCardContent.appendChild(quoteCardTitle)
 
     if (image.length == 0) {
@@ -35,16 +44,20 @@ class QuoteBlot extends BlockEmbed {
     } else {
       const iconImg = document.createElement('img')
       iconImg.setAttribute('src', image)
-      iconImg.style = 'max-width:30px;max-height:30px;'
+      iconImg.setAttribute('style', 'width:30px;height:30px;margin-right:10px;')
       quoteCardContent.appendChild(iconImg)
     }
 
+    node.ondblclick = () => {
+      console.log('quote card ondblclick')
+    }
+
     node.appendChild(quoteCardContent)
 
     return node
   }
 
-  static value(node): any {
+  static value(node: HTMLElement): any {
     return {
       id: node.dataset.id,
       title: node.dataset.title,

src/components/editor/util.ts

@@ -1,4 +1,4 @@
-import { Delta } from 'quill'
+import { Delta } from '@vueup/vue-quill'
 
 interface Item {
   type: number
@@ -13,11 +13,11 @@ interface AnalysisResp {
   quoteId: string // 引用的消息ID
 }
 
-function removeLeadingNewlines(str) {
+function removeLeadingNewlines(str: string) {
   return str.replace(/^[\n\s]+/, '')
 }
 
-function removeTrailingNewlines(str) {
+function removeTrailingNewlines(str: string) {
   return str.replace(/[\n\s]+$/, '')
 }
 
@@ -31,30 +31,32 @@ export function deltaToMessage(delta: Delta): AnalysisResp {
   }
 
   for (const iterator of delta.ops) {
+    const insert: any = iterator.insert
+
     let node: any = null
     if (resp.items.length) {
       node = resp.items[resp.items.length - 1]
     }
 
-    if (typeof iterator.insert === 'string') {
-      if (!iterator.insert || iterator.insert == '\n') continue
+    if (typeof insert === 'string') {
+      if (!insert || insert == '\n') continue
 
       if (node && node.type == 1) {
-        node.content = node.content + iterator.insert
+        node.content = node.content + insert
         continue
       }
 
       resp.items.push({
         type: 1,
-        content: iterator.insert
+        content: insert
       })
 
       continue
     }
 
     // @好友
-    if (iterator.insert.mention) {
-      const mention = iterator.insert.mention
+    if (insert && insert.mention) {
+      const mention = insert.mention
 
       resp.mentions.push({
         name: `${mention.denotationChar}${mention.value}`,
@@ -75,17 +77,17 @@ export function deltaToMessage(delta: Delta): AnalysisResp {
     }
 
     // 图片
-    if (iterator.insert.image) {
+    if (insert && insert.image) {
       resp.items.push({
         type: 3,
-        content: iterator.insert.image
+        content: insert.image
       })
       continue
     }
 
     // 表情
-    if (iterator.insert.emoji) {
-      const emoji = iterator.insert.emoji
+    if (insert && insert.emoji) {
+      const { emoji } = insert
 
       if (node && node.type == 1) {
         node.content = node.content + emoji.alt
@@ -100,8 +102,8 @@ export function deltaToMessage(delta: Delta): AnalysisResp {
       continue
     }
 
-    if (iterator.insert.quote) {
-      resp.quoteId = iterator.insert.quote.id
+    if (insert && insert.quote) {
+      resp.quoteId = insert.quote.id
       continue
     }
   }
@@ -136,29 +138,31 @@ export function deltaToString(delta: Delta): string {
   let content = ''
 
   for (const o of delta.ops) {
-    if (typeof o.insert === 'string') {
-      if (!o.insert || o.insert == '\n') continue
+    const insert: any = o.insert
+
+    if (typeof insert === 'string') {
+      if (!insert || insert == '\n') continue
 
-      content += o.insert
+      content += insert
       continue
     }
 
     // @好友
-    if (o.insert.mention) {
-      const mention = o.insert.mention
+    if (insert && insert.mention) {
+      const { mention } = insert
       content += ` ${mention.denotationChar}${mention.value} `
       continue
     }
 
     // 图片
-    if (o.insert.image) {
+    if (insert && insert.image) {
       content += '[图片]'
       continue
     }
 
     // 表情
-    if (o.insert.emoji) {
-      content += o.insert.emoji.alt
+    if (insert && insert.emoji) {
+      content += insert.emoji.alt
       continue
     }
   }

src/components/group/GroupApply.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script lang="ts" setup>
 import { ref } from 'vue'
 import { NModal, NForm, NFormItem, NInput } from 'naive-ui'
 import { ServeCreateGroupApply } from '@/api/group'
@@ -23,12 +23,12 @@ const onMaskClick = () => {
 const onSubmit = () => {
   loading.value = true
 
-  let response = ServeCreateGroupApply({
+  let resp = ServeCreateGroupApply({
     group_id: props.gid,
     remark: remark.value
   })
 
-  response.then((res) => {
+  resp.then((res) => {
     if (res.code == 200) {
       window['$message'].success('入群申请提交成功...')
       onMaskClick()
@@ -37,7 +37,7 @@ const onSubmit = () => {
     }
   })
 
-  response.finally(() => {
+  resp.finally(() => {
     loading.value = false
   })
 }