From 2a507659c26a35d8b026cb38349e061b60e960f8 Mon Sep 17 00:00:00 2001
From: ikmkj <1@qq,com>
Date: Wed, 6 Aug 2025 23:02:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=90=8D=E5=A4=A7=E5=B0=8F=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 biji-qianduan/src/components/HomePage.vue | 1437 ++++++++++++++++++++-
 mydatabase.db                             |  Bin 73728 -> 73728 bytes
 2 files changed, 1427 insertions(+), 10 deletions(-)

diff --git a/biji-qianduan/src/components/HomePage.vue b/biji-qianduan/src/components/HomePage.vue
index b005ea9..09c8579 100644
--- a/biji-qianduan/src/components/HomePage.vue
+++ b/biji-qianduan/src/components/HomePage.vue
@@ -16,11 +16,11 @@
       </div>
 
       <el-menu
-        :default-active="activeMenu"
-        class="el-menu-vertical-demo"
-        :collapse="isCollapsed"
-        popper-effect="light"
-        :collapse-transition="false"
+          :default-active="activeMenu"
+          class="el-menu-vertical-demo"
+          :collapse="isCollapsed"
+          popper-effect="light"
+          :collapse-transition="false"
       >
         <!-- 递归菜单组件 -->
         <template v-for="menu in categoryTree" :key="menu.id">
@@ -80,9 +80,1426 @@
             <h1 @click="resetToHomeView" style="cursor: pointer; flex-grow: 1;">我的笔记</h1>
             <div class="actions">
               <el-input
-                v-model="searchKeyword"
-                placeholder="搜索笔记标题"
-                class="search-input"
-                @keyup.enter="handleSearch"
+                  v-model="searchKeyword"
+                  placeholder="搜索笔记标题"
+                  class="search-input"
+                  @keyup.enter="handleSearch"
               >
