feat: rebuild admin shell from reference

admin-web/src/layouts/MainLayout.vue

@@ -1,123 +1,59 @@
 <template>
-  <el-container class="main-layout">
+  <div class="admin-scene" :class="{ 'sidebar-collapsed': isCollapse }">
-    <el-aside :width="isCollapse ? '72px' : '220px'" class="sidebar">
+    <header class="scene-header" aria-label="善缘丹阳公益服务品牌信息">
+      <div class="scene-brand">
+        <img src="/brand/logo-mark.png" alt="善缘丹阳" />
+        <div class="scene-brand-copy">
+          <strong>善缘丹阳</strong>
+          <span>公益婚恋服务平台</span>
+        </div>
+        <div class="scene-title">
+          <h1>管理端（运营后台）</h1>
+          <p>用专业的服务，帮助更多人遇见对的人</p>
+        </div>
+      </div>
+      <div class="scene-benefits" aria-label="平台服务原则">
+        <span><el-icon><StarFilled /></el-icon><b>公益为本</b><small>不以营利为目的</small></span>
+        <span><el-icon><Lock /></el-icon><b>真实可靠</b><small>严格审核 多重保障</small></span>
+        <span><el-icon><LocationFilled /></el-icon><b>本地服务</b><small>深耕丹阳 服务家乡</small></span>
+        <span><el-icon><Opportunity /></el-icon><b>成就幸福</b><small>让爱在丹阳生根发芽</small></span>
+      </div>
+    </header>
+
+    <el-container class="admin-shell">
+      <el-aside :width="isCollapse ? '76px' : '208px'" class="admin-sidebar">
         <div class="brand" :class="{ compact: isCollapse }">
           <img class="brand-mark" src="/brand/logo-mark.png" alt="" />
           <div v-if="!isCollapse" class="brand-copy">
             <strong>善缘丹阳</strong>
-          <span>公益婚恋运营平台</span>
+            <span>公益婚恋服务平台</span>
           </div>
         </div>
 
         <el-scrollbar class="menu-scroll">
           <nav aria-label="管理后台主导航">
-          <el-menu :default-active="activeMenu" :collapse="isCollapse" :router="true" class="sidebar-menu">
+            <el-menu
-            <el-menu-item index="/dashboard">
+              :default-active="activeMenu"
-              <el-icon><DataBoard /></el-icon>
+              :collapse="isCollapse"
-              <template #title>工作台</template>
+              :router="true"
-            </el-menu-item>
+              class="sidebar-menu"
-
-            <el-menu-item-group v-if="showGroup(['review.view', 'user.view'])" title="用户与资料审核">
-              <el-menu-item v-if="hasPerm('review.view')" index="/review">
-                <el-icon><DocumentChecked /></el-icon>
-                <template #title>资料审核</template>
-              </el-menu-item>
-              <el-menu-item v-if="hasPerm('user.view')" index="/users">
-                <el-icon><User /></el-icon>
-                <template #title>用户管理</template>
-              </el-menu-item>
-            </el-menu-item-group>
-
-            <el-menu-item-group v-if="hasPerm('activity.review_registration')" title="匹配与活动服务">
-              <el-menu-item index="/activities/interests">
-                <el-icon><Calendar /></el-icon>
-                <template #title>活动与互选</template>
-              </el-menu-item>
-            </el-menu-item-group>
-
-            <el-menu-item-group
-              v-if="showGroup(['counseling.service.view', 'referral.manage'])"
-              title="公益咨询与转介"
             >
-              <el-menu-item v-if="hasPerm('counseling.service.view')" index="/counseling">
+              <el-menu-item
-                <el-icon><ChatDotRound /></el-icon>
+                v-for="item in visibleNavigation"
-                <template #title>婚恋咨询</template>
+                :key="item.label"
-              </el-menu-item>
+                :index="item.path"
-              <el-menu-item v-if="hasPerm('referral.manage')" index="/referral">
-                <el-icon><Connection /></el-icon>
-                <template #title>服务转介</template>
-              </el-menu-item>
-            </el-menu-item-group>
-
-            <el-menu-item-group
-              v-if="showGroup(['service_location.view', 'service_appointment.view', 'service_program.manage'])"
-              title="服务站、预约与专项服务"
               >
