feat(admin): redesign navigation with grouped secondary sidebar

Replace flat tabs with categorized navigation groups (Content, Config, etc.). Update layout styles to support a responsive secondary sidebar.
2026-05-03 11:27:43 +08:00
parent 05f531ddf2
commit 8bc311916d
4 changed files with 208 additions and 37 deletions
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -4459,11 +4459,102 @@ button:disabled,

 .admin-layout {
  display: grid;
-  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
+  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
 }

+.admin-layout--loading {
+  grid-template-columns: 1fr;
+}
+
+.admin-secondary-nav {
+  position: sticky;
+  top: 18px;
+  display: grid;
+  align-content: start;
+  gap: 14px;
+  min-width: 0;
+  padding: 12px;
+  border: 2px solid var(--line-strong);
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  box-shadow: var(--shadow-soft);
+}
+
+.admin-secondary-nav__group {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.admin-secondary-nav__group + .admin-secondary-nav__group {
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+}
+
+.admin-secondary-nav__title {
+  padding: 0 4px;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.admin-secondary-nav__items {
+  display: grid;
+  gap: 6px;
+}
+
+.admin-secondary-nav__item {
+  width: 100%;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  padding: 9px 10px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-control);
+  background: transparent;
+  color: var(--ink-soft);
+  font-weight: 850;
+  line-height: 1.2;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background 0.14s ease,
+    border-color 0.14s ease,
+    color 0.14s ease,
+    box-shadow 0.14s ease;
+}
+
+.admin-secondary-nav__item:hover {
+  border-color: rgba(42, 117, 187, 0.24);
+  background: rgba(255, 203, 5, 0.2);
+  color: var(--pokemon-blue-deep);
+}
+
+.admin-secondary-nav__item.active {
+  border-color: var(--line-strong);
+  background: var(--pokemon-blue);
+  color: #ffffff;
+  box-shadow: 0 2px 0 var(--line-strong);
+}
+
+.admin-secondary-nav__item span {
+  min-width: 0;
+}
+
+.admin-secondary-nav__icon {
+  width: 19px;
+  height: 19px;
+  flex: 0 0 auto;
+}
+
+.admin-content {
+  min-width: 0;
+}
+
 .form-actions,
 .row-actions,
 .check-row,
@@ -4802,6 +4893,26 @@ button:disabled,
    white-space: nowrap;
  }

+  .admin-secondary-nav {
+    position: static;
+    display: flex;
+    gap: 12px;
+    overflow-x: auto;
+    padding: 10px;
+  }
+
+  .admin-secondary-nav__group {
+    flex: 0 0 auto;
+    min-width: min(260px, 76vw);
+  }
+
+  .admin-secondary-nav__group + .admin-secondary-nav__group {
+    padding-top: 0;
+    padding-left: 12px;
+    border-top: 0;
+    border-left: 1px solid var(--line);
+  }
+
  .coming-soon-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -61,6 +61,9 @@ type AdminTab =
  | 'items'
  | 'recipes'
  | 'habitats';
