From c28b12ecd1ae9e4b4bd1462b18539776f8b6182e Mon Sep 17 00:00:00 2001
From: ikmkj <1@qq,com>
Date: Fri, 8 Aug 2025 20:19:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=96=B0=E5=A2=9E=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E5=88=86=E7=B1=BB=E5=92=8C=E7=AC=94=E8=AE=B0=E5=AF=B9?=
 =?UTF-8?q?=E8=AF=9D=E6=A1=86=E5=8F=8A=E5=A4=B4=E9=83=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 CreateGroupDialog 组件用于创建分类
- 新增 CreateNoteDialog 组件用于创建笔记
- 新增 HomeHeader 组件用于显示主页头部信息
- 对话框组件使用 Element Plus 样式- 头部组件包含用户操作按钮和搜索功能
---
 biji-qianduan/src/components/HomePage.vue     | 1732 +++--------------
 .../src/components/home/HomeHeader.vue        |  172 ++
 .../src/components/home/NoteEditor.vue        |  172 ++
 .../src/components/home/NoteList.vue          |   80 +
 .../src/components/home/NotePreview.vue       |  140 ++
 .../src/components/home/SidebarMenu.vue       |  262 +++
 .../home/dialogs/CreateGroupDialog.vue        |   90 +
 .../home/dialogs/CreateNoteDialog.vue         |  109 ++
 .../home/dialogs/MoveNoteDialog.vue           |   81 +
 .../components/home/dialogs/PrivacyDialog.vue |   91 +
 .../components/home/dialogs/RenameDialog.vue  |   65 +
 .../home/dialogs/SelectGroupDialog.vue        |   88 +
 .../home/dialogs/SystemSettingsDialog.vue     |   98 +
 .../home/dialogs/UpdatePasswordDialog.vue     |   97 +
 14 files changed, 1852 insertions(+), 1425 deletions(-)
 create mode 100644 biji-qianduan/src/components/home/HomeHeader.vue
 create mode 100644 biji-qianduan/src/components/home/NoteEditor.vue
 create mode 100644 biji-qianduan/src/components/home/NoteList.vue
 create mode 100644 biji-qianduan/src/components/home/NotePreview.vue
 create mode 100644 biji-qianduan/src/components/home/SidebarMenu.vue
 create mode 100644 biji-qianduan/src/components/home/dialogs/CreateGroupDialog.vue
 create mode 100644 biji-qianduan/src/components/home/dialogs/CreateNoteDialog.vue
 create mode 100644 biji-qianduan/src/components/home/dialogs/MoveNoteDialog.vue
 create mode 100644 biji-qianduan/src/components/home/dialogs/PrivacyDialog.vue
 create mode 100644 biji-qianduan/src/components/home/dialogs/RenameDialog.vue
 create mode 100644 biji-qianduan/src/components/home/dialogs/SelectGroupDialog.vue
 create mode 100644 biji-qianduan/src/components/home/dialogs/SystemSettingsDialog.vue
 create mode 100644 biji-qianduan/src/components/home/dialogs/UpdatePasswordDialog.vue

diff --git a/biji-qianduan/src/components/HomePage.vue b/biji-qianduan/src/components/HomePage.vue
index 9b2f7a7..4c1e6ef 100644
--- a/biji-qianduan/src/components/HomePage.vue
+++ b/biji-qianduan/src/components/HomePage.vue
@@ -1,370 +1,76 @@
 <template>
   <el-container class="home-page" :class="{'is-mobile': isMobile}">
-    <!-- 左侧菜单区域 -->
-    <el-aside class="sidebar" :width="isCollapsed ? (isMobile ? '0' : '64px') : '250px'">
-      <div class="sidebar-header">
-        <span v-if="!isCollapsed" style="margin-right: 15px; font-weight: bold;">笔记分类</span>
-        <el-button v-if="!isCollapsed" type="primary" size="small" @click="showCreateGroupDialog = true" circle>
-          <el-icon><Plus /></el-icon>
-        </el-button>
-        <el-button @click="isCollapsed = !isCollapsed" type="primary" size="small" circle v-if="!isMobile">
-          <el-icon>
-            <Fold v-if="!isCollapsed" />
-            <Expand v-else />
-          </el-icon>
-        </el-button>
-      </div>
+    <!-- Sidebar -->
+    <SidebarMenu
+        :is-collapsed="isCollapsed"
+        :is-mobile="isMobile"
+        :active-menu="activeMenu"
+        :category-tree="categoryTree"
+        @toggle-collapse="isCollapsed = !isCollapsed"
+        @show-create-group="showCreateGroupDialog = true"
+        @select-file="handleSelectFile"
+        @show-rename-dialog="openRenameDialog"
+        @group-deleted="handleGroupDeleted"
+        @show-system-settings="showSystemSettingsDialog = true"
+        @show-update-password="showUpdatePasswordDialog = true"
+        @logout="handleLogout"
+    />
 
-      <el-menu
-          v-if="!isMobile"
-          :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">
-          <component :is="renderMenu(menu)" />
-        </template>
-        <ElMenuItem index="trash" @click="goToTrash">
-          <ElIcon><Delete /></ElIcon>
-          <template #title>回收站</template>
-        </ElMenuItem>
-      </el-menu>
-
-      <!-- Mobile Menu -->
-      <el-menu
-          v-if="isMobile"
-          :default-active="activeMenu"
-          class="el-menu-vertical-demo"
-          :collapse="isCollapsed"
-          :collapse-transition="false"
-      >
-        <div class="mobile-menu-header">
-          <div v-if="userStore.isLoggedIn" class="user-info">
-            <span class="username">欢迎, {{ userStore.userInfo?.username }}</span>
-          </div>
-          <div v-else class="guest-info">
-            <el-button type="primary" @click="goToLogin">登录</el-button>
-            <el-button @click="goToRegister">注册</el-button>
-          </div>
-        </div>
-
-        <template v-for="menu in categoryTree" :key="menu.id">
-          <component :is="renderMenu(menu)" />
-        </template>
-        <ElMenuItem index="trash" @click="goToTrash">
-          <ElIcon><Delete /></ElIcon>
-          <template #title>回收站</template>
-        </ElMenuItem>
-        <ElMenuItem v-if="userStore.isLoggedIn" index="system-settings" @click="showSystemSettingsDialog = true">
-          <ElIcon><setting /></ElIcon>
-          <template #title>系统管理</template>
-        </ElMenuItem>
-        <ElMenuItem v-if="userStore.isLoggedIn" index="update-password" @click="showUpdatePasswordDialog = true">
-          <ElIcon><lock /></ElIcon>
-          <template #title>修改密码</template>
-        </ElMenuItem>
-        <ElMenuItem v-if="userStore.isLoggedIn" index="logout" @click="handleLogout">
-          <ElIcon><SwitchButton /></ElIcon>
-          <template #title>退出登录</template>
-        </ElMenuItem>
-      </el-menu>
-    </el-aside>
-
-    <!-- 右侧内容区域 -->
+    <!-- Main Content -->
     <el-container>
       <el-main class="content">
