@robot-admin/naive-ui-components 0.6.10 → 0.6.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (170) hide show
  1. package/README.md +277 -261
  2. package/dist/C_AudioPlayer-DKRIGhi7.css.map +1 -0
  3. package/dist/C_AudioPlayer-DlB6eNsa.css.map +1 -0
  4. package/dist/C_AudioPlayer.cjs +1 -0
  5. package/dist/C_AudioPlayer.css +283 -0
  6. package/dist/C_AudioPlayer.d.cts +2 -0
  7. package/dist/C_AudioPlayer.d.ts +2 -0
  8. package/dist/C_AudioPlayer.js +1 -0
  9. package/dist/C_AudioPlayer.js.map +1 -0
  10. package/dist/C_AudioPlayer2.js +2 -0
  11. package/dist/C_AudioPlayer2.js.map +1 -0
  12. package/dist/C_AvatarGroup-D02zci-i.css.map +1 -0
  13. package/dist/C_AvatarGroup-DatHaUlY.css.map +1 -0
  14. package/dist/C_AvatarGroup.cjs +1 -0
  15. package/dist/C_AvatarGroup.css +107 -0
  16. package/dist/C_AvatarGroup.d.cts +2 -0
  17. package/dist/C_AvatarGroup.d.ts +2 -0
  18. package/dist/C_AvatarGroup.js +1 -0
  19. package/dist/C_AvatarGroup.js.map +1 -0
  20. package/dist/C_AvatarGroup2.js +2 -0
  21. package/dist/C_AvatarGroup2.js.map +1 -0
  22. package/dist/C_Barcode.d.cts +1 -1
  23. package/dist/C_Barcode.d.ts +1 -1
  24. package/dist/C_Breadcrumb.d.cts +1 -1
  25. package/dist/C_Breadcrumb.d.ts +1 -1
  26. package/dist/C_Captcha.d.cts +1 -1
  27. package/dist/C_Captcha.d.ts +1 -1
  28. package/dist/C_Cascade.d.cts +1 -1
  29. package/dist/C_Cascade.d.ts +1 -1
  30. package/dist/C_Chat-CcjZdAwu.css.map +1 -0
  31. package/dist/C_Chat-Diq7tyWU.css.map +1 -0
  32. package/dist/C_Chat.cjs +1 -0
  33. package/dist/C_Chat.css +395 -0
  34. package/dist/C_Chat.d.cts +2 -0
  35. package/dist/C_Chat.d.ts +2 -0
  36. package/dist/C_Chat.js +1 -0
  37. package/dist/C_Chat.js.map +1 -0
  38. package/dist/C_Chat2.js +2 -0
  39. package/dist/C_Chat2.js.map +1 -0
  40. package/dist/C_City.d.cts +1 -1
  41. package/dist/C_City.d.ts +1 -1
  42. package/dist/C_Code.d.cts +1 -1
  43. package/dist/C_Code.d.ts +1 -1
  44. package/dist/C_ContextMenu-B3Cgz_wJ.css.map +1 -0
  45. package/dist/C_ContextMenu-u1LixF3_.css.map +1 -0
  46. package/dist/C_ContextMenu.cjs +1 -0
  47. package/dist/C_ContextMenu.css +115 -0
  48. package/dist/C_ContextMenu.d.cts +2 -0
  49. package/dist/C_ContextMenu.d.ts +2 -0
  50. package/dist/C_ContextMenu.js +1 -0
  51. package/dist/C_ContextMenu.js.map +1 -0
  52. package/dist/C_ContextMenu2.js +2 -0
  53. package/dist/C_ContextMenu2.js.map +1 -0
  54. package/dist/C_Date.d.cts +1 -1
  55. package/dist/C_Date.d.ts +1 -1
  56. package/dist/C_Editor.d.cts +1 -1
  57. package/dist/C_Editor.d.ts +1 -1
  58. package/dist/C_Guide.d.cts +1 -1
  59. package/dist/C_Guide.d.ts +1 -1
  60. package/dist/C_Icon.d.cts +1 -1
  61. package/dist/C_Icon.d.ts +1 -1
  62. package/dist/C_Language.d.cts +1 -1
  63. package/dist/C_Language.d.ts +1 -1
  64. package/dist/C_Language.js.map +1 -1
  65. package/dist/C_Language2.js.map +1 -1
  66. package/dist/C_Login-BkdnkBKX.css.map +1 -0
  67. package/dist/C_Login-VkMM6OJ2.css.map +1 -0
  68. package/dist/C_Login.cjs +1 -0
  69. package/dist/C_Login.css +515 -0
  70. package/dist/C_Login.d.cts +2 -0
  71. package/dist/C_Login.d.ts +2 -0
  72. package/dist/C_Login.js +1 -0
  73. package/dist/C_Login.js.map +1 -0
  74. package/dist/C_Login2.js +2 -0
  75. package/dist/C_Login2.js.map +1 -0
  76. package/dist/C_Markdown.d.cts +1 -1
  77. package/dist/C_Markdown.d.ts +1 -1
  78. package/dist/C_Menu.d.cts +1 -1
  79. package/dist/C_Menu.d.ts +1 -1
  80. package/dist/C_Progress.d.cts +1 -1
  81. package/dist/C_Progress.d.ts +1 -1
  82. package/dist/C_Steps.d.cts +1 -1
  83. package/dist/C_Steps.d.ts +1 -1
  84. package/dist/C_TagsView.d.cts +1 -1
  85. package/dist/C_TagsView.d.ts +1 -1
  86. package/dist/C_Theme.d.cts +1 -1
  87. package/dist/C_Theme.d.ts +1 -1
  88. package/dist/C_Timeline-BIvw3f41.css.map +1 -0
  89. package/dist/C_Timeline-VsDfCv4Q.css.map +1 -0
  90. package/dist/C_Timeline.cjs +1 -0
  91. package/dist/C_Timeline.css +271 -0
  92. package/dist/C_Timeline.d.cts +2 -0
  93. package/dist/C_Timeline.d.ts +2 -0
  94. package/dist/C_Timeline.js +1 -0
  95. package/dist/C_Timeline.js.map +1 -0
  96. package/dist/C_Timeline2.js +2 -0
  97. package/dist/C_Timeline2.js.map +1 -0
  98. package/dist/C_Transfer-BOB6OBqS.css.map +1 -0
  99. package/dist/C_Transfer-Dpq7ezWC.css.map +1 -0
  100. package/dist/C_Transfer.cjs +1 -0
  101. package/dist/C_Transfer.css +193 -0
  102. package/dist/C_Transfer.d.cts +2 -0
  103. package/dist/C_Transfer.d.ts +2 -0
  104. package/dist/C_Transfer.js +1 -0
  105. package/dist/C_Transfer.js.map +1 -0
  106. package/dist/C_Transfer2.js +2 -0
  107. package/dist/C_Transfer2.js.map +1 -0
  108. package/dist/C_VtableGantt.d.cts +1 -1
  109. package/dist/C_VtableGantt.d.ts +1 -1
  110. package/dist/constants.d.ts +1 -1
  111. package/dist/constants2.d.ts +1 -1
  112. package/dist/constants3.d.ts +3 -3
  113. package/dist/constants4.d.ts +3 -3
  114. package/dist/constants5.d.ts +2 -2
  115. package/dist/data.d.ts +1 -1
  116. package/dist/index.cjs +1 -1
  117. package/dist/index.cjs.map +1 -1
  118. package/dist/index.d.cts +48 -41
  119. package/dist/index.d.ts +48 -41
  120. package/dist/index.js +1 -1
  121. package/dist/index.js.map +1 -1
  122. package/dist/index.vue.d.ts +1 -1
  123. package/dist/index10.vue.d.ts +41 -23
  124. package/dist/index11.vue.d.ts +80 -63
  125. package/dist/index12.vue.d.ts +48 -20
  126. package/dist/index13.vue.d.ts +23 -63
  127. package/dist/index14.vue.d.ts +21 -58
  128. package/dist/index15.vue.d.ts +65 -48
  129. package/dist/index16.vue.d.ts +16 -21
  130. package/dist/index17.vue.d.ts +106 -77
  131. package/dist/index18.vue.d.ts +74 -11
  132. package/dist/index19.vue.d.ts +58 -653
  133. package/dist/index2.vue.d.ts +75 -30
  134. package/dist/index20.vue.d.ts +55 -0
  135. package/dist/index21.vue.d.ts +33 -0
  136. package/dist/index22.vue.d.ts +88 -0
  137. package/dist/index23.vue.d.ts +18 -0
  138. package/dist/index24.vue.d.ts +112 -0
  139. package/dist/index25.vue.d.ts +81 -0
  140. package/dist/index26.vue.d.ts +662 -0
  141. package/dist/index3.vue.d.ts +77 -19
  142. package/dist/index4.vue.d.ts +29 -36
  143. package/dist/index5.vue.d.ts +19 -20
  144. package/dist/index6.vue.d.ts +36 -26
  145. package/dist/index7.vue.d.ts +23 -40
  146. package/dist/index8.vue.d.ts +117 -45
  147. package/dist/index9.vue.d.ts +19 -25
  148. package/dist/resolver.cjs +1 -1
  149. package/dist/resolver.cjs.map +1 -1
  150. package/dist/resolver.d.cts +1 -1
  151. package/dist/resolver.d.ts +1 -1
  152. package/dist/resolver.js +1 -1
  153. package/dist/resolver.js.map +1 -1
  154. package/dist/style.css +1911 -18
  155. package/dist/useCalendarEvents.d.ts +1 -1
  156. package/dist/useCollapsePanel.d.ts +4 -4
  157. package/dist/useCropperCore.d.ts +7 -7
  158. package/dist/useDraggableLayout.d.ts +8 -8
  159. package/dist/useDynamicFormState.d.ts +6 -6
  160. package/dist/useEdgeInteraction.d.ts +2 -2
  161. package/dist/useFullscreen.d.ts +2 -2
  162. package/dist/useInfiniteScroll.d.ts +3 -3
  163. package/dist/useQRCode.d.ts +5 -5
  164. package/dist/useSearchState.d.ts +2 -2
  165. package/dist/useSignatureHistory.d.ts +2 -2
  166. package/dist/useSplitResize.d.ts +6 -6
  167. package/dist/useTimeSelection.d.ts +2 -2
  168. package/dist/useTreeOperations.d.ts +4 -4
  169. package/dist/useWorkflowValidation.d.ts +3 -3
  170. package/package.json +1 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"C_Chat2.js","names":[],"sources":["../src/components/C_Chat/types.ts","../src/components/C_Chat/index.vue","../src/components/C_Chat/index.vue","../src/components/C_Chat/index.vue"],"sourcesContent":["/**\n * @Description: C_Chat 通用聊天组件 - 类型定义\n */\n\n// ================= 消息类型 =================\n\n/** 消息类型 */\nexport type MessageType = 'text' | 'image' | 'file' | 'system'\n\n/** 消息发送方 */\nexport type MessageSender = 'self' | 'other' | 'system'\n\n/** 消息状态 */\nexport type MessageStatus = 'sending' | 'sent' | 'failed'\n\n/** 单条消息 */\nexport interface ChatMessage {\n /** 唯一标识 */\n id: string\n /** 消息内容(文本 / 图片 URL / 文件信息 JSON) */\n content: string\n /** 消息类型 */\n type: MessageType\n /** 发送方 */\n sender: MessageSender\n /** 发送时间(ISO 字符串 或 时间戳) */\n timestamp: string | number\n /** 发送者头像 URL */\n avatar?: string\n /** 发送者用户名 */\n username?: string\n /** 消息状态 */\n status?: MessageStatus\n /** 文件名(type = 'file' 时使用) */\n fileName?: string\n /** 文件大小(字节) */\n fileSize?: number\n}\n\n// ================= 联系人 =================\n\n/** 联系人 / 会话 */\nexport interface ChatContact {\n /** 唯一标识 */\n id: string\n /** 显示名称 */\n name: string\n /** 头像 URL */\n avatar?: string\n /** 最后一条消息摘要 */\n lastMessage?: string\n /** 最后消息时间 */\n lastTime?: string | number\n /** 未读数 */\n unread?: number\n /** 是否在线 */\n online?: boolean\n}\n\n// ================= 组件 Props =================\n\nexport interface ChatProps {\n /** 联系人列表 */\n contacts?: ChatContact[]\n /** 消息列表 */\n messages?: ChatMessage[]\n /** 当前选中的联系人 ID */\n currentContactId?: string\n /** 输入框占位符 */\n placeholder?: string\n /** 是否显示联系人侧栏 */\n showContacts?: boolean\n /** 是否显示消息时间戳 */\n showTimestamp?: boolean\n /** 当前用户头像 */\n selfAvatar?: string\n /** 当前用户名 */\n selfName?: string\n /** 是否显示发送按钮 */\n showSendBtn?: boolean\n /** 是否正在加载历史消息 */\n loadingHistory?: boolean\n /** 标题(无联系人模式时显示) */\n title?: string\n}\n\n// ================= 默认值 =================\n\nexport const DEFAULT_CHAT_PROPS: Required<\n Pick<\n ChatProps,\n | 'placeholder'\n | 'showContacts'\n | 'showTimestamp'\n | 'showSendBtn'\n | 'loadingHistory'\n | 'title'\n >\n> = {\n placeholder: '输入消息...',\n showContacts: true,\n showTimestamp: true,\n showSendBtn: true,\n loadingHistory: false,\n title: '聊天',\n}\n","/* unplugin-vue-components disabled */<!--\n * @Description: C_Chat — 通用聊天组件\n *\n * 支持联系人列表 + 消息气泡 + 输入框,可用于 IM、客服、AI 对话等场景。\n * 通过 CSS 变量可完全自定义主题风格。\n *\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <div class=\"c-chat\">\n <!-- ===== 联系人侧栏 ===== -->\n <aside\n v-if=\"mergedProps.showContacts && contactList.length\"\n class=\"c-chat__sidebar\"\n >\n <div class=\"c-chat__sidebar-header\">\n <C_Icon\n name=\"mdi:chat-outline\"\n :size=\"20\"\n />\n 会话\n </div>\n\n <!-- 搜索框 -->\n <div class=\"c-chat__search\">\n <NInput\n v-model:value=\"searchKeyword\"\n placeholder=\"搜索联系人\"\n clearable\n size=\"small\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:magnify\"\n :size=\"16\"\n />\n </template>\n </NInput>\n </div>\n\n <!-- 联系人列表 -->\n <div class=\"c-chat__contact-list\">\n <div\n v-for=\"contact in filteredContacts\"\n :key=\"contact.id\"\n class=\"c-chat__contact\"\n :class=\"{ 'is-active': contact.id === currentId }\"\n @click=\"handleSelectContact(contact.id)\"\n >\n <div class=\"c-chat__contact-avatar\">\n <img\n v-if=\"contact.avatar\"\n :src=\"contact.avatar\"\n :alt=\"contact.name\"\n class=\"c-chat__avatar\"\n />\n <div\n v-else\n class=\"c-chat__avatar-fallback\"\n >\n {{ contact.name.charAt(0) }}\n </div>\n <span\n v-if=\"contact.online\"\n class=\"c-chat__online-dot\"\n />\n </div>\n\n <div class=\"c-chat__contact-info\">\n <div class=\"c-chat__contact-name\">\n <span>{{ contact.name }}</span>\n <span\n v-if=\"contact.lastTime\"\n class=\"c-chat__contact-time\"\n >\n {{ formatContactTime(contact.lastTime) }}\n </span>\n </div>\n <div\n v-if=\"contact.lastMessage\"\n class=\"c-chat__contact-last\"\n >\n {{ contact.lastMessage }}\n </div>\n </div>\n\n <span\n v-if=\"contact.unread\"\n class=\"c-chat__unread\"\n >\n {{ contact.unread > 99 ? '99+' : contact.unread }}\n </span>\n </div>\n </div>\n </aside>\n\n <!-- ===== 主聊天区域 ===== -->\n <div\n v-if=\"currentContact || !mergedProps.showContacts\"\n class=\"c-chat__main\"\n >\n <!-- 顶栏 -->\n <div class=\"c-chat__header\">\n <slot name=\"header\">\n <span>{{ currentContact?.name || mergedProps.title }}</span>\n <span\n v-if=\"currentContact?.online\"\n class=\"c-chat__header-status\"\n >\n 在线\n </span>\n </slot>\n </div>\n\n <!-- 消息列表 -->\n <div\n ref=\"messagesRef\"\n class=\"c-chat__messages\"\n @scroll=\"handleMessagesScroll\"\n >\n <!-- 加载更多 -->\n <div\n v-if=\"mergedProps.loadingHistory\"\n class=\"c-chat__load-more\"\n >\n <NSpin size=\"small\" />\n </div>\n\n <!-- 消息为空 -->\n <div\n v-if=\"!messageList.length && !mergedProps.loadingHistory\"\n class=\"c-chat__empty\"\n >\n 暂无消息,发送第一条吧\n </div>\n\n <!-- 消息列表 -->\n <template\n v-for=\"(msg, idx) in messageList\"\n :key=\"msg.id\"\n >\n <!-- 时间分割 -->\n <div\n v-if=\"shouldShowTimeDivider(msg, idx)\"\n class=\"c-chat__time-divider\"\n >\n {{ formatMessageTime(msg.timestamp) }}\n </div>\n\n <!-- 消息条目 -->\n <div\n class=\"c-chat__msg\"\n :class=\"`is-${msg.sender}`\"\n >\n <!-- 头像 -->\n <div\n v-if=\"msg.sender !== 'system'\"\n class=\"c-chat__msg-avatar\"\n >\n <img\n v-if=\"getAvatar(msg)\"\n :src=\"getAvatar(msg)\"\n class=\"c-chat__avatar\"\n />\n <div\n v-else\n class=\"c-chat__avatar-fallback\"\n >\n {{ getUsername(msg).charAt(0) }}\n </div>\n </div>\n\n <!-- 消息体 -->\n <div class=\"c-chat__msg-body\">\n <span\n v-if=\"msg.sender === 'other' && msg.username\"\n class=\"c-chat__msg-username\"\n >\n {{ msg.username }}\n </span>\n\n <!-- 文本消息 -->\n <div\n v-if=\"msg.type === 'text' || msg.type === 'system'\"\n class=\"c-chat__bubble\"\n >\n {{ msg.content }}\n </div>\n\n <!-- 图片消息 -->\n <img\n v-else-if=\"msg.type === 'image'\"\n :src=\"msg.content\"\n class=\"c-chat__msg-image\"\n @click=\"emit('image-preview', msg.content)\"\n />\n\n <!-- 文件消息 -->\n <div\n v-else-if=\"msg.type === 'file'\"\n class=\"c-chat__msg-file\"\n @click=\"emit('file-click', msg)\"\n >\n <C_Icon\n name=\"mdi:file-document-outline\"\n :size=\"28\"\n />\n <div class=\"c-chat__file-info\">\n <span class=\"c-chat__file-name\">{{\n msg.fileName || '文件'\n }}</span>\n <span\n v-if=\"msg.fileSize\"\n class=\"c-chat__file-size\"\n >\n {{ formatFileSize(msg.fileSize) }}\n </span>\n </div>\n </div>\n\n <!-- 时间戳 -->\n <span\n v-if=\"mergedProps.showTimestamp && msg.sender !== 'system'\"\n class=\"c-chat__msg-time\"\n >\n {{ formatTime(msg.timestamp) }}\n </span>\n\n <!-- 发送状态 -->\n <span\n v-if=\"msg.sender === 'self' && msg.status\"\n class=\"c-chat__msg-status\"\n :class=\"`is-${msg.status}`\"\n @click=\"msg.status === 'failed' && emit('resend', msg)\"\n >\n {{\n msg.status === 'sending'\n ? '发送中...'\n : msg.status === 'failed'\n ? '发送失败,点击重试'\n : ''\n }}\n </span>\n </div>\n </div>\n </template>\n </div>\n\n <!-- 输入区域 -->\n <div class=\"c-chat__input-area\">\n <div class=\"c-chat__input-actions\">\n <slot name=\"input-actions\">\n <NButton\n quaternary\n circle\n size=\"small\"\n @click=\"emit('emoji-click')\"\n >\n <template #icon>\n <C_Icon\n name=\"mdi:emoticon-happy-outline\"\n :size=\"18\"\n />\n </template>\n </NButton>\n <NButton\n quaternary\n circle\n size=\"small\"\n @click=\"emit('file-upload')\"\n >\n <template #icon>\n <C_Icon\n name=\"mdi:paperclip\"\n :size=\"18\"\n />\n </template>\n </NButton>\n </slot>\n </div>\n\n <div class=\"c-chat__input-wrap\">\n <NInput\n v-model:value=\"inputText\"\n :placeholder=\"mergedProps.placeholder\"\n type=\"textarea\"\n :autosize=\"{ minRows: 1, maxRows: 4 }\"\n @keydown.enter.exact.prevent=\"handleSend\"\n />\n </div>\n\n <NButton\n v-if=\"mergedProps.showSendBtn\"\n type=\"primary\"\n :disabled=\"!inputText.trim()\"\n class=\"c-chat__send-btn\"\n @click=\"handleSend\"\n >\n <template #icon>\n <C_Icon\n name=\"mdi:send\"\n :size=\"16\"\n />\n </template>\n </NButton>\n </div>\n </div>\n\n <!-- ===== 未选中联系人空态 ===== -->\n <div\n v-else\n class=\"c-chat__main c-chat__no-chat\"\n >\n <C_Icon\n name=\"mdi:chat-processing-outline\"\n :size=\"48\"\n class=\"c-chat__no-chat-icon\"\n />\n <span>选择一个会话开始聊天</span>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref, watch } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_CHAT_PROPS,\n type ChatProps,\n type ChatMessage,\n type ChatContact,\n } from './types'\n\n // ===== Props & Emits =====\n const props = withDefaults(defineProps<ChatProps>(), {\n contacts: () => [],\n messages: () => [],\n currentContactId: '',\n placeholder: DEFAULT_CHAT_PROPS.placeholder,\n showContacts: DEFAULT_CHAT_PROPS.showContacts,\n showTimestamp: DEFAULT_CHAT_PROPS.showTimestamp,\n showSendBtn: DEFAULT_CHAT_PROPS.showSendBtn,\n loadingHistory: DEFAULT_CHAT_PROPS.loadingHistory,\n title: DEFAULT_CHAT_PROPS.title,\n selfAvatar: '',\n selfName: '',\n })\n\n const emit = defineEmits<{\n (e: 'send', content: string): void\n (e: 'select-contact', id: string): void\n (e: 'load-more'): void\n (e: 'image-preview', url: string): void\n (e: 'file-click', msg: ChatMessage): void\n (e: 'file-upload'): void\n (e: 'emoji-click'): void\n (e: 'resend', msg: ChatMessage): void\n }>()\n\n // ===== 合并 Props =====\n const mergedProps = computed(() => ({\n ...DEFAULT_CHAT_PROPS,\n ...props,\n }))\n\n // ===== 内部状态 =====\n const inputText = ref('')\n const searchKeyword = ref('')\n const messagesRef = ref<HTMLElement | null>(null)\n\n // ===== 计算属性 =====\n const contactList = computed<ChatContact[]>(() => props.contacts ?? [])\n const messageList = computed<ChatMessage[]>(() => props.messages ?? [])\n\n const currentId = computed(\n () => props.currentContactId || contactList.value[0]?.id || ''\n )\n\n const currentContact = computed(() =>\n contactList.value.find(c => c.id === currentId.value)\n )\n\n const filteredContacts = computed(() => {\n if (!searchKeyword.value) return contactList.value\n const kw = searchKeyword.value.toLowerCase()\n return contactList.value.filter(c => c.name.toLowerCase().includes(kw))\n })\n\n // ===== 方法 =====\n const handleSelectContact = (id: string) => {\n emit('select-contact', id)\n }\n\n const handleSend = () => {\n const text = inputText.value.trim()\n if (!text) return\n emit('send', text)\n inputText.value = ''\n }\n\n /** 自动滚动到底部 */\n const scrollToBottom = () => {\n nextTick(() => {\n if (messagesRef.value) {\n messagesRef.value.scrollTop = messagesRef.value.scrollHeight\n }\n })\n }\n\n // 消息变化时自动滚动\n watch(\n () => props.messages?.length,\n () => scrollToBottom(),\n { flush: 'post' }\n )\n\n /** 滚动到顶部时触发加载更多 */\n const handleMessagesScroll = () => {\n if (\n messagesRef.value &&\n messagesRef.value.scrollTop === 0 &&\n !mergedProps.value.loadingHistory\n ) {\n emit('load-more')\n }\n }\n\n // ===== 工具函数 =====\n const getAvatar = (msg: ChatMessage) => {\n if (msg.sender === 'self') return props.selfAvatar || msg.avatar\n return msg.avatar\n }\n\n const getUsername = (msg: ChatMessage) => {\n if (msg.sender === 'self') return props.selfName || msg.username || 'Me'\n return msg.username || '未知'\n }\n\n const formatTime = (ts: string | number) => {\n const d = new Date(ts)\n return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`\n }\n\n const formatMessageTime = (ts: string | number) => {\n const d = new Date(ts)\n const now = new Date()\n const isToday =\n d.getFullYear() === now.getFullYear() &&\n d.getMonth() === now.getMonth() &&\n d.getDate() === now.getDate()\n if (isToday) return formatTime(ts)\n return `${d.getMonth() + 1}/${d.getDate()} ${formatTime(ts)}`\n }\n\n const formatContactTime = (ts: string | number) => {\n const d = new Date(ts)\n const now = new Date()\n const diff = now.getTime() - d.getTime()\n if (diff < 60_000) return '刚刚'\n if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}分钟前`\n if (diff < 86_400_000) return formatTime(ts)\n return `${d.getMonth() + 1}/${d.getDate()}`\n }\n\n const formatFileSize = (bytes: number) => {\n if (bytes < 1024) return `${bytes}B`\n if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)}KB`\n return `${(bytes / 1048576).toFixed(1)}MB`\n }\n\n /** 是否显示时间分割线(两条消息间超过 5 分钟) */\n const shouldShowTimeDivider = (msg: ChatMessage, idx: number) => {\n if (idx === 0) return true\n const prev = messageList.value[idx - 1]\n const curr = new Date(msg.timestamp).getTime()\n const prevTime = new Date(prev.timestamp).getTime()\n return curr - prevTime > 5 * 60 * 1000\n }\n\n // ===== 暴露方法 =====\n defineExpose({ scrollToBottom })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Description: C_Chat — 通用聊天组件\n *\n * 支持联系人列表 + 消息气泡 + 输入框,可用于 IM、客服、AI 对话等场景。\n * 通过 CSS 变量可完全自定义主题风格。\n *\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <div class=\"c-chat\">\n <!-- ===== 联系人侧栏 ===== -->\n <aside\n v-if=\"mergedProps.showContacts && contactList.length\"\n class=\"c-chat__sidebar\"\n >\n <div class=\"c-chat__sidebar-header\">\n <C_Icon\n name=\"mdi:chat-outline\"\n :size=\"20\"\n />\n 会话\n </div>\n\n <!-- 搜索框 -->\n <div class=\"c-chat__search\">\n <NInput\n v-model:value=\"searchKeyword\"\n placeholder=\"搜索联系人\"\n clearable\n size=\"small\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:magnify\"\n :size=\"16\"\n />\n </template>\n </NInput>\n </div>\n\n <!-- 联系人列表 -->\n <div class=\"c-chat__contact-list\">\n <div\n v-for=\"contact in filteredContacts\"\n :key=\"contact.id\"\n class=\"c-chat__contact\"\n :class=\"{ 'is-active': contact.id === currentId }\"\n @click=\"handleSelectContact(contact.id)\"\n >\n <div class=\"c-chat__contact-avatar\">\n <img\n v-if=\"contact.avatar\"\n :src=\"contact.avatar\"\n :alt=\"contact.name\"\n class=\"c-chat__avatar\"\n />\n <div\n v-else\n class=\"c-chat__avatar-fallback\"\n >\n {{ contact.name.charAt(0) }}\n </div>\n <span\n v-if=\"contact.online\"\n class=\"c-chat__online-dot\"\n />\n </div>\n\n <div class=\"c-chat__contact-info\">\n <div class=\"c-chat__contact-name\">\n <span>{{ contact.name }}</span>\n <span\n v-if=\"contact.lastTime\"\n class=\"c-chat__contact-time\"\n >\n {{ formatContactTime(contact.lastTime) }}\n </span>\n </div>\n <div\n v-if=\"contact.lastMessage\"\n class=\"c-chat__contact-last\"\n >\n {{ contact.lastMessage }}\n </div>\n </div>\n\n <span\n v-if=\"contact.unread\"\n class=\"c-chat__unread\"\n >\n {{ contact.unread > 99 ? '99+' : contact.unread }}\n </span>\n </div>\n </div>\n </aside>\n\n <!-- ===== 主聊天区域 ===== -->\n <div\n v-if=\"currentContact || !mergedProps.showContacts\"\n class=\"c-chat__main\"\n >\n <!-- 顶栏 -->\n <div class=\"c-chat__header\">\n <slot name=\"header\">\n <span>{{ currentContact?.name || mergedProps.title }}</span>\n <span\n v-if=\"currentContact?.online\"\n class=\"c-chat__header-status\"\n >\n 在线\n </span>\n </slot>\n </div>\n\n <!-- 消息列表 -->\n <div\n ref=\"messagesRef\"\n class=\"c-chat__messages\"\n @scroll=\"handleMessagesScroll\"\n >\n <!-- 加载更多 -->\n <div\n v-if=\"mergedProps.loadingHistory\"\n class=\"c-chat__load-more\"\n >\n <NSpin size=\"small\" />\n </div>\n\n <!-- 消息为空 -->\n <div\n v-if=\"!messageList.length && !mergedProps.loadingHistory\"\n class=\"c-chat__empty\"\n >\n 暂无消息,发送第一条吧\n </div>\n\n <!-- 消息列表 -->\n <template\n v-for=\"(msg, idx) in messageList\"\n :key=\"msg.id\"\n >\n <!-- 时间分割 -->\n <div\n v-if=\"shouldShowTimeDivider(msg, idx)\"\n class=\"c-chat__time-divider\"\n >\n {{ formatMessageTime(msg.timestamp) }}\n </div>\n\n <!-- 消息条目 -->\n <div\n class=\"c-chat__msg\"\n :class=\"`is-${msg.sender}`\"\n >\n <!-- 头像 -->\n <div\n v-if=\"msg.sender !== 'system'\"\n class=\"c-chat__msg-avatar\"\n >\n <img\n v-if=\"getAvatar(msg)\"\n :src=\"getAvatar(msg)\"\n class=\"c-chat__avatar\"\n />\n <div\n v-else\n class=\"c-chat__avatar-fallback\"\n >\n {{ getUsername(msg).charAt(0) }}\n </div>\n </div>\n\n <!-- 消息体 -->\n <div class=\"c-chat__msg-body\">\n <span\n v-if=\"msg.sender === 'other' && msg.username\"\n class=\"c-chat__msg-username\"\n >\n {{ msg.username }}\n </span>\n\n <!-- 文本消息 -->\n <div\n v-if=\"msg.type === 'text' || msg.type === 'system'\"\n class=\"c-chat__bubble\"\n >\n {{ msg.content }}\n </div>\n\n <!-- 图片消息 -->\n <img\n v-else-if=\"msg.type === 'image'\"\n :src=\"msg.content\"\n class=\"c-chat__msg-image\"\n @click=\"emit('image-preview', msg.content)\"\n />\n\n <!-- 文件消息 -->\n <div\n v-else-if=\"msg.type === 'file'\"\n class=\"c-chat__msg-file\"\n @click=\"emit('file-click', msg)\"\n >\n <C_Icon\n name=\"mdi:file-document-outline\"\n :size=\"28\"\n />\n <div class=\"c-chat__file-info\">\n <span class=\"c-chat__file-name\">{{\n msg.fileName || '文件'\n }}</span>\n <span\n v-if=\"msg.fileSize\"\n class=\"c-chat__file-size\"\n >\n {{ formatFileSize(msg.fileSize) }}\n </span>\n </div>\n </div>\n\n <!-- 时间戳 -->\n <span\n v-if=\"mergedProps.showTimestamp && msg.sender !== 'system'\"\n class=\"c-chat__msg-time\"\n >\n {{ formatTime(msg.timestamp) }}\n </span>\n\n <!-- 发送状态 -->\n <span\n v-if=\"msg.sender === 'self' && msg.status\"\n class=\"c-chat__msg-status\"\n :class=\"`is-${msg.status}`\"\n @click=\"msg.status === 'failed' && emit('resend', msg)\"\n >\n {{\n msg.status === 'sending'\n ? '发送中...'\n : msg.status === 'failed'\n ? '发送失败,点击重试'\n : ''\n }}\n </span>\n </div>\n </div>\n </template>\n </div>\n\n <!-- 输入区域 -->\n <div class=\"c-chat__input-area\">\n <div class=\"c-chat__input-actions\">\n <slot name=\"input-actions\">\n <NButton\n quaternary\n circle\n size=\"small\"\n @click=\"emit('emoji-click')\"\n >\n <template #icon>\n <C_Icon\n name=\"mdi:emoticon-happy-outline\"\n :size=\"18\"\n />\n </template>\n </NButton>\n <NButton\n quaternary\n circle\n size=\"small\"\n @click=\"emit('file-upload')\"\n >\n <template #icon>\n <C_Icon\n name=\"mdi:paperclip\"\n :size=\"18\"\n />\n </template>\n </NButton>\n </slot>\n </div>\n\n <div class=\"c-chat__input-wrap\">\n <NInput\n v-model:value=\"inputText\"\n :placeholder=\"mergedProps.placeholder\"\n type=\"textarea\"\n :autosize=\"{ minRows: 1, maxRows: 4 }\"\n @keydown.enter.exact.prevent=\"handleSend\"\n />\n </div>\n\n <NButton\n v-if=\"mergedProps.showSendBtn\"\n type=\"primary\"\n :disabled=\"!inputText.trim()\"\n class=\"c-chat__send-btn\"\n @click=\"handleSend\"\n >\n <template #icon>\n <C_Icon\n name=\"mdi:send\"\n :size=\"16\"\n />\n </template>\n </NButton>\n </div>\n </div>\n\n <!-- ===== 未选中联系人空态 ===== -->\n <div\n v-else\n class=\"c-chat__main c-chat__no-chat\"\n >\n <C_Icon\n name=\"mdi:chat-processing-outline\"\n :size=\"48\"\n class=\"c-chat__no-chat-icon\"\n />\n <span>选择一个会话开始聊天</span>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref, watch } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_CHAT_PROPS,\n type ChatProps,\n type ChatMessage,\n type ChatContact,\n } from './types'\n\n // ===== Props & Emits =====\n const props = withDefaults(defineProps<ChatProps>(), {\n contacts: () => [],\n messages: () => [],\n currentContactId: '',\n placeholder: DEFAULT_CHAT_PROPS.placeholder,\n showContacts: DEFAULT_CHAT_PROPS.showContacts,\n showTimestamp: DEFAULT_CHAT_PROPS.showTimestamp,\n showSendBtn: DEFAULT_CHAT_PROPS.showSendBtn,\n loadingHistory: DEFAULT_CHAT_PROPS.loadingHistory,\n title: DEFAULT_CHAT_PROPS.title,\n selfAvatar: '',\n selfName: '',\n })\n\n const emit = defineEmits<{\n (e: 'send', content: string): void\n (e: 'select-contact', id: string): void\n (e: 'load-more'): void\n (e: 'image-preview', url: string): void\n (e: 'file-click', msg: ChatMessage): void\n (e: 'file-upload'): void\n (e: 'emoji-click'): void\n (e: 'resend', msg: ChatMessage): void\n }>()\n\n // ===== 合并 Props =====\n const mergedProps = computed(() => ({\n ...DEFAULT_CHAT_PROPS,\n ...props,\n }))\n\n // ===== 内部状态 =====\n const inputText = ref('')\n const searchKeyword = ref('')\n const messagesRef = ref<HTMLElement | null>(null)\n\n // ===== 计算属性 =====\n const contactList = computed<ChatContact[]>(() => props.contacts ?? [])\n const messageList = computed<ChatMessage[]>(() => props.messages ?? [])\n\n const currentId = computed(\n () => props.currentContactId || contactList.value[0]?.id || ''\n )\n\n const currentContact = computed(() =>\n contactList.value.find(c => c.id === currentId.value)\n )\n\n const filteredContacts = computed(() => {\n if (!searchKeyword.value) return contactList.value\n const kw = searchKeyword.value.toLowerCase()\n return contactList.value.filter(c => c.name.toLowerCase().includes(kw))\n })\n\n // ===== 方法 =====\n const handleSelectContact = (id: string) => {\n emit('select-contact', id)\n }\n\n const handleSend = () => {\n const text = inputText.value.trim()\n if (!text) return\n emit('send', text)\n inputText.value = ''\n }\n\n /** 自动滚动到底部 */\n const scrollToBottom = () => {\n nextTick(() => {\n if (messagesRef.value) {\n messagesRef.value.scrollTop = messagesRef.value.scrollHeight\n }\n })\n }\n\n // 消息变化时自动滚动\n watch(\n () => props.messages?.length,\n () => scrollToBottom(),\n { flush: 'post' }\n )\n\n /** 滚动到顶部时触发加载更多 */\n const handleMessagesScroll = () => {\n if (\n messagesRef.value &&\n messagesRef.value.scrollTop === 0 &&\n !mergedProps.value.loadingHistory\n ) {\n emit('load-more')\n }\n }\n\n // ===== 工具函数 =====\n const getAvatar = (msg: ChatMessage) => {\n if (msg.sender === 'self') return props.selfAvatar || msg.avatar\n return msg.avatar\n }\n\n const getUsername = (msg: ChatMessage) => {\n if (msg.sender === 'self') return props.selfName || msg.username || 'Me'\n return msg.username || '未知'\n }\n\n const formatTime = (ts: string | number) => {\n const d = new Date(ts)\n return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`\n }\n\n const formatMessageTime = (ts: string | number) => {\n const d = new Date(ts)\n const now = new Date()\n const isToday =\n d.getFullYear() === now.getFullYear() &&\n d.getMonth() === now.getMonth() &&\n d.getDate() === now.getDate()\n if (isToday) return formatTime(ts)\n return `${d.getMonth() + 1}/${d.getDate()} ${formatTime(ts)}`\n }\n\n const formatContactTime = (ts: string | number) => {\n const d = new Date(ts)\n const now = new Date()\n const diff = now.getTime() - d.getTime()\n if (diff < 60_000) return '刚刚'\n if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}分钟前`\n if (diff < 86_400_000) return formatTime(ts)\n return `${d.getMonth() + 1}/${d.getDate()}`\n }\n\n const formatFileSize = (bytes: number) => {\n if (bytes < 1024) return `${bytes}B`\n if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)}KB`\n return `${(bytes / 1048576).toFixed(1)}MB`\n }\n\n /** 是否显示时间分割线(两条消息间超过 5 分钟) */\n const shouldShowTimeDivider = (msg: ChatMessage, idx: number) => {\n if (idx === 0) return true\n const prev = messageList.value[idx - 1]\n const curr = new Date(msg.timestamp).getTime()\n const prevTime = new Date(prev.timestamp).getTime()\n return curr - prevTime > 5 * 60 * 1000\n }\n\n // ===== 暴露方法 =====\n defineExpose({ scrollToBottom })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n","<!--\n * @Description: C_Chat — 通用聊天组件\n *\n * 支持联系人列表 + 消息气泡 + 输入框,可用于 IM、客服、AI 对话等场景。\n * 通过 CSS 变量可完全自定义主题风格。\n *\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <div class=\"c-chat\">\n <!-- ===== 联系人侧栏 ===== -->\n <aside\n v-if=\"mergedProps.showContacts && contactList.length\"\n class=\"c-chat__sidebar\"\n >\n <div class=\"c-chat__sidebar-header\">\n <C_Icon\n name=\"mdi:chat-outline\"\n :size=\"20\"\n />\n 会话\n </div>\n\n <!-- 搜索框 -->\n <div class=\"c-chat__search\">\n <NInput\n v-model:value=\"searchKeyword\"\n placeholder=\"搜索联系人\"\n clearable\n size=\"small\"\n >\n <template #prefix>\n <C_Icon\n name=\"mdi:magnify\"\n :size=\"16\"\n />\n </template>\n </NInput>\n </div>\n\n <!-- 联系人列表 -->\n <div class=\"c-chat__contact-list\">\n <div\n v-for=\"contact in filteredContacts\"\n :key=\"contact.id\"\n class=\"c-chat__contact\"\n :class=\"{ 'is-active': contact.id === currentId }\"\n @click=\"handleSelectContact(contact.id)\"\n >\n <div class=\"c-chat__contact-avatar\">\n <img\n v-if=\"contact.avatar\"\n :src=\"contact.avatar\"\n :alt=\"contact.name\"\n class=\"c-chat__avatar\"\n />\n <div\n v-else\n class=\"c-chat__avatar-fallback\"\n >\n {{ contact.name.charAt(0) }}\n </div>\n <span\n v-if=\"contact.online\"\n class=\"c-chat__online-dot\"\n />\n </div>\n\n <div class=\"c-chat__contact-info\">\n <div class=\"c-chat__contact-name\">\n <span>{{ contact.name }}</span>\n <span\n v-if=\"contact.lastTime\"\n class=\"c-chat__contact-time\"\n >\n {{ formatContactTime(contact.lastTime) }}\n </span>\n </div>\n <div\n v-if=\"contact.lastMessage\"\n class=\"c-chat__contact-last\"\n >\n {{ contact.lastMessage }}\n </div>\n </div>\n\n <span\n v-if=\"contact.unread\"\n class=\"c-chat__unread\"\n >\n {{ contact.unread > 99 ? '99+' : contact.unread }}\n </span>\n </div>\n </div>\n </aside>\n\n <!-- ===== 主聊天区域 ===== -->\n <div\n v-if=\"currentContact || !mergedProps.showContacts\"\n class=\"c-chat__main\"\n >\n <!-- 顶栏 -->\n <div class=\"c-chat__header\">\n <slot name=\"header\">\n <span>{{ currentContact?.name || mergedProps.title }}</span>\n <span\n v-if=\"currentContact?.online\"\n class=\"c-chat__header-status\"\n >\n 在线\n </span>\n </slot>\n </div>\n\n <!-- 消息列表 -->\n <div\n ref=\"messagesRef\"\n class=\"c-chat__messages\"\n @scroll=\"handleMessagesScroll\"\n >\n <!-- 加载更多 -->\n <div\n v-if=\"mergedProps.loadingHistory\"\n class=\"c-chat__load-more\"\n >\n <NSpin size=\"small\" />\n </div>\n\n <!-- 消息为空 -->\n <div\n v-if=\"!messageList.length && !mergedProps.loadingHistory\"\n class=\"c-chat__empty\"\n >\n 暂无消息,发送第一条吧\n </div>\n\n <!-- 消息列表 -->\n <template\n v-for=\"(msg, idx) in messageList\"\n :key=\"msg.id\"\n >\n <!-- 时间分割 -->\n <div\n v-if=\"shouldShowTimeDivider(msg, idx)\"\n class=\"c-chat__time-divider\"\n >\n {{ formatMessageTime(msg.timestamp) }}\n </div>\n\n <!-- 消息条目 -->\n <div\n class=\"c-chat__msg\"\n :class=\"`is-${msg.sender}`\"\n >\n <!-- 头像 -->\n <div\n v-if=\"msg.sender !== 'system'\"\n class=\"c-chat__msg-avatar\"\n >\n <img\n v-if=\"getAvatar(msg)\"\n :src=\"getAvatar(msg)\"\n class=\"c-chat__avatar\"\n />\n <div\n v-else\n class=\"c-chat__avatar-fallback\"\n >\n {{ getUsername(msg).charAt(0) }}\n </div>\n </div>\n\n <!-- 消息体 -->\n <div class=\"c-chat__msg-body\">\n <span\n v-if=\"msg.sender === 'other' && msg.username\"\n class=\"c-chat__msg-username\"\n >\n {{ msg.username }}\n </span>\n\n <!-- 文本消息 -->\n <div\n v-if=\"msg.type === 'text' || msg.type === 'system'\"\n class=\"c-chat__bubble\"\n >\n {{ msg.content }}\n </div>\n\n <!-- 图片消息 -->\n <img\n v-else-if=\"msg.type === 'image'\"\n :src=\"msg.content\"\n class=\"c-chat__msg-image\"\n @click=\"emit('image-preview', msg.content)\"\n />\n\n <!-- 文件消息 -->\n <div\n v-else-if=\"msg.type === 'file'\"\n class=\"c-chat__msg-file\"\n @click=\"emit('file-click', msg)\"\n >\n <C_Icon\n name=\"mdi:file-document-outline\"\n :size=\"28\"\n />\n <div class=\"c-chat__file-info\">\n <span class=\"c-chat__file-name\">{{\n msg.fileName || '文件'\n }}</span>\n <span\n v-if=\"msg.fileSize\"\n class=\"c-chat__file-size\"\n >\n {{ formatFileSize(msg.fileSize) }}\n </span>\n </div>\n </div>\n\n <!-- 时间戳 -->\n <span\n v-if=\"mergedProps.showTimestamp && msg.sender !== 'system'\"\n class=\"c-chat__msg-time\"\n >\n {{ formatTime(msg.timestamp) }}\n </span>\n\n <!-- 发送状态 -->\n <span\n v-if=\"msg.sender === 'self' && msg.status\"\n class=\"c-chat__msg-status\"\n :class=\"`is-${msg.status}`\"\n @click=\"msg.status === 'failed' && emit('resend', msg)\"\n >\n {{\n msg.status === 'sending'\n ? '发送中...'\n : msg.status === 'failed'\n ? '发送失败,点击重试'\n : ''\n }}\n </span>\n </div>\n </div>\n </template>\n </div>\n\n <!-- 输入区域 -->\n <div class=\"c-chat__input-area\">\n <div class=\"c-chat__input-actions\">\n <slot name=\"input-actions\">\n <NButton\n quaternary\n circle\n size=\"small\"\n @click=\"emit('emoji-click')\"\n >\n <template #icon>\n <C_Icon\n name=\"mdi:emoticon-happy-outline\"\n :size=\"18\"\n />\n </template>\n </NButton>\n <NButton\n quaternary\n circle\n size=\"small\"\n @click=\"emit('file-upload')\"\n >\n <template #icon>\n <C_Icon\n name=\"mdi:paperclip\"\n :size=\"18\"\n />\n </template>\n </NButton>\n </slot>\n </div>\n\n <div class=\"c-chat__input-wrap\">\n <NInput\n v-model:value=\"inputText\"\n :placeholder=\"mergedProps.placeholder\"\n type=\"textarea\"\n :autosize=\"{ minRows: 1, maxRows: 4 }\"\n @keydown.enter.exact.prevent=\"handleSend\"\n />\n </div>\n\n <NButton\n v-if=\"mergedProps.showSendBtn\"\n type=\"primary\"\n :disabled=\"!inputText.trim()\"\n class=\"c-chat__send-btn\"\n @click=\"handleSend\"\n >\n <template #icon>\n <C_Icon\n name=\"mdi:send\"\n :size=\"16\"\n />\n </template>\n </NButton>\n </div>\n </div>\n\n <!-- ===== 未选中联系人空态 ===== -->\n <div\n v-else\n class=\"c-chat__main c-chat__no-chat\"\n >\n <C_Icon\n name=\"mdi:chat-processing-outline\"\n :size=\"48\"\n class=\"c-chat__no-chat-icon\"\n />\n <span>选择一个会话开始聊天</span>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref, watch } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_CHAT_PROPS,\n type ChatProps,\n type ChatMessage,\n type ChatContact,\n } from './types'\n\n // ===== Props & Emits =====\n const props = withDefaults(defineProps<ChatProps>(), {\n contacts: () => [],\n messages: () => [],\n currentContactId: '',\n placeholder: DEFAULT_CHAT_PROPS.placeholder,\n showContacts: DEFAULT_CHAT_PROPS.showContacts,\n showTimestamp: DEFAULT_CHAT_PROPS.showTimestamp,\n showSendBtn: DEFAULT_CHAT_PROPS.showSendBtn,\n loadingHistory: DEFAULT_CHAT_PROPS.loadingHistory,\n title: DEFAULT_CHAT_PROPS.title,\n selfAvatar: '',\n selfName: '',\n })\n\n const emit = defineEmits<{\n (e: 'send', content: string): void\n (e: 'select-contact', id: string): void\n (e: 'load-more'): void\n (e: 'image-preview', url: string): void\n (e: 'file-click', msg: ChatMessage): void\n (e: 'file-upload'): void\n (e: 'emoji-click'): void\n (e: 'resend', msg: ChatMessage): void\n }>()\n\n // ===== 合并 Props =====\n const mergedProps = computed(() => ({\n ...DEFAULT_CHAT_PROPS,\n ...props,\n }))\n\n // ===== 内部状态 =====\n const inputText = ref('')\n const searchKeyword = ref('')\n const messagesRef = ref<HTMLElement | null>(null)\n\n // ===== 计算属性 =====\n const contactList = computed<ChatContact[]>(() => props.contacts ?? [])\n const messageList = computed<ChatMessage[]>(() => props.messages ?? [])\n\n const currentId = computed(\n () => props.currentContactId || contactList.value[0]?.id || ''\n )\n\n const currentContact = computed(() =>\n contactList.value.find(c => c.id === currentId.value)\n )\n\n const filteredContacts = computed(() => {\n if (!searchKeyword.value) return contactList.value\n const kw = searchKeyword.value.toLowerCase()\n return contactList.value.filter(c => c.name.toLowerCase().includes(kw))\n })\n\n // ===== 方法 =====\n const handleSelectContact = (id: string) => {\n emit('select-contact', id)\n }\n\n const handleSend = () => {\n const text = inputText.value.trim()\n if (!text) return\n emit('send', text)\n inputText.value = ''\n }\n\n /** 自动滚动到底部 */\n const scrollToBottom = () => {\n nextTick(() => {\n if (messagesRef.value) {\n messagesRef.value.scrollTop = messagesRef.value.scrollHeight\n }\n })\n }\n\n // 消息变化时自动滚动\n watch(\n () => props.messages?.length,\n () => scrollToBottom(),\n { flush: 'post' }\n )\n\n /** 滚动到顶部时触发加载更多 */\n const handleMessagesScroll = () => {\n if (\n messagesRef.value &&\n messagesRef.value.scrollTop === 0 &&\n !mergedProps.value.loadingHistory\n ) {\n emit('load-more')\n }\n }\n\n // ===== 工具函数 =====\n const getAvatar = (msg: ChatMessage) => {\n if (msg.sender === 'self') return props.selfAvatar || msg.avatar\n return msg.avatar\n }\n\n const getUsername = (msg: ChatMessage) => {\n if (msg.sender === 'self') return props.selfName || msg.username || 'Me'\n return msg.username || '未知'\n }\n\n const formatTime = (ts: string | number) => {\n const d = new Date(ts)\n return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`\n }\n\n const formatMessageTime = (ts: string | number) => {\n const d = new Date(ts)\n const now = new Date()\n const isToday =\n d.getFullYear() === now.getFullYear() &&\n d.getMonth() === now.getMonth() &&\n d.getDate() === now.getDate()\n if (isToday) return formatTime(ts)\n return `${d.getMonth() + 1}/${d.getDate()} ${formatTime(ts)}`\n }\n\n const formatContactTime = (ts: string | number) => {\n const d = new Date(ts)\n const now = new Date()\n const diff = now.getTime() - d.getTime()\n if (diff < 60_000) return '刚刚'\n if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}分钟前`\n if (diff < 86_400_000) return formatTime(ts)\n return `${d.getMonth() + 1}/${d.getDate()}`\n }\n\n const formatFileSize = (bytes: number) => {\n if (bytes < 1024) return `${bytes}B`\n if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)}KB`\n return `${(bytes / 1048576).toFixed(1)}MB`\n }\n\n /** 是否显示时间分割线(两条消息间超过 5 分钟) */\n const shouldShowTimeDivider = (msg: ChatMessage, idx: number) => {\n if (idx === 0) return true\n const prev = messageList.value[idx - 1]\n const curr = new Date(msg.timestamp).getTime()\n const prevTime = new Date(prev.timestamp).getTime()\n return curr - prevTime > 5 * 60 * 1000\n }\n\n // ===== 暴露方法 =====\n defineExpose({ scrollToBottom })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n"],"mappings":"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"}
