更新package.json和pnpm-lock.yaml以添加unplugin-auto-import和unplugin-vue-components依赖，同时在vite.config.ts中集成这两个插件以支持自动导入和组件解析。调整MeEditorEmoticon.vue和UserCardModal.vue中的样式和结构，优化用户界面。

auto-imports.d.ts

@@ -0,0 +1,75 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useDialog: typeof import('naive-ui')['useDialog']
+  const useId: typeof import('vue')['useId']
+  const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
+  const useMessage: typeof import('naive-ui')['useMessage']
+  const useModel: typeof import('vue')['useModel']
+  const useNotification: typeof import('naive-ui')['useNotification']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

components.d.ts

@@ -0,0 +1,91 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    ApplyTab: typeof import('./src/components/group/manage/ApplyTab.vue')['default']
+    AudioMessage: typeof import('./src/components/talk/message/AudioMessage.vue')['default']
+    Avatar: typeof import('./src/components/base/Avatar.vue')['default']
+    AvatarCropper: typeof import('./src/components/base/AvatarCropper.vue')['default']
+    AvatarModule: typeof import('./src/components/avatar-module/index.vue')['default']
+    CodeMessage: typeof import('./src/components/talk/message/CodeMessage.vue')['default']
+    ConfigTab: typeof import('./src/components/group/manage/ConfigTab.vue')['default']
+    ContactModal: typeof import('./src/components/user/ContactModal.vue')['default']
+    CustomBtn: typeof import('./src/components/common/customBtn.vue')['default']
+    CustomModal: typeof import('./src/components/common/customModal.vue')['default']
+    DetailTab: typeof import('./src/components/group/manage/DetailTab.vue')['default']
+    DialogApi: typeof import('./src/components/common/DialogApi.vue')['default']
+    Editor: typeof import('./src/components/editor/Editor.vue')['default']
+    EditorEmail: typeof import('./src/components/user/EditorEmail.vue')['default']
+    EditorMobile: typeof import('./src/components/user/EditorMobile.vue')['default']
+    EditorPassword: typeof import('./src/components/user/EditorPassword.vue')['default']
+    FileMessage: typeof import('./src/components/talk/message/FileMessage.vue')['default']
+    Flnindex: typeof import('./src/components/flnlayout/tree/flnindex.vue')['default']
+    ForwardMessage: typeof import('./src/components/talk/message/ForwardMessage.vue')['default']
+    ForwardRecord: typeof import('./src/components/talk/ForwardRecord.vue')['default']
+    GroupApply: typeof import('./src/components/group/GroupApply.vue')['default']
+    GroupLaunch: typeof import('./src/components/group/GroupLaunch.vue')['default']
+    GroupNotice: typeof import('./src/components/group/GroupNotice.vue')['default']
+    GroupNoticeMessage: typeof import('./src/components/talk/message/GroupNoticeMessage.vue')['default']
+    GroupPanel: typeof import('./src/components/group/GroupPanel.vue')['default']
+    HistoryRecord: typeof import('./src/components/talk/HistoryRecord.vue')['default']
+    ImageMessage: typeof import('./src/components/talk/message/ImageMessage.vue')['default']
+    LinkMessage: typeof import('./src/components/talk/message/LinkMessage.vue')['default']
+    Loading: typeof import('./src/components/base/Loading.vue')['default']
+    LoginMessage: typeof import('./src/components/talk/message/LoginMessage.vue')['default']
+    Manage: typeof import('./src/components/group/manage/index.vue')['default']
+    MeEditorCode: typeof import('./src/components/editor/MeEditorCode.vue')['default']
+    MeEditorEmoticon: typeof import('./src/components/editor/MeEditorEmoticon.vue')['default']
+    MeEditorImage: typeof import('./src/components/editor/MeEditorImage.vue')['default']
+    MeEditorLocation: typeof import('./src/components/editor/MeEditorLocation.vue')['default']
+    MeEditorRecorder: typeof import('./src/components/editor/MeEditorRecorder.vue')['default']
+    MeEditorVote: typeof import('./src/components/editor/MeEditorVote.vue')['default']
+    MemberTab: typeof import('./src/components/group/manage/MemberTab.vue')['default']
+    MessageApi: typeof import('./src/components/common/MessageApi.vue')['default']
+    MixedMessage: typeof import('./src/components/talk/message/MixedMessage.vue')['default']
+    NAvatar: typeof import('naive-ui')['NAvatar']
+    NButton: typeof import('naive-ui')['NButton']
+    NEmpty: typeof import('naive-ui')['NEmpty']
+    NIcon: typeof import('naive-ui')['NIcon']
+    NInput: typeof import('naive-ui')['NInput']
+    NModal: typeof import('naive-ui')['NModal']
+    NoticeEditor: typeof import('./src/components/group/manage/NoticeEditor.vue')['default']
+    NoticeTab: typeof import('./src/components/group/manage/NoticeTab.vue')['default']
+    NotificationApi: typeof import('./src/components/common/NotificationApi.vue')['default']
+    RevokeMessage: typeof import('./src/components/talk/message/RevokeMessage.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SysGroupAdminMessage: typeof import('./src/components/talk/message/system/SysGroupAdminMessage.vue')['default']
+    SysGroupCancelMutedMessage: typeof import('./src/components/talk/message/system/SysGroupCancelMutedMessage.vue')['default']
+    SysGroupCreateMessage: typeof import('./src/components/talk/message/system/SysGroupCreateMessage.vue')['default']
+    SysGroupDismissed: typeof import('./src/components/talk/message/system/SysGroupDismissed.vue')['default']
+    SysGroupInfoChangeMessage: typeof import('./src/components/talk/message/system/SysGroupInfoChangeMessage.vue')['default']
+    SysGroupJoinMessage: typeof import('./src/components/talk/message/system/SysGroupJoinMessage.vue')['default']
+    SysGroupMemberCancelMutedMessage: typeof import('./src/components/talk/message/system/SysGroupMemberCancelMutedMessage.vue')['default']
+    SysGroupMemberKickedMessage: typeof import('./src/components/talk/message/system/SysGroupMemberKickedMessage.vue')['default']
+    SysGroupMemberMutedMessage: typeof import('./src/components/talk/message/system/SysGroupMemberMutedMessage.vue')['default']
+    SysGroupMemberQuitMessage: typeof import('./src/components/talk/message/system/SysGroupMemberQuitMessage.vue')['default']
+    SysGroupMemberRemovedMessage: typeof import('./src/components/talk/message/system/SysGroupMemberRemovedMessage.vue')['default']
+    SysGroupMutedMessage: typeof import('./src/components/talk/message/system/SysGroupMutedMessage.vue')['default']
+    SysGroupTransferMessage: typeof import('./src/components/talk/message/system/SysGroupTransferMessage.vue')['default']
+    SysTextMessage: typeof import('./src/components/talk/message/system/SysTextMessage.vue')['default']
+    TextMessage: typeof import('./src/components/talk/message/TextMessage.vue')['default']
+    Treelabel: typeof import('./src/components/flnlayout/tree/treelabel.vue')['default']
+    UnknownMessage: typeof import('./src/components/talk/message/UnknownMessage.vue')['default']
+    UploadsModal: typeof import('./src/components/base/UploadsModal.vue')['default']
+    UserCardModal: typeof import('./src/components/user/UserCardModal.vue')['default']
+    VideoMessage: typeof import('./src/components/talk/message/VideoMessage.vue')['default']
+    VoteMessage: typeof import('./src/components/talk/message/VoteMessage.vue')['default']
+    XAddressSelect: typeof import('./src/components/x-naive-ui/x-address-select/index.vue')['default']
+    XNDataTable: typeof import('./src/components/x-naive-ui/x-n-data-table/index.vue')['default']
+    XNModal: typeof import('./src/components/x-naive-ui/x-n-modal/index.vue')['default']
+    XNUpload: typeof import('./src/components/x-naive-ui/x-n-upload/index.vue')['default']
+    XSearchForm: typeof import('./src/components/x-naive-ui/x-search-form/index.vue')['default']
+    Xtime: typeof import('./src/components/base/Xtime.vue')['default']
+  }
+}