-        <div v-if="selectedFile" class="file-preview">
-          <el-header class="preview-header">
-            <h2 class="preview-title">
-              <span>{{ selectedFile.title }}</span>
-              <el-icon v-if="selectedFile.isPrivate === 1" class="lock-icon"><Lock /></el-icon>
-              <el-icon class="edit-icon" @click="openRenameDialog(selectedFile, 'file')"><Edit /></el-icon>
-            </h2>
-            <div class="actions">
-              <el-button v-if="!showEditor" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="primary" @click="selectedFile = null">
-                <el-icon v-if="isMobile"><Back /></el-icon>
-                <span v-else>返回</span>
-              </el-button>
-              <el-button v-if="!showEditor && userStore.isLoggedIn && !isMobile" type="warning" @click="showMoveNoteDialog = true">移动</el-button>
-              <el-button v-if="!showEditor && userStore.isLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="primary" @click="editNote(selectedFile); isCollapsed = true">
-                <el-icon v-if="isMobile"><Edit /></el-icon>
-                <span v-else>编辑</span>
-              </el-button>
-              <el-button v-if="!showEditor && userStore.isLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="danger" @click="deleteNote(selectedFile)">
-                <el-icon v-if="isMobile"><Delete /></el-icon>
-                <span v-else>删除</span>
-              </el-button>
-              <el-button v-if="showEditor" type="primary" @click="showEditor = !showEditor; previewFile(editData)">返回</el-button>
-              <el-button v-if="showEditor && userStore.isLoggedIn" type="success" @click="handleSave(vditor.getValue())">保存</el-button>
-              <span v-if="showEditor" class="save-status">{{ saveStatus }}</span>
-              <el-button v-if="!showEditor && userStore.isLoggedIn" :circle="isMobile" :size="isMobile ? 'small' : 'default'" type="info" @click="showPrivacyDialog = true">
-                <el-icon v-if="isMobile"><Lock /></el-icon>
-                <span v-else>{{ selectedFile.isPrivate === 1 ? '设为公开' : '设为私密' }}</span>
-              </el-button>
-              <el-dropdown v-if="!showEditor && userStore.isLoggedIn && !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 v-if="!showEditor" :key="selectedFile.id" class="markdown-preview">
-            <!-- 私密笔记提示区域由JS渲染 -->
-          </div>
-          <!-- Vditor 编辑器 -->
-          <div v-show="showEditor" id="vditor" class="vditor" />
-        </div>
+        <!-- Note Editor View -->
+        <NoteEditor
+            v-if="showEditor"
+            :edit-data="editData"
+            @back="handleEditorBack"
+            @save-success="handleSaveSuccess"
+        />
 
+        <!-- Note Preview View -->
+        <NotePreview
+            v-else-if="selectedFile"
+            :file="selectedFile"
+            :is-mobile="isMobile"
+            :is-user-logged-in="userStore.isLoggedIn"
+            @back="selectedFile = null"
+            @edit="editNote(selectedFile)"
+            @delete="deleteNote(selectedFile)"
+            @open-rename-dialog="openRenameDialog"
+            @show-move-note-dialog="showMoveNoteDialog = true"
+            @show-privacy-dialog="showPrivacyDialog = true"
+            @export="handleExport"
+        />
+
+        <!-- Home/List View -->
         <div v-else>
-          <!-- Desktop Header -->
-          <el-header class="header" v-if="!isMobile">
-            <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"
-              >
-                <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>
-
-          <!-- Mobile Header -->
-          <el-header class="header mobile-header" v-if="isMobile">
-            <el-button @click="isCollapsed = !isCollapsed" text circle class="mobile-menu-toggle">
-              <el-icon size="24"><Menu /></el-icon>
-            </el-button>
-            <h1 class="mobile-title" @click="resetToHomeView">我的笔记</h1>
-            <el-button text circle class="mobile-search-toggle" @click="handleSearch">
-              <el-icon size="22"><Search /></el-icon>
-            </el-button>
-            <el-button v-if="!userStore.isLoggedIn" text circle class="mobile-login-toggle" @click="goToLogin">
-              <el-icon size="24"><User /></el-icon>
-            </el-button>
-          </el-header>
-
-          <!-- Mobile Search Bar -->
-          <div v-if="isMobile" class="mobile-search-container">
-            <el-input
-                v-model="searchKeyword"
-                placeholder="搜索笔记标题"
-                class="mobile-search-input"
-                @keyup.enter="handleSearch"
-                size="large"
-            >
-              <template #prefix>
-                <el-icon><Search /></el-icon>
-              </template>
-            </el-input>
-          </div>
-
-          <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="暂无笔记，请创建或上传" />
+          <HomeHeader
+              :is-mobile="isMobile"
+              v-model:search-keyword="searchKeyword"
+              @search="handleSearch"
+              @reset-view="resetToHomeView"
+              @logout="handleLogout"
+              @show-update-password="showUpdatePasswordDialog = true"
+              @show-system-settings="showSystemSettingsDialog = true"
+              @show-create-note="showCreateNoteDialog = true"
+              @upload-markdown="handleMarkdownUpload"
+              @toggle-collapse="isCollapsed = !isCollapsed"
+          />
+          <NoteList
+              :files="groupMarkdownFiles"
+              :is-user-logged-in="userStore.isLoggedIn"
+              @preview="previewFile"
+          />
         </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>
+
+    <!-- Sidebar Overlay for Mobile -->
     <div v-if="isMobile && !isCollapsed" class="sidebar-overlay" @click="isCollapsed = true"></div>
 
     <!-- Mobile FAB for creating note -->
     <el-button
-        v-if="isMobile && userStore.isLoggedIn"
+        v-if="isMobile && userStore.isLoggedIn && !showEditor && !selectedFile"
         class="fab"
         type="primary"
         circle
@@ -372,187 +78,117 @@
     >
       <el-icon><Plus /></el-icon>
     </el-button>
+
+    <!-- Dialogs -->
+    <CreateGroupDialog
+        v-model:visible="showCreateGroupDialog"
+        :category-options="categoryTree"
+        @group-created="fetchGroupings"
+    />
+    <CreateNoteDialog
+        v-model:visible="showCreateNoteDialog"
+        :category-options="categoryTree"
+        @create-note="handleCreateNote"
+    />
+    <RenameDialog
+        v-model:visible="showRenameDialog"
+        :item="itemToRename"
+        @renamed="handleRenamed"
+    />
+    <SelectGroupDialog
+        v-model:visible="showSelectGroupDialog"
+        :category-options="categoryTree"
+        :file-to-import="fileToImport"
+        @import-success="handleImportSuccess"
+    />
+    <MoveNoteDialog
+        v-model:visible="showMoveNoteDialog"
+        :category-options="categoryTree"
+        :note-to-move="selectedFile"
+        @move-success="handleMoveSuccess"
+    />
+    <SystemSettingsDialog v-model:visible="showSystemSettingsDialog" />
+    <UpdatePasswordDialog
+        v-model:visible="showUpdatePasswordDialog"
+        @password-updated="handleLogout"
+    />
+    <PrivacyDialog
+        v-model:visible="showPrivacyDialog"
+        :note="selectedFile"
+        @privacy-changed="handlePrivacyChanged"
+    />
   </el-container>
 </template>
 
 <script setup>