package/dist/C_City.d.cts CHANGED
@@ -1,2 +1,2 @@
1
- import { t as _default } from "./index6.vue.js";
1
+ import { t as _default } from "./index9.vue.js";
2
2
  export { _default as C_City };
package/dist/C_City.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { t as _default } from "./index6.vue.js";
1
+ import { t as _default } from "./index9.vue.js";
2
2
  export { _default as C_City };
package/dist/C_Code.d.cts CHANGED
@@ -1,2 +1,2 @@
1
- import { t as _default } from "./index7.vue.js";
1
+ import { t as _default } from "./index10.vue.js";
2
2
  export { _default as C_Code };
package/dist/C_Code.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { t as _default } from "./index7.vue.js";
1
+ import { t as _default } from "./index10.vue.js";
2
2
  export { _default as C_Code };
@@ -0,0 +1 @@
1
+ {"version":3,"file":"C_ContextMenu-B3Cgz_wJ.css","names":[],"sources":["../src/components/C_ContextMenu/index.vue?vue&type=style&index=0&scoped=cdd4d8bb&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-context-menu[data-v-cdd4d8bb] {\n --ctx-bg: var(--card-color);\n --ctx-bg-blur: 12px;\n --ctx-border: var(--border-color);\n --ctx-radius: 10px;\n --ctx-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n --ctx-padding: 6px;\n --ctx-text-primary: var(--app-text-primary);\n --ctx-text-secondary: var(--text-color-3);\n --ctx-text-danger: #d03050;\n --ctx-text-disabled: var(--text-color-3);\n --ctx-item-height: 32px;\n --ctx-item-padding: 0 12px;\n --ctx-item-radius: 6px;\n --ctx-item-hover-bg: color-mix(in srgb, var(--primary-color) 8%, transparent);\n --ctx-item-active-bg: color-mix(in srgb, var(--primary-color) 14%, transparent);\n --ctx-icon-size: 16px;\n --ctx-icon-gap: 10px;\n --ctx-shortcut-color: var(--text-color-3);\n --ctx-divider-color: var(--border-color);\n --ctx-divider-margin: 4px 8px;\n position: fixed;\n padding: var(--ctx-padding);\n background: var(--ctx-bg);\n backdrop-filter: blur(var(--ctx-bg-blur));\n border: 1px solid var(--ctx-border);\n border-radius: var(--ctx-radius);\n box-shadow: var(--ctx-shadow);\n color: var(--ctx-text-primary);\n font-size: 13px;\n user-select: none;\n outline: none;\n}\n.c-context-menu__item[data-v-cdd4d8bb] {\n position: relative;\n display: flex;\n align-items: center;\n height: var(--ctx-item-height);\n padding: var(--ctx-item-padding);\n border-radius: var(--ctx-item-radius);\n cursor: pointer;\n transition: background 0.15s;\n white-space: nowrap;\n gap: var(--ctx-icon-gap);\n}\n.c-context-menu__item[data-v-cdd4d8bb]:hover {\n background: var(--ctx-item-hover-bg);\n}\n.c-context-menu__item[data-v-cdd4d8bb]:active {\n background: var(--ctx-item-active-bg);\n}\n.c-context-menu__item.is-disabled[data-v-cdd4d8bb] {\n color: var(--ctx-text-disabled);\n cursor: not-allowed;\n pointer-events: none;\n}\n.c-context-menu__item.is-danger[data-v-cdd4d8bb] {\n color: var(--ctx-text-danger);\n}\n.c-context-menu__item.is-danger[data-v-cdd4d8bb]:hover {\n background: color-mix(in srgb, #d03050 12%, transparent);\n}\n.c-context-menu__icon[data-v-cdd4d8bb] {\n flex-shrink: 0;\n width: var(--ctx-icon-size);\n height: var(--ctx-icon-size);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--ctx-icon-size);\n}\n.c-context-menu__label[data-v-cdd4d8bb] {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.c-context-menu__shortcut[data-v-cdd4d8bb] {\n flex-shrink: 0;\n margin-left: 24px;\n font-size: 11px;\n color: var(--ctx-shortcut-color);\n font-family: \"JetBrains Mono\", \"Fira Code\", monospace;\n}\n.c-context-menu__arrow[data-v-cdd4d8bb] {\n flex-shrink: 0;\n margin-left: 8px;\n font-size: 12px;\n color: var(--ctx-text-secondary);\n transition: transform 0.15s;\n}\n.c-context-menu__divider[data-v-cdd4d8bb] {\n height: 1px;\n margin: var(--ctx-divider-margin);\n background: var(--ctx-divider-color);\n}\n.c-context-menu__submenu[data-v-cdd4d8bb] {\n position: absolute;\n top: -6px;\n}\n.c-context-menu__submenu.is-right[data-v-cdd4d8bb] {\n left: 100%;\n margin-left: 4px;\n}\n.c-context-menu__submenu.is-left[data-v-cdd4d8bb] {\n right: 100%;\n margin-right: 4px;\n}\n.c-context-menu-overlay[data-v-cdd4d8bb] {\n position: fixed;\n inset: 0;\n z-index: 9998;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"C_ContextMenu-u1LixF3_.css","names":[],"sources":["../src/components/C_ContextMenu/index.vue?vue&type=style&index=0&scoped=cdd4d8bb&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-context-menu[data-v-cdd4d8bb] {\n --ctx-bg: var(--card-color);\n --ctx-bg-blur: 12px;\n --ctx-border: var(--border-color);\n --ctx-radius: 10px;\n --ctx-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n --ctx-padding: 6px;\n --ctx-text-primary: var(--app-text-primary);\n --ctx-text-secondary: var(--text-color-3);\n --ctx-text-danger: #d03050;\n --ctx-text-disabled: var(--text-color-3);\n --ctx-item-height: 32px;\n --ctx-item-padding: 0 12px;\n --ctx-item-radius: 6px;\n --ctx-item-hover-bg: color-mix(in srgb, var(--primary-color) 8%, transparent);\n --ctx-item-active-bg: color-mix(in srgb, var(--primary-color) 14%, transparent);\n --ctx-icon-size: 16px;\n --ctx-icon-gap: 10px;\n --ctx-shortcut-color: var(--text-color-3);\n --ctx-divider-color: var(--border-color);\n --ctx-divider-margin: 4px 8px;\n position: fixed;\n padding: var(--ctx-padding);\n background: var(--ctx-bg);\n backdrop-filter: blur(var(--ctx-bg-blur));\n border: 1px solid var(--ctx-border);\n border-radius: var(--ctx-radius);\n box-shadow: var(--ctx-shadow);\n color: var(--ctx-text-primary);\n font-size: 13px;\n user-select: none;\n outline: none;\n}\n.c-context-menu__item[data-v-cdd4d8bb] {\n position: relative;\n display: flex;\n align-items: center;\n height: var(--ctx-item-height);\n padding: var(--ctx-item-padding);\n border-radius: var(--ctx-item-radius);\n cursor: pointer;\n transition: background 0.15s;\n white-space: nowrap;\n gap: var(--ctx-icon-gap);\n}\n.c-context-menu__item[data-v-cdd4d8bb]:hover {\n background: var(--ctx-item-hover-bg);\n}\n.c-context-menu__item[data-v-cdd4d8bb]:active {\n background: var(--ctx-item-active-bg);\n}\n.c-context-menu__item.is-disabled[data-v-cdd4d8bb] {\n color: var(--ctx-text-disabled);\n cursor: not-allowed;\n pointer-events: none;\n}\n.c-context-menu__item.is-danger[data-v-cdd4d8bb] {\n color: var(--ctx-text-danger);\n}\n.c-context-menu__item.is-danger[data-v-cdd4d8bb]:hover {\n background: color-mix(in srgb, #d03050 12%, transparent);\n}\n.c-context-menu__icon[data-v-cdd4d8bb] {\n flex-shrink: 0;\n width: var(--ctx-icon-size);\n height: var(--ctx-icon-size);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--ctx-icon-size);\n}\n.c-context-menu__label[data-v-cdd4d8bb] {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.c-context-menu__shortcut[data-v-cdd4d8bb] {\n flex-shrink: 0;\n margin-left: 24px;\n font-size: 11px;\n color: var(--ctx-shortcut-color);\n font-family: \"JetBrains Mono\", \"Fira Code\", monospace;\n}\n.c-context-menu__arrow[data-v-cdd4d8bb] {\n flex-shrink: 0;\n margin-left: 8px;\n font-size: 12px;\n color: var(--ctx-text-secondary);\n transition: transform 0.15s;\n}\n.c-context-menu__divider[data-v-cdd4d8bb] {\n height: 1px;\n margin: var(--ctx-divider-margin);\n background: var(--ctx-divider-color);\n}\n.c-context-menu__submenu[data-v-cdd4d8bb] {\n position: absolute;\n top: -6px;\n}\n.c-context-menu__submenu.is-right[data-v-cdd4d8bb] {\n left: 100%;\n margin-left: 4px;\n}\n.c-context-menu__submenu.is-left[data-v-cdd4d8bb] {\n right: 100%;\n margin-right: 4px;\n}\n.c-context-menu-overlay[data-v-cdd4d8bb] {\n position: fixed;\n inset: 0;\n z-index: 9998;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
@@ -0,0 +1 @@
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./C_Icon.js`);const e=require(`./C_ContextMenu.js`);exports.C_ContextMenu=e.t,exports.DEFAULT_CONTEXT_MENU_PROPS=e.n;
@@ -0,0 +1,115 @@
1
+ /* unplugin-vue-components disabled */.c-context-menu[data-v-cdd4d8bb] {
2
+ --ctx-bg: var(--card-color);
3
+ --ctx-bg-blur: 12px;
4
+ --ctx-border: var(--border-color);
5
+ --ctx-radius: 10px;
6
+ --ctx-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
7
+ --ctx-padding: 6px;
8
+ --ctx-text-primary: var(--app-text-primary);
9
+ --ctx-text-secondary: var(--text-color-3);
10
+ --ctx-text-danger: #d03050;
11
+ --ctx-text-disabled: var(--text-color-3);
12
+ --ctx-item-height: 32px;
13
+ --ctx-item-padding: 0 12px;
14
+ --ctx-item-radius: 6px;
15
+ --ctx-item-hover-bg: color-mix(in srgb, var(--primary-color) 8%, transparent);
16
+ --ctx-item-active-bg: color-mix(in srgb, var(--primary-color) 14%, transparent);
17
+ --ctx-icon-size: 16px;
18
+ --ctx-icon-gap: 10px;
19
+ --ctx-shortcut-color: var(--text-color-3);
20
+ --ctx-divider-color: var(--border-color);
21
+ --ctx-divider-margin: 4px 8px;
22
+ position: fixed;
23
+ padding: var(--ctx-padding);
24
+ background: var(--ctx-bg);
25
+ backdrop-filter: blur(var(--ctx-bg-blur));
26
+ border: 1px solid var(--ctx-border);
27
+ border-radius: var(--ctx-radius);
28
+ box-shadow: var(--ctx-shadow);
29
+ color: var(--ctx-text-primary);
30
+ font-size: 13px;
31
+ user-select: none;
32
+ outline: none;
33
+ }
34
+ .c-context-menu__item[data-v-cdd4d8bb] {
35
+ position: relative;
36
+ display: flex;
37
+ align-items: center;
38
+ height: var(--ctx-item-height);
39
+ padding: var(--ctx-item-padding);
40
+ border-radius: var(--ctx-item-radius);
41
+ cursor: pointer;
42
+ transition: background 0.15s;
43
+ white-space: nowrap;
44
+ gap: var(--ctx-icon-gap);
45
+ }
46
+ .c-context-menu__item[data-v-cdd4d8bb]:hover {
47
+ background: var(--ctx-item-hover-bg);
48
+ }
49
+ .c-context-menu__item[data-v-cdd4d8bb]:active {
50
+ background: var(--ctx-item-active-bg);
51
+ }
52
+ .c-context-menu__item.is-disabled[data-v-cdd4d8bb] {
53
+ color: var(--ctx-text-disabled);
54
+ cursor: not-allowed;
55
+ pointer-events: none;
56
+ }
57
+ .c-context-menu__item.is-danger[data-v-cdd4d8bb] {
58
+ color: var(--ctx-text-danger);
59
+ }
60
+ .c-context-menu__item.is-danger[data-v-cdd4d8bb]:hover {
61
+ background: color-mix(in srgb, #d03050 12%, transparent);
62
+ }
63
+ .c-context-menu__icon[data-v-cdd4d8bb] {
64
+ flex-shrink: 0;
65
+ width: var(--ctx-icon-size);
66
+ height: var(--ctx-icon-size);
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ font-size: var(--ctx-icon-size);
71
+ }
72
+ .c-context-menu__label[data-v-cdd4d8bb] {
73
+ flex: 1;
74
+ min-width: 0;
75
+ overflow: hidden;
76
+ text-overflow: ellipsis;
77
+ }
78
+ .c-context-menu__shortcut[data-v-cdd4d8bb] {
79
+ flex-shrink: 0;
80
+ margin-left: 24px;
81
+ font-size: 11px;
82
+ color: var(--ctx-shortcut-color);
83
+ font-family: "JetBrains Mono", "Fira Code", monospace;
84
+ }
85
+ .c-context-menu__arrow[data-v-cdd4d8bb] {
86
+ flex-shrink: 0;
87
+ margin-left: 8px;
88
+ font-size: 12px;
89
+ color: var(--ctx-text-secondary);
90
+ transition: transform 0.15s;
91
+ }
92
+ .c-context-menu__divider[data-v-cdd4d8bb] {
93
+ height: 1px;
94
+ margin: var(--ctx-divider-margin);
95
+ background: var(--ctx-divider-color);
96
+ }
97
+ .c-context-menu__submenu[data-v-cdd4d8bb] {
98
+ position: absolute;
99
+ top: -6px;
100
+ }
101
+ .c-context-menu__submenu.is-right[data-v-cdd4d8bb] {
102
+ left: 100%;
103
+ margin-left: 4px;
104
+ }
105
+ .c-context-menu__submenu.is-left[data-v-cdd4d8bb] {
106
+ right: 100%;
107
+ margin-right: 4px;
108
+ }
109
+ .c-context-menu-overlay[data-v-cdd4d8bb] {
110
+ position: fixed;
111
+ inset: 0;
112
+ z-index: 9998;
113
+ }
114
+
115
+ /*# sourceMappingURL=C_ContextMenu-B3Cgz_wJ.css.map*/
@@ -0,0 +1,2 @@
1
+ import { i as DEFAULT_CONTEXT_MENU_PROPS, n as ContextMenuItem, r as ContextMenuProps, t as _default } from "./index11.vue.js";
2
+ export { _default as C_ContextMenu, type ContextMenuItem, type ContextMenuProps, DEFAULT_CONTEXT_MENU_PROPS };
@@ -0,0 +1,2 @@
1
+ import { i as DEFAULT_CONTEXT_MENU_PROPS, n as ContextMenuItem, r as ContextMenuProps, t as _default } from "./index11.vue.js";
2
+ export { _default as C_ContextMenu, type ContextMenuItem, type ContextMenuProps, DEFAULT_CONTEXT_MENU_PROPS };
@@ -0,0 +1 @@
1
+ import"./C_Icon2.js";import{n as e,t}from"./C_ContextMenu2.js";export{t as C_ContextMenu,e as DEFAULT_CONTEXT_MENU_PROPS};
@@ -0,0 +1 @@
1
+ {"version":3,"file":"C_ContextMenu.js","names":[],"sources":["../src/components/C_ContextMenu/types.ts","../src/components/C_ContextMenu/index.vue","../src/components/C_ContextMenu/index.vue","../src/components/C_ContextMenu/index.vue"],"sourcesContent":["/**\n * @Description: 右键菜单组件类型定义\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n */\n\n/** 菜单项 */\nexport interface ContextMenuItem {\n /** 唯一标识 */\n key: string\n /** 菜单文字 */\n label: string\n /** 图标(Iconify 图标名) */\n icon?: string\n /** 快捷键标注文字(仅展示,不绑定) */\n shortcut?: string\n /** 是否禁用 */\n disabled?: boolean\n /** 是否隐藏 */\n hidden?: boolean\n /** 分割线(此项渲染为分割线,label 被忽略) */\n divider?: boolean\n /** 子菜单(支持无限嵌套) */\n children?: ContextMenuItem[]\n /** 自定义样式类 */\n className?: string\n /** 危险操作(红色高亮) */\n danger?: boolean\n}\n\n/** 组件 Props */\nexport interface ContextMenuProps {\n /** 菜单项列表 */\n items: ContextMenuItem[]\n /** 菜单最小宽度 */\n minWidth?: number\n /** 菜单最大宽度 */\n maxWidth?: number\n /** 子菜单展开方向 */\n subMenuPlacement?: 'right' | 'left'\n /** 点击菜单项后是否自动关闭 */\n autoClose?: boolean\n /** 是否禁用整个菜单 */\n disabled?: boolean\n /** 自定义 z-index */\n zIndex?: number\n}\n\n/** 默认 Props */\nexport const DEFAULT_CONTEXT_MENU_PROPS = {\n minWidth: 180,\n maxWidth: 280,\n subMenuPlacement: 'right' as const,\n autoClose: true,\n disabled: false,\n zIndex: 9999,\n}\n","/* unplugin-vue-components disabled */<!--\n * @Description: 右键菜单组件 — 声明式配置、快捷键标注、嵌套子菜单\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <!-- 遮罩层 -->\n <Teleport to=\"body\">\n <div\n v-if=\"visible\"\n class=\"c-context-menu-overlay\"\n :style=\"{ zIndex: props.zIndex - 1 }\"\n @click=\"close\"\n @contextmenu.prevent=\"close\"\n />\n\n <!-- 菜单面板 -->\n <div\n v-if=\"visible\"\n ref=\"menuRef\"\n class=\"c-context-menu\"\n :style=\"menuStyle\"\n role=\"menu\"\n tabindex=\"-1\"\n @keydown.escape=\"close\"\n >\n <template\n v-for=\"item in visibleItems\"\n :key=\"item.key\"\n >\n <!-- 分割线 -->\n <div\n v-if=\"item.divider\"\n class=\"c-context-menu__divider\"\n role=\"separator\"\n />\n\n <!-- 普通菜单项 -->\n <div\n v-else\n :class=\"[\n 'c-context-menu__item',\n {\n 'is-disabled': item.disabled,\n 'is-danger': item.danger,\n },\n ]\"\n role=\"menuitem\"\n :aria-disabled=\"item.disabled\"\n @click=\"handleItemClick(item)\"\n @mouseenter=\"handleMouseEnter(item)\"\n @mouseleave=\"handleMouseLeave\"\n >\n <!-- 图标 -->\n <span\n v-if=\"item.icon\"\n class=\"c-context-menu__icon\"\n >\n <C_Icon :name=\"item.icon\" />\n </span>\n\n <!-- 文本 -->\n <span class=\"c-context-menu__label\">{{ item.label }}</span>\n\n <!-- 快捷键 -->\n <span\n v-if=\"item.shortcut\"\n class=\"c-context-menu__shortcut\"\n >\n {{ item.shortcut }}\n </span>\n\n <!-- 子菜单箭头 -->\n <span\n v-if=\"item.children?.length\"\n class=\"c-context-menu__arrow\"\n >\n <C_Icon name=\"mdi:chevron-right\" />\n </span>\n\n <!-- 子菜单(递归) -->\n <C_ContextMenu\n v-if=\"item.children?.length && activeSubKey === item.key\"\n :items=\"item.children\"\n :min-width=\"props.minWidth\"\n :max-width=\"props.maxWidth\"\n :sub-menu-placement=\"props.subMenuPlacement\"\n :auto-close=\"props.autoClose\"\n :z-index=\"props.zIndex + 1\"\n class=\"c-context-menu__submenu\"\n :class=\"`is-${props.subMenuPlacement}`\"\n :style=\"{ position: 'absolute' }\"\n @select=\"handleSubSelect\"\n />\n </div>\n </template>\n </div>\n </Teleport>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_CONTEXT_MENU_PROPS,\n type ContextMenuItem,\n type ContextMenuProps,\n } from './types'\n\n defineOptions({ name: 'C_ContextMenu' })\n\n const props = withDefaults(defineProps<ContextMenuProps>(), {\n items: () => [],\n minWidth: DEFAULT_CONTEXT_MENU_PROPS.minWidth,\n maxWidth: DEFAULT_CONTEXT_MENU_PROPS.maxWidth,\n subMenuPlacement: DEFAULT_CONTEXT_MENU_PROPS.subMenuPlacement,\n autoClose: DEFAULT_CONTEXT_MENU_PROPS.autoClose,\n disabled: DEFAULT_CONTEXT_MENU_PROPS.disabled,\n zIndex: DEFAULT_CONTEXT_MENU_PROPS.zIndex,\n })\n\n const emit = defineEmits<{\n (e: 'select', item: ContextMenuItem): void\n (e: 'open', position: { x: number; y: number }): void\n (e: 'close'): void\n }>()\n\n // ===== 状态 =====\n const visible = ref(false)\n const position = ref({ x: 0, y: 0 })\n const menuRef = ref<HTMLElement>()\n const activeSubKey = ref<string | null>(null)\n\n let subTimer: ReturnType<typeof setTimeout> | null = null\n\n // ===== 可见项 =====\n const visibleItems = computed(() => props.items.filter(item => !item.hidden))\n\n // ===== 菜单定位样式 =====\n const menuStyle = computed(() => ({\n left: `${position.value.x}px`,\n top: `${position.value.y}px`,\n minWidth: `${props.minWidth}px`,\n maxWidth: `${props.maxWidth}px`,\n zIndex: props.zIndex,\n }))\n\n // ===== 边界校正 =====\n const adjustPosition = () => {\n nextTick(() => {\n const el = menuRef.value\n if (!el) return\n const rect = el.getBoundingClientRect()\n const { innerWidth, innerHeight } = window\n\n if (rect.right > innerWidth) {\n position.value.x = innerWidth - rect.width - 8\n }\n if (rect.bottom > innerHeight) {\n position.value.y = innerHeight - rect.height - 8\n }\n if (position.value.x < 0) position.value.x = 8\n if (position.value.y < 0) position.value.y = 8\n })\n }\n\n // ===== 打开/关闭 =====\n const open = (x: number, y: number) => {\n if (props.disabled) return\n position.value = { x, y }\n visible.value = true\n emit('open', { x, y })\n adjustPosition()\n\n // 聚焦以支持 Escape 关闭\n nextTick(() => menuRef.value?.focus())\n }\n\n const close = () => {\n visible.value = false\n activeSubKey.value = null\n emit('close')\n }\n\n // ===== 菜单项点击 =====\n const handleItemClick = (item: ContextMenuItem) => {\n if (item.disabled) return\n if (item.children?.length) return // 有子菜单不触发\n\n emit('select', item)\n if (props.autoClose) close()\n }\n\n // ===== 子菜单悬停 =====\n const handleMouseEnter = (item: ContextMenuItem) => {\n if (subTimer) {\n clearTimeout(subTimer)\n subTimer = null\n }\n if (item.children?.length && !item.disabled) {\n subTimer = setTimeout(() => {\n activeSubKey.value = item.key\n }, 150)\n } else {\n activeSubKey.value = null\n }\n }\n\n const handleMouseLeave = () => {\n if (subTimer) {\n clearTimeout(subTimer)\n subTimer = null\n }\n subTimer = setTimeout(() => {\n activeSubKey.value = null\n }, 300)\n }\n\n // ===== 子菜单选择向上冒泡 =====\n const handleSubSelect = (item: ContextMenuItem) => {\n emit('select', item)\n if (props.autoClose) close()\n }\n\n // ===== 暴露 API =====\n defineExpose({\n /** 在指定坐标打开菜单 */\n open,\n /** 关闭菜单 */\n close,\n /** 当前是否可见 */\n visible: computed(() => visible.value),\n })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Description: 右键菜单组件 — 声明式配置、快捷键标注、嵌套子菜单\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <!-- 遮罩层 -->\n <Teleport to=\"body\">\n <div\n v-if=\"visible\"\n class=\"c-context-menu-overlay\"\n :style=\"{ zIndex: props.zIndex - 1 }\"\n @click=\"close\"\n @contextmenu.prevent=\"close\"\n />\n\n <!-- 菜单面板 -->\n <div\n v-if=\"visible\"\n ref=\"menuRef\"\n class=\"c-context-menu\"\n :style=\"menuStyle\"\n role=\"menu\"\n tabindex=\"-1\"\n @keydown.escape=\"close\"\n >\n <template\n v-for=\"item in visibleItems\"\n :key=\"item.key\"\n >\n <!-- 分割线 -->\n <div\n v-if=\"item.divider\"\n class=\"c-context-menu__divider\"\n role=\"separator\"\n />\n\n <!-- 普通菜单项 -->\n <div\n v-else\n :class=\"[\n 'c-context-menu__item',\n {\n 'is-disabled': item.disabled,\n 'is-danger': item.danger,\n },\n ]\"\n role=\"menuitem\"\n :aria-disabled=\"item.disabled\"\n @click=\"handleItemClick(item)\"\n @mouseenter=\"handleMouseEnter(item)\"\n @mouseleave=\"handleMouseLeave\"\n >\n <!-- 图标 -->\n <span\n v-if=\"item.icon\"\n class=\"c-context-menu__icon\"\n >\n <C_Icon :name=\"item.icon\" />\n </span>\n\n <!-- 文本 -->\n <span class=\"c-context-menu__label\">{{ item.label }}</span>\n\n <!-- 快捷键 -->\n <span\n v-if=\"item.shortcut\"\n class=\"c-context-menu__shortcut\"\n >\n {{ item.shortcut }}\n </span>\n\n <!-- 子菜单箭头 -->\n <span\n v-if=\"item.children?.length\"\n class=\"c-context-menu__arrow\"\n >\n <C_Icon name=\"mdi:chevron-right\" />\n </span>\n\n <!-- 子菜单(递归) -->\n <C_ContextMenu\n v-if=\"item.children?.length && activeSubKey === item.key\"\n :items=\"item.children\"\n :min-width=\"props.minWidth\"\n :max-width=\"props.maxWidth\"\n :sub-menu-placement=\"props.subMenuPlacement\"\n :auto-close=\"props.autoClose\"\n :z-index=\"props.zIndex + 1\"\n class=\"c-context-menu__submenu\"\n :class=\"`is-${props.subMenuPlacement}`\"\n :style=\"{ position: 'absolute' }\"\n @select=\"handleSubSelect\"\n />\n </div>\n </template>\n </div>\n </Teleport>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_CONTEXT_MENU_PROPS,\n type ContextMenuItem,\n type ContextMenuProps,\n } from './types'\n\n defineOptions({ name: 'C_ContextMenu' })\n\n const props = withDefaults(defineProps<ContextMenuProps>(), {\n items: () => [],\n minWidth: DEFAULT_CONTEXT_MENU_PROPS.minWidth,\n maxWidth: DEFAULT_CONTEXT_MENU_PROPS.maxWidth,\n subMenuPlacement: DEFAULT_CONTEXT_MENU_PROPS.subMenuPlacement,\n autoClose: DEFAULT_CONTEXT_MENU_PROPS.autoClose,\n disabled: DEFAULT_CONTEXT_MENU_PROPS.disabled,\n zIndex: DEFAULT_CONTEXT_MENU_PROPS.zIndex,\n })\n\n const emit = defineEmits<{\n (e: 'select', item: ContextMenuItem): void\n (e: 'open', position: { x: number; y: number }): void\n (e: 'close'): void\n }>()\n\n // ===== 状态 =====\n const visible = ref(false)\n const position = ref({ x: 0, y: 0 })\n const menuRef = ref<HTMLElement>()\n const activeSubKey = ref<string | null>(null)\n\n let subTimer: ReturnType<typeof setTimeout> | null = null\n\n // ===== 可见项 =====\n const visibleItems = computed(() => props.items.filter(item => !item.hidden))\n\n // ===== 菜单定位样式 =====\n const menuStyle = computed(() => ({\n left: `${position.value.x}px`,\n top: `${position.value.y}px`,\n minWidth: `${props.minWidth}px`,\n maxWidth: `${props.maxWidth}px`,\n zIndex: props.zIndex,\n }))\n\n // ===== 边界校正 =====\n const adjustPosition = () => {\n nextTick(() => {\n const el = menuRef.value\n if (!el) return\n const rect = el.getBoundingClientRect()\n const { innerWidth, innerHeight } = window\n\n if (rect.right > innerWidth) {\n position.value.x = innerWidth - rect.width - 8\n }\n if (rect.bottom > innerHeight) {\n position.value.y = innerHeight - rect.height - 8\n }\n if (position.value.x < 0) position.value.x = 8\n if (position.value.y < 0) position.value.y = 8\n })\n }\n\n // ===== 打开/关闭 =====\n const open = (x: number, y: number) => {\n if (props.disabled) return\n position.value = { x, y }\n visible.value = true\n emit('open', { x, y })\n adjustPosition()\n\n // 聚焦以支持 Escape 关闭\n nextTick(() => menuRef.value?.focus())\n }\n\n const close = () => {\n visible.value = false\n activeSubKey.value = null\n emit('close')\n }\n\n // ===== 菜单项点击 =====\n const handleItemClick = (item: ContextMenuItem) => {\n if (item.disabled) return\n if (item.children?.length) return // 有子菜单不触发\n\n emit('select', item)\n if (props.autoClose) close()\n }\n\n // ===== 子菜单悬停 =====\n const handleMouseEnter = (item: ContextMenuItem) => {\n if (subTimer) {\n clearTimeout(subTimer)\n subTimer = null\n }\n if (item.children?.length && !item.disabled) {\n subTimer = setTimeout(() => {\n activeSubKey.value = item.key\n }, 150)\n } else {\n activeSubKey.value = null\n }\n }\n\n const handleMouseLeave = () => {\n if (subTimer) {\n clearTimeout(subTimer)\n subTimer = null\n }\n subTimer = setTimeout(() => {\n activeSubKey.value = null\n }, 300)\n }\n\n // ===== 子菜单选择向上冒泡 =====\n const handleSubSelect = (item: ContextMenuItem) => {\n emit('select', item)\n if (props.autoClose) close()\n }\n\n // ===== 暴露 API =====\n defineExpose({\n /** 在指定坐标打开菜单 */\n open,\n /** 关闭菜单 */\n close,\n /** 当前是否可见 */\n visible: computed(() => visible.value),\n })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n","<!--\n * @Description: 右键菜单组件 — 声明式配置、快捷键标注、嵌套子菜单\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <!-- 遮罩层 -->\n <Teleport to=\"body\">\n <div\n v-if=\"visible\"\n class=\"c-context-menu-overlay\"\n :style=\"{ zIndex: props.zIndex - 1 }\"\n @click=\"close\"\n @contextmenu.prevent=\"close\"\n />\n\n <!-- 菜单面板 -->\n <div\n v-if=\"visible\"\n ref=\"menuRef\"\n class=\"c-context-menu\"\n :style=\"menuStyle\"\n role=\"menu\"\n tabindex=\"-1\"\n @keydown.escape=\"close\"\n >\n <template\n v-for=\"item in visibleItems\"\n :key=\"item.key\"\n >\n <!-- 分割线 -->\n <div\n v-if=\"item.divider\"\n class=\"c-context-menu__divider\"\n role=\"separator\"\n />\n\n <!-- 普通菜单项 -->\n <div\n v-else\n :class=\"[\n 'c-context-menu__item',\n {\n 'is-disabled': item.disabled,\n 'is-danger': item.danger,\n },\n ]\"\n role=\"menuitem\"\n :aria-disabled=\"item.disabled\"\n @click=\"handleItemClick(item)\"\n @mouseenter=\"handleMouseEnter(item)\"\n @mouseleave=\"handleMouseLeave\"\n >\n <!-- 图标 -->\n <span\n v-if=\"item.icon\"\n class=\"c-context-menu__icon\"\n >\n <C_Icon :name=\"item.icon\" />\n </span>\n\n <!-- 文本 -->\n <span class=\"c-context-menu__label\">{{ item.label }}</span>\n\n <!-- 快捷键 -->\n <span\n v-if=\"item.shortcut\"\n class=\"c-context-menu__shortcut\"\n >\n {{ item.shortcut }}\n </span>\n\n <!-- 子菜单箭头 -->\n <span\n v-if=\"item.children?.length\"\n class=\"c-context-menu__arrow\"\n >\n <C_Icon name=\"mdi:chevron-right\" />\n </span>\n\n <!-- 子菜单(递归) -->\n <C_ContextMenu\n v-if=\"item.children?.length && activeSubKey === item.key\"\n :items=\"item.children\"\n :min-width=\"props.minWidth\"\n :max-width=\"props.maxWidth\"\n :sub-menu-placement=\"props.subMenuPlacement\"\n :auto-close=\"props.autoClose\"\n :z-index=\"props.zIndex + 1\"\n class=\"c-context-menu__submenu\"\n :class=\"`is-${props.subMenuPlacement}`\"\n :style=\"{ position: 'absolute' }\"\n @select=\"handleSubSelect\"\n />\n </div>\n </template>\n </div>\n </Teleport>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_CONTEXT_MENU_PROPS,\n type ContextMenuItem,\n type ContextMenuProps,\n } from './types'\n\n defineOptions({ name: 'C_ContextMenu' })\n\n const props = withDefaults(defineProps<ContextMenuProps>(), {\n items: () => [],\n minWidth: DEFAULT_CONTEXT_MENU_PROPS.minWidth,\n maxWidth: DEFAULT_CONTEXT_MENU_PROPS.maxWidth,\n subMenuPlacement: DEFAULT_CONTEXT_MENU_PROPS.subMenuPlacement,\n autoClose: DEFAULT_CONTEXT_MENU_PROPS.autoClose,\n disabled: DEFAULT_CONTEXT_MENU_PROPS.disabled,\n zIndex: DEFAULT_CONTEXT_MENU_PROPS.zIndex,\n })\n\n const emit = defineEmits<{\n (e: 'select', item: ContextMenuItem): void\n (e: 'open', position: { x: number; y: number }): void\n (e: 'close'): void\n }>()\n\n // ===== 状态 =====\n const visible = ref(false)\n const position = ref({ x: 0, y: 0 })\n const menuRef = ref<HTMLElement>()\n const activeSubKey = ref<string | null>(null)\n\n let subTimer: ReturnType<typeof setTimeout> | null = null\n\n // ===== 可见项 =====\n const visibleItems = computed(() => props.items.filter(item => !item.hidden))\n\n // ===== 菜单定位样式 =====\n const menuStyle = computed(() => ({\n left: `${position.value.x}px`,\n top: `${position.value.y}px`,\n minWidth: `${props.minWidth}px`,\n maxWidth: `${props.maxWidth}px`,\n zIndex: props.zIndex,\n }))\n\n // ===== 边界校正 =====\n const adjustPosition = () => {\n nextTick(() => {\n const el = menuRef.value\n if (!el) return\n const rect = el.getBoundingClientRect()\n const { innerWidth, innerHeight } = window\n\n if (rect.right > innerWidth) {\n position.value.x = innerWidth - rect.width - 8\n }\n if (rect.bottom > innerHeight) {\n position.value.y = innerHeight - rect.height - 8\n }\n if (position.value.x < 0) position.value.x = 8\n if (position.value.y < 0) position.value.y = 8\n })\n }\n\n // ===== 打开/关闭 =====\n const open = (x: number, y: number) => {\n if (props.disabled) return\n position.value = { x, y }\n visible.value = true\n emit('open', { x, y })\n adjustPosition()\n\n // 聚焦以支持 Escape 关闭\n nextTick(() => menuRef.value?.focus())\n }\n\n const close = () => {\n visible.value = false\n activeSubKey.value = null\n emit('close')\n }\n\n // ===== 菜单项点击 =====\n const handleItemClick = (item: ContextMenuItem) => {\n if (item.disabled) return\n if (item.children?.length) return // 有子菜单不触发\n\n emit('select', item)\n if (props.autoClose) close()\n }\n\n // ===== 子菜单悬停 =====\n const handleMouseEnter = (item: ContextMenuItem) => {\n if (subTimer) {\n clearTimeout(subTimer)\n subTimer = null\n }\n if (item.children?.length && !item.disabled) {\n subTimer = setTimeout(() => {\n activeSubKey.value = item.key\n }, 150)\n } else {\n activeSubKey.value = null\n }\n }\n\n const handleMouseLeave = () => {\n if (subTimer) {\n clearTimeout(subTimer)\n subTimer = null\n }\n subTimer = setTimeout(() => {\n activeSubKey.value = null\n }, 300)\n }\n\n // ===== 子菜单选择向上冒泡 =====\n const handleSubSelect = (item: ContextMenuItem) => {\n emit('select', item)\n if (props.autoClose) close()\n }\n\n // ===== 暴露 API =====\n defineExpose({\n /** 在指定坐标打开菜单 */\n open,\n /** 关闭菜单 */\n close,\n /** 当前是否可见 */\n visible: computed(() => visible.value),\n })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,Teleport as r,computed as i,createBlock as a,createCommentVNode as o,createElementBlock as s,createElementVNode as c,createVNode as l,defineComponent as u,nextTick as d,normalizeClass as f,normalizeStyle as p,openBlock as m,ref as h,renderList as g,toDisplayString as _,withKeys as v,withModifiers as y}from"vue";const b={minWidth:180,maxWidth:280,subMenuPlacement:`right`,autoClose:!0,disabled:!1,zIndex:9999},x={key:0,class:`c-context-menu__divider`,role:`separator`},S=[`aria-disabled`,`onClick`,`onMouseenter`],C={key:0,class:`c-context-menu__icon`},w={class:`c-context-menu__label`},T={key:1,class:`c-context-menu__shortcut`},E={key:2,class:`c-context-menu__arrow`};var D=t(u({name:`C_ContextMenu`,__name:`index`,props:{items:{default:()=>[]},minWidth:{default:b.minWidth},maxWidth:{default:b.maxWidth},subMenuPlacement:{default:b.subMenuPlacement},autoClose:{type:Boolean,default:b.autoClose},disabled:{type:Boolean,default:b.disabled},zIndex:{default:b.zIndex}},emits:[`select`,`open`,`close`],setup(t,{expose:u,emit:b}){let O=t,k=b,A=h(!1),j=h({x:0,y:0}),M=h(),N=h(null),P=null,F=i(()=>O.items.filter(e=>!e.hidden)),I=i(()=>({left:`${j.value.x}px`,top:`${j.value.y}px`,minWidth:`${O.minWidth}px`,maxWidth:`${O.maxWidth}px`,zIndex:O.zIndex})),L=()=>{d(()=>{let e=M.value;if(!e)return;let t=e.getBoundingClientRect(),{innerWidth:n,innerHeight:r}=window;t.right>n&&(j.value.x=n-t.width-8),t.bottom>r&&(j.value.y=r-t.height-8),j.value.x<0&&(j.value.x=8),j.value.y<0&&(j.value.y=8)})},R=(e,t)=>{O.disabled||(j.value={x:e,y:t},A.value=!0,k(`open`,{x:e,y:t}),L(),d(()=>M.value?.focus()))},z=()=>{A.value=!1,N.value=null,k(`close`)},B=e=>{e.disabled||e.children?.length||(k(`select`,e),O.autoClose&&z())},V=e=>{P&&=(clearTimeout(P),null),e.children?.length&&!e.disabled?P=setTimeout(()=>{N.value=e.key},150):N.value=null},H=()=>{P&&=(clearTimeout(P),null),P=setTimeout(()=>{N.value=null},300)},U=e=>{k(`select`,e),O.autoClose&&z()};return u({open:R,close:z,visible:i(()=>A.value)}),(t,i)=>{let u=D;return m(),s(n,null,[o(` 遮罩层 `),(m(),a(r,{to:`body`},[A.value?(m(),s(`div`,{key:0,class:`c-context-menu-overlay`,style:p({zIndex:O.zIndex-1}),onClick:z,onContextmenu:y(z,[`prevent`])},null,36)):o(`v-if`,!0),o(` 菜单面板 `),A.value?(m(),s(`div`,{key:1,ref_key:`menuRef`,ref:M,class:`c-context-menu`,style:p(I.value),role:`menu`,tabindex:`-1`,onKeydown:v(z,[`escape`])},[(m(!0),s(n,null,g(F.value,t=>(m(),s(n,{key:t.key},[o(` 分割线 `),t.divider?(m(),s(`div`,x)):(m(),s(n,{key:1},[o(` 普通菜单项 `),c(`div`,{class:f([`c-context-menu__item`,{"is-disabled":t.disabled,"is-danger":t.danger}]),role:`menuitem`,"aria-disabled":t.disabled,onClick:e=>B(t),onMouseenter:e=>V(t),onMouseleave:H},[o(` 图标 `),t.icon?(m(),s(`span`,C,[l(e,{name:t.icon},null,8,[`name`])])):o(`v-if`,!0),o(` 文本 `),c(`span`,w,_(t.label),1),o(` 快捷键 `),t.shortcut?(m(),s(`span`,T,_(t.shortcut),1)):o(`v-if`,!0),o(` 子菜单箭头 `),t.children?.length?(m(),s(`span`,E,[l(e,{name:`mdi:chevron-right`})])):o(`v-if`,!0),o(` 子菜单(递归) `),t.children?.length&&N.value===t.key?(m(),a(u,{key:3,items:t.children,"min-width":O.minWidth,"max-width":O.maxWidth,"sub-menu-placement":O.subMenuPlacement,"auto-close":O.autoClose,"z-index":O.zIndex+1,class:f([`c-context-menu__submenu`,`is-${O.subMenuPlacement}`]),style:{position:`absolute`},onSelect:U},null,8,[`items`,`min-width`,`max-width`,`sub-menu-placement`,`auto-close`,`z-index`,`class`])):o(`v-if`,!0)],42,S)],2112))],64))),128))],36)):o(`v-if`,!0)]))],2112)}}}),[[`__scopeId`,`data-v-cdd4d8bb`]]);export{b as n,D as t};
2
+ //# sourceMappingURL=C_ContextMenu2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"C_ContextMenu2.js","names":[],"sources":["../src/components/C_ContextMenu/types.ts","../src/components/C_ContextMenu/index.vue","../src/components/C_ContextMenu/index.vue","../src/components/C_ContextMenu/index.vue"],"sourcesContent":["/**\n * @Description: 右键菜单组件类型定义\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n */\n\n/** 菜单项 */\nexport interface ContextMenuItem {\n /** 唯一标识 */\n key: string\n /** 菜单文字 */\n label: string\n /** 图标(Iconify 图标名) */\n icon?: string\n /** 快捷键标注文字(仅展示,不绑定) */\n shortcut?: string\n /** 是否禁用 */\n disabled?: boolean\n /** 是否隐藏 */\n hidden?: boolean\n /** 分割线(此项渲染为分割线,label 被忽略) */\n divider?: boolean\n /** 子菜单(支持无限嵌套) */\n children?: ContextMenuItem[]\n /** 自定义样式类 */\n className?: string\n /** 危险操作(红色高亮) */\n danger?: boolean\n}\n\n/** 组件 Props */\nexport interface ContextMenuProps {\n /** 菜单项列表 */\n items: ContextMenuItem[]\n /** 菜单最小宽度 */\n minWidth?: number\n /** 菜单最大宽度 */\n maxWidth?: number\n /** 子菜单展开方向 */\n subMenuPlacement?: 'right' | 'left'\n /** 点击菜单项后是否自动关闭 */\n autoClose?: boolean\n /** 是否禁用整个菜单 */\n disabled?: boolean\n /** 自定义 z-index */\n zIndex?: number\n}\n\n/** 默认 Props */\nexport const DEFAULT_CONTEXT_MENU_PROPS = {\n minWidth: 180,\n maxWidth: 280,\n subMenuPlacement: 'right' as const,\n autoClose: true,\n disabled: false,\n zIndex: 9999,\n}\n","/* unplugin-vue-components disabled */<!--\n * @Description: 右键菜单组件 — 声明式配置、快捷键标注、嵌套子菜单\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <!-- 遮罩层 -->\n <Teleport to=\"body\">\n <div\n v-if=\"visible\"\n class=\"c-context-menu-overlay\"\n :style=\"{ zIndex: props.zIndex - 1 }\"\n @click=\"close\"\n @contextmenu.prevent=\"close\"\n />\n\n <!-- 菜单面板 -->\n <div\n v-if=\"visible\"\n ref=\"menuRef\"\n class=\"c-context-menu\"\n :style=\"menuStyle\"\n role=\"menu\"\n tabindex=\"-1\"\n @keydown.escape=\"close\"\n >\n <template\n v-for=\"item in visibleItems\"\n :key=\"item.key\"\n >\n <!-- 分割线 -->\n <div\n v-if=\"item.divider\"\n class=\"c-context-menu__divider\"\n role=\"separator\"\n />\n\n <!-- 普通菜单项 -->\n <div\n v-else\n :class=\"[\n 'c-context-menu__item',\n {\n 'is-disabled': item.disabled,\n 'is-danger': item.danger,\n },\n ]\"\n role=\"menuitem\"\n :aria-disabled=\"item.disabled\"\n @click=\"handleItemClick(item)\"\n @mouseenter=\"handleMouseEnter(item)\"\n @mouseleave=\"handleMouseLeave\"\n >\n <!-- 图标 -->\n <span\n v-if=\"item.icon\"\n class=\"c-context-menu__icon\"\n >\n <C_Icon :name=\"item.icon\" />\n </span>\n\n <!-- 文本 -->\n <span class=\"c-context-menu__label\">{{ item.label }}</span>\n\n <!-- 快捷键 -->\n <span\n v-if=\"item.shortcut\"\n class=\"c-context-menu__shortcut\"\n >\n {{ item.shortcut }}\n </span>\n\n <!-- 子菜单箭头 -->\n <span\n v-if=\"item.children?.length\"\n class=\"c-context-menu__arrow\"\n >\n <C_Icon name=\"mdi:chevron-right\" />\n </span>\n\n <!-- 子菜单(递归) -->\n <C_ContextMenu\n v-if=\"item.children?.length && activeSubKey === item.key\"\n :items=\"item.children\"\n :min-width=\"props.minWidth\"\n :max-width=\"props.maxWidth\"\n :sub-menu-placement=\"props.subMenuPlacement\"\n :auto-close=\"props.autoClose\"\n :z-index=\"props.zIndex + 1\"\n class=\"c-context-menu__submenu\"\n :class=\"`is-${props.subMenuPlacement}`\"\n :style=\"{ position: 'absolute' }\"\n @select=\"handleSubSelect\"\n />\n </div>\n </template>\n </div>\n </Teleport>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_CONTEXT_MENU_PROPS,\n type ContextMenuItem,\n type ContextMenuProps,\n } from './types'\n\n defineOptions({ name: 'C_ContextMenu' })\n\n const props = withDefaults(defineProps<ContextMenuProps>(), {\n items: () => [],\n minWidth: DEFAULT_CONTEXT_MENU_PROPS.minWidth,\n maxWidth: DEFAULT_CONTEXT_MENU_PROPS.maxWidth,\n subMenuPlacement: DEFAULT_CONTEXT_MENU_PROPS.subMenuPlacement,\n autoClose: DEFAULT_CONTEXT_MENU_PROPS.autoClose,\n disabled: DEFAULT_CONTEXT_MENU_PROPS.disabled,\n zIndex: DEFAULT_CONTEXT_MENU_PROPS.zIndex,\n })\n\n const emit = defineEmits<{\n (e: 'select', item: ContextMenuItem): void\n (e: 'open', position: { x: number; y: number }): void\n (e: 'close'): void\n }>()\n\n // ===== 状态 =====\n const visible = ref(false)\n const position = ref({ x: 0, y: 0 })\n const menuRef = ref<HTMLElement>()\n const activeSubKey = ref<string | null>(null)\n\n let subTimer: ReturnType<typeof setTimeout> | null = null\n\n // ===== 可见项 =====\n const visibleItems = computed(() => props.items.filter(item => !item.hidden))\n\n // ===== 菜单定位样式 =====\n const menuStyle = computed(() => ({\n left: `${position.value.x}px`,\n top: `${position.value.y}px`,\n minWidth: `${props.minWidth}px`,\n maxWidth: `${props.maxWidth}px`,\n zIndex: props.zIndex,\n }))\n\n // ===== 边界校正 =====\n const adjustPosition = () => {\n nextTick(() => {\n const el = menuRef.value\n if (!el) return\n const rect = el.getBoundingClientRect()\n const { innerWidth, innerHeight } = window\n\n if (rect.right > innerWidth) {\n position.value.x = innerWidth - rect.width - 8\n }\n if (rect.bottom > innerHeight) {\n position.value.y = innerHeight - rect.height - 8\n }\n if (position.value.x < 0) position.value.x = 8\n if (position.value.y < 0) position.value.y = 8\n })\n }\n\n // ===== 打开/关闭 =====\n const open = (x: number, y: number) => {\n if (props.disabled) return\n position.value = { x, y }\n visible.value = true\n emit('open', { x, y })\n adjustPosition()\n\n // 聚焦以支持 Escape 关闭\n nextTick(() => menuRef.value?.focus())\n }\n\n const close = () => {\n visible.value = false\n activeSubKey.value = null\n emit('close')\n }\n\n // ===== 菜单项点击 =====\n const handleItemClick = (item: ContextMenuItem) => {\n if (item.disabled) return\n if (item.children?.length) return // 有子菜单不触发\n\n emit('select', item)\n if (props.autoClose) close()\n }\n\n // ===== 子菜单悬停 =====\n const handleMouseEnter = (item: ContextMenuItem) => {\n if (subTimer) {\n clearTimeout(subTimer)\n subTimer = null\n }\n if (item.children?.length && !item.disabled) {\n subTimer = setTimeout(() => {\n activeSubKey.value = item.key\n }, 150)\n } else {\n activeSubKey.value = null\n }\n }\n\n const handleMouseLeave = () => {\n if (subTimer) {\n clearTimeout(subTimer)\n subTimer = null\n }\n subTimer = setTimeout(() => {\n activeSubKey.value = null\n }, 300)\n }\n\n // ===== 子菜单选择向上冒泡 =====\n const handleSubSelect = (item: ContextMenuItem) => {\n emit('select', item)\n if (props.autoClose) close()\n }\n\n // ===== 暴露 API =====\n defineExpose({\n /** 在指定坐标打开菜单 */\n open,\n /** 关闭菜单 */\n close,\n /** 当前是否可见 */\n visible: computed(() => visible.value),\n })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Description: 右键菜单组件 — 声明式配置、快捷键标注、嵌套子菜单\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <!-- 遮罩层 -->\n <Teleport to=\"body\">\n <div\n v-if=\"visible\"\n class=\"c-context-menu-overlay\"\n :style=\"{ zIndex: props.zIndex - 1 }\"\n @click=\"close\"\n @contextmenu.prevent=\"close\"\n />\n\n <!-- 菜单面板 -->\n <div\n v-if=\"visible\"\n ref=\"menuRef\"\n class=\"c-context-menu\"\n :style=\"menuStyle\"\n role=\"menu\"\n tabindex=\"-1\"\n @keydown.escape=\"close\"\n >\n <template\n v-for=\"item in visibleItems\"\n :key=\"item.key\"\n >\n <!-- 分割线 -->\n <div\n v-if=\"item.divider\"\n class=\"c-context-menu__divider\"\n role=\"separator\"\n />\n\n <!-- 普通菜单项 -->\n <div\n v-else\n :class=\"[\n 'c-context-menu__item',\n {\n 'is-disabled': item.disabled,\n 'is-danger': item.danger,\n },\n ]\"\n role=\"menuitem\"\n :aria-disabled=\"item.disabled\"\n @click=\"handleItemClick(item)\"\n @mouseenter=\"handleMouseEnter(item)\"\n @mouseleave=\"handleMouseLeave\"\n >\n <!-- 图标 -->\n <span\n v-if=\"item.icon\"\n class=\"c-context-menu__icon\"\n >\n <C_Icon :name=\"item.icon\" />\n </span>\n\n <!-- 文本 -->\n <span class=\"c-context-menu__label\">{{ item.label }}</span>\n\n <!-- 快捷键 -->\n <span\n v-if=\"item.shortcut\"\n class=\"c-context-menu__shortcut\"\n >\n {{ item.shortcut }}\n </span>\n\n <!-- 子菜单箭头 -->\n <span\n v-if=\"item.children?.length\"\n class=\"c-context-menu__arrow\"\n >\n <C_Icon name=\"mdi:chevron-right\" />\n </span>\n\n <!-- 子菜单(递归) -->\n <C_ContextMenu\n v-if=\"item.children?.length && activeSubKey === item.key\"\n :items=\"item.children\"\n :min-width=\"props.minWidth\"\n :max-width=\"props.maxWidth\"\n :sub-menu-placement=\"props.subMenuPlacement\"\n :auto-close=\"props.autoClose\"\n :z-index=\"props.zIndex + 1\"\n class=\"c-context-menu__submenu\"\n :class=\"`is-${props.subMenuPlacement}`\"\n :style=\"{ position: 'absolute' }\"\n @select=\"handleSubSelect\"\n />\n </div>\n </template>\n </div>\n </Teleport>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_CONTEXT_MENU_PROPS,\n type ContextMenuItem,\n type ContextMenuProps,\n } from './types'\n\n defineOptions({ name: 'C_ContextMenu' })\n\n const props = withDefaults(defineProps<ContextMenuProps>(), {\n items: () => [],\n minWidth: DEFAULT_CONTEXT_MENU_PROPS.minWidth,\n maxWidth: DEFAULT_CONTEXT_MENU_PROPS.maxWidth,\n subMenuPlacement: DEFAULT_CONTEXT_MENU_PROPS.subMenuPlacement,\n autoClose: DEFAULT_CONTEXT_MENU_PROPS.autoClose,\n disabled: DEFAULT_CONTEXT_MENU_PROPS.disabled,\n zIndex: DEFAULT_CONTEXT_MENU_PROPS.zIndex,\n })\n\n const emit = defineEmits<{\n (e: 'select', item: ContextMenuItem): void\n (e: 'open', position: { x: number; y: number }): void\n (e: 'close'): void\n }>()\n\n // ===== 状态 =====\n const visible = ref(false)\n const position = ref({ x: 0, y: 0 })\n const menuRef = ref<HTMLElement>()\n const activeSubKey = ref<string | null>(null)\n\n let subTimer: ReturnType<typeof setTimeout> | null = null\n\n // ===== 可见项 =====\n const visibleItems = computed(() => props.items.filter(item => !item.hidden))\n\n // ===== 菜单定位样式 =====\n const menuStyle = computed(() => ({\n left: `${position.value.x}px`,\n top: `${position.value.y}px`,\n minWidth: `${props.minWidth}px`,\n maxWidth: `${props.maxWidth}px`,\n zIndex: props.zIndex,\n }))\n\n // ===== 边界校正 =====\n const adjustPosition = () => {\n nextTick(() => {\n const el = menuRef.value\n if (!el) return\n const rect = el.getBoundingClientRect()\n const { innerWidth, innerHeight } = window\n\n if (rect.right > innerWidth) {\n position.value.x = innerWidth - rect.width - 8\n }\n if (rect.bottom > innerHeight) {\n position.value.y = innerHeight - rect.height - 8\n }\n if (position.value.x < 0) position.value.x = 8\n if (position.value.y < 0) position.value.y = 8\n })\n }\n\n // ===== 打开/关闭 =====\n const open = (x: number, y: number) => {\n if (props.disabled) return\n position.value = { x, y }\n visible.value = true\n emit('open', { x, y })\n adjustPosition()\n\n // 聚焦以支持 Escape 关闭\n nextTick(() => menuRef.value?.focus())\n }\n\n const close = () => {\n visible.value = false\n activeSubKey.value = null\n emit('close')\n }\n\n // ===== 菜单项点击 =====\n const handleItemClick = (item: ContextMenuItem) => {\n if (item.disabled) return\n if (item.children?.length) return // 有子菜单不触发\n\n emit('select', item)\n if (props.autoClose) close()\n }\n\n // ===== 子菜单悬停 =====\n const handleMouseEnter = (item: ContextMenuItem) => {\n if (subTimer) {\n clearTimeout(subTimer)\n subTimer = null\n }\n if (item.children?.length && !item.disabled) {\n subTimer = setTimeout(() => {\n activeSubKey.value = item.key\n }, 150)\n } else {\n activeSubKey.value = null\n }\n }\n\n const handleMouseLeave = () => {\n if (subTimer) {\n clearTimeout(subTimer)\n subTimer = null\n }\n subTimer = setTimeout(() => {\n activeSubKey.value = null\n }, 300)\n }\n\n // ===== 子菜单选择向上冒泡 =====\n const handleSubSelect = (item: ContextMenuItem) => {\n emit('select', item)\n if (props.autoClose) close()\n }\n\n // ===== 暴露 API =====\n defineExpose({\n /** 在指定坐标打开菜单 */\n open,\n /** 关闭菜单 */\n close,\n /** 当前是否可见 */\n visible: computed(() => visible.value),\n })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n","<!--\n * @Description: 右键菜单组件 — 声明式配置、快捷键标注、嵌套子菜单\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <!-- 遮罩层 -->\n <Teleport to=\"body\">\n <div\n v-if=\"visible\"\n class=\"c-context-menu-overlay\"\n :style=\"{ zIndex: props.zIndex - 1 }\"\n @click=\"close\"\n @contextmenu.prevent=\"close\"\n />\n\n <!-- 菜单面板 -->\n <div\n v-if=\"visible\"\n ref=\"menuRef\"\n class=\"c-context-menu\"\n :style=\"menuStyle\"\n role=\"menu\"\n tabindex=\"-1\"\n @keydown.escape=\"close\"\n >\n <template\n v-for=\"item in visibleItems\"\n :key=\"item.key\"\n >\n <!-- 分割线 -->\n <div\n v-if=\"item.divider\"\n class=\"c-context-menu__divider\"\n role=\"separator\"\n />\n\n <!-- 普通菜单项 -->\n <div\n v-else\n :class=\"[\n 'c-context-menu__item',\n {\n 'is-disabled': item.disabled,\n 'is-danger': item.danger,\n },\n ]\"\n role=\"menuitem\"\n :aria-disabled=\"item.disabled\"\n @click=\"handleItemClick(item)\"\n @mouseenter=\"handleMouseEnter(item)\"\n @mouseleave=\"handleMouseLeave\"\n >\n <!-- 图标 -->\n <span\n v-if=\"item.icon\"\n class=\"c-context-menu__icon\"\n >\n <C_Icon :name=\"item.icon\" />\n </span>\n\n <!-- 文本 -->\n <span class=\"c-context-menu__label\">{{ item.label }}</span>\n\n <!-- 快捷键 -->\n <span\n v-if=\"item.shortcut\"\n class=\"c-context-menu__shortcut\"\n >\n {{ item.shortcut }}\n </span>\n\n <!-- 子菜单箭头 -->\n <span\n v-if=\"item.children?.length\"\n class=\"c-context-menu__arrow\"\n >\n <C_Icon name=\"mdi:chevron-right\" />\n </span>\n\n <!-- 子菜单(递归) -->\n <C_ContextMenu\n v-if=\"item.children?.length && activeSubKey === item.key\"\n :items=\"item.children\"\n :min-width=\"props.minWidth\"\n :max-width=\"props.maxWidth\"\n :sub-menu-placement=\"props.subMenuPlacement\"\n :auto-close=\"props.autoClose\"\n :z-index=\"props.zIndex + 1\"\n class=\"c-context-menu__submenu\"\n :class=\"`is-${props.subMenuPlacement}`\"\n :style=\"{ position: 'absolute' }\"\n @select=\"handleSubSelect\"\n />\n </div>\n </template>\n </div>\n </Teleport>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_CONTEXT_MENU_PROPS,\n type ContextMenuItem,\n type ContextMenuProps,\n } from './types'\n\n defineOptions({ name: 'C_ContextMenu' })\n\n const props = withDefaults(defineProps<ContextMenuProps>(), {\n items: () => [],\n minWidth: DEFAULT_CONTEXT_MENU_PROPS.minWidth,\n maxWidth: DEFAULT_CONTEXT_MENU_PROPS.maxWidth,\n subMenuPlacement: DEFAULT_CONTEXT_MENU_PROPS.subMenuPlacement,\n autoClose: DEFAULT_CONTEXT_MENU_PROPS.autoClose,\n disabled: DEFAULT_CONTEXT_MENU_PROPS.disabled,\n zIndex: DEFAULT_CONTEXT_MENU_PROPS.zIndex,\n })\n\n const emit = defineEmits<{\n (e: 'select', item: ContextMenuItem): void\n (e: 'open', position: { x: number; y: number }): void\n (e: 'close'): void\n }>()\n\n // ===== 状态 =====\n const visible = ref(false)\n const position = ref({ x: 0, y: 0 })\n const menuRef = ref<HTMLElement>()\n const activeSubKey = ref<string | null>(null)\n\n let subTimer: ReturnType<typeof setTimeout> | null = null\n\n // ===== 可见项 =====\n const visibleItems = computed(() => props.items.filter(item => !item.hidden))\n\n // ===== 菜单定位样式 =====\n const menuStyle = computed(() => ({\n left: `${position.value.x}px`,\n top: `${position.value.y}px`,\n minWidth: `${props.minWidth}px`,\n maxWidth: `${props.maxWidth}px`,\n zIndex: props.zIndex,\n }))\n\n // ===== 边界校正 =====\n const adjustPosition = () => {\n nextTick(() => {\n const el = menuRef.value\n if (!el) return\n const rect = el.getBoundingClientRect()\n const { innerWidth, innerHeight } = window\n\n if (rect.right > innerWidth) {\n position.value.x = innerWidth - rect.width - 8\n }\n if (rect.bottom > innerHeight) {\n position.value.y = innerHeight - rect.height - 8\n }\n if (position.value.x < 0) position.value.x = 8\n if (position.value.y < 0) position.value.y = 8\n })\n }\n\n // ===== 打开/关闭 =====\n const open = (x: number, y: number) => {\n if (props.disabled) return\n position.value = { x, y }\n visible.value = true\n emit('open', { x, y })\n adjustPosition()\n\n // 聚焦以支持 Escape 关闭\n nextTick(() => menuRef.value?.focus())\n }\n\n const close = () => {\n visible.value = false\n activeSubKey.value = null\n emit('close')\n }\n\n // ===== 菜单项点击 =====\n const handleItemClick = (item: ContextMenuItem) => {\n if (item.disabled) return\n if (item.children?.length) return // 有子菜单不触发\n\n emit('select', item)\n if (props.autoClose) close()\n }\n\n // ===== 子菜单悬停 =====\n const handleMouseEnter = (item: ContextMenuItem) => {\n if (subTimer) {\n clearTimeout(subTimer)\n subTimer = null\n }\n if (item.children?.length && !item.disabled) {\n subTimer = setTimeout(() => {\n activeSubKey.value = item.key\n }, 150)\n } else {\n activeSubKey.value = null\n }\n }\n\n const handleMouseLeave = () => {\n if (subTimer) {\n clearTimeout(subTimer)\n subTimer = null\n }\n subTimer = setTimeout(() => {\n activeSubKey.value = null\n }, 300)\n }\n\n // ===== 子菜单选择向上冒泡 =====\n const handleSubSelect = (item: ContextMenuItem) => {\n emit('select', item)\n if (props.autoClose) close()\n }\n\n // ===== 暴露 API =====\n defineExpose({\n /** 在指定坐标打开菜单 */\n open,\n /** 关闭菜单 */\n close,\n /** 当前是否可见 */\n visible: computed(() => visible.value),\n })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n"],"mappings":"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"}
package/dist/C_Date.d.cts CHANGED
@@ -1,2 +1,2 @@
1
- import { t as _default } from "./index8.vue.js";
1
+ import { t as _default } from "./index12.vue.js";
2
2
  export { _default as C_Date };
package/dist/C_Date.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { t as _default } from "./index8.vue.js";
1
+ import { t as _default } from "./index12.vue.js";
2
2
  export { _default as C_Date };
@@ -1,2 +1,2 @@
1
- import { t as _default } from "./index9.vue.js";
1
+ import { t as _default } from "./index13.vue.js";
2
2
  export { _default as C_Editor };
@@ -1,2 +1,2 @@
1
- import { t as _default } from "./index9.vue.js";
1
+ import { t as _default } from "./index13.vue.js";
2
2
  export { _default as C_Editor };
@@ -1,2 +1,2 @@
1
- import { n as _default, t as GuideStep } from "./index10.vue.js";
1
+ import { n as _default, t as GuideStep } from "./index14.vue.js";
2
2
  export { _default as C_Guide, type GuideStep };
package/dist/C_Guide.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { n as _default, t as GuideStep } from "./index10.vue.js";
1
+ import { n as _default, t as GuideStep } from "./index14.vue.js";
2
2
  export { _default as C_Guide, type GuideStep };
package/dist/C_Icon.d.cts CHANGED
@@ -1,2 +1,2 @@
1
- import { n as _default, t as IconProps } from "./index11.vue.js";
1
+ import { n as _default, t as IconProps } from "./index15.vue.js";
2
2
  export { _default as C_Icon, type IconProps };
package/dist/C_Icon.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { n as _default, t as IconProps } from "./index11.vue.js";
1
+ import { n as _default, t as IconProps } from "./index15.vue.js";
2
2
  export { _default as C_Icon, type IconProps };
@@ -1,2 +1,2 @@
1
- import { n as _default, t as LanguageOption } from "./index12.vue.js";
1
+ import { n as _default, t as LanguageOption } from "./index16.vue.js";
2
2
  export { _default as C_Language, type LanguageOption };
@@ -1,2 +1,2 @@
1
- import { n as _default, t as LanguageOption } from "./index12.vue.js";
1
+ import { n as _default, t as LanguageOption } from "./index16.vue.js";
2
2
  export { _default as C_Language, type LanguageOption };
@@ -1 +1 @@
1
- {"version":3,"file":"C_Language.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-19\r\n * @Description: 语言切换组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <NDropdown\r\n size=\"small\"\r\n trigger=\"hover\"\r\n :options=\"finalOptions\"\r\n :value=\"modelValue\"\r\n @select=\"handleLanguageChange\"\r\n >\r\n <NButton text>\r\n <div class=\"flex items-center\">\r\n <C_Icon\r\n name=\"mdi:language\"\r\n :size=\"18\"\r\n :title=\"tooltipText\"\r\n />\r\n </div>\r\n </NButton>\r\n </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { computed, h } from 'vue'\r\n import { NDropdown, NButton } from 'naive-ui'\r\n import C_Icon from '../C_Icon/index.vue'\r\n\r\n defineOptions({ name: 'C_Language' })\r\n\r\n export interface LanguageOption {\r\n key: string\r\n label: string\r\n iconClass?: string\r\n }\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n modelValue?: string\r\n options?: LanguageOption[]\r\n /** Tooltip 文案,默认 \"语言切换\" */\r\n tooltip?: string\r\n }>(),\r\n {\r\n modelValue: 'zh-cn',\r\n tooltip: '语言切换',\r\n options: () => [\r\n { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n ],\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n 'update:modelValue': [key: string]\r\n change: [key: string]\r\n }>()\r\n\r\n /** 当前语言显示名 */\r\n const currentLabel = computed(() => {\r\n const opt = props.options.find(o => o.key === props.modelValue)\r\n return opt?.label ?? props.modelValue\r\n })\r\n\r\n const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n const finalOptions = computed(() =>\r\n props.options.map(opt => ({\r\n key: opt.key,\r\n label: opt.label,\r\n icon: opt.iconClass\r\n ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n : undefined,\r\n }))\r\n )\r\n\r\n const handleLanguageChange = (key: string) => {\r\n if (key === props.modelValue) return\r\n emit('update:modelValue', key)\r\n emit('change', key)\r\n }\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-19\r\n * @Description: 语言切换组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <NDropdown\r\n size=\"small\"\r\n trigger=\"hover\"\r\n :options=\"finalOptions\"\r\n :value=\"modelValue\"\r\n @select=\"handleLanguageChange\"\r\n >\r\n <NButton text>\r\n <div class=\"flex items-center\">\r\n <C_Icon\r\n name=\"mdi:language\"\r\n :size=\"18\"\r\n :title=\"tooltipText\"\r\n />\r\n </div>\r\n </NButton>\r\n </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { computed, h } from 'vue'\r\n import { NDropdown, NButton } from 'naive-ui'\r\n import C_Icon from '../C_Icon/index.vue'\r\n\r\n defineOptions({ name: 'C_Language' })\r\n\r\n export interface LanguageOption {\r\n key: string\r\n label: string\r\n iconClass?: string\r\n }\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n modelValue?: string\r\n options?: LanguageOption[]\r\n /** Tooltip 文案,默认 \"语言切换\" */\r\n tooltip?: string\r\n }>(),\r\n {\r\n modelValue: 'zh-cn',\r\n tooltip: '语言切换',\r\n options: () => [\r\n { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n ],\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n 'update:modelValue': [key: string]\r\n change: [key: string]\r\n }>()\r\n\r\n /** 当前语言显示名 */\r\n const currentLabel = computed(() => {\r\n const opt = props.options.find(o => o.key === props.modelValue)\r\n return opt?.label ?? props.modelValue\r\n })\r\n\r\n const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n const finalOptions = computed(() =>\r\n props.options.map(opt => ({\r\n key: opt.key,\r\n label: opt.label,\r\n icon: opt.iconClass\r\n ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n : undefined,\r\n }))\r\n )\r\n\r\n const handleLanguageChange = (key: string) => {\r\n if (key === props.modelValue) return\r\n emit('update:modelValue', key)\r\n emit('change', key)\r\n }\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-19\r\n * @Description: 语言切换组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <NDropdown\r\n size=\"small\"\r\n trigger=\"hover\"\r\n :options=\"finalOptions\"\r\n :value=\"modelValue\"\r\n @select=\"handleLanguageChange\"\r\n >\r\n <NButton text>\r\n <div class=\"flex items-center\">\r\n <C_Icon\r\n name=\"mdi:language\"\r\n :size=\"18\"\r\n :title=\"tooltipText\"\r\n />\r\n </div>\r\n </NButton>\r\n </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { computed, h } from 'vue'\r\n import { NDropdown, NButton } from 'naive-ui'\r\n import C_Icon from '../C_Icon/index.vue'\r\n\r\n defineOptions({ name: 'C_Language' })\r\n\r\n export interface LanguageOption {\r\n key: string\r\n label: string\r\n iconClass?: string\r\n }\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n modelValue?: string\r\n options?: LanguageOption[]\r\n /** Tooltip 文案,默认 \"语言切换\" */\r\n tooltip?: string\r\n }>(),\r\n {\r\n modelValue: 'zh-cn',\r\n tooltip: '语言切换',\r\n options: () => [\r\n { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n ],\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n 'update:modelValue': [key: string]\r\n change: [key: string]\r\n }>()\r\n\r\n /** 当前语言显示名 */\r\n const currentLabel = computed(() => {\r\n const opt = props.options.find(o => o.key === props.modelValue)\r\n return opt?.label ?? props.modelValue\r\n })\r\n\r\n const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n const finalOptions = computed(() =>\r\n props.options.map(opt => ({\r\n key: opt.key,\r\n label: opt.label,\r\n icon: opt.iconClass\r\n ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n : undefined,\r\n }))\r\n )\r\n\r\n const handleLanguageChange = (key: string) => {\r\n if (key === props.modelValue) return\r\n emit('update:modelValue', key)\r\n emit('change', key)\r\n }\r\n</script>\r\n"],"mappings":"mhBEwCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,GAAA,EAAA,EAAA,cACQ,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAW,EACnD,OAAS,EAAM,WAC3B,CAEI,GAAA,EAAA,EAAA,cAA6B,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAG,CAExE,GAAA,EAAA,EAAA,cACJ,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,eAAA,EAAA,EAAA,GACE,EAAA,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAC,CAClD,IAAA,GACL,EAAE,CACJ,CAEK,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAI,CAC9B,EAAK,SAAU,EAAI,iEA7DT,EAAA,UAAA,CAAA,CAfV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,8BAUC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARD,KAAA,GAAI,CAAA,2BAOL,EAAA,EAAA,EAAA,oBAAA,MANN,EAMM,EAAA,EAAA,EAAA,aADF,EAAA,EAAA,CAHA,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}
1
+ {"version":3,"file":"C_Language.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-11-19\n * @Description: 语言切换组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <NDropdown\n size=\"small\"\n trigger=\"hover\"\n :options=\"finalOptions\"\n :value=\"modelValue\"\n @select=\"handleLanguageChange\"\n >\n <NButton text>\n <div class=\"flex items-center\">\n <C_Icon\n name=\"mdi:language\"\n :size=\"18\"\n :title=\"tooltipText\"\n />\n </div>\n </NButton>\n </NDropdown>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, h } from 'vue'\n import { NDropdown, NButton } from 'naive-ui'\n import C_Icon from '../C_Icon/index.vue'\n\n defineOptions({ name: 'C_Language' })\n\n export interface LanguageOption {\n key: string\n label: string\n iconClass?: string\n }\n\n const props = withDefaults(\n defineProps<{\n modelValue?: string\n options?: LanguageOption[]\n /** Tooltip 文案,默认 \"语言切换\" */\n tooltip?: string\n }>(),\n {\n modelValue: 'zh-cn',\n tooltip: '语言切换',\n options: () => [\n { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\n { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\n { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\n { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\n ],\n }\n )\n\n const emit = defineEmits<{\n 'update:modelValue': [key: string]\n change: [key: string]\n }>()\n\n /** 当前语言显示名 */\n const currentLabel = computed(() => {\n const opt = props.options.find(o => o.key === props.modelValue)\n return opt?.label ?? props.modelValue\n })\n\n const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\n\n const finalOptions = computed(() =>\n props.options.map(opt => ({\n key: opt.key,\n label: opt.label,\n icon: opt.iconClass\n ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\n : undefined,\n }))\n )\n\n const handleLanguageChange = (key: string) => {\n if (key === props.modelValue) return\n emit('update:modelValue', key)\n emit('change', key)\n }\n</script>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-11-19\n * @Description: 语言切换组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <NDropdown\n size=\"small\"\n trigger=\"hover\"\n :options=\"finalOptions\"\n :value=\"modelValue\"\n @select=\"handleLanguageChange\"\n >\n <NButton text>\n <div class=\"flex items-center\">\n <C_Icon\n name=\"mdi:language\"\n :size=\"18\"\n :title=\"tooltipText\"\n />\n </div>\n </NButton>\n </NDropdown>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, h } from 'vue'\n import { NDropdown, NButton } from 'naive-ui'\n import C_Icon from '../C_Icon/index.vue'\n\n defineOptions({ name: 'C_Language' })\n\n export interface LanguageOption {\n key: string\n label: string\n iconClass?: string\n }\n\n const props = withDefaults(\n defineProps<{\n modelValue?: string\n options?: LanguageOption[]\n /** Tooltip 文案,默认 \"语言切换\" */\n tooltip?: string\n }>(),\n {\n modelValue: 'zh-cn',\n tooltip: '语言切换',\n options: () => [\n { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\n { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\n { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\n { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\n ],\n }\n )\n\n const emit = defineEmits<{\n 'update:modelValue': [key: string]\n change: [key: string]\n }>()\n\n /** 当前语言显示名 */\n const currentLabel = computed(() => {\n const opt = props.options.find(o => o.key === props.modelValue)\n return opt?.label ?? props.modelValue\n })\n\n const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\n\n const finalOptions = computed(() =>\n props.options.map(opt => ({\n key: opt.key,\n label: opt.label,\n icon: opt.iconClass\n ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\n : undefined,\n }))\n )\n\n const handleLanguageChange = (key: string) => {\n if (key === props.modelValue) return\n emit('update:modelValue', key)\n emit('change', key)\n }\n</script>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-11-19\n * @Description: 语言切换组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <NDropdown\n size=\"small\"\n trigger=\"hover\"\n :options=\"finalOptions\"\n :value=\"modelValue\"\n @select=\"handleLanguageChange\"\n >\n <NButton text>\n <div class=\"flex items-center\">\n <C_Icon\n name=\"mdi:language\"\n :size=\"18\"\n :title=\"tooltipText\"\n />\n </div>\n </NButton>\n </NDropdown>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, h } from 'vue'\n import { NDropdown, NButton } from 'naive-ui'\n import C_Icon from '../C_Icon/index.vue'\n\n defineOptions({ name: 'C_Language' })\n\n export interface LanguageOption {\n key: string\n label: string\n iconClass?: string\n }\n\n const props = withDefaults(\n defineProps<{\n modelValue?: string\n options?: LanguageOption[]\n /** Tooltip 文案,默认 \"语言切换\" */\n tooltip?: string\n }>(),\n {\n modelValue: 'zh-cn',\n tooltip: '语言切换',\n options: () => [\n { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\n { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\n { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\n { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\n ],\n }\n )\n\n const emit = defineEmits<{\n 'update:modelValue': [key: string]\n change: [key: string]\n }>()\n\n /** 当前语言显示名 */\n const currentLabel = computed(() => {\n const opt = props.options.find(o => o.key === props.modelValue)\n return opt?.label ?? props.modelValue\n })\n\n const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\n\n const finalOptions = computed(() =>\n props.options.map(opt => ({\n key: opt.key,\n label: opt.label,\n icon: opt.iconClass\n ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\n : undefined,\n }))\n )\n\n const handleLanguageChange = (key: string) => {\n if (key === props.modelValue) return\n emit('update:modelValue', key)\n emit('change', key)\n }\n</script>\n"],"mappings":"mhBEwCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,GAAA,EAAA,EAAA,cACQ,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAU,EAClD,OAAS,EAAM,WAC5B,CAEK,GAAA,EAAA,EAAA,cAA6B,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAE,CAEvE,GAAA,EAAA,EAAA,cACJ,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,eAAA,EAAA,EAAA,GACE,EAAA,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAA,CACjD,IAAA,GACL,EAAC,CACJ,CAEM,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAG,CAC7B,EAAK,SAAU,EAAG,iEA7DR,EAAA,UAAA,CAAA,CAfV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,8BAUC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARD,KAAA,GAAI,CAAA,2BAOL,EAAA,EAAA,EAAA,oBAAA,MANN,EAMM,EAAA,EAAA,EAAA,aADF,EAAA,EAAA,CAHA,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}