package.json

@@ -58,6 +58,8 @@
     "sass": "^1.88.0",
     "typescript": "~5.2.0",
     "unocss": "0.58.0",
+    "unplugin-auto-import": "^19.2.0",
+    "unplugin-vue-components": "^28.5.0",
     "vite": "^4.5.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-vue-devtools": "^7.7.6",

pnpm-lock.yaml

@@ -135,6 +135,12 @@ importers:
       unocss:
         specifier: 0.58.0
         version: 0.58.0(postcss@8.5.3)(rollup@3.29.5)(vite@4.5.14(@types/node@18.19.99)(less@4.3.0)(sass@1.88.0)(terser@5.39.0))
+      unplugin-auto-import:
+        specifier: ^19.2.0
+        version: 19.2.0(@vueuse/core@10.11.1(vue@3.5.13(typescript@5.2.2)))
+      unplugin-vue-components:
+        specifier: ^28.5.0
+        version: 28.5.0(@babel/parser@7.27.2)(vue@3.5.13(typescript@5.2.2))
       vite:
         specifier: ^4.5.1
         version: 4.5.14(@types/node@18.19.99)(less@4.3.0)(sass@1.88.0)(terser@5.39.0)
@@ -806,6 +812,9 @@ packages:
   '@unocss/reset@0.58.0':
     resolution: {integrity: sha512-UVZ5kz37JGbwAA06k/gjKYcekcTwi6oIhev1EpTtCvHLL6XYcYqcwb/u4Wjzprd3L3lxDGYXvGdjREGm2u7vbQ==}
 
