style: separate header back-bar and tabs in InboxHubView on theme-2

This commit is contained in:
2026-06-18 17:37:13 +08:00
parent 074531f705
commit dd7802c6f7

View File

@@ -107,13 +107,12 @@ onActivated(() => {
<template> <template>
<div class="inbox-hub" :class="{ 'inbox-hub--tabs': inboxEnabled }"> <div class="inbox-hub" :class="{ 'inbox-hub--tabs': inboxEnabled }">
<header v-if="!inboxEnabled" class="page-header"> <header class="page-header">
<button type="button" class="back-btn" :aria-label="t('messages.back')" @click="goBack"></button> <button type="button" class="back-btn" :aria-label="t('messages.back')" @click="goBack"></button>
<h1>{{ t(hubTitleKey) }}</h1> <h1>{{ t(hubTitleKey) }}</h1>
</header> </header>
<div v-if="inboxEnabled" class="hub-top-bar"> <div v-if="inboxEnabled" class="hub-top-bar">
<button type="button" class="hub-back-btn" :aria-label="t('messages.back')" @click="goBack"></button>
<nav class="hub-tabs" role="tablist"> <nav class="hub-tabs" role="tablist">
<button <button
type="button" type="button"
@@ -217,26 +216,11 @@ onActivated(() => {
} }
.hub-top-bar { .hub-top-bar {
display: flex;
align-items: stretch;
gap: 6px;
margin: 0; margin: 0;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
.hub-back-btn {
flex-shrink: 0;
align-self: center;
width: 32px;
height: 32px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-card);
color: var(--primary);
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.hub-tabs { .hub-tabs {
flex: 1; flex: 1;