-              <el-menu-item v-if="hasPerm('service_location.view')" index="/service-station">
+                <el-icon><component :is="item.icon" /></el-icon>
-                <el-icon><Location /></el-icon>
+                <template #title>{{ item.label }}</template>
-                <template #title>善缘服务站</template>
-              </el-menu-item>
-              <el-menu-item v-if="hasPerm('service_appointment.view')" index="/service-appointment">
-                <el-icon><Memo /></el-icon>
-                <template #title>服务预约</template>
-              </el-menu-item>
-              <el-menu-item v-if="hasPerm('service_program.manage')" index="/service-program">
-                <el-icon><Service /></el-icon>
-                <template #title>专项公益服务</template>
-              </el-menu-item>
-            </el-menu-item-group>
-
-            <el-menu-item-group v-if="showGroup(['banner.view', 'content.view'])" title="Banner 与内容运营">
-              <el-menu-item v-if="hasPerm('banner.view')" index="/banner">
-                <el-icon><Promotion /></el-icon>
-                <template #title>首页 Banner</template>
-              </el-menu-item>
-              <el-menu-item v-if="hasPerm('content.view')" index="/content">
-                <el-icon><Reading /></el-icon>
-                <template #title>课堂与反诈内容</template>
-              </el-menu-item>
-            </el-menu-item-group>
-
-            <el-menu-item-group
-              v-if="showGroup(['risk.report.view', 'risk.report.process', 'user.view'])"
-              title="举报、申诉与审计"
-            >
-              <el-menu-item v-if="hasPerm('risk.report.view')" index="/risk/reports">
-                <el-icon><Warning /></el-icon>
-                <template #title>举报中心</template>
-              </el-menu-item>
-              <el-menu-item v-if="hasPerm('risk.report.process')" index="/appeals">
-                <el-icon><CircleCheck /></el-icon>
-                <template #title>申诉管理</template>
-              </el-menu-item>
-              <el-menu-item v-if="hasPerm('user.view')" index="/audit">
-                <el-icon><Document /></el-icon>
-                <template #title>操作日志</template>
-              </el-menu-item>
-            </el-menu-item-group>
-
-            <el-menu-item-group
-              v-if="showGroup(['organization.manage', 'permission.manage'])"
-              title="组织、人员与权限"
-            >
-              <el-menu-item v-if="hasPerm('organization.manage')" index="/organizations">
-                <el-icon><OfficeBuilding /></el-icon>
-                <template #title>组织管理</template>
-              </el-menu-item>
-              <el-menu-item v-if="hasPerm('permission.manage')" index="/operators">
-                <el-icon><Setting /></el-icon>
-                <template #title>工作人员</template>
-              </el-menu-item>
-            </el-menu-item-group>
-
-            <el-menu-item v-if="hasPerm('analytics.view')" index="/analytics">
-              <el-icon><TrendCharts /></el-icon>
-              <template #title>数据统计</template>
               </el-menu-item>
             </el-menu>
           </nav>
         </el-scrollbar>
 
+        <div v-if="!isCollapse" class="sidebar-motto">
+          <el-icon><StarFilled /></el-icon>
+          <span>汇聚善意<br />成就良缘</span>
+        </div>
         <button
           class="collapse-control"
           type="button"
@@ -130,9 +66,11 @@
       </el-aside>
 
       <el-container class="workspace">
-      <el-header class="header">
+        <el-header class="admin-topbar">
           <div class="page-context">
-          <div class="context-kicker">善缘丹阳 · 公益服务</div>
+            <button class="mobile-collapse" type="button" aria-label="切换导航" @click="isCollapse = !isCollapse">
+              <el-icon><Expand v-if="isCollapse" /><Fold v-else /></el-icon>
+            </button>
             <el-breadcrumb separator="/">
               <el-breadcrumb-item :to="{ path: '/dashboard' }">工作台</el-breadcrumb-item>
               <el-breadcrumb-item v-if="currentTitle !== '工作台'">{{ currentTitle }}</el-breadcrumb-item>
@@ -152,33 +90,37 @@
             </el-input>
             <button class="notification-button" type="button" aria-label="查看系统通知" @click="showNotifications">
               <el-icon><Bell /></el-icon>
-            <span class="notification-dot" aria-hidden="true"></span>
+              <span class="notification-badge" aria-hidden="true">{{ notificationCount }}</span>
             </button>
-          <el-dropdown>
+            <el-dropdown trigger="click">
               <span class="user-info">