-import {onMounted, ref, nextTick, watch, h, computed, onBeforeUnmount} from 'vue';
-import {ElMessage, ElSubMenu, ElMenuItem, ElIcon, ElMessageBox, ElTooltip} from 'element-plus';
+import { onMounted, ref, nextTick, watch, computed, onBeforeUnmount } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import Vditor from 'vditor';
 import 'vditor/dist/index.css';
 import {
-  addGroupings,
-  deleteImages, deleteMarkdown,
   groupingAll,
-  markdownAll, markdownList,
+  markdownList,
   Preview,
-  updateMarkdown, uploadImage,
+  updateMarkdown,
   searchMarkdown,
-  updateGroupingName,
-  updateMarkdownTitle,
-  deleteGrouping as apiDeleteGrouping,
+  deleteMarkdown,
   getRecentFiles,
   validateToken,
-  getRegistrationStatus,
-  toggleRegistration,
-  generateRegistrationCode,
-  updatePassword
-} from '@/api/CommonApi.js'
-import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled, Menu, User, Back, Setting, SwitchButton } from "@element-plus/icons-vue";
+} from '@/api/CommonApi.js';
 import { useUserStore } from '../stores/user';
 import { useRouter } from 'vue-router';
 import { privateNoteContent } from '../utils/privateNoteContent.js';
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
 
+// Import Components
+import SidebarMenu from './home/SidebarMenu.vue';
+import HomeHeader from './home/HomeHeader.vue';
+import NoteList from './home/NoteList.vue';
+import NotePreview from './home/NotePreview.vue';
+import NoteEditor from './home/NoteEditor.vue';
+import CreateGroupDialog from './home/dialogs/CreateGroupDialog.vue';
+import CreateNoteDialog from './home/dialogs/CreateNoteDialog.vue';
+import RenameDialog from './home/dialogs/RenameDialog.vue';
+import SelectGroupDialog from './home/dialogs/SelectGroupDialog.vue';
+import MoveNoteDialog from './home/dialogs/MoveNoteDialog.vue';
+import SystemSettingsDialog from './home/dialogs/SystemSettingsDialog.vue';
+import UpdatePasswordDialog from './home/dialogs/UpdatePasswordDialog.vue';
+import PrivacyDialog from './home/dialogs/PrivacyDialog.vue';
+import { Plus } from "@element-plus/icons-vue";
+
+// Basic Setup
 const userStore = useUserStore();
 const router = useRouter();
-const searchKeyword = ref('');
 
-const markdownFiles = ref([]);
+// State
+const searchKeyword = ref('');
 const categoryTree = ref([]);
 const groupMarkdownFiles = ref([]);
 const showEditor = ref(false);
 const selectedFile = ref(null);
+const editData = ref(null);
 const activeMenu = ref('all');
 const isCollapsed = ref(window.innerWidth < 768);
+const isMobile = ref(window.innerWidth < 768);
+
+// Dialog visibility
 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' }],
-});
+// Data for dialogs
+const itemToRename = ref(null);
+const fileToImport = ref(null);
 
-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 isMobile = ref(window.innerWidth < 768);
-
-const handleResize = () => {
-  isMobile.value = window.innerWidth < 768;
-  if (isMobile.value) {
-    isCollapsed.value = true;
-  }
-};
-
-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;
-};
+// --- Core Logic ---
 
+// Data Fetching
 const fetchGroupings = async () => {
   try {
     const allCategories = await groupingAll("");
@@ -560,340 +196,119 @@ const fetchGroupings = async () => {
   } catch (error) {
     categoryTree.value = [];
   }
-}
+};
 
