feat(前端): 实现用户登录、注册和搜索功能

- 新增登录和注册页面组件
- 实现用户登录、注册和登出逻辑
- 添加笔记搜索功能
- 更新主页组件，支持用户状态显示和搜索
- 引入 Pinia 状态管理库

biji-qianduan/src/components/HomePage.vue

@@ -49,10 +49,10 @@
             <h2>{{ selectedFile.title }}</h2>
             <div class="actions">
               <el-button v-if="!showEditor" type="primary" @click="selectedFile = null">清空</el-button>
-              <el-button v-if="!showEditor" type="primary" @click="editNote(selectedFile); isCollapsed = true">编辑</el-button>
-              <el-button v-if="!showEditor" type="danger" @click="deleteNote(selectedFile)">删除</el-button>
+              <el-button v-if="!showEditor && userStore.isLoggedIn" type="primary" @click="editNote(selectedFile); isCollapsed = true">编辑</el-button>
+              <el-button v-if="!showEditor && userStore.isLoggedIn" type="danger" @click="deleteNote(selectedFile)">删除</el-button>
               <el-button v-if="showEditor" type="primary" @click="showEditor = !showEditor; previewFile(editData)">返回</el-button>
-              <el-button v-if="showEditor" type="success" @click="handleSave(vditor.getValue())">保存</el-button>
+              <el-button v-if="showEditor && userStore.isLoggedIn" type="success" @click="handleSave(vditor.getValue())">保存</el-button>
             </div>
           </el-header>
           <div v-if="!showEditor" v-html="previewHtml" class="markdown-preview"></div>
@@ -64,8 +64,29 @@
           <el-header class="header">
             <h1>我的笔记</h1>
             <div class="actions">
-              <el-button type="primary" @click="showCreateNoteDialog = true">新建笔记</el-button>
+              <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">
+                <span>欢迎, {{ userStore.userInfo?.username }}</span>
+                <el-button type="danger" @click="handleLogout">退出</el-button>
+              </div>
+              <div v-else>
+                <el-button type="primary" @click="goToLogin">登录</el-button>
+                <el-button @click="goToRegister">注册</el-button>
+              </div>
+              <el-button v-if="userStore.isLoggedIn" type="primary" @click="showCreateNoteDialog = true">新建笔记</el-button>
               <el-upload
+                  v-if="userStore.isLoggedIn"
                 class="upload-btn"
                 action=""
                 :show-file-list="false"
@@ -163,9 +184,16 @@ import {
   groupingId,
   markdownAll, markdownList,
   Preview,
-  updateMarkdown, uploadImage
+  updateMarkdown, uploadImage,
+  searchMarkdown
 } from '@/api/CommonApi.js'
-import { DArrowRight, Plus, Fold, Expand, Folder, Document } from "@element-plus/icons-vue";
+import { DArrowRight, Plus, Fold, Expand, Folder, Document, Search } from "@element-plus/icons-vue";
+import { useUserStore } from '../stores/user';
+import { useRouter } from 'vue-router';
+
+const userStore = useUserStore();
+const router = useRouter();
+const searchKeyword = ref('');
 
 const isGroup1=ref(true)
 // 创建新文件中大分类的信息
@@ -542,6 +570,32 @@ const  chushihua = async () => {
   await fetchMarkdownFiles();
   await fetchGroupings();
 }
+
+const goToLogin = () => {
+  router.push('/login');
+};
+
+const goToRegister = () => {
+  router.push('/register');
+};
+
+const handleLogout = () => {
+  userStore.logout();
+  router.push('/login');
+};
+
+const handleSearch = async () => {
+  if (!searchKeyword.value) {
+    await fetchMarkdownFiles();
+    return;
+  }
+  try {
+    const response = await searchMarkdown(searchKeyword.value);
+    groupMarkdownFiles.value = response.data;
+  } catch (error) {
+    ElMessage.error('搜索失败: ' + error.message);
+  }
+};
 </script>
 
 <style scoped>