-              <el-avatar :size="36">{{ (operator?.name || '工')[0] }}</el-avatar>
+                <el-avatar :size="34">{{ (operator?.name || '工')[0] }}</el-avatar>
-              <span class="user-copy">
                 <strong>{{ operator?.name || '工作人员' }}</strong>
-                <small>运营人员</small>
-              </span>
                 <el-icon><ArrowDown /></el-icon>
               </span>
               <template #dropdown>
                 <el-dropdown-menu>
-                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
+                  <el-dropdown-item disabled>{{ currentRoleName }}</el-dropdown-item>
+                  <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
           </div>
         </el-header>
 
-      <el-main class="main-content">
+        <el-main class="admin-content">
           <router-view v-slot="{ Component }">
             <keep-alive><component :is="Component" /></keep-alive>
           </router-view>
         </el-main>
       </el-container>
     </el-container>
+
+    <footer class="scene-footer">
+      <strong>善缘丹阳</strong><span>公益婚恋服务平台</span>
+      <small>真实 · 真诚 · 公益 · 幸福</small>
+    </footer>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -190,52 +132,86 @@ import {
   Bell,
   Calendar,
   ChatDotRound,
-  CircleCheck,
   Connection,
+  DataAnalysis,
   DataBoard,
-  Document,
   DocumentChecked,
   Expand,
   Fold,
   Location,
-  Memo,
+  LocationFilled,
-  OfficeBuilding,
+  Lock,
-  Promotion,
+  Opportunity,
   Reading,
   Search,
-  Service,
   Setting,
-  TrendCharts,
+  StarFilled,
   User,
+  UserFilled,
   Warning,
 } from '@element-plus/icons-vue'
 import { useAuthStore } from '@/stores/auth'
 
+interface NavigationItem {
+  label: string
+  path: string
+  permissions: string[]
+  icon: unknown
+}
+
+const navigation: NavigationItem[] = [
+  { label: '工作台', path: '/dashboard', permissions: [], icon: DataBoard },
+  { label: '用户管理', path: '/users', permissions: ['user.view'], icon: User },
+  { label: '资料审核', path: '/review', permissions: ['review.view'], icon: DocumentChecked },
+  { label: '匹配管理', path: '/activities/interests', permissions: ['activity.review_registration'], icon: StarFilled },
+  { label: '公益红娘', path: '/referral', permissions: ['referral.manage'], icon: Connection },
+  { label: '公益咨询', path: '/counseling', permissions: ['counseling.service.view'], icon: ChatDotRound },
+  { label: '活动管理', path: '/activities/interests', permissions: ['activity.review_registration'], icon: Calendar },
+  { label: '内容管理', path: '/content', permissions: ['content.view'], icon: Reading },
+  { label: '善缘服务站', path: '/service-station', permissions: ['service_location.view'], icon: Location },
+  { label: '举报风控', path: '/risk/reports', permissions: ['risk.report.view'], icon: Warning },
+  { label: '数据统计', path: '/analytics', permissions: ['analytics.view'], icon: DataAnalysis },
+  { label: '组织人员', path: '/organizations', permissions: ['organization.manage'], icon: UserFilled },
+  { label: '系统设置', path: '/operators', permissions: ['permission.manage'], icon: Setting },
+]
+
 const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
 const isCollapse = ref(false)
 const globalSearch = ref('')
+const notificationCount = ref(0)
 
-const activeMenu = computed(() => route.path === '/users/detail' ? '/users' : route.path)
+const activeMenu = computed(() => {
+  if (route.path === '/users/detail') return '/users'
+  return route.path
+})
 const currentTitle = computed(() => (route.meta?.title as string) || '页面')
 const operator = computed(() => authStore.operator)
