@datawhale/prosemirror-render 0.0.1 → 0.0.2

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

@@ -1,561 +0,0 @@
-<template>
-  <div @mouseenter="isHovered = true" @mouseleave="handleMouseLeave" class="attachment-block-container">
-    <div v-if="node.attrs.dispType === 'card'" class="attachment-block-card-container">
-      <div class="attachment-block-card-icon">
-        <component :is="icon" class="attachment-block-card-icon-svg" />
-      </div>
-      <div class="attachment-block-card-info">
-        <div class="attachment-block-card-info-name">{{ node.attrs.fileName }}.{{ node.attrs.fileType }}</div>
-        <div class="attachment-block-card-info-size" v-if="!uploading && !node.attrs.uploadError">
-          {{ calculatedFileSize }}
-        </div>
-        <div class="attachment-block-card-info-size" v-else-if="uploading && !node.attrs.uploadError">
-          附件正在上传中，请等待...
-        </div>
-        <div class="attachment-block-card-info-size" v-else style="color: rgb(247, 78, 0)">
-          附件出错，请等待管理员处理
-        </div>
-      </div>
-      <div class="attachment-block-card-preview">
-        <!-- TODO:不使用Element-Plus的v-loading，为图标添加上传时的loading状态 -->
-        <div class="attachment-block-card-preview-wrapper" @click="handleFullScreen">
-          <component :is="isVideo(node.attrs.fileType) ? VideoPlay : Eye" class="attachment-block-card-preview-btn" />
-        </div>
-      </div>
-      <div class="attachment-block-card-menu" v-show="isHovered && !uploading && !node.attrs.uploadError"
-        @mouseenter="handleEnterMenu">
-        <AttachmentMenu :node="node" v-model:show-full-screen-dialog="showFullScreenPreview" />
-      </div>
-    </div>
-    <div v-else-if="node.attrs.dispType === 'preview'" class="attachment-block-preview-container">
-      <!-- 判断是否是视频文件类型 -->
-      <div v-if="isVideo(node.attrs.fileType)" class="video-block-preview-container">
-        <div class="video-block-container" :class="{ 'has-sidebar': showAiPanel }">
-          <div class="video-main-section">
-            <div class="video-player-wrapper" v-if="!uploading && !node.attrs.uploadError">
-              <video ref="videoPreviewRef" :src="resolvedFileUrl(node.attrs.src)" controls
-                class="video-element"></video>
-            </div>
-
-            <div class="video-uploading-wrapper" v-else>
-              <div class="uploading-content" v-if="!node.attrs.uploadError">
-                <div class="spinner"></div>
-                <span>视频正在上传中，请等待...</span>
-              </div>
-              <div class="error-content" v-else>
-                <span>⚠️ 视频出错，请等待管理员处理</span>
-              </div>
-            </div>
-
-            <div class="video-toolbar" v-if="!uploading && node.attrs.tingwuTaskId">
-              <div class="toolbar-info">
-                <span class="toolbar-title">分析</span>
-                <span class="toolbar-desc">摘要与章节</span>
-              </div>
-              <button class="ai-toggle-btn" :class="{ active: showAiPanel }" @click="toggleAiPanel">
-                <i class="icon-ai">✨</i> {{ showAiPanel ? '收起助手' : 'AI 助手' }}
-              </button>
-            </div>
-          </div>
-
-          <div class="video-sidebar-section" v-if="showAiPanel">
-            <VideoDetail :taskId="node.attrs.tingwuTaskId!" :videoRef="videoPreviewRef" @close="showAiPanel = false" />
-          </div>
-        </div>
-      </div>
-      <!-- 非视频类型的文件预览 -->
-      <div v-else class="notVideo-block-preview-container">
-        <div class="attachment-block-preview-content" :class="{ 'attachment-block-preview-dark-bg': !canPreview }">
-          <component v-if="canPreview" class="attachment-block-preview-iframe"
-            :src="resolvedFileUrl(genPreviewSrc(node.attrs.src))"
-            :is="node.attrs.fileType === 'pdf' ? 'embed' : 'iframe'"></component>
-          <div class="attachment-block-preview-unable" v-else>
-            <img class="attachment-block-preview-unable-img" :src="cannotPreviewImgDataUrl" alt="该文件类型无法预览" />
-            <div class="attachment-block-preview-unable-text">
-              <strong style="font-weight: bold">.{{ node.attrs.fileType }}</strong>文件类型无法预览
-            </div>
-            <div class="attachment-block-preview-unable-text">
-              {{ node.attrs.fileName }}.{{ node.attrs.fileType }}&nbsp;·&nbsp;{{ calculatedFileSize }}
-            </div>
-          </div>
-        </div>
-        <div class="attachment-block-preview-footer" :class="{ 'attachment-block-preview-dark-bg': !canPreview }">
-          <component :is="icon" class="attachment-block-preview-icon-svg" />
-          <span class="attachment-block-preview-info">{{ node.attrs.fileName }}.{{ node.attrs.fileType }}</span>
-        </div>
-      </div>
-      <div class="attachment-block-preview-menu" v-show="isHovered && !uploading && !node.attrs.uploadError"
-        @mouseenter="handleEnterMenu">
-        <AttachmentMenu :node="node" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref, useTemplateRef } from 'vue';
-import { monitorApi } from '@datawhale/dipwap-render/apis/monitor';
-import { axiosKey } from '@datawhale/dipwap-render/apis/types';
-import Eye from '@datawhale/dipwap-render/icons/Attachment/Eye.vue';
-import VideoPlay from '@datawhale/dipwap-render/icons/Attachment/VideoPlay.vue';
-import { resolvedFileUrl } from '@datawhale/dipwap-render/utils/common';
-import { useAttachment } from '@datawhale/dipwap-render/utils/useAttachment';
-import type { PMAttachmentBlock } from '@datawhale/dipwap-types/index';
-import AttachmentMenu from './AttachmentMenu.vue';
-import VideoDetail from './VideoDetail.vue';
-
-const { node } = defineProps<{
-  node: PMAttachmentBlock;
-}>();
-
-const service = inject(axiosKey);
-
-const videoPreviewRef = useTemplateRef('videoPreviewRef');
-
-const uploading = computed(() => node.attrs.uploadProgress === undefined || node.attrs.uploadProgress < 1);
-
-const { icon, calculatedFileSize, cannotPreviewImgDataUrl, canPreview, genPreviewSrc } = useAttachment(
-  node.attrs.fileType,
-  node.attrs.fileSize,
-);
-
-// 检查文件类型是否是视频
-const isVideo = (fileType: string) => {
-  const videoTypes = ['mp4', 'avi', 'mkv', 'mov'];
-  return videoTypes.includes(fileType);
-};
-
-const showAiPanel = ref(false);
-
-const toggleAiPanel = async () => {
-  showAiPanel.value = !showAiPanel.value;
-  if (service && showAiPanel.value && node.attrs.tingwuTaskId) {
-    // @ts-ignore
-    await monitorApi(service, {
-      log: JSON.stringify({
-        name: 'toggleVideoAiPanel',
-        tingwuTaskId: node.attrs.tingwuTaskId,
-        videoPageUrl: window.location.href,
-      }),
-    });
-  }
-};
-
-const showFullScreenPreview = ref(false);
-const handleFullScreen = () => {
-  showFullScreenPreview.value = true;
-  alert('全屏预览功能将在后续版本中开放');
-};
-
-// 菜单相关
-// 菜单与节点之间有缝隙，所以需要延迟关闭菜单的时间，使得鼠标在移动到菜单上时经过缝隙而不会关闭菜单
-const isHovered = ref(false); // 鼠标是否在节点上
-const timer = ref<number | null>(null);
-
-const handleMouseLeave = () => {
-  timer.value = setTimeout(() => {
-    isHovered.value = false;
-  }, 200) as unknown as number;
-};
-
-const handleEnterMenu = () => {
-  if (timer.value) {
-    clearTimeout(timer.value);
-    timer.value = null;
-  }
-};
-</script>
-
-<style scoped lang="scss">
-// 变量定义
-$primary-color: #2563eb;
-$border-color: #e5e7eb;
-$bg-gray: #f9fafb;
-$text-main: #111827;
-$text-sub: #6b7280;
-
-.attachment-block-container {
-  margin: 16px 0;
-}
-
-.attachment-block-card-container {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  max-width: 400px;
-  height: 65.14px;
-  box-sizing: border-box;
-  background-color: #fff;
-  border-radius: 8px;
-  border: 1px solid rgb(222, 224, 227);
-  cursor: pointer;
-
-  &:hover {
-    border-color: rgb(194, 212, 255);
-    box-shadow: rgb(194, 212, 255) 0px 0px 0px 1px;
-  }
-
-  .attachment-block-card-icon {
-    width: 48px;
-    height: 48px;
-    margin: 8px 12px 8px 8px;
-    box-sizing: border-box;
-
-    .attachment-block-card-icon-svg {
-      width: 48px;
-      height: 48px;
-    }
-  }
-
-  .attachment-block-card-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .attachment-block-card-info-name {
-      user-select: none;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      text-overflow: ellipsis;
-      text-align: left;
-      overflow: hidden;
-      color: #1f2329;
-      max-height: 44px;
-      max-width: 260px;
-      line-height: 22px;
-    }
-
-    .attachment-block-card-info-size {
-      height: 17px;
-      white-space: nowrap;
-      font-size: 12px;
-      color: #646a73;
-      user-select: none;
-      line-height: 1.8;
-    }
-  }
-
-  .attachment-block-card-preview {
-    padding-right: 4px;
-    margin: auto;
-    height: 48px;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-
-    .attachment-block-card-preview-wrapper {
-      text-decoration: none;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      height: 34px;
-      width: 34px;
-      text-align: center;
-      position: relative;
-      overflow: unset;
-      margin: 0 16px;
-      cursor: pointer;
-      padding: 4px;
-      line-height: 24px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      box-sizing: border-box;
-
-      &:hover {
-        background-color: rgba(31, 35, 41, 0.08);
-        border-radius: 6px;
-      }
-
-      .attachment-block-card-preview-btn {
-        height: 20px;
-        width: 20px;
-      }
-    }
-  }
-
-  .attachment-block-card-menu {
-    position: absolute;
-    top: -46px;
-    left: 200px;
-    z-index: 86;
-    transform: translateX(-50%);
-  }
-}
-
-.attachment-block-preview-container {
-  position: relative;
-
-  .attachment-block-preview-menu {
-    position: absolute;
-    top: -46px;
-    left: 410px;
-    z-index: 86;
-    transform: translateX(-50%);
-  }
-
-  .video-block-preview-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 16px;
-
-    // --- 灰色大卡片容器 ---
-    .video-block-container {
-      // 【关键 1】作为定位锚点
-      position: relative;
-
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-      background-color: $bg-gray; // 确保有这个变量，或者用 #f9fafb
-      border: 1px solid $border-color;
-      border-radius: 12px;
-      padding: 16px;
-      margin: 16px 0;
-      transition: all 0.3s ease;
-
-      // 【关键 2】允许子元素(侧边栏)显示在盒子外部
-      overflow: visible;
-    }
-
-    .video-main-section {
-      flex: 1;
-      width: 100%;
-      min-width: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    // --- 视频播放器 ---
-    .video-player-wrapper {
-      width: 100%;
-      aspect-ratio: 16 / 9;
-      background-color: #000;
-      border-radius: 8px;
-      overflow: hidden;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-
-      .video-element {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-
-    // --- 上传状态 ---
-    .video-uploading-wrapper {
-      width: 100%;
-      aspect-ratio: 16 / 9;
-      background-color: #fff;
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: 1px dashed $border-color;
-
-      .uploading-content,
-      .error-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 8px;
-        font-size: 14px;
-        color: $text-sub;
-      }
-
-      .error-content {
-        color: #ef4444;
-      }
-
-      .spinner {
-        width: 24px;
-        height: 24px;
-        border: 2px solid #e5e7eb;
-        border-top-color: $primary-color;
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-      }
-    }
-
-    // --- 工具栏 ---
-    .video-toolbar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background: #fff;
-      padding: 12px;
-      border-radius: 8px;
-      border: 1px solid $border-color;
-
-      .toolbar-info {
-        display: flex;
-        flex-direction: column;
-
-        .toolbar-title {
-          font-weight: 500;
-          color: $text-main;
-          font-size: 14px;
-        }
-
-        .toolbar-desc {
-          font-size: 12px;
-          color: $text-sub;
-
-          @media (max-width: 380px) {
-            display: none;
-          }
-        }
-      }
-
-      .ai-toggle-btn {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 8px 16px;
-        border-radius: 6px;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        border: none;
-        background-color: $primary-color;
-        color: white;
-        -webkit-tap-highlight-color: transparent;
-
-        &:active {
-          opacity: 0.9;
-        }
-
-        &.active {
-          background-color: #eff6ff;
-          color: $primary-color;
-          border: 1px solid #bfdbfe;
-        }
-      }
-    }
-
-    // --- 【关键 3】完全位于右侧外部的 AI 面板 ---
-    .video-sidebar-section {
-      width: 100%; // 移动端默认样式
-
-      // 桌面端逻辑 (大于 768px 或根据你的布局宽度调整)
-      @media (min-width: 768px) {
-        // 1. 绝对定位
-        position: absolute;
-
-        // 2. 顶部与卡片对齐
-        top: 0;
-
-        // 3. 位于卡片右侧外部 (left: 100% 表示从容器最右边开始)
-        left: 100%;
-
-        // 4. 间距调整
-        margin-left: 16px;
-
-        // 5. 尺寸与高度 (由内容自动撑开，不强制拉伸)
-        width: 320px;
-        height: auto;
-        // max-height: 100%; // 如果你想限制高度不超过视频卡片，取消这行注释
-
-        // 6. 视觉样式 (因为它在外面，需要单独的卡片样式)
-        background-color: #fff;
-        border: 1px solid $border-color;
-        border-radius: 12px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-        padding: 0; // 如果 VideoDetail 自带 padding，这里设为 0
-        z-index: 1;
-
-        // 7. 动画
-        animation: fadeInRight 0.3s ease-out;
-      }
-    }
-
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
-
-    @keyframes fadeInRight {
-      from {
-        opacity: 0;
-        transform: translateX(-10px);
-      }
-
-      to {
-        opacity: 1;
-        transform: translateX(0);
-      }
-    }
-  }
-
-  .notVideo-block-preview-container {
-    max-width: 820px;
-    border-radius: 8px;
-    border: 1px solid #dee0e3;
-
-    .attachment-block-preview-content {
-      height: 409px;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-
-      .attachment-block-preview-iframe {
-        width: 100%;
-        height: 100%;
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
-      }
-
-      .attachment-block-preview-unable {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-
-        .attachment-block-preview-unable-img {
-          width: 120px;
-          height: 120px;
-          display: block;
-          margin-bottom: 16px;
-        }
-
-        .attachment-block-preview-unable-text {
-          font-size: 14px;
-          color: rgb(100, 106, 115);
-          margin-top: 4px;
-          line-height: 1.8;
-        }
-      }
-    }
-
-    .attachment-block-preview-footer {
-      height: 42px;
-      box-sizing: border-box;
-      padding: 0 12px;
-      display: flex;
-      align-items: center;
-      border-top: 1px solid #dee0e3;
-      background-color: #fff;
-
-      .attachment-block-preview-icon-svg {
-        width: 18px;
-        height: 18px;
-        margin-right: 8px;
-      }
-    }
-
-    .attachment-block-preview-dark-bg {
-      background-color: rgb(242, 243, 245);
-    }
-  }
-}
-</style>

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

