feat: 页头动态标题与返回首页按钮

- 子页面显示对应路由标题,首页/登录页保留品牌信息
- 非首页非登录页显示"← 返回首页"按钮
This commit is contained in:
2026-05-23 22:54:58 +08:00
parent ad847973bc
commit f586332ab2
+32 -1
View File
@@ -1,6 +1,17 @@
<template>
<div class="head surface-card">
<div class="brand-block">
<el-button
v-if="showBackButton"
text
class="back-btn"
@click="router.push('/welcome')"
>
返回首页
</el-button>
<template v-if="pageTitle">
<h1 class="head-title">{{ pageTitle }}</h1>
</template>
<div v-else class="brand-block">
<p class="brand-title">学习进度跟踪系统</p>
<p class="brand-subtitle">把学习变成可记录可回顾可持续的日常流程</p>
</div>
@@ -25,6 +36,8 @@ import { logout } from "@/api/login";
const route = useRoute();
const isLoginRoute = computed(() => route.path === "/login");
const showBackButton = computed(() => route.path !== "/login" && route.path !== "/welcome");
const pageTitle = computed(() => route.meta?.title as string | undefined);
const handleLogout = async () => {
try {
@@ -63,6 +76,24 @@ const handleLogout = async () => {
color: var(--text-secondary);
}
.head-title {
margin: 0;
font-size: clamp(18px, 2.4vw, 24px);
font-weight: 700;
color: var(--green-900);
flex: 1;
}
.back-btn {
font-size: 14px;
color: var(--green-700);
padding: 0 4px;
flex-shrink: 0;
}
.back-btn:hover {
color: var(--green-900);
}
.logout-btn {
border-color: var(--green-600);
color: var(--green-700);