diff --git a/AGENTS.md b/AGENTS.md
index 4a24a30..6ba59ca 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -27,7 +27,7 @@
 - 模块之间不得通过相对路径或内部目录穿透；确需协作时只能从目标模块的 `public.ts` 导入。模块内稳定契约放在 `contracts.ts`，稳定的跨应用模型仍应上移到 `@chongchong/shared`。
 - `VITE_API_BASE_URL` 控制浏览器请求前缀，`API_PROXY_TARGET` 控制 Vite 开发代理上游；后者只由开发服务器读取，不进入客户端构建。新增或变更环境变量时同步更新 `.env.example`，不得提交真实密钥或环境专属凭据。
 - `src/styles/`：全局设计令牌和布局；优先复用现有 `--primary`、`--navy`、`--border`、`--muted`。
-- 跨应用稳定模型放到 `packages/shared`，客户工作台专属类型保留在本项目。
+- 本应用多个模块稳定复用的前端模型放到应用内 `shared/`，客户工作台专属类型保留在对应业务模块。不要链接应用目录之外的 TypeScript 包，服务端契约以 `baiyue-firstleg` Controller/OpenAPI 为准。
 
 ## 租户、认证与数据安全
 
diff --git a/shared/AGENTS.md b/shared/AGENTS.md
index e25fc86..d0032b9 100644
--- a/shared/AGENTS.md
+++ b/shared/AGENTS.md
@@ -1,28 +1,21 @@
-# Shared Package Instructions
+# 应用内 Shared Package Instructions
 
 ## 项目定位
 
-- 本包提供跨应用共享的 TypeScript 类型、常量、轻量工具和可复用资源。
-- 当前公共能力包括产品名称、用户模型、导航模型、API 响应模型和头程订单状态常量。
-- 只有具有明确跨项目语义，或已经被两个或以上项目稳定复用的能力才进入本包；单一应用的页面状态、UI 组件和临时业务逻辑留在对应项目。尚无消费者的契约型导出必须标记为暂定，并有对应 API 或产品决策依据。
+- 本包只服务当前前端应用，提供多个业务模块共同使用的 TypeScript 类型、常量和轻量工具。
+- 依赖保持为 `@chongchong/shared: link:./shared`，确保当前应用目录可作为独立容器构建上下文。
+- 不承担 Admin、Client 之间的源码复用；跨应用字段需要分别映射同一份 Java Controller/OpenAPI 契约，不能通过目录外链接耦合两个部署单元。
 
 ## 公共 API 与依赖边界
 
-- `src/index.ts` 是当前唯一公共入口。新增导出应有清晰命名和稳定语义，不让消费者依赖未导出的内部实现。
-- 公共类型保持平台无关，不依赖 DOM、Vue、微信、uni-app 或 Node 专属运行时，除非任务明确改变本包定位。
-- 不在共享类型中编码客户端鉴权结论；租户隔离、权限和数据合法性仍由 `services/api` 最终校验。
-- 避免以“复用”为由建立宽泛的万能类型。优先使用小而明确的模型，并区分请求、响应、领域状态和展示模型。
-- 新增依赖前先确认原生 TypeScript 能力或现有依赖无法满足需求；本包不应成为所有应用依赖的重量级入口。
+- `src/index.ts` 是当前唯一公共入口；模块专属页面状态、UI 组件和临时业务逻辑留在对应模块。
+- 共享类型保持前端平台无关，不编码鉴权结论；租户隔离、权限、状态机和数据合法性由 `baiyue-firstleg` Java 服务端最终保证。
+- 服务端字段变化先核对 Controller、DTO 和 OpenAPI，再更新本应用的类型、API 适配层和测试；本包不反向定义服务端行为。
+- 避免建立宽泛的万能类型或引入重量级依赖。
 
-## 兼容性与变更原则
+## 兼容性与验证
 
-- 修改导出名称、字段类型、枚举值或常量语义前，搜索所有消费者并评估兼容性。
-- 优先采用向后兼容的新增；删除或破坏性修改必须同步更新全部消费者，并在交付说明中明确迁移影响。
-- API 契约文档是服务端落地后的唯一权威来源；共享包只映射经确认的客户端模型，不反向定义服务端行为。API 尚未落地前，`ApiResponse` 和订单状态等无消费者导出视为暂定，不得当作已发布契约。
-- 状态码、权限码和业务常量应有唯一来源，不在多个应用中复制维护相同列表。
+- 修改导出名称、字段类型、枚举值或常量语义前，搜索当前应用内全部消费者。
+- 优先采用兼容性新增；破坏性修改必须同步更新当前应用消费者。
+- 本包没有独立质量脚本；变更后运行父应用声明的类型检查、测试或构建命令。
 
-## 质量门禁
-
-- 当前包未声明独立的安装、测试、类型检查或构建脚本，不得声称这些检查已在本包内通过。
-- 变更公共导出后，至少运行现有消费者的类型检查；当前直接消费者包括 `apps/admin-web` 和 `apps/client-web`。
-- 若新增本包自己的质量脚本，应同步更新 `package.json`、`README.md` 和本文件，并为公共工具及兼容性边界增加测试。
diff --git a/shared/README.md b/shared/README.md
index ec46228..5b5cb76 100644
--- a/shared/README.md
+++ b/shared/README.md
@@ -1,7 +1,6 @@
-# 共享模块
+# 应用内共享模块
 
-用于存放跨应用共享的类型定义、常量、工具和可复用资源。
+本目录存放当前前端应用多个业务模块共同使用的 TypeScript 类型、常量和轻量工具，通过 `@chongchong/shared: link:./shared` 引用。
 
-当前已提供产品名称、用户模型、导航模型、API 响应模型，以及经一期产品决策确认的头程订单状态与运输方式常量。
+该目录必须保留在应用内部，以支持 Admin、Client 分别使用自身目录作为容器构建上下文。它不作为 Java 服务端契约来源；接口字段、状态机、权限和业务规则以 `baiyue-firstleg` Controller、DTO 和 OpenAPI 为准。
 
-当前还提供平台收货仓模型、订单仓库快照模型和供 Admin、Client 静态原型共用的演示仓库数据。订单仓库快照在下单时复制仓库 ID、编码、名称及国内地址，避免仓库主数据后续改名或停用影响历史订单展示；真实仓库列表、状态、下单可用性和快照持久化最终由服务端 API 保证。
diff --git a/src/assets/brand/auth-ocean.jpg b/src/assets/brand/auth-ocean.jpg
new file mode 100644
index 0000000..f47f055
Binary files /dev/null and b/src/assets/brand/auth-ocean.jpg differ
diff --git a/src/modules/auth/components/AuthShell.vue b/src/modules/auth/components/AuthShell.vue
new file mode 100644
index 0000000..2a317a2
--- /dev/null
+++ b/src/modules/auth/components/AuthShell.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { CheckCircle2 } from '@lucide/vue'
+import baiyueLogoDark from '@/assets/brand/baiyue-logo-dark.png'
+import authOcean from '@/assets/brand/auth-ocean.jpg'
+
+defineProps<{
+  switchText: string
+  switchLabel: string
+  switchTo: string
+  visualTitle: string
+  visualDescription: string
+  features: string[]
+  variant?: 'login' | 'register'
+}>()
+</script>
+
+<template>
+  <div class="auth-page">
+    <header class="auth-header">
+      <RouterLink to="/login" class="auth-brand" aria-label="柏悦物流客户工作台">
+        <img class="auth-brand-logo" :src="baiyueLogoDark" alt="柏悦物流" />
+      </RouterLink>
+      <div class="auth-header-action">
+        <span>{{ switchText }}</span>
+        <RouterLink :to="switchTo">{{ switchLabel }}</RouterLink>
+      </div>
+    </header>
+
+    <main class="auth-stage">
+      <div class="auth-panel" :class="`auth-panel--${variant || 'login'}`">
+        <section class="auth-visual" aria-label="柏悦物流服务介绍">
+          <img :src="authOcean" alt="集装箱码头与跨境物流作业场景" />
+          <div class="auth-visual-shade" aria-hidden="true"></div>
+          <div class="auth-visual-content">
+            <div>
+              <h1>{{ visualTitle }}</h1>
+              <p>{{ visualDescription }}</p>
+            </div>
+            <ul>
+              <li v-for="feature in features" :key="feature">
+                <CheckCircle2 :size="19" aria-hidden="true" />
+                <span>{{ feature }}</span>
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <section class="auth-form-panel">
+          <slot />
+        </section>
+      </div>
+    </main>
+  </div>
+</template>
diff --git a/src/modules/auth/views/AuthViews.test.mjs b/src/modules/auth/views/AuthViews.test.mjs
index 4b5f4d3..4c60c46 100644
--- a/src/modules/auth/views/AuthViews.test.mjs
+++ b/src/modules/auth/views/AuthViews.test.mjs
@@ -4,6 +4,7 @@ import test from 'node:test'
 
 const loginSource = readFileSync(new URL('./LoginView.vue', import.meta.url), 'utf8')
 const registerSource = readFileSync(new URL('./RegisterView.vue', import.meta.url), 'utf8')
