@datawhale/prosemirror-render 0.0.1 → 0.0.3

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

@@ -1,375 +0,0 @@
-<template>
-  <div class="ai-panel">
-    <div class="panel-header">
-      <div class="header-title">
-        <span class="icon">🤖</span>
-        <span>智能分析结果</span>
-      </div>
-      <button class="close-btn" @click="$emit('close')" title="关闭助手">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-      </button>
-    </div>
-
-    <div v-if="loading" class="panel-loading">
-      <div class="spinner"></div>
-      <p>正在生成分析结果...</p>
-    </div>
-
-    <div v-else-if="error" class="panel-error">
-      {{ error }}
-    </div>
-
-    <div v-else class="panel-content">
-      <div class="content-card summary-card" v-if="analysis?.summary">
-        <div class="card-header">
-          <span class="card-title">全文摘要</span>
-        </div>
-        <div class="summary-text" :class="{ expanded: isExpanded }">
-          {{ analysis.summary }}
-        </div>
-        <div class="expand-btn" v-if="analysis.summary.length > 100" @click="isExpanded = !isExpanded">
-          {{ isExpanded ? '收起' : '展开全文' }}
-        </div>
-      </div>
-
-      <div class="content-card chapters-card">
-        <div class="card-header">
-          <span class="card-title">章节速览</span>
-          <span class="badge">{{ analysis?.chapters?.length || 0 }}</span>
-        </div>
-
-        <div class="chapter-list">
-          <div v-for="(chapter, index) in analysis?.chapters || []" :key="index" class="chapter-item"
-            @click="seekToChapter(chapter)">
-            <div class="chapter-index">{{ index + 1 }}</div>
-            <div class="chapter-info">
-              <div class="chapter-title">{{ chapter.title }}</div>
-              <div class="chapter-time">
-                <i class="icon-time">🕒</i>
-                {{ formatTime(chapter.startTime) }} - {{ formatTime(chapter.endTime) }}
-              </div>
-            </div>
-          </div>
-
-          <div v-if="!analysis?.chapters || analysis.chapters.length === 0" class="empty-state">暂无章节信息</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject, onMounted, ref } from 'vue';
-import { monitorApi } from '@datawhale/dipwap-render/apis/monitor';
-import { videoProgressDetailApi } from '@datawhale/dipwap-render/apis/tingwu';
-import { axiosKey } from '@datawhale/dipwap-render/apis/types';
-
-// 接口定义
-interface Chapter {
-  title: string;
-  startTime: number;
-  endTime: number;
-}
-interface Analysis {
-  summary?: string;
-  chapters?: Chapter[];
-}
-
-const props = defineProps<{
-  taskId: string;
-  videoRef: HTMLVideoElement | null;
-}>();
-
-const loading = ref(false);
-const error = ref('');
-const analysis = ref<Analysis | null>(null);
-const isExpanded = ref(false);
-
-const service = inject(axiosKey);
-
-const loadAnalysis = async () => {
-  if (!props.taskId) return;
-  if (!service) return;
-  loading.value = true;
-  try {
-    // @ts-ignore
-    const data = await videoProgressDetailApi(service, { taskId: props.taskId });
-    analysis.value = {
-      summary: data.summary,
-      chapters: JSON.parse(data.chapters) as { title: string; startTime: number; endTime: number }[],
-    };
-    loading.value = false;
-  } catch (e) {
-    error.value = '加载失败';
-    loading.value = false;
-    console.error(e);
-  }
-};
-
-const seekToChapter = async (chapter: Chapter) => {
-  if (props.videoRef) {
-    props.videoRef.currentTime = chapter.startTime;
-    void props.videoRef.play();
-  }
-  if (service) {
-    // @ts-ignore
-    await monitorApi(service, {
-      log: JSON.stringify({
-        name: 'toggleVideoAiPanelSidebar',
-        chapterTitle: chapter.title,
-        tingwuTaskId: props.taskId,
-        videoPageUrl: window.location.href,
-      }),
-    });
-  }
-};
-
-const formatTime = (seconds: number) => {
-  const m = Math.floor(seconds / 60);
-  const s = Math.floor(seconds % 60);
-  return `${m}:${s.toString().padStart(2, '0')}`;
-};
-
-onMounted(async () => {
-  await loadAnalysis();
-});
-</script>
-
-<style lang="scss" scoped>
-$primary-color: #2563eb;
-$border-color: #e5e7eb;
-$bg-white: #ffffff;
-$text-main: #111827;
-$text-sub: #6b7280;
-$hover-bg: #f3f4f6;
-
-.ai-panel {
-  background: $bg-white;
-  border-radius: 8px;
-  border: 1px solid $border-color;
-  height: 100%;
-  max-height: 500px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-.panel-header {
-  padding: 12px 16px;
-  background-color: #eff6ff;
-  border-bottom: 1px solid #bfdbfe;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .header-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #1e40af;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  // 新增：关闭按钮样式
-  .close-btn {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    color: #60a5fa; // 浅蓝色
-    padding: 4px;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s;
-    width: 24px;
-    height: 24px;
-
-    svg {
-      width: 18px;
-      height: 18px;
-    }
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.5);
-      color: #1e40af; // 深蓝色
-    }
-  }
-}
-
-// ... 后面的样式保持不变 ...
-.panel-loading,
-.panel-error {
-  padding: 32px;
-  text-align: center;
-  color: $text-sub;
-  font-size: 13px;
-
-  .spinner {
-    width: 20px;
-    height: 20px;
-    border: 2px solid $border-color;
-    border-top-color: $primary-color;
-    border-radius: 50%;
-    margin: 0 auto 12px;
-    animation: spin 1s linear infinite;
-  }
-}
-
-.panel-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #d1d5db;
-    border-radius: 2px;
-  }
-}
-
-.content-card {
-  padding: 16px;
-  border-bottom: 1px solid $border-color;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-
-    .card-title {
-      font-size: 13px;
-      font-weight: 700;
-      color: $text-sub;
-      text-transform: uppercase;
-    }
-
-    .badge {
-      font-size: 12px;
-      background: $hover-bg;
-      padding: 2px 6px;
-      border-radius: 4px;
-      color: $text-sub;
-    }
-  }
-}
-
-.summary-card {
-  .summary-text {
-    font-size: 14px;
-    line-height: 1.6;
-    color: #374151;
-    text-align: justify;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-
-    &.expanded {
-      -webkit-line-clamp: unset;
-      overflow: visible;
-    }
-  }
-
-  .expand-btn {
-    margin-top: 8px;
-    font-size: 12px;
-    color: $primary-color;
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-.chapter-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.chapter-item {
-  display: flex;
-  gap: 12px;
-  padding: 8px;
-  border-radius: 6px;
-  cursor: pointer;
-  border: 1px solid transparent;
-  transition: all 0.2s;
-
-  &:hover {
-    background-color: $hover-bg;
-    border-color: $border-color;
-
-    .chapter-index {
-      background-color: white;
-      color: $primary-color;
-    }
-
-    .chapter-title {
-      color: $primary-color;
-    }
-  }
-
-  .chapter-index {
-    width: 20px;
-    height: 20px;
-    background-color: #dbeafe;
-    color: $primary-color;
-    font-size: 11px;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    flex-shrink: 0;
-    margin-top: 2px;
-  }
-
-  .chapter-info {
-    flex: 1;
-    min-width: 0;
-
-    .chapter-title {
-      font-size: 14px;
-      font-weight: 500;
-      color: #374151;
-      margin-bottom: 4px;
-    }
-
-    .chapter-time {
-      font-size: 12px;
-      color: #9ca3af;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-  }
-}
-
-.empty-state {
-  text-align: center;
-  color: #9ca3af;
-  font-size: 13px;
-  padding: 12px 0;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>

package/src/components/collections/attachment/index.ts

@@ -1,6 +0,0 @@
-import { customDefineAsyncComponent } from '../utils';
-
-export const attachmentMapper: Record<string, any> = {
-  'attachment-inline': customDefineAsyncComponent(() => import('./AttachmentInline.vue')),
-  'attachment-block': customDefineAsyncComponent(() => import('./AttachmentBlock.vue')),
-};

package/src/components/collections/basic/Blockquote.vue

@@ -1,15 +0,0 @@
-<template>
-  <blockquote>
-    <slot />
-  </blockquote>
-</template>
-
-<script setup lang="ts">
-import type { PMBlockquote } from '@datawhale/dipwap-types/index';
-
-defineProps<{
-  node: PMBlockquote;
-}>();
-</script>
-
-<style scoped></style>

package/src/components/collections/basic/BulletList.vue

@@ -1,15 +0,0 @@
-<template>
-  <ul>
-    <slot />
-  </ul>
-</template>
-
-<script setup lang="ts">
-import type { PMBulletList } from '@datawhale/dipwap-types/index';
-
-defineProps<{
-  node: PMBulletList;
-}>();
-</script>
-
-<style scoped></style>

package/src/components/collections/basic/HardBreak.vue

@@ -1,11 +0,0 @@
-<template>
-  <br />
-</template>
-
-<script setup lang="ts">
-import type { PMHardBreak } from '@datawhale/dipwap-types/index';
-
-defineProps<{
-  node: PMHardBreak;
-}>();
-</script>

package/src/components/collections/basic/Heading.vue

@@ -1,15 +0,0 @@
-<template>
-  <component :id="node.attrs.id" :is="`h${node.attrs.level}`" class="heading">
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import type { PMHeading } from '@datawhale/dipwap-types/index';
-
-defineProps<{
-  node: PMHeading;
-}>();
-</script>
-
-<style scoped></style>

package/src/components/collections/basic/HorizontalRule.vue

@@ -1,11 +0,0 @@
-<template>
-  <hr />
-</template>
-
-<script setup lang="ts">
-import type { PMThematicBreak } from '@datawhale/dipwap-types/index';
-
-defineProps<{
-  node: PMThematicBreak;
-}>();
-</script>

package/src/components/collections/basic/ListItem.vue

@@ -1,15 +0,0 @@
-<template>
-  <li>
-    <slot />
-  </li>
-</template>
-
-<script setup lang="ts">
-import type { PMListItem } from '@datawhale/dipwap-types/index';
-
-defineProps<{
-  node: PMListItem;
-}>();
-</script>
-
-<style scoped></style>

package/src/components/collections/basic/OrderedList.vue

@@ -1,15 +0,0 @@
-<template>
-  <ol :start="node.attrs.start">
-    <slot />
-  </ol>
-</template>
-
-<script setup lang="ts">
-import type { PMOrderedList } from '@datawhale/dipwap-types/index';
-
-defineProps<{
-  node: PMOrderedList;
-}>();
-</script>
-
-<style scoped></style>

package/src/components/collections/basic/Paragraph.vue

@@ -1,19 +0,0 @@
-<template>
-  <p class="paragraph">
-    <slot />
-  </p>
-</template>
-
-<script setup lang="ts">
-import type { PMParagraph } from '@datawhale/dipwap-types/index';
-
-defineProps<{
-  node: PMParagraph;
-}>();
-</script>
-
-<style scoped>
-p:empty::before {
-  content: '\00a0';
-}
-</style>

package/src/components/collections/basic/Text.vue

@@ -1,73 +0,0 @@
-<template>
-  <template v-if="node.marks?.length && currentMarkType">
-    <!-- 每次取第0个mark渲染对应的标签 -->
-    <!-- 再取除了第0个以外的其他marks，再加上其他属性，递归地传至下一层 -->
-    <component
-      v-if="currentMarkType === 'link'"
-      :is="currentHTMLType"
-      :target="(currentMark as LinkMark).attrs?.href"
-      :href="(currentMark as LinkMark).attrs?.href"
-      :class="(currentMark as LinkMark).attrs?.class"
-      :rel="(currentMark as LinkMark).attrs?.rel"
-    >
-      <Text :node="{ ...node, marks: node.marks?.slice(1) }" />
-    </component>
-    <component
-      v-else-if="currentMarkType === 'highlight'"
-      :is="currentHTMLType"
-      :style="{
-        ...(currentMark as HighlightMark).attrs,
-        color: null,
-        'background-color': (currentMark as HighlightMark).attrs.color,
-      }"
-    >
-      <Text :node="{ ...node, marks: node.marks?.slice(1) }" />
-    </component>
-    <component
-      v-else-if="currentMarkType === 'textStyle'"
-      :is="currentHTMLType"
-      :style="(currentMark as TextStyleMark).attrs ?? null"
-    >
-      <Text :node="{ ...node, marks: node.marks?.slice(1) }" />
-    </component>
-    <component v-else :is="currentHTMLType">
-      <Text :node="{ ...node, marks: node.marks?.slice(1) }" />
-    </component>
-  </template>
-  <SlotNode v-else>
-    {{ node.text }}
-  </SlotNode>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { HighlightMark, LinkMark, PMText, TextStyleMark } from '@datawhale/dipwap-types/index';
-import SlotNode from '../wrapper/SlotNode.vue';
-
-const { node } = defineProps<{
-  node: PMText;
-}>();
-
-const currentMark = computed(() => {
-  return node.marks?.[0];
-});
-
-const currentMarkType = computed(() => {
-  return currentMark.value?.type;
-});
-
-const currentHTMLType = computed(() => {
-  return nodeTypeMap[currentMark.value?.type as keyof typeof nodeTypeMap];
-});
-
-const nodeTypeMap = {
-  bold: 'strong',
-  italic: 'em',
-  underline: 'u',
-  strike: 's',
-  highlight: 'mark',
-  textStyle: 'span',
-  link: 'a',
-  code: 'code',
-};
-</script>

package/src/components/collections/basic/index.ts

@@ -1,13 +0,0 @@
-import { customDefineAsyncComponent } from '../utils';
-
-export const basicMapper: Record<string, any> = {
-  text: customDefineAsyncComponent(() => import('./Text.vue')),
-  paragraph: customDefineAsyncComponent(() => import('./Paragraph.vue')),
-  heading: customDefineAsyncComponent(() => import('./Heading.vue')),
-  orderedList: customDefineAsyncComponent(() => import('./OrderedList.vue')),
-  bulletList: customDefineAsyncComponent(() => import('./BulletList.vue')),
-  listItem: customDefineAsyncComponent(() => import('./ListItem.vue')),
-  horizontalRule: customDefineAsyncComponent(() => import('./HorizontalRule.vue')),
-  blockquote: customDefineAsyncComponent(() => import('./Blockquote.vue')),
-  hardBreak: customDefineAsyncComponent(() => import('./HardBreak.vue')),
-};

package/src/components/collections/callout/Callout.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="callout-wrapper" :style="{ backgroundColor: node.attrs.bgColor, borderColor: node.attrs.bdColor }">
-    <div class="callout-icon">
-      {{ node.attrs.emoji ? EMOJI_MAP[node.attrs.emoji] : EMOJI_MAP['whale'] }}
-    </div>
-    <div class="callout-content">
-      <div class="node-view-content">
-        <TreeRecursive v-for="child in node.content" :node="child" :key="useId()" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useId } from 'vue';
-import TreeRecursive from '@datawhale/dipwap-render/components/TreeRecursive.vue';
-import { EMOJI_MAP } from '@datawhale/dipwap-render/utils/emoji';
-import type { PMLarkCallout } from '@datawhale/dipwap-types/index';
-
-const { node } = defineProps<{
-  node: PMLarkCallout;
-}>();
-</script>
-
-<style scoped lang="scss">
-.callout-wrapper {
-  position: relative;
-  margin: 16px 0;
-  padding: 16px;
-  border-radius: 6px;
-  display: flex;
-  flex-direction: row;
-  border-width: 1.5px;
-  border-style: solid;
-  .callout-icon {
-    font-size: 22px;
-    width: 26px;
-    height: 26px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: default;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.1);
-      border-radius: 4px;
-    }
-  }
-  .callout-content {
-    padding-left: 12px;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
-    overflow-x: auto;
-    .node-view-content {
-      width: 100%;
-      & > :deep(*:first-child),
-      & > :deep(ul > li:first-child),
-      & > :deep(ul > li:first-child > p:first-child),
-      & > :deep(ol > li:first-child),
-      & > :deep(ol > li:first-child > p:first-child),
-      & > :deep(div:first-child > pre) {
-        margin-top: 0;
-      }
-      & > :deep(*:last-child),
-      & > :deep(ul > li:last-child),
-      & > :deep(ul > li:last-child > p:last-child),
-      & > :deep(ol > li:last-child),
-      & > :deep(ol > li:last-child > p:last-child),
-      & > :deep(div:last-child > pre) {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-</style>

package/src/components/collections/callout/index.ts

@@ -1,5 +0,0 @@
-import { customDefineAsyncComponent } from '../utils';
-
-export const calloutMapper: Record<string, any> = {
-  callout: customDefineAsyncComponent(() => import('./Callout.vue')),
-};