From ddff1212ae4e866b388e739b8496ff9e02d15d64 Mon Sep 17 00:00:00 2001
From: wuzilong <704541015@qq.com>
Date: Sat, 12 Sep 2026 19:06:51 +0800
Subject: [PATCH] fix(miniprogram): unify nav headers to dashboard style with
 tall workbench bar

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/bx-ui/bx-placeholder-page.vue  |  23 +---
 .../components/bx-ui/bx-wf-config-page.vue    |   4 +-
 miniprogram/pages/bx/admin/expense-item.vue   |   4 +-
 miniprogram/pages/bx/advance/apply.vue        |   4 +-
 miniprogram/pages/bx/advance/detail.vue       |   4 +-
 miniprogram/pages/bx/advance/list.vue         |   4 +-
 miniprogram/pages/bx/all/list.vue             |   4 +-
 miniprogram/pages/bx/invoice/admin.vue        |   4 +-
 miniprogram/pages/bx/invoice/mine.vue         |   4 +-
 miniprogram/pages/bx/mine/list.vue            |   4 +-
 miniprogram/pages/bx/reimburse/apply.vue      |   4 +-
 miniprogram/pages/bx/reimburse/detail.vue     |   4 +-
 miniprogram/pages/bx/reimburse/list.vue       |   4 +-
 miniprogram/pages/common/biz-placeholder.vue  |  28 ++--
 miniprogram/pages/home/home.vue               |  10 +-
 miniprogram/pages/todo/todo.vue               |  10 +-
 miniprogram/pages/workbench/workbench.vue     |  33 ++---
 miniprogram/styles/bx-theme.scss              |  52 ++------
 miniprogram/styles/db-theme.scss              |   1 +
 miniprogram/styles/index.scss                 |   2 +
 miniprogram/styles/sq-nav-header.scss         | 126 ++++++++++++++++++
 21 files changed, 202 insertions(+), 131 deletions(-)
 create mode 100644 miniprogram/styles/sq-nav-header.scss

