feat: 添加返回导航功能

- 个人中心页面添加返回首页按钮
- 抬头管理添加页面添加返回按钮
- 优化页面导航流程,提升用户体验
This commit is contained in:
Wei_佳 2025-11-17 18:46:13 +08:00
parent ee580ff22c
commit 0eff495f75
2 changed files with 89 additions and 2 deletions

View File

@ -35,6 +35,14 @@
<!-- 右侧表单区 -->
<div class="content-area">
<div class="content-section">
<!-- 返回按钮 -->
<div class="back-button" @click="handleBack">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>返回</span>
</div>
<n-form
ref="formRef"
:model="formData"
@ -246,6 +254,11 @@ const menuList = ref([
}
])
//
function handleBack() {
router.push('/user-center')
}
//
function handleMenuClick(menu) {
if (menu.id === 'invoice') return
@ -263,9 +276,9 @@ async function handleSubmit() {
// await api.addInvoiceHeader(formData.value)
$message.success('保存成功')
//
//
setTimeout(() => {
router.back()
router.push('/user-center')
}, 500)
} catch (error) {
$message.error('保存失败,请重试')
@ -393,6 +406,35 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.back-button {
position: absolute;
top: 24px;
left: 24px;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
color: #606266;
cursor: pointer;
border-radius: 4px;
transition: all 0.3s ease;
font-size: 14px;
}
.back-button:hover {
background: #F5F7FA;
color: #A30113;
}
.back-button svg {
transition: transform 0.3s ease;
}
.back-button:hover svg {
transform: translateX(-2px);
}
.invoice-form {

View File

@ -34,6 +34,14 @@
<!-- 右侧内容区 -->
<div class="content-area">
<!-- 返回按钮 -->
<div class="back-button" @click="handleBackToHome">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>返回首页</span>
</div>
<!-- 估值记录 -->
<div v-if="currentMenu === 'history'" class="content-section">
<div class="asset-grid">
@ -306,6 +314,11 @@ function handleDownloadCertificate(item) {
$message.info('下载证书功能开发中')
}
//
function handleBackToHome() {
router.push('/home')
}
//
function handleMenuClick(menu) {
currentMenu.value = menu.id
@ -437,6 +450,37 @@ onMounted(() => {
flex: 1;
padding: 20px;
overflow-y: auto;
position: relative;
}
.back-button {
position: absolute;
top: 20px;
left: 20px;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
color: #606266;
cursor: pointer;
border-radius: 4px;
transition: all 0.3s ease;
font-size: 14px;
background: white;
z-index: 10;
}
.back-button:hover {
background: #F5F7FA;
color: #A30113;
}
.back-button svg {
transition: transform 0.3s ease;
}
.back-button:hover svg {
transform: translateX(-2px);
}
.content-section {
@ -445,6 +489,7 @@ onMounted(() => {
padding: 24px;
min-height: calc(100vh - 40px);
position: relative;
margin-top: 50px;
}
/* 估值记录 */