From 88909258cc94304d48eb17d8bd828564468d134c Mon Sep 17 00:00:00 2001
From: zzh <1368735060@qq.com>
Date: Sat, 24 Oct 2026 18:51:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=A2=E6=88=B7=E9=97=A8=E6=88=B7?=
 =?UTF-8?q?=E5=8F=AF=E6=8A=98=E5=8F=A0=E4=BE=A7=E6=A0=8F=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=EF=BC=8C=E5=8E=BB=E6=8E=89=E9=A1=B5=E7=AD=BE=E5=B9=B6=E5=8C=BA?=
 =?UTF-8?q?=E5=88=86=E6=89=93=E5=8D=B0=E5=85=A5=E5=8F=A3=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

运营端顶栏布局不变；客户侧栏按常用/仓储/更多分组，余额与打印沉底，打印提示按门户区分。

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/前端页面设计规范.md                      |   18 +-
 src/components.d.ts                           |    1 +
 src/components/ContactService/index.vue       |   78 +-
 .../PrintTemplate/OrderPrintModal.vue         |    7 +-
 src/components/customer-side-rail/index.vue   | 1115 +++++++++++++++++
 src/components/top-nav/RightTopMessage.vue    |   16 +-
 src/components/top-nav/RightTopUser.vue       |  157 ++-
 src/components/top-nav/SelectLang.vue         |    9 +-
 src/components/top-nav/index.vue              |   65 +-
 src/layout/default-layout.vue                 |   81 +-
 src/locale/en-US.ts                           |   14 +
 src/locale/zh-CN.ts                           |   14 +
 src/utils/customer-portal-nav.ts              |  334 +++++
 src/utils/hiprint/dispatchPrintUrl.ts         |    3 +-
 src/utils/hiprint/printControlHints.ts        |   14 +
 src/views/operation/printLabel/index.vue      |    4 +-
 src/views/order/myOrders/index.vue            |    6 +-
 src/views/warehouse/parcel/index.vue          |    4 +-
 18 files changed, 1892 insertions(+), 48 deletions(-)
 create mode 100644 src/components/customer-side-rail/index.vue
 create mode 100644 src/utils/customer-portal-nav.ts
 create mode 100644 src/utils/hiprint/printControlHints.ts

diff --git a/docs/前端页面设计规范.md b/docs/前端页面设计规范.md
index 92b6bdd..9852214 100644
--- a/docs/前端页面设计规范.md
+++ b/docs/前端页面设计规范.md
@@ -27,19 +27,31 @@
 
 ```
 a-layout (垂直)
-├── TopNav（顶部导航，fixed）
+├── TopNav（仅运营端，fixed）
 ├── a-layout-content
-│   ├── paddingTop: 顶部导航高度 + Tab 栏高度（可选）
-│   └── PageLayout（router-view + keep-alive）
+│   ├── 运营端：paddingTop = 顶栏 + Tab；PageLayout
+│   └── 客户门户：CustomerSideRail（全高）+ PageLayout（无顶栏、无多页签）
 └── Footer（可选）
 ```
 
+运营端布局 DOM/样式与改前一致；客户门户不挂载 TopNav / TabBar。
+
 **约定：**
 
 - 主内容背景色：`#f0f3f4`
 - 页面容器使用 `[class$='-container']`，统一 `padding: 16px`
 - 内容区域使用 `overflow: hidden`、`height: 100%` 保证高度正确
 
+**客户门户 vs 运营端导航（差异约定）：**
+
+| | 运营端 | 客户门户 |
+|---|---|---|
+| 顶栏 | 一级模块 + hover 二级 + 右侧余额/打印/用户 | **无顶栏** |
+| 页签 | TabBar 多页签 | **无多页签**（当前页仅由侧栏高亮表达） |
+| 侧栏 | 无全局侧栏 | **全高可折叠左栏**（默认展开）：顶 Logo；中按「常用 / 仓储 / 更多」浅分组；**资产与账户收进用户下拉**；底沉余额/打印（含下载）/消息/仓库；**语言收进用户菜单** |
+| 高亮 | 路由最长路径匹配 | 侧栏最长路径匹配；账户类路由高亮底栏用户区 |
+| 数据 | RBAC 菜单树原样 | 仍用同一菜单树，`flatMap` 二级即可，不改表结构 |
+
 ### 2.2 页面内容结构
 
 单页内容推荐结构：
diff --git a/src/components.d.ts b/src/components.d.ts
index 4502aec..705769d 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -18,6 +18,7 @@ declare module 'vue' {
     CodeMirror: typeof import('./components/CodeMirror/index.vue')['default']
     CompleteContactModal: typeof import('./components/CompleteContactModal/index.vue')['default']
     ContactService: typeof import('./components/ContactService/index.vue')['default']
+    CustomerSideRail: typeof import('./components/customer-side-rail/index.vue')['default']
     CustomLeftMenu: typeof import('./components/CustomLeftMenu/index.vue')['default']
     CustomList: typeof import('./components/CustomList/index.vue')['default']
     DrawerPro: typeof import('./components/DrawerPro/index.vue')['default']
diff --git a/src/components/ContactService/index.vue b/src/components/ContactService/index.vue
index ad4d2ae..aa34834 100644
--- a/src/components/ContactService/index.vue
+++ b/src/components/ContactService/index.vue
@@ -4,12 +4,18 @@ import { useI18n } from 'vue-i18n'
 import { getWarehouseList } from '@/api/system/warehouse'
 import { useCurrentWarehouseStore } from '@/store'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
-    variant?: 'navbar' | 'login'
+    variant?: 'navbar' | 'login' | 'sider'
+    /** 下拉位置；侧栏沉底用 rt */
+    dropdownPosition?: 'br' | 'bl' | 'tr' | 'tl' | 'rt' | 'rb'
+    /** 侧栏收起：窄宽展示缩略文案（无图标） */
+    compact?: boolean
   }>(),
   {
     variant: 'navbar',
+    dropdownPosition: 'br',
+    compact: false,
   },
 )
 
@@ -22,6 +28,17 @@ const displayName = computed(
     t('nav.contactService.selectWarehouse'),
 )
 