+  '@unocss/reset@66.1.1':
+    resolution: {integrity: sha512-WrI3sStMd/EXTcb3SaTVH10Wc9NKutW4+/HktQy470wEpncXdvihrXgCYwJH6LEEL4KOto3o+KKSD5xenWE7Aw==}
+
   '@unocss/rule-utils@0.58.0':
     resolution: {integrity: sha512-LBJ9dJ/j5UIMzJF7pmIig55MtJAYtG+tn/zQRveZuPRVahzP+KqwlyB7u3uCUnQhdgo/MJODMcqyr0jl6+kTuA==}
     engines: {node: '>=14'}
@@ -1694,6 +1703,10 @@ packages:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
 
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -1722,6 +1735,9 @@ packages:
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
   event-emitter@0.3.5:
     resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
 
@@ -1790,6 +1806,14 @@ packages:
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
+  fdir@6.4.4:
+    resolution: {integrity: sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
   figures@6.1.0:
     resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
     engines: {node: '>=18'}
@@ -2156,6 +2180,9 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
   js-yaml@3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
     hasBin: true
@@ -2816,6 +2843,9 @@ packages:
   scroll-into-view-if-needed@2.2.31:
     resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
 
+  scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+
   section-matter@1.0.0:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
@@ -2954,6 +2984,9 @@ packages:
     resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
     engines: {node: '>=18'}
 
+  strip-literal@3.0.0:
+    resolution: {integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==}
+
   stylis@4.3.6:
     resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
 
@@ -3005,6 +3038,10 @@ packages:
   tinyexec@1.0.1:
     resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
 
+  tinyglobby@0.2.13:
+    resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
+    engines: {node: '>=12.0.0'}
+
   to-object-path@0.3.0:
     resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==}
     engines: {node: '>=0.10.0'}
@@ -3069,6 +3106,10 @@ packages:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
 
+  unimport@4.2.0:
+    resolution: {integrity: sha512-mYVtA0nmzrysnYnyb3ALMbByJ+Maosee2+WyE0puXl+Xm2bUwPorPaaeZt0ETfuroPOtG8jj1g/qeFZ6buFnag==}
+    engines: {node: '>=18.12.0'}
+
   union-value@1.0.1:
     resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
     engines: {node: '>=0.10.0'}
@@ -3096,6 +3137,39 @@ packages:
       vite:
         optional: true
 
+  unplugin-auto-import@19.2.0:
+    resolution: {integrity: sha512-DGRHg86nUDKEYpny1p2kFZjeLg7kHQmknsPQ8krAshvpeypps7dFxNBsAqhBaxYINjetbgQilF8wbjuZxpdomg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': ^3.2.2
+      '@vueuse/core': '*'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@vueuse/core':
+        optional: true
+
+  unplugin-utils@0.2.4:
+    resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==}
+    engines: {node: '>=18.12.0'}
+
+  unplugin-vue-components@28.5.0:
+    resolution: {integrity: sha512-o7fMKU/uI8NiP+E0W62zoduuguWqB0obTfHFtbr1AP2uo2lhUPnPttWUE92yesdiYfo9/0hxIrj38FMc1eaySg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+
+  unplugin@2.3.2:
+    resolution: {integrity: sha512-3n7YA46rROb3zSj8fFxtxC/PqoyvYQ0llwz9wtUPUutr9ig09C8gGo5CWCwHrUzlqC1LLR43kxp5vEIyH1ac1w==}
+    engines: {node: '>=18.12.0'}
+
   unset-value@1.0.0:
     resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==}
     engines: {node: '>=0.10.0'}
