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>
</template>

<script setup>
import { Lock, Edit, Delete, ArrowDown, Back } 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%;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-light);
  gap: 1rem;
}

.dark-theme .preview-header {
  background-color: rgba(30, 30, 47, 0.8);
}

.preview-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
}

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

.preview-title .edit-icon {
  visibility: visible;
  opacity: 0.6;
  cursor: pointer;
}
.preview-title .edit-icon:hover {
  opacity: 1;
}

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.markdown-preview {
  flex-grow: 1;
  overflow-y: auto;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-light);
}

.dark-theme .markdown-preview {
  background-color: rgba(30, 30, 47, 0.8);
}
</style>