+const permissions = computed(() => authStore.permissions || [])
+const currentRoleName = computed(() => {
+  if (permissions.value.includes('permission.manage')) return '平台管理员'
+  if (permissions.value.includes('counseling.service.view')) return '公益咨询人员'
+  if (permissions.value.includes('service_appointment.view')) return '服务站运营人员'
+  if (permissions.value.includes('review.view')) return '资料审核人员'
+  return '运营人员'
+})
+const visibleNavigation = computed(() => navigation.filter((item) => item.permissions.every(hasPerm)))
 
 function hasPerm(permission: string) {
-  return (authStore.permissions || []).includes(permission)
+  return permissions.value.includes(permission)
-}
-
-function showGroup(permissions: string[]) {
-  return permissions.some(hasPerm)
 }
 
 function handleSearch() {
   const query = globalSearch.value.trim()
-  if (!query) return
+  if (!query) {
+    ElMessage.info('请输入要查找的页面名称')
+    return
+  }
   const destination = router.getRoutes().find((item) => {
     const title = String(item.meta?.title || '')
-    const permissions = (item.meta?.permissions as string[] | undefined) || []
+    const required = (item.meta?.permissions as string[] | undefined) || []
-    return item.path !== '/login' && title.includes(query) && permissions.every(hasPerm)
+    return item.path !== '/login' && title.includes(query) && required.every(hasPerm)
   })
   if (!destination) {
     ElMessage.info('没有找到可访问的相关页面')
@@ -246,7 +222,7 @@ function handleSearch() {
 }
 
 function showNotifications() {
-  ElMessage.info('当前没有新的系统通知')
+  ElMessage.info(notificationCount.value ? `您有 ${notificationCount.value} 条待处理通知` : '当前没有新的系统通知')
 }
 
 function handleLogout() {
@@ -256,58 +232,165 @@ function handleLogout() {
 </script>
 
 <style scoped>
-.main-layout {
+.admin-scene {
-  width: 100%;
+  min-width: 1100px;
-  height: 100vh;
+  min-height: 100vh;
+  padding: 18px 34px 14px;
+  overflow: hidden;
+  background: #fff7f7 url('/brand/admin-danyang-backdrop.jpg') center / cover fixed no-repeat;
 }
 
-.sidebar {
+.scene-header {
+  display: flex;
+  max-width: 1840px;
+  height: 124px;
+  margin: 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: 32px;
+}
+
+.scene-brand,
+.scene-benefits,
+.scene-benefits span,
+.scene-brand-copy {
+  display: flex;
+  align-items: center;
+}
+
+.scene-brand > img {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+}
+
+.scene-brand-copy {
+  min-width: 172px;
+  margin-left: 10px;
+  align-items: flex-start;
+  flex-direction: column;
+  color: var(--admin-coral);
+}
+
+.scene-brand-copy strong {
+  font-size: 27px;
+  line-height: 1.15;
+  letter-spacing: 2px;
+}
+
+.scene-brand-copy span {
+  margin-top: 5px;
+  font-size: 12px;
+  letter-spacing: 4px;
+}
+
+.scene-title {
+  min-width: 370px;
+  margin-left: 28px;
+  padding-left: 28px;
+  border-left: 1px solid rgba(244, 95, 104, 0.22);
+}
+
+.scene-title h1 {
+  font-size: clamp(26px, 2.2vw, 38px);
+  line-height: 1.1;
+  letter-spacing: 1px;
+}
+
+.scene-title p {
+  margin-top: 9px;
+  color: #66717a;
+}
+
+.scene-benefits {
+  gap: clamp(14px, 2vw, 34px);
+}
+
+.scene-benefits span {
+  display: grid;
+  grid-template-columns: 36px auto;
+  column-gap: 8px;
+  color: var(--admin-coral);
+}
+
+.scene-benefits .el-icon {
+  grid-row: 1 / 3;
+  font-size: 30px;
+}
+
+.scene-benefits b {
+  font-size: 13px;
+}
+
+.scene-benefits small {
+  margin-top: 2px;
+  color: #7b7f86;
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.admin-shell {
+  width: min(1840px, 100%);
+  height: calc(100vh - 174px);
+  min-height: 560px;
+  margin: 0 auto;
+  overflow: hidden;
+  background: var(--admin-shell-bg);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: var(--admin-shell-radius);
+  box-shadow: var(--admin-shadow);
+  backdrop-filter: blur(14px);
+}
+
+.admin-sidebar {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   color: var(--admin-sidebar-text);
-  background: var(--admin-sidebar-bg);
+  background: linear-gradient(180deg, #202d38 0%, #192733 100%);
   border-right: 1px solid rgba(255, 255, 255, 0.06);
   transition: width 0.2s ease;
 }
 
 .brand {
   display: flex;
+  height: 82px;
+  padding: 17px 16px;
   align-items: center;
-  gap: 12px;
+  gap: 11px;
-  height: 92px;
-  padding: 20px 18px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .brand.compact {
   justify-content: center;
-  padding: 18px 10px;
+  padding: 16px 8px;
 }
 
 .brand-mark {
-  width: 44px;
+  width: 42px;
-  height: 44px;
+  height: 42px;
   flex: none;
   object-fit: contain;
 }
 
 .brand-copy {
   display: flex;
+  min-width: 0;
   flex-direction: column;
   white-space: nowrap;
 }
 
 .brand-copy strong {
-  color: #FFFFFF;
+  color: #fff;
-  font-size: 18px;
+  font-size: 17px;
   letter-spacing: 1px;
 }
 
 .brand-copy span {
   margin-top: 4px;
-  color: var(--admin-sidebar-muted);
+  color: #b5c0c8;
-  font-size: 11px;
+  font-size: 10px;
+  letter-spacing: 1.5px;
 }
 
 .menu-scroll {
@@ -315,165 +398,250 @@ function handleLogout() {
 }
 
 .sidebar-menu {
-  padding: 12px 10px;
+  padding: 13px 9px;
   border: 0;
   background: transparent;
 }
 
 .sidebar-menu :deep(.el-menu-item) {
-  height: 42px;
+  height: 41px;
-  margin: 3px 0;
+  margin: 2px 0;
   color: var(--admin-sidebar-text);
   border-radius: 9px;
 }
 
 .sidebar-menu :deep(.el-menu-item:hover) {
-  color: #FFFFFF;
+  color: #fff;
   background: var(--admin-sidebar-surface);
 }
 
 .sidebar-menu :deep(.el-menu-item.is-active) {
-  color: #FFFFFF;
+  color: #fff;
-  font-weight: 600;
+  font-weight: 650;
-  background: var(--admin-primary);
+  background: linear-gradient(135deg, #f45f68, #ee727b);
+  box-shadow: 0 8px 18px rgba(244, 95, 104, 0.26);
 }
 
-.sidebar-menu :deep(.el-menu-item-group__title) {
+.sidebar-menu :deep(.el-icon) {
-  padding: 18px 12px 5px !important;
+  font-size: 17px;
-  overflow: hidden;
+}
-  color: var(--admin-sidebar-muted);
+
-  font-size: 11px;
+.sidebar-motto {
-  letter-spacing: 0.5px;
+  display: flex;
-  text-overflow: ellipsis;
+  margin: 8px 15px 2px;
-  white-space: nowrap;
+  padding: 14px 12px;
+  align-items: center;
+  gap: 11px;
+  color: #ff969c;
+  font-family: KaiTi, STKaiti, serif;
+  font-size: 15px;
+  line-height: 1.45;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.sidebar-motto .el-icon {
+  font-size: 31px;
 }
 
 .collapse-control {
   display: flex;
+  height: 42px;
+  margin: 2px 10px 10px;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: 7px;
-  height: 52px;
-  margin: 10px;
   color: var(--admin-sidebar-muted);
   cursor: pointer;
   background: transparent;
   border: 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .collapse-control:hover {
-  color: #FFFFFF;
+  color: #fff;
 }
 
 .workspace {
   min-width: 0;
 }
 
-.header {
+.admin-topbar {
   display: flex;
+  height: 64px;
+  padding: 0 24px;
   align-items: center;
   justify-content: space-between;
-  height: var(--header-height);
+  background: rgba(255, 255, 255, 0.96);
-  padding: 0 24px;
+  border-bottom: 1px solid #edf0f2;
-  background: var(--admin-header-bg);
-  border-bottom: 1px solid var(--color-border-light);
-}
-
-.page-context {
-  min-width: 180px;
-}
-
-.context-kicker {
-  margin-bottom: 4px;
-  color: var(--admin-primary);
-  font-size: 10px;
-  letter-spacing: 1px;
 }
 
+.page-context,
 .header-tools,
 .user-info {
   display: flex;
   align-items: center;
 }
 
+.page-context {
+  min-width: 180px;
+  gap: 12px;
+}
+
+.mobile-collapse {
+  display: none;
+  color: #56616a;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+}
+
 .header-tools {
-  gap: 16px;
+  gap: 14px;
 }
 
 .global-search {
-  width: 260px;
+  width: clamp(220px, 22vw, 320px);
 }
 
 .global-search :deep(.el-input__wrapper) {
-  background: #F5F6F7;
+  background: #f6f7f8;
-  border-radius: 10px;
+  border-radius: 9px;
-  box-shadow: inset 0 0 0 1px #E8EAED;
+  box-shadow: inset 0 0 0 1px #e8eaed;
 }
 
 .notification-button {
   position: relative;
   display: grid;
-  width: 38px;
+  width: 36px;
-  height: 38px;
+  height: 36px;
-  color: var(--color-text-secondary);
+  color: #4f5b65;
   cursor: pointer;
-  background: #FFFFFF;
+  background: transparent;
-  border: 1px solid var(--color-border-light);
+  border: 0;
-  border-radius: 10px;
+  border-radius: 9px;
   place-items: center;
 }
 
-.notification-dot {
+.notification-button:hover {
+  background: #f6f7f8;
+}
+
+.notification-badge {
   position: absolute;
-  top: 8px;
+  top: 2px;
-  right: 8px;
+  right: 1px;
-  width: 7px;
+  min-width: 15px;
-  height: 7px;
+  height: 15px;
-  background: var(--admin-primary);
+  padding: 0 3px;
-  border: 2px solid #FFFFFF;
+  color: #fff;
-  border-radius: 50%;
+  font-size: 9px;
+  line-height: 15px;
+  text-align: center;
+  background: var(--admin-coral);
+  border-radius: 999px;
 }
 
 .user-info {
-  gap: 9px;
+  gap: 8px;
   cursor: pointer;
 }
 
 .user-info .el-avatar {
-  color: #FFFFFF;
+  color: #fff;
-  background: var(--admin-primary);
+  background: var(--admin-coral);
 }
 
-.user-copy {
+.user-info strong {
-  display: flex;
+  max-width: 92px;
-  flex-direction: column;
+  overflow: hidden;
-}
-
-.user-copy strong {
   font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.user-copy small {
+.admin-content {
-  margin-top: 2px;
-  color: var(--color-text-tertiary);
-  font-size: 11px;
-}
-
-.main-content {
   padding: 0;
   overflow: auto;
   background: var(--admin-page-bg);
 }
 
-@media (max-width: 1000px) {
+.scene-footer {
-  .sidebar {
+  display: flex;
-    width: 72px !important;
+  max-width: 1840px;
+  height: 32px;
+  margin: 0 auto;
+  align-items: flex-end;
+  gap: 10px;
+  color: #8d8587;
+  font-size: 11px;
+}
+
+.scene-footer strong {
+  color: var(--admin-coral);
+  font-size: 14px;
+}
+
+.scene-footer small {
+  margin-left: auto;
+  letter-spacing: 4px;
+}
+
+@media (max-width: 1450px), (max-height: 820px) {
+  .admin-scene {
+    padding: 12px 24px 10px;
+  }
+
+  .scene-header {
+    height: 96px;
+  }
+
+  .scene-brand > img {
+    width: 52px;
+    height: 52px;
+  }
+
+  .scene-brand-copy strong {
+    font-size: 22px;
+  }
+
+  .scene-title {
+    min-width: 310px;
+    margin-left: 18px;
+    padding-left: 18px;
+  }
+
+  .scene-title h1 {
+    font-size: 27px;
+  }
+
+  .scene-benefits span:nth-child(-n + 2) {
+    display: none;
+  }
+
+  .admin-shell {
+    height: calc(100vh - 140px);
+  }
+
+  .scene-footer {
+    height: 28px;
+  }
+}
+
+@media (max-width: 1180px) {
+  .scene-title {
+    display: none;
+  }
+
+  .mobile-collapse {
+    display: inline-grid;
+  }
+
+  .admin-sidebar {
+    width: 76px !important;
   }
 
   .brand-copy,
   .collapse-control span,
-  .sidebar-menu :deep(.el-menu-item-group__title) {
+  .sidebar-motto {
     display: none;
   }
 
@@ -483,14 +651,26 @@ function handleLogout() {
 }
 
 @media (max-width: 760px) {
-  .header {
+  .admin-scene {
-    padding: 0 14px;
+    min-width: 0;
+    padding: 0;
   }
 
-  .page-context,
+  .scene-header,
+  .scene-footer,
   .global-search,
-  .user-copy {
+  .user-info strong {
     display: none;
   }
+
+  .admin-shell {
+    height: 100vh;
+    min-height: 0;
+    border-radius: 0;
+  }
+
+  .admin-topbar {
+    padding: 0 12px;
+  }
 }
 </style>