@datawhale/prosemirror-render 0.0.1 → 0.0.2

package/src/components/collections/attachment/AttachmentMenu.vue

@@ -1,359 +0,0 @@
-<template>
-  <div class="attachment-menu">
-    <ul v-for="(menuGroup, index) in menuGroups" :key="index" class="attachment-menu-group">
-      <li
-        v-for="item in menuGroup"
-        :key="item.id"
-        class="attachment-menu-item"
-        @click="item.handler"
-        :style="{ backgroundColor: item.type === node.attrs.dispType ? 'rgb(224, 233, 255)' : '' }"
-      >
-        <!-- <el-tooltip :content="item.name" placement="top"> -->
-        <component :is="item.icon" :is-selected="item.type === node.attrs.dispType" class="attachment-menu-item-icon" />
-        <!-- </el-tooltip> -->
-      </li>
-    </ul>
-    <!-- <el-dialog
-      class="attachment-fullscreen-dialog"
-      v-model="showFullScreenDialog"
-      fullscreen
-      append-to-body
-      destroy-on-close
-      :show-close="false"
-      style="padding: 0"
-    >
-      <template #header>
-        <div class="attachment-fullscreen-dialog-header">
-          <button class="attachment-fullscreen-dialog-header-close" @click="showFullScreenDialog = false">
-            <CloseIcon class="attachment-fullscreen-dialog-header-close-icon"></CloseIcon
-            ><span class="attachment-fullscreen-dialog-header-close-text">退出</span>
-          </button>
-          <div class="attachment-fullscreen-dialog-header-line"></div>
-          <div class="attachment-fullscreen-dialog-header-title">
-            <component :is="icon" class="attachment-fullscreen-dialog-header-title-icon"></component>
-            <div class="attachment-fullscreen-dialog-header-title-info">
-              <div class="attachment-fullscreen-dialog-header-title-info-filename">
-                {{ node.attrs.fileName }}.{{ node.attrs.fileType }}
-              </div>
-              <div class="attachment-fullscreen-dialog-header-title-info-filesize">{{ calculatedFileSize }}</div>
-            </div>
-          </div>
-          <el-tooltip content="下载该文件" placement="bottom"
-            ><button class="attachment-fullscreen-dialog-header-download" @click="handleDownload">
-              <DownloadIcon class="attachment-fullscreen-dialog-header-download-icon"></DownloadIcon>
-              <span>下载</span>
-            </button></el-tooltip
-          >
-        </div>
-      </template>
-      <template #default>
-        <div class="attachment-fullscreen-preview-iframe-wrapper" v-if="canPreview">
-          <iframe :src="genPreviewSrc(node.attrs.src)"></iframe>
-        </div>
-        <div class="attachment-fullscreen-preview-unable" v-else>
-          <img
-            class="attachment-fullscreen-preview-unable-img"
-            :src="cannotPreviewImgDataUrl"
-            alt="该文件类型无法预览"
-          />
-          <div class="attachment-fullscreen-preview-unable-text">
-            <strong style="font-weight: bold">.{{ node.attrs.fileType }}</strong
-            >文件类型无法预览
-          </div>
-          <div class="attachment-fullscreen-preview-unable-text">
-            {{ node.attrs.fileName }}.{{ node.attrs.fileType }}&nbsp;·&nbsp;{{ calculatedFileSize }}
-          </div>
-        </div>
-      </template>
-    </el-dialog> -->
-  </div>
-</template>
-
-<script setup lang="ts">
-import { type Component, useId } from 'vue';
-import FullScreenIcon from '@datawhale/dipwap-render/icons/Attachment/FullScreen.vue';
-import DownloadIcon from '@datawhale/dipwap-render/icons/Common/Download.vue';
-import { resolvedFileUrl } from '@datawhale/dipwap-render/utils/common';
-import type { PMAttachmentBlock, PMAttachmentInline } from '@datawhale/dipwap-types/index';
-
-const { node } = defineProps<{
-  node: PMAttachmentBlock | PMAttachmentInline;
-}>();
-
-// const { icon, canPreview, genPreviewSrc, cannotPreviewImgDataUrl, calculatedFileSize } = useAttachment(
-//   node.attrs.fileType,
-//   node.attrs.fileSize,
-// );
-
-// 这个model仅在卡片视图点击右侧小眼睛时需要传值进来，否则仅在组件内部使用即可
-const showFullScreenDialog = defineModel('showFullScreenDialog', { type: Boolean });
-
-const toFullScreenPreview = () => {
-  showFullScreenDialog.value = true;
-  alert('全屏预览功能将在后续版本中开放');
-};
-
-const handleDownload = async () => {
-  if (!node.attrs.src || !node.attrs.src.length) {
-    return;
-  }
-  const a = document.createElement('a');
-  a.href = resolvedFileUrl(node.attrs.src);
-  a.download = `${node.attrs.fileName}.${node.attrs.fileType}`;
-  a.target = '_blank';
-  a.rel = 'noopener noreferrer';
-  a.click();
-};
-
-type MenuItem = {
-  id: string;
-  name: string;
-  icon: Component;
-  handler: (e: MouseEvent) => void;
-  type?: string;
-};
-
-const menuGroups: MenuItem[][] = [
-  [
-    {
-      id: useId(),
-      name: '全屏',
-      icon: FullScreenIcon,
-      handler: toFullScreenPreview,
-    },
-    {
-      id: useId(),
-      name: '下载',
-      icon: DownloadIcon,
-      handler: handleDownload,
-    },
-  ],
-  // [
-  //   {
-  //     id: useId(),
-  //     name: '复制链接',
-  //     icon: CopyAnchorLinkIcon,
-  //     handler: () => {
-  //       ElMessage.warning('敬请期待');
-  //     },
-  //   },
-  //   {
-  //     id: useId(),
-  //     name: '分享',
-  //     icon: ShareTextLinkIcon,
-  //     handler: () => {
-  //       ElMessage.warning('敬请期待');
-  //     },
-  //   },
-  // ],
-  // [
-  //   {
-  //     id: useId(),
-  //     name: '评论',
-  //     icon: CommentIcon,
-  //     handler: () => {
-  //       ElMessage.warning('敬请期待');
-  //     },
-  //   },
-  // ],
-];
-</script>
-
-<style scoped lang="scss">
-* {
-  outline: none !important;
-}
-.attachment-menu {
-  height: 40px;
-  box-sizing: border-box;
-  box-shadow: rgba(31, 35, 41, 0.1) 0px 4px 8px 0px;
-  background-color: #fff;
-  border: 1px solid rgb(222, 224, 227);
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 0;
-  &-group {
-    margin: 0 !important;
-    padding: 0 8px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-right: 1px solid rgb(222, 224, 227);
-    &:last-child {
-      border-right: none;
-    }
-    .attachment-menu-item:first-child {
-      margin-left: 0 !important;
-    }
-  }
-  &-item {
-    cursor: pointer;
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    margin-left: 8px !important;
-    color: rgb(43, 47, 54);
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    &:hover {
-      background-color: rgba(31, 35, 41, 0.08);
-    }
-    &:active {
-      background-color: rgba(16, 16, 16, 0.16);
-    }
-    &:first-child {
-      margin-left: 0;
-    }
-    &-icon {
-      width: 18px;
-      height: 18px;
-    }
-  }
-}
-.attachment-fullscreen-dialog {
-  &-header {
-    width: 100%;
-    height: 64px;
-    padding: 0;
-    border-bottom: 1px solid rgb(222, 224, 227);
-    box-sizing: border-box;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    &-close {
-      display: flex;
-      align-items: center;
-      margin: 0;
-      padding: 0;
-      border: none;
-      outline: none;
-      background-color: #fff;
-      width: 72px;
-      height: 30px;
-      margin-left: 12px;
-      padding: 4px 8px;
-      border-radius: 6px;
-      font-size: 16px;
-      color: rgb(31, 35, 41);
-      cursor: pointer;
-      &:hover {
-        background-color: rgba(31, 35, 41, 0.1);
-      }
-      &:active {
-        background-color: rgba(31, 35, 41, 0.2);
-      }
-      &-icon {
-        margin-right: 4px;
-      }
-      &-text {
-        margin-left: 4px;
-      }
-    }
-    &-line {
-      margin-left: 8px;
-      margin-right: 16px;
-      height: 36px;
-      border-right: 1px solid rgb(222, 224, 227);
-    }
-    &-title {
-      display: flex;
-      align-items: center;
-      max-height: 48px;
-      overflow: hidden;
-      max-width: calc(100% - 120px);
-      -webkit-box-flex: 1;
-      -ms-flex: 1;
-      flex: 1;
-      &-icon {
-        margin: 6px 14px 6px 0;
-        width: 36px;
-        height: 36px;
-      }
-      &-info {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        line-height: 1.7;
-        &-filename {
-          color: #1f2329;
-          overflow: hidden;
-          font-size: 16px !important;
-          -o-text-overflow: ellipsis;
-          text-overflow: ellipsis;
-          text-align: left;
-          white-space: nowrap;
-        }
-        &-filesize {
-          color: #646a73;
-          font-size: 12px;
-        }
-      }
-    }
-    &-download {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin: 0;
-      padding: 0;
-      border: none;
-      outline: none;
-      margin-right: 28px;
-      margin-left: 4px;
-      box-sizing: border-box;
-      height: 32px;
-      width: 80px;
-      border-radius: 6px;
-      background-color: #fff;
-      border: 1px solid rgb(208, 211, 214);
-      cursor: pointer;
-      font-size: 14px;
-      &:hover {
-        background-color: rgb(242, 243, 245);
-      }
-      &:active {
-        background-color: rgb(239, 240, 241);
-      }
-      &-icon {
-        margin-right: 4px;
-        width: 14px;
-        height: 14px;
-      }
-    }
-  }
-  .attachment-fullscreen-preview-iframe-wrapper {
-    width: 100%;
-    height: calc(100vh - 64px);
-    margin-top: -16px;
-    iframe {
-      width: 100%;
-      height: calc(100% - 2px);
-    }
-  }
-  .attachment-fullscreen-preview-unable {
-    width: 100%;
-    height: calc(100vh - 64px);
-    margin-top: -16px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    .attachment-fullscreen-preview-unable-img {
-      width: 120px;
-      height: 120px;
-      display: block;
-      margin-bottom: 16px;
-    }
-    .attachment-fullscreen-preview-unable-text {
-      font-size: 14px;
-      color: rgb(100, 106, 115);
-      margin-top: 4px;
-      line-height: 1.8;
-    }
-  }
-}
-</style>