diff --git a/miniprogram/components/bx-ui/bx-placeholder-page.vue b/miniprogram/components/bx-ui/bx-placeholder-page.vue
index aa788e7fd..41a3bd8ad 100644
--- a/miniprogram/components/bx-ui/bx-placeholder-page.vue
+++ b/miniprogram/components/bx-ui/bx-placeholder-page.vue
@@ -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>
diff --git a/miniprogram/components/bx-ui/bx-wf-config-page.vue b/miniprogram/components/bx-ui/bx-wf-config-page.vue
index e7317df9c..69433d972 100644
--- a/miniprogram/components/bx-ui/bx-wf-config-page.vue
+++ b/miniprogram/components/bx-ui/bx-wf-config-page.vue
@@ -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" />
diff --git a/miniprogram/pages/bx/admin/expense-item.vue b/miniprogram/pages/bx/admin/expense-item.vue
index e83040e11..1befcbd68 100644
--- a/miniprogram/pages/bx/admin/expense-item.vue
+++ b/miniprogram/pages/bx/admin/expense-item.vue
@@ -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" />
diff --git a/miniprogram/pages/bx/advance/apply.vue b/miniprogram/pages/bx/advance/apply.vue
index f5dc7a45b..a65cbdd0c 100644
--- a/miniprogram/pages/bx/advance/apply.vue
+++ b/miniprogram/pages/bx/advance/apply.vue
@@ -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" />
diff --git a/miniprogram/pages/bx/advance/detail.vue b/miniprogram/pages/bx/advance/detail.vue
index 82331ea9d..3dd2aab6b 100644
--- a/miniprogram/pages/bx/advance/detail.vue
+++ b/miniprogram/pages/bx/advance/detail.vue
@@ -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" />
diff --git a/miniprogram/pages/bx/advance/list.vue b/miniprogram/pages/bx/advance/list.vue
index d4d0af515..3269b34c1 100644
--- a/miniprogram/pages/bx/advance/list.vue
+++ b/miniprogram/pages/bx/advance/list.vue
@@ -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" />
diff --git a/miniprogram/pages/bx/all/list.vue b/miniprogram/pages/bx/all/list.vue
index 7c21ae8f0..8d47e7d4a 100644
--- a/miniprogram/pages/bx/all/list.vue
+++ b/miniprogram/pages/bx/all/list.vue
@@ -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" />
diff --git a/miniprogram/pages/bx/invoice/admin.vue b/miniprogram/pages/bx/invoice/admin.vue
index 9ddc1e057..01b8663c1 100644
--- a/miniprogram/pages/bx/invoice/admin.vue
+++ b/miniprogram/pages/bx/invoice/admin.vue
@@ -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>
diff --git a/miniprogram/pages/bx/invoice/mine.vue b/miniprogram/pages/bx/invoice/mine.vue
index bb86ba7a4..42e249edd 100644
--- a/miniprogram/pages/bx/invoice/mine.vue
+++ b/miniprogram/pages/bx/invoice/mine.vue
@@ -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" />
diff --git a/miniprogram/pages/bx/mine/list.vue b/miniprogram/pages/bx/mine/list.vue
index aecb929fd..5a5961aed 100644
--- a/miniprogram/pages/bx/mine/list.vue
+++ b/miniprogram/pages/bx/mine/list.vue
@@ -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" />
diff --git a/miniprogram/pages/bx/reimburse/apply.vue b/miniprogram/pages/bx/reimburse/apply.vue
index d6aacc1b8..9ce292035 100644
--- a/miniprogram/pages/bx/reimburse/apply.vue
+++ b/miniprogram/pages/bx/reimburse/apply.vue
@@ -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" />
diff --git a/miniprogram/pages/bx/reimburse/detail.vue b/miniprogram/pages/bx/reimburse/detail.vue
index ea7f9f47b..319dc9a59 100644
--- a/miniprogram/pages/bx/reimburse/detail.vue
+++ b/miniprogram/pages/bx/reimburse/detail.vue
@@ -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" />
diff --git a/miniprogram/pages/bx/reimburse/list.vue b/miniprogram/pages/bx/reimburse/list.vue
index ed251f398..45f3501c8 100644
--- a/miniprogram/pages/bx/reimburse/list.vue
+++ b/miniprogram/pages/bx/reimburse/list.vue
@@ -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" />
diff --git a/miniprogram/pages/common/biz-placeholder.vue b/miniprogram/pages/common/biz-placeholder.vue
index a4a27d30f..80a5071b3 100644
--- a/miniprogram/pages/common/biz-placeholder.vue
+++ b/miniprogram/pages/common/biz-placeholder.vue
@@ -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>
diff --git a/miniprogram/pages/home/home.vue b/miniprogram/pages/home/home.vue
index 231d7dbe0..f66e6d461 100644
--- a/miniprogram/pages/home/home.vue
+++ b/miniprogram/pages/home/home.vue
@@ -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" />
diff --git a/miniprogram/pages/todo/todo.vue b/miniprogram/pages/todo/todo.vue
index 63688fdfe..f16b47171 100644
--- a/miniprogram/pages/todo/todo.vue
+++ b/miniprogram/pages/todo/todo.vue
@@ -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" />
diff --git a/miniprogram/pages/workbench/workbench.vue b/miniprogram/pages/workbench/workbench.vue
index 539ec2060..2df5f7077 100644
--- a/miniprogram/pages/workbench/workbench.vue
+++ b/miniprogram/pages/workbench/workbench.vue
@@ -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>
 
diff --git a/miniprogram/styles/bx-theme.scss b/miniprogram/styles/bx-theme.scss
index 84d66181b..a4b35f33d 100644
--- a/miniprogram/styles/bx-theme.scss
+++ b/miniprogram/styles/bx-theme.scss
@@ -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;
diff --git a/miniprogram/styles/db-theme.scss b/miniprogram/styles/db-theme.scss
index de3e76b4b..8a14f050f 100644
--- a/miniprogram/styles/db-theme.scss
+++ b/miniprogram/styles/db-theme.scss
@@ -41,6 +41,7 @@
   color: #333;
   padding: 4px 8px;
   flex-shrink: 0;
+  line-height: 1;
 }
 
 .db-header__title {
diff --git a/miniprogram/styles/index.scss b/miniprogram/styles/index.scss
index aae0e94ed..8968a8e2b 100644
--- a/miniprogram/styles/index.scss
+++ b/miniprogram/styles/index.scss
@@ -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
diff --git a/miniprogram/styles/sq-nav-header.scss b/miniprogram/styles/sq-nav-header.scss
new file mode 100644
index 000000000..02d5e46c0
--- /dev/null
+++ b/miniprogram/styles/sq-nav-header.scss
@@ -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;
+}