knowledge_web/apps/web-naive/src/views/datasets/documents/steps/SegmentPreview.vue

<script setup lang="ts">
import { NFlex, NList, NListItem, NTag, NText } from 'naive-ui';
import Page from '../../../../../../../packages/effects/common-ui/src/components/page/page.vue';

export interface PreviewChunk {
  id: number;
  chars: number;
  content: string;
}

export interface PreviewFile {
  name: string;
  timeAgo: string;
  chunks: PreviewChunk[];
}

const props = withDefaults(defineProps<{ file?: PreviewFile }>(), {
  file: () => ({
    name: '16种时态.markdown',
    timeAgo: '1分钟前',
    chunks: [
      {
        id: 1,
        chars: 89,
        content:
          '好的，这种分类方式更直观，面事朋友从"时可"这个维度来理解和记忆时态。我们可以把16种时态归纳为四大类：**现在**、**过去**、**将来**和**过去的将来**。',
      },
      { id: 2, chars: 3, content: '---' },
      {
        id: 3,
        chars: 62,
        content:
          '一、现在（Present）这类时态着重与**现在**这个时间点相关，包括可能性动作、正在发生的动作、以及对现在有影响的动作。',
      },
      {
        id: 4,
        chars: 638,
        content:
          '**一般现在时（Simple Present Tense）** **用法：** 描述习惯、事实、真理。 **例句：** I **go** to the gym every morning.（我每天早上都去健身房。）**现在进行时（Present Continuous Tense）** **用法：** 描述正在发生、或最近一段时间正在进行的动作。 **例句：** He **is studying** for his exam right now.（他现在正在准备考试。）**现在完成时（Present Perfect Tense）** **用法：** 描述过去发生但对现在有影响的动作。 **例句：** I **have lost** my phone.（我把手机弄丢了，所以现在没有手机。）**现在完成进行时（Present Perfect Continuous Tense）** **用法：** 描述从过去开始持续到现在，且可能还在继续的动作。 **例句：** It **has been raining** for two hours.（雨已经下了两个小时了，且目还在下。）',
      },
      { id: 5, chars: 3, content: '---' },
      {
        id: 6,
        chars: 60,
        content:
          '二、过去（Past）这类时态都用来描述"过去"发生的动作或状态，有明确时间段，也有在另一个过去之事发生的动作。',
      },
      {
        id: 1,
        chars: 89,
        content:
          '好的，这种分类方式更直观，面事朋友从"时可"这个维度来理解和记忆时态。我们可以把16种时态归纳为四大类：**现在**、**过去**、**将来**和**过去的将来**。',
      },
      { id: 2, chars: 3, content: '---' },
      {
        id: 3,
        chars: 62,
        content:
          '一、现在（Present）这类时态着重与**现在**这个时间点相关，包括可能性动作、正在发生的动作、以及对现在有影响的动作。',
      },
      {
        id: 4,
        chars: 638,
        content:
          '**一般现在时（Simple Present Tense）** **用法：** 描述习惯、事实、真理。 **例句：** I **go** to the gym every morning.（我每天早上都去健身房。）**现在进行时（Present Continuous Tense）** **用法：** 描述正在发生、或最近一段时间正在进行的动作。 **例句：** He **is studying** for his exam right now.（他现在正在准备考试。）**现在完成时（Present Perfect Tense）** **用法：** 描述过去发生但对现在有影响的动作。 **例句：** I **have lost** my phone.（我把手机弄丢了，所以现在没有手机。）**现在完成进行时（Present Perfect Continuous Tense）** **用法：** 描述从过去开始持续到现在，且可能还在继续的动作。 **例句：** It **has been raining** for two hours.（雨已经下了两个小时了，且目还在下。）',
      },
      { id: 5, chars: 3, content: '---' },
      {
        id: 6,
        chars: 60,
        content:
          '二、过去（Past）这类时态都用来描述"过去"发生的动作或状态，有明确时间段，也有在另一个过去之事发生的动作。',
      },
      {
        id: 1,
        chars: 89,
        content:
          '好的，这种分类方式更直观，面事朋友从"时可"这个维度来理解和记忆时态。我们可以把16种时态归纳为四大类：**现在**、**过去**、**将来**和**过去的将来**。',
      },
      { id: 2, chars: 3, content: '---' },
      {
        id: 3,
        chars: 62,
        content:
          '一、现在（Present）这类时态着重与**现在**这个时间点相关，包括可能性动作、正在发生的动作、以及对现在有影响的动作。',
      },
      {
        id: 4,
        chars: 638,
        content:
          '**一般现在时（Simple Present Tense）** **用法：** 描述习惯、事实、真理。 **例句：** I **go** to the gym every morning.（我每天早上都去健身房。）**现在进行时（Present Continuous Tense）** **用法：** 描述正在发生、或最近一段时间正在进行的动作。 **例句：** He **is studying** for his exam right now.（他现在正在准备考试。）**现在完成时（Present Perfect Tense）** **用法：** 描述过去发生但对现在有影响的动作。 **例句：** I **have lost** my phone.（我把手机弄丢了，所以现在没有手机。）**现在完成进行时（Present Perfect Continuous Tense）** **用法：** 描述从过去开始持续到现在，且可能还在继续的动作。 **例句：** It **has been raining** for two hours.（雨已经下了两个小时了，且目还在下。）',
      },
      { id: 5, chars: 3, content: '---' },
      {
        id: 6,
        chars: 60,
        content:
          '二、过去（Past）这类时态都用来描述"过去"发生的动作或状态，有明确时间段，也有在另一个过去之事发生的动作。',
      },
    ],
  }),
});
</script>

<template>
  <NFlex vertical style="flex: 1; height: 100%">
    <!-- 文件信息 -->
    <NFlex align="center" :gap="8" style="margin-bottom: 16px">
      <NTag size="small" type="info">预览</NTag>
      <NText style="font-size: 13px">{{ props.file.name }}</NText>
      <NText depth="3" style="font-size: 12px">{{ props.file.timeAgo }}</NText>
    </NFlex>

    <!-- 分块列表 -->
    <NList :show-divider="false" style="flex: 1; overflow-y: auto">
      <NListItem v-for="chunk in props.file.chunks" :key="chunk.id">
        <NFlex vertical>
          <NFlex align="center">
            <NTag size="tiny" type="default">Chunk-{{ chunk.id }}</NTag>
            <NText depth="3" style="font-size: 11px">{{ chunk.chars }} characters</NText>
          </NFlex>
          <NText style="font-size: 13px; line-height: 1.7; white-space: pre-wrap">
            {{ chunk.content }}
          </NText>
        </NFlex>
      </NListItem>
    </NList>
  </NFlex>
</template>