@datawhale/prosemirror-render 0.0.1

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 (287) hide show
  1. package/dist/AttachmentBlock-ChMNTUOo.mjs +351 -0
  2. package/dist/AttachmentBlock-DsmJP3Kw.js +1 -0
  3. package/dist/AttachmentInline-Dc3dp0g-.js +1 -0
  4. package/dist/AttachmentInline-tbC8BJBy.mjs +52 -0
  5. package/dist/AttachmentMenu-B5x8P9_n.mjs +541 -0
  6. package/dist/AttachmentMenu-ExoCOe4B.js +1 -0
  7. package/dist/Blockquote-BamWUQND.mjs +15 -0
  8. package/dist/Blockquote-CQSBFnsu.js +1 -0
  9. package/dist/BulletList-BQTUD69X.mjs +15 -0
  10. package/dist/BulletList-CFjF3U-l.js +1 -0
  11. package/dist/Callout-Cu6HI-xq.mjs +28 -0
  12. package/dist/Callout-DPdOqTb4.js +1 -0
  13. package/dist/CellOutput-C33VK0df.mjs +981 -0
  14. package/dist/CellOutput-DiKZlIFa.js +6 -0
  15. package/dist/CodeBlock-Cjuxuq7B.mjs +8359 -0
  16. package/dist/CodeBlock-DWniNUQB.js +148 -0
  17. package/dist/Doc-6s4VMDsx.mjs +15 -0
  18. package/dist/Doc-D2yvlSII.js +1 -0
  19. package/dist/FoldBlock-DRdlU-DX.mjs +75 -0
  20. package/dist/FoldBlock-ZPMf0QsR.js +1 -0
  21. package/dist/Grid-GfmJxM93.mjs +31 -0
  22. package/dist/Grid-QToZdaRT.js +1 -0
  23. package/dist/HardBreak-B2tFO31P.mjs +13 -0
  24. package/dist/HardBreak-Dbf5Zg5o.js +1 -0
  25. package/dist/Heading-BElRvhGn.mjs +21 -0
  26. package/dist/Heading-BUnffIAz.js +1 -0
  27. package/dist/HorizontalRule-BRG45oT0.mjs +13 -0
  28. package/dist/HorizontalRule-CE09LZGf.js +1 -0
  29. package/dist/IFrame-CaAOVLGN.mjs +17 -0
  30. package/dist/IFrame-DcCpSoDC.js +1 -0
  31. package/dist/Image-C8v5dCij.mjs +105 -0
  32. package/dist/Image-cHL85CXs.js +1 -0
  33. package/dist/ListItem-BrjxeGxz.js +1 -0
  34. package/dist/ListItem-X0T7a_z8.mjs +15 -0
  35. package/dist/MathDisplay-CESKZV46.js +1 -0
  36. package/dist/MathDisplay-CoGsFzXW.mjs +30 -0
  37. package/dist/MathInline-0xTZoIIq.mjs +30 -0
  38. package/dist/MathInline-C_1SJUVz.js +1 -0
  39. package/dist/McChoices-Aj394G5E.mjs +52 -0
  40. package/dist/McChoices-B4euzY7M.js +1 -0
  41. package/dist/McQuestion-Dq0aM5tC.js +1 -0
  42. package/dist/McQuestion-DvD-J47M.mjs +38 -0
  43. package/dist/McSolution-C5sTXz3y.mjs +24 -0
  44. package/dist/McSolution-N79CllH9.js +1 -0
  45. package/dist/MultipleChoice-DTCF3Q8m.js +1 -0
  46. package/dist/MultipleChoice-Dv-k1zUU.mjs +47 -0
  47. package/dist/OrderedList-B8v1gchv.mjs +17 -0
  48. package/dist/OrderedList-DMl3tvwP.js +1 -0
  49. package/dist/Paragraph-CzRSCJNr.js +1 -0
  50. package/dist/Paragraph-DGcZy8t_.mjs +16 -0
  51. package/dist/SlotNode-6OpoUcOa.mjs +10 -0
  52. package/dist/SlotNode-DMG0R6Vf.js +1 -0
  53. package/dist/TableCell-BY9gdldc.js +1 -0
  54. package/dist/TableCell-Bp52L368.mjs +20 -0
  55. package/dist/TableContainer-C5KXY6f7.js +1 -0
  56. package/dist/TableContainer-C9PhNGlz.mjs +29 -0
  57. package/dist/TableHeader-BTuqvorM.js +1 -0
  58. package/dist/TableHeader-C7KKz3e1.mjs +17 -0
  59. package/dist/TableRow-D4F6AKFt.js +1 -0
  60. package/dist/TableRow-OzpVq1qW.mjs +15 -0
  61. package/dist/Text-Br_pcGz4.mjs +78 -0
  62. package/dist/Text-DlUfrsNI.js +1 -0
  63. package/dist/emoji-Bk6FG72F.js +1 -0
  64. package/dist/emoji-CmOToDEU.mjs +3711 -0
  65. package/dist/index-D2CtpNvR.js +1 -0
  66. package/dist/index-DVmWCrQE.mjs +159 -0
  67. package/dist/index.cjs.js +1 -0
  68. package/dist/index.es.js +4 -0
  69. package/dist/katex-CS0ZfoxP.js +261 -0
  70. package/dist/katex-r9TeExgs.mjs +11690 -0
  71. package/dist/prosemirror-render.css +1 -0
  72. package/dist/types/apis/monitor.d.ts +9 -0
  73. package/dist/types/apis/tingwu.d.ts +14 -0
  74. package/dist/types/apis/types.d.ts +23 -0
  75. package/dist/types/components/TreeRecursive.vue.d.ts +7 -0
  76. package/dist/types/components/TreeRender.vue.d.ts +9 -0
  77. package/dist/types/components/collections/async/AsyncError.vue.d.ts +3 -0
  78. package/dist/types/components/collections/async/AsyncLoading.vue.d.ts +3 -0
  79. package/dist/types/components/collections/attachment/AttachmentBlock.vue.d.ts +7 -0
  80. package/dist/types/components/collections/attachment/AttachmentInline.vue.d.ts +7 -0
  81. package/dist/types/components/collections/attachment/AttachmentMenu.vue.d.ts +16 -0
  82. package/dist/types/components/collections/attachment/VideoDetail.vue.d.ts +7 -0
  83. package/dist/types/components/collections/attachment/index.d.ts +1 -0
  84. package/dist/types/components/collections/basic/Blockquote.vue.d.ts +17 -0
  85. package/dist/types/components/collections/basic/BulletList.vue.d.ts +17 -0
  86. package/dist/types/components/collections/basic/HardBreak.vue.d.ts +7 -0
  87. package/dist/types/components/collections/basic/Heading.vue.d.ts +17 -0
  88. package/dist/types/components/collections/basic/HorizontalRule.vue.d.ts +7 -0
  89. package/dist/types/components/collections/basic/ListItem.vue.d.ts +17 -0
  90. package/dist/types/components/collections/basic/OrderedList.vue.d.ts +17 -0
  91. package/dist/types/components/collections/basic/Paragraph.vue.d.ts +17 -0
  92. package/dist/types/components/collections/basic/Text.vue.d.ts +7 -0
  93. package/dist/types/components/collections/basic/index.d.ts +1 -0
  94. package/dist/types/components/collections/callout/Callout.vue.d.ts +7 -0
  95. package/dist/types/components/collections/callout/index.d.ts +1 -0
  96. package/dist/types/components/collections/code/CellOutput.vue.d.ts +7 -0
  97. package/dist/types/components/collections/code/CodeBlock.vue.d.ts +7 -0
  98. package/dist/types/components/collections/code/index.d.ts +1 -0
  99. package/dist/types/components/collections/fold/FoldBlock.vue.d.ts +7 -0
  100. package/dist/types/components/collections/fold/index.d.ts +1 -0
  101. package/dist/types/components/collections/grid/Grid.vue.d.ts +7 -0
  102. package/dist/types/components/collections/grid/index.d.ts +1 -0
  103. package/dist/types/components/collections/iframe/IFrame.vue.d.ts +7 -0
  104. package/dist/types/components/collections/iframe/index.d.ts +1 -0
  105. package/dist/types/components/collections/img/Image.vue.d.ts +7 -0
  106. package/dist/types/components/collections/img/index.d.ts +1 -0
  107. package/dist/types/components/collections/index.d.ts +1 -0
  108. package/dist/types/components/collections/math/MathDisplay.vue.d.ts +7 -0
  109. package/dist/types/components/collections/math/MathInline.vue.d.ts +7 -0
  110. package/dist/types/components/collections/math/index.d.ts +1 -0
  111. package/dist/types/components/collections/multipleChoice/McChoices.vue.d.ts +16 -0
  112. package/dist/types/components/collections/multipleChoice/McQuestion.vue.d.ts +7 -0
  113. package/dist/types/components/collections/multipleChoice/McSolution.vue.d.ts +8 -0
  114. package/dist/types/components/collections/multipleChoice/MultipleChoice.vue.d.ts +7 -0
  115. package/dist/types/components/collections/multipleChoice/index.d.ts +1 -0
  116. package/dist/types/components/collections/table/TableCell.vue.d.ts +17 -0
  117. package/dist/types/components/collections/table/TableContainer.vue.d.ts +17 -0
  118. package/dist/types/components/collections/table/TableHeader.vue.d.ts +17 -0
  119. package/dist/types/components/collections/table/TableRow.vue.d.ts +17 -0
  120. package/dist/types/components/collections/table/index.d.ts +1 -0
  121. package/dist/types/components/collections/utils.d.ts +2 -0
  122. package/dist/types/components/collections/wrapper/Doc.vue.d.ts +17 -0
  123. package/dist/types/components/collections/wrapper/SlotNode.vue.d.ts +13 -0
  124. package/dist/types/components/collections/wrapper/index.d.ts +1 -0
  125. package/dist/types/components/index.d.ts +1 -0
  126. package/dist/types/icons/Attachment/CardView.vue.d.ts +9 -0
  127. package/dist/types/icons/Attachment/Code/Bat.vue.d.ts +3 -0
  128. package/dist/types/icons/Attachment/Code/C.vue.d.ts +3 -0
  129. package/dist/types/icons/Attachment/Code/Cpp.vue.d.ts +3 -0
  130. package/dist/types/icons/Attachment/Code/Css.vue.d.ts +3 -0
  131. package/dist/types/icons/Attachment/Code/Go.vue.d.ts +3 -0
  132. package/dist/types/icons/Attachment/Code/Html.vue.d.ts +3 -0
  133. package/dist/types/icons/Attachment/Code/Java.vue.d.ts +3 -0
  134. package/dist/types/icons/Attachment/Code/Js.vue.d.ts +3 -0
  135. package/dist/types/icons/Attachment/Code/Json.vue.d.ts +3 -0
  136. package/dist/types/icons/Attachment/Code/Jsx.vue.d.ts +3 -0
  137. package/dist/types/icons/Attachment/Code/Md.vue.d.ts +3 -0
  138. package/dist/types/icons/Attachment/Code/Php.vue.d.ts +3 -0
  139. package/dist/types/icons/Attachment/Code/Python.vue.d.ts +3 -0
  140. package/dist/types/icons/Attachment/Code/Rb.vue.d.ts +3 -0
  141. package/dist/types/icons/Attachment/Code/Sh.vue.d.ts +3 -0
  142. package/dist/types/icons/Attachment/Code/Sql.vue.d.ts +3 -0
  143. package/dist/types/icons/Attachment/Code/Swift.vue.d.ts +3 -0
  144. package/dist/types/icons/Attachment/Code/Ts.vue.d.ts +3 -0
  145. package/dist/types/icons/Attachment/Code/Tsx.vue.d.ts +3 -0
  146. package/dist/types/icons/Attachment/Code/Vue.vue.d.ts +3 -0
  147. package/dist/types/icons/Attachment/Excel.vue.d.ts +3 -0
  148. package/dist/types/icons/Attachment/Eye.vue.d.ts +3 -0
  149. package/dist/types/icons/Attachment/FullScreen.vue.d.ts +3 -0
  150. package/dist/types/icons/Attachment/InlineView.vue.d.ts +9 -0
  151. package/dist/types/icons/Attachment/Pdf.vue.d.ts +3 -0
  152. package/dist/types/icons/Attachment/Ppt.vue.d.ts +3 -0
  153. package/dist/types/icons/Attachment/PreviewView.vue.d.ts +9 -0
  154. package/dist/types/icons/Attachment/UnknownFile.vue.d.ts +3 -0
  155. package/dist/types/icons/Attachment/VideoIcon.vue.d.ts +3 -0
  156. package/dist/types/icons/Attachment/VideoPlay.vue.d.ts +3 -0
  157. package/dist/types/icons/Attachment/Word.vue.d.ts +3 -0
  158. package/dist/types/icons/Code/Confirm.vue.d.ts +3 -0
  159. package/dist/types/icons/Code/Paste.vue.d.ts +3 -0
  160. package/dist/types/icons/Common/Choice.vue.d.ts +3 -0
  161. package/dist/types/icons/Common/Close.vue.d.ts +3 -0
  162. package/dist/types/icons/Common/Comment.vue.d.ts +3 -0
  163. package/dist/types/icons/Common/CopyAnchorLink.vue.d.ts +3 -0
  164. package/dist/types/icons/Common/Delete.vue.d.ts +3 -0
  165. package/dist/types/icons/Common/Download.vue.d.ts +3 -0
  166. package/dist/types/icons/Common/FoldClose.vue.d.ts +3 -0
  167. package/dist/types/icons/Common/FoldOpen.vue.d.ts +3 -0
  168. package/dist/types/icons/Common/Plate.vue.d.ts +3 -0
  169. package/dist/types/icons/Common/Question.vue.d.ts +3 -0
  170. package/dist/types/icons/Common/ShareTextLink.vue.d.ts +3 -0
  171. package/dist/types/index.d.ts +2 -0
  172. package/dist/types/types.d.ts +269 -0
  173. package/dist/types/utils/common.d.ts +1 -0
  174. package/dist/types/utils/emoji.d.ts +10 -0
  175. package/dist/types/utils/globalStatus.d.ts +16 -0
  176. package/dist/types/utils/shiki.d.ts +3 -0
  177. package/dist/types/utils/useAttachment.d.ts +8 -0
  178. package/package.json +29 -0
  179. package/src/apis/monitor.ts +8 -0
  180. package/src/apis/tingwu.ts +22 -0
  181. package/src/apis/types.ts +45 -0
  182. package/src/components/TreeRecursive.vue +47 -0
  183. package/src/components/TreeRender.vue +404 -0
  184. package/src/components/collections/async/AsyncError.vue +17 -0
  185. package/src/components/collections/async/AsyncLoading.vue +1 -0
  186. package/src/components/collections/attachment/AttachmentBlock.vue +561 -0
  187. package/src/components/collections/attachment/AttachmentInline.vue +90 -0
  188. package/src/components/collections/attachment/AttachmentMenu.vue +359 -0
  189. package/src/components/collections/attachment/VideoDetail.vue +375 -0
  190. package/src/components/collections/attachment/index.ts +6 -0
  191. package/src/components/collections/basic/Blockquote.vue +15 -0
  192. package/src/components/collections/basic/BulletList.vue +15 -0
  193. package/src/components/collections/basic/HardBreak.vue +11 -0
  194. package/src/components/collections/basic/Heading.vue +15 -0
  195. package/src/components/collections/basic/HorizontalRule.vue +11 -0
  196. package/src/components/collections/basic/ListItem.vue +15 -0
  197. package/src/components/collections/basic/OrderedList.vue +15 -0
  198. package/src/components/collections/basic/Paragraph.vue +19 -0
  199. package/src/components/collections/basic/Text.vue +73 -0
  200. package/src/components/collections/basic/index.ts +13 -0
  201. package/src/components/collections/callout/Callout.vue +77 -0
  202. package/src/components/collections/callout/index.ts +5 -0
  203. package/src/components/collections/code/CellOutput.vue +72 -0
  204. package/src/components/collections/code/CodeBlock.vue +83 -0
  205. package/src/components/collections/code/index.ts +6 -0
  206. package/src/components/collections/fold/FoldBlock.vue +130 -0
  207. package/src/components/collections/fold/index.ts +5 -0
  208. package/src/components/collections/grid/Grid.vue +70 -0
  209. package/src/components/collections/grid/index.ts +5 -0
  210. package/src/components/collections/iframe/IFrame.vue +19 -0
  211. package/src/components/collections/iframe/index.ts +5 -0
  212. package/src/components/collections/img/Image.vue +318 -0
  213. package/src/components/collections/img/index.ts +5 -0
  214. package/src/components/collections/index.ts +29 -0
  215. package/src/components/collections/math/MathDisplay.vue +42 -0
  216. package/src/components/collections/math/MathInline.vue +42 -0
  217. package/src/components/collections/math/index.ts +6 -0
  218. package/src/components/collections/multipleChoice/McChoices.vue +72 -0
  219. package/src/components/collections/multipleChoice/McQuestion.vue +61 -0
  220. package/src/components/collections/multipleChoice/McSolution.vue +47 -0
  221. package/src/components/collections/multipleChoice/MultipleChoice.vue +62 -0
  222. package/src/components/collections/multipleChoice/index.ts +8 -0
  223. package/src/components/collections/table/TableCell.vue +20 -0
  224. package/src/components/collections/table/TableContainer.vue +32 -0
  225. package/src/components/collections/table/TableHeader.vue +15 -0
  226. package/src/components/collections/table/TableRow.vue +15 -0
  227. package/src/components/collections/table/index.ts +8 -0
  228. package/src/components/collections/utils.ts +17 -0
  229. package/src/components/collections/wrapper/Doc.vue +15 -0
  230. package/src/components/collections/wrapper/SlotNode.vue +5 -0
  231. package/src/components/collections/wrapper/index.ts +6 -0
  232. package/src/components/index.ts +1 -0
  233. package/src/icons/Attachment/CardView.vue +21 -0
  234. package/src/icons/Attachment/Code/Bat.vue +26 -0
  235. package/src/icons/Attachment/Code/C.vue +26 -0
  236. package/src/icons/Attachment/Code/Cpp.vue +26 -0
  237. package/src/icons/Attachment/Code/Css.vue +34 -0
  238. package/src/icons/Attachment/Code/Go.vue +26 -0
  239. package/src/icons/Attachment/Code/Html.vue +34 -0
  240. package/src/icons/Attachment/Code/Java.vue +42 -0
  241. package/src/icons/Attachment/Code/Js.vue +26 -0
  242. package/src/icons/Attachment/Code/Json.vue +26 -0
  243. package/src/icons/Attachment/Code/Jsx.vue +30 -0
  244. package/src/icons/Attachment/Code/Md.vue +26 -0
  245. package/src/icons/Attachment/Code/Php.vue +26 -0
  246. package/src/icons/Attachment/Code/Python.vue +30 -0
  247. package/src/icons/Attachment/Code/Rb.vue +26 -0
  248. package/src/icons/Attachment/Code/Sh.vue +30 -0
  249. package/src/icons/Attachment/Code/Sql.vue +30 -0
  250. package/src/icons/Attachment/Code/Swift.vue +26 -0
  251. package/src/icons/Attachment/Code/Ts.vue +26 -0
  252. package/src/icons/Attachment/Code/Tsx.vue +30 -0
  253. package/src/icons/Attachment/Code/Vue.vue +24 -0
  254. package/src/icons/Attachment/Excel.vue +26 -0
  255. package/src/icons/Attachment/Eye.vue +15 -0
  256. package/src/icons/Attachment/FullScreen.vue +15 -0
  257. package/src/icons/Attachment/InlineView.vue +21 -0
  258. package/src/icons/Attachment/Pdf.vue +25 -0
  259. package/src/icons/Attachment/Ppt.vue +26 -0
  260. package/src/icons/Attachment/PreviewView.vue +21 -0
  261. package/src/icons/Attachment/UnknownFile.vue +26 -0
  262. package/src/icons/Attachment/VideoIcon.vue +25 -0
  263. package/src/icons/Attachment/VideoPlay.vue +15 -0
  264. package/src/icons/Attachment/Word.vue +26 -0
  265. package/src/icons/Code/Confirm.vue +38 -0
  266. package/src/icons/Code/Paste.vue +8 -0
  267. package/src/icons/Common/Choice.vue +28 -0
  268. package/src/icons/Common/Close.vue +15 -0
  269. package/src/icons/Common/Comment.vue +16 -0
  270. package/src/icons/Common/CopyAnchorLink.vue +15 -0
  271. package/src/icons/Common/Delete.vue +15 -0
  272. package/src/icons/Common/Download.vue +15 -0
  273. package/src/icons/Common/FoldClose.vue +9 -0
  274. package/src/icons/Common/FoldOpen.vue +9 -0
  275. package/src/icons/Common/Plate.vue +23 -0
  276. package/src/icons/Common/Question.vue +8 -0
  277. package/src/icons/Common/ShareTextLink.vue +15 -0
  278. package/src/index.ts +3 -0
  279. package/src/types.ts +236 -0
  280. package/src/utils/common.ts +6 -0
  281. package/src/utils/emoji.ts +3715 -0
  282. package/src/utils/globalStatus.ts +19 -0
  283. package/src/utils/shiki.ts +25 -0
  284. package/src/utils/useAttachment.ts +215 -0
  285. package/tsconfig.build.json +10 -0
  286. package/tsconfig.json +23 -0
  287. package/vite.config.ts +24 -0
