biji/biji-qianduan/src/components/home/NotePreview.vue

<template>
  <div class="file-preview">
    <el-header class="preview-header">
      <h2 class="preview-title">
        <span>{{ file.title }}</span>
        <el-icon v-if="file.isPrivate === 1" class="lock-icon"><Lock /></el-icon>
        <el-icon class="edit-icon" @click="$emit('open-rename-dialog', file, 'file')"><Edit /></el-icon>
      </h2>
      <div class="actions">
        <el-button :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="primary" @click="$emit('back')">
          <el-icon v-if="isMobile"><Back /></el-icon>
          <span v-else>返回</span>
        </el-button>
        <el-button v-if="isUserLoggedIn && !isMobile" type="warning" @click="$emit('show-move-note-dialog')">移动</el-button>
        <el-button v-if="isUserLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="primary" @click="$emit('edit')">
          <el-icon v-if="isMobile"><Edit /></el-icon>
          <span v-else>编辑</span>
        </el-button>
        <el-button v-if="isUserLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="danger" @click="$emit('delete')">
          <el-icon v-if="isMobile"><Delete /></el-icon>
          <span v-else>删除</span>
        </el-button>
        <el-button v-if="isUserLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="info" @click="$emit('show-privacy-dialog')">
          <el-icon v-if="isMobile"><Lock /></el-icon>
          <span v-else>{{ file.isPrivate === 1 ? '设为公开' : '设为私密' }}</span>
        </el-button>
        <el-dropdown v-if="isUserLoggedIn && !isMobile" @command="handleExport">
          <el-button type="success">
            导出<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="md">导出为 .md</el-dropdown-item>
              <el-dropdown-item command="pdf">导出为 .pdf</el-dropdown-item>
              <el-dropdown-item command="html">导出为 .html</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <div :key="file.id" class="markdown-preview">
      <!-- Content is rendered by Vditor.preview in the parent -->
    </div>
    <!-- 加载状态遮罩 -->
    <div v-if="file.isLoading" class="content-loading">
      <el-icon class="loading-icon is-loading"><Loading /></el-icon>
      <span class="loading-text">内容加载中...</span>
    </div>
    <!-- 渲染状态遮罩 -->
    <div v-else-if="file.isRendering" class="content-loading">
      <el-icon class="loading-icon is-loading"><Loading /></el-icon>
      <span class="loading-text">正在渲染...</span>
    </div>
  </div>
</template>

<script setup>
import { Lock, Edit, Delete, ArrowDown, Back, Loading } from '@element-plus/icons-vue';

const props = defineProps({
  file: {
    type: Object,
    required: true,
  },
  isMobile: Boolean,
  isUserLoggedIn: Boolean,
});

const emit = defineEmits([
  'back',
  'edit',
  'delete',
  'open-rename-dialog',
  'show-move-note-dialog',
  'show-privacy-dialog',
  'export'
]);

const handleExport = (format) => {
  emit('export', format);
};
</script>

<style scoped>
.file-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background-color: #ffffff;
  border-radius: var(--border-radius);
  border: 1px solid #e4e7ed;
  gap: 1rem;
  flex-shrink: 0;
}

.dark-theme .preview-header {
  background-color: #1e1e2f;
  border-color: #2c2c3d;
}

.preview-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.1rem;
}

.preview-title span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-title .edit-icon {
  opacity: 0.5;
  cursor: pointer;
  font-size: 16px;
}
.preview-title .edit-icon:hover {
  opacity: 1;
}

.actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.markdown-preview {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem;
  background-color: #ffffff;
  border-radius: var(--border-radius);
  border: 1px solid #e4e7ed;
  will-change: scroll-position;
}

.dark-theme .markdown-preview {
  background-color: #1e1e2f;
  border-color: #2c2c3d;
}

/* 优化滚动性能 */
.markdown-preview::-webkit-scrollbar {
  width: 8px;
}

.markdown-preview::-webkit-scrollbar-track {
  background: transparent;
}

.markdown-preview::-webkit-scrollbar-thumb {
  background-color: #c0c4cc;
  border-radius: 4px;
}

.markdown-preview::-webkit-scrollbar-thumb:hover {
  background-color: #909399;
}

/* 加载状态 */
.content-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--el-color-primary);
}

.loading-icon {
  font-size: 32px;
}

.loading-text {
  font-size: 14px;
  color: var(--text-color-secondary);
}
</style>