+/** 收起时只露一字，避免无图标时空块 */
+const labelText = computed(() => {
+  const name = displayName.value
+  if (props.variant === 'sider' && props.compact) {
+    return name.slice(0, 1) || '仓'
+  }
+  return name
+})
+
+const useDropdown = computed(() => props.variant === 'navbar' || props.variant === 'sider')
+
 async function loadServiceDataList() {
   try {
     const { items } = await getWarehouseList({
@@ -51,15 +68,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="contact-service" :class="`contact-service--${variant}`">
-    <!-- 顶栏：与语言切换一致，悬停出菜单，无箭头/无 icon -->
+  <div
+    class="contact-service"
+    :class="[
+      `contact-service--${variant}`,
+      { 'is-compact': compact },
+    ]"
+  >
     <a-dropdown
-      v-if="variant === 'navbar'"
+      v-if="useDropdown"
       trigger="hover"
-      position="br"
+      :position="dropdownPosition"
       :popup-max-height="320"
     >
-      <span class="contact-service__label">{{ displayName }}</span>
+      <span class="contact-service__label" :title="displayName">
+        <span class="contact-service__text">{{ labelText }}</span>
+      </span>
       <template #content>
         <a-doption
           v-for="opt in warehouseStore.options"
@@ -73,7 +97,6 @@ onMounted(() => {
       </template>
     </a-dropdown>
 
-    <!-- 登录页等：保留选择器 -->
     <a-select
       v-else
       :model-value="warehouseStore.warehouseId"
@@ -98,11 +121,18 @@ onMounted(() => {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
+  min-width: 0;
 
   &__select {
     min-width: 120px;
   }
 
+  &__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   &--navbar {
     color: #fff;
 
@@ -128,6 +158,38 @@ onMounted(() => {
     }
   }
 
+  &--sider {
+    width: 100%;
+
+    .contact-service__label {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      min-height: 32px;
+      padding: 0 8px;
+      border-radius: 8px;
+      font-size: 12px;
+      color: var(--color-text-2);
+      cursor: pointer;
+      transition: background-color 0.14s ease, color 0.14s ease;
+
+      &:hover {
+        color: var(--color-text-1);
+        background: rgba(255, 255, 255, 0.72);
+      }
+    }
+
+    &.is-compact .contact-service__label {
+      justify-content: center;
+      padding: 0 2px;
+      min-width: 28px;
+      min-height: 28px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+  }
+
   &--login {
     :deep(.arco-select-view) {
       min-width: 120px;
diff --git a/src/components/PrintTemplate/OrderPrintModal.vue b/src/components/PrintTemplate/OrderPrintModal.vue
index a3040ec..45c8858 100644
--- a/src/components/PrintTemplate/OrderPrintModal.vue
+++ b/src/components/PrintTemplate/OrderPrintModal.vue
@@ -2,7 +2,7 @@
   <a-modal
     :visible="visible"
     :title="modalTitle"
-    :width="mode === 'batch' ? 640 : 480"
+    :width="mode === 'batch' ? 760 : 600"
     :mask-closable="false"
     unmount-on-close
     modal-class="order-print-modal"
@@ -139,6 +139,7 @@ import {
   type HiprintPrinterInfo,
 } from '@/utils/hiprint/hiprintElectronSocket';
 import { useHiprintClientState } from '@/utils/hiprint/hiprintClientState';
+import { tPrintControlHint } from '@/utils/hiprint/printControlHints';
 import { resolveOmsAssetUrl } from '@/api/oms/common';
 import PrintOptionsForm from '@/components/PrintTemplate/PrintOptionsForm.vue';
 import { fetchPrintAssetBytes, openPrintAssetInNewTab } from '@/utils/printPreview';
@@ -243,7 +244,7 @@ const printerStatusText = computed(() => {
   if (hiprintClientState.connecting) return '正在连接本机打印程序…';
   if (hiprintClientState.connected) return '本机打印已就绪，可一键自动打印';
   if (hiprintClientState.enabled) return '打印程序连接中，请稍候…';
-  return '未连接，请先打开页面顶部「打印」开关';
+  return tPrintControlHint('modalOff');
 });
 
 const footerBusy = computed(() => printingActive.value || printingAll.value);
@@ -551,7 +552,7 @@ async function printAll() {
 
 .print-status-bar__right {
   flex-shrink: 0;
-  width: 180px;
+  width: 220px;
 }
 
 .print-printer-select {
diff --git a/src/components/customer-side-rail/index.vue b/src/components/customer-side-rail/index.vue
new file mode 100644
index 0000000..70600fb
--- /dev/null
+++ b/src/components/customer-side-rail/index.vue
@@ -0,0 +1,1115 @@
+<template>
+  <aside
+    class="customer-side-rail"
+    :class="{
+      'is-collapsed': collapsed,
+      'is-compact': compactLayout,
+      'is-animating': animating,
+    }"
+    :style="{
+      width: `${railWidth}px`,
+      '--csr-shell-width': `${CUSTOMER_SIDE_RAIL_EXPANDED_WIDTH}px`,
+    }"
+    aria-label="客户门户导航"
+    @transitionend="onRailTransitionEnd"
+  >
+    <!-- Linear/Notion：内层固定展开宽，外层只动画 width + overflow 裁切，避免内容重排跳动 -->
+    <div class="customer-side-rail__shell">
+    <a
+      class="customer-side-rail__brand"
+      href="/"
+      :title="t('brand.fullName')"
+      @click.prevent="goOfficialSite"
+    >
+      <img :src="navLogo" :alt="t('brand.name')" class="customer-side-rail__brand-logo" />
+      <span class="customer-side-rail__brand-name customer-side-rail__fade">{{ t('brand.name') }}</span>
+    </a>
+
+    <div class="customer-side-rail__scroll">
+      <section
+        v-for="(group, groupIndex) in menuGroups"
+        :key="group.id"
+        class="customer-side-rail__group"
+        :class="{ 'is-first': groupIndex === 0 }"
+      >
+        <div
+          v-if="menuGroups.length > 1"
+          class="customer-side-rail__label customer-side-rail__fade"
+        >
+          {{ groupLabel(group) }}
+        </div>
+        <div
+          v-show="compactLayout && groupIndex > 0"
+          class="customer-side-rail__divider"
+          aria-hidden="true"
+        />
+
+        <a-tooltip
+          v-for="item in group.items"
+          :key="navKey(item)"
+          :content="formatTitle(item)"
+          position="right"
+          :disabled="!compactLayout"
+        >
+          <button
+            type="button"
+            class="customer-side-rail__item"
+            :class="{ active: isActive(item) }"
+            :aria-current="isActive(item) ? 'page' : undefined"
+            :data-nav-path="getCustomerNavPath(item)"
+            @pointerenter="prefetch(item)"
+            @click="onNavigate(item)"
+          >
+            <span class="customer-side-rail__icon">
+              <component :is="getSubMenuIcon(item, undefined, MENU_NAME_TO_LOCALE_KEY)" />
+            </span>
+            <span class="customer-side-rail__text customer-side-rail__fade">
+              {{ formatTitle(item) }}
+            </span>
+          </button>
+        </a-tooltip>
+      </section>
+    </div>
+
+    <!-- 底栏：用户+余额 → 工具一行 → 仓库+收起 -->
+    <div class="customer-side-rail__dock">
+      <div
+        class="customer-side-rail__user-row"
+        :class="{ 'is-account-active': isAccountRouteActive }"
+      >
+        <div class="customer-side-rail__user">
+          <RightTopUser
+            :compact="compactLayout"
+            dropdown-position="rt"
+            :account-menus="accountMenus"
+            show-language-menu
+          />
+        </div>
+        <div
+          class="customer-side-rail__user-balance customer-side-rail__fade"
+          :class="{ 'is-balance-active': isBalanceRouteActive }"
+        >
+          <a-dropdown trigger="hover" position="rt">
+            <div
+              class="customer-side-rail__balance-trigger"
+              :title="`${t('nav.balance.label')}: ¥${balanceDisplay}`"
+            >
+              <span class="customer-side-rail__balance-currency">¥</span>
+              <span class="customer-side-rail__balance-value">{{ balanceDisplay }}</span>
+            </div>
+            <template #content>
+              <a-doption @click="() => onBalanceMenuClick('recharge')">
+                {{ t('nav.balance.recharge') }}
+              </a-doption>
+              <a-doption @click="() => onBalanceMenuClick('rechargeRecord')">
+                {{ t('nav.balance.rechargeRecord') }}
+              </a-doption>
+              <a-doption @click="() => onBalanceMenuClick('accountFlow')">
+                {{ t('nav.balance.accountFlow') }}
+              </a-doption>
+              <a-doption :disabled="balanceRefreshing" @click="onRefreshBalance">
+                {{ t('nav.balance.refresh') }}
+              </a-doption>
+            </template>
+          </a-dropdown>
+        </div>
+      </div>
+
+      <div class="customer-side-rail__utils">
+        <a-dropdown trigger="hover" position="rt">
+          <button
+            type="button"
+            class="customer-side-rail__tool"
+            :class="{
+              'is-enabled': printConnectionState.enabled,
+              'is-loading': printConnectionState.connecting,
+            }"
+            :title="printConnectionTitle"
+            :aria-label="t('nav.printControl.menu')"
+          >
+            <icon-printer />
+            <span class="customer-side-rail__tool-dot" aria-hidden="true" />
+          </button>
+          <template #content>
+            <a-doption
+              :disabled="printConnectionState.connecting"
+              @click="onPrintConnectionClick"
+            >
+              {{ printConnectionTitle }}
+            </a-doption>
+            <a-doption @click="onPrintDownloadClick">
+              {{ t('nav.printControl.download') }}
+            </a-doption>
+          </template>
+        </a-dropdown>
+
+        <div class="customer-side-rail__tool-slot">
+          <RightTopMessage dropdown-position="rt" />
+        </div>
+      </div>
+
+      <div class="customer-side-rail__footer-row">
+        <div class="customer-side-rail__warehouse">
+          <ContactService variant="sider" dropdown-position="rt" :compact="compactLayout" />
+        </div>
+        <button
+          type="button"
+          class="customer-side-rail__toggle"
+          :aria-label="collapsed ? '展开菜单' : '收起菜单'"
+          :title="collapsed ? '展开菜单' : '收起菜单'"
+          @click="toggleCollapsed"
+        >
+          <icon-double-right v-if="collapsed" class="customer-side-rail__toggle-icon" />
+          <icon-double-left v-else class="customer-side-rail__toggle-icon" />
+        </button>
+      </div>
+    </div>
+    </div>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { Message } from '@arco-design/web-vue'
+import {
+  IconDoubleLeft,
+  IconDoubleRight,
+  IconPrinter,
+} from '@arco-design/web-vue/es/icon'
+import { useRbacUserStore } from '@/store/modules/rbac-user'
+import { getSubMenuIcon } from '@/utils/menu-icon'
+import { MENU_NAME_TO_LOCALE_KEY, translateMenuTitle } from '@/utils/menu-i18n'
+import { openWindow, regexUrl } from '@/utils'
+import {
+  initHiprintClientState,
+  setHiprintClientEnabled,
+  useHiprintClientState,
+} from '@/utils/hiprint/hiprintClientState'
+import { PRINT_CONTROL_DOWNLOAD_URL } from '@/constants/printControl'
+import navLogo from '@/assets/logo2.png'
+import { resolveCurrentCustomer } from '@/api/customer/resolve'
+import { CUSTOMER_BALANCE_CHANGED_EVENT } from '@/api/customer/accountFlow'
+import { getMapIdFromAccessToken } from '@/utils/jwt'
+import {
+  buildCustomerFlatNavMenus,
+  CUSTOMER_SIDE_RAIL_COLLAPSED_WIDTH,
+  CUSTOMER_SIDE_RAIL_EXPANDED_WIDTH,
+  getCustomerNavPath,
+  groupCustomerNavMenus,
+  isCustomerBalanceMenuPath,
+  matchCustomerActiveNavPath,
+  partitionCustomerNavMenus,
+  isCustomerAccountNavPath,
+  readCustomerSideRailCollapsed,
+  writeCustomerSideRailCollapsed,
+  type CustomerNavGroup,
+  type CustomerNavItem,
+} from '@/utils/customer-portal-nav'
+import { resolvePortalDrawerPanel } from '@/views/user/portal-drawer/types'
+import { openPortalSideDrawer } from '@/views/user/portal-drawer/usePortalSideDrawer'
+import ContactService from '@/components/ContactService/index.vue'
+import RightTopMessage from '@/components/top-nav/RightTopMessage.vue'
+import RightTopUser from '@/components/top-nav/RightTopUser.vue'
+
+const { t, te } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const rbacUserStore = useRbacUserStore()
+const printConnectionState = useHiprintClientState()
+
+/** 与 CSS transition 时长一致（Linear 风格约 300ms） */
+const RAIL_ANIM_MS = 300
+
+const collapsed = ref(readCustomerSideRailCollapsed(false))
+/** 布局紧凑态：动画结束后再切，避免收起中途图标跳动 */
+const compactLayout = ref(collapsed.value)
+const animating = ref(false)
+let compactTimer = 0
+
+const railWidth = computed(() =>
+  collapsed.value ? CUSTOMER_SIDE_RAIL_COLLAPSED_WIDTH : CUSTOMER_SIDE_RAIL_EXPANDED_WIDTH,
+)
+
+const flatMenus = computed(() => {
+  if (!rbacUserStore.isCustomerPortal()) return [] as CustomerNavItem[]
+  return buildCustomerFlatNavMenus(
+    rbacUserStore.menus || [],
+    rbacUserStore.loginPortalType,
+  )
+})
+
+/** 侧栏只留「办事」；资产与账户收进用户下拉 */
+const menuGroups = computed(() =>
+  groupCustomerNavMenus(flatMenus.value, { foldAccountIntoUserMenu: true }),
+)
+
+/** 用户下拉：账户类入口，但去掉余额下拉已有的充值/流水等 */
+const accountMenus = computed(() =>
+  partitionCustomerNavMenus(flatMenus.value).account.filter(
+    (item) => !isCustomerBalanceMenuPath(getCustomerNavPath(item)),
+  ),
+)
+
+const activePath = computed(() =>
+  matchCustomerActiveNavPath(route.path, flatMenus.value),
+)
+
+const balanceOwnedPath = computed(() => {
+  const path = activePath.value || route.path
+  return isCustomerBalanceMenuPath(path) ? path : ''
+})
+
+/** 非资金类账户路由高亮用户区；资金类由余额入口承接 */
+const isAccountRouteActive = computed(() => {
+  if (balanceOwnedPath.value) return false
+  return isCustomerAccountNavPath(activePath.value || route.path)
+})
+
+const isBalanceRouteActive = computed(() => !!balanceOwnedPath.value)
+
+const printConnectionTitle = computed(() => {
+  if (printConnectionState.connecting) return '打印连接中…'
+  return printConnectionState.enabled ? '打印已连接，点击断开' : '打印未连接，点击连接'
+})
+
+const customerBalance = ref<number | null>(null)
+const balanceRefreshing = ref(false)
+let balanceInflight: Promise<void> | null = null
+
+const balanceDisplay = computed(() => {
+  const raw = customerBalance.value
+  if (raw == null) return '0.00'
+  const parsed = Number(raw)
+  return Number.isFinite(parsed) ? parsed.toFixed(2) : '0.00'
+})
+
+async function fetchCustomerBalance() {
+  if (!rbacUserStore.isCustomerPortal() || !rbacUserStore.isLoggedIn) {
+    customerBalance.value = null
+    return
+  }
+  const mapId = getMapIdFromAccessToken(rbacUserStore.accessToken)
+  const account = rbacUserStore.userInfo?.account?.trim() || ''
+  const data = await resolveCurrentCustomer({ mapId, account, force: true })
+  const raw = data?.accountBalance ?? data?.balance
+  if (raw == null || raw === '') {
+    customerBalance.value = 0
+    return
+  }
+  const parsed = Number(raw)
+  customerBalance.value = Number.isFinite(parsed) ? parsed : 0
+}
+
+function loadCustomerBalance() {
+  if (!balanceInflight) {
+    balanceInflight = fetchCustomerBalance().finally(() => {
+      balanceInflight = null
+    })
+  }
+  return balanceInflight
+}
+
+async function onRefreshBalance() {
+  if (balanceRefreshing.value) return
+  balanceRefreshing.value = true
+  const previous = customerBalance.value
+  try {
+    await loadCustomerBalance()
+    Message.success(t('nav.balance.refreshed'))
+  } catch (error) {
+    console.error('Failed to load customer balance', error)
+    customerBalance.value = previous
+    Message.error(t('nav.balance.refreshFailed'))
+  } finally {
+    balanceRefreshing.value = false
+  }
+}
+
+function onBalanceMenuClick(key: string) {
+  if (key === 'recharge') {
+    router.push({ name: 'VipRechargeDeposit' })
+  } else if (key === 'rechargeRecord') {
+    router.push({ name: 'FinanceRechargeRecord' })
+  } else if (key === 'accountFlow') {
+    router.push({ name: 'FinanceAccountFlow' })
+  }
+}
+
+function handleCustomerBalanceChanged() {
+  void loadCustomerBalance().catch((error) => {
+    console.error('Failed to load customer balance', error)
+  })
+}
+
+function groupLabel(group: CustomerNavGroup) {
+  if (te(group.labelKey)) return t(group.labelKey)
+  return group.labelFallback
+}
+
+function navKey(item: CustomerNavItem) {
+  return getCustomerNavPath(item) || String(item.id || item.name)
+}
+
+function formatTitle(item: CustomerNavItem) {
+  return translateMenuTitle(t, {
+    name: item.name,
+    route: item.route || item.path,
+    path: item.path || item.route,
+    meta: item.meta,
+  })
+}
+
+function isActive(item: CustomerNavItem) {
+  const path = getCustomerNavPath(item)
+  return !!path && path === activePath.value
+}
+
+function scrollActiveNavIntoView() {
+  if (!activePath.value || isAccountRouteActive.value) return
+  void nextTick(() => {
+    const el = document.querySelector(
+      `.customer-side-rail__item[data-nav-path="${CSS.escape(activePath.value)}"]`,
+    ) as HTMLElement | null
+    el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+  })
+}
+
+function toggleCollapsed() {
+  const next = !collapsed.value
+  collapsed.value = next
+  writeCustomerSideRailCollapsed(next)
+  animating.value = true
+
+  if (compactTimer) {
+    window.clearTimeout(compactTimer)
+    compactTimer = 0
+  }
+
+  if (next) {
+    // 收起：先变窄 + 文案淡出，接近结束再切 compact
+    compactTimer = window.setTimeout(() => {
+      compactLayout.value = true
+      compactTimer = 0
+    }, Math.max(0, RAIL_ANIM_MS - 48))
+  } else {
+    // 展开：立刻退出 compact，让文案有空间淡入
+    compactLayout.value = false
+  }
+}
+
+function onRailTransitionEnd(e: TransitionEvent) {
+  if (e.target !== e.currentTarget) return
+  if (e.propertyName !== 'width') return
+  animating.value = false
+  compactLayout.value = collapsed.value
+}
+
+function goOfficialSite() {
+  window.location.href = '/'
+}
+
+function prefetch(item: CustomerNavItem) {
+  const rawPath = getCustomerNavPath(item)
+  if (!rawPath || regexUrl.test(rawPath)) return
+  const targetPath = rawPath.startsWith('/') ? rawPath : `/${rawPath}`
+  try {
+    const resolved = router.resolve(targetPath)
+    const rec = resolved.matched[resolved.matched.length - 1]
+    const loader = rec?.components?.default as unknown
+    if (typeof loader === 'function') {
+      const result = (loader as () => unknown)()
+      if (result && typeof (result as Promise<unknown>).then === 'function') {
+        ;(result as Promise<unknown>).catch(() => undefined)
+      }
+    }
+  } catch {
+    // ignore
+  }
+}
+
+function onNavigate(item: CustomerNavItem) {
+  let targetPath = getCustomerNavPath(item)
+  if (!targetPath) return
+  if (!targetPath.startsWith('/') && !regexUrl.test(targetPath)) {
+    targetPath = `/${targetPath}`
+  }
+  if (regexUrl.test(targetPath)) {
+    openWindow(targetPath)
+    return
+  }
+  const portalPanel = resolvePortalDrawerPanel(targetPath)
+  if (portalPanel) {
+    openPortalSideDrawer(portalPanel)
+    return
+  }
+  if (router.currentRoute.value.path === targetPath) return
+  router.push(targetPath).catch(() => undefined)
+}
+
+async function onPrintConnectionClick() {
+  if (printConnectionState.connecting) return
+  try {
+    await setHiprintClientEnabled(!printConnectionState.enabled)
+  } catch (e: any) {
+    Message.warning(`连接失败：${e?.message || '请先启动 hiprint 客户端'}`)
+  }
+}
+
+function onPrintDownloadClick() {
+  window.open(PRINT_CONTROL_DOWNLOAD_URL, '_blank', 'noopener,noreferrer')
+}
+
+watch(
+  () => rbacUserStore.isCustomerPortal(),
+  (ok) => {
+    if (!ok) return
+    collapsed.value = readCustomerSideRailCollapsed(false)
+    compactLayout.value = collapsed.value
+  },
+)
+
+watch(
+  () =>
+    [rbacUserStore.isLoggedIn, rbacUserStore.loginPortalType, rbacUserStore.accessToken] as const,
+  () => {
+    void loadCustomerBalance().catch((error) => {
+      console.error('Failed to load customer balance', error)
+      if (customerBalance.value == null) customerBalance.value = 0
+    })
+  },
+  { immediate: true },
+)
+
+watch(activePath, () => {
+  scrollActiveNavIntoView()
+}, { immediate: true })
+
+onMounted(() => {
+  initHiprintClientState().catch(() => undefined)
+  window.addEventListener(CUSTOMER_BALANCE_CHANGED_EVENT, handleCustomerBalanceChanged)
+})
+
+onUnmounted(() => {
+  if (compactTimer) {
+    window.clearTimeout(compactTimer)
+    compactTimer = 0
+  }
+  window.removeEventListener(CUSTOMER_BALANCE_CHANGED_EVENT, handleCustomerBalanceChanged)
+})
+</script>
+
+<style lang="less" scoped>
+.customer-side-rail {
+  --csr-pad-x: 14px;
+  --csr-item-h: 44px;
+  --csr-radius: 10px;
+  /* 与右侧内容卡片一致（如 account-flow-page-card） */
+  --csr-panel-radius: 4px;
+  --csr-panel-inset: 16px;
+  --csr-shell-width: 200px;
+  --csr-ease: cubic-bezier(0.32, 0.72, 0, 1);
+  --csr-dur: 0.3s;
+
+  flex-shrink: 0;
+  align-self: stretch;
+  box-sizing: border-box;
+  height: calc(100% - var(--csr-panel-inset) * 2);
+  margin: var(--csr-panel-inset) 0 var(--csr-panel-inset) var(--csr-panel-inset);
+  min-height: 0;
+  overflow: hidden;
+  background: var(--app-card-bg, #fff);
+  border-radius: var(--csr-panel-radius);
+  /* 外层只动画宽度；内容在 shell 内固定宽，不随变窄重排（Linear / Notion） */
+  transition: width var(--csr-dur) var(--csr-ease);
+  will-change: width;
+  z-index: 10;
+
+  @media (prefers-reduced-motion: reduce) {
+    --csr-dur: 0.01ms;
+  }
+
+  &__shell {
+    width: var(--csr-shell-width);
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  /* 文案：收起先淡出，展开略延迟淡入 */
+  &__fade {
+    opacity: 1;
+    transform: translateX(0);
+    transition:
+      opacity 0.18s ease,
+      transform 0.18s var(--csr-ease);
+  }
+
+  &.is-collapsed &__fade {
+    opacity: 0;
+    transform: translateX(-6px);
+    pointer-events: none;
+    transition-duration: 0.12s;
+    transition-timing-function: ease-in;
+  }
+
+  &:not(.is-collapsed) &__fade {
+    transition-delay: 0.1s;
+  }
+
+  &__brand {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    flex-shrink: 0;
+    min-height: 56px;
+    padding: 10px 16px;
+    color: inherit;
+    text-decoration: none;
+    border-bottom: 1px solid var(--color-border-2, rgba(0, 0, 0, 0.06));
+  }
+
+  &__footer-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  &__warehouse {
+    flex: 1;
+    min-width: 0;
+
+    :deep(.contact-service--sider) {
+      width: 100%;
+    }
+
+    :deep(.contact-service--sider .contact-service__label) {
+      min-height: 32px;
+      padding: 0 8px;
+      font-size: 12px;
+      justify-content: flex-start;
+    }
+  }
+
+  &__brand-logo {
+    display: block;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    /* 与登录页一致：contain 避免 cover 裁切发糊；圆角过大也会让小图发软 */
+    object-fit: contain;
+    border-radius: 0;
+    image-rendering: -webkit-optimize-contrast;
+  }
+
+  &__brand-name {
+    min-width: 0;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--color-text-1);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 14px var(--csr-pad-x) 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    scrollbar-width: thin;
+  }
+
+  &__group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    &:not(.is-first) {
+      margin-top: 4px;
+      padding-top: 8px;
+      border-top: 1px solid var(--color-border-2, rgba(0, 0, 0, 0.06));
+    }
+  }
+
+  &__label {
+    padding: 0 12px 4px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    color: var(--color-text-3);
+    line-height: 1.2;
+    user-select: none;
+  }
+
+  &__divider {
+    width: 22px;
+    height: 1px;
+    margin: 8px auto 10px;
+    background: var(--color-border-2, rgba(0, 0, 0, 0.08));
+  }
+
+  &__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    min-height: var(--csr-item-h);
+    padding: 0 12px 0 14px;
+    border: none;
+    border-radius: var(--csr-radius);
+    background: transparent;
+    color: var(--color-text-2);
+    cursor: pointer;
+    text-align: left;
+    box-shadow: inset 0 0 0 0 transparent;
+    transition:
+      background-color 0.14s ease,
+      color 0.14s ease,
+      box-shadow 0.14s ease;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      width: 3px;
+      height: 0;
+      border-radius: 0 3px 3px 0;
+      background: var(--app-primary-color, rgb(var(--primary-6)));
+      transform: translateY(-50%);
+      opacity: 0;
+      transition:
+        height 0.16s var(--csr-ease),
+        opacity 0.16s ease;
+    }
+
+    &:hover {
+      color: var(--color-text-1);
+      background: rgba(255, 255, 255, 0.72);
+    }
+
+    &.active {
+      color: var(--app-primary-color, rgb(var(--primary-6)));
+      background: color-mix(in srgb, var(--app-primary-color, #1d7281) 12%, #fff);
+      font-weight: 600;
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-primary-color, #1d7281) 18%, transparent);
+
+      &::before {
+        height: 22px;
+        opacity: 1;
+      }
+
+      .customer-side-rail__icon {
+        color: var(--app-primary-color, rgb(var(--primary-6)));
+      }
+
+      .customer-side-rail__text {
+        color: var(--app-primary-color, rgb(var(--primary-6)));
+      }
+    }
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+    font-size: 17px;
+    color: var(--color-text-3);
+    transition: color 0.14s ease;
+  }
+
+  &__item:hover &__icon {
+    color: var(--color-text-1);
+  }
+
+  &__text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+    line-height: 1.35;
+  }
+
+  &__dock {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 10px var(--csr-pad-x) 12px;
+    border-top: 1px solid var(--color-border-2, rgba(0, 0, 0, 0.06));
+  }
+
+  &__user-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    padding: 2px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.45);
+    transition:
+      background-color 0.14s ease,
+      box-shadow 0.14s ease;
+
+    &.is-account-active {
+      background: color-mix(in srgb, var(--app-primary-color, #1d7281) 12%, #fff);
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-primary-color, #1d7281) 18%, transparent);
+
+      :deep(.user-dropdown-trigger) {
+        color: var(--app-primary-color, rgb(var(--primary-6)));
+      }
+    }
+  }
+
+  &__user-balance {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    max-width: 72px;
+    min-width: 0;
+    height: 36px;
+    padding-right: 4px;
+    border-radius: 8px;
+
+    &.is-balance-active {
+      background: color-mix(in srgb, var(--app-primary-color, #1d7281) 12%, #fff);
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-primary-color, #1d7281) 18%, transparent);
+    }
+  }
+
+  &__balance-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    max-width: 100%;
+    min-width: 0;
+    height: 32px;
+    padding: 0 4px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: var(--app-primary-color);
+    font-weight: 600;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.02em;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  &__balance-currency {
+    flex-shrink: 0;
+    margin-right: 1px;
+    opacity: 0.85;
+    font-weight: 600;
+  }
+
+  &__balance-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* 工具：打印（含下载）/ 消息 */
+  &__utils {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 2px;
+    padding: 2px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  &__tool {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 32px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--color-text-3);
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 16px;
+
+    &:hover {
+      color: var(--color-text-1);
+      background: rgba(255, 255, 255, 0.95);
+    }
+
+    &.is-enabled {
+      color: var(--app-primary-color);
+    }
+
+    &.is-loading {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+  }
+
+  &__tool-dot {
+    position: absolute;
+    top: 5px;
+    right: 7px;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--color-text-4, #c9cdd4);
+  }
+
+  &__tool.is-enabled &__tool-dot {
+    background: rgb(var(--green-6));
+  }
+
+  &__tool-slot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    border-radius: 8px;
+    color: var(--color-text-3);
+
+    :deep(.dropDown),
+    :deep(.lang-icon),
+    :deep(.arco-badge) {
+      color: inherit;
+    }
+
+    :deep(.lang-icon) {
+      font-size: 16px;
+    }
+
+    :deep(.message-dropdown-trigger) {
+      height: 32px;
+      min-width: 28px;
+      padding: 0 4px;
+    }
+  }
+
+  &__user {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+
+    :deep(.user-dropdown-trigger) {
+      width: 100%;
+      max-width: none;
+      height: 36px;
+      padding: 0 8px;
+      color: var(--color-text-1);
+    }
+
+    :deep(.user-dropdown-trigger:hover) {
+      background: rgba(255, 255, 255, 0.85);
+    }
+
+    :deep(.user-dropdown-trigger.is-compact) {
+      width: 36px;
+      height: 36px;
+      padding: 0;
+      margin: 0;
+    }
+
+    :deep(.user-name) {
+      max-width: none;
+      font-size: 13px;
+    }
+  }
+
+  &__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--color-text-3);
+    cursor: pointer;
+    font-size: 15px;
+
+    &:hover {
+      color: var(--app-primary-color);
+      background: rgba(255, 255, 255, 0.8);
+    }
+  }
+
+  &__toggle-icon {
+    display: inline-flex;
+  }
+
+  /*
+   * compact：动画结束后切真窄轨。
+   * shell 跟随外层宽度，图标/选中态水平居中（不再靠 200px 裁切）。
+   */
+  &.is-compact {
+    .customer-side-rail__shell {
+      width: 100%;
+    }
+
+    .customer-side-rail__brand {
+      justify-content: center;
+      gap: 0;
+      padding: 12px 0;
+      min-height: 52px;
+    }
+
+    .customer-side-rail__brand-name {
+      display: none;
+    }
+
+    .customer-side-rail__scroll {
+      padding: 10px 0 8px;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .customer-side-rail__group {
+      width: 100%;
+      align-items: center;
+      gap: 4px;
+
+      &:not(.is-first) {
+        margin-top: 4px;
+        padding-top: 0;
+        border-top: none;
+      }
+    }
+
+    .customer-side-rail__label {
+      display: none;
+    }
+
+    .customer-side-rail__divider {
+      margin: 4px auto 6px;
+    }
+
+    .customer-side-rail__item {
+      width: 40px;
+      min-height: 40px;
+      padding: 0;
+      gap: 0;
+      justify-content: center;
+      border-radius: 8px;
+
+      /* 收起态用整块高亮，不再用左边条（裁切后会偏） */
+      &::before {
+        display: none;
+      }
+
+      &:hover {
+        background: color-mix(in srgb, var(--app-primary-color, #1d7281) 8%, #fff);
+      }
+
+      &.active {
+        background: color-mix(in srgb, var(--app-primary-color, #1d7281) 14%, #fff);
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-primary-color, #1d7281) 22%, transparent);
+      }
+    }
+
+    .customer-side-rail__text {
+      display: none;
+    }
+
+    .customer-side-rail__dock {
+      align-items: center;
+      gap: 6px;
+      padding: 8px 0 10px;
+    }
+
+    .customer-side-rail__user-row {
+      width: 40px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2px;
+      background: transparent;
+      box-shadow: none;
+
+      &.is-account-active {
+        background: color-mix(in srgb, var(--app-primary-color, #1d7281) 12%, #fff);
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-primary-color, #1d7281) 18%, transparent);
+      }
+    }
+
+    .customer-side-rail__user {
+      width: 36px;
+      flex: 0 0 auto;
+
+      :deep(.user-dropdown-trigger),
+      :deep(.user-dropdown-trigger.is-compact) {
+        width: 36px;
+        height: 36px;
+        margin: 0;
+        padding: 0;
+        justify-content: center;
+      }
+    }
+
+    .customer-side-rail__user-balance {
+      display: none;
+    }
+
+    .customer-side-rail__utils {
+      width: 40px;
+      grid-template-columns: 1fr;
+      gap: 2px;
+      justify-items: center;
+      padding: 2px 0;
+      background: transparent;
+    }
+
+    .customer-side-rail__tool,
+    .customer-side-rail__tool-slot {
+      width: 36px;
+      height: 32px;
+    }
+
+    .customer-side-rail__tool-slot :deep(.message-count) {
+      display: none;
+    }
+
+    .customer-side-rail__footer-row {
+      width: 40px;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .customer-side-rail__warehouse {
+      width: 32px;
+      flex: 0 0 auto;
+    }
+
+    .customer-side-rail__toggle {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}
+</style>
diff --git a/src/components/top-nav/RightTopMessage.vue b/src/components/top-nav/RightTopMessage.vue
index 72442ac..b004487 100644
--- a/src/components/top-nav/RightTopMessage.vue
+++ b/src/components/top-nav/RightTopMessage.vue
@@ -1,6 +1,10 @@
 <template>
   <!-- Top-nav inbox / announcement entry (unread counts stay here, not on Nana FAB). -->
-  <a-dropdown trigger="hover" placement="bottomRight" @visible-change="onMessageDropdownVisibleChange">
+  <a-dropdown
+    trigger="hover"
+    :position="dropdownPosition"
+    @visible-change="onMessageDropdownVisibleChange"
+  >
     <div class="message-dropdown-trigger" :title="t('navbar.message')">
       <IconNotification class="message-icon" :class="totalCount > 0 ? 'theMessage' : ''" />
       <span v-if="totalCount > 0" class="message-count">({{ displayCount }})</span>
@@ -17,11 +21,21 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { IconNotification } from '@arco-design/web-vue/es/icon';
 import { useInboxUnread } from '@/composables/useInboxUnread';
 
+const props = withDefaults(
+  defineProps<{
+    dropdownPosition?: 'br' | 'bl' | 'tr' | 'tl' | 'rt' | 'rb';
+  }>(),
+  { dropdownPosition: 'br' },
+);
+
+const dropdownPosition = computed(() => props.dropdownPosition);
+
 const router = useRouter();
 const { t } = useI18n();
 const { notificationCount, noticeCount, totalCount, displayCount, refreshUnread } = useInboxUnread();
diff --git a/src/components/top-nav/RightTopUser.vue b/src/components/top-nav/RightTopUser.vue
index cb49219..82e94f0 100644
--- a/src/components/top-nav/RightTopUser.vue
+++ b/src/components/top-nav/RightTopUser.vue
@@ -1,20 +1,34 @@
 <template>
   <a-dropdown
     trigger="hover"
-    position="br"
+    :position="dropdownPosition"
     @select="onDropdownSelect"
   >
-    <div class="user-dropdown-trigger">
+    <div class="user-dropdown-trigger" :class="{ 'is-compact': compact }">
       <img
         v-if="showCustomerAvatar"
         :src="customerAvatarUrl"
         alt=""
         class="user-avatar"
       />
-      <span class="user-name">{{ displayName }}</span>
+      <span v-else class="user-avatar user-avatar--fallback">{{ displayNameInitial }}</span>
+      <span v-if="!compact" class="user-name">{{ displayName }}</span>
     </div>
     <template #content>
-      <a-doption v-if="isCustomerPortal" value="userinfo">
+      <!-- 侧栏传入的资产与账户入口（替代侧栏「资产与账户」分组） -->
+      <a-doption
+        v-for="item in accountMenus"
+        :key="accountMenuKey(item)"
+        :value="accountMenuKey(item)"
+      >
+        <span class="user-menu-item">
+          <span class="user-menu-item__icon">
+            <component :is="getSubMenuIcon(item, undefined, MENU_NAME_TO_LOCALE_KEY)" />
+          </span>
+          <span class="user-menu-item__label">{{ formatAccountTitle(item) }}</span>
+        </span>
+      </a-doption>
+      <a-doption v-if="isCustomerPortal && !hasAccountProfileItem" value="userinfo">
         <span class="user-menu-item">
           <span class="user-menu-item__icon"><i class="fa fa-user" /></span>
           <span class="user-menu-item__label">{{ t('menu.user.profile') }}</span>
@@ -38,6 +52,21 @@
           <span class="user-menu-item__label">页面配置</span>
         </span>
       </a-doption>
+      <template v-if="showLanguageMenu">
+        <a-doption
+          v-for="item in languageOptions"
+          :key="item.value"
+          :value="`lang:${item.value}`"
+        >
+          <span class="user-menu-item">
+            <span class="user-menu-item__icon">{{ item.icon }}</span>
+            <span class="user-menu-item__label">
+              {{ item.label }}
+              <span v-if="locale === item.value" class="user-menu-item__hint">✓</span>
+            </span>
+          </span>
+        </a-doption>
+      </template>
       <a-doption value="logout">
         <span class="user-menu-item is-danger">
           <span class="user-menu-item__icon"><i class="fa fa-sign-in" /></span>
@@ -116,21 +145,97 @@ import {
 import { CUSTOMER_BALANCE_CHANGED_EVENT } from '@/api/customer/accountFlow';
 import { getMapIdFromAccessToken } from '@/utils/jwt';
 import { isValidAvatarUrl, resolveAvatarUrl } from '@/utils/avatar';
+import useLocale from '@/hooks/locale';
 import { resolvePostLogoutLogin } from '@/utils/login-portal';
 import { openPortalSideDrawer } from '@/views/user/portal-drawer/usePortalSideDrawer';
+import { resolvePortalDrawerPanel } from '@/views/user/portal-drawer/types';
+import { getSubMenuIcon } from '@/utils/menu-icon';
+import { MENU_NAME_TO_LOCALE_KEY, translateMenuTitle } from '@/utils/menu-i18n';
+import {
+  getCustomerNavPath,
+  type CustomerNavItem,
+} from '@/utils/customer-portal-nav';
 
-const { t } = useI18n();
+const props = withDefaults(
+  defineProps<{
+    /** 侧栏收起等场景只显示头像 */
+    compact?: boolean
+    /** 下拉相对触发器位置，侧栏用 rt */
+    dropdownPosition?: 'br' | 'bl' | 'tr' | 'tl' | 'rt' | 'rb'
+    /** 客户侧栏：资产与账户菜单，收进用户下拉 */
+    accountMenus?: CustomerNavItem[]
+    /** 客户侧栏：语言收进用户菜单，不再单独占底栏 */
+    showLanguageMenu?: boolean
+  }>(),
+  {
+    compact: false,
+    dropdownPosition: 'br',
+    accountMenus: () => [],
+    showLanguageMenu: false,
+  },
+);
+
+const { t, locale } = useI18n();
+const { changeLocale } = useLocale();
 const router = useRouter();
 const userStore = useUserStore();
 const appStore = useAppStore();
 const rbacUserStore = useRbacUserStore();
 
+const showLanguageMenu = computed(() => props.showLanguageMenu);
+const languageOptions = [
+  { value: 'zh-CN', label: '中文', icon: '🇨🇳' },
+  { value: 'en-US', label: 'English', icon: '🇺🇸' },
+] as const;
+
 const isCustomerPortal = computed(() => rbacUserStore.isCustomerPortal());
 
 const displayName = computed(() => {
   return userStore.name || '--';
 });
 
+const displayNameInitial = computed(() => {
+  const name = String(displayName.value || '').trim();
+  return name ? name.slice(0, 1).toUpperCase() : '?';
+});
+
+const dropdownPosition = computed(() => props.dropdownPosition);
+const compact = computed(() => props.compact);
+const accountMenus = computed(() => props.accountMenus || []);
+
+const hasAccountProfileItem = computed(() =>
+  accountMenus.value.some((item) => {
+    const path = getCustomerNavPath(item);
+    return path === '/user/profile' || resolvePortalDrawerPanel(path) === 'profile';
+  }),
+);
+
+function accountMenuKey(item: CustomerNavItem) {
+  return `account:${getCustomerNavPath(item) || item.id || item.name}`;
+}
+
+function formatAccountTitle(item: CustomerNavItem) {
+  return translateMenuTitle(t, {
+    name: item.name,
+    route: item.route || item.path,
+    path: item.path || item.route,
+    meta: item.meta,
+  });
+}
+
+function openAccountMenuItem(item: CustomerNavItem) {
+  let targetPath = getCustomerNavPath(item);
+  if (!targetPath) return;
+  if (!targetPath.startsWith('/')) targetPath = `/${targetPath}`;
+  const portalPanel = resolvePortalDrawerPanel(targetPath);
+  if (portalPanel) {
+    openPortalSideDrawer(portalPanel);
+    return;
+  }
+  if (router.currentRoute.value.path === targetPath) return;
+  router.push(targetPath).catch(() => undefined);
+}
+
 const customerAvatarRaw = ref('');
 
 const customerAvatarUrl = computed(() =>
@@ -272,6 +377,20 @@ const onDropdownSelect = (value: string | number | Record<string, unknown> | und
 const onMenuClick = async (event: { key: string }) => {
   const { key } = event;
 
+  if (key.startsWith('account:')) {
+    const path = key.slice('account:'.length);
+    const item = accountMenus.value.find(
+      (m) => getCustomerNavPath(m) === path || String(m.id || m.name) === path,
+    );
+    if (item) openAccountMenuItem(item);
+    return;
+  }
+
+  if (key.startsWith('lang:')) {
+    changeLocale(key.slice('lang:'.length));
+    return;
+  }
+
   if (key === 'logout') {
     const loginType = rbacUserStore.resolveLoginTypeForRedirect();
     const currentPath = router.currentRoute.value.fullPath;
@@ -309,6 +428,14 @@ const onMenuClick = async (event: { key: string }) => {
   transition: background-color 0.15s ease, opacity 0.15s ease;
 }
 
+.user-dropdown-trigger.is-compact {
+  max-width: none;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  justify-content: center;
+}
+
 .user-dropdown-trigger:hover {
   background-color: rgba(255, 255, 255, 0.12);
 }
@@ -322,6 +449,16 @@ const onMenuClick = async (event: { key: string }) => {
   background: rgba(255, 255, 255, 0.16);
 }
 
+.user-avatar--fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-1, #1d2129);
+  background: var(--color-fill-3, #e5e6eb);
+}
+
 .user-name {
   white-space: nowrap;
   overflow: hidden;
@@ -334,7 +471,8 @@ const onMenuClick = async (event: { key: string }) => {
 .user-menu-item {
   display: flex;
   align-items: center;
-  width: 132px;
+  min-width: 148px;
+  max-width: 220px;
   box-sizing: border-box;
 }
 
@@ -346,6 +484,7 @@ const onMenuClick = async (event: { key: string }) => {
   justify-content: center;
   margin-right: 10px;
   font-size: 14px;
+  color: var(--color-text-3);
 }
 
 .user-menu-item__label {
@@ -355,6 +494,12 @@ const onMenuClick = async (event: { key: string }) => {
   text-align: left;
 }
 
+.user-menu-item__hint {
+  margin-left: 8px;
+  color: var(--app-primary-color, rgb(var(--primary-6)));
+  font-weight: 600;
+}
+
 .user-menu-item.is-danger .user-menu-item__label {
   color: rgb(var(--red-6));
 }
diff --git a/src/components/top-nav/SelectLang.vue b/src/components/top-nav/SelectLang.vue
index 011f740..91a84e1 100644
--- a/src/components/top-nav/SelectLang.vue
+++ b/src/components/top-nav/SelectLang.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-dropdown trigger="hover" placement="bottomRight">
+  <a-dropdown trigger="hover" :position="dropdownPosition">
     <span class="dropDown" :title="$t('app.language', '语言')">
       <icon-language class="lang-icon" />
     </span>
@@ -20,6 +20,7 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { IconLanguage } from '@arco-design/web-vue/es/icon';
 import useLocale from '@/hooks/locale';
@@ -28,10 +29,14 @@ const props = withDefaults(
   defineProps<{
     /** 为 true 时不弹出「已切换语言」提示，适合登录页等需要无感切换的场景 */
     quiet?: boolean;
+    /** 下拉位置；侧栏沉底用 rt */
+    dropdownPosition?: 'br' | 'bl' | 'tr' | 'tl' | 'rt' | 'rb';
   }>(),
-  { quiet: false },
+  { quiet: false, dropdownPosition: 'br' },
 );
 
+const dropdownPosition = computed(() => props.dropdownPosition);
+
 const { locale } = useI18n();
 const { changeLocale } = useLocale();
 
diff --git a/src/components/top-nav/index.vue b/src/components/top-nav/index.vue
index 794f862..d6013c7 100644
--- a/src/components/top-nav/index.vue
+++ b/src/components/top-nav/index.vue
@@ -122,7 +122,24 @@
               更多
             </span>
             <template #content>
-              <div class="nav-more-panel">
+              <!-- 客户扁平导航：溢出项直接列表，不按一级分组 -->
+              <div v-if="isCustomerFlatNav" class="nav-more-panel nav-more-panel--flat">
+                <div
+                  v-for="item in overflowTopMenus"
+                  :key="menuKey(item)"
+                  class="nav-more-item"
+                  :class="{ active: isTopMenuActive(item) }"
+                  @pointerenter="prefetchMenuRoute(item)"
+                  @pointerdown.prevent="gotoFromSubmenu(item)"
+                  @click.prevent="gotoFromSubmenu(item)"
+                >
+                  <span class="nav-more-item__icon">
+                    <component :is="getSubMenuIcon(item, undefined, menuNameToLocaleKeyMap)" />
+                  </span>
+                  <span class="nav-more-item__text">{{ formatMenuTitle(item) }}</span>
+                </div>
+              </div>
+              <div v-else class="nav-more-panel">
                 <div
                   v-for="item in overflowTopMenus"
                   :key="menuKey(item)"
@@ -281,6 +298,10 @@ import { getMapIdFromAccessToken } from '@/utils/jwt';
 import { getSubMenuIcon } from '@/utils/menu-icon';
 import { MENU_NAME_TO_LOCALE_KEY, translateMenuTitle } from '@/utils/menu-i18n';
 import { canAccessCustomerPortalRoute, isAdminPortalOnlyPath, isCustomerPortalOnlyPath } from '@/utils/login-portal';
+import {
+  buildCustomerFlatNavMenus,
+  pickCustomerTopNavMenus,
+} from '@/utils/customer-portal-nav';
 import { resolveCurrentCustomer } from '@/api/customer/resolve';
 import { CUSTOMER_BALANCE_CHANGED_EVENT } from '@/api/customer/accountFlow';
 import { resolvePortalDrawerPanel } from '@/views/user/portal-drawer/types';
@@ -602,9 +623,33 @@ const menuData = computed(() => {
   return convertMenuTreeToNavMenu(userMenus);
 });
 
-const visibleTopMenus = computed(() =>
-  menuData.value.filter((item: any) => !item.meta?.isHide),
-);
+/** 客户门户：压平后的全量二级（侧栏索引同源） */
+const customerMenuSource = computed(() => {
+  const userMenus = userMenuTreeData.value;
+  if (!userMenus.length) return [];
+  if (allMenuTreeData.value.length > 0) {
+    return filterMenuByUserPermission(allMenuTreeData.value, userMenus);
+  }
+  return userMenus;
+});
+
+const customerFlatMenus = computed(() => {
+  if (!rbacUserStore.isCustomerPortal()) return [];
+  return buildCustomerFlatNavMenus(
+    customerMenuSource.value,
+    rbacUserStore.loginPortalType,
+  );
+});
+
+const isCustomerFlatNav = computed(() => rbacUserStore.isCustomerPortal());
+
+const visibleTopMenus = computed(() => {
+  // 客户 P0/P1：顶栏只平铺高频二级，不再展示「订单/仓储/系统」等一级模块名
+  if (isCustomerFlatNav.value) {
+    return pickCustomerTopNavMenus(customerFlatMenus.value);
+  }
+  return menuData.value.filter((item: any) => !item.meta?.isHide);
+});
 
 const MORE_MENU_KEY = '__more__';
 const MORE_BTN_RESERVE = 88;
@@ -1675,6 +1720,18 @@ onUnmounted(() => {
   background: var(--app-elevated-bg, var(--app-card-bg));
   border-radius: 8px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+
+  &--flat {
+    min-width: 180px;
+
+    .nav-more-item {
+      padding-left: 10px;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
 }
 
 .nav-more-group {
diff --git a/src/layout/default-layout.vue b/src/layout/default-layout.vue
index 0f1a34e..729c8b5 100644
--- a/src/layout/default-layout.vue
+++ b/src/layout/default-layout.vue
@@ -1,15 +1,30 @@
 <template>
   <a-layout class="layout">
-    <!-- 顶部导航 -->
-    <TopNav />
-    
-    <!-- 内容区域 -->
-    <a-layout :style="contentStyle" class="layout-content">
+    <!-- 运营端顶栏；客户门户无顶栏（能力沉底侧栏） -->
+    <TopNav v-if="!isCustomerShell" />
+
+    <!-- 客户门户：全高侧栏 + 主区（无多页签，当前页由侧栏高亮） -->
+    <a-layout
+      v-if="isCustomerShell"
+      class="layout-content layout-content--customer"
+    >
+      <CustomerSideRail />
+      <a-layout class="layout-main-wrap">
+        <a-layout-content class="layout-main">
+          <PageLayout />
+        </a-layout-content>
+        <Footer v-if="footer" />
+      </a-layout>
+    </a-layout>
+
+    <!-- 运营端：与改前一致 -->
+    <a-layout v-else :style="adminContentStyle" class="layout-content">
       <a-layout-content>
         <PageLayout />
       </a-layout-content>
       <Footer v-if="footer" />
     </a-layout>
+
     <NanaAssistant />
     <PortalSideDrawer />
     <HelpSideDrawer />
@@ -20,7 +35,9 @@
   import { computed, onMounted } from 'vue';
   import { useRoute } from 'vue-router';
   import { useAppStore } from '@/store';
+  import { useRbacUserStore } from '@/store/modules/rbac-user';
   import TopNav from '@/components/top-nav/index.vue';
+  import CustomerSideRail from '@/components/customer-side-rail/index.vue';
   import Footer from '@/components/footer/index.vue';
   import NanaAssistant from '@/components/NanaAssistant/index.vue';
   import PortalSideDrawer from '@/views/user/portal-drawer/PortalSideDrawer.vue';
@@ -31,6 +48,7 @@
   import { setRapidPackageHostCookie } from '@/utils/rapidPackagePluginHost';
 
   const appStore = useAppStore();
+  const rbacUserStore = useRbacUserStore();
   const route = useRoute();
   const permission = usePermission();
   useResponsive(true);
@@ -38,15 +56,18 @@
   onMounted(() => {
     setRapidPackageHostCookie();
   });
-  
+
   const footer = computed(() => appStore.footer && !route.path.startsWith('/assistant'));
-  
-  // 内容区域样式：顶部留出导航栏空间
-  const contentStyle = computed(() => {
-    const headerHeight = 50; // 顶部导航高度
-    const tabNavHeight = appStore.tabBar ? 36 : 0; // Tab导航高度
-    const paddingTop = headerHeight + tabNavHeight;
-    return { paddingTop: `${paddingTop}px` };
+
+  const isCustomerShell = computed(
+    () => rbacUserStore.isCustomerPortal() && rbacUserStore.isLoggedIn,
+  );
+
+  // 仅运营端需要为 fixed 顶栏留白
+  const adminContentStyle = computed(() => {
+    const headerHeight = 50;
+    const tabNavHeight = appStore.tabBar ? 36 : 0;
+    return { paddingTop: `${headerHeight + tabNavHeight}px` };
   });
 </script>
 
@@ -67,19 +88,49 @@
     flex-direction: column;
   }
 
+  /* 运营端：与改前一致 */
   .layout-content {
     flex: 1;
     overflow: hidden;
     background-color: var(--app-page-bg);
     transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
-    margin-top: 0; // 顶部导航是 fixed，不需要 margin
+    margin-top: 0;
     display: flex;
     flex-direction: column;
-    
+
     :deep(.arco-layout-content) {
       flex: 1;
       overflow: hidden;
       height: 100%;
     }
   }
+
+  /* 客户门户：无顶栏；侧栏与右侧内容卡片同 inset / 圆角 */
+  .layout-content--customer {
+    flex-direction: row;
+    align-items: stretch;
+    min-height: 0;
+    padding-top: 0;
+    gap: 0;
+
+    .layout-main-wrap {
+      flex: 1;
+      min-width: 0;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    :deep(.arco-layout-content.layout-main),
+    .layout-main {
+      flex: 1;
+      overflow: hidden;
+      height: 100%;
+      min-width: 0;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+    }
+  }
 </style>
diff --git a/src/locale/en-US.ts b/src/locale/en-US.ts
index 712664e..c058b02 100644
--- a/src/locale/en-US.ts
+++ b/src/locale/en-US.ts
@@ -1812,7 +1812,21 @@ export default {
   'nav.balance.recharge': 'Recharge',
   'nav.balance.rechargeRecord': 'Recharge records',
   'nav.balance.accountFlow': 'Account transactions',
+  'nav.customerRail.group.business': 'Tasks',
+  'nav.customerRail.group.core': 'Essentials',
+  'nav.customerRail.group.warehouse': 'Warehouse',
+  'nav.customerRail.group.more': 'More',
+  'nav.customerRail.group.account': 'Account',
+  'nav.printControl.menu': 'Print',
   'nav.printControl.download': 'Download print control / one-click parcel plugin',
+  'nav.printControl.hint.statusOff.admin': 'Printer not connected — enable Print in the top bar',
+  'nav.printControl.hint.statusOff.customer': 'Printer not connected — open Print in the left menu and connect',
+  'nav.printControl.hint.modalOff.admin': 'Not connected — enable Print in the top bar first',
+  'nav.printControl.hint.modalOff.customer': 'Not connected — open Print in the left menu and connect first',
+  'nav.printControl.hint.dispatchError.admin': 'Enable Print in the top bar and connect the local print app first',
+  'nav.printControl.hint.dispatchError.customer': 'Open Print in the left menu and connect the local print app first',
+  'nav.printControl.hint.pluginDownload.admin': 'Download it from the top-right icon',
+  'nav.printControl.hint.pluginDownload.customer': 'Download it from Print in the left menu',
 
   // Order - My Orders
   'order.myOrders.tabs.all': 'All',
diff --git a/src/locale/zh-CN.ts b/src/locale/zh-CN.ts
index 762021c..070d747 100644
--- a/src/locale/zh-CN.ts
+++ b/src/locale/zh-CN.ts
@@ -1567,7 +1567,21 @@ export default {
   'nav.balance.recharge': '去充值',
   'nav.balance.rechargeRecord': '充值记录',
   'nav.balance.accountFlow': '资金流水',
+  'nav.customerRail.group.business': '办事',
+  'nav.customerRail.group.core': '常用',
+  'nav.customerRail.group.warehouse': '仓储',
+  'nav.customerRail.group.more': '更多',
+  'nav.customerRail.group.account': '资产与账户',
+  'nav.printControl.menu': '打印',
   'nav.printControl.download': '下载打印控件/一键添加包裹插件',
+  'nav.printControl.hint.statusOff.admin': '未连接打印，请打开页面顶部「打印」开关',
+  'nav.printControl.hint.statusOff.customer': '未连接打印，请打开左侧菜单「打印」并连接',
+  'nav.printControl.hint.modalOff.admin': '未连接，请先打开页面顶部「打印」开关',
+  'nav.printControl.hint.modalOff.customer': '未连接，请先打开左侧菜单「打印」并连接',
+  'nav.printControl.hint.dispatchError.admin': '请先打开页面顶部「打印」开关并连接本机打印程序',
+  'nav.printControl.hint.dispatchError.customer': '请先打开左侧菜单「打印」并连接本机打印程序',
+  'nav.printControl.hint.pluginDownload.admin': '去右上角下载插件',
+  'nav.printControl.hint.pluginDownload.customer': '去左侧「打印」下载插件',
 
   // 订单 - 批量任务
   'order.batchJobs.filter.jobId': '任务 ID',
diff --git a/src/utils/customer-portal-nav.ts b/src/utils/customer-portal-nav.ts
new file mode 100644
index 0000000..e2fee97
--- /dev/null
+++ b/src/utils/customer-portal-nav.ts
@@ -0,0 +1,334 @@
+import type { OmsLoginType } from '@/api/rbac'
+import type { MenuTreeDto } from '@/api/rbac'
+import { canAccessCustomerPortalRoute, isAdminPortalOnlyPath, isCustomerPortalOnlyPath } from '@/utils/login-portal'
+
+/** 客户顶栏高频入口（路径越靠前优先级越高） */
+export const CUSTOMER_TOP_NAV_PRIORITY_PATHS = [
+  '/home/workplace',
+  '/home',
+  '/order/priceCheck',
+  '/order/placeOrder',
+  '/order/myOrders',
+] as const
+
+export const CUSTOMER_SIDE_RAIL_COLLAPSED_WIDTH = 64
+export const CUSTOMER_SIDE_RAIL_EXPANDED_WIDTH = 200
+export const CUSTOMER_SIDE_RAIL_STORAGE_KEY = 'oms.customerSideRail.collapsed'
+
+export type CustomerNavItem = {
+  id?: string | number
+  name: string
+  path: string
+  route?: string
+  type?: number
+  meta?: {
+    title?: string
+    icon?: string
+    order?: number
+    isHide?: boolean
+    hideInMenu?: boolean
+    customerPortalOnly?: boolean
+    adminPortalOnly?: boolean
+  }
+  /** 原一级模块名，仅侧栏分组/调试用 */
+  parentName?: string
+}
+
+/**
+ * 侧栏任务分组（客户心智）：
+ * - core：查价 / 下单 / 订单（最高频）
+ * - warehouse：仓储相关
+ * - more：其余办事入口
+ * - account：资产与账户（可收进用户下拉）
+ */
+export type CustomerNavGroupId = 'core' | 'warehouse' | 'more' | 'account'
+
+export type CustomerNavGroup = {
+  id: CustomerNavGroupId
+  labelKey: string
+  labelFallback: string
+  items: CustomerNavItem[]
+}
+
+/** 办事主路径：客户最常点的四个入口 */
+const CUSTOMER_CORE_NAV_PATHS = [
+  '/home/workplace',
+  '/home',
+  '/order/priceCheck',
+  '/order/placeOrder',
+  '/order/myOrders',
+] as const
+
+export function getCustomerNavPath(item: { path?: string; route?: string } | null | undefined): string {
+  return String(item?.path || item?.route || '').trim()
+}
+
+/** 收进用户下拉的辅助页（非高频办事入口） */
+const USER_MENU_EXTRA_PATH_PREFIXES = [
+  '/api/openApi',
+  '/system/announcement',
+  '/system/warehouseAddress',
+] as const
+
+/**
+ * 余额下拉已承接的资金入口；勿再塞进用户下拉，避免重复。
+ * 对应：去充值 / 充值记录 / 资金流水
+ */
+const BALANCE_MENU_PATH_PREFIXES = [
+  '/user/recharge',
+  '/finance/rechargeRecord',
+  '/finance/accountFlow',
+] as const
+
+function matchesPathPrefix(path: string, prefix: string): boolean {
+  return path === prefix || path.startsWith(`${prefix}/`)
+}
+
+/** 是否由余额下拉独占（用户菜单应排除） */
+export function isCustomerBalanceMenuPath(path: string): boolean {
+  const p = path.trim()
+  if (!p) return false
+  return BALANCE_MENU_PATH_PREFIXES.some((prefix) => matchesPathPrefix(p, prefix))
+}
+
+export function resolveCustomerNavGroupId(path: string): CustomerNavGroupId {
+  const p = path.trim() || '/'
+  if (p === '/user' || p.startsWith('/user/')) return 'account'
+  if (p === '/finance' || p.startsWith('/finance/')) return 'account'
+  if (p === '/marketing' || p.startsWith('/marketing/')) return 'account'
+  if (USER_MENU_EXTRA_PATH_PREFIXES.some((prefix) => matchesPathPrefix(p, prefix))) {
+    return 'account'
+  }
+  if (p === '/warehouse' || p.startsWith('/warehouse/')) return 'warehouse'
+  if (CUSTOMER_CORE_NAV_PATHS.some((core) => p === core || p.startsWith(`${core}/`))) {
+    return 'core'
+  }
+  return 'more'
+}
+
+/** 是否账户类路由（含资金页，用于底栏高亮） */
+export function isCustomerAccountNavPath(path: string): boolean {
+  return resolveCustomerNavGroupId(path) === 'account'
+}
+
+export function partitionCustomerNavMenus(items: CustomerNavItem[]): {
+  business: CustomerNavItem[]
+  account: CustomerNavItem[]
+} {
+  const business: CustomerNavItem[] = []
+  const account: CustomerNavItem[] = []
+  for (const item of items) {
+    const g = resolveCustomerNavGroupId(getCustomerNavPath(item))
+    if (g === 'account') account.push(item)
+    else business.push(item)
+  }
+  return { business, account }
+}
+
+const BUSINESS_GROUP_META: Record<
+  Exclude<CustomerNavGroupId, 'account'>,
+  { labelKey: string; labelFallback: string }
+> = {
+  core: {
+    labelKey: 'nav.customerRail.group.core',
+    labelFallback: '常用',
+  },
+  warehouse: {
+    labelKey: 'nav.customerRail.group.warehouse',
+    labelFallback: '仓储',
+  },
+  more: {
+    labelKey: 'nav.customerRail.group.more',
+    labelFallback: '更多',
+  },
+}
+
+/**
+ * 侧栏主列表分组。
+ * foldAccountIntoUserMenu=true 时，「资产与账户」不进侧栏，改由用户下拉承接。
+ */
+export function groupCustomerNavMenus(
+  items: CustomerNavItem[],
+  options?: { foldAccountIntoUserMenu?: boolean },
+): CustomerNavGroup[] {
+  const buckets: Record<CustomerNavGroupId, CustomerNavItem[]> = {
+    core: [],
+    warehouse: [],
+    more: [],
+    account: [],
+  }
+  for (const item of items) {
+    buckets[resolveCustomerNavGroupId(getCustomerNavPath(item))].push(item)
+  }
+
+  const groups: CustomerNavGroup[] = []
+  ;(['core', 'warehouse', 'more'] as const).forEach((id) => {
+    if (!buckets[id].length) return
+    const meta = BUSINESS_GROUP_META[id]
+    groups.push({
+      id,
+      labelKey: meta.labelKey,
+      labelFallback: meta.labelFallback,
+      items: buckets[id],
+    })
+  })
+
+  if (!options?.foldAccountIntoUserMenu && buckets.account.length) {
+    groups.push({
+      id: 'account',
+      labelKey: 'nav.customerRail.group.account',
+      labelFallback: '资产与账户',
+      items: buckets.account,
+    })
+  }
+  return groups
+}
+
+/** 客户侧栏默认展开：图标轨对首次使用不友好 */
+export function readCustomerSideRailCollapsed(defaultCollapsed = false): boolean {
+  try {
+    const raw = localStorage.getItem(CUSTOMER_SIDE_RAIL_STORAGE_KEY)
+    if (raw === null) return defaultCollapsed
+    return raw === '1' || raw === 'true'
+  } catch {
+    return defaultCollapsed
+  }
+}
+
+export function writeCustomerSideRailCollapsed(collapsed: boolean) {
+  try {
+    localStorage.setItem(CUSTOMER_SIDE_RAIL_STORAGE_KEY, collapsed ? '1' : '0')
+  } catch {
+    // ignore quota / private mode
+  }
+}
+
+function navPriority(path: string): number {
+  if (!path) return 9999
+  const idx = CUSTOMER_TOP_NAV_PRIORITY_PATHS.findIndex(
+    (p) => path === p || path.startsWith(`${p}/`),
+  )
+  return idx >= 0 ? idx : 1000
+}
+
+export function isCustomerTopNavPriorityPath(path: string): boolean {
+  return navPriority(path) < 1000
+}
+
+function isVisibleNavNode(
+  item: {
+    type?: number
+    name?: string
+    path?: string
+    route?: string
+    meta?: CustomerNavItem['meta']
+    isHidden?: boolean
+  },
+  loginType: OmsLoginType,
+): boolean {
+  if (item.type === 2) return false
+  if (item.meta?.isHide || item.meta?.hideInMenu || item.isHidden) return false
+  const path = getCustomerNavPath(item)
+  if (
+    !canAccessCustomerPortalRoute(loginType, {
+      path,
+      customerPortalOnly: item.meta?.customerPortalOnly,
+      adminPortalOnly: item.meta?.adminPortalOnly,
+    })
+  ) {
+    return false
+  }
+  return true
+}
+
+function toNavItem(menu: MenuTreeDto, parentName?: string): CustomerNavItem {
+  const route = String(menu.route || '')
+  const name = String(menu.name || '').trim() || route
+  return {
+    id: menu.id,
+    name,
+    path: route,
+    route,
+    type: menu.type as number | undefined,
+    parentName,
+    meta: {
+      title: name,
+      icon: menu.icon || undefined,
+      order: menu.order,
+      isHide: menu.isHidden || false,
+      customerPortalOnly: isCustomerPortalOnlyPath(route),
+      adminPortalOnly: isAdminPortalOnlyPath(route),
+    },
+  }
+}
+
+/**
+ * 将客户菜单树压平为可点击二级页（含无子级的一级，如首页）。
+ * 不改 RBAC 结构，仅改变客户门户展示。
+ */
+export function buildCustomerFlatNavMenus(
+  menuTree: MenuTreeDto[],
+  loginType: OmsLoginType,
+): CustomerNavItem[] {
+  const result: CustomerNavItem[] = []
+  const seen = new Set<string>()
+
+  const push = (item: CustomerNavItem) => {
+    const path = getCustomerNavPath(item)
+    if (!path || seen.has(path)) return
+    if (!isVisibleNavNode(item, loginType)) return
+    seen.add(path)
+    result.push(item)
+  }
+
+  for (const menu of menuTree || []) {
+    if (!isVisibleNavNode(menu, loginType)) continue
+    const children = (menu.children || []).filter((c) => isVisibleNavNode(c, loginType))
+    if (children.length > 0) {
+      for (const child of children) {
+        push(toNavItem(child, menu.name))
+      }
+      continue
+    }
+    // 无二级的一级（首页等）直接作为入口
+    push(toNavItem(menu))
+  }
+
+  result.sort((a, b) => {
+    const pa = navPriority(getCustomerNavPath(a))
+    const pb = navPriority(getCustomerNavPath(b))
+    if (pa !== pb) return pa - pb
+    const oa = a.meta?.order ?? 0
+    const ob = b.meta?.order ?? 0
+    if (oa !== ob) return oa - ob
+    return getCustomerNavPath(a).localeCompare(getCustomerNavPath(b))
+  })
+
+  return result
+}
+
+/** 顶栏只展示高频入口；其余进侧栏全量索引 */
+export function pickCustomerTopNavMenus(flatMenus: CustomerNavItem[]): CustomerNavItem[] {
+  return flatMenus.filter((item) => isCustomerTopNavPriorityPath(getCustomerNavPath(item)))
+}
+
+/** 最长路径匹配，避免短前缀误高亮 */
+export function matchCustomerActiveNavPath(
+  currentPath: string,
+  items: Array<{ path?: string; route?: string }>,
+): string {
+  let best = ''
+  let bestLen = -1
+  for (const item of items) {
+    const path = getCustomerNavPath(item)
+    if (!path) continue
+    if (
+      (currentPath === path || currentPath.startsWith(`${path}/`)) &&
+      path.length > bestLen
+    ) {
+      bestLen = path.length
+      best = path
+    }
+  }
+  return best
+}
diff --git a/src/utils/hiprint/dispatchPrintUrl.ts b/src/utils/hiprint/dispatchPrintUrl.ts
index 795f38e..5934eb9 100644
--- a/src/utils/hiprint/dispatchPrintUrl.ts
+++ b/src/utils/hiprint/dispatchPrintUrl.ts
@@ -7,6 +7,7 @@ import {
   hiprintSendHtmlPrint,
 } from '@/utils/hiprint/hiprintElectronSocket';
 import { useHiprintClientState } from '@/utils/hiprint/hiprintClientState';
+import { tPrintControlHint } from '@/utils/hiprint/printControlHints';
 import {
   buildHiprintBlobPrintExtras,
   readHiprintPrintFormFromStorage,
@@ -43,7 +44,7 @@ async function sendBytesToHiprint(rawUrl: string, bytes: Uint8Array) {
 export async function dispatchPrintUrl(rawUrl: string) {
   const hiprintState = useHiprintClientState();
   if (!hiprintState.enabled || !hiprintState.connected) {
-    throw new Error('请先打开页面顶部「打印」开关并连接本机打印程序');
+    throw new Error(tPrintControlHint('dispatchError'));
   }
 
   const url = String(rawUrl || '').trim();
diff --git a/src/utils/hiprint/printControlHints.ts b/src/utils/hiprint/printControlHints.ts
new file mode 100644
index 0000000..93da7eb
--- /dev/null
+++ b/src/utils/hiprint/printControlHints.ts
@@ -0,0 +1,14 @@
+import i18n from '@/locale'
+import { useRbacUserStore } from '@/store/modules/rbac-user'
+
+/** 打印入口位置提示：客户侧栏 vs 运营顶栏文案不同 */
+export type PrintControlHintKind =
+  | 'statusOff'
+  | 'modalOff'
+  | 'dispatchError'
+  | 'pluginDownload'
+
+export function tPrintControlHint(kind: PrintControlHintKind): string {
+  const portal = useRbacUserStore().isCustomerPortal() ? 'customer' : 'admin'
+  return String(i18n.global.t(`nav.printControl.hint.${kind}.${portal}`))
+}
diff --git a/src/views/operation/printLabel/index.vue b/src/views/operation/printLabel/index.vue
index 2870515..9b1c1bb 100644
--- a/src/views/operation/printLabel/index.vue
+++ b/src/views/operation/printLabel/index.vue
@@ -33,7 +33,7 @@
                 {{
                   printerReady
                     ? $t('operation.printLabel.printerStatus.ready')
-                    : $t('operation.printLabel.printerStatus.off')
+                    : printerStatusOffText
                 }}
               </span>
               <a-checkbox v-model="keepScanFocus" class="pl-keep-focus">
@@ -212,6 +212,7 @@ import { useOperationScanFocus } from '@/composables/useOperationScanFocus'
 import PrintPreviewPane from '@/components/PrintTemplate/PrintPreviewPane.vue'
 import { postOrderPrint } from '@/api/order'
 import { useHiprintClientState } from '@/utils/hiprint/hiprintClientState'
+import { tPrintControlHint } from '@/utils/hiprint/printControlHints'
 import { dispatchPrintUrl } from '@/utils/hiprint/dispatchPrintUrl'
 import {
   getOrPrefetchPrintPreview,
@@ -234,6 +235,7 @@ const { tableContainerRef, tableHeight } = useTableContainerHeight()
 const scanInputRef = ref<{ focus?: () => void } | null>(null)
 const { keepScanFocus, focusScanInput, maybeRefocusScan } = useOperationScanFocus('printLabel', scanInputRef)
 const hiprintState = useHiprintClientState()
+const printerStatusOffText = computed(() => tPrintControlHint('statusOff'))
 
 defineOptions({ name: 'PrintLabel' })
 
diff --git a/src/views/order/myOrders/index.vue b/src/views/order/myOrders/index.vue
index 7b0aa23..fe7f678 100644
--- a/src/views/order/myOrders/index.vue
+++ b/src/views/order/myOrders/index.vue
@@ -2092,10 +2092,10 @@
         class="list-empty-hint"
       >
         <span>{{ t('order.myOrders.empty.hint') }}</span>
-        <a-button type="text" @click="router.push('/order/placeOrder')">
+        <a-button class="app-btn-primary-soft" @click="router.push('/order/placeOrder')">
           {{ t('order.myOrders.empty.goPlaceOrder') }}
         </a-button>
-        <a-button type="text" @click="router.push('/order/priceCheck')">
+        <a-button @click="router.push('/order/priceCheck')">
           {{ t('order.myOrders.empty.goPriceCheck') }}
         </a-button>
       </div>
@@ -2514,7 +2514,7 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 4px;
+    gap: 8px;
     margin: 0 16px 12px;
     padding: 10px 12px;
     border-radius: 8px;
diff --git a/src/views/warehouse/parcel/index.vue b/src/views/warehouse/parcel/index.vue
index f8beec0..feb540a 100644
--- a/src/views/warehouse/parcel/index.vue
+++ b/src/views/warehouse/parcel/index.vue
@@ -43,6 +43,7 @@ import { useWarehouseAdminCustomer } from '@/composables/useWarehouseAdminCustom
 import { setRapidPackageHostCookie, setRapidPackageWarehouseCookie, setRapidPackageCustomerCookie } from '@/utils/rapidPackagePluginHost'
 import { useCurrentWarehouseStore } from '@/store'
 import { PRINT_CONTROL_DOWNLOAD_URL } from '@/constants/printControl'
+import { tPrintControlHint } from '@/utils/hiprint/printControlHints'
 
 defineOptions({ name: 'WarehouseParcel' })
 
@@ -58,6 +59,7 @@ interface ParcelItemRow {
 }
 
 const { t } = useI18n()
+const pluginHintDownloadText = computed(() => tPrintControlHint('pluginDownload'))
 const { tableContainerRef, tableHeight } = useTableContainerHeight()
 const {
   isAdmin,
@@ -671,7 +673,7 @@ onMounted(async () => {
             rel="noopener noreferrer"
           >
             <icon-download />
-            {{ t('warehouse.parcel.pluginHintDownload') }}
+            {{ pluginHintDownloadText }}
           </a>
         </p>
       </div>