cykj/shanxia2.0
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(miniprogram): unify nav headers to dashboard style with tall workbench bar

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
wuzilongandCursor committed 2026-09-12 19:06:51 +08:00
1 parent aa2da07c99
commit ddff1212ae
21 files changed
+202 -131
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

miniprogram/components/bx-ui/bx-placeholder-page.vue
+7 -16
View File
@@ -23,12 +23,14 @@ onLoad(() => {})
<template>
<view class="mp-page">
<view class="mp-header" :style="safeAreaStyle">
<view class="bx-ph__nav" @click="goBack">
<text class="bx-ph__back">← 工作台</text>
<view class="sq-nav-header" :style="safeAreaStyle">
<view class="sq-nav-header__nav">
<view class="sq-nav-header__left">
<text class="sq-nav-header__back" @click="goBack">←</text>
<text class="sq-nav-header__title">{{ title }}</text>
</view>
<view /><!-- 胶囊占位 -->
</view>
<text class="mp-header__title" style="margin-top: 16rpx">{{ title }}</text>
<text class="mp-header__meta">报销管理 · 业务迁移中</text>
</view>
<view class="mp-placeholder">
<view class="mp-placeholder__icon" />
@@ -39,14 +41,3 @@ onLoad(() => {})
</view>
</view>
</template>
<style lang="scss" scoped>
.bx-ph__nav {
min-height: 44rpx;
}
.bx-ph__back {
color: #fff;
font-size: 26rpx;
opacity: 0.95;
}
</style>
miniprogram/components/bx-ui/bx-wf-config-page.vue
+1 -3
View File
@@ -2,9 +2,7 @@
<view class="bx-page">
<view class="topbar" :style="safeAreaStyle">
<view class="topbar-left">
<view class="topbar-back" @click="onBack">
<text class="topbar-back-icon">‹</text>
</view>
<text class="topbar-back" @click="onBack">←</text>
<text class="topbar-title">{{ pageTitle }}</text>
</view>
<view class="topbar-right" />
miniprogram/pages/bx/admin/expense-item.vue
+1 -3
View File
@@ -2,9 +2,7 @@
<view class="bx-page">
<view class="topbar" :style="safeAreaStyle">
<view class="topbar-left">
<view class="topbar-back" @click="onBack">
<text class="topbar-back-icon">‹</text>
</view>
<text class="topbar-back" @click="onBack">←</text>
<text class="topbar-title">费用项目管理</text>
</view>
<view class="topbar-right" />
miniprogram/pages/bx/advance/apply.vue
+1 -3
View File
@@ -2,9 +2,7 @@
<view class="bx-page bx-page--form">
<view class="topbar" :style="safeAreaStyle">
<view class="topbar-left">
<view class="topbar-back" @click="goBack">
<text class="topbar-back-icon">‹</text>
</view>
<text class="topbar-back" @click="goBack">←</text>
<text class="topbar-title">备用金申请</text>
</view>
<view class="topbar-right" />
miniprogram/pages/bx/advance/detail.vue
+1 -3
View File
@@ -2,9 +2,7 @@
<view class="bx-page bx-page--form">
<view class="topbar" :style="safeAreaStyle">
<view class="topbar-left">
<view class="topbar-back" @click="goBack">
<text class="topbar-back-icon">‹</text>
</view>
<text class="topbar-back" @click="goBack">←</text>
<text class="topbar-title">备用金详情</text>
</view>
<view class="topbar-right" />
miniprogram/pages/bx/advance/list.vue
+1 -3
View File
@@ -2,9 +2,7 @@
<view class="bx-page">
<view class="topbar" :style="safeAreaStyle">
<view class="topbar-left">
<view class="topbar-back" @click="goBack">
<text class="topbar-back-icon">‹</text>
</view>
<text class="topbar-back" @click="goBack">←</text>
<text class="topbar-title">备用金申请</text>
</view>
<view class="topbar-right" />
miniprogram/pages/bx/all/list.vue
+1 -3
View File
@@ -2,9 +2,7 @@
<view class="bx-page">
<view class="topbar" :style="safeAreaStyle">
<view class="topbar-left">
<view class="topbar-back" @click="goBack">
<text class="topbar-back-icon">‹</text>
</view>
<text class="topbar-back" @click="goBack">←</text>
<text class="topbar-title">全部申请单</text>
</view>
<view class="topbar-right" />
miniprogram/pages/bx/invoice/admin.vue
+1 -3
View File
@@ -2,9 +2,7 @@
<view class="bx-page">
<view class="topbar" :style="safeAreaStyle">
<view class="topbar-left">
<view class="topbar-back" @click="onBack">
<text class="topbar-back-icon">‹</text>
</view>
<text class="topbar-back" @click="onBack">←</text>
<text class="topbar-title">{{
detailUser ? detailUser.ownerUserName || '发票夹详情' : '发票夹管理'
}}</text>
miniprogram/pages/bx/invoice/mine.vue
+1 -3
View File
@@ -2,9 +2,7 @@
<view class="bx-page">
<view class="topbar" :style="safeAreaStyle">
<view class="topbar-left">
<view class="topbar-back" @click="goBack">
<text class="topbar-back-icon">‹</text>
</view>
<text class="topbar-back" @click="goBack">←</text>
<text class="topbar-title">我的发票夹</text>
</view>
<view class="topbar-right" />
miniprogram/pages/bx/mine/list.vue
+1 -3
View File
@@ -2,9 +2,7 @@
<view class="bx-page">
<view class="topbar" :style="safeAreaStyle">
<view class="topbar-left">
<view class="topbar-back" @click="goBack">
<text class="topbar-back-icon">‹</text>
</view>
<text class="topbar-back" @click="goBack">←</text>
<text class="topbar-title">我的申请单</text>
</view>
<view class="topbar-right" />
miniprogram/pages/bx/reimburse/apply.vue
+1 -3
View File
@@ -2,9 +2,7 @@
<view class="bx-page bx-page--form">
<view class="topbar" :style="safeAreaStyle">
<view class="topbar-left">
<view class="topbar-back" @click="goBack">
<text class="topbar-back-icon">‹</text>
</view>
<text class="topbar-back" @click="goBack">←</text>
<text class="topbar-title">报销申请</text>
</view>
<view class="topbar-right" />
miniprogram/pages/bx/reimburse/detail.vue
+1 -3
View File
@@ -2,9 +2,7 @@
<view class="bx-page bx-page--form">
<view class="topbar" :style="safeAreaStyle">
<view class="topbar-left">
<view class="topbar-back" @click="goBack">
<text class="topbar-back-icon">‹</text>
</view>
<text class="topbar-back" @click="goBack">←</text>
<text class="topbar-title">报销详情</text>
</view>
<view class="topbar-right" />
miniprogram/pages/bx/reimburse/list.vue
+1 -3
View File
@@ -2,9 +2,7 @@
<view class="bx-page">
<view class="topbar" :style="safeAreaStyle">
<view class="topbar-left">
<view class="topbar-back" @click="goBack">
<text class="topbar-back-icon">‹</text>
</view>
<text class="topbar-back" @click="goBack">←</text>
<text class="topbar-title">报销申请</text>
</view>
<view class="topbar-right" />
miniprogram/pages/common/biz-placeholder.vue
+10 -18
View File
@@ -23,12 +23,14 @@ const goBack = () => {
<template>
<view class="mp-page">
<view class="mp-header" :style="safeAreaStyle">
<view class="biz-placeholder__nav" @click="goBack">
<text class="biz-placeholder__back">← 工作台</text>
<view class="sq-nav-header" :style="safeAreaStyle">
<view class="sq-nav-header__nav">
<view class="sq-nav-header__left">
<text class="sq-nav-header__back" @click="goBack">←</text>
<text class="sq-nav-header__title">{{ title }}</text>
</view>
<view /><!-- 胶囊占位 -->
</view>
<text class="mp-header__title" style="margin-top: 16rpx">{{ title }}</text>
<text v-if="moduleTitle" class="mp-header__meta">{{ moduleTitle }}</text>
</view>
<view class="mp-placeholder">
<view class="mp-placeholder__icon" />
@@ -36,26 +38,16 @@ const goBack = () => {
<text class="mp-placeholder__desc">
P0 壳层已就绪，业务列表/详情将在后续阶段（P1–P4）实现。
</text>
<text v-if="moduleTitle" class="biz-placeholder__code">{{ moduleTitle }}</text>
<text v-if="code" class="biz-placeholder__code">菜单编码：{{ code }}</text>
</view>
</view>
</template>
<style lang="scss" scoped>
.biz-placeholder__nav {
min-height: 44rpx;
}
.biz-placeholder__back {
color: #fff;
font-size: 26rpx;
opacity: 0.95;
}
.biz-placeholder__code {
display: block;
margin-top: 12rpx;
margin-top: 16rpx;
font-size: 22rpx;
color: #9aa8a1;
color: #94a3b8;
}
</style>
miniprogram/pages/home/home.vue
+7 -3
View File
@@ -21,9 +21,13 @@ const goWorkbench = () => {
<template>
<view class="mp-page mp-page--tab">
<view class="mp-header mp-header--home" :style="safeAreaStyle">
<text class="mp-header__title">首页</text>
<text class="mp-header__meta">概览与快捷入口（本期占位）</text>
<view class="sq-nav-header" :style="safeAreaStyle">
<view class="sq-nav-header__nav">
<view class="sq-nav-header__left">
<text class="sq-nav-header__title">首页</text>
</view>
<view /><!-- 胶囊占位 -->
</view>
</view>
<view class="mp-placeholder">
<view class="mp-placeholder__icon" />
miniprogram/pages/todo/todo.vue
+7 -3
View File
@@ -17,9 +17,13 @@ onShow(() => {
<template>
<view class="mp-page mp-page--tab">
<view class="mp-header" :style="safeAreaStyle">
<text class="mp-header__title">待办</text>
<text class="mp-header__meta">跨模块待办汇总（本期占位）</text>
<view class="sq-nav-header" :style="safeAreaStyle">
<view class="sq-nav-header__nav">
<view class="sq-nav-header__left">
<text class="sq-nav-header__title">待办</text>
</view>
<view /><!-- 胶囊占位 -->
</view>
</view>
<view class="mp-placeholder">
<view class="mp-placeholder__icon" />
miniprogram/pages/workbench/workbench.vue
+18 -15
View File
@@ -69,22 +69,25 @@ const handleLogout = async () => {
<template>
<view class="mp-page mp-page--tab">
<view class="mp-header mp-header--workbench" :style="safeAreaStyle">
<view class="mp-header__row">
<view class="mp-header__main">
<text class="mp-header__title">工作台</text>
<text class="mp-header__meta">选择业务模块，进入对应功能办理</text>
</view>
<view class="mp-header__user-stack">
<text class="mp-header__user-name">{{ displayName }}</text>
<text
class="mp-header__logout"
:class="{ 'mp-header__logout--disabled': loggingOut }"
@click="handleLogout"
>
{{ loggingOut ? '退出中…' : '退出登录' }}
</text>
<view class="sq-nav-header sq-nav-header--tall" :style="safeAreaStyle">
<view class="sq-nav-header__nav">
<view class="sq-nav-header__main">
<view class="sq-nav-header__left sq-nav-header__left--stack">
<text class="sq-nav-header__title">工作台</text>
<text class="sq-nav-header__meta">选择业务模块，进入对应功能办理</text>
</view>
<view class="sq-nav-header__user">
<text class="sq-nav-header__user-name">{{ displayName }}</text>
<text
class="sq-nav-header__logout"
:class="{ 'sq-nav-header__logout--disabled': loggingOut }"
@click="handleLogout"
>
{{ loggingOut ? '退出中…' : '退出登录' }}
</text>
</view>
</view>
<view /><!-- 胶囊占位 -->
</view>
</view>
miniprogram/styles/bx-theme.scss
+12 -40
View File
@@ -70,7 +70,7 @@
padding-top: 5px;
}
/* Topbar */
/* Topbar — 对齐仪表盘白底顶栏 */
.bx-page .topbar {
position: sticky;
top: 0;
@@ -79,66 +79,38 @@
grid-template-columns: minmax(0, 1fr) var(--sq-capsule-right-safe, 96px);
align-items: center;
height: var(--sq-header-height, calc(44px + 44px));
padding: var(--sq-safe-top, 44px) 12px 0;
padding: var(--sq-safe-top, 44px) 12px 0 8px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 1px 0 rgba(217, 232, 226, 0.85), 0 8px 20px rgba(15, 23, 42, 0.06);
}
.bx-page .topbar::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: var(--sq-header-height, calc(44px + 44px));
background: linear-gradient(
135deg,
rgba(16, 185, 129, 0.1),
rgba(236, 253, 245, 0.55) 45%,
rgba(255, 255, 255, 0) 100%
);
pointer-events: none;
}
.bx-page .topbar > view,
.bx-page .topbar > text {
position: relative;
background: #fff;
border-bottom: 1px solid #eee;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.bx-page .topbar-left {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
gap: 8px;
min-width: 0;
}
.bx-page .topbar-back {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
border-radius: 10px;
font-size: 20px;
color: #333;
padding: 4px 8px;
flex-shrink: 0;
line-height: 1;
}
.bx-page .topbar-back:active {
opacity: 0.75;
}
.bx-page .topbar-back-icon {
font-size: 22px;
line-height: 1;
font-weight: 500;
}
.bx-page .topbar-title {
text-align: left;
font-size: 17px;
font-weight: 800;
font-weight: 700;
color: #111827;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
miniprogram/styles/db-theme.scss
+1
View File
@@ -41,6 +41,7 @@
color: #333;
padding: 4px 8px;
flex-shrink: 0;
line-height: 1;
}
.db-header__title {
miniprogram/styles/index.scss
+2
View File
@@ -5,6 +5,8 @@
@import './variables.scss';
@import './mp-shell.scss';
@import './mp-biz.scss';
@import './sq-nav-header.scss';
/* 地磅模块主题在各 db 页内按需 @import db-theme.scss，避免污染全局壳色 */
// ============================================
// Reset
miniprogram/styles/sq-nav-header.scss
+126
View File
@@ -0,0 +1,126 @@
// 统一页顶栏（对齐地磅「仪表盘」白底顶栏）
// 结构：safe-top + nav 行；左侧返回←/标题；右侧预留胶囊；工作台可加用户区
.sq-nav-header {
position: sticky;
top: 0;
z-index: 50;
background: #fff;
border-bottom: 1px solid #eee;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
height: var(--sq-header-height, calc(44px + 44px));
padding-top: var(--sq-safe-top, 44px);
box-sizing: border-box;
}
/* 工作台等：加高，容纳标题+副文案+右侧用户 */
.sq-nav-header--tall {
height: auto;
min-height: calc(var(--sq-header-height, 88px) + 72px);
padding-bottom: 28px;
}
.sq-nav-header__nav {
height: var(--sq-nav-height, 44px);
display: grid;
grid-template-columns: minmax(0, 1fr) var(--sq-capsule-right-safe, 96px);
align-items: center;
padding: 0 12px 0 8px;
box-sizing: border-box;
}
.sq-nav-header--tall .sq-nav-header__nav {
height: auto;
min-height: var(--sq-nav-height, 44px);
align-items: center;
}
.sq-nav-header__main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 0;
width: 100%;
}
.sq-nav-header__left {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
min-width: 0;
}
.sq-nav-header__left--stack {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.sq-nav-header__back {
font-size: 20px;
color: #333;
padding: 4px 8px;
flex-shrink: 0;
line-height: 1;
}
.sq-nav-header__title {
font-size: 17px;
font-weight: 700;
color: #111827;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.sq-nav-header__meta {
font-size: 12px;
color: #6b7280;
line-height: 1.4;
text-align: left;
}
.sq-nav-header__user {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 8px;
flex-shrink: 0;
max-width: 42%;
text-align: right;
margin-left: auto;
}
.sq-nav-header__user-name {
font-size: 13px;
font-weight: 600;
color: #111827;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sq-nav-header__logout {
font-size: 12px;
line-height: 1.3;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid #d1d5db;
color: #374151;
background: #fff;
}
.sq-nav-header__logout:active {
background: #f3f4f6;
}
.sq-nav-header__logout--disabled {
opacity: 0.55;
pointer-events: none;
}