feat:优化代码

src/App.vue

@@ -17,14 +17,16 @@ import { bus } from '@/utils/event-bus'
 import { isLoggedIn } from '@/utils/auth'
 import { NotificationApi, MessageApi, DialogApi } from '@/components/common'
 import UserCardModal from '@/components/user/UserCardModal.vue'
-import { useUserModal } from '@/hooks/useUserModal'
-import { useThemeMode } from '@/hooks/useThemeMode'
-import { useVisibilityChange } from '@/hooks/useVisibilityChange'
-import { useAccessPrompt } from '@/hooks/useAccessPrompt'
-import { useUnreadMessage } from '@/hooks/useUnreadMessage'
-import { useConnectStatus } from '@/hooks/useConnectStatus'
-import { useClickEvent } from '@/hooks/useClickEvent'
 import { ContactConst } from '@/constant/event-bus'
+import {
+  useProvideUserModal,
+  useThemeMode,
+  useVisibilityChange,
+  useAccessPrompt,
+  useUnreadMessage,
+  useConnectStatus,
+  useClickEvent
+} from '@/hooks'
 
 IconProvider({
   ...DEFAULT_ICON_CONFIGS,
@@ -34,13 +36,13 @@ IconProvider({
   strokeLinejoin: 'bevel'
 })
 
-const { uid: showUserId, isShow: isShowUser } = useUserModal()
+const { uid: showUserId, isShow: isShowUser } = useProvideUserModal()
 const { getDarkTheme, getThemeOverride } = useThemeMode()
 
 const userStore = useUserStore()
 const talkStore = useTalkStore()
 
-const onChangeRemark = (value) => {
+const onChangeRemark = (value: string) => {
   bus.emit(ContactConst.UpdateRemark, value)
   talkStore.setRemark(value)
 }

src/components/editor/Editor.vue

@@ -30,7 +30,7 @@ import MeEditorEmoticon from './MeEditorEmoticon.vue'
 import MeEditorCode from './MeEditorCode.vue'
 import MeEditorRecorder from './MeEditorRecorder.vue'
 import { ServeUploadImage } from '@/api/upload'
-import { useEventBus } from '@/hooks/useEventBus'
+import { useEventBus } from '@/hooks'
 
 Quill.register('formats/emoji', EmojiBlot)
 Quill.register('formats/quote', QuoteBlot)

src/components/group/GroupPanel.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { reactive, computed, watch, ref, inject } from 'vue'
+import { reactive, computed, watch, ref } from 'vue'
 import { NEmpty, NPopover, NPopconfirm } from 'naive-ui'
 import { useUserStore } from '@/store'
 import GroupLaunch from './GroupLaunch.vue'
@@ -11,10 +11,10 @@ import {
   ServeSecedeGroup,
   ServeUpdateGroupCard
 } from '@/api/group'
+import { useInject } from '@/hooks'
 
 const userStore = useUserStore()
-
-const user: any = inject('$user')
+const { showUserInfoModal } = useInject()
 
 const emit = defineEmits(['close', 'to-talk'])
 const props = defineProps({
@@ -77,7 +77,7 @@ const onShowManage = (vallue: any) => {
 const onGroupCallBack = () => {}
 
 const onToInfo = (item: any) => {
-  user(item.user_id)
+  showUserInfoModal(item.user_id)
 }
 
 /**

src/components/group/manage/ApplyTab.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { ref, computed, h, inject, onMounted } from 'vue'
+import { ref, computed, h, onMounted } from 'vue'
 import { NSpace, NInput } from 'naive-ui'
 import { Search, CheckSmall, Close, Redo } from '@icon-park/vue-next'
 import { ServeGetGroupApplyList, ServeDeleteGroupApply, ServeAgreeGroupApply } from '@/api/group'
 import { throttle } from '@/utils/common'
+import { useInject } from '@/hooks'
 
 interface Item {
   id: number
@@ -27,8 +28,7 @@ const props = defineProps({
 const keywords = ref('')
 const batchDelete = ref(false)
 const items = ref<Item[]>([])
-
-const user: any = inject('$user')
+const { showUserInfoModal } = useInject()
 
 const filterSearch = computed(() => {
   if (!keywords.value.length) {
@@ -52,7 +52,7 @@ const onLoadData = () => {
 }
 
 const onUserInfo = (item: Item) => {
-  user(item.user_id)
+  showUserInfoModal(item.user_id)
 }
 
 const onRowClick = (item: Item) => {

src/components/group/manage/MemberTab.vue

@@ -5,6 +5,7 @@ import { Search, Plus } from '@icon-park/vue-next'
 import GroupLaunch from '../GroupLaunch.vue'
 import { useUserStore } from '@/store'
 import { StateDropdown } from '@/types/global'
+import { useInject } from '@/hooks'
 
 import {
   ServeGetGroupMembers,
@@ -34,7 +35,7 @@ interface Item {
   motto?: string
 }
 
-const user: any = inject('$user')
+const { showUserInfoModal } = useInject()
 const userStore = useUserStore()
 const isGroupLaunch = ref(false)
 const keywords = ref('')
@@ -136,7 +137,7 @@ const onRowClick = (item: Item) => {
       item.is_delete = !item.is_delete
     }
   } else {
-    user(item.user_id)
+    showUserInfoModal(item.user_id)
   }
 }
 
@@ -149,7 +150,7 @@ const onCancelDelete = () => {
 }
 
 const onUserInfo = (item: Item) => {
-  user(item.user_id)
+  showUserInfoModal(item.user_id)
 }
 
 const onAssignAdmin = (item: Item) => {

src/components/talk/ForwardRecord.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { ref, inject, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import Loading from '@/components/base/Loading.vue'
 import { ServeGetForwardRecords } from '@/api/chat'
 import { MessageComponents } from '@/constant/message'
 import { ITalkRecord } from '@/types/chat'
+import { useInject } from '@/hooks'
 
 const emit = defineEmits(['close'])
 const props = defineProps({
@@ -12,7 +13,8 @@ const props = defineProps({
     default: 0
   }
 })
-const user: any = inject('$user')
+
+const { showUserInfoModal } = useInject()
 const isShow = ref(true)
 const items = ref<ITalkRecord[]>([])
 const title = ref('会话记录')
@@ -60,7 +62,7 @@ onMounted(() => {
       <Loading v-if="items.length === 0" />
 
       <div v-for="item in items" :key="item.msg_id" class="message-item">
-        <div class="left-box pointer" @click="user(item.user_id)">
+        <div class="left-box pointer" @click="showUserInfoModal(item.user_id)">
           <im-avatar :src="item.avatar" :size="30" :username="item.nickname" />
         </div>
 

src/components/talk/HistoryRecord.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { ref, reactive, inject, onMounted } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import Loading from '@/components/base/Loading.vue'
 import { ServeFindTalkRecords } from '@/api/chat'
 import { Down, Calendar } from '@icon-park/vue-next'
 import * as message from '@/constant/message'
 import { ITalkRecord } from '@/types/chat'
+import { useInject } from '@/hooks'
 
 const emit = defineEmits(['close'])
 const props = defineProps({
@@ -17,7 +18,7 @@ const props = defineProps({
     default: 0
   }
 })
-const showUserModal: any = inject('$user')
+const { showUserInfoModal } = useInject()
 const model = reactive({
   cursor: 0,
   limit: 30,
@@ -163,7 +164,7 @@ onMounted(() => {
               :src="item.avatar"
               :size="30"
               :username="item.nickname"
-              @click="showUserModal(item.user_id)"
+              @click="showUserInfoModal(item.user_id)"
             />
           </div>
 

src/components/talk/message/CodeMessage.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { NCode } from 'naive-ui'
 import { Copy, Stretching } from '@icon-park/vue-next'
 import { clipboard } from '@/utils/common'
-import { message } from '@/utils/util'
+import { useUtil } from '@/hooks'
 import { ITalkRecordExtraCode, ITalkRecord } from '@/types/chat'
 
 const props = defineProps<{
@@ -12,12 +12,13 @@ const props = defineProps<{
   maxWidth?: Boolean
 }>()
 
+const { useMessage } = useUtil()
 const lineMumber = props.extra.code.trim().split('\n').length
 const full = ref(false)
 
 const onClipboard = () => {
   clipboard(props.extra.code, () => {
-    message().success('复制成功')
+    useMessage.success('复制成功')
   })
 }
 </script>

src/components/talk/message/system/SysGroupCancelMutedMessage.vue

@@ -1,7 +1,8 @@
 <script setup>
 import './sys-message.less'
-import { inject } from 'vue'
-const showUserModal = inject('$user')
+import { useInject } from '@/hooks'
+
+const { showUserInfoModal } = useInject()
 
 defineProps({
   extra: Object,
@@ -12,7 +13,7 @@ defineProps({
 <template>
   <div class="im-message-sys-text">
     <div class="sys-text">
-      <a @click="showUserModal(extra.owner_id)">
+      <a @click="showUserInfoModal(extra.owner_id)">
         {{ extra.owner_name }}
       </a>
 

src/components/talk/message/system/SysGroupCreateMessage.vue

@@ -1,14 +1,13 @@
 <script setup>
 import './sys-message.less'
-
-import { inject } from 'vue'
+import { useInject } from '@/hooks'
 
 defineProps({
   extra: Object,
   data: Object
 })
 
-const showUserModal = inject('$user')
+const { showUserInfoModal } = useInject()
 </script>
 
 <template>
@@ -21,7 +20,7 @@ const showUserModal = inject('$user')
       <span>创建了群聊，并邀请了</span>
 
       <template v-for="(user, index) in extra.members" :key="index">
-        <a @click="showUserModal(user.user_id)">{{ user.nickname }}</a>
+        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
         <em v-show="index < extra.members.length - 1">、</em>
       </template>
     </div>

src/components/talk/message/system/SysGroupJoinMessage.vue

@@ -1,26 +1,26 @@
 <script setup>
-import { inject } from 'vue'
 import './sys-message.less'
+import { useInject } from '@/hooks'
 
 defineProps({
   extra: Object,
   data: Object
 })
 
-const showUserModal = inject('$user')
+const { showUserInfoModal } = useInject()
 </script>
 
 <template>
   <div class="im-message-sys-text">
     <div class="sys-text">
-      <a @click="showUserModal(extra.owner_id)">
+      <a @click="showUserInfoModal(extra.owner_id)">
         {{ extra.owner_name }}
       </a>
 
       <span>邀请了</span>
 
       <template v-for="(user, index) in extra.members" :key="index">
-        <a @click="showUserModal(user.user_id)">{{ user.nickname }}</a>
+        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
         <em v-show="index < extra.members.length - 1">、</em>
       </template>
 

src/components/talk/message/system/SysGroupMemberCancelMutedMessage.vue

@@ -1,25 +1,26 @@
 <script setup>
 import './sys-message.less'
-import { inject } from 'vue'
-const showUserModal = inject('$user')
+import { useInject } from '@/hooks'
 
 defineProps({
   extra: Object,
   data: Object
 })
+
+const { showUserInfoModal } = useInject()
 </script>
 
 <template>
   <div class="im-message-sys-text">
     <div class="sys-text">
-      <a @click="showUserModal(extra.owner_id)">
+      <a @click="showUserInfoModal(extra.owner_id)">
         {{ extra.owner_name }}
       </a>
 
       <span>解除了</span>
 
       <template v-for="(user, index) in extra.members" :key="index">
-        <a @click="showUserModal(user.user_id)">{{ user.nickname }}</a>
+        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
         <em v-show="index < extra.members.length - 1">、</em>
       </template>
 

src/components/talk/message/system/SysGroupMemberKickedMessage.vue

@@ -1,26 +1,26 @@
 <script setup>
 import './sys-message.less'
-import { inject } from 'vue'
-
-const showUserModal = inject('$user')
+import { useInject } from '@/hooks'
 
 defineProps({
   extra: Object,
   data: Object
 })
+
+const { showUserInfoModal } = useInject()
 </script>
 
 <template>
   <div class="im-message-sys-text">
     <div class="sys-text">
-      <a @click="showUserModal(extra.owner_id)">
+      <a @click="showUserInfoModal(extra.owner_id)">
         {{ extra.owner_name }}
       </a>
 
       <span>将</span>
 
       <template v-for="(user, index) in extra.members" :key="index">
-        <a @click="showUserModal(user.user_id)">{{ user.nickname }}</a>
+        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
         <em v-show="index < extra.members.length - 1">、</em>
       </template>