verify/frontend/src/components/admin-sidebar/index.vue

<script lang="ts" setup>
import { Boxes, Code, CreditCard, DollarSign, FileLock, Gauge, GitBranch, HardDrive, Hash, Key, Mail, Megaphone, MessageSquare, Network, Plug, ScrollText, Settings, Shield, Smartphone, Users, Variable } from 'lucide-vue-next'
import { onMounted, onUnmounted, reactive } from 'vue'

import NavTeam from '@/components/app-sidebar/nav-team.vue'
import TeamSwitcher from '@/components/app-sidebar/team-switcher.vue'
import NavFooter from '@/components/admin-sidebar/nav-footer.vue'

const user = reactive({
  name: '管理员',
  email: 'admin@example.com',
  avatar: '/avatars/admin.jpg',
  role: 'admin',
})

const siteSettings = reactive({
  name: '管理后台',
  logo: '',
})

const teams = reactive([
  {
    name: '管理后台',
    logo: Code,
    plan: 'Admin',
  },
])

function loadSystemSettings() {
  const storedSettings = localStorage.getItem('systemSettings')
  if (storedSettings) {
    try {
      const parsed = JSON.parse(storedSettings)
      if (parsed.site_name) {
        siteSettings.name = parsed.site_name
        teams[0].name = parsed.site_name
      }
      if (parsed.site_logo) {
        siteSettings.logo = parsed.site_logo
      }
    }
    catch (e) {
      console.error('Failed to parse systemSettings from localStorage', e)
    }
  }
}

function handleSettingsChange(event: CustomEvent) {
  const settings = event.detail
  if (settings.site_name) {
    siteSettings.name = settings.site_name
    teams[0].name = settings.site_name
  }
  if (settings.site_logo) {
    siteSettings.logo = settings.site_logo
  }
}

onMounted(() => {
  const storedUser = localStorage.getItem('user')
  if (storedUser) {
    try {
      const parsedUser = JSON.parse(storedUser)
      user.name = parsedUser.username || user.name
      user.email = parsedUser.email || user.email
      user.avatar = parsedUser.avatar || user.avatar
      user.role = parsedUser.role || user.role
    }
    catch (e) {
      console.error('Failed to parse user from localStorage', e)
    }
  }

  loadSystemSettings()
  window.addEventListener('system-settings-changed', handleSettingsChange as EventListener)
})

onUnmounted(() => {
  window.removeEventListener('system-settings-changed', handleSettingsChange as EventListener)
})

const navMain = [
  {
    title: '主要功能',
    items: [
      {
        title: '控制台',
        url: '/admin',
        icon: Gauge,
      },
      {
        title: '应用管理',
        url: '/admin/applications',
        icon: Boxes,
      },
      {
        title: '卡类管理',
        url: '/admin/card-types',
        icon: Hash,
      },
      {
        title: '卡密管理',
        url: '/admin/cards',
        icon: Key,
      },
      {
        title: '公告管理',
        url: '/admin/announcements',
        icon: Megaphone,
      },
      {
        title: '版本管理',
        url: '/admin/versions',
        icon: GitBranch,
      },
      {
        title: '用户管理',
        url: '/admin/users',
        icon: Users,
      },
      {
        title: '代理管理',
        url: '/admin/agents',
        icon: Network,
      },
    ],
  },
  {
    title: '业务管理',
    items: [
      {
        title: '财务管理',
        url: '/admin/finance',
        icon: DollarSign,
      },
      {
        title: '日志记录',
        url: '/admin/logs',
        icon: ScrollText,
      },
      {
        title: '工单系统',
        url: '/admin/tickets',
        icon: MessageSquare,
      },
    ],
  },
  {
    title: '高级功能',
    items: [
      {
        title: '云端常量',
        url: '/admin/cloud-constants',
        icon: FileLock,
      },
      {
        title: '云端变量',
        url: '/admin/cloud-variables',
        icon: Variable,
      },
      {
        title: '云端函数',
        url: '/admin/cloud-function',
        icon: Code,
      },
      {
        title: '风控管理',
        url: '/admin/risk-control',
        icon: Shield,
      },
      {
        title: '扩展配置',
        url: '/admin/extension',
        icon: Plug,
      },
    ],
  },
  {
    title: '系统管理',
    items: [
      {
        title: '系统设置',
        url: '/admin/system-settings',
        icon: Settings,
      },
      {
        title: '支付渠道',
        url: '/admin/payment-channels',
        icon: CreditCard,
      },
      {
        title: '邮箱配置',
        url: '/admin/email-settings',
        icon: Mail,
      },
      {
        title: '短信配置',
        url: '/admin/sms-settings',
        icon: Smartphone,
      },
      {
        title: '存储管理',
        url: '/admin/storage-configs',
        icon: HardDrive,
      },
    ],
  },
]
</script>

<template>
  <UiSidebar collapsible="icon" class="z-50">
    <UiSidebarHeader>
      <TeamSwitcher :teams="teams" />
    </UiSidebarHeader>

    <UiSidebarContent>
      <NavTeam :nav-main="navMain" />
    </UiSidebarContent>

    <UiSidebarFooter>
      <NavFooter :user="user" />
    </UiSidebarFooter>

    <UiSidebarRail />
  </UiSidebar>
</template>