@@ -0,0 +1,359 @@
1
+ <template>
2
+ <div class="attachment-menu">
3
+ <ul v-for="(menuGroup, index) in menuGroups" :key="index" class="attachment-menu-group">
4
+ <li
5
+ v-for="item in menuGroup"
6
+ :key="item.id"
7
+ class="attachment-menu-item"
8
+ @click="item.handler"
9
+ :style="{ backgroundColor: item.type === node.attrs.dispType ? 'rgb(224, 233, 255)' : '' }"
10
+ >
11
+ <!-- <el-tooltip :content="item.name" placement="top"> -->
12
+ <component :is="item.icon" :is-selected="item.type === node.attrs.dispType" class="attachment-menu-item-icon" />
13
+ <!-- </el-tooltip> -->
14
+ </li>
15
+ </ul>
16
+ <!-- <el-dialog
17
+ class="attachment-fullscreen-dialog"
18
+ v-model="showFullScreenDialog"
19
+ fullscreen
20
+ append-to-body
21
+ destroy-on-close
22
+ :show-close="false"
23
+ style="padding: 0"
24
+ >
25
+ <template #header>
26
+ <div class="attachment-fullscreen-dialog-header">
27
+ <button class="attachment-fullscreen-dialog-header-close" @click="showFullScreenDialog = false">
28
+ <CloseIcon class="attachment-fullscreen-dialog-header-close-icon"></CloseIcon
29
+ ><span class="attachment-fullscreen-dialog-header-close-text">退出</span>
30
+ </button>
31
+ <div class="attachment-fullscreen-dialog-header-line"></div>
32
+ <div class="attachment-fullscreen-dialog-header-title">
33
+ <component :is="icon" class="attachment-fullscreen-dialog-header-title-icon"></component>
34
+ <div class="attachment-fullscreen-dialog-header-title-info">
35
+ <div class="attachment-fullscreen-dialog-header-title-info-filename">
36
+ {{ node.attrs.fileName }}.{{ node.attrs.fileType }}
37
+ </div>
38
+ <div class="attachment-fullscreen-dialog-header-title-info-filesize">{{ calculatedFileSize }}</div>
39
+ </div>
40
+ </div>
41
+ <el-tooltip content="下载该文件" placement="bottom"
42
+ ><button class="attachment-fullscreen-dialog-header-download" @click="handleDownload">
43
+ <DownloadIcon class="attachment-fullscreen-dialog-header-download-icon"></DownloadIcon>
44
+ <span>下载</span>
45
+ </button></el-tooltip
46
+ >
47
+ </div>
48
+ </template>
49
+ <template #default>
50
+ <div class="attachment-fullscreen-preview-iframe-wrapper" v-if="canPreview">
51
+ <iframe :src="genPreviewSrc(node.attrs.src)"></iframe>
52
+ </div>
53
+ <div class="attachment-fullscreen-preview-unable" v-else>
54
+ <img
55
+ class="attachment-fullscreen-preview-unable-img"
56
+ :src="cannotPreviewImgDataUrl"
57
+ alt="该文件类型无法预览"
58
+ />
59
+ <div class="attachment-fullscreen-preview-unable-text">
60
+ <strong style="font-weight: bold">.{{ node.attrs.fileType }}</strong
61
+ >文件类型无法预览
62
+ </div>
63
+ <div class="attachment-fullscreen-preview-unable-text">
64
+ {{ node.attrs.fileName }}.{{ node.attrs.fileType }}&nbsp;·&nbsp;{{ calculatedFileSize }}
65
+ </div>
66
+ </div>
67
+ </template>
68
+ </el-dialog> -->
69
+ </div>
70
+ </template>
71
+
72
+ <script setup lang="ts">
73
+ import { type Component, useId } from 'vue';
74
+ import FullScreenIcon from '@datawhale/dipwap-render/icons/Attachment/FullScreen.vue';
75
+ import DownloadIcon from '@datawhale/dipwap-render/icons/Common/Download.vue';
76
+ import { resolvedFileUrl } from '@datawhale/dipwap-render/utils/common';
77
+ import type { PMAttachmentBlock, PMAttachmentInline } from '@datawhale/dipwap-types/index';
78
+
79
+ const { node } = defineProps<{
80
+ node: PMAttachmentBlock | PMAttachmentInline;
81
+ }>();
82
+
83
+ // const { icon, canPreview, genPreviewSrc, cannotPreviewImgDataUrl, calculatedFileSize } = useAttachment(
84
+ // node.attrs.fileType,
85
+ // node.attrs.fileSize,
86
+ // );
87
+
88
+ // 这个model仅在卡片视图点击右侧小眼睛时需要传值进来,否则仅在组件内部使用即可
89
+ const showFullScreenDialog = defineModel('showFullScreenDialog', { type: Boolean });
90
+
91
+ const toFullScreenPreview = () => {
92
+ showFullScreenDialog.value = true;
93
+ alert('全屏预览功能将在后续版本中开放');
94
+ };
95
+
96
+ const handleDownload = async () => {
97
+ if (!node.attrs.src || !node.attrs.src.length) {
98
+ return;
99
+ }
100
+ const a = document.createElement('a');
101
+ a.href = resolvedFileUrl(node.attrs.src);
102
+ a.download = `${node.attrs.fileName}.${node.attrs.fileType}`;
103
+ a.target = '_blank';
104
+ a.rel = 'noopener noreferrer';
105
+ a.click();
106
+ };
107
+
108
+ type MenuItem = {
109
+ id: string;
110
+ name: string;
111
+ icon: Component;
112
+ handler: (e: MouseEvent) => void;
113
+ type?: string;
114
+ };
115
+
116
+ const menuGroups: MenuItem[][] = [
117
+ [
118
+ {
119
+ id: useId(),
120
+ name: '全屏',
121
+ icon: FullScreenIcon,
122
+ handler: toFullScreenPreview,
123
+ },
124
+ {
125
+ id: useId(),
126
+ name: '下载',
127
+ icon: DownloadIcon,
128
+ handler: handleDownload,
129
+ },
130
+ ],
131
+ // [
132
+ // {
133
+ // id: useId(),
134
+ // name: '复制链接',
135
+ // icon: CopyAnchorLinkIcon,
136
+ // handler: () => {
137
+ // ElMessage.warning('敬请期待');
138
+ // },
139
+ // },
140
+ // {
141
+ // id: useId(),
142
+ // name: '分享',
143
+ // icon: ShareTextLinkIcon,
144
+ // handler: () => {
145
+ // ElMessage.warning('敬请期待');
146
+ // },
147
+ // },
148
+ // ],
149
+ // [
150
+ // {
151
+ // id: useId(),
152
+ // name: '评论',
153
+ // icon: CommentIcon,
154
+ // handler: () => {
155
+ // ElMessage.warning('敬请期待');
156
+ // },
157
+ // },
158
+ // ],
159
+ ];
160
+ </script>
161
+
162
+ <style scoped lang="scss">
163
+ * {
164
+ outline: none !important;
165
+ }
166
+ .attachment-menu {
167
+ height: 40px;
168
+ box-sizing: border-box;
169
+ box-shadow: rgba(31, 35, 41, 0.1) 0px 4px 8px 0px;
170
+ background-color: #fff;
171
+ border: 1px solid rgb(222, 224, 227);
172
+ border-radius: 6px;
173
+ display: flex;
174
+ align-items: center;
175
+ justify-content: center;
176
+ padding: 8px 0;
177
+ &-group {
178
+ margin: 0 !important;
179
+ padding: 0 8px;
180
+ height: 24px;
181
+ display: flex;
182
+ align-items: center;
183
+ justify-content: center;
184
+ border-right: 1px solid rgb(222, 224, 227);
185
+ &:last-child {
186
+ border-right: none;
187
+ }
188
+ .attachment-menu-item:first-child {
189
+ margin-left: 0 !important;
190
+ }
191
+ }
192
+ &-item {
193
+ cursor: pointer;
194
+ width: 24px;
195
+ height: 24px;
196
+ border-radius: 4px;
197
+ margin-left: 8px !important;
198
+ color: rgb(43, 47, 54);
199
+ box-sizing: border-box;
200
+ display: flex;
201
+ align-items: center;
202
+ justify-content: center;
203
+ &:hover {
204
+ background-color: rgba(31, 35, 41, 0.08);
205
+ }
206
+ &:active {
207
+ background-color: rgba(16, 16, 16, 0.16);
208
+ }
209
+ &:first-child {
210
+ margin-left: 0;
211
+ }
212
+ &-icon {
213
+ width: 18px;
214
+ height: 18px;
215
+ }
216
+ }
217
+ }
218
+ .attachment-fullscreen-dialog {
219
+ &-header {
220
+ width: 100%;
221
+ height: 64px;
222
+ padding: 0;
223
+ border-bottom: 1px solid rgb(222, 224, 227);
224
+ box-sizing: border-box;
225
+ background-color: #fff;
226
+ display: flex;
227
+ align-items: center;
228
+ &-close {
229
+ display: flex;
230
+ align-items: center;
231
+ margin: 0;
232
+ padding: 0;
233
+ border: none;
234
+ outline: none;
235
+ background-color: #fff;
236
+ width: 72px;
237
+ height: 30px;
238
+ margin-left: 12px;
239
+ padding: 4px 8px;
240
+ border-radius: 6px;
241
+ font-size: 16px;
242
+ color: rgb(31, 35, 41);
243
+ cursor: pointer;
244
+ &:hover {
245
+ background-color: rgba(31, 35, 41, 0.1);
246
+ }
247
+ &:active {
248
+ background-color: rgba(31, 35, 41, 0.2);
249
+ }
250
+ &-icon {
251
+ margin-right: 4px;
252
+ }
253
+ &-text {
254
+ margin-left: 4px;
255
+ }
256
+ }
257
+ &-line {
258
+ margin-left: 8px;
259
+ margin-right: 16px;
260
+ height: 36px;
261
+ border-right: 1px solid rgb(222, 224, 227);
262
+ }
263
+ &-title {
264
+ display: flex;
265
+ align-items: center;
266
+ max-height: 48px;
267
+ overflow: hidden;
268
+ max-width: calc(100% - 120px);
269
+ -webkit-box-flex: 1;
270
+ -ms-flex: 1;
271
+ flex: 1;
272
+ &-icon {
273
+ margin: 6px 14px 6px 0;
274
+ width: 36px;
275
+ height: 36px;
276
+ }
277
+ &-info {
278
+ display: flex;
279
+ flex-direction: column;
280
+ justify-content: center;
281
+ line-height: 1.7;
282
+ &-filename {
283
+ color: #1f2329;
284
+ overflow: hidden;
285
+ font-size: 16px !important;
286
+ -o-text-overflow: ellipsis;
287
+ text-overflow: ellipsis;
288
+ text-align: left;
289
+ white-space: nowrap;
290
+ }
291
+ &-filesize {
292
+ color: #646a73;
293
+ font-size: 12px;
294
+ }
295
+ }
296
+ }
297
+ &-download {
298
+ display: flex;
299
+ justify-content: center;
300
+ align-items: center;
301
+ margin: 0;
302
+ padding: 0;
303
+ border: none;
304
+ outline: none;
305
+ margin-right: 28px;
306
+ margin-left: 4px;
307
+ box-sizing: border-box;
308
+ height: 32px;
309
+ width: 80px;
310
+ border-radius: 6px;
311
+ background-color: #fff;
312
+ border: 1px solid rgb(208, 211, 214);
313
+ cursor: pointer;
314
+ font-size: 14px;
315
+ &:hover {
316
+ background-color: rgb(242, 243, 245);
317
+ }
318
+ &:active {
319
+ background-color: rgb(239, 240, 241);
320
+ }
321
+ &-icon {
322
+ margin-right: 4px;
323
+ width: 14px;
324
+ height: 14px;
325
+ }
326
+ }
327
+ }
328
+ .attachment-fullscreen-preview-iframe-wrapper {
329
+ width: 100%;
330
+ height: calc(100vh - 64px);
331
+ margin-top: -16px;
332
+ iframe {
333
+ width: 100%;
334
+ height: calc(100% - 2px);
335
+ }
336
+ }
337
+ .attachment-fullscreen-preview-unable {
338
+ width: 100%;
339
+ height: calc(100vh - 64px);
340
+ margin-top: -16px;
341
+ display: flex;
342
+ flex-direction: column;
343
+ align-items: center;
344
+ justify-content: center;
345
+ .attachment-fullscreen-preview-unable-img {
346
+ width: 120px;
347
+ height: 120px;
348
+ display: block;
349
+ margin-bottom: 16px;
350
+ }
351
+ .attachment-fullscreen-preview-unable-text {
352
+ font-size: 14px;
353
+ color: rgb(100, 106, 115);
354
+ margin-top: 4px;
355
+ line-height: 1.8;
356
+ }
357
+ }
358
+ }
359
+ </style>