feat: 页头动态标题与返回首页按钮
- 子页面显示对应路由标题,首页/登录页保留品牌信息 - 非首页非登录页显示"← 返回首页"按钮
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user