CloudSearch/source_clean/frontend-src/src/pages/admin/AdminLayout.vue

<template>
  <div class="admin-layout">
    <aside class="admin-sidebar">
      <div class="sidebar-brand">
        <div class="sidebar-logo">
          <img v-if="siteLogo" :src="siteLogo" :alt="siteName || 'CloudSearch'" class="sidebar-logo-img" @error="(e: any) => { (e.target as HTMLElement).style.display='none'; siteLogo='' }" />
          <span v-else class="sidebar-logo-fallback">☁️</span>
        </div>
        <div class="sidebar-brand-text">
          <h2>{{ siteName || 'CloudSearch' }}</h2>
          <p>管理控制台</p>
        </div>
      </div>

      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        @select="handleMenuSelect"
      >
        <el-menu-item index="dashboard">
          <el-icon><DataBoard /></el-icon>
          <span>仪表盘</span>
        </el-menu-item>

        <el-sub-menu index="cloud-configs">
          <template #title>
            <el-icon><Connection /></el-icon>
            <span>网盘管理</span>
          </template>
          <el-menu-item index="cloud-configs-toggle">📋 设置及授权</el-menu-item>
          <el-menu-item index="cloud-configs-cleanup">🧹 存储清理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="system">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统设置</span>
          </template>
          <el-menu-item index="sys-site">🌐 网站设置</el-menu-item>
          <el-menu-item index="sys-services">🔗 外部服务 & 缓存</el-menu-item>
          <el-menu-item index="sys-strategy">⚡ 性能配置</el-menu-item>
          <el-menu-item index="sys-password">🔑 修改密码</el-menu-item>
          <el-menu-item index="sys-notify">📬 消息推送</el-menu-item>
          <el-menu-item index="sys-daily-report">📊 每日汇报</el-menu-item>
          <el-menu-item index="sys-platforms">👥 推广平台管理</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="save-records">
          <el-icon><DocumentCopy /></el-icon>
          <span>转存日志</span>
        </el-menu-item>

        <div class="sidebar-spacer"></div>

        <div class="sidebar-version">v{{ appVersion }}</div>

        <el-menu-item index="logout">
          <el-icon><SwitchButton /></el-icon>
          <span>退出登录</span>
        </el-menu-item>
      </el-menu>
    </aside>

    <div class="admin-content">
      <header class="content-header">
        <div class="content-breadcrumb">
          <span class="breadcrumb-current">{{ pageTitle }}</span>
        </div>
        <div class="content-actions">
          <el-button text size="small" @click="goBackHome">
            <el-icon><ArrowLeft /></el-icon>
            返回前台
          </el-button>
        </div>
      </header>
      <main class="content-body">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { DataBoard, Connection, Setting, SwitchButton, DocumentCopy, ArrowLeft } from '@element-plus/icons-vue'
import { getSiteConfig } from '../../api'

const router = useRouter()
const route = useRoute()

const siteName = ref('')
const siteLogo = ref('')
const appVersion = ref('')

const pageTitles: Record<string, string> = {
  dashboard: '仪表盘',
  'cloud-configs-toggle': '网盘设置及授权',
  'cloud-configs-cleanup': '存储清理',
  'sys-site': '网站设置',
  'sys-services': '外部服务 & 缓存',
  'sys-strategy': '性能配置',
  'sys-password': '修改管理员密码',
  'sys-notify': '消息推送',
  'sys-daily-report': '每日汇报',
  'sys-platforms': '推广平台管理',
  'save-records': '转存日志',
}

const activeMenu = computed(() => {
  const name = route.name as string
  if (name === 'admin-cloud-configs') return 'cloud-configs-toggle'
  if (name === 'admin-cleanup') return 'cloud-configs-cleanup'
  if (name === 'admin-system') {
    const sec = route.query.section as string
    return sec || 'sys-site'
  }
  if (name === 'admin-save-records') return 'save-records'
  return 'dashboard'
})

const pageTitle = computed(() => {
  return pageTitles[activeMenu.value] || '仪表盘'
})

function handleMenuSelect(index: string) {
  if (index === 'dashboard') {
    router.push('/admin/dashboard')
  } else if (index === 'cloud-configs-toggle') {
    router.push('/admin/cloud-configs')
  } else if (index === 'cloud-configs-cleanup') {
    router.push('/admin/cleanup')
  } else if (index.startsWith('sys-')) {
    router.push({ path: '/admin/system', query: { section: index } })
  } else if (index === 'save-records') {
    router.push('/admin/save-records')
  } else if (index === 'logout') {
    localStorage.removeItem('admin_token')
    router.push('/admin/login')
  }
}

function goBackHome() {
  router.push('/')
}

onMounted(async () => {
  try {
    const cfg = await getSiteConfig()
    siteName.value = cfg.site_name || ''
    siteLogo.value = cfg.site_logo || ''
  } catch {}
  try {
    const h = await fetch('/health')
    const hv = await h.json()
    appVersion.value = hv.version
  } catch {}
})
</script>

<style scoped>
.admin-layout {
  display: flex;
  height: 100vh;
  background: var(--bg-page);
}

/* ── Sidebar ── */
.admin-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #111827 0%, #1e293b 100%);
  position: relative;
  z-index: 10;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-logo {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-logo-img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; }
.sidebar-logo-fallback { font-size: 28px; }
.sidebar-brand-text h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: #fff;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-brand-text p {
  font-size: 11px;
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 1px;
}

/* ── Menu ── */
.sidebar-menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: transparent !important;
  border-right: none !important;
  padding: 4px 0;
}
.sidebar-menu :deep(.el-menu-item),
.sidebar-menu :deep(.el-sub-menu__title) {
  color: rgba(255, 255, 255, 0.65);
  height: 44px;
  line-height: 44px;
  transition: all 0.2s ease;
  margin: 0 6px;
  border-radius: var(--radius-sm);
}
.sidebar-menu :deep(.el-menu-item):hover,
.sidebar-menu :deep(.el-sub-menu__title):hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}
.sidebar-menu :deep(.el-menu-item.is-active) {
  color: #fff;
  background: linear-gradient(90deg, rgba(64, 158, 255, 0.25) 0%, rgba(99, 102, 241, 0.15) 100%);
  font-weight: 500;
}
.sidebar-menu :deep(.el-menu-item)::after {
  display: none;
}
.sidebar-menu :deep(.el-sub-menu .el-menu) {
  background: rgba(0, 0, 0, 0.2) !important;
}
.sidebar-menu :deep(.el-sub-menu .el-menu .el-menu-item) {
  padding-left: 52px !important;
  font-size: 13px;
  height: 38px;
  line-height: 38px;
}
.sidebar-menu :deep(.el-icon) {
  font-size: 16px;
}

.sidebar-spacer {
  flex: 1;
}
.sidebar-version {
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  padding: 8px 0;
  letter-spacing: 0.5px;
}

/* ── Content Area ── */
.admin-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.content-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb-current {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.content-actions :deep(.el-button) {
  color: var(--text-secondary);
  gap: 4px;
}

.content-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

/* ── Global page save bar ── */
.content-body :deep(.save-bar) {
  position: sticky;
  bottom: 0;
  z-index: 100;
  background: var(--bg-card);
  padding: 12px 16px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
</style>