feat(admin-web): improve responsive admin layout

apps/admin-web/src/layouts/AppShell.vue

@@ -1,18 +1,28 @@
 <script setup lang="ts">
 import {
   AppstoreOutlined,
-  BookOutlined,
+  BarChartOutlined,
+  CopyOutlined,
+  DatabaseOutlined,
   DownOutlined,
+  EditOutlined,
+  FileTextOutlined,
   GlobalOutlined,
-  HistoryOutlined,
+  LineChartOutlined,
   LogoutOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
   PictureOutlined,
-  RadarChartOutlined,
-  SearchOutlined,
   SendOutlined,
+  ShopOutlined,
+  SolutionOutlined,
+  TagsOutlined,
+  ThunderboltOutlined,
+  UserOutlined,
+  WalletOutlined,
 } from '@ant-design/icons-vue'
 import { useQuery } from '@tanstack/vue-query'
-import { computed, type Component } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, type Component, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -24,6 +34,12 @@ const router = useRouter()
 const authStore = useAuthStore()
 const { locale, t } = useI18n()
 
+const MOBILE_BREAKPOINT = '(max-width: 991px)'
+const siderCollapsed = ref(false)
+const mobileDrawerOpen = ref(false)
+const isMobile = ref(false)
+let mobileMediaQuery: MediaQueryList | null = null
+
 const isMembershipBlocked = computed(() => authStore.isMembershipBlocked)
 const membershipBlockedMessage = computed(() =>
   authStore.membership?.blocked_reason === 'user_disabled'
@@ -86,6 +102,16 @@ const selectedKeys = computed(() => {
   return effectiveNavKey.value ? [effectiveNavKey.value] : []
 })
 const pageTitle = computed(() => t(String(route.meta.titleKey ?? 'route.workspace.title')))
+const navigationButtonLabel = computed(() => {
+  if (isMobile.value) {
+    return t('shell.openNavigation')
+  }
+
+  return siderCollapsed.value ? t('shell.expandNavigation') : t('shell.collapseNavigation')
+})
+const navigationButtonIcon = computed(() =>
+  isMobile.value || siderCollapsed.value ? MenuUnfoldOutlined : MenuFoldOutlined,
+)
 
 type HeaderBreadcrumb = {
   label: string
@@ -121,21 +147,21 @@ const navSections = computed<NavSection[]>(() => {
       key: 'articleCreation',
       title: t('nav.articleCreation'),
       items: [
-        { key: '/articles/templates', label: t('nav.templates') },
-        { key: '/articles/custom', label: t('nav.custom') },
-        { key: '/articles/free-create', label: t('nav.freeCreate') },
-        { key: '/articles/imitations', label: t('nav.imitation') },
+        { key: '/articles/templates', label: t('nav.templates'), icon: FileTextOutlined },
+        { key: '/articles/custom', label: t('nav.custom'), icon: ThunderboltOutlined },
+        { key: '/articles/free-create', label: t('nav.freeCreate'), icon: EditOutlined },
+        { key: '/articles/imitations', label: t('nav.imitation'), icon: CopyOutlined },
       ],
     },
     {
       key: 'brandManagement',
       title: t('nav.brandManagement'),
-      items: [{ key: '/brands', label: t('nav.brands'), icon: SearchOutlined }],
+      items: [{ key: '/brands', label: t('nav.brands'), icon: TagsOutlined }],
     },
     {
       key: 'tracking',
       title: t('nav.tracking'),
-      items: [{ key: '/tracking', label: t('nav.trackingDetail'), icon: RadarChartOutlined }],
+      items: [{ key: '/tracking', label: t('nav.trackingDetail'), icon: LineChartOutlined }],
     },
     {
       key: 'contentManagement',
@@ -143,19 +169,19 @@ const navSections = computed<NavSection[]>(() => {
       items: [
         { key: '/media', label: t('nav.media'), icon: GlobalOutlined },
         { key: '/publish-management', label: t('nav.publishManagement'), icon: SendOutlined },
-        { key: '/knowledge', label: t('nav.knowledge'), icon: BookOutlined },
+        { key: '/knowledge', label: t('nav.knowledge'), icon: DatabaseOutlined },
         { key: '/images', label: t('nav.images'), icon: PictureOutlined },
       ],
     },
     {
       key: 'kolMarket',
       title: t('nav.kolMarket'),
-      items: [{ key: '/kol/marketplace', label: t('nav.kolMarketplace') }],
+      items: [{ key: '/kol/marketplace', label: t('nav.kolMarketplace'), icon: ShopOutlined }],
     },
     {
       key: 'personalCenter',
       title: t('nav.personalCenter'),
-      items: [{ key: '/account/ai-points', label: t('nav.aiPointUsage'), icon: HistoryOutlined }],
+      items: [{ key: '/account/ai-points', label: t('nav.aiPointUsage'), icon: WalletOutlined }],
     },
   ]
 
@@ -164,9 +190,9 @@ const navSections = computed<NavSection[]>(() => {
       key: 'kolWorkspace',
       title: t('nav.kolWorkspace'),
       items: [
-        { key: '/kol/manage', label: t('nav.kolManage') },
-        { key: '/kol/dashboard', label: t('nav.kolDashboard') },
-        { key: '/kol/profile', label: t('nav.kolProfile') },
+        { key: '/kol/manage', label: t('nav.kolManage'), icon: SolutionOutlined },
+        { key: '/kol/dashboard', label: t('nav.kolDashboard'), icon: BarChartOutlined },
+        { key: '/kol/profile', label: t('nav.kolProfile'), icon: UserOutlined },
       ],
     })
   }
@@ -212,23 +238,76 @@ const headerBreadcrumbs = computed<HeaderBreadcrumb[]>(() => {
 })
 
 function go(path: string): void {
+  mobileDrawerOpen.value = false
   void router.push(path)
 }
 
+function toggleNavigation(): void {
+  if (isMobile.value) {
+    mobileDrawerOpen.value = true
+    return
+  }
+
+  siderCollapsed.value = !siderCollapsed.value
+}
+
+function syncMobileState(event?: MediaQueryListEvent | MediaQueryList): void {
+  const matches = Boolean(event?.matches ?? mobileMediaQuery?.matches)
+  isMobile.value = matches
+
+  if (!matches) {
+    mobileDrawerOpen.value = false
+  }
+}
+
 async function handleLogout(): Promise<void> {
   await authStore.logout()
   await router.replace('/login')
 }
+
+watch(
+  () => route.fullPath,
+  () => {
+    mobileDrawerOpen.value = false
+  },
+)
+
+onMounted(() => {
+  mobileMediaQuery = window.matchMedia(MOBILE_BREAKPOINT)
+  syncMobileState(mobileMediaQuery)
+  mobileMediaQuery.addEventListener('change', syncMobileState)
+})
+
+onBeforeUnmount(() => {
+  mobileMediaQuery?.removeEventListener('change', syncMobileState)
+  mobileMediaQuery = null
+})
 </script>
 
 <template>
   <a-layout class="admin-layout">
-    <a-layout-sider width="250" theme="light" class="admin-sider">
+    <a-layout-sider
+      v-model:collapsed="siderCollapsed"
+      width="250"
+      :collapsed-width="80"
+      :trigger="null"
+      collapsible
+      theme="light"
+      class="admin-sider"
+      :class="{ 'admin-sider--collapsed': siderCollapsed }"
+    >
       <div class="admin-brand">
-        {{ t('app.name') }}
+        <span class="admin-brand__full">{{ t('app.name') }}</span>
+        <span class="admin-brand__short">省</span>
       </div>
 
-      <a-menu mode="inline" theme="light" :selected-keys="selectedKeys" class="admin-menu">
+      <a-menu
+        mode="inline"
+        theme="light"
+        :selected-keys="selectedKeys"
+        :inline-collapsed="siderCollapsed"
+        class="admin-menu"
+      >
         <template v-for="section in navSections" :key="section.key">
           <template v-if="section.title">
             <a-menu-item-group :title="section.title">
@@ -251,12 +330,27 @@ async function handleLogout(): Promise<void> {
 
     <a-layout
       class="admin-main-layout"
-      :class="{ 'admin-main-layout--blocked': isMembershipBlocked }"
+      :class="{
+        'admin-main-layout--collapsed': siderCollapsed,
+        'admin-main-layout--blocked': isMembershipBlocked,
+      }"
     >
       <a-layout-header
         class="admin-header"
         :class="{ 'admin-header--blocked': isMembershipBlocked }"
       >
+        <a-button
+          type="text"
+          class="admin-shell-trigger"
+          :aria-label="navigationButtonLabel"
+          :title="navigationButtonLabel"
+          @click="toggleNavigation"
+        >
+          <component :is="navigationButtonIcon" />
+        </a-button>
+
+        <div v-if="!isMembershipBlocked" class="admin-mobile-title">{{ pageTitle }}</div>
+
         <nav v-if="!isMembershipBlocked" class="admin-header-breadcrumb" aria-label="Breadcrumb">
           <span
             v-for="(crumb, index) in headerBreadcrumbs"
@@ -353,6 +447,39 @@ async function handleLogout(): Promise<void> {
         <router-view v-else />
       </a-layout-content>
     </a-layout>
+
+    <a-drawer
+      v-model:open="mobileDrawerOpen"
+      placement="left"
+      width="min(86vw, 320px)"
+      class="admin-mobile-drawer"
+      :closable="false"
+      :body-style="{ padding: 0 }"
+    >
+      <div class="admin-brand admin-brand--drawer">
+        {{ t('app.name') }}
+      </div>
+
+      <a-menu mode="inline" theme="light" :selected-keys="selectedKeys" class="admin-menu">
+        <template v-for="section in navSections" :key="section.key">
+          <template v-if="section.title">
+            <a-menu-item-group :title="section.title">
+              <a-menu-item v-for="item in section.items" :key="item.key" @click="go(item.key)">
+                <template v-if="item.icon" #icon><component :is="item.icon" /></template>
+                {{ item.label }}
+              </a-menu-item>
+            </a-menu-item-group>
+          </template>
+
+          <template v-else>
+            <a-menu-item v-for="item in section.items" :key="item.key" @click="go(item.key)">
+              <template v-if="item.icon" #icon><component :is="item.icon" /></template>
+              {{ item.label }}
+            </a-menu-item>
+          </template>
+        </template>
+      </a-menu>
+    </a-drawer>
   </a-layout>
 </template>
 
@@ -371,11 +498,22 @@ async function handleLogout(): Promise<void> {
   background: #fff;
   border-right: 1px solid #f0f0f0;
   z-index: 10;
+  transition:
+    width 0.2s ease,
+    flex-basis 0.2s ease,
+    max-width 0.2s ease,
+    min-width 0.2s ease;
 }
 
 .admin-main-layout {
   margin-left: 250px;
   isolation: isolate;
+  min-width: 0;
+  transition: margin-left 0.2s ease;
+}
+
+.admin-main-layout--collapsed {
+  margin-left: 80px;
 }
 
 .admin-main-layout--blocked {
@@ -395,6 +533,28 @@ async function handleLogout(): Promise<void> {
   font-weight: 800;
   font-size: 16px;
   letter-spacing: 0.05em;
+  white-space: nowrap;
+  transition:
+    margin 0.2s ease,
+    width 0.2s ease;
+}
+
+.admin-brand__short {
+  display: none;
+  letter-spacing: 0;
+}
+
+.admin-sider--collapsed .admin-brand {
+  width: 40px;
+  margin-inline: auto;
+}
+
+.admin-sider--collapsed .admin-brand__full {
+  display: none;
+}
+
+.admin-sider--collapsed .admin-brand__short {
+  display: inline;
 }
 
 .admin-menu {
@@ -402,14 +562,23 @@ async function handleLogout(): Promise<void> {
   padding-bottom: 32px;
 }
 
+.admin-sider--collapsed :deep(.ant-menu-item-group-title) {
+  height: 12px;
+  padding: 0;
+  overflow: hidden;
+  color: transparent;
+}
+
 .admin-header {
   position: sticky;
   top: 0;
   background: #fff;
-  padding: 0 24px;
+  height: 64px;
+  padding: 0 24px 0 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   z-index: 100;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 }
@@ -418,6 +587,34 @@ async function handleLogout(): Promise<void> {
   justify-content: flex-end;
 }
 
+.admin-shell-trigger.ant-btn {
+  flex: 0 0 auto;
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #595959;
+  border-radius: 8px;
+}
+
+.admin-shell-trigger.ant-btn:hover {
+  color: #1677ff;
+  background: #f0f8ff;
+}
+
+.admin-mobile-title {
+  display: none;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  color: #141414;
+  font-size: 16px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .admin-header-breadcrumb {
   min-width: 0;
   flex: 1;
@@ -579,6 +776,7 @@ async function handleLogout(): Promise<void> {
   z-index: 0;
   margin: 24px;
   min-height: auto;
+  min-width: 0;
 }
 
 .admin-content--blocked {
@@ -621,4 +819,68 @@ async function handleLogout(): Promise<void> {
   line-height: 1.6;
   text-align: center;
 }
+
+@media (max-width: 991px) {
+  .admin-sider {
+    display: none;
+  }
+
+  .admin-main-layout,
+  .admin-main-layout--collapsed {
+    margin-left: 0;
+  }
+
+  .admin-header {
+    padding: 0 12px;
+  }
+
+  .admin-header-breadcrumb {
+    display: none;
+  }
+
+  .admin-mobile-title {
+    display: block;
+  }
+
+  .admin-header-actions {
+    gap: 8px;
+    margin-left: 0;
+  }
+
+  .quota-pill {
+    display: none;
+  }
+
+  .admin-content {
+    margin: 16px;
+  }
+
+  .admin-content--blocked {
+    margin: 0;
+  }
+}
+
+@media (max-width: 576px) {
+  .admin-header {
+    height: 56px;
+  }
+
+  .admin-shell-trigger.ant-btn {
+    width: 36px;
+    height: 36px;
+  }
+
+  .admin-content {
+    margin: 12px;
+  }
+
+  .user-name,
+  .user-dropdown-icon {
+    display: none;
+  }
+
+  .user-dropdown-trigger {
+    padding: 4px;
+  }
+}
 </style>