-                <template #append
\ No newline at end of file
+                <template #append>
+                  <el-button @click="handleSearch">
+                    <el-icon><Search /></el-icon>
+                  </el-button>
+                </template>
+              </el-input>
+              <div v-if="userStore.isLoggedIn" class="user-actions">
+                <span class="welcome-text">欢迎, {{ userStore.userInfo?.username }}</span>
+                <el-button type="danger" @click="handleLogout">退出</el-button>
+                <el-button type="primary" @click="showUpdatePasswordDialog = true">修改密码</el-button>
+                <el-button type="warning" @click="showSystemSettingsDialog = true">系统管理</el-button>
+                <el-button type="primary" @click="showCreateNoteDialog = true">新建笔记</el-button>
+                <el-upload
+                    class="upload-btn"
+                    action=""
+                    :show-file-list="false"
+                    :before-upload="handleMarkdownUpload"
+                    accept=".md"
+                >
+                  <el-button type="success">上传Markdown</el-button>
+                </el-upload>
+              </div>
+              <div v-else class="guest-actions">
+                <el-button type="primary" @click="goToLogin">登录</el-button>
+                <el-button @click="goToRegister">注册</el-button>
+              </div>
+            </div>
+          </el-header>
+
+          <div v-if="groupMarkdownFiles.length > 0" class="file-list">
+            <el-card v-for="file in groupMarkdownFiles" :key="file.id" shadow="hover" class="file-item" :class="{ 'private-note': file.isPrivate === 1 }">
+              <div @click="previewFile(file)" class="file-title">
+                <span>{{ file.title }}</span>
+                <span class="file-group-name">{{ file.groupingName }}</span>
+                <el-icon v-if="file.isPrivate === 1 && !userStore.isLoggedIn" class="lock-icon"><Lock /></el-icon>
+              </div>
+            </el-card>
+          </div>
+          <el-empty v-else description="暂无笔记，请创建或上传" />
+        </div>
+
+        <!-- 分类创建对话框 -->
+        <el-dialog v-model="showCreateGroupDialog" title="新建分类" width="400px" @close="resetGroupForm">
+          <el-form :model="newGroupForm" :rules="groupFormRules" ref="groupFormRef" label-width="80px">
+            <el-form-item label="父级分类">
+              <el-cascader
+                  v-model="newGroupForm.parentId"
+                  :options="categoryCascaderOptions"
+                  :props="{ checkStrictly: true, emitPath: false }"
+                  clearable
+                  placeholder="不选则为一级分类"
+                  style="width: 100%;"
+              ></el-cascader>
+            </el-form-item>
+            <el-form-item label="分类名称" prop="name">
+              <el-input v-model="newGroupForm.name" autocomplete="off"></el-input>
+            </el-form-item>
+          </el-form>
+          <template #footer>
+            <el-button @click="showCreateGroupDialog = false">取消</el-button>
+            <el-button type="primary" @click="createGrouping">确定</el-button>
+          </template>
+        </el-dialog>
+
+        <!-- 笔记创建对话框 -->
+        <el-dialog v-model="showCreateNoteDialog" title="新建笔记" width="400px" @close="resetNoteForm">
+          <el-form :model="newNoteForm" :rules="noteFormRules" ref="noteFormRef" label-width="80px">
+            <el-form-item label="笔记标题" prop="title">
+              <el-input v-model="newNoteForm.title" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="选择分类" prop="groupingId">
+              <el-cascader
+                  v-model="newNoteForm.groupingId"
+                  :options="categoryTree"
+                  :props="{ checkStrictly: true, emitPath: false }"
+                  clearable
+                  placeholder="请选择笔记所属分类"
+                  style="width: 100%;"
+              ></el-cascader>
+            </el-form-item>
+            <el-form-item label="私密笔记">
+              <el-switch
+                  v-model="newNoteForm.isPrivate"
+                  :active-value="1"
+                  :inactive-value="0"
+                  active-text="私密"
+                  inactive-text="公开"
+              />
+              <div class="form-item-help">私密笔记只有登录用户才能查看内容</div>
+            </el-form-item>
+          </el-form>
+          <template #footer>
+            <el-button @click="showCreateNoteDialog = false">取消</el-button>
+            <el-button type="primary" @click="createNote">确定</el-button>
+          </template>
+        </el-dialog>
+
+        <!-- 重命名对话框 -->
+        <el-dialog v-model="showRenameDialog" title="重命名" width="400px">
+          <el-input v-model="newName" placeholder="请输入新名称"></el-input>
+          <template #footer>
+            <el-button @click="showRenameDialog = false">取消</el-button>
+            <el-button type="primary" @click="handleRename">确定</el-button>
+          </template>
+        </el-dialog>
+
+        <!-- 导入选择分类对话框 -->
+        <el-dialog v-model="showSelectGroupDialog" title="选择导入的分类" width="400px">
+          <el-cascader
+              v-model="importGroupId"
+              :options="categoryTree"
+              :props="{ checkStrictly: true, emitPath: false }"
+              clearable
+              placeholder="请选择要导入的分类"
+              style="width: 100%;"
+          ></el-cascader>
+          <template #footer>
+            <el-button @click="showSelectGroupDialog = false">取消</el-button>
+            <el-button type="primary" @click="confirmImport">确定</el-button>
+          </template>
+        </el-dialog>
+
+        <!-- 移动笔记对话框 -->
+        <el-dialog v-model="showMoveNoteDialog" title="移动笔记到" width="400px">
+          <el-cascader
+              v-model="moveToGroupId"
+              :options="categoryTree"
+              :props="{ checkStrictly: true, emitPath: false }"
+              clearable
+              placeholder="请选择目标分类"
+              style="width: 100%;"
+          ></el-cascader>
+          <template #footer>
+            <el-button @click="showMoveNoteDialog = false">取消</el-button>
+            <el-button type="primary" @click="handleMoveNote">确定</el-button>
+          </template>
+        </el-dialog>
+
+        <!-- 系统管理对话框 -->
+        <el-dialog v-model="showSystemSettingsDialog" title="系统管理" width="500px">
+          <el-form label-width="120px">
+            <el-form-item label="开放注册">
+              <el-switch v-model="isRegistrationEnabled" @change="handleToggleRegistration"></el-switch>
+            </el-form-item>
+            <el-form-item label="生成注册码">
+              <el-button type="primary" @click="handleGenerateCode">生成</el-button>
+            </el-form-item>
+            <el-form-item v-if="generatedCode" label="新注册码">
+              <el-input v-model="generatedCode" readonly>
+                <template #append>
+                  <el-button @click="copyToClipboard(generatedCode)">复制</el-button>
+                </template>
+              </el-input>
+            </el-form-item>
+          </el-form>
+          <template #footer>
+            <el-button @click="showSystemSettingsDialog = false">关闭</el-button>
+          </template>
+        </el-dialog>
+
+        <!-- 修改密码对话框 -->
+        <el-dialog v-model="showUpdatePasswordDialog" title="修改密码" width="400px" @close="resetUpdatePasswordForm">
+          <el-form :model="updatePasswordForm" :rules="updatePasswordFormRules" ref="updatePasswordFormRef" label-width="100px">
+            <el-form-item label="旧密码" prop="oldPassword">
+              <el-input v-model="updatePasswordForm.oldPassword" type="password" show-password autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="新密码" prop="newPassword">
+              <el-input v-model="updatePasswordForm.newPassword" type="password" show-password autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="确认新密码" prop="confirmPassword">
+              <el-input v-model="updatePasswordForm.confirmPassword" type="password" show-password autocomplete="off"></el-input>
+            </el-form-item>
+          </el-form>
+          <template #footer>
+            <el-button @click="showUpdatePasswordDialog = false">取消</el-button>
+            <el-button type="primary" @click="handleUpdatePassword">确定</el-button>
+          </template>
+        </el-dialog>
+
+        <!-- 修改笔记私密状态对话框 -->
+        <el-dialog v-model="showPrivacyDialog" :title="selectedFile && selectedFile.isPrivate === 1 ? '设为公开笔记' : '设为私密笔记'" width="400px">
+          <div v-if="selectedFile">
+            <p>您确定要将笔记 <strong>"{{ selectedFile.title }}"</strong> {{ selectedFile.isPrivate === 1 ? '设为公开' : '设为私密' }}吗？</p>
+            <div class="privacy-explanation">
+              <el-icon><InfoFilled /></el-icon>
+              <span>{{ selectedFile.isPrivate === 1 ? '公开笔记：所有用户都可以查看内容' : '私密笔记：只有登录用户才能查看内容' }}</span>
+            </div>
+          </div>
+          <template #footer>
+            <el-button @click="showPrivacyDialog = false">取消</el-button>
+            <el-button type="primary" @click="handlePrivacyChange">确定</el-button>
+          </template>
+        </el-dialog>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup>
+import {onMounted, ref, nextTick, watch, h, computed} from 'vue';
+import {ElMessage, ElSubMenu, ElMenuItem, ElIcon, ElMessageBox, ElTooltip} from 'element-plus';
+import Vditor from 'vditor';
+import 'vditor/dist/index.css';
+import {
+  addGroupings,
+  deleteImages, deleteMarkdown,
+  groupingAll,
+  markdownAll, markdownList,
+  Preview,
+  updateMarkdown, uploadImage,
+  searchMarkdown,
+  updateGroupingName,
+  updateMarkdownTitle,
+  deleteGrouping as apiDeleteGrouping,
+  getRecentFiles,
+  validateToken,
+  getRegistrationStatus,
+  toggleRegistration,
+  generateRegistrationCode,
+  updatePassword
+} from '@/api/CommonApi.js'
+import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled } from "@element-plus/icons-vue";
+import { useUserStore } from '../stores/user';
+import { useRouter } from 'vue-router';
+import { privateNoteContent } from '../utils/privateNoteContent.js';
+
+const userStore = useUserStore();
+const router = useRouter();
+const searchKeyword = ref('');
+
+const markdownFiles = ref([]);
+const categoryTree = ref([]);
+const groupMarkdownFiles = ref([]);
+const showEditor = ref(false);
+const selectedFile = ref(null);
+const activeMenu = ref('all');
+const isCollapsed = ref(false);
+const showCreateGroupDialog = ref(false);
+const showCreateNoteDialog = ref(false);
+const showRenameDialog = ref(false);
+const itemToRename = ref(null);
+const newName = ref('');
+const showSelectGroupDialog = ref(false);
+const importGroupId = ref(null);
+const fileToImport = ref(null);
+const showMoveNoteDialog = ref(false);
+const moveToGroupId = ref(null);
+const currentGroupName = ref('');
+const showSystemSettingsDialog = ref(false);
+const isRegistrationEnabled = ref(true);
+const generatedCode = ref('');
+const showUpdatePasswordDialog = ref(false);
+const showPrivacyDialog = ref(false);
+
+const groupFormRef = ref(null);
+const newGroupForm = ref({ name: '', parentId: null });
+const groupFormRules = ref({
+  name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
+});
+
+const noteFormRef = ref(null);
+const newNoteForm = ref({
+  id: null,
+  title: '',
+  groupingId: null,
+  fileName: '',
+  content: '',
+  isPrivate: 0
+});
+const noteFormRules = ref({
+  title: [{ required: true, message: '请输入笔记标题', trigger: 'blur' }],
+  groupingId: [{ required: true, message: '请选择分类', trigger: 'change' }],
+});
+
+const updatePasswordFormRef = ref(null);
+const updatePasswordForm = ref({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+});
+const validateConfirmPassword = (rule, value, callback) => {
+  if (value === '') {
+    callback(new Error('请再次输入新密码'));
+  } else if (value !== updatePasswordForm.value.newPassword) {
+    callback(new Error("两次输入的新密码不一致"));
+  } else {
+    callback();
+  }
+};
+const updatePasswordFormRules = ref({
+  oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
+  newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }, { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }],
+  confirmPassword: [{ required: true, validator: validateConfirmPassword, trigger: 'blur' }]
+});
+
+const editData=ref(null)
+const imageUrls = ref([]);
+const originalImages = ref([]);
+
+const vditor = ref(null);
+const saveStatus = ref('空闲');
+let debounceTimer = null;
+
+const categoryCascaderOptions = computed(() => categoryTree.value);
+
+const initVditor = () => {
+  vditor.value = new Vditor('vditor', {
+    height: 'calc(100vh - 120px)',
+    mode: 'ir',
+    after: () => {
+      if (editData.value) {
+        vditor.value.setValue(editData.value.content);
+      }
+    },
+    input: (value) => {
+      debouncedSave(value);
+    },
+    upload: {
+      accept: 'image/*',
+      handler(files) {
+        handleImageUpload(files);
+      },
+    },
+  });
+};
+
+const buildTree = (items) => {
+  const tree = [];
+  const itemMap = new Map();
+
+  // First, map all items by their id
+  items.forEach(item => {
+    itemMap.set(String(item.id), {
+      ...item,
+      value: item.id,
+      label: item.grouping,
+      children: [], // Initialize children array
+    });
+  });
+
+  // Then, build the tree structure
+  itemMap.forEach(item => {
+    const parentId = String(item.parentId);
+    if (parentId !== '0' && itemMap.has(parentId)) {
+      const parent = itemMap.get(parentId);
+      parent.children.push(item);
+    } else {
+      // If it's a root node or an orphan, add it to the top level
+      tree.push(item);
+    }
+  });
+
+  // Helper to remove empty children arrays
+  const cleanTree = (nodes) => {
+    nodes.forEach(node => {
+      if (node.children.length === 0) {
+        delete node.children;
+      } else {
+        cleanTree(node.children);
+      }
+    });
+  };
+
+  cleanTree(tree);
+  return tree;
+};
+
+const fetchGroupings = async () => {
+  try {
+    const allCategories = await groupingAll("");
+    categoryTree.value = buildTree(allCategories || []);
+  } catch (error) {
+    console.error('获取分组失败:', error);
+    ElMessage.error('获取分组失败: ' + error.message);
+    categoryTree.value = [];
+  }
+};
+
+const selectFile = async (data) => {
+  try {
+    const files = await markdownList(data.id);
+    groupMarkdownFiles.value = files || [];
+    currentGroupName.value = data.grouping;
+    selectedFile.value = null;
+  } catch (error) {
+    ElMessage.error('获取笔记列表失败: ' + error.message);
+    groupMarkdownFiles.value = [];
+  }
+};
+
+const fetchMarkdownFiles = async () => {
+  try {
+    const files = await markdownAll();
+    markdownFiles.value = (files || []).map(file => ({
+      ...file,
+      id: String(file.id)
+    }));
+  } catch (error) {
+    ElMessage.error('获取笔记列表失败: ' + error.message);
+  }
+};
+
+const createGrouping = async () => {
+  if (!groupFormRef.value) return;
+  await groupFormRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        const payload = {
+          grouping: newGroupForm.value.name, // 将 name 映射到 grouping
+          parentId: newGroupForm.value.parentId || 0
+        };
+        await addGroupings(payload);
+        ElMessage.success('分类创建成功');
+        showCreateGroupDialog.value = false;
+        await fetchGroupings();
+      } catch (error) {
+        ElMessage.error('创建分类失败: ' + error.message);
+      }
+    }
+  });
+};
+
+const resetGroupForm = () => {
+  newGroupForm.value = { name: '', parentId: null };
+  if (groupFormRef.value) {
+    groupFormRef.value.resetFields();
+  }
+};
+
+const createNote = async () => {
+  if (!noteFormRef.value) return;
+  await noteFormRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        const groupingId = newNoteForm.value.groupingId;
+        if (!groupingId) {
+          ElMessage.error('必须选择一个分类');
+          return;
+        }
+        const payload = {
+          id: null,
+          title: newNoteForm.value.title,
+          groupingId: groupingId,
+          fileName: newNoteForm.value.title + '.md',
+          content: '',
+          isPrivate: newNoteForm.value.isPrivate
+        };
+        editData.value = payload;
+        showCreateNoteDialog.value = false;
+        showEditor.value = true;
+        selectedFile.value = editData.value;
+        await nextTick(() => {
+          initVditor();
+        });
+      } catch (error) {
+        ElMessage.error('创建笔记失败: ' + error.message);
+      }
+    }
+  });
+};
+
+const resetNoteForm = () => {
+  newNoteForm.value = { id: null, title: '', groupingId: null, fileName: '', content: '', isPrivate: 0 };
+  if (noteFormRef.value) {
+    noteFormRef.value.resetFields();
+  }
+};
+
+const renderMenu = (item) => {
+  const titleContent = () => h('div', { class: 'menu-item-title' }, [
+    h(ElIcon, () => h(Folder)),
+    h('span', { class: 'menu-item-text' }, item.grouping),
+    h('div', { class: 'menu-item-actions' }, [
+      h(ElIcon, { class: 'edit-icon', onClick: (e) => { e.stopPropagation(); openRenameDialog(item, 'group'); } }, () => h(Edit)),
+      h(ElIcon, { class: 'delete-icon', onClick: (e) => { e.stopPropagation(); handleDeleteGroup(item); } }, () => h(Delete))
+    ])
+  ]);
+
+  const wrappedContent = () => h(ElTooltip, {
+    content: item.grouping,
+    placement: 'right',
+    disabled: !isCollapsed.value,
+    effect: 'dark',
+    offset: 15,
+  }, {
+    default: titleContent
+  });
+
+  if (item.children && item.children.length > 0) {
+    return h(ElSubMenu, {
+      index: `group-${item.id}`,
+      popperClass: isCollapsed.value ? 'hide-popper' : ''
+    }, {
+      title: () => h('div', {
+        class: 'submenu-title-wrapper',
+        onClick: () => selectFile(item),
+        style: 'width: 100%; display: flex; align-items: center;'
+      }, [ wrappedContent() ]),
+      default: () => item.children.map(child => renderMenu(child))
+    });
+  }
+
+  return h(ElMenuItem, { index: `group-${item.id}`, onClick: () => selectFile(item) }, {
+    default: wrappedContent
+  });
+};
+
+// 选择文件预览
+const previewFile = async (file) => {
+  if (file.id === null) {
+    editData.value = file;
+    selectedFile.value = null;
+    return;
+  }
+  try {
+    const response = await Preview(file.id);
+    const content = String(response || '');
+    selectedFile.value = {
+      ...file,
+      content: content
+    };
+    showEditor.value = false; // 确保进入预览模式
+
+    // 如果是私密笔记且用户未登录，内容会被后端置空，这里不需要额外提示
+    // 提示信息已经在模板中通过条件渲染显示
+  } catch (error) {
+    ElMessage.error('获取笔记内容失败: ' + error.message);
+    selectedFile.value = null;
+  }
+};
+
+// 编辑笔记
+const editNote = async (file) => {
+  editData.value = file
+  originalImages.value = extractImageUrls(file.content);
+  showEditor.value = true;
+  await nextTick(() => {
+    initVditor();
+  });
+};
+
+// 修改笔记私密状态
+const handlePrivacyChange = async () => {
+  if (!selectedFile.value) return;
+
+  try {
+    const newPrivacyStatus = selectedFile.value.isPrivate === 1 ? 0 : 1;
+    const payload = {
+      ...selectedFile.value,
+      isPrivate: newPrivacyStatus
+    };
+
+    const updatedFile = await updateMarkdown(payload);
+    selectedFile.value = updatedFile;
+
+    // 更新列表中的文件状态
+    const index = groupMarkdownFiles.value.findIndex(file => file.id === selectedFile.value.id);
+    if (index !== -1) {
+      groupMarkdownFiles.value[index] = updatedFile;
+    }
+
+    showPrivacyDialog.value = false;
+    ElMessage.success(`笔记已${newPrivacyStatus === 1 ? '设为私密' : '设为公开'}`);
+  } catch (error) {
+    ElMessage.error('修改笔记状态失败: ' + error.message);
+  }
+};
+
+// 图片上传
+const handleImageUpload=async (files) => {
+  const promise = await uploadImage(files[0]);
+  if (promise.url == null) {
+    ElMessage.error(promise.msg);
+    return;
+  }
+  const url = promise.url;
+  // 从环境变量获取 baseURL，并与后端返回的 URL 路径拼接
+  const fullUrl = `${import.meta.env.VITE_API_BASE_URL}${url}`;
+  imageUrls.value.push(fullUrl);
+  vditor.value.insertValue(`![${files[0].name}](${fullUrl})`);
+}
+
+const debouncedSave = (value) => {
+  saveStatus.value = '正在输入...';
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => {
+    handleSave(value);
+  }, 2000);
+};
+
+const handleSave = async (content) => {
+  saveStatus.value = '正在保存...';
+  try {
+    // 构造一个干净的、只包含必要字段的 payload
+    const payload = {
+      id: editData.value.id, // 可能是 null，用于创建
+      title: editData.value.title,
+      groupingId: editData.value.groupingId,
+      content: content,
+      fileName: editData.value.fileName || `${editData.value.title}.md`,
+    };
+
+    // 调用后端接口
+    const response = await updateMarkdown(payload);
+
+    // 使用后端返回的完整、最新的数据更新前端状态
+    // 这对于新创建的笔记至关重要，因为它会获得一个新的 ID
+    editData.value = response;
+
+    // 如果当前正在预览这个文件，也更新 selectedFile
+    if (selectedFile.value && (!selectedFile.value.id || selectedFile.value.id === response.id)) {
+      selectedFile.value = response;
+    }
+
+    saveStatus.value = '已保存';
+    ElMessage.success('保存成功');
+
+    // 刷新文件列表以反映更改（例如，新文件出现）
+    await fetchMarkdownFiles();
+    // 如果当前在某个分类下，也刷新该分类的列表
+    if (activeMenu.value.startsWith('group-')) {
+      const groupId = activeMenu.value.split('-');
+      await selectFile({ id: groupId, grouping: currentGroupName.value });
+    }
+
+  } catch (error) {
+    saveStatus.value = '保存失败';
+    ElMessage.error('保存失败: ' + (error.response?.data?.message || error.message));
+  }
+};
+
+const extractImageUrls = (markdown) => {
+  const regex = /!\[.*?\]\((.*?)\)/g;
+  const urls = [];
+  let match;
+  while ((match = regex.exec(markdown)) !== null) {
+    urls.push(match);
+  }
+  return urls;
+};
+
+const openRenameDialog = (item, type) => {
+  itemToRename.value = { ...item, type };
+  newName.value = type === 'file' ? item.title : item.grouping;
+  showRenameDialog.value = true;
+};
+
+const handleRename = async () => {
+  if (!newName.value.trim()) {
+    ElMessage.error('名称不能为空');
+    return;
+  }
+  try {
+    if (itemToRename.value.type === 'file') {
+      await updateMarkdownTitle({ id: itemToRename.value.id, title: newName.value });
+      if (selectedFile.value && selectedFile.value.id === itemToRename.value.id) {
+        selectedFile.value.title = newName.value;
+      }
+    } else {
+      await updateGroupingName({ id: itemToRename.value.id, grouping: newName.value });
+    }
+    ElMessage.success('重命名成功');
+    await fetchGroupings();
+    await fetchMarkdownFiles();
+  } catch (error) {
+    ElMessage.error('重命名失败: ' + error.message);
+  } finally {
+    showRenameDialog.value = false;
+  }
+};
+
+const handleDeleteGroup = (group) => {
+  ElMessageBox.confirm(
+      `确定要删除分类 “${group.grouping}” 吗？这将同时删除该分类下的所有子分类和笔记。`,
+      '警告',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(async () => {
+    try {
+      await apiDeleteGrouping(group.id);
+      ElMessage.success('分类已删除');
+      // 删除分类后，刷新分组树并回到主视图
+      await fetchGroupings();
+      await resetToHomeView();
+    } catch (error) {
+      ElMessage.error('删除分类失败: ' + error.message);
+    }
+  }).catch(() => {
+    // 用户取消操作
+  });
+};
+
+const deleteNote = (file) => {
+  ElMessageBox.confirm(
+      `确定要删除笔记 “${file.title}” 吗？`,
+      '警告',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(async () => {
+    try {
+      await deleteMarkdown(file.id);
+      ElMessage.success('笔记已删除');
+      selectedFile.value = null; // 关闭预览
+      // 刷新分组和主视图
+      await fetchGroupings();
+      await resetToHomeView();
+    } catch (error) {
+      ElMessage.error('删除笔记失败: ' + error.message);
+    }
+  });
+};
+
+const handleMarkdownUpload = (file) => {
+  fileToImport.value = file;
+  showSelectGroupDialog.value = true;
+  return false; // 阻止 el-upload 自动上传
+};
+
+const confirmImport = async () => {
+  if (!importGroupId.value) {
+    ElMessage.error('请选择要导入的分类');
+    return;
+  }
+  const reader = new FileReader();
+  reader.onload = async (e) => {
+    const content = e.target.result;
+    const payload = {
+      title: fileToImport.value.name.replace(/\.md$/, ''),
+      groupingId: importGroupId.value,
+      content: content,
+      fileName: fileToImport.value.name
+    };
+    try {
+      await updateMarkdown(payload);
+      ElMessage.success('Markdown 文件导入成功');
+      await fetchGroupings();
+      await fetchMarkdownFiles();
+      showSelectGroupDialog.value = false;
+    } catch (error) {
+      ElMessage.error('导入失败: ' + error.message);
+    }
+  };
+  reader.readAsText(fileToImport.value);
+};
+
+const handleMoveNote = async () => {
+  if (!moveToGroupId.value) {
+    ElMessage.error('请选择目标分类');
+    return;
+  }
+  try {
+    const payload = {
+      ...selectedFile.value,
+      groupingId: moveToGroupId.value
+    };
+    await updateMarkdown(payload);
+    ElMessage.success('笔记移动成功');
+    showMoveNoteDialog.value = false;
+    selectedFile.value = null;
+    await fetchGroupings();
+    await fetchMarkdownFiles();
+  } catch (error) {
+    ElMessage.error('移动失败: ' + error.message);
+  }
+};
+
+const handleSearch = async () => {
+  if (!searchKeyword.value.trim()) {
+    groupMarkdownFiles.value = markdownFiles.value;
+    return;
+  }
+  try {
+    const response = await searchMarkdown(searchKeyword.value);
+    groupMarkdownFiles.value = response.data;
+  } catch (error) {
+    ElMessage.error('搜索失败: ' + error.message);
+  }
+};
+
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
+
+
+const showExportLoading = ref(false);
+
+// 文件名特殊字符清理
+const sanitizeFilename = (name) => name.replace(/[<>:"/\\|?*]/g, '_').trim() || '未命名笔记';
+
+const handleExport = async (format) => {
+  if (!selectedFile.value || showExportLoading.value) return;
+
+  try {
+    await validateToken();
+  } catch (error) {
+    ElMessage.error('登录已过期，请重新登录');
+    userStore.logout();
+    router.push('/login');
+    return;
+  }
+
+  const title = sanitizeFilename(selectedFile.value.title);
+  const content = selectedFile.value.content;
+  const previewElement = document.querySelector('.markdown-preview');
+
+  if (!previewElement) {
+    ElMessage.error('无法找到预览区域');
+    return;
+  }
+
+  showExportLoading.value = true;
+  ElMessage.info(`正在导出为 ${format.toUpperCase()}...`);
+
+  try {
+    switch (format) {
+      case 'md':
+        exportAsMd(title, content);
+        break;
+      case 'pdf':
+        await exportAsPdf(title, previewElement);
+        break;
+      case 'html':
+        exportAsHtml(title, previewElement.innerHTML);
+        break;
+    }
+    ElMessage.success(`${format.toUpperCase()} 导出成功`);
+  } catch (error) {
+    console.error('Export failed:', error);
+    ElMessage.error(`导出失败: ${error.message}`);
+  } finally {
+    showExportLoading.value = false;
+  }
+};
+
+const exportAsMd = (title, content) => {
+  const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
+  downloadBlob(blob, `${title}.md`);
+};
+
+const exportAsPdf = async (title, element) => {
+  const canvas = await html2canvas(element, {
+    scale: 2,
+    useCORS: true,
+    logging: false,
+  });
+
+  const pdf = new jsPDF({
+    orientation: 'p',
+    unit: 'mm',
+    format: 'a4',
+  });
+
+  const pageHeight = pdf.internal.pageSize.getHeight() - 20; // 减去页边距
+  const pageWidth = pdf.internal.pageSize.getWidth() - 20;
+  const imgWidth = pageWidth;
+  const imgHeight = (canvas.height * imgWidth) / canvas.width;
+  let heightLeft = imgHeight;
+  let position = 10; // 初始Y轴位置
+  const imgData = canvas.toDataURL('image/png');
+
+  pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
+  heightLeft -= pageHeight;
+
+  let pageCount = 1;
+  while (heightLeft > 0) {
+    pageCount++;
+    position = -pageHeight * (pageCount - 1) + 10;
+    pdf.addPage();
+    pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
+    heightLeft -= pageHeight;
+  }
+
+  // 添加页眉和页脚
+  for (let i = 1; i <= pageCount; i++) {
+    pdf.setPage(i);
+    pdf.setFontSize(8);
+    pdf.setTextColor(150);
+    pdf.text(title, pdf.internal.pageSize.getWidth() / 2, 8, { align: 'center' });
+    pdf.text(`第 ${i} 页 / 共 ${pageCount} 页`, pdf.internal.pageSize.getWidth() / 2, pdf.internal.pageSize.getHeight() - 8, { align: 'center' });
+  }
+
+  pdf.save(`${title}.pdf`);
+};
+
+const exportAsHtml = (title, htmlContent) => {
+  const fullHtml = `
+    <!DOCTYPE html>
+    <html lang="zh-CN">
+    <head>
+      <meta charset="UTF-8">
+      <title>${title}</title>
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown.min.css">
+      <style>
+        body { box-sizing: border-box; min-width: 200px; max-width: 980px; margin: 0 auto; padding: 45px; }
+        @media (max-width: 767px) { body { padding: 15px; } }
+      </style>
+    </head>
+    <body class="markdown-body">
+      <h1>${title}</h1>
+      ${htmlContent}
+    </body>
+    </html>
+  `;
+  const blob = new Blob([fullHtml], { type: 'text/html;charset=utf-8' });
+  downloadBlob(blob, `${title}.html`);
+};
+
+const downloadBlob = (blob, filename) => {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+const goToLogin = () => {
+  router.push('/login');
+};
+
+const goToRegister = () => {
+  router.push('/register');
+};
+
+const handleLogout = () => {
+  userStore.logout();
+  ElMessage.success('已退出登录');
+  router.push('/login');
+};
+
+const goToTrash = () => {
+  router.push({ name: 'Trash' });
+};
+
+const resetToHomeView = async () => {
+  selectedFile.value = null;
+  showEditor.value = false;
+  searchKeyword.value = '';
+  try {
+    groupMarkdownFiles.value = await getRecentFiles() || [];
+  } catch (error) {
+    ElMessage.error('获取最近文件失败: ' + error.message);
+    groupMarkdownFiles.value = [];
+  }
+};
+
+
+watch(activeMenu, (newVal) => {
+  if (newVal === 'all') {
+    resetToHomeView();
+  }
+});
+
+watch([selectedFile, showEditor], ([newFile, newShowEditor]) => {
+  if (newFile && !newShowEditor) {
+    nextTick(() => {
+      const previewElement = document.querySelector('.markdown-preview');
+      if (previewElement) {
+        // 如果是私密笔记且用户未登录，显示提示内容
+        if (newFile.isPrivate === 1 && !userStore.isLoggedIn) {
+          // 渲染私密笔记提示内容
+          Vditor.preview(previewElement, privateNoteContent, {
+            mode: 'light',
+            hljs: {
+              enable: true,
+              style: 'github'
+            }
+          });
+        } else if (newFile.content) {
+          // 只有在有内容时才渲染 Markdown
+          Vditor.preview(previewElement, newFile.content, {
+            mode: 'light',
+            hljs: {
+              enable: true,
+              style: 'github'
+            }
+          });
+        }
+      }
+    });
+  }
+}, { deep: true });
+
+const handleToggleRegistration = async (value) => {
+  try {
+    await toggleRegistration(value);
+    ElMessage.success(`注册功能已${value ? '开启' : '关闭'}`);
+  } catch (error) {
+    ElMessage.error('操作失败');
+    isRegistrationEnabled.value = !value; // revert
+  }
+};
+
+const handleGenerateCode = async () => {
+  try {
+    const code = await generateRegistrationCode();
+    generatedCode.value = code;
+    ElMessage.success('注册码生成成功');
+  } catch (error) {
+    ElMessage.error('生成注册码失败: ' + error.message);
+  }
+};
+
+const copyToClipboard = (text) => {
+  navigator.clipboard.writeText(text).then(() => {
+    ElMessage.success('已复制到剪贴板');
+  }, () => {
+    ElMessage.error('复制失败');
+  });
+};
+
+onMounted(async () => {
+  await fetchGroupings();
+  await resetToHomeView();
+  try {
+    isRegistrationEnabled.value = await getRegistrationStatus();
+  } catch (error) {
+    console.error("Failed to fetch registration status:", error);
+  }
+});
+const handleUpdatePassword = async () => {
+  if (!updatePasswordFormRef.value) return;
+  await updatePasswordFormRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        await updatePassword({
+          oldPassword: updatePasswordForm.value.oldPassword,
+          newPassword: updatePasswordForm.value.newPassword
+        });
+        ElMessage.success('密码修改成功，请重新登录');
+        showUpdatePasswordDialog.value = false;
+        await handleLogout();
+      } catch (error) {
+        ElMessage.error('密码修改失败: ' + error.message);
+      }
+    }
+  });
+};
+
+const resetUpdatePasswordForm = () => {
+  updatePasswordForm.value = { oldPassword: '', newPassword: '', confirmPassword: '' };
+  if (updatePasswordFormRef.value) {
+    updatePasswordFormRef.value.resetFields();
+  }
+};
+
+</script>
+
+<style>
+/* 全局 Element Plus 样式覆盖 */
+.el-dialog {
+  border-radius: 8px !important;
+  box-shadow: var(--box-shadow-dark) !important;
+}
+
+.el-dialog__header {
+  border-bottom: 1px solid var(--border-color-light);
+  padding: 15px 20px !important;
+  margin-right: 0 !important;
+}
+
+.el-dialog__title {
+  color: var(--text-color) !important;
+  font-weight: 600;
+}
+
+.el-dialog__body {
+  padding: 20px !important;
+}
+
+.el-form-item__label {
+  color: var(--text-color-secondary);
+}
+
+.el-input__wrapper, .el-cascader {
+  background-color: var(--bg-color-secondary) !important;
+  box-shadow: none !important;
+  border-radius: 6px !important;
+}
+
+.el-input__inner {
+  color: var(--text-color) !important;
+}
+
+.el-button--primary {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+  transition: all var(--transition-duration) ease;
+}
+.el-button--primary:hover {
+  background-color: var(--primary-color-dark);
+  border-color: var(--primary-color-dark);
+}
+
+.el-button {
+  border-radius: 6px;
+}
+
+.el-dialog__footer {
+  padding: 10px 20px 20px !important;
+  border-top: 1px solid var(--border-color-light);
+}
+
+/* Vditor 暗黑模式适配 */
+.dark-theme .vditor {
+  --panel-background-color: var(--bg-color-secondary) !important;
+  --textarea-background-color: var(--bg-color) !important;
+  --toolbar-background-color: var(--bg-color-tertiary) !important;
+  --border-color: var(--border-color) !important;
+  color: var(--text-color) !important;
+}
+.dark-theme .vditor-toolbar,
+.dark-theme .vditor-content,
+.dark-theme .vditor-preview {
+  background-color: var(--bg-color) !important;
+}
+.dark-theme .vditor-toolbar__item:hover,
+.dark-theme .vditor-toolbar__item--current {
+  background-color: var(--primary-color-light) !important;
+}
+
+.hide-popper {
+  display: none !important;
+}
+
+/* 移除预览中代码块的内部滚动条 */
+.markdown-preview .vditor-reset pre {
+  max-height: none !important;
+  overflow: visible !important;
+}
+
+.markdown-preview .vditor-reset pre code {
+  max-height: none !important;
+  overflow-y: visible !important;
+  word-break: break-all !important;
+  white-space: pre-wrap !important;
+  display: block;
+}
+</style>
+
+<style scoped>
+/* 整体布局 */
+.home-page {
+  height: 100vh;
+  overflow: hidden;
+  background: var(--bg-gradient);
+  background-attachment: fixed;
+}
+
+/* 侧边栏 */
+.sidebar {
+  background-color: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  border-right: 1px solid rgba(0, 0, 0, 0.05);
+  transition: width var(--transition-duration) ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.dark-theme .sidebar {
+  background-color: rgba(23, 23, 39, 0.8);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  flex-shrink: 0;
+}
+
+.el-menu {
+  border-right: none;
+  background: transparent;
+  flex-grow: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 250px;
+}
+
+:deep(.el-menu-item), :deep(.el-sub-menu__title) {
+  height: 48px;
+  line-height: 48px;
+  border-radius: var(--border-radius);
+  margin: 0.25rem 0.5rem;
+  color: var(--text-color-secondary);
+}
+
+:deep(.el-menu-item.is-active) {
+  background-color: var(--primary-color);
+  color: #fff;
+  font-weight: 600;
+}
+
+:deep(.el-menu-item:hover), :deep(.el-sub-menu__title:hover) {
+  background-color: var(--primary-color-light);
+  color: var(--primary-color);
+}
+
+.menu-item-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 5px;
+}
+
+.menu-item-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+}
+
+.menu-item-actions {
+  display: none;
+  align-items: center;
+  gap: 5px;
+}
+
+.el-menu:not(.el-menu--collapse) .el-menu-item:hover .menu-item-actions,
+.el-menu:not(.el-menu--collapse) .el-sub-menu__title:hover .menu-item-actions {
+  display: flex;
+}
+
+.el-menu--collapse .menu-item-text,
+.el-menu--collapse .menu-item-actions {
+  display: none;
+}
+
+.edit-icon, .delete-icon {
+  cursor: pointer;
+  color: var(--text-color-secondary);
+}
+
+.edit-icon:hover, .delete-icon:hover {
+  color: var(--primary-color);
+}
+
+.content {
+  padding: 1.5rem;
+  background-color: transparent;
+  height: 100vh;
+  overflow-y: auto;
+}
+
+.header, .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; /* Add gap between header items */
+}
+
+.dark-theme .header, .dark-theme .preview-header {
+  background-color: rgba(30, 30, 47, 0.8);
+}
+
+.preview-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.preview-title .edit-icon {
+  visibility: visible;
+  opacity: 0.6;
+}
+.preview-title .edit-icon:hover {
+  opacity: 1;
+}
+
+.actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+:deep(.search-input .el-input__wrapper) {
+  border-radius: var(--border-radius) !important;
+}
+
+.user-actions, .guest-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.welcome-text {
+  white-space: nowrap;
+  color: var(--text-color-secondary);
+}
+
+.file-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 1.5rem;
+}
+
+.file-item {
+  cursor: pointer;
+  border-radius: var(--border-radius);
+  border: 1px solid transparent;
+  transition: all var(--transition-duration) ease;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.dark-theme .file-item {
+  background-color: rgba(30, 30, 47, 0.8);
+}
+
+.file-item:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--box-shadow);
+  border-color: var(--primary-color);
+}
+
+.file-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+}
+
+.file-group-name {
+  font-size: 0.75rem;
+  color: var(--text-color-secondary);
+  background-color: var(--bg-color-secondary);
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+}
+
+.file-preview {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.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);
+}
+
+.vditor {
+  flex-grow: 1;
+  border: none;
+}
+
+.save-status {
+  font-size: 14px;
+  color: var(--text-color-secondary);
+}
+
+.upload-btn {
+  display: inline-block;
+  /* margin-left is no longer needed due to gap in parent */
+}
+</style>
+
+/* 对话框样式 */
+:deep(.el-dialog) {
+border-radius: var(--border-radius);
+background-color: var(--bg-color-secondary);
+}
+
+:deep(.el-dialog__header) {
+border-bottom: 1px solid var(--border-color);
+padding: 1.5rem;
+}
+
+:deep(.el-dialog__title) {
+font-size: 1.25rem;
+font-weight: 600;
+color: var(--text-color);
+}
+
+:deep(.el-dialog__body) {
+padding: 1.5rem;
+}
+
+:deep(.el-dialog__footer) {
+padding: 1.5rem;
+border-top: 1px solid var(--border-color);
+}
+
+.welcome-text {
+white-space: nowrap;
+}
+.user-actions, .guest-actions {
+display: flex;
+align-items: center;
+gap: 10px;
+}
diff --git a/mydatabase.db b/mydatabase.db
index 1266b6628d816008b73aa4e880569b20abcd50a3..fdbb2502aeef905afb19f5481766d616728c5fbd 100644
GIT binary patch
delta 44
zcmZoTz|wGlWr8##<3t%}Rz?QB;DpAMttpJ_gcv!e3kx$gu++!DVB9`km@$(F03)3Y
Awg3PC

delta 44
zcmZoTz|wGlWr8##!$cWpRt5$=|JufsttpJ_gcv!d3kx$gu+%1Mrf;7v%$Ugo03x9b
Aa{vGU