+const authShellSource = readFileSync(new URL('../components/AuthShell.vue', import.meta.url), 'utf8')
 const legalSource = readFileSync(new URL('./LegalDocumentView.vue', import.meta.url), 'utf8')
 const legalDocumentsSource = readFileSync(new URL('../legalDocuments.ts', import.meta.url), 'utf8')
 const authRoutesSource = readFileSync(new URL('../routes.ts', import.meta.url), 'utf8')
@@ -12,6 +13,22 @@ const httpSource = readFileSync(new URL('../../../api/http.ts', import.meta.url)
 const sessionSource = readFileSync(new URL('../../../api/session.ts', import.meta.url), 'utf8')
 const authApiSource = readFileSync(new URL('../api/auth.ts', import.meta.url), 'utf8')
 const mainSource = readFileSync(new URL('../../../main.ts', import.meta.url), 'utf8')
+const stylesSource = readFileSync(new URL('../../../styles/index.css', import.meta.url), 'utf8')
+
+test('uses one prototype-inspired responsive shell for login and registration', () => {
+  assert.match(loginSource, /<AuthShell/)
+  assert.match(registerSource, /<AuthShell/)
+  assert.match(authShellSource, /auth-ocean\.jpg/)
+  assert.match(authShellSource, /class="auth-visual"/)
+  assert.match(stylesSource, /\.auth-panel \{[^}]*grid-template-columns:/s)
+  assert.match(stylesSource, /@media \(max-width: 960px\)[\s\S]*?\.auth-visual \{ display: none; \}/)
+  assert.match(stylesSource, /@media \(max-width: 720px\)[\s\S]*?\.register-form-grid \{ grid-template-columns: 1fr; \}/)
+})
+
+test('groups the full registration contract without adding out-of-scope sign-in methods', () => {
+  for (const section of ['账号信息', '企业信息', '联系信息']) assert.match(registerSource, new RegExp(section))
+  assert.doesNotMatch(loginSource + registerSource, /微信登录|企业微信登录|短信验证码|邮箱验证码|lang-switcher/)
+})
 
 test('matches the backend username login contract', () => {
   assert.match(loginSource, /label="用户名"/)
diff --git a/src/modules/auth/views/LoginView.vue b/src/modules/auth/views/LoginView.vue
index a63a068..6d25987 100644
--- a/src/modules/auth/views/LoginView.vue
+++ b/src/modules/auth/views/LoginView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { nextTick, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { ArrowRight, LockKeyhole, UserRound } from '@lucide/vue'
-import baiyueLogoDark from '@/assets/brand/baiyue-logo-dark.png'
 import { useAuthStore } from '@/modules/auth/store/auth'
+import AuthShell from '@/modules/auth/components/AuthShell.vue'
 
 interface LoginForm {
   account: string
@@ -40,7 +40,11 @@ const rules: FormRules<LoginForm> = {
 async function submit() {
   if (!formRef.value || loading.value) return
   const valid = await formRef.value.validate().catch(() => false)
-  if (!valid) return
+  if (!valid) {
+    await nextTick()
+    document.querySelector<HTMLElement>('.auth-form-panel .el-form-item.is-error input')?.focus()
+    return
+  }
 
   loading.value = true
   try {
@@ -60,20 +64,20 @@ function showResetHint() {
 </script>
 
 <template>
-  <div class="auth-page">
-    <header class="auth-header">
-      <RouterLink to="/login" class="auth-brand"><img class="auth-brand-logo" :src="baiyueLogoDark" alt="柏悦物流" /></RouterLink>
-      <div>还没有企业账号？ <RouterLink to="/register">申请入驻</RouterLink></div>
-    </header>
-    <main class="auth-main">
-      <section class="auth-copy">
-        <h1>跨境物流业务<br />一个工作台完成</h1>
-        <p>从企业成员协作到头程订单跟进，统一管理业务与权限。</p>
-        <div class="auth-facts"><span>企业级权限</span><span>订单全程跟进</span><span>多端业务协同</span></div>
-      </section>
-      <section class="auth-card" aria-labelledby="login-title">
+  <AuthShell
+    switch-text="还没有企业账号？"
+    switch-label="申请入驻"
+    switch-to="/register"
+    visual-title="跨境物流业务，一个工作台完成"
+    visual-description="从企业协作到头程订单跟进，让业务信息与操作权限始终清晰。"
+    :features="['企业级角色与权限', '头程订单全程跟进', '多成员业务协同']"
+  >
+    <div class="auth-form-content auth-form-content--login">
+      <div class="auth-form-heading">
         <h2 id="login-title">登录客户工作台</h2>
-        <p>企业注册成功后即可登录；提交订单前需完成企业资料审核</p>
+        <p>使用企业账号登录，继续管理您的跨境物流业务。</p>
+      </div>
+      <div class="auth-account-note">企业注册成功后即可登录；提交订单前需完成企业资料审核。</div>
         <el-form ref="formRef" :model="form" :rules="rules" label-position="top" size="large" @submit.prevent="submit">
           <el-form-item label="用户名" prop="account">
             <el-input v-model="form.account" autocomplete="username" maxlength="64" placeholder="请输入用户名" :prefix-icon="UserRound" />
@@ -87,7 +91,6 @@ function showResetHint() {
           </div>
           <el-button native-type="submit" class="auth-submit" type="primary" :loading="loading">登录 <ArrowRight :size="17" /></el-button>
         </el-form>
-      </section>
-    </main>
-  </div>
+    </div>
+  </AuthShell>
 </template>
diff --git a/src/modules/auth/views/RegisterView.vue b/src/modules/auth/views/RegisterView.vue
index 1d63fc0..723ccc5 100644
--- a/src/modules/auth/views/RegisterView.vue
+++ b/src/modules/auth/views/RegisterView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { nextTick, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
-import { ArrowLeft, Building2, CheckCircle2, Mail, Phone } from '@lucide/vue'
-import baiyueLogoDark from '@/assets/brand/baiyue-logo-dark.png'
+import { CheckCircle2, Mail, Phone } from '@lucide/vue'
 import { registerMerchant } from '@/modules/auth/api/auth'
+import AuthShell from '@/modules/auth/components/AuthShell.vue'
 
 interface RegisterForm {
   username: string
@@ -60,7 +60,11 @@ const rules: FormRules<RegisterForm> = {
 async function submit() {
   if (!formRef.value || submitting.value) return
   const valid = await formRef.value.validate().catch(() => false)
-  if (!valid) return
+  if (!valid) {
+    await nextTick()
+    document.querySelector<HTMLElement>('.auth-form-panel .el-form-item.is-error input')?.focus()
+    return
+  }
 
   submitting.value = true
   try {
@@ -90,26 +94,49 @@ async function submit() {
 </script>
 
 <template>
-  <div class="register-page">
-    <header class="register-header">
-      <RouterLink to="/login"><ArrowLeft :size="18" /> 返回登录</RouterLink>
-      <div class="auth-brand"><img class="auth-brand-logo" :src="baiyueLogoDark" alt="柏悦物流" /></div>
-    </header>
-    <main class="register-main">
+  <AuthShell
+    variant="register"
+    switch-text="已有企业账号？"
+    switch-label="立即登录"
+    switch-to="/login"
+    visual-title="加入柏悦，开启高效跨境物流协作"
+    visual-description="创建企业账号后即可进入客户工作台，维护团队、资料与头程订单。"
+    :features="['注册成功即可登录', '企业资料独立审核', '审核期间可维护订单草稿']"
+  >
+    <div class="auth-form-content auth-form-content--register">
       <template v-if="!submitted">
-        <div class="register-title"><div><Building2 :size="22" /></div><span><h1>企业注册</h1><p>注册成功后即可登录并使用客户工作台，提交订单前需完成企业资料审核。</p></span></div>
+        <div class="auth-form-heading">
+          <h1>企业注册</h1>
+          <p>填写账号与企业基本信息，注册成功后即可登录。</p>
+        </div>
         <el-form ref="formRef" :model="form" :rules="rules" class="register-form" label-position="top" size="large" @submit.prevent="submit">
-          <div class="form-grid">
-            <el-form-item label="登录用户名" prop="username" required><el-input v-model="form.username" autocomplete="username" maxlength="64" placeholder="4–64 位字母、数字或下划线" /></el-form-item>
-            <el-form-item label="企业名称" prop="companyName" required><el-input v-model="form.companyName" maxlength="100" placeholder="请输入企业营业执照上的名称" /></el-form-item>
-            <el-form-item label="联系人" prop="displayName" required><el-input v-model="form.displayName" maxlength="64" placeholder="请输入联系人姓名" /></el-form-item>
-            <el-form-item label="法定代表人" prop="legalPerson" required><el-input v-model="form.legalPerson" maxlength="64" placeholder="请输入营业执照法定代表人" /></el-form-item>
-            <el-form-item label="法人手机号" prop="legalPhone" required><el-input v-model="form.legalPhone" type="tel" autocomplete="tel" inputmode="numeric" maxlength="11" placeholder="请输入手机号" :prefix-icon="Phone" /></el-form-item>
-            <el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="form.contactEmail" type="email" autocomplete="email" maxlength="128" placeholder="选填，用于接收业务通知" :prefix-icon="Mail" /></el-form-item>
-            <el-form-item label="国家/地区" prop="countryCode"><el-select v-model="form.countryCode"><el-option label="中国大陆（CN）" value="CN" /></el-select></el-form-item>
-            <el-form-item label="企业地址" prop="address" class="full-row"><el-input v-model="form.address" maxlength="255" placeholder="选填，最多 255 个字符" /></el-form-item>
-            <el-form-item label="登录密码" prop="password" required><el-input v-model="form.password" type="password" autocomplete="new-password" maxlength="72" show-password placeholder="请设置 8–72 位密码" /></el-form-item>
-          </div>
+          <section class="register-section" aria-labelledby="account-section-title">
+            <h2 id="account-section-title">账号信息</h2>
+            <div class="register-form-grid">
+              <el-form-item label="登录用户名" prop="username" required><el-input v-model="form.username" autocomplete="username" maxlength="64" placeholder="4–64 位字母、数字或下划线" /></el-form-item>
+              <el-form-item label="登录密码" prop="password" required><el-input v-model="form.password" type="password" autocomplete="new-password" maxlength="72" show-password placeholder="请设置 8–72 位密码" /></el-form-item>
+            </div>
+          </section>
+
+          <section class="register-section" aria-labelledby="company-section-title">
+            <h2 id="company-section-title">企业信息</h2>
+            <div class="register-form-grid">
+              <el-form-item label="企业名称" prop="companyName" class="register-form-full" required><el-input v-model="form.companyName" maxlength="100" placeholder="请输入营业执照上的企业名称" /></el-form-item>
+              <el-form-item label="法定代表人" prop="legalPerson" required><el-input v-model="form.legalPerson" maxlength="64" placeholder="请输入营业执照法定代表人" /></el-form-item>
+              <el-form-item label="国家/地区" prop="countryCode"><el-select v-model="form.countryCode" class="register-select"><el-option label="中国大陆（CN）" value="CN" /></el-select></el-form-item>
+            </div>
+          </section>
+
+          <section class="register-section" aria-labelledby="contact-section-title">
+            <h2 id="contact-section-title">联系信息</h2>
+            <div class="register-form-grid">
+              <el-form-item label="联系人" prop="displayName" required><el-input v-model="form.displayName" maxlength="64" placeholder="请输入联系人姓名" /></el-form-item>
+              <el-form-item label="法人手机号" prop="legalPhone" required><el-input v-model="form.legalPhone" type="tel" autocomplete="tel" inputmode="numeric" maxlength="11" placeholder="请输入 11 位手机号" :prefix-icon="Phone" /></el-form-item>
+              <el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="form.contactEmail" type="email" autocomplete="email" maxlength="128" placeholder="选填，用于接收业务通知" :prefix-icon="Mail" /></el-form-item>
+              <el-form-item label="企业地址" prop="address"><el-input v-model="form.address" maxlength="255" placeholder="选填，最多 255 个字符" /></el-form-item>
+            </div>
+          </section>
+
           <el-form-item prop="agreement" class="agreement-item">
             <div class="agreement-control">
               <el-checkbox v-model="form.agreement"><span class="agreement-required" aria-hidden="true">*</span>我已阅读并同意</el-checkbox>
@@ -117,7 +144,7 @@ async function submit() {
             </div>
           </el-form-item>
           <p class="register-security-note">注册成功后账号可立即登录；首次登录需上传营业执照和法人身份证，货代资质证书、银行开户许可证可选填。提交平台审核通过后才能提交订单。</p>
-          <div class="register-actions"><el-button @click="$router.push('/login')">取消</el-button><el-button native-type="submit" type="primary" :loading="submitting">注册企业账号</el-button></div>
+          <el-button native-type="submit" class="register-submit" type="success" :loading="submitting">注册企业账号</el-button>
         </el-form>
       </template>
 
@@ -129,6 +156,6 @@ async function submit() {
         <div class="registration-next-step" role="note"><strong>提交订单前还需完成企业审核</strong><span>登录后请在“企业资料”上传营业执照和法人身份证并提交审核，其他资质可选填。审核期间仍可维护资料、成员和订单草稿。</span></div>
         <div class="registration-result-actions"><el-button type="primary" @click="router.push({ path: '/login', query: { account: form.username } })">立即登录</el-button></div>
       </section>
-    </main>
-  </div>
+    </div>
+  </AuthShell>
 </template>
diff --git a/src/modules/dashboard/views/DashboardView.test.mjs b/src/modules/dashboard/views/DashboardView.test.mjs
index 589cdeb..4de34c7 100644
--- a/src/modules/dashboard/views/DashboardView.test.mjs
+++ b/src/modules/dashboard/views/DashboardView.test.mjs
@@ -24,3 +24,14 @@ test('isolates recoverable dashboard failures without hiding successful sections
   assert.match(source, /@click="loadDashboardData"/)
   assert.doesNotMatch(source, /<template v-else>\s*<section class="quick-order-band">/)
 })
+
+test('matches the prototype business overview while keeping real order routing and data', () => {
+  assert.match(source, /选择业务，快速下单/)
+  assert.match(source, /海外采购/)
+  assert.match(source, /美国本土卡/)
+  assert.match(source, /美本土散板/)
+  assert.match(source, /void router\.push\('\/orders\/first-leg\/create'\)/)
+  assert.match(source, /order\.status === 'COMPLETED'/)
+  assert.match(source, /currentMonthOrderCount/)
+  assert.match(source, /提交订单后，专属客户经理将在 24 小时内与您联系/)
+})
diff --git a/src/modules/dashboard/views/DashboardView.vue b/src/modules/dashboard/views/DashboardView.vue
index df624e4..199f846 100644
--- a/src/modules/dashboard/views/DashboardView.vue
+++ b/src/modules/dashboard/views/DashboardView.vue
@@ -1,10 +1,23 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { AlertTriangle, ArrowRight, ClipboardCheck, Clock3, FilePlus2, Users } from '@lucide/vue'
-import { getFirstLegStatusLabel, getFirstLegStatusTone, useFirstLegOrdersStore } from '@/modules/first-leg/public'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import {
+  AlertTriangle,
+  ArrowRight,
+  CircleQuestionMark,
+  Headphones,
+  Lightbulb,
+  PanelsTopLeft,
+  ShoppingCart,
+  Tags,
+  Truck,
+} from '@lucide/vue'
+import { useFirstLegOrdersStore } from '@/modules/first-leg/public'
 import { useTenantAdministrationStore } from '@/modules/tenant-management/public'
 import { useAuthStore } from '@/modules/auth/public'
 
+const router = useRouter()
 const orders = useFirstLegOrdersStore()
 const tenant = useTenantAdministrationStore()
 const auth = useAuthStore()
@@ -16,9 +29,8 @@ const dataSourceLabels: Record<DashboardDataSource, string> = {
   members: '企业成员',
   orders: '头程订单',
 }
-const companyApproved = computed(() => tenant.company.auditStatus === 'ACTIVE')
+
 const companyUnavailable = computed(() => Boolean(loadErrors.value.company))
-const membersUnavailable = computed(() => Boolean(loadErrors.value.members))
 const ordersUnavailable = computed(() => Boolean(loadErrors.value.orders))
 const loadErrorItems = computed(() =>
   (Object.keys(loadErrors.value) as DashboardDataSource[]).map((key) => ({
@@ -27,18 +39,53 @@ const loadErrorItems = computed(() =>
     message: loadErrors.value[key] ?? '请求失败',
   })),
 )
-const stats = computed(() => [
-  ...(auth.hasPermission('order:first-leg:list')
-    ? [
-        { label: '进行中订单', value: ordersUnavailable.value ? '—' : String(orders.activeCount), icon: Clock3 },
-        { label: '待平台审核', value: ordersUnavailable.value ? '—' : String(orders.pendingCount), icon: ClipboardCheck },
-      ]
-    : []),
-  ...(auth.hasPermission('company:member:list')
-    ? [{ label: '企业成员', value: membersUnavailable.value ? '—' : String(tenant.activeMemberCount), icon: Users }]
-    : []),
+const canViewOrders = computed(() => auth.hasPermission('order:first-leg:list'))
+const canCreateOrders = computed(() => auth.hasPermission('order:first-leg:create'))
+const accountName = computed(() => {
+  if (!companyUnavailable.value && tenant.company.companyName) return tenant.company.companyName
+  return auth.user?.tenantName || auth.user?.name || '企业客户'
+})
+const accountInitial = computed(() => accountName.value.trim().slice(0, 1).toUpperCase() || 'C')
+const completedOrderCount = computed(() => orders.orders.filter((order) => order.status === 'COMPLETED').length)
+const currentMonthOrderCount = computed(() => {
+  const now = new Date()
+  return orders.orders.filter((order) => {
+    const createdAt = new Date(order.createdAt)
+    return !Number.isNaN(createdAt.getTime())
+      && createdAt.getFullYear() === now.getFullYear()
+      && createdAt.getMonth() === now.getMonth()
+  }).length
+})
+const overviewStats = computed(() => [
+  { label: '进行中订单', value: dashboardOrderValue(orders.activeCount) },
+  { label: '已完成订单', value: dashboardOrderValue(completedOrderCount.value) },
+  { label: '本月下单', value: dashboardOrderValue(currentMonthOrderCount.value) },
 ])
-const recentOrders = computed(() => orders.orders.slice(0, 3))
+const businessCards = [
+  {
+    title: '海外采购',
+    description: '采购代购 · 验货质检 · 集中发货',
+    icon: ShoppingCart,
+    tone: 'blue',
+  },
+  {
+    title: '美国本土卡',
+    description: '港口提柜 · 仓到仓 · 仓到门',
+    icon: Truck,
+    tone: 'green',
+  },
+  {
+    title: '美本土散板',
+    description: '拼车拼载 · 打盘服务 · 灵活派送',
+    icon: PanelsTopLeft,
+    tone: 'teal',
+  },
+] as const
+
+function dashboardOrderValue(value: number) {
+  if (!canViewOrders.value || ordersUnavailable.value) return '—'
+  return String(value)
+}
 
 function errorMessage(error: unknown) {
   return error instanceof Error ? error.message : '请求失败，请稍后重试'
@@ -64,13 +111,34 @@ async function loadDashboardData() {
   }
 }
 
+function openBusinessOrder() {
+  if (canCreateOrders.value) {
+    void router.push('/orders/first-leg/create')
+    return
+  }
+  if (canViewOrders.value) {
+    void router.push('/orders/first-leg')
+    return
+  }
+  ElMessage.warning('当前账号暂无头程订单权限，请联系企业管理员。')
+}
+
+function showSupportMessage(type: 'service' | 'faq' | 'quote') {
+  const messages = {
+    service: '客服联系方式正在配置中，请联系您的专属客户经理。',
+    faq: '常见问题页面即将上线。',
+    quote: '提交订单后，客户经理将根据货物信息为您提供报价。',
+  }
+  ElMessage.info(messages[type])
+}
+
 onMounted(() => void loadDashboardData())
 </script>
 
 <template>
   <div v-loading="loading" class="client-dashboard" :aria-busy="loading">
     <div v-if="loadErrorItems.length" class="dashboard-load-error" role="alert">
-      <AlertTriangle :size="20" />
+      <AlertTriangle :size="20" aria-hidden="true" />
       <div>
         <strong>部分业务数据加载失败</strong>
         <ul>
@@ -81,40 +149,467 @@ onMounted(() => void loadDashboardData())
       </div>
       <el-button :loading="loading" @click="loadDashboardData">重新加载</el-button>
     </div>
-    <section class="quick-order-band">
-      <div>
-        <span>头程物流</span>
-        <h2>{{ auth.hasPermission('order:first-leg:create') ? '创建新的头程订单' : '跟进企业头程订单' }}</h2>
-        <p v-if="companyUnavailable">企业资料暂不可用，恢复后可查看下单资格。</p>
-        <p v-else>{{ companyApproved ? '企业资料已审核，可正常提交并跟进订单。' : '企业资料待平台审核，当前可以维护并保存订单草稿。' }}</p>
-      </div>
-      <el-button v-if="auth.hasPermission('order:first-leg:list')" type="primary" size="large" @click="$router.push('/orders/first-leg')"><FilePlus2 :size="18" /> {{ auth.hasPermission('order:first-leg:create') ? '开始下单' : '查看订单' }}</el-button>
-    </section>
-    <section v-if="stats.length" class="client-stats">
-      <article v-for="item in stats" :key="item.label"><component :is="item.icon" :size="20" /><div><span>{{ item.label }}</span><strong>{{ item.value }}</strong></div></article>
-    </section>
-    <section class="client-content-grid">
-      <article v-if="auth.hasPermission('order:first-leg:list')" class="client-card">
-        <header><div><span class="section-label">ORDERS</span><h3>最近订单</h3></div><el-button text @click="$router.push('/orders/first-leg')">查看全部 <ArrowRight :size="16" /></el-button></header>
-        <div v-if="ordersUnavailable" class="dashboard-section-error" role="status">订单数据暂不可用，请重新加载后查看。</div>
-        <div v-else-if="recentOrders.length" class="recent-orders"><button v-for="order in recentOrders" :key="order.id" type="button" @click="$router.push('/orders/first-leg')"><span><strong>{{ order.orderNo || '未提交草稿' }}</strong><small>{{ order.origin }} → {{ order.destination }}</small></span><el-tag :type="getFirstLegStatusTone(order.status)" effect="light">{{ getFirstLegStatusLabel(order.status) }}</el-tag></button></div>
-        <div v-else class="client-empty">暂无订单，提交第一笔头程订单后将在这里展示。</div>
-      </article>
-      <article v-if="auth.hasPermission('company:profile:view')" class="client-card">
-        <header><div><span class="section-label">ACCOUNT</span><h3>企业资料</h3></div></header>
-        <div v-if="companyUnavailable" class="dashboard-section-error" role="status">企业资料暂不可用，请重新加载后查看。</div>
-        <template v-else>
-          <dl class="profile-summary"><div><dt>企业名称</dt><dd>{{ tenant.company.companyName || '-' }}</dd></div><div><dt>审核状态</dt><dd><el-tag :type="companyApproved ? 'success' : 'warning'" effect="light">{{ companyApproved ? '已通过' : '待审核' }}</el-tag></dd></div><div><dt>当前成员</dt><dd>{{ auth.user?.name }}</dd></div></dl>
-          <el-button plain @click="$router.push('/company/profile')">{{ companyApproved ? '查看企业资料' : '完善企业资料' }}</el-button>
-        </template>
-      </article>
-    </section>
+
+    <div class="dashboard-layout">
+      <main class="dashboard-business" aria-labelledby="dashboard-heading">
+        <header class="dashboard-intro">
+          <h2 id="dashboard-heading">选择业务，快速下单</h2>
+          <p>请选择您需要的业务类型，填写信息后提交订单，我们将尽快为您安排。</p>
+        </header>
+
+        <section class="business-card-grid" aria-label="可选业务">
+          <button
+            v-for="business in businessCards"
+            :key="business.title"
+            type="button"
+            class="business-card"
+            :class="`business-card--${business.tone}`"
+            @click="openBusinessOrder"
+          >
+            <span class="business-card__icon" aria-hidden="true">
+              <component :is="business.icon" :size="29" :stroke-width="2.4" />
+            </span>
+            <span class="business-card__copy">
+              <strong>{{ business.title }}</strong>
+              <small>{{ business.description }}</small>
+            </span>
+            <span class="business-card__action">
+              {{ canCreateOrders ? '开始下单' : canViewOrders ? '查看订单' : '暂无权限' }}
+              <ArrowRight :size="18" aria-hidden="true" />
+            </span>
+          </button>
+        </section>
+      </main>
+
+      <aside class="dashboard-aside" aria-label="账户与业务信息">
+        <section class="aside-card account-card">
+          <h3>账户信息</h3>
+          <div class="account-summary">
+            <span class="account-avatar">{{ accountInitial }}</span>
+            <span class="account-copy">
+              <strong>{{ accountName }}</strong>
+              <small>企业客户</small>
+            </span>
+          </div>
+          <p v-if="companyUnavailable" class="account-load-error" role="status">企业资料暂不可用，请重新加载后查看。</p>
+        </section>
+
+        <section class="aside-card">
+          <h3>数据概览</h3>
+          <dl class="overview-stats">
+            <div v-for="stat in overviewStats" :key="stat.label">
+              <dt>{{ stat.label }}</dt>
+              <dd>{{ stat.value }}</dd>
+            </div>
+          </dl>
+          <p v-if="ordersUnavailable" class="dashboard-section-error" role="status">订单数据暂不可用，请重新加载后查看。</p>
+        </section>
+
+        <section class="aside-card">
+          <h3>帮助与支持</h3>
+          <div class="support-links">
+            <button type="button" @click="showSupportMessage('service')"><Headphones :size="19" /><span>联系客服</span></button>
+            <button type="button" @click="showSupportMessage('faq')"><CircleQuestionMark :size="19" /><span>常见问题</span></button>
+            <button type="button" @click="showSupportMessage('quote')"><Tags :size="19" /><span>获取报价</span></button>
+          </div>
+        </section>
+
+        <div class="dashboard-tip">
+          <Lightbulb :size="19" aria-hidden="true" />
+          <p>提交订单后，专属客户经理将在 24 小时内与您联系，确认运输方案与报价。</p>
+        </div>
+      </aside>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.dashboard-load-error ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
-.dashboard-load-error li { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; line-height: 1.5; }
-.dashboard-load-error li span { color: #9a5a09; font-weight: 650; }
-.dashboard-section-error { display: grid; min-height: 160px; place-items: center; padding: 24px; border-top: 1px solid var(--border); color: #8a5a22; font-size: 13px; line-height: 1.6; text-align: center; }
+.client-dashboard {
+  --dashboard-blue: #1565c0;
+  --dashboard-green: #3f9f47;
+  --dashboard-teal: #078a99;
+  display: block;
+  min-height: calc(100vh - 128px);
+}
+
+.dashboard-load-error {
+  margin-bottom: 20px;
+}
+
+.dashboard-load-error ul {
+  display: grid;
+  gap: 3px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dashboard-load-error li {
+  overflow-wrap: anywhere;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.dashboard-load-error li span {
+  color: #9a5a09;
+  font-weight: 650;
+}
+
+.dashboard-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 286px;
+  gap: clamp(24px, 3vw, 42px);
+  align-items: start;
+}
+
+.dashboard-business {
+  min-width: 0;
+  padding: 14px 0 24px;
+}
+
+.dashboard-intro {
+  margin-bottom: 34px;
+}
+
+.dashboard-intro h2 {
+  max-width: 720px;
+  margin: 0;
+  color: #111827;
+  font-size: clamp(30px, 3.2vw, 46px);
+  line-height: 1.18;
+  letter-spacing: -.025em;
+}
+
+.dashboard-intro p {
+  max-width: 720px;
+  margin: 16px 0 0;
+  color: #697586;
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+.business-card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.business-card {
+  --card-accent: var(--dashboard-blue);
+  display: flex;
+  min-width: 0;
+  min-height: 286px;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 30px;
+  border: 0;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 12px 36px rgba(23, 50, 77, .08);
+  color: #111827;
+  cursor: pointer;
+  text-align: left;
+  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s cubic-bezier(.16, 1, .3, 1);
+}
+
+.business-card--green { --card-accent: var(--dashboard-green); }
+.business-card--teal { --card-accent: var(--dashboard-teal); }
+
+.business-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 20px 46px rgba(23, 50, 77, .14);
+}
+
+.business-card:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--card-accent) 36%, white);
+  outline-offset: 4px;
+}
+
+.business-card__icon {
+  display: grid;
+  width: 60px;
+  height: 60px;
+  place-items: center;
+  border-radius: 16px;
+  background: var(--card-accent);
+  box-shadow: 0 8px 18px color-mix(in srgb, var(--card-accent) 24%, transparent);
+  color: #fff;
+}
+
+.business-card__copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 34px;
+}
+
+.business-card__copy strong {
+  font-size: 22px;
+  line-height: 1.35;
+}
+
+.business-card__copy small {
+  color: #697586;
+  font-size: 14px;
+  line-height: 1.65;
+}
+
+.business-card__action {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: auto;
+  padding-top: 28px;
+  color: var(--card-accent);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.business-card__action svg {
+  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
+}
+
+.business-card:hover .business-card__action svg {
+  transform: translateX(3px);
+}
+
+.dashboard-aside {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.aside-card {
+  padding: 20px;
+  border: 1px solid #e9eef5;
+  border-radius: 14px;
+  background: #f8fafc;
+}
+
+.aside-card h3 {
+  margin: 0 0 18px;
+  color: #8b9bb2;
+  font-size: 12px;
+  font-weight: 750;
+  letter-spacing: .06em;
+}
+
+.account-summary {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 14px;
+}
+
+.account-avatar {
+  display: grid;
+  width: 52px;
+  height: 52px;
+  flex: 0 0 52px;
+  place-items: center;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #1976d2, #00a993);
+  color: #fff;
+  font-size: 20px;
+  font-weight: 750;
+}
+
+.account-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.account-copy strong {
+  overflow: hidden;
+  color: #111827;
+  font-size: 15px;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.account-copy small {
+  color: #66758a;
+  font-size: 12px;
+}
+
+.account-load-error {
+  margin: 14px 0 0;
+  color: #8a5a22;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.overview-stats {
+  margin: 0;
+}
+
+.overview-stats div {
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px dashed #dfe6ef;
+}
+
+.overview-stats div:last-child {
+  border-bottom: 0;
+}
+
+.overview-stats dt {
+  color: #475569;
+  font-size: 13px;
+}
+
+.overview-stats dd {
+  margin: 0;
+  color: #111827;
+  font-size: 15px;
+  font-weight: 750;
+}
+
+.dashboard-section-error {
+  margin: 10px 0 0;
+  padding: 10px 0 0;
+  border-top: 1px solid #e9eef5;
+  color: #8a5a22;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.support-links {
+  display: grid;
+  gap: 3px;
+}
+
+.support-links button {
+  display: flex;
+  width: 100%;
+  min-height: 44px;
+  align-items: center;
+  gap: 11px;
+  padding: 0 9px;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: #334155;
+  cursor: pointer;
+  font-size: 14px;
+  text-align: left;
+}
+
+.support-links button svg {
+  flex: 0 0 19px;
+  color: #00a993;
+}
+
+.support-links button:hover {
+  background: #edf2f7;
+  color: var(--dashboard-blue);
+}
+
+.support-links button:focus-visible {
+  outline: 2px solid var(--dashboard-blue);
+  outline-offset: 2px;
+}
+
+.dashboard-tip {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 10px;
+  padding: 16px;
+  border: 1px solid rgba(0, 169, 147, .24);
+  border-radius: 14px;
+  background: #eef9f8;
+  color: #53657a;
+}
+
+.dashboard-tip svg {
+  margin-top: 2px;
+  color: #00a993;
+}
+
+.dashboard-tip p {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.75;
+}
+
+@media (max-width: 1180px) {
+  .dashboard-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-aside {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    align-items: stretch;
+  }
+
+  .dashboard-tip {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 960px) {
+  .business-card-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .business-card {
+    min-height: 232px;
+  }
+}
+
+@media (max-width: 720px) {
+  .client-dashboard {
+    min-height: calc(100vh - 118px);
+  }
+
+  .dashboard-business {
+    padding-top: 2px;
+  }
+
+  .dashboard-intro {
+    margin-bottom: 24px;
+  }
+
+  .dashboard-intro h2 {
+    font-size: 28px;
+  }
+
+  .dashboard-intro p {
+    margin-top: 12px;
+    font-size: 14px;
+  }
+
+  .business-card {
+    min-height: 220px;
+    padding: 24px;
+  }
+
+  .business-card__copy {
+    margin-top: 24px;
+  }
+
+  .dashboard-aside {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-tip {
+    grid-column: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .business-card,
+  .business-card__action svg {
+    transition: none;
+  }
+}
 </style>
diff --git a/src/modules/tenant-management/views/MembersView.vue b/src/modules/tenant-management/views/MembersView.vue
index 3593fa2..78835e5 100644
--- a/src/modules/tenant-management/views/MembersView.vue
+++ b/src/modules/tenant-management/views/MembersView.vue
@@ -157,7 +157,7 @@ async function resetPassword(member: TenantMember) {
 </script>
 
 <template>
-  <section v-loading="loading" class="members-page">
+  <section v-loading="loading" class="members-page" :aria-busy="loading">
     <div v-if="loadError" class="client-card collection-load-error" role="alert">
       <div><strong>企业成员加载失败</strong><span>{{ loadError }}</span></div>
       <el-button :loading="loading" @click="loadMembers">重新加载</el-button>
@@ -167,7 +167,7 @@ async function resetPassword(member: TenantMember) {
 
     <div class="client-card member-table-card">
       <div v-if="auth.hasPermission('company:member:write')" class="table-actions"><el-button type="primary" @click="openCreate"><Plus :size="17" />新增成员</el-button></div>
-      <DataTable v-model:page="memberPage" v-model:page-size="memberPageSize" class="desktop-member-table" :data="pagedMembers" :columns="memberTableColumns" :loading="loading" :total="filteredMembers.length" row-key="id">
+      <DataTable v-model:page="memberPage" v-model:page-size="memberPageSize" class="desktop-member-table" :data="pagedMembers" :columns="memberTableColumns" :total="filteredMembers.length" row-key="id">
         <template #actions="{ row }"><el-button v-if="auth.hasPermission('company:member:write')" link type="primary" @click="openEdit(row as TenantMember)"><Pencil :size="15" />编辑</el-button><el-button v-if="auth.hasPermission('company:member:reset-password')" link type="primary" @click="resetPassword(row as TenantMember)"><KeyRound :size="15" />重置密码</el-button><el-button v-if="auth.hasPermission('company:member:write') && !(row as TenantMember).isAdministrator" link :type="(row as TenantMember).status === 'ACTIVE' ? 'danger' : 'success'" @click="toggleStatus(row as TenantMember)">{{ (row as TenantMember).status === 'ACTIVE' ? '停用' : '启用' }}</el-button><span v-if="!auth.hasPermission('company:member:write') && !auth.hasPermission('company:member:reset-password')" class="readonly-action">仅查看</span></template>
         <template #member="{ row }"><div class="member-identity"><span>{{ (row as TenantMember).name.slice(0, 1) }}</span><div><strong>{{ (row as TenantMember).name }}</strong><small>{{ (row as TenantMember).account }}</small></div></div></template>
         <template #contact="{ row }"><div class="member-contact"><span>{{ (row as TenantMember).phone }}</span><small>{{ (row as TenantMember).email || '-' }}</small></div></template>
@@ -215,7 +215,7 @@ async function resetPassword(member: TenantMember) {
 .member-identity strong, .member-identity small, .member-contact small { overflow-wrap: anywhere; }
 .member-identity small, .member-contact small { color: var(--muted); font-size: 10px; }
 .role-tags { display: flex; gap: 5px; flex-wrap: wrap; }
-.mobile-member-list { display: none; }
+.mobile-member-list, .mobile-member-empty { display: none; }
 .member-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
 .member-form-tip { display: flex; gap: 10px; padding: 13px; border: 1px solid #cfe1dc; background: #f2f7f6; color: var(--muted); font-size: 11px; line-height: 1.6; }
 .member-form-tip svg { flex: 0 0 17px; color: var(--primary); }
diff --git a/src/modules/tenant-management/views/RolesView.vue b/src/modules/tenant-management/views/RolesView.vue
index f6ecce1..3c5111b 100644
--- a/src/modules/tenant-management/views/RolesView.vue
+++ b/src/modules/tenant-management/views/RolesView.vue
@@ -138,7 +138,7 @@ function assignPermissions(role: TenantRole) {
 </script>
 
 <template>
-  <section v-loading="loading" class="roles-page">
+  <section v-loading="loading" class="roles-page" :aria-busy="loading">
     <div v-if="loadError" class="client-card collection-load-error" role="alert">
       <div><strong>企业角色加载失败</strong><span>{{ loadError }}</span></div>
       <el-button :loading="loading" @click="loadRoles">重新加载</el-button>
@@ -148,7 +148,7 @@ function assignPermissions(role: TenantRole) {
 
     <div class="client-card role-table-card">
       <div v-if="auth.hasPermission('company:role:write')" class="table-actions"><el-button type="primary" @click="openCreate"><Plus :size="17" />新增角色</el-button></div>
-      <DataTable v-model:page="rolePage" v-model:page-size="rolePageSize" :data="pagedRoles" :columns="roleTableColumns" :loading="loading" :total="filteredRoles.length" row-key="id">
+      <DataTable v-model:page="rolePage" v-model:page-size="rolePageSize" :data="pagedRoles" :columns="roleTableColumns" :total="filteredRoles.length" row-key="id">
         <template #actions="{ row }"><el-button v-if="auth.hasPermission('company:permission:list')" link type="primary" :disabled="actionRoleId === (row as TenantRole).id" @click="assignPermissions(row as TenantRole)">{{ auth.hasPermission('company:permission:assign') && !(row as TenantRole).builtin ? '分配权限' : '查看权限' }}</el-button><el-button v-if="auth.hasPermission('company:role:write') && !(row as TenantRole).builtin" link type="primary" :disabled="actionRoleId === (row as TenantRole).id" @click="openEdit(row as TenantRole)"><Pencil :size="15" />编辑</el-button><el-button v-if="auth.hasPermission('company:role:write') && !(row as TenantRole).builtin" link :type="(row as TenantRole).status === 'ACTIVE' ? 'warning' : 'success'" :loading="actionRoleId === (row as TenantRole).id" @click="toggleStatus(row as TenantRole)">{{ (row as TenantRole).status === 'ACTIVE' ? '停用' : '启用' }}</el-button><el-button v-if="auth.hasPermission('company:role:write') && !(row as TenantRole).builtin" link type="danger" :disabled="actionRoleId === (row as TenantRole).id" @click="removeRole(row as TenantRole)"><Trash2 :size="15" />删除</el-button></template>
         <template #role="{ row }"><div class="role-identity"><span class="role-icon"><LockKeyhole v-if="(row as TenantRole).builtin" :size="20" /><ShieldCheck v-else :size="20" /></span><div><strong>{{ (row as TenantRole).name }}</strong><code>{{ (row as TenantRole).code }}</code></div></div></template>
         <template #memberCount="{ row }"><span>{{ store.roleMemberCount((row as TenantRole).id) }}</span></template>
diff --git a/src/modules/tenant-management/views/TenantAdministrationViews.test.mjs b/src/modules/tenant-management/views/TenantAdministrationViews.test.mjs
index 2838b87..f320865 100644
--- a/src/modules/tenant-management/views/TenantAdministrationViews.test.mjs
+++ b/src/modules/tenant-management/views/TenantAdministrationViews.test.mjs
@@ -92,6 +92,8 @@ test('implements member list, role assignment, password reset and status control
   assert.match(membersSource, /function toggleStatus\(member: TenantMember\)/)
   assert.match(membersSource, /v-model="form\.roleIds" multiple/)
   assert.match(membersSource, /class="mobile-member-list"/)
+  assert.match(membersSource, /\.mobile-member-list, \.mobile-member-empty \{ display: none; \}/)
+  assert.match(membersSource, /\.mobile-member-empty \{ display: grid; min-height: 150px; place-items: center; \}/)
   assert.match(membersSource, /store\.loadMembers\(\)/)
   assert.match(membersSource, /await store\.resetMemberPassword/)
   assert.match(membersSource, /await store\.toggleMemberStatus/)
@@ -106,6 +108,8 @@ test('implements member list, role assignment, password reset and status control
   assert.match(membersSource, /import DataTable.*DataTable\.vue/)
   assert.match(membersSource, /<QueryToolbar v-model="memberFilters"/)
   assert.match(membersSource, /<DataTable v-model:page="memberPage" v-model:page-size="memberPageSize"/)
+  assert.match(membersSource, /<section v-loading="loading" class="members-page" :aria-busy="loading">/)
+  assert.doesNotMatch(membersSource, /<DataTable[^>]*:loading="loading"/)
   assert.match(membersSource, /fixed: 'left'/)
   assert.match(membersSource, /class="table-actions"/)
   assert.doesNotMatch(membersSource, /template #actions><el-button v-if="auth\.hasPermission\('company:member:write'\)/)
@@ -133,6 +137,8 @@ test('protects built-in roles and exposes role permission assignment', () => {
   assert.match(rolesSource, /import DataTable.*DataTable\.vue/)
   assert.match(rolesSource, /<QueryToolbar v-model="roleFilters"/)
   assert.match(rolesSource, /<DataTable v-model:page="rolePage" v-model:page-size="rolePageSize"/)
+  assert.match(rolesSource, /<section v-loading="loading" class="roles-page" :aria-busy="loading">/)
+  assert.doesNotMatch(rolesSource, /<DataTable[^>]*:loading="loading"/)
   assert.match(rolesSource, /fixed: 'left'/)
   assert.match(rolesSource, /class="table-actions"/)
   assert.doesNotMatch(rolesSource, /template #actions><el-button v-if="auth\.hasPermission\('company:role:write'\)/)
diff --git a/src/styles/index.css b/src/styles/index.css
index 2542b96..9cc17ab 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,56 +1,71 @@
 @import './foundation.css';
 @import './shell.css';
 
-.auth-page { min-height: 100vh; background: #eef3f3; }
-.auth-header { display: flex; height: 72px; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 6vw, 90px); border-bottom: 1px solid var(--border); background: #fff; color: var(--muted); font-size: 13px; }
+.auth-page { min-height: 100vh; background: #edf2f4; color: var(--navy); }
+.auth-header { display: flex; height: 72px; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 6vw, 90px); border-bottom: 1px solid #dfe6e8; background: #fff; color: #59646d; font-size: 13px; }
 .auth-brand { display: flex; min-width: 0; align-items: center; color: var(--navy); text-decoration: none; }
 .auth-brand-logo { display: block; width: 158px; height: 56px; object-fit: contain; object-position: left center; }
-.auth-header a { color: var(--primary); text-decoration: none; }
-.auth-main { display: grid; min-height: calc(100vh - 72px); grid-template-columns: 1fr 440px; align-items: center; gap: clamp(60px, 10vw, 150px); width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 50px 0; }
-.auth-kicker, .section-label { color: var(--primary); font-size: 11px; font-weight: 750; letter-spacing: .13em; }
-.auth-copy h1 { margin: 15px 0 20px; color: var(--navy); font-size: clamp(38px, 4.5vw, 62px); line-height: 1.14; letter-spacing: -.04em; }
-.auth-copy > p { max-width: 520px; color: var(--muted); font-size: 16px; line-height: 1.8; }
-.auth-facts { display: flex; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
-.auth-facts span { padding: 8px 12px; border: 1px solid #cbdad7; background: rgba(255,255,255,.7); color: #40534f; font-size: 12px; }
-.auth-card { padding: 38px; border: 1px solid var(--border); background: #fff; box-shadow: 0 14px 36px rgba(23,50,77,.08); }
-.auth-card h2 { margin: 0 0 8px; font-size: 26px; }
-.auth-card > p { margin: 0 0 28px; color: var(--muted); }
+.auth-header-action { display: flex; min-height: 44px; align-items: center; gap: 8px; }
+.auth-header-action a { display: inline-flex; min-height: 44px; align-items: center; color: #155eaa; font-weight: 650; text-decoration: none; }
+.auth-header-action a:hover { text-decoration: underline; }
+.auth-header-action a:focus-visible, .auth-brand:focus-visible { outline: 2px solid #155eaa; outline-offset: 3px; }
+.auth-stage { display: grid; min-height: calc(100vh - 72px); padding: clamp(28px, 5vw, 64px) 24px; place-items: center; }
+.auth-panel { display: grid; width: min(1180px, 100%); min-height: 640px; grid-template-columns: minmax(360px, .95fr) minmax(440px, 1.05fr); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 24px 64px rgba(20, 42, 65, .16); }
+.auth-panel--register { width: min(1280px, 100%); min-height: 820px; grid-template-columns: minmax(340px, .72fr) minmax(600px, 1.28fr); }
+.auth-visual { position: relative; min-height: 100%; overflow: hidden; color: #fff; }
+.auth-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; transform: scale(1.01); }
+.auth-visual-shade { position: absolute; inset: 0; background: linear-gradient(155deg, rgba(7, 23, 40, .93) 0%, rgba(13, 71, 117, .82) 58%, rgba(10, 93, 92, .74) 100%); }
+.auth-visual-content { position: relative; z-index: 1; display: flex; height: 100%; min-height: inherit; flex-direction: column; justify-content: space-between; padding: clamp(42px, 5vw, 72px); }
+.auth-panel--register .auth-visual-content { padding: 48px 42px; }
+.auth-visual h1 { max-width: 12ch; margin: 0 0 18px; color: #fff; font-size: clamp(31px, 3.2vw, 46px); line-height: 1.18; letter-spacing: -.025em; }
+.auth-panel--register .auth-visual h1 { max-width: 10ch; font-size: clamp(30px, 2.8vw, 40px); }
+.auth-visual p { max-width: 32ch; margin: 0; color: #dbeaf0; font-size: 15px; line-height: 1.8; }
+.auth-visual ul { display: flex; margin: 48px 0 0; padding: 0; flex-direction: column; gap: 16px; list-style: none; }
+.auth-visual li { display: flex; align-items: center; gap: 10px; color: #f4fbfb; font-size: 14px; font-weight: 600; }
+.auth-visual li svg { flex: 0 0 auto; color: #64c877; }
+.auth-form-panel { display: flex; min-width: 0; align-items: center; padding: clamp(40px, 5vw, 70px); background: #fff; }
+.auth-panel--register .auth-form-panel { align-items: stretch; padding: 44px 48px; }
+.auth-form-content { width: 100%; margin: auto; }
+.auth-form-content--login { max-width: 420px; }
+.auth-form-content--register { max-width: 760px; }
+.auth-form-heading { margin-bottom: 26px; }
+.auth-form-heading h1, .auth-form-heading h2 { margin: 0 0 9px; color: #18243a; font-size: 30px; line-height: 1.3; letter-spacing: -.02em; }
+.auth-form-heading p { margin: 0; color: #66717a; font-size: 14px; line-height: 1.7; }
+.section-label { color: var(--primary); font-size: 11px; font-weight: 750; letter-spacing: .13em; }
+.auth-account-note { margin: -8px 0 24px; padding: 12px 14px; background: #edf6f4; color: #385b57; font-size: 12px; line-height: 1.65; }
 .auth-form-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -2px 0 18px; }
-.auth-form-options button { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--primary); cursor: pointer; }
+.auth-form-options button { min-height: 44px; padding: 0; border: 0; background: transparent; color: #155eaa; cursor: pointer; }
 .auth-form-options button:hover { text-decoration: underline; }
-.auth-form-options button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
-.auth-submit { width: 100%; }
+.auth-form-options button:focus-visible { outline: 2px solid #155eaa; outline-offset: 3px; }
+.auth-submit { width: 100%; min-height: 46px; }
 .auth-submit span { display: flex; align-items: center; gap: 7px; }
 
-.register-page { min-height: 100vh; background: #f5f7f8; }
-.register-header { display: flex; height: 68px; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 5vw, 72px); border-bottom: 1px solid var(--border); background: #fff; }
-.register-header > a { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; text-decoration: none; }
-.register-main { width: min(920px, calc(100% - 32px)); margin: 36px auto; padding: 34px 38px; border: 1px solid var(--border); background: #fff; }
-.register-title { display: flex; align-items: center; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
-.register-title > div { display: grid; width: 44px; height: 44px; place-items: center; background: #e7f3f1; color: var(--primary); }
-.register-title h1 { margin: 0 0 5px; font-size: 23px; }
-.register-title p { margin: 0; color: var(--muted); font-size: 12px; }
-.register-form { margin-top: 28px; }
-.form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
+.register-form { margin-top: 4px; }
+.register-section { padding: 22px 0 2px; border-top: 1px solid #e5eaec; }
+.register-section:first-child { padding-top: 0; border-top: 0; }
+.register-section h2 { margin: 0 0 16px; color: #26364a; font-size: 15px; line-height: 1.4; }
+.register-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
+.register-form-full { grid-column: 1 / -1; }
+.register-select { width: 100%; }
 .agreement-item { margin-bottom: 8px; }
-.agreement-control { display: flex; min-height: 44px; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--muted); }
+.agreement-control { display: flex; min-height: 44px; align-items: center; gap: 4px; flex-wrap: wrap; color: #59646d; }
 .agreement-item .el-checkbox { min-height: 44px; white-space: normal; }
 .agreement-required { margin-right: 2px; color: var(--el-color-danger); }
-.agreement-item a { color: var(--primary); text-decoration: none; }
+.agreement-item a { color: #155eaa; text-decoration: none; }
 .agreement-item a:hover { text-decoration: underline; }
-.agreement-item a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
-.register-security-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
-.register-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
-.registration-result { display: flex; min-height: 470px; align-items: center; justify-content: center; flex-direction: column; color: var(--primary); text-align: center; }
+.agreement-item a:focus-visible { outline: 2px solid #155eaa; outline-offset: 2px; }
+.register-security-note { margin: 0; color: #66717a; font-size: 12px; line-height: 1.65; }
+.register-submit { width: 100%; min-height: 48px; margin-top: 22px; --el-button-bg-color: #2e7d32; --el-button-border-color: #2e7d32; --el-button-hover-bg-color: #256b2a; --el-button-hover-border-color: #256b2a; }
+.registration-result { display: flex; min-height: 640px; align-items: center; justify-content: center; flex-direction: column; color: #2e7d32; text-align: center; }
 .registration-result h1 { margin: 18px 0 8px; color: var(--navy); font-size: 26px; }
-.registration-result > p { max-width: 600px; margin: 0; color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }
+.registration-result > p { max-width: 600px; margin: 0; color: #66717a; line-height: 1.7; overflow-wrap: anywhere; }
 .registration-result > p strong { color: var(--navy); }
-.registration-result dl { display: grid; width: min(620px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0 0; border: 1px solid var(--border); color: var(--navy); text-align: left; }
+.registration-result dl { display: grid; width: min(620px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0 0; border: 1px solid #e0e6e8; color: var(--navy); text-align: left; }
 .registration-result dl div { min-width: 0; padding: 14px 16px; border-bottom: 1px solid var(--border); }
 .registration-result dl div:nth-child(odd) { border-right: 1px solid var(--border); }
 .registration-result dt { color: var(--muted); font-size: 11px; }
 .registration-result dd { margin: 5px 0 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 650; }
-.registration-next-step { display: flex; width: min(620px, 100%); flex-direction: column; gap: 5px; margin-top: 18px; padding: 14px 16px; border: 1px solid #d9cfad; background: #fff9e9; color: var(--muted); font-size: 12px; line-height: 1.65; text-align: left; }
+.registration-next-step { display: flex; width: min(620px, 100%); flex-direction: column; gap: 5px; margin-top: 18px; padding: 14px 16px; border: 1px solid #d9cfad; background: #fff9e9; color: #66717a; font-size: 12px; line-height: 1.65; text-align: left; }
 .registration-next-step strong { color: var(--navy); font-size: 13px; }
 .registration-result-actions { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
 
@@ -114,8 +129,12 @@
 .el-button--primary { --el-button-bg-color: var(--primary); --el-button-border-color: var(--primary); --el-button-hover-bg-color: var(--primary-dark); --el-button-hover-border-color: var(--primary-dark); }
 
 @media (max-width: 960px) {
-  .auth-main { grid-template-columns: 1fr; width: min(520px, calc(100% - 32px)); }
-  .auth-copy { display: none; }
+  .auth-stage { padding: 32px 20px; }
+  .auth-panel { width: min(680px, 100%); min-height: 0; grid-template-columns: 1fr; }
+  .auth-panel--login { width: min(520px, 100%); }
+  .auth-visual { display: none; }
+  .auth-form-panel, .auth-panel--register .auth-form-panel { padding: 44px; }
+  .registration-result { min-height: 560px; }
   .client-content-grid { grid-template-columns: 1fr; }
 }
 @media (max-width: 720px) {
@@ -134,10 +153,18 @@
   .dashboard-load-error .el-button { width: 100%; min-height: 44px; }
   .client-stats { grid-template-columns: 1fr; }
   .quick-order-band { align-items: flex-start; flex-direction: column; }
-  .form-grid { grid-template-columns: 1fr; }
-  .auth-header { padding: 0 18px; }
-  .auth-header > div:last-child { display: none; }
-  .auth-card, .register-main { padding: 26px 20px; }
+  .auth-header { height: 64px; padding: 0 18px; }
+  .auth-brand-logo { width: 132px; height: 50px; }
+  .auth-header-action > span { display: none; }
+  .auth-stage { min-height: calc(100vh - 64px); padding: 0; background: #fff; place-items: start center; }
+  .auth-panel, .auth-panel--register { width: 100%; border-radius: 0; box-shadow: none; }
+  .auth-form-panel, .auth-panel--register .auth-form-panel { padding: 34px 20px 44px; }
+  .auth-form-heading { margin-bottom: 22px; }
+  .auth-form-heading h1, .auth-form-heading h2 { font-size: 26px; }
+  .register-form-grid { grid-template-columns: 1fr; }
+  .register-form-full { grid-column: auto; }
+  .register-section { padding-top: 20px; }
+  .registration-result { min-height: 0; padding: 34px 0 12px; }
   .registration-result dl { grid-template-columns: 1fr; }
   .registration-result dl div:nth-child(odd) { border-right: 0; }
   .registration-result-actions { width: 100%; }