feat: 页头动态标题与返回首页按钮
- 子页面显示对应路由标题,首页/登录页保留品牌信息 - 非首页非登录页显示"← 返回首页"按钮
This commit is contained in:
@@ -1,6 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="head surface-card">
|
<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-title">学习进度跟踪系统</p>
|
||||||
<p class="brand-subtitle">把学习变成可记录、可回顾、可持续的日常流程</p>
|
<p class="brand-subtitle">把学习变成可记录、可回顾、可持续的日常流程</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -25,6 +36,8 @@ import { logout } from "@/api/login";
|
|||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const isLoginRoute = computed(() => route.path === "/login");
|
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 () => {
|
const handleLogout = async () => {
|
||||||
try {
|
try {
|
||||||
@@ -63,6 +76,24 @@ const handleLogout = async () => {
|
|||||||
color: var(--text-secondary);
|
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 {
|
.logout-btn {
|
||||||
border-color: var(--green-600);
|
border-color: var(--green-600);
|
||||||
color: var(--green-700);
|
color: var(--green-700);
|
||||||
|
|||||||
Reference in New Issue
Block a user