wordpress-theme-aksrt/assets/admin/src/App.vue

<template>
  <n-config-provider :style-mount-target="styleMountTarget">
    <n-message-provider>
      <n-dialog-provider>
        <n-notification-provider>
          <n-layout v-if="!isMobile" class="aksrt-admin-layout" has-sider>
            <n-layout-sider
              bordered
              collapse-mode="width"
              :collapsed-width="64"
              :width="240"
              show-collapse-trigger
              :collapsed="collapsed"
              :native-scrollbar="false"
              @collapse="collapsed = true"
              @expand="collapsed = false"
            >
              <div class="aksrt-logo">
                <span class="logo-icon">AK</span>
                <span v-if="!collapsed" class="logo-text">AKSRT</span>
              </div>

              <n-menu
                :value="activeMenuKey"
                :collapsed="collapsed"
                :collapsed-width="64"
                :options="menuOptions"
                @update:value="handleMenuClick"
              />
            </n-layout-sider>

            <n-layout :native-scrollbar="false" class="aksrt-admin-content">
              <div class="aksrt-admin-content__inner">
                <router-view v-slot="{ Component }">
                  <transition name="fade-slide" mode="out-in">
                    <div class="aksrt-page-wrapper" :key="route.fullPath">
                      <component :is="Component" />
                    </div>
                  </transition>
                </router-view>

                <div v-if="pageError" class="aksrt-error-fallback">
                  <p class="aksrt-error-title">页面渲染异常</p>
                  <p class="aksrt-error-msg">{{ pageError }}</p>
                  <n-button size="small" @click="pageError = null">重试</n-button>
                </div>
              </div>
            </n-layout>
          </n-layout>

          <div v-else class="aksrt-admin-mobile">
            <MobileTopBar :title="currentPageTitle" @toggle="drawerActive = true" />

            <n-drawer v-model:show="drawerActive" placement="left" :width="280">
              <n-drawer-content :native-scrollbar="false" body-content-style="padding:0;">
                <div class="aksrt-logo aksrt-logo--drawer">
                  <span class="logo-icon">AK</span>
                  <span class="logo-text">AKSRT</span>
                </div>
                <n-menu
                  :value="activeMenuKey"
                  :options="menuOptions"
                  @update:value="handleMenuClick"
                />
              </n-drawer-content>
            </n-drawer>

            <div class="aksrt-admin-mobile__body">
              <router-view v-slot="{ Component }">
                <transition name="fade-slide" mode="out-in">
                  <div class="aksrt-page-wrapper" :key="route.fullPath">
                    <component :is="Component" />
                  </div>
                </transition>
              </router-view>

              <div v-if="pageError" class="aksrt-error-fallback">
                <p class="aksrt-error-title">页面渲染异常</p>
                <p class="aksrt-error-msg">{{ pageError }}</p>
                <n-button size="small" @click="pageError = null">重试</n-button>
              </div>
            </div>
          </div>
        </n-notification-provider>
      </n-dialog-provider>
    </n-message-provider>
  </n-config-provider>
</template>

<script setup>
import { computed, onBeforeUnmount, onErrorCaptured, onMounted, provide, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { NConfigProvider } from 'naive-ui'
import MobileTopBar from './components/MobileTopBar.vue'
import { styleMountTarget } from './style-target'
import { ADMIN_SECTIONS } from './constants/admin-sections'

const router = useRouter()
const route = useRoute()
const collapsed = ref(false)
const pageError = ref(null)
const isMobile = ref(false)
const drawerActive = ref(false)

function checkMobile() {
  isMobile.value = window.innerWidth < 768
}

onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', checkMobile)
})

provide('collapsed', collapsed)

onErrorCaptured((err) => {
  console.error('[AKSRT] 组件渲染错误:', err)
  pageError.value = err?.message || String(err)
  return false
})

/* ------------------------------------------------------------------ */
/*  Build key → path lookup from ADMIN_SECTIONS                        */
/* ------------------------------------------------------------------ */
const keyToPath = {}
for (const section of ADMIN_SECTIONS) {
  if (section.children) {
    for (const child of section.children) {
      keyToPath[child.key] = child.route
    }
  }
  // For placeholder sections (no children), the section key maps to its route
  if (section.placeholder) {
    keyToPath[section.key] = section.route
  }
}

/* ------------------------------------------------------------------ */
/*  Build NaiveUI menu options from ADMIN_SECTIONS                     */
/* ------------------------------------------------------------------ */
const menuOptions = ADMIN_SECTIONS.filter((section) => !section.hidden).map((section) => {
  if (section.placeholder) {
    // Placeholder sections have no children — render as a leaf menu item
    return {
      label: section.label,
      key: section.key,
      icon: section.icon,
    }
  }
  return {
    label: section.label,
    key: section.key,
    icon: section.icon,
    children: section.children.map((child) => ({
      label: child.secondaryEntry ? `${child.label} · 次级` : child.label,
      key: child.key,
    })),
  }
})

/* ------------------------------------------------------------------ */
/*  Active menu key resolution                                         */
/* ------------------------------------------------------------------ */
const activeMenuKey = computed(() => {
  const path = route.path

  // Find the child whose route matches the current path
  for (const section of ADMIN_SECTIONS) {
    if (section.children) {
      for (const child of section.children) {
        if (path === child.route || path.startsWith(child.route + '/')) {
          return child.key
        }
      }
    }
    // Placeholder section (no children)
    if (section.placeholder && (path === section.route || path.startsWith(section.route + '/'))) {
      return section.key
    }
  }

  // Default: first section's first child
  return ADMIN_SECTIONS[0]?.children?.[0]?.key || 'global-common'
})

const currentPageTitle = computed(() => route.meta?.title || 'AKSRT')

function handleMenuClick(key) {
  if (keyToPath[key]) {
    router.push(keyToPath[key])
    if (isMobile.value) {
      drawerActive.value = false
    }
  }
}
</script>

<style scoped>
.aksrt-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  gap: 10px;
  border-bottom: 1px solid var(--n-border-color, #efeff5);
}

.aksrt-logo--drawer {
  justify-content: flex-start;
  padding: 0 18px;
}

.logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #18a058;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.logo-text {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: 1px;
}

.aksrt-admin-content__inner {
  padding: 24px 28px;
}

.aksrt-admin-mobile {
  background: #f5f7fb;
  min-height: 100vh;
}

.aksrt-admin-mobile__body {
  padding: 14px 12px 32px;
}

.aksrt-page-wrapper {
  min-height: calc(100vh - 120px);
}

.aksrt-error-fallback {
  padding: 48px 20px;
  text-align: center;
}

.aksrt-error-title {
  margin: 0 0 10px;
  font-size: 16px;
  color: #d03050;
}

.aksrt-error-msg {
  margin: 0 0 16px;
  font-size: 13px;
  color: #777;
}
</style>