+type AdminGroup = 'content' | 'configuration' | 'localization' | 'access';
+type AdminNavItem = { key: AdminTab; label: string; permission: string | string[] };
+type AdminNavGroup = { key: AdminGroup; label: string; items: AdminNavItem[] };
 type EditableConfig = (NamedEntity | Skill) & { hasItemDrop?: boolean };

 const adminTabIcons: Record<AdminTab, AppIcon> = {
@@ -79,21 +82,48 @@ const adminTabIcons: Record<AdminTab, AppIcon> = {

 const { locale, t } = useI18n();

-const tabs = computed<Array<{ key: AdminTab; label: string; permission: string | string[] }>>(() =>
-  [
-    { key: 'users' as const, label: t('pages.admin.users'), permission: 'admin.users.read' },
-    { key: 'roles' as const, label: t('pages.admin.roles'), permission: 'admin.roles.read' },
-    { key: 'permissions' as const, label: t('pages.admin.permissions'), permission: 'admin.permissions.read' },
-    { key: 'config' as const, label: t('pages.admin.config'), permission: 'admin.config.read' },
-    { key: 'languages' as const, label: t('pages.admin.languages'), permission: 'admin.languages.read' },
-    { key: 'wordings' as const, label: t('pages.admin.wordings'), permission: 'admin.wordings.read' },
-    { key: 'checklist' as const, label: t('pages.admin.checklist'), permission: ['checklist.create', 'checklist.update', 'checklist.delete', 'checklist.order'] },
-    { key: 'pokemon' as const, label: 'Pokemon', permission: ['pokemon.order', 'pokemon.delete'] },
-    { key: 'items' as const, label: t('pages.items.title'), permission: ['items.order', 'items.delete'] },
-    { key: 'recipes' as const, label: t('pages.recipes.title'), permission: ['recipes.order', 'recipes.delete'] },
-    { key: 'habitats' as const, label: t('pages.habitats.title'), permission: ['habitats.order', 'habitats.delete'] }
-  ].filter((tab) => canAny(tab.permission))
-);
+const adminNavigationGroups = computed<AdminNavGroup[]>(() => {
+  const groups: AdminNavGroup[] = [
+    {
+      key: 'configuration',
+      label: t('pages.admin.configurationGroup'),
+      items: [{ key: 'config', label: t('pages.admin.config'), permission: 'admin.config.read' }]
+    },
+    {
+      key: 'content',
+      label: t('pages.admin.contentGroup'),
+      items: [
+        { key: 'checklist', label: t('pages.admin.checklist'), permission: ['checklist.create', 'checklist.update', 'checklist.delete', 'checklist.order'] },
+        { key: 'pokemon', label: t('pages.admin.pokemonList'), permission: ['pokemon.order', 'pokemon.delete'] },
+        { key: 'items', label: t('pages.admin.itemList'), permission: ['items.order', 'items.delete'] },
+        { key: 'recipes', label: t('pages.admin.recipeList'), permission: ['recipes.order', 'recipes.delete'] },
+        { key: 'habitats', label: t('pages.admin.habitatList'), permission: ['habitats.order', 'habitats.delete'] }
+      ]
+    },
+    {
+      key: 'localization',
+      label: t('pages.admin.localizationGroup'),
+      items: [
+        { key: 'languages', label: t('pages.admin.languages'), permission: 'admin.languages.read' },
+        { key: 'wordings', label: t('pages.admin.wordings'), permission: 'admin.wordings.read' }
+      ]
+    },
+    {
+      key: 'access',
+      label: t('pages.admin.accessGroup'),
+      items: [
+        { key: 'users', label: t('pages.admin.users'), permission: 'admin.users.read' },
+        { key: 'roles', label: t('pages.admin.roles'), permission: 'admin.roles.read' },
+        { key: 'permissions', label: t('pages.admin.permissions'), permission: 'admin.permissions.read' }
+      ]
+    }
+  ];
+
+  return groups
+    .map((group) => ({ ...group, items: group.items.filter((tab) => canAny(tab.permission)) }))
+    .filter((group) => group.items.length);
+});
+const tabs = computed<AdminNavItem[]>(() => adminNavigationGroups.value.flatMap((group) => group.items));

 const configTypes = computed<Array<{ key: ConfigType; label: string; supportsItemDrop?: boolean }>>(() => [
  { key: 'pokemon-types', label: t('config.pokemonTypes') },
@@ -971,29 +1001,44 @@ onMounted(() => {
 <template>
  <section class="page-stack">
    <PageHeader :title="t('pages.admin.title')" :subtitle="t('pages.admin.subtitle')">
-      <template #kicker>Admin</template>
+      <template #kicker>{{ t('nav.admin') }}</template>
    </PageHeader>

-    <div v-if="canEdit" class="tabs" role="tablist" :aria-label="t('pages.admin.modules')">
-      <button v-for="tab in tabs" :key="tab.key" :class="{ active: activeTab === tab.key }" type="button" @click="setTab(tab.key)">
-        <Icon :icon="adminTabIcons[tab.key]" class="ui-icon" aria-hidden="true" />
-        {{ tab.label }}
-      </button>
-    </div>
-
    <StatusMessage v-if="message" variant="warning">{{ message }}</StatusMessage>

-    <section v-if="showAdminSkeleton" class="detail-section skeleton-detail-section" aria-busy="true" :aria-label="t('pages.admin.loading')">
-      <h2><Skeleton width="120px" height="24px" /></h2>
-      <ul class="row-list skeleton-row-list">
-        <li v-for="index in 6" :key="index">
-          <Skeleton :width="index % 2 === 0 ? '180px' : '132px'" />
-          <span class="row-actions">
-            <Skeleton variant="box" width="50px" height="34px" />
-          </span>
-        </li>
-      </ul>
-    </section>
+    <div v-if="canEdit || showAdminSkeleton" class="admin-layout" :class="{ 'admin-layout--loading': !canEdit }">
+      <nav v-if="canEdit" class="admin-secondary-nav" :aria-label="t('pages.admin.modules')">
+        <div v-for="group in adminNavigationGroups" :key="group.key" class="admin-secondary-nav__group">
+          <span class="admin-secondary-nav__title">{{ group.label }}</span>
+          <div class="admin-secondary-nav__items">
+            <button
+              v-for="tab in group.items"
+              :key="tab.key"
+              class="admin-secondary-nav__item"
+              :class="{ active: activeTab === tab.key }"
+              type="button"
+              :aria-current="activeTab === tab.key ? 'page' : undefined"
+              @click="setTab(tab.key)"
+            >
+              <Icon :icon="adminTabIcons[tab.key]" class="ui-icon admin-secondary-nav__icon" aria-hidden="true" />
+              <span>{{ tab.label }}</span>
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      <div class="admin-content">
+        <section v-if="showAdminSkeleton" class="detail-section skeleton-detail-section" aria-busy="true" :aria-label="t('pages.admin.loading')">
+          <h2><Skeleton width="120px" height="24px" /></h2>
+          <ul class="row-list skeleton-row-list">
+            <li v-for="index in 6" :key="index">
+              <Skeleton :width="index % 2 === 0 ? '180px' : '132px'" />
+              <span class="row-actions">
+                <Skeleton variant="box" width="50px" height="34px" />
+              </span>
+            </li>
+          </ul>
+        </section>

    <section v-else-if="canEdit && activeTab === 'users'" class="detail-section">
      <div class="detail-section__header">
@@ -1401,6 +1446,8 @@ onMounted(() => {
      </ReorderableList>
      <p v-else class="meta-line">{{ t('common.noRecords') }}</p>
    </section>
+      </div>
+    </div>

    <Modal v-if="userRoleModalOpen" :title="userRoleModalTitle" :close-label="t('common.close')" size="wide" @close="closeUserRoleModal">
      <form id="admin-user-roles-form" class="modal-edit-form" @submit.prevent="saveUserRoles">