@@ -1,90 +0,0 @@
-<template>
-  <div class="attachment-inline-container" @mouseenter="isHovered = true" @mouseleave="handleMouseLeave">
-    <component :is="icon" class="attachment-inline-icon" ref="iconRef" />
-    <span class="attachment-inline-text" ref="textRef">{{ node.attrs.fileName }}.{{ node.attrs.fileType }}</span>
-    <div class="attachment-inline-menu" v-show="isHovered" @mouseenter="handleEnterMenu">
-      <AttachmentMenu :node="node" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { nextTick, onMounted, ref } from 'vue';
-import { useAttachment } from '@datawhale/dipwap-render/utils/useAttachment';
-import type { PMAttachmentInline } from '@datawhale/dipwap-types/index';
-import AttachmentMenu from './AttachmentMenu.vue';
-
-const { node } = defineProps<{ node: PMAttachmentInline }>();
-const { icon } = useAttachment(node.attrs.fileType, node.attrs.fileSize);
-
-const textRef = ref<HTMLSpanElement | null>(null);
-
-const totalWidth = ref(`0px`);
-
-onMounted(async () => {
-  const iconWidth = 1.15 * parseFloat(getComputedStyle(document.documentElement).fontSize);
-  await nextTick();
-  if (textRef.value) {
-    totalWidth.value = `${(iconWidth + textRef.value!.offsetWidth + 2) / 2}px`;
-  }
-});
-
-// 菜单相关
-// 菜单与节点之间有缝隙，所以需要延迟关闭菜单的时间，使得鼠标在移动到菜单上时经过缝隙而不会关闭菜单
-const isHovered = ref(false); // 鼠标是否在节点上
-const timer = ref<number | null>(null);
-
-const handleMouseLeave = () => {
-  // esl
-  timer.value = setTimeout(() => {
-    isHovered.value = false;
-  }, 200) as unknown as number;
-};
-
-const handleEnterMenu = () => {
-  if (timer.value) {
-    clearTimeout(timer.value);
-    timer.value = null;
-  }
-};
-</script>
-
-<style scoped lang="scss">
-.attachment-inline-container {
-  display: inline-block;
-  height: 100%;
-  box-sizing: border-box;
-  line-height: 1.15em;
-  padding: 3px 2px;
-  position: relative;
-  cursor: pointer;
-
-  &:hover {
-    background-color: rgba(51, 109, 244, 0.1);
-    border-radius: 4px;
-  }
-
-  .attachment-inline-icon {
-    width: 1.15em;
-    height: 1.15em;
-    -webkit-transform: translateY(2px);
-    transform: translateY(2px);
-  }
-
-  .attachment-inline-text {
-    margin-left: 2px;
-    color: rgb(20, 86, 240);
-  }
-
-  .attachment-inline-loading {
-    color: rgb(119, 164, 226);
-  }
-
-  .attachment-inline-menu {
-    position: absolute;
-    top: -46px;
-    left: v-bind(totalWidth);
-    transform: translateX(-50%);
-  }
-}
-</style>