feat(mobile): 优化移动端头部功能

- 在移动端标题栏添加登录按钮,未登录时显示- 实现移动端标题栏点击返回主页功能
- 调整移动端搜索栏样式
This commit is contained in:
2025-08-08 16:32:36 +08:00
parent 984036682c
commit 866b997494

View File

@@ -120,10 +120,13 @@
<el-button @click="isCollapsed = !isCollapsed" text circle class="mobile-menu-toggle">
<el-icon size="24"><Menu /></el-icon>
</el-button>
<h1 class="mobile-title">我的笔记</h1>
<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 -->
@@ -335,7 +338,7 @@ import {
generateRegistrationCode,
updatePassword
} from '@/api/CommonApi.js'
import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled, Menu } from "@element-plus/icons-vue";
import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled, Menu, User } from "@element-plus/icons-vue";
import { useUserStore } from '../stores/user';
import { useRouter } from 'vue-router';
import { privateNoteContent } from '../utils/privateNoteContent.js';
@@ -1268,6 +1271,16 @@ const resetUpdatePasswordForm = () => {
}
</style>
.mobile-title {
cursor: pointer;
}
.mobile-search-container {
.mobile-search-container {
margin-bottom: 1.5rem;
}
padding: 0 1.5rem;
margin-bottom: 1.5rem;
}
<style scoped>
/* 整体布局 */
.home-page {