feat(miniprogram): add workbench logo and welcome user stack above logout

Co-authored-by: Cursor <cursoragent@cursor.com>

miniprogram/pages/workbench/workbench.vue

@@ -6,8 +6,10 @@ import { WORKBENCH_MODULES } from '@/config/workbench-menus'
 import { PAGE_PATHS, WORKBENCH_ROUTE_MAP } from '@/config/api'
 import { filterWorkbenchModules } from '@/utils/workbenchMenuFilter'
 import { getSafeAreaStyle } from '@/utils/safeArea'
+import { DEFAULT_PLACEHOLDER_IMAGE_URL } from '@/utils/staticAsset'
 
 const safeAreaStyle = getSafeAreaStyle()
+const logoUrl = DEFAULT_PLACEHOLDER_IMAGE_URL
 const userStore = useUserStore()
 const modules = computed(() =>
   filterWorkbenchModules(WORKBENCH_MODULES, {
@@ -70,21 +72,27 @@ const handleLogout = async () => {
 <template>
   <view class="mp-page mp-page--tab">
     <view class="mp-header mp-header--workbench" :style="safeAreaStyle">
-      <!-- 标题行：左侧文案，右侧仅避开胶囊 -->
+      <!-- 标题行：左侧 logo + 文案，右侧避开胶囊 -->
       <view class="mp-header__title-row">
-        <text class="mp-header__title">工作台</text>
-        <text class="mp-header__meta">选择业务模块，进入对应功能办理</text>
+        <image class="mp-header__logo" :src="logoUrl" mode="aspectFit" />
+        <view class="mp-header__titles">
+          <text class="mp-header__title">工作台</text>
+          <text class="mp-header__meta">选择业务模块，进入对应功能办理</text>
+        </view>
       </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 class="mp-header__user-stack">
+          <text class="mp-header__welcome">欢迎您</text>
+          <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>
     </view>
 

miniprogram/styles/mp-shell.scss

@@ -63,6 +63,27 @@ page {
   box-sizing: border-box;
 }
 
+.mp-header__brand {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20rpx;
+  min-width: 0;
+}
+
+.mp-header__logo {
+  height: 64rpx;
+  width: auto;
+  flex-shrink: 0;
+  border-radius: 12rpx;
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.mp-header__brand-text {
+  flex: 1;
+  min-width: 0;
+}
+
 .mp-header__main {
   flex: 1;
   min-width: 0;
@@ -91,7 +112,6 @@ page {
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
-  gap: 16rpx;
   width: 100%;
   margin-top: 28rpx;
   box-sizing: border-box;
@@ -104,16 +124,23 @@ page {
   justify-content: center;
   gap: 8rpx;
   flex-shrink: 0;
-  max-width: 42%;
+  max-width: 70%;
   text-align: right;
   margin-left: auto;
 }
 
+.mp-header__welcome {
+  font-size: 22rpx;
+  line-height: 1.3;
+  opacity: 0.9;
+  text-align: right;
+}
+
 .mp-header__user-name {
-  font-size: 26rpx;
+  font-size: 28rpx;
   font-weight: 600;
   line-height: 1.3;
-  max-width: 45%;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -121,6 +148,7 @@ page {
 }
 
 .mp-header__logout {
+  margin-top: 4rpx;
   font-size: 22rpx;
   line-height: 1.3;
   padding: 6rpx 16rpx;