types: 修正 vue组件 的 props 类型定义

src/components/Icon/index.vue

@@ -1,22 +1,20 @@
 <script lang="ts" setup>
 import { computed, type CSSProperties } from 'vue'
-const props = defineProps({
+
+interface Props {
   /** 图标名称 */
-  icon: {
-    type: String,
-    default: '',
-  },
+  icon: string
   /** 图标尺寸 */
-  size: {
-    type: [Number, String],
-    default: 16,
-  },
+  size?: number | string
   /** 旋转角度 */
-  rotate: Number,
+  rotate?: number
   /** 加载态 */
-  spin: Boolean,
+  spin?: boolean
   /** 是否多色 */
-  colorful: Boolean,
+  colorful?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  size: 16,
 })
 
 const iconCls = computed(() => {

src/components/RenderMessage/emoji.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
-import { ref, type PropType } from 'vue'
+import { ref } from 'vue'
 import type { EmojiBody } from '@/services/types'
 
-defineProps({
-  body: {
-    type: Object as PropType<EmojiBody>,
-    required: true,
-  },
-})
+defineProps<{ body: EmojiBody }>()
 
 const hasLoadError = ref(false)
 const isLoading = ref(true)

src/components/RenderMessage/file.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
-import { type PropType, computed } from 'vue'
+import { computed } from 'vue'
 import { Close } from '@element-plus/icons-vue'
 import { getFileSuffix, formatBytes } from '@/utils'
 import type { FileBody } from '@/services/types'
 import useDownloadQuenuStore from '@/stores/downloadQuenu'
 
 const { downloadObjMap, download, quenu, cancelDownload } = useDownloadQuenuStore()
 
-const props = defineProps({
-  body: {
-    type: Object as PropType<FileBody>,
-    required: true,
-  },
-})
+const props = defineProps<{ body: FileBody }>()
 
 // 下载文件
 const downloadFile = () => {

src/components/RenderMessage/image.vue

@@ -1,15 +1,10 @@
 <script setup lang="ts">
-import { ref, type PropType, computed } from 'vue'
+import { ref, computed } from 'vue'
 import type { ImageBody } from '@/services/types'
 import { useImgPreviewStore } from '@/stores/preview'
 import { formatImage } from '@/utils'
 
-const props = defineProps({
-  body: {
-    type: Object as PropType<ImageBody>,
-    required: true,
-  },
-})
+const props = defineProps<{ body: ImageBody }>()
 
 const imageStore = useImgPreviewStore()
 const hasLoadError = ref(false)

src/components/RenderMessage/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import { MsgEnum } from '@/enums'
 import type { MsgType } from '@/services/types'
 import Image from './image.vue'
@@ -20,12 +19,7 @@ const componentMap = {
   [MsgEnum.EMOJI]: Emoji,
 }
 
-defineProps({
-  message: {
-    type: Object as PropType<MsgType>,
-    required: true,
-  },
-})
+defineProps<{ message: MsgType }>()
 </script>
 
 <template>

src/components/RenderMessage/text.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
-import { computed, type PropType } from 'vue'
+import { computed } from 'vue'
 import type { TextBody } from '@/services/types'
 
-const props = defineProps({
-  body: {
-    type: Object as PropType<TextBody>,
-    required: true,
-  },
-})
+const props = defineProps<{ body: TextBody }>()
 
 // 获取所有匹配的字符串
 const urlMap = props.body.urlContentMap || {}

src/components/RenderMessage/video.vue

@@ -1,15 +1,9 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import type { VideoBody } from '@/services/types'
 import { useVideoPreviewStore } from '@/stores/preview'
 import { formatImage } from '@/utils'
 
-const props = defineProps({
-  body: {
-    type: Object as PropType<VideoBody>,
-    required: true,
-  },
-})
+const props = defineProps<{ body: VideoBody }>()
 
 const videoStore = useVideoPreviewStore()
 

src/components/RenderMessage/voice.vue

@@ -1,14 +1,9 @@
 <script setup lang="ts">
-import { type PropType, computed } from 'vue'
+import { computed } from 'vue'
 import type { VoiceBody } from '@/services/types'
 import { useVoicePreviewStore } from '@/stores/preview'
 
-const props = defineProps({
-  body: {
-    type: Object as PropType<VoiceBody>,
-    required: true,
-  },
-})
+const props = defineProps<{ body: VoiceBody }>()
 const voiceStore = useVoicePreviewStore()
 
 // 判断当前这个消息组件是否正在播放

src/components/VideoPlayer/index.vue

@@ -2,12 +2,7 @@
 import { onMounted, onUnmounted, ref } from 'vue'
 import Player from 'xgplayer'
 
-const props = defineProps({
-  url: {
-    type: String,
-    default: '',
-  },
-})
+const props = defineProps<{ url: string }>()
 
 const player = ref<Player>()
 

src/components/avatar/index.vue

@@ -1,32 +1,25 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-defineProps({
+interface Props {
   /** 头像地址 */
-  src: {
-    type: String,
-    default: '',
-  },
+  src?: string
   /** 图标尺寸 */
-  size: {
-    type: Number,
-    default: 40,
-  },
+  size?: number
   /** 圆形(circle)和正方形(square)两种 */
-  shape: {
-    type: String,
-    default: 'circle',
-  },
+  shape?: 'circle' | 'square'
   /** 是否显示状态 */
-  showStatus: {
-    type: Boolean,
-    default: false,
-  },
+  showStatus?: boolean
   /** 在线状态 */
-  online: {
-    type: Boolean,
-    default: true,
-  },
+  online?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  src: '',
+  size: 40,
+  shape: 'circle',
+  showStatus: false,
+  online: true,
 })
 
 const hasError = ref(false)

src/services/apis.ts

@@ -55,7 +55,10 @@ export default {
   blockUser: (data: { uid: number }) => putRequest<void>(urls.blockUser, data),
   /** 获取临时上传链接 */
   getUploadUrl: (params: any) =>
-    getRequest<{ downloadUrl: string; uploadUrl: string }>(urls.fileUpload, { localCache: 0, params }),
+    getRequest<{ downloadUrl: string; uploadUrl: string }>(urls.fileUpload, {
+      localCache: 0,
+      params,
+    }),
   /** 新增表情包 */
   addEmoji: (data: { uid: number; expressionUrl: string }) =>
     postRequest<MessageType>(urls.addEmoji, data),

src/views/Home/components/ChatBox/MsgInput/index.vue

@@ -18,30 +18,25 @@ import PasteImageDialog from '../PasteImageDialog/index.vue'
 
 // 关闭透传 attrs 到组件根节点，传递到子节点  v-bind="$attrs"
 defineOptions({ inheritAttrs: false })
-const props = defineProps({
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  mentions: {
-    type: Array<IMention>,
-    default: () => [],
-  },
-  maxLength: {
-    type: Number,
-    default: -1,
-  },
-  minHeight: {
-    type: Number,
-    default: -1,
-  },
+
+interface Props {
+  // 是否启用 contentEditable
+  disabled?: boolean
+  // v-model 的 value
+  modelValue: string
+  // 艾特 成员列表数据
+  mentions?: IMention[]
+  // 最大长度
+  maxLength?: number
   // 劫持
-  className: String,
-  style: Object,
+  className?: string
+  style?: object
+}
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  modelValue: '',
+  mentions: () => [],
+  maxLength: -1,
 })
 
 // v-model
@@ -132,7 +127,7 @@ watch(
   () => {
     personList.value = cachedStore.filterUsers(searchKey.value) as CacheUserItem[]
   },
-  { immediate: true },
+  // { immediate: true },
 )
 
 // 关闭选人弹窗时，重置选择的人的位置
@@ -528,6 +523,7 @@ const getKey = (item: CacheUserItem) => item.uid
     :class="[className, $attrs.class]"
     :style="[style as StyleValue, $attrs.style as StyleValue]"
   >
+    <!-- 输入框 -->
     <div
       ref="editorRef"
       v-bind="$attrs"
@@ -543,6 +539,7 @@ const getKey = (item: CacheUserItem) => item.uid
       @paste="onPaste"
     />
 
+    <!-- 人员选择浮层 -->
     <div
       v-show="showDialog"
       className="at-mentions__dialog"
@@ -561,6 +558,7 @@ const getKey = (item: CacheUserItem) => item.uid
       />
     </div>
 
+    <!-- 粘贴图片弹窗 -->
     <PasteImageDialog />
   </div>
 </template>

src/views/Home/components/ChatBox/MsgInput/item.vue

@@ -1,21 +1,13 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import type { CacheUserItem } from '@/services/types'
 
-const props = defineProps({
-  // 消息体
-  item: {
-    type: Object as PropType<CacheUserItem>,
-    required: true,
-  },
-  activeIndex: {
-    type: Number,
-  },
-  index: {
-    type: Number,
-  },
-  onSelect: Function,
-})
+interface Props {
+  item: CacheUserItem
+  activeIndex: number
+  index: number
+  onSelect?: (uid: number) => void
+}
+const props = defineProps<Props>()
 
 const onClick = () => {
   props.onSelect?.(props.item.uid)

src/views/Home/components/ChatBox/PasteImageDialog/index.vue

@@ -35,7 +35,7 @@ watchEffect(() => {
     visible.value = false
   }
 })
-const onClear = () =>{
+const onClear = () => {
   imageBody.value.url && URL.revokeObjectURL(imageBody.value.url)
   pasteFile.value = undefined
   imageBody.value = {
@@ -50,7 +50,6 @@ const onSend = async () => {
   visible.value = false // 关闭弹窗
   onClear()
 }
-
 </script>
 
 <template>