-const selectFile = async (data) => {
+const buildTree = (items) => {
+  const tree = [];
+  const itemMap = new Map();
+  items.forEach(item => {
+    itemMap.set(String(item.id), { ...item, children: [] });
+  });
+  itemMap.forEach(item => {
+    const parentId = String(item.parentId);
+    if (parentId !== '0' && itemMap.has(parentId)) {
+      itemMap.get(parentId).children.push(item);
+    } else {
+      tree.push(item);
+    }
+  });
+  const cleanTree = (nodes) => {
+    nodes.forEach(node => {
+      if (node.children.length === 0) delete node.children;
+      else cleanTree(node.children);
+    });
+  };
+  cleanTree(tree);
+  return tree;
+};
+
+const resetToHomeView = async () => {
+  selectedFile.value = null;
+  showEditor.value = false;
+  searchKeyword.value = '';
+  activeMenu.value = 'all';
+  try {
+    groupMarkdownFiles.value = await getRecentFiles() || [];
+  } catch (error) {
+    ElMessage.error('获取最近文件失败: ' + error.message);
+    groupMarkdownFiles.value = [];
+  }
+};
+
+// Event Handlers from Components
+const handleSelectFile = async (data) => {
   try {
     const files = await markdownList(data.id);
     groupMarkdownFiles.value = files || [];
-    currentGroupName.value = data.grouping;
     selectedFile.value = null;
+    showEditor.value = false;
+    activeMenu.value = `group-${data.id}`;
   } 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 handleGroupDeleted = async () => {
+  await fetchGroupings();
+  await resetToHomeView();
+};
+
+const handleCreateNote = (payload) => {
+  editData.value = payload;
+  showEditor.value = true;
+  selectedFile.value = null; // Ensure preview is hidden
+};
+
+const handleEditorBack = (data) => {
+  showEditor.value = false;
+  previewFile(data);
+};
+
+const handleSaveSuccess = (updatedFile) => {
+  editData.value = updatedFile;
+  if (selectedFile.value && selectedFile.value.id === updatedFile.id) {
+    selectedFile.value = updatedFile;
+  }
+  // Refresh list if needed
+  if (activeMenu.value.startsWith('group-')) {
+    const groupId = activeMenu.value.replace('group-', '');
+    handleSelectFile({ id: groupId });
+  } else {
+    resetToHomeView();
   }
 };
 
-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) {
+  if (!file || 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; // 确保进入预览模式
-
-    // 如果是私密笔记且用户未登录，内容会被后端置空，这里不需要额外提示
-    // 提示信息已经在模板中通过条件渲染显示
+    const content = await Preview(file.id) || '';
+    selectedFile.value = { ...file, 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);
+const editNote = (file) => {
+  editData.value = { ...file };
   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(() => {
-    // 用户取消操作
-  });
+  isCollapsed.value = true; // Collapse sidebar on mobile when editing
 };
 
 const deleteNote = (file) => {
-  ElMessageBox.confirm(
-      `确定要删除笔记 “${file.title}” 吗？`,
-      '警告',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-  ).then(async () => {
+  ElMessageBox.confirm(`确定要删除笔记 “${file.title}” 吗？`, '警告', {
+    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning',
+  }).then(async () => {
     try {
       await deleteMarkdown(file.id);
       ElMessage.success('笔记已删除');
-      selectedFile.value = null; // 关闭预览
-      // 刷新分组和主视图
+      selectedFile.value = null;
       await fetchGroupings();
       await resetToHomeView();
     } catch (error) {
@@ -902,95 +317,77 @@ const deleteNote = (file) => {
   });
 };
 
+const openRenameDialog = (item, type) => {
+  itemToRename.value = { ...item, type };
+  showRenameDialog.value = true;
+};
+
+const handleRenamed = async () => {
+  await fetchGroupings();
+  if (selectedFile.value && itemToRename.value.type === 'file' && selectedFile.value.id === itemToRename.value.id) {
+     previewFile(selectedFile.value); // Refresh preview
+  } else {
+     resetToHomeView();
+  }
+};
+
 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 handleImportSuccess = async () => {
+  await fetchGroupings();
+  await resetToHomeView();
 };
 
-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 handleMoveSuccess = async () => {
+  selectedFile.value = null;
+  await fetchGroupings();
+  await resetToHomeView();
+};
+
+const handlePrivacyChanged = (updatedFile) => {
+  selectedFile.value = updatedFile;
+  const index = groupMarkdownFiles.value.findIndex(f => f.id === updatedFile.id);
+  if (index !== -1) {
+    groupMarkdownFiles.value[index] = updatedFile;
   }
 };
 
 const handleSearch = async () => {
   if (!searchKeyword.value.trim()) {
-    groupMarkdownFiles.value = markdownFiles.value;
+    await resetToHomeView();
     return;
   }
   try {
-    const response = await searchMarkdown(searchKeyword.value);
-    groupMarkdownFiles.value = response || [];
+    groupMarkdownFiles.value = await searchMarkdown(searchKeyword.value) || [];
+    selectedFile.value = null;
+    showEditor.value = false;
+    activeMenu.value = 'search';
   } 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 handleLogout = () => {
+  userStore.logout();
+  ElMessage.success('已退出登录');
+  router.push('/login');
+};
 
+// Export Logic
 const handleExport = async (format) => {
-  if (!selectedFile.value || showExportLoading.value) return;
-
+  if (!selectedFile.value) return;
   try {
     await validateToken();
-  } catch (error) {
+  } catch {
     ElMessage.error('登录已过期，请重新登录');
-    userStore.logout();
-    router.push('/login');
+    handleLogout();
     return;
   }
 
-  const title = sanitizeFilename(selectedFile.value.title);
+  const title = (selectedFile.value.title || '未命名笔记').replace(/[<>:"/\\|?*]/g, '_');
   const content = selectedFile.value.content;
   const previewElement = document.querySelector('.markdown-preview');
 
@@ -999,103 +396,41 @@ const handleExport = async (format) => {
     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;
+    if (format === 'md') {
+      const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
+      downloadBlob(blob, `${title}.md`);
+    } else if (format === 'html') {
+        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;}</style></head><body class="markdown-body"><h1>${title}</h1>${previewElement.innerHTML}</body></html>`;
+        const blob = new Blob([fullHtml], { type: 'text/html;charset=utf-8' });
+        downloadBlob(blob, `${title}.html`);
+    } else if (format === 'pdf') {
+        const canvas = await html2canvas(previewElement, { scale: 2, useCORS: true });
+        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 imgHeight = (canvas.height * pageWidth) / canvas.width;
+        let heightLeft = imgHeight;
+        let position = 10;
+        const imgData = canvas.toDataURL('image/png');
+        pdf.addImage(imgData, 'PNG', 10, position, pageWidth, imgHeight);
+        heightLeft -= pageHeight;
+        while (heightLeft > 0) {
+            position = -pageHeight * (pdf.internal.getNumberOfPages()) + 10;
+            pdf.addPage();
+            pdf.addImage(imgData, 'PNG', 10, position, pageWidth, imgHeight);
+            heightLeft -= pageHeight;
+        }
+        pdf.save(`${title}.pdf`);
     }
     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');
@@ -1105,223 +440,53 @@ const downloadBlob = (blob, filename) => {
   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();
-  }
+// Lifecycle and Watchers
+onMounted(async () => {
+  await fetchGroupings();
+  await resetToHomeView();
+  window.addEventListener('resize', handleResize);
 });
 
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+});
+
+const handleResize = () => {
+  isMobile.value = window.innerWidth < 768;
+  if (isMobile.value) {
+    isCollapsed.value = true;
+  }
+};
+
 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'
-            }
-          });
-        }
+        const contentToRender = (newFile.isPrivate === 1 && !userStore.isLoggedIn) ? privateNoteContent : newFile.content;
+        Vditor.preview(previewElement, contentToRender || '', {
+          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;
-}
-
+/* Global styles can remain if they are truly global */
 .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;
@@ -1329,21 +494,9 @@ const resetUpdatePasswordForm = () => {
   white-space: pre-wrap !important;
   display: block;
 }
+</style>
+
 <style scoped>
-.mobile-title {
-  cursor: pointer;
-}
-
-.mobile-search-container {
-  padding: 0 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
-:deep(.mobile-search-input .el-input__wrapper) {
-  border-radius: 9999px !important;
-}
-
-/* 整体布局 */
 .home-page {
   height: 100vh;
   overflow: hidden;
@@ -1351,97 +504,6 @@ const resetUpdatePasswordForm = () => {
   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;
-}
-
-
-: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;
@@ -1449,176 +511,6 @@ const resetUpdatePasswordForm = () => {
   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;
-  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;
-}
-.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;
-}
-
 .sidebar-overlay {
   position: fixed;
   top: 0;
@@ -1638,14 +530,4 @@ gap: 10px;
   height: 56px;
   box-shadow: 0 4px 12px rgba(0,0,0,.15);
 }
-
-.mobile-menu-header {
-  padding: 20px;
-  text-align: center;
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.mobile-menu-header .username {
-  font-weight: bold;
-  font-size: 16px;
-}
\ No newline at end of file
+</style>
diff --git a/biji-qianduan/src/components/home/HomeHeader.vue b/biji-qianduan/src/components/home/HomeHeader.vue
new file mode 100644
index 0000000..04cfe22
--- /dev/null
+++ b/biji-qianduan/src/components/home/HomeHeader.vue
@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <!-- Desktop Header -->
+    <el-header class="header" v-if="!isMobile">
+      <h1 @click="$emit('reset-view')" style="cursor: pointer; flex-grow: 1;">我的笔记</h1>
+      <div class="actions">
+        <el-input
+            :model-value="searchKeyword"
+            @update:model-value="$emit('update:searchKeyword', $event)"
+            placeholder="搜索笔记标题"
+            class="search-input"
+            @keyup.enter="$emit('search')"
+        >
+          <template #append>
+            <el-button @click="$emit('search')">
+              <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="$emit('logout')">退出</el-button>
+          <el-button type="primary" @click="$emit('show-update-password')">修改密码</el-button>
+          <el-button type="warning" @click="$emit('show-system-settings')">系统管理</el-button>
+          <el-button type="primary" @click="$emit('show-create-note')">新建笔记</el-button>
+          <el-upload
+              class="upload-btn"
+              action=""
+              :show-file-list="false"
+              :before-upload="handleUpload"
+              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>
+
+    <!-- Mobile Header -->
+    <el-header class="header mobile-header" v-if="isMobile">
+      <el-button @click="$emit('toggle-collapse')" text circle class="mobile-menu-toggle">
+        <el-icon size="24"><Menu /></el-icon>
+      </el-button>
+      <h1 class="mobile-title" @click="$emit('reset-view')">我的笔记</h1>
+      <el-button text circle class="mobile-search-toggle" @click="$emit('search')">
+        <el-icon size="22"><Search /></el-icon>
+      </el-button>
+      <el-button v-if="!userStore.isLoggedIn" text circle class="mobile-login-toggle" @click="goToLogin">
+        <el-icon size="24"><User /></el-icon>
+      </el-button>
+    </el-header>
+
+    <!-- Mobile Search Bar -->
+    <div v-if="isMobile" class="mobile-search-container">
+      <el-input
+          :model-value="searchKeyword"
+          @update:model-value="$emit('update:searchKeyword', $event)"
+          placeholder="搜索笔记标题"
+          class="mobile-search-input"
+          @keyup.enter="$emit('search')"
+          size="large"
+      >
+        <template #prefix>
+          <el-icon><Search /></el-icon>
+        </template>
+      </el-input>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Search, Menu, User } from '@element-plus/icons-vue';
+import { useUserStore } from '@/stores/user';
+import { useRouter } from 'vue-router';
+
+const props = defineProps({
+  isMobile: Boolean,
+  searchKeyword: String,
+});
+
+const emit = defineEmits([
+  'update:searchKeyword',
+  'search',
+  'reset-view',
+  'logout',
+  'show-update-password',
+  'show-system-settings',
+  'show-create-note',
+  'upload-markdown',
+  'toggle-collapse'
+]);
+
+const userStore = useUserStore();
+const router = useRouter();
+
+const goToLogin = () => router.push('/login');
+const goToRegister = () => router.push('/register');
+
+const handleUpload = (file) => {
+  emit('upload-markdown', file);
+  return false; // Prevent el-upload's default behavior
+};
+</script>
+
+<style scoped>
+.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 .header {
+  background-color: rgba(30, 30, 47, 0.8);
+}
+
+.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);
+}
+
+.upload-btn {
+  display: inline-block;
+}
+
+.mobile-header {
+  padding: 0 1rem;
+}
+
+.mobile-title {
+  cursor: pointer;
+  flex-grow: 1;
+  text-align: center;
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.mobile-search-container {
+  padding: 0 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+:deep(.mobile-search-input .el-input__wrapper) {
+  border-radius: 9999px !important;
+}
+</style>
diff --git a/biji-qianduan/src/components/home/NoteEditor.vue b/biji-qianduan/src/components/home/NoteEditor.vue
new file mode 100644
index 0000000..cc54b78
--- /dev/null
+++ b/biji-qianduan/src/components/home/NoteEditor.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="note-editor-wrapper">
+    <el-header class="editor-header">
+      <h2 class="editor-title">{{ editData.title }}</h2>
+      <div class="actions">
+        <el-button type="primary" @click="$emit('back', editData)">返回</el-button>
+        <el-button type="success" @click="save">保存</el-button>
+        <span class="save-status">{{ saveStatus }}</span>
+      </div>
+    </el-header>
+    <div id="vditor-editor" class="vditor" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import Vditor from 'vditor';
+import 'vditor/dist/index.css';
+import { ElMessage } from 'element-plus';
+import { updateMarkdown, uploadImage } from '@/api/CommonApi.js';
+
+const props = defineProps({
+  editData: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['back', 'save-success']);
+
+const vditor = ref(null);
+const saveStatus = ref('空闲');
+let debounceTimer = null;
+
+const initVditor = () => {
+  vditor.value = new Vditor('vditor-editor', {
+    height: 'calc(100vh - 120px)',
+    mode: 'ir',
+    after: () => {
+      if (props.editData && props.editData.content) {
+        vditor.value.setValue(props.editData.content);
+      }
+    },
+    input: (value) => {
+      saveStatus.value = '正在输入...';
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        handleSave(value);
+      }, 2000);
+    },
+    upload: {
+      accept: 'image/*',
+      handler(files) {
+        handleImageUpload(files);
+      },
+    },
+  });
+};
+
+const handleImageUpload = async (files) => {
+  const file = files;
+  if (!file) return;
+
+  try {
+    const promise = await uploadImage(file);
+    if (promise.url == null) {
+      ElMessage.error(promise.msg || '图片上传失败');
+      return;
+    }
+    const fullUrl = `${import.meta.env.VITE_API_BASE_URL}${promise.url}`;
+    vditor.value.insertValue(`![${file.name}](${fullUrl})`);
+  } catch (error) {
+    ElMessage.error('图片上传失败: ' + error.message);
+  }
+};
+
+const handleSave = async (content) => {
+  saveStatus.value = '正在保存...';
+  try {
+    const payload = {
+      id: props.editData.id,
+      title: props.editData.title,
+      groupingId: props.editData.groupingId,
+      content: content,
+      fileName: props.editData.fileName || `${props.editData.title}.md`,
+      isPrivate: props.editData.isPrivate,
+    };
+
+    const response = await updateMarkdown(payload);
+    emit('save-success', response);
+    saveStatus.value = '已保存';
+    ElMessage.success('保存成功');
+  } catch (error) {
+    saveStatus.value = '保存失败';
+    ElMessage.error('保存失败: ' + (error.response?.data?.message || error.message));
+  }
+};
+
+const save = () => {
+  if (vditor.value) {
+    handleSave(vditor.value.getValue());
+  }
+};
+
+onMounted(() => {
+  initVditor();
+});
+
+onBeforeUnmount(() => {
+  if (vditor.value) {
+    vditor.value.destroy();
+  }
+  clearTimeout(debounceTimer);
+});
+
+watch(() => props.editData, (newData) => {
+  if (vditor.value && newData) {
+    vditor.value.setValue(newData.content || '');
+  }
+}, { deep: true });
+
+// Expose the save method to the parent
+defineExpose({ save });
+</script>
+
+<style scoped>
+.note-editor-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.editor-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);
+}
+
+.dark-theme .editor-header {
+  background-color: rgba(30, 30, 47, 0.8);
+}
+
+.editor-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.save-status {
+  font-size: 14px;
+  color: var(--text-color-secondary);
+  width: 80px; /* Give it a fixed width to prevent layout shifts */
+  text-align: center;
+}
+
+.vditor {
+  flex-grow: 1;
+  border: none;
+}
+</style>
diff --git a/biji-qianduan/src/components/home/NoteList.vue b/biji-qianduan/src/components/home/NoteList.vue
new file mode 100644
index 0000000..d2cfa21
--- /dev/null
+++ b/biji-qianduan/src/components/home/NoteList.vue
@@ -0,0 +1,80 @@
+<template>
+  <div v-if="files.length > 0" class="file-list">
+    <el-card
+        v-for="file in files"
+        :key="file.id"
+        shadow="hover"
+        class="file-item"
+        :class="{ 'private-note': file.isPrivate === 1 }"
+    >
+      <div @click="$emit('preview', file)" class="file-title">
+        <span>{{ file.title }}</span>
+        <span class="file-group-name">{{ file.groupingName }}</span>
+        <el-icon v-if="file.isPrivate === 1 && !isUserLoggedIn" class="lock-icon"><Lock /></el-icon>
+      </div>
+    </el-card>
+  </div>
+  <el-empty v-else description="暂无笔记，请创建或上传" />
+</template>
+
+<script setup>
+import { Lock } from '@element-plus/icons-vue';
+
+const props = defineProps({
+  files: {
+    type: Array,
+    required: true,
+  },
+  isUserLoggedIn: {
+    type: Boolean,
+    required: true,
+  }
+});
+
+defineEmits(['preview']);
+</script>
+
+<style scoped>
+.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;
+}
+
+.lock-icon {
+  color: var(--text-color-secondary);
+}
+</style>
diff --git a/biji-qianduan/src/components/home/NotePreview.vue b/biji-qianduan/src/components/home/NotePreview.vue
new file mode 100644
index 0000000..152d774
--- /dev/null
+++ b/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>
diff --git a/biji-qianduan/src/components/home/SidebarMenu.vue b/biji-qianduan/src/components/home/SidebarMenu.vue
new file mode 100644
index 0000000..fd9692c
--- /dev/null
+++ b/biji-qianduan/src/components/home/SidebarMenu.vue
@@ -0,0 +1,262 @@
+<template>
+  <el-aside class="sidebar" :width="isCollapsed ? (isMobile ? '0' : '64px') : '250px'">
+    <div class="sidebar-header">
+      <span v-if="!isCollapsed" style="margin-right: 15px; font-weight: bold;">笔记分类</span>
+      <el-button v-if="!isCollapsed" type="primary" size="small" @click="$emit('show-create-group')" circle>
+        <el-icon><Plus /></el-icon>
+      </el-button>
+      <el-button @click="$emit('toggle-collapse')" type="primary" size="small" circle v-if="!isMobile">
+        <el-icon>
+          <Fold v-if="!isCollapsed" />
+          <Expand v-else />
+        </el-icon>
+      </el-button>
+    </div>
+
+    <!-- Desktop Menu -->
+    <el-menu
+        v-if="!isMobile"
+        :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">
+        <component :is="renderMenu(menu)" />
+      </template>
+      <ElMenuItem index="trash" @click="goToTrash">
+        <ElIcon><Delete /></ElIcon>
+        <template #title>回收站</template>
+      </ElMenuItem>
+    </el-menu>
+
+    <!-- Mobile Menu -->
+    <el-menu
+        v-if="isMobile"
+        :default-active="activeMenu"
+        class="el-menu-vertical-demo"
+        :collapse="isCollapsed"
+        :collapse-transition="false"
+    >
+      <div class="mobile-menu-header">
+        <div v-if="userStore.isLoggedIn" class="user-info">
+          <span class="username">欢迎, {{ userStore.userInfo?.username }}</span>
+        </div>
+        <div v-else class="guest-info">
+          <el-button type="primary" @click="goToLogin">登录</el-button>
+          <el-button @click="goToRegister">注册</el-button>
+        </div>
+      </div>
+
+      <template v-for="menu in categoryTree" :key="menu.id">
+        <component :is="renderMenu(menu)" />
+      </template>
+      <ElMenuItem index="trash" @click="goToTrash">
+        <ElIcon><Delete /></ElIcon>
+        <template #title>回收站</template>
+      </ElMenuItem>
+      <ElMenuItem v-if="userStore.isLoggedIn" index="system-settings" @click="$emit('show-system-settings')">
+        <ElIcon><setting /></ElIcon>
+        <template #title>系统管理</template>
+      </ElMenuItem>
+      <ElMenuItem v-if="userStore.isLoggedIn" index="update-password" @click="$emit('show-update-password')">
+        <ElIcon><lock /></ElIcon>
+        <template #title>修改密码</template>
+      </ElMenuItem>
+      <ElMenuItem v-if="userStore.isLoggedIn" index="logout" @click="$emit('logout')">
+        <ElIcon><SwitchButton /></ElIcon>
+        <template #title>退出登录</template>
+      </ElMenuItem>
+    </el-menu>
+  </el-aside>
+</template>
+
+<script setup>
+import { h } from 'vue';
+import { ElSubMenu, ElMenuItem, ElIcon, ElMessageBox, ElTooltip } from 'element-plus';
+import { Folder, Delete, Edit, Plus, Fold, Expand, Setting, Lock, SwitchButton } from '@element-plus/icons-vue';
+import { useUserStore } from '@/stores/user';
+import { useRouter } from 'vue-router';
+import { deleteGrouping } from '@/api/CommonApi.js';
+
+const props = defineProps({
+  isCollapsed: Boolean,
+  isMobile: Boolean,
+  activeMenu: String,
+  categoryTree: Array,
+});
+
+const emit = defineEmits([
+  'select-file',
+  'show-rename-dialog',
+  'show-create-group',
+  'toggle-collapse',
+  'group-deleted',
+  'show-system-settings',
+  'show-update-password',
+  'logout'
+]);
+
+const userStore = useUserStore();
+const router = useRouter();
+
+const goToTrash = () => router.push({ name: 'Trash' });
+const goToLogin = () => router.push('/login');
+const goToRegister = () => router.push('/register');
+
+const handleDeleteGroup = (group) => {
+  ElMessageBox.confirm(
+      `确定要删除分类 “${group.grouping}” 吗？这将同时删除该分类下的所有子分类和笔记。`,
+      '警告',
+      { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
+  ).then(async () => {
+    try {
+      await deleteGrouping(group.id);
+      ElMessage.success('分类已删除');
+      emit('group-deleted');
+    } catch (error) {
+      ElMessage.error('删除分类失败: ' + error.message);
+    }
+  });
+};
+
+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(); emit('show-rename-dialog', 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: !props.isCollapsed,
+    effect: 'dark',
+    offset: 15,
+  }, { default: titleContent });
+
+  if (item.children && item.children.length > 0) {
+    return h(ElSubMenu, {
+      index: `group-${item.id}`,
+      popperClass: props.isCollapsed ? 'hide-popper' : ''
+    }, {
+      title: () => h('div', {
+        class: 'submenu-title-wrapper',
+        onClick: () => emit('select-file', 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: () => emit('select-file', item) }, {
+    default: wrappedContent
+  });
+};
+</script>
+
+<style scoped>
+.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;
+}
+
+: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);
+}
+
+.mobile-menu-header {
+  padding: 20px;
+  text-align: center;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.mobile-menu-header .username {
+  font-weight: bold;
+  font-size: 16px;
+}
+</style>
diff --git a/biji-qianduan/src/components/home/dialogs/CreateGroupDialog.vue b/biji-qianduan/src/components/home/dialogs/CreateGroupDialog.vue
new file mode 100644
index 0000000..72723c5
--- /dev/null
+++ b/biji-qianduan/src/components/home/dialogs/CreateGroupDialog.vue
@@ -0,0 +1,90 @@
+<template>
+  <el-dialog
+      :model-value="visible"
+      title="新建分类"
+      width="400px"
+      @close="handleClose"
+      :close-on-click-modal="false"
+  >
+    <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
+      <el-form-item label="父级分类">
+        <el-cascader
+            v-model="form.parentId"
+            :options="categoryOptions"
+            :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'grouping' }"
+            clearable
+            placeholder="不选则为一级分类"
+            style="width: 100%;"
+        ></el-cascader>
+      </el-form-item>
+      <el-form-item label="分类名称" prop="name">
+        <el-input v-model="form.name" autocomplete="off"></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { addGroupings } from '@/api/CommonApi.js';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  categoryOptions: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['update:visible', 'group-created']);
+
+const formRef = ref(null);
+const form = ref({
+  name: '',
+  parentId: null,
+});
+
+const rules = ref({
+  name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
+});
+
+// 当对话框关闭时，重置表单
+watch(() => props.visible, (newVal) => {
+  if (!newVal && formRef.value) {
+    formRef.value.resetFields();
+    form.value = { name: '', parentId: null };
+  }
+});
+
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+const handleSubmit = async () => {
+  if (!formRef.value) return;
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        const payload = {
+          grouping: form.value.name,
+          parentId: form.value.parentId || 0,
+        };
+        await addGroupings(payload);
+        ElMessage.success('分类创建成功');
+        emit('group-created'); // 通知父组件刷新
+        handleClose();
+      } catch (error) {
+        ElMessage.error('创建分类失败: ' + error.message);
+      }
+    }
+  });
+};
+</script>
diff --git a/biji-qianduan/src/components/home/dialogs/CreateNoteDialog.vue b/biji-qianduan/src/components/home/dialogs/CreateNoteDialog.vue
new file mode 100644
index 0000000..976de75
--- /dev/null
+++ b/biji-qianduan/src/components/home/dialogs/CreateNoteDialog.vue
@@ -0,0 +1,109 @@
+<template>
+  <el-dialog
+      :model-value="visible"
+      title="新建笔记"
+      width="400px"
+      @close="handleClose"
+      :close-on-click-modal="false"
+  >
+    <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
+      <el-form-item label="笔记标题" prop="title">
+        <el-input v-model="form.title" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="选择分类" prop="groupingId">
+        <el-cascader
+            v-model="form.groupingId"
+            :options="categoryOptions"
+            :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'grouping' }"
+            clearable
+            placeholder="请选择笔记所属分类"
+            style="width: 100%;"
+        ></el-cascader>
+      </el-form-item>
+      <el-form-item label="私密笔记">
+        <el-switch
+            v-model="form.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="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  categoryOptions: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['update:visible', 'create-note']);
+
+const formRef = ref(null);
+const form = ref({
+  title: '',
+  groupingId: null,
+  isPrivate: 0,
+});
+
+const rules = ref({
+  title: [{ required: true, message: '请输入笔记标题', trigger: 'blur' }],
+  groupingId: [{ required: true, message: '请选择分类', trigger: 'change' }],
+});
+
+watch(() => props.visible, (newVal) => {
+  if (!newVal && formRef.value) {
+    formRef.value.resetFields();
+    form.value = { title: '', groupingId: null, isPrivate: 0 };
+  }
+});
+
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+const handleSubmit = async () => {
+  if (!formRef.value) return;
+  await formRef.value.validate((valid) => {
+    if (valid) {
+      const payload = {
+        id: null,
+        title: form.value.title,
+        groupingId: form.value.groupingId,
+        fileName: form.value.title + '.md',
+        content: '',
+        isPrivate: form.value.isPrivate,
+      };
+      emit('create-note', payload);
+      handleClose();
+    } else {
+      ElMessage.error('请填写必要的字段');
+    }
+  });
+};
+</script>
+
+<style scoped>
+.form-item-help {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+  line-height: 1.5;
+}
+</style>
diff --git a/biji-qianduan/src/components/home/dialogs/MoveNoteDialog.vue b/biji-qianduan/src/components/home/dialogs/MoveNoteDialog.vue
new file mode 100644
index 0000000..dbd48a1
--- /dev/null
+++ b/biji-qianduan/src/components/home/dialogs/MoveNoteDialog.vue
@@ -0,0 +1,81 @@
+<template>
+  <el-dialog
+      :model-value="visible"
+      title="移动笔记到"
+      width="400px"
+      @close="handleClose"
+      :close-on-click-modal="false"
+  >
+    <el-cascader
+        v-model="moveToGroupId"
+        :options="categoryOptions"
+        :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'grouping' }"
+        clearable
+        placeholder="请选择目标分类"
+        style="width: 100%;"
+    ></el-cascader>
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { updateMarkdown } from '@/api/CommonApi.js';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  categoryOptions: {
+    type: Array,
+    default: () => [],
+  },
+  noteToMove: {
+    type: Object,
+    default: null,
+  }
+});
+
+const emit = defineEmits(['update:visible', 'move-success']);
+
+const moveToGroupId = ref(null);
+
+watch(() => props.visible, (newVal) => {
+  if (!newVal) {
+    moveToGroupId.value = null;
+  }
+});
+
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+const handleSubmit = async () => {
+  if (!moveToGroupId.value) {
+    ElMessage.error('请选择目标分类');
+    return;
+  }
+  if (!props.noteToMove) {
+    ElMessage.error('没有需要移动的笔记');
+    return;
+  }
+
+  try {
+    const payload = {
+      ...props.noteToMove,
+      groupingId: moveToGroupId.value,
+    };
+    await updateMarkdown(payload);
+    ElMessage.success('笔记移动成功');
+    emit('move-success');
+    handleClose();
+  } catch (error) {
+    ElMessage.error('移动失败: ' + error.message);
+  }
+};
+</script>
diff --git a/biji-qianduan/src/components/home/dialogs/PrivacyDialog.vue b/biji-qianduan/src/components/home/dialogs/PrivacyDialog.vue
new file mode 100644
index 0000000..2b1584b
--- /dev/null
+++ b/biji-qianduan/src/components/home/dialogs/PrivacyDialog.vue
@@ -0,0 +1,91 @@
+<template>
+  <el-dialog
+      :model-value="visible"
+      :title="title"
+      width="400px"
+      @close="handleClose"
+      :close-on-click-modal="false"
+  >
+    <div v-if="note">
+      <p>您确定要将笔记 <strong>"{{ note.title }}"</strong> {{ note.isPrivate === 1 ? '设为公开' : '设为私密' }}吗？</p>
+      <div class="privacy-explanation">
+        <el-icon><InfoFilled /></el-icon>
+        <span>{{ explanation }}</span>
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { ElMessage } from 'element-plus';
+import { updateMarkdown } from '@/api/CommonApi.js';
+import { InfoFilled } from '@element-plus/icons-vue';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  note: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['update:visible', 'privacy-changed']);
+
+const title = computed(() => {
+  if (!props.note) return '';
+  return props.note.isPrivate === 1 ? '设为公开笔记' : '设为私密笔记';
+});
+
+const explanation = computed(() => {
+  if (!props.note) return '';
+  return props.note.isPrivate === 1 ? '公开笔记：所有用户都可以查看内容' : '私密笔记：只有登录用户才能查看内容';
+});
+
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+const handleSubmit = async () => {
+  if (!props.note) return;
+
+  try {
+    const newPrivacyStatus = props.note.isPrivate === 1 ? 0 : 1;
+    const payload = {
+      ...props.note,
+      isPrivate: newPrivacyStatus,
+    };
+
+    const updatedFile = await updateMarkdown(payload);
+    ElMessage.success(`笔记已${newPrivacyStatus === 1 ? '设为私密' : '设为公开'}`);
+    emit('privacy-changed', updatedFile);
+    handleClose();
+  } catch (error) {
+    ElMessage.error('修改笔记状态失败: ' + error.message);
+  }
+};
+</script>
+
+<style scoped>
+.privacy-explanation {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  background-color: #f4f4f5;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #909399;
+}
+.dark-theme .privacy-explanation {
+  background-color: #2c2c3e;
+  color: #a9a9a9;
+}
+</style>
diff --git a/biji-qianduan/src/components/home/dialogs/RenameDialog.vue b/biji-qianduan/src/components/home/dialogs/RenameDialog.vue
new file mode 100644
index 0000000..5b06fc0
--- /dev/null
+++ b/biji-qianduan/src/components/home/dialogs/RenameDialog.vue
@@ -0,0 +1,65 @@
+<template>
+  <el-dialog
+      :model-value="visible"
+      title="重命名"
+      width="400px"
+      @close="handleClose"
+      :close-on-click-modal="false"
+  >
+    <el-input v-model="newName" placeholder="请输入新名称" @keyup.enter="handleSubmit"></el-input>
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { updateMarkdownTitle, updateGroupingName } from '@/api/CommonApi.js';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  item: {
+    type: Object,
+    default: () => null,
+  },
+});
+
+const emit = defineEmits(['update:visible', 'renamed']);
+
+const newName = ref('');
+
+watch(() => props.item, (newItem) => {
+  if (newItem) {
+    newName.value = newItem.type === 'file' ? newItem.title : newItem.grouping;
+  }
+});
+
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+const handleSubmit = async () => {
+  if (!newName.value.trim()) {
+    ElMessage.error('名称不能为空');
+    return;
+  }
+  try {
+    if (props.item.type === 'file') {
+      await updateMarkdownTitle({ id: props.item.id, title: newName.value });
+    } else {
+      await updateGroupingName({ id: props.item.id, grouping: newName.value });
+    }
+    ElMessage.success('重命名成功');
+    emit('renamed');
+    handleClose();
+  } catch (error) {
+    ElMessage.error('重命名失败: ' + error.message);
+  }
+};
+</script>
diff --git a/biji-qianduan/src/components/home/dialogs/SelectGroupDialog.vue b/biji-qianduan/src/components/home/dialogs/SelectGroupDialog.vue
new file mode 100644
index 0000000..c2d83ed
--- /dev/null
+++ b/biji-qianduan/src/components/home/dialogs/SelectGroupDialog.vue
@@ -0,0 +1,88 @@
+<template>
+  <el-dialog
+      :model-value="visible"
+      title="选择导入的分类"
+      width="400px"
+      @close="handleClose"
+      :close-on-click-modal="false"
+  >
+    <el-cascader
+        v-model="importGroupId"
+        :options="categoryOptions"
+        :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'grouping' }"
+        clearable
+        placeholder="请选择要导入的分类"
+        style="width: 100%;"
+    ></el-cascader>
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { updateMarkdown } from '@/api/CommonApi.js';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  categoryOptions: {
+    type: Array,
+    default: () => [],
+  },
+  fileToImport: {
+    type: File,
+    default: null,
+  }
+});
+
+const emit = defineEmits(['update:visible', 'import-success']);
+
+const importGroupId = ref(null);
+
+watch(() => props.visible, (newVal) => {
+  if (!newVal) {
+    importGroupId.value = null;
+  }
+});
+
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+const handleSubmit = () => {
+  if (!importGroupId.value) {
+    ElMessage.error('请选择要导入的分类');
+    return;
+  }
+  if (!props.fileToImport) {
+    ElMessage.error('没有需要导入的文件');
+    return;
+  }
+
+  const reader = new FileReader();
+  reader.onload = async (e) => {
+    const content = e.target.result;
+    const payload = {
+      title: props.fileToImport.name.replace(/\.md$/, ''),
+      groupingId: importGroupId.value,
+      content: content,
+      fileName: props.fileToImport.name,
+    };
+    try {
+      await updateMarkdown(payload);
+      ElMessage.success('Markdown 文件导入成功');
+      emit('import-success');
+      handleClose();
+    } catch (error) {
+      ElMessage.error('导入失败: ' + error.message);
+    }
+  };
+  reader.readAsText(props.fileToImport);
+};
+</script>
diff --git a/biji-qianduan/src/components/home/dialogs/SystemSettingsDialog.vue b/biji-qianduan/src/components/home/dialogs/SystemSettingsDialog.vue
new file mode 100644
index 0000000..e80befa
--- /dev/null
+++ b/biji-qianduan/src/components/home/dialogs/SystemSettingsDialog.vue
@@ -0,0 +1,98 @@
+<template>
+  <el-dialog
+      :model-value="visible"
+      title="系统管理"
+      width="500px"
+      @close="handleClose"
+      :close-on-click-modal="false"
+  >
+    <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="handleClose">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import {
+  getRegistrationStatus,
+  toggleRegistration,
+  generateRegistrationCode,
+} from '@/api/CommonApi.js';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:visible']);
+
+const isRegistrationEnabled = ref(true);
+const generatedCode = ref('');
+
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    fetchRegistrationStatus();
+    generatedCode.value = ''; // Reset code when dialog opens
+  }
+});
+
+const fetchRegistrationStatus = async () => {
+  try {
+    isRegistrationEnabled.value = await getRegistrationStatus();
+  } catch (error) {
+    console.error("Failed to fetch registration status:", error);
+    ElMessage.error('获取注册状态失败');
+  }
+};
+
+const handleToggleRegistration = async (value) => {
+  try {
+    await toggleRegistration(value);
+    ElMessage.success(`注册功能已${value ? '开启' : '关闭'}`);
+  } catch (error) {
+    ElMessage.error('操作失败');
+    isRegistrationEnabled.value = !value; // Revert on failure
+  }
+};
+
+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('复制失败');
+  });
+};
+
+const handleClose = () => {
+  emit('update:visible', false);
+};
+</script>
diff --git a/biji-qianduan/src/components/home/dialogs/UpdatePasswordDialog.vue b/biji-qianduan/src/components/home/dialogs/UpdatePasswordDialog.vue
new file mode 100644
index 0000000..ce78999
--- /dev/null
+++ b/biji-qianduan/src/components/home/dialogs/UpdatePasswordDialog.vue
@@ -0,0 +1,97 @@
+<template>
+  <el-dialog
+      :model-value="visible"
+      title="修改密码"
+      width="400px"
+      @close="handleClose"
+      :close-on-click-modal="false"
+  >
+    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
+      <el-form-item label="旧密码" prop="oldPassword">
+        <el-input v-model="form.oldPassword" type="password" show-password autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="新密码" prop="newPassword">
+        <el-input v-model="form.newPassword" type="password" show-password autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="确认新密码" prop="confirmPassword">
+        <el-input v-model="form.confirmPassword" type="password" show-password autocomplete="off"></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { updatePassword } from '@/api/CommonApi.js';
+import { useUserStore } from '@/stores/user';
+import { useRouter } from 'vue-router';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:visible', 'password-updated']);
+const userStore = useUserStore();
+const router = useRouter();
+
+const formRef = ref(null);
+const form = ref({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: '',
+});
+
+const validateConfirmPassword = (rule, value, callback) => {
+  if (value === '') {
+    callback(new Error('请再次输入新密码'));
+  } else if (value !== form.value.newPassword) {
+    callback(new Error("两次输入的新密码不一致"));
+  } else {
+    callback();
+  }
+};
+
+const rules = 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' }],
+});
+
+watch(() => props.visible, (newVal) => {
+  if (!newVal && formRef.value) {
+    formRef.value.resetFields();
+  }
+});
+
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+const handleSubmit = async () => {
+  if (!formRef.value) return;
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        await updatePassword({
+          oldPassword: form.value.oldPassword,
+          newPassword: form.value.newPassword,
+        });
+        ElMessage.success('密码修改成功，请重新登录');
+        emit('password-updated');
+        handleClose();
+        // Logout logic will be handled by the parent component
+      } catch (error) {
+        ElMessage.error('密码修改失败: ' + error.message);
+      }
+    }
+  });
+};
+</script>