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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
wuzilongandCursor committed 2026-09-12 19:13:35 +08:00
1 parent 7547e4e142
commit 24572931dc
2 files changed
+52 -16

No files matched your search

+20 -12
View File
@@ -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>