瀏覽代碼

fix(miniprogram): restore workbench green header with full-width right user row

Co-authored-by: Cursor <cursoragent@cursor.com>
wuzilong 1 月之前
父節點
當前提交
7547e4e142

+ 3 - 7
miniprogram/pages/home/home.vue

@@ -21,13 +21,9 @@ const goWorkbench = () => {
 
 <template>
   <view class="mp-page mp-page--tab">
-    <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 class="mp-header mp-header--home" :style="safeAreaStyle">
+      <text class="mp-header__title">首页</text>
+      <text class="mp-header__meta">概览与快捷入口(本期占位)</text>
     </view>
     <view class="mp-placeholder">
       <view class="mp-placeholder__icon" />

+ 3 - 7
miniprogram/pages/todo/todo.vue

@@ -17,13 +17,9 @@ onShow(() => {
 
 <template>
   <view class="mp-page mp-page--tab">
-    <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 class="mp-header" :style="safeAreaStyle">
+      <text class="mp-header__title">待办</text>
+      <text class="mp-header__meta">跨模块待办汇总(本期占位)</text>
     </view>
     <view class="mp-placeholder">
       <view class="mp-placeholder__icon" />

+ 15 - 20
miniprogram/pages/workbench/workbench.vue

@@ -69,27 +69,22 @@ const handleLogout = async () => {
 
 <template>
   <view class="mp-page mp-page--tab">
-    <view class="sq-nav-header sq-nav-header--tall" :style="safeAreaStyle">
-      <!-- 第一行:标题左对齐,右侧避开胶囊 -->
-      <view class="sq-nav-header__nav">
-        <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 /><!-- 胶囊占位 -->
+    <view class="mp-header mp-header--workbench" :style="safeAreaStyle">
+      <!-- 标题行:左侧文案,右侧仅避开胶囊 -->
+      <view class="mp-header__title-row">
+        <text class="mp-header__title">工作台</text>
+        <text class="mp-header__meta">选择业务模块,进入对应功能办理</text>
       </view>
-      <!-- 第二行:用户区独立全宽右对齐,不受胶囊列挤压 -->
-      <view class="sq-nav-header__user-row">
-        <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 class="mp-header__user-row">
+        <text class="mp-header__user-name">{{ displayName }}</text>
+        <text
+          class="mp-header__logout"
+          :class="{ 'mp-header__logout--disabled': loggingOut }"
+          @click="handleLogout"
+        >
+          {{ loggingOut ? '退出中…' : '退出登录' }}
+        </text>
       </view>
     </view>
 

+ 24 - 3
miniprogram/styles/mp-shell.scss

@@ -48,14 +48,21 @@ page {
   padding-bottom: 48rpx;
 }
 
+/* 工作台:恢复绿色渐变大头;容器不预留胶囊,用户行可真正右对齐 */
 .mp-header--workbench {
-  /* 加高头部:标题左、用户信息右,并避开胶囊 */
   padding-top: calc(72rpx + var(--sq-safe-top, env(safe-area-inset-top, 0px)));
-  padding-bottom: 72rpx;
+  padding-right: 32rpx;
+  padding-bottom: 56rpx;
+  padding-left: 32rpx;
   min-height: calc(280rpx + var(--sq-safe-top, 0px));
   box-sizing: border-box;
 }
 
+.mp-header__title-row {
+  padding-right: var(--sq-capsule-right-safe, 96px);
+  box-sizing: border-box;
+}
+
 .mp-header__main {
   flex: 1;
   min-width: 0;
@@ -71,6 +78,7 @@ page {
 }
 
 .mp-header__meta {
+  display: block;
   margin-top: 8rpx;
   font-size: 24rpx;
   opacity: 0.9;
@@ -78,6 +86,17 @@ page {
   text-align: left;
 }
 
+.mp-header__user-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16rpx;
+  width: 100%;
+  margin-top: 28rpx;
+  box-sizing: border-box;
+}
+
 .mp-header__user-stack {
   display: flex;
   flex-direction: column;
@@ -94,10 +113,11 @@ page {
   font-size: 26rpx;
   font-weight: 600;
   line-height: 1.3;
-  max-width: 100%;
+  max-width: 45%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-align: right;
 }
 
 .mp-header__logout {
@@ -108,6 +128,7 @@ page {
   border: 1rpx solid rgba(255, 255, 255, 0.45);
   color: #fff;
   opacity: 0.95;
+  flex-shrink: 0;
 }
 
 .mp-header__logout:active {