@@ -3291,6 +3365,9 @@ packages:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
 
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
   webpack@5.99.8:
     resolution: {integrity: sha512-lQ3CPiSTpfOnrEGeXDwoq5hIGzSjmwD72GdfVzF7CQAI7t47rJG9eDWvcEkEn3CUQymAElVvDg3YNTlCYj+qUQ==}
     engines: {node: '>=10.13.0'}
@@ -4031,6 +4108,8 @@ snapshots:
 
   '@unocss/reset@0.58.0': {}
 
+  '@unocss/reset@66.1.1': {}
+
   '@unocss/rule-utils@0.58.0':
     dependencies:
       '@unocss/core': 0.58.0
@@ -5115,6 +5194,8 @@ snapshots:
 
   escape-string-regexp@1.0.5: {}
 
+  escape-string-regexp@5.0.0: {}
+
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
@@ -5139,6 +5220,10 @@ snapshots:
 
   estree-walker@2.0.2: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.7
+
   event-emitter@0.3.5:
     dependencies:
       d: 1.0.2
@@ -5240,6 +5325,10 @@ snapshots:
     dependencies:
       reusify: 1.1.0
 
+  fdir@6.4.4(picomatch@4.0.2):
+    optionalDependencies:
+      picomatch: 4.0.2
+
   figures@6.1.0:
     dependencies:
       is-unicode-supported: 2.1.0
@@ -5578,6 +5667,8 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
+  js-tokens@9.0.1: {}
+
   js-yaml@3.14.1:
     dependencies:
       argparse: 1.0.10
@@ -6335,6 +6426,8 @@ snapshots:
     dependencies:
       compute-scroll-into-view: 1.0.20
 
+  scule@1.3.0: {}
+
   section-matter@1.0.0:
     dependencies:
       extend-shallow: 2.0.1
@@ -6477,6 +6570,10 @@ snapshots:
 
   strip-final-newline@4.0.0: {}
 
+  strip-literal@3.0.0:
+    dependencies:
+      js-tokens: 9.0.1
+
   stylis@4.3.6: {}
 
   superjson@2.2.2:
@@ -6517,6 +6614,11 @@ snapshots:
 
   tinyexec@1.0.1: {}
 
+  tinyglobby@0.2.13:
+    dependencies:
+      fdir: 6.4.4(picomatch@4.0.2)
+      picomatch: 4.0.2
+
   to-object-path@0.3.0:
     dependencies:
       kind-of: 3.2.2
@@ -6569,6 +6671,23 @@ snapshots:
 
   unicorn-magic@0.3.0: {}
 
+  unimport@4.2.0:
+    dependencies:
+      acorn: 8.14.1
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      local-pkg: 1.1.1
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      pathe: 2.0.3
+      picomatch: 4.0.2
+      pkg-types: 2.1.0
+      scule: 1.3.0
+      strip-literal: 3.0.0
+      tinyglobby: 0.2.13
+      unplugin: 2.3.2
+      unplugin-utils: 0.2.4
+
   union-value@1.0.1:
     dependencies:
       arr-union: 3.1.0
@@ -6613,6 +6732,44 @@ snapshots:
       - rollup
       - supports-color
 
+  unplugin-auto-import@19.2.0(@vueuse/core@10.11.1(vue@3.5.13(typescript@5.2.2))):
+    dependencies:
+      local-pkg: 1.1.1
+      magic-string: 0.30.17
+      picomatch: 4.0.2
+      unimport: 4.2.0
+      unplugin: 2.3.2
+      unplugin-utils: 0.2.4
+    optionalDependencies:
+      '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.2.2))
+
+  unplugin-utils@0.2.4:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.2
+
+  unplugin-vue-components@28.5.0(@babel/parser@7.27.2)(vue@3.5.13(typescript@5.2.2)):
+    dependencies:
+      chokidar: 3.6.0
+      debug: 4.4.0
+      local-pkg: 1.1.1
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      tinyglobby: 0.2.13
+      unplugin: 2.3.2
+      unplugin-utils: 0.2.4
+      vue: 3.5.13(typescript@5.2.2)
+    optionalDependencies:
+      '@babel/parser': 7.27.2
+    transitivePeerDependencies:
+      - supports-color
+
+  unplugin@2.3.2:
+    dependencies:
+      acorn: 8.14.1
+      picomatch: 4.0.2
+      webpack-virtual-modules: 0.6.2
+
   unset-value@1.0.0:
     dependencies:
       has-value: 0.3.1
@@ -6825,6 +6982,8 @@ snapshots:
 
   webpack-sources@3.2.3: {}
 
+  webpack-virtual-modules@0.6.2: {}
+
   webpack@5.99.8:
     dependencies:
       '@types/eslint-scope': 3.7.7

src/components/editor/MeEditorEmoticon.vue

@@ -48,10 +48,10 @@ const onSendEmoticon = (type: any, value: any, img = '') => {
     <input type="file" ref="fileImageRef" accept="image/*" @change="onUpload" />
   </form>
 
-  <section class="el-container is-vertical section height100">
+  <section class="el-container is-vertical section height100 p-10px">
-    <header class="el-header em-header bdr-b">
+    <!-- <header class="el-header em-header bdr-b">
       <span>{{ items[tabIndex].name }}</span>
-    </header>
+    </header> -->
 
     <main class="el-main em-main me-scrollbar me-scrollbar-thumb">
       <div class="symbol-box" v-if="tabIndex == 0">
@@ -82,7 +82,7 @@ const onSendEmoticon = (type: any, value: any, img = '') => {
       </div>
     </main>
 
-    <footer class="el-footer em-footer tabs">
+    <!-- <footer class="el-footer em-footer tabs">
       <div
         class="tab pointer"
         v-for="(item, index) in items"
@@ -93,7 +93,7 @@ const onSendEmoticon = (type: any, value: any, img = '') => {
         <p class="tip">{{ item.name }}</p>
         <img width="20" height="20" :src="item.icon" />
       </div>
-    </footer>
+    </footer> -->
   </section>
 </template>
 <style lang="less" scoped>
@@ -185,16 +185,18 @@ const onSendEmoticon = (type: any, value: any, img = '') => {
       display: flex;
       flex-wrap: wrap;
 
-      .option img{
+      .option{
-        height: 12px;
+        margin: 7px;
-        width: 12px;
+        :deep(.emoji){
-        margin: 2px;
+          height: 22px;
+        width: 22px;
         user-select: none;
         transition: all 0.5s;
 
         &:hover {
           transform: scale(1.5);
         }
+        }
       }
     }
   }

src/components/user/UserCardModal.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { ref, computed, reactive } from 'vue'
-import { NIcon, NModal, NButton, NInput, NDropdown, NPopover } from 'naive-ui'
+import { NIcon, NModal, NButton, NInput, NDropdown, NPopover,NImage } from 'naive-ui'
 import { CloseOne, Male, Female, SendOne } from '@icon-park/vue-next'
 import { ServeSearchUser } from '@/api/contact'
 import { ServeCreateContact } from '@/api/contact'
 import { ServeContactGroupList, ServeContactMoveGroup, ServeEditContactRemark } from '@/api/contact'
 import { useTalkStore } from '@/store'
 import { useRouter } from 'vue-router'
-
+import xNModal from '@/components/x-naive-ui/x-n-modal/index.vue'
 const router = useRouter()
 const talkStore = useTalkStore()
 
@@ -171,9 +171,57 @@ const onAfterEnter = () => {
 </script>
 
 <template>
-  <n-modal :show="show" :on-update:show="onUpdate" :on-after-enter="onAfterEnter">
+  <x-n-modal content-style="padding:0;" :closable="false" class="w-311px min-h-445px" style="border-radius: 10px;overflow:hidden;" :show="show"  :on-update:show="onUpdate" :on-after-enter="onAfterEnter">
-    <div class="section" v-loading="loading">
+    <div class="section relative px-7px pt-82px pb-20px"  v-loading="loading">
-      <section class="el-container container is-vertical">
+      <div class="absolute top-9px right-7px pointer" @click="onUpdate(false)" >
+        <img class="w-20px h-20px" src="@/assets/image/close.png" alt="">
+      </div>
+      <div class="flex py-10px bg-#fff px-16px rounded-4px items-center mb-10px">
+        <div class="w-59px h-59px bg-#46299D rounded-8px mr-12px overflow-hidden">
+         <n-image width="59" :src="state.avatar" >
+
+         </n-image>
+        </div>
+        <div>
+          <div class="text-#000 text-16px mb-5px">张三</div>
+          <div class="text-#ACACAC text-12px">工号：FL043</div>
+        </div>
+      </div>
+      <div class="bg-#fff rounded-4px mb-20px">
+        <div class="flex px-15px py-9px">
+          <div class="text-#000 text-12px w-84px">公司别</div>
+          <div class="text-#747474 text-12px">江苏泰丰文化传播股份有限公司</div>
+        </div>
+        <div class="flex px-15px py-9px">
+          <div class="text-#000 text-12px w-84px">主管</div>
+          <div class="text-#747474 text-12px">江苏泰丰文化传播股份有限公司</div>
+        </div>
+        <div class="flex px-15px py-9px">
+          <div class="text-#000 text-12px w-84px">部门</div>
+          <div class="text-#747474 text-12px">江苏泰丰文化传播股份有限公司</div>
+        </div>
+        <div class="flex px-15px py-9px">
+          <div class="text-#000 text-12px w-84px">手机号</div>
+          <div class="text-#747474 text-12px">江苏泰丰文化传播股份有限公司</div>
+        </div>
+        <div class="flex px-15px py-9px">
+          <div class="text-#000 text-12px w-84px">岗位</div>
+          <div class="text-#747474 text-12px">江苏泰丰文化传播股份有限公司</div>
+        </div>
+        <div class="flex px-15px py-9px">
+          <div class="text-#000 text-12px w-84px">入职日期</div>
+          <div class="text-#747474 text-12px">江苏泰丰文化传播股份有限公司</div>
+        </div>
+      </div>
+      <div>
+        <n-button block color="#EEE9F8" text-color="#46299D"     @click="onToTalk">
+            <div class="flex items-center justify-center py-11px">
+              <img class="w-19.8px h-20px mr-15px" src="@/assets/image/faxi@2x.png" alt="">
+              <span>发送消息</span>
+            </div>
+        </n-button>
+      </div>
+      <!-- <section class="el-container is-vertical">
         <header class="el-header header">
           <im-avatar
             class="avatar"
@@ -317,16 +365,17 @@ const onAfterEnter = () => {
             </n-button>
           </template>
         </footer>
-      </section>
+      </section> -->
     </div>
-  </n-modal>
+  </x-n-modal>
 </template>
 
 <style lang="less" scoped>
 .section {
+  width: 100%;
+  height: 100%;
   position: relative;
-  width: 360px;
+  background-image: url('@/assets/image/zu6254@2x.png');
-  height: 600px;
   border-radius: 10px;
   overflow: hidden;
   background-color: var(--im-bg-color);
@@ -336,7 +385,6 @@ const onAfterEnter = () => {
     height: 230px;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(to right, rgb(137, 104, 255), rgb(175, 152, 255));
     display: flex;
     padding: 20px;
     position: relative;
@@ -346,7 +394,6 @@ const onAfterEnter = () => {
       width: 150px;
       height: 150px;
       content: '';
-      background: linear-gradient(to right, rgb(142, 110, 255), rgb(208, 195, 255));
       position: absolute;
       z-index: 1;
       border-radius: 50%;

vite.config.ts

@@ -4,6 +4,9 @@ import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import compressPlugin from 'vite-plugin-compression'
 import UnoCSS from 'unocss/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+import Components from 'unplugin-vue-components/vite'
 import vueDevTools from 'vite-plugin-vue-devtools';
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -24,12 +27,28 @@ export default defineConfig(({ mode }) => {
     assetsInclude: ['./src/assets'],
     plugins: [
       vue(), 
+      AutoImport({
+        imports: [
+          'vue',
+          {
+            'naive-ui': [
+              'useDialog',
+              'useMessage',
+              'useNotification',
+              'useLoadingBar'
+            ]
+          }
+        ]
+      }),
+      Components({
+        resolvers: [NaiveUiResolver()]
+      }),
       vueJsx({}), 
       compressPlugin(), 
       UnoCSS(),
-      // vueDevTools({
+      vueDevTools({
-      //   launchEditor: 'cursor',
+        launchEditor: 'cursor',
-      // })
+      })
     ],
     define: {
       __APP_ENV__: env.APP_ENV