feat(components): 新增创建分类和笔记对话框及头部组件

- 新增 CreateGroupDialog 组件用于创建分类
- 新增 CreateNoteDialog 组件用于创建笔记
- 新增 HomeHeader 组件用于显示主页头部信息
- 对话框组件使用 Element Plus 样式- 头部组件包含用户操作按钮和搜索功能

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

@@ -0,0 +1,140 @@
+<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>