import React, { useEffect, useMemo, useRef, useState } from 'react'
import { Layout, Menu, theme, Avatar, Dropdown, Space, Modal, Form, Input, message, Breadcrumb, ConfigProvider, Tabs } from 'antd'
import { useNavigate, useLocation, useOutlet } from 'react-router-dom'
import { HomeOutlined, LogoutOutlined, TeamOutlined, SettingOutlined, AppstoreOutlined, KeyOutlined, UserOutlined, DashboardOutlined, FileOutlined, LockOutlined, MenuOutlined, PieChartOutlined, BarChartOutlined, TableOutlined, CalendarOutlined, FormOutlined, SearchOutlined, ToolOutlined, ShoppingCartOutlined, ShopOutlined, FolderOpenOutlined, FolderOutlined, CloudOutlined, DatabaseOutlined, ApiOutlined, CodeOutlined, BugOutlined, BellOutlined, PlusOutlined, EditOutlined, DeleteOutlined, UploadOutlined, DownloadOutlined, EyeOutlined, EyeInvisibleOutlined, StarOutlined, HeartOutlined, LikeOutlined, DislikeOutlined, SmileOutlined, FrownOutlined, PhoneOutlined, MailOutlined, EnvironmentOutlined, GlobalOutlined, AimOutlined, CompassOutlined, CameraOutlined, VideoCameraOutlined, SoundOutlined, WifiOutlined, RocketOutlined, ThunderboltOutlined, ExperimentOutlined, BulbOutlined, GiftOutlined, BankOutlined, WalletOutlined, MoneyCollectOutlined, BookOutlined, ReadOutlined, ProfileOutlined, CloudUploadOutlined, CloudDownloadOutlined, InboxOutlined, FolderAddOutlined, SlidersOutlined, FilterOutlined, AlertOutlined, ClockCircleOutlined, FieldTimeOutlined, HistoryOutlined, ContactsOutlined, SolutionOutlined, IdcardOutlined, QrcodeOutlined, ScanOutlined, SafetyOutlined, SecurityScanOutlined, UnlockOutlined, HddOutlined, CopyOutlined, ScissorOutlined, SnippetsOutlined, FileProtectOutlined, DesktopOutlined, LaptopOutlined, MobileOutlined, TabletOutlined, ClusterOutlined, AppstoreAddOutlined, PlusSquareOutlined, SyncOutlined, ReloadOutlined } from '@ant-design/icons'
import { clearToken, getUser as getUserLocal, setUser as setUserLocal } from '../utils/token'
import api from '../utils/axios'
import './layout.css'
import { PermissionProvider } from '../utils/permission'
import { APP_CONFIG } from '../utils/config'
const { Header, Sider, Content } = Layout

interface MenuItemResp { id: number; parent_id?: number | null; name: string; path?: string | null; component?: string | null; type: number; icon?: string | null; order_no: number; visible: boolean; status: number; perms?: string | null; keep_alive?: boolean }

import zhCN from 'antd/locale/zh_CN'
import enUS from 'antd/locale/en_US'

export default function MainLayout() {
  const navigate = useNavigate()
  const loc = useLocation()
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken()

  // 简易语言切换（存储到 localStorage）
  const [lang, setLang] = useState<'zh' | 'en'>(() => (localStorage.getItem('lang') === 'en' ? 'en' : 'zh'))
  const localeObj = lang === 'zh' ? zhCN : enUS
  const [user, setUser] = useState(() => getUserLocal())
  const [profileOpen, setProfileOpen] = useState(false)
  const [form] = Form.useForm()

  const [rawMenus, setRawMenus] = useState([] as MenuItemResp[])
  const [menuItems, setMenuItems] = useState([] as any[])

  // 从菜单提取权限编码集合（后端通过菜单返回 perms，包含页面/按钮权限）
  const permissionCodes = useMemo(() => {
    const set = new Set<string>()
    rawMenus.forEach((m: MenuItemResp) => {
      const p = m.perms
      if (p && typeof p === 'string') {
        p.split(',').map(s => s.trim()).filter(Boolean).forEach(code => set.add(code))
      }
    })
    return set
  }, [rawMenus])

  const iconMap: Record<string, any> = useMemo(() => ({
    HomeOutlined: <HomeOutlined />,
    UserOutlined: <UserOutlined />,
    TeamOutlined: <TeamOutlined />,
    SettingOutlined: <SettingOutlined />,
    AppstoreOutlined: <AppstoreOutlined />,
    KeyOutlined: <KeyOutlined />,
    DashboardOutlined: <DashboardOutlined />,
    FileOutlined: <FileOutlined />,
    LockOutlined: <LockOutlined />,
    MenuOutlined: <MenuOutlined />,
    PieChartOutlined: <PieChartOutlined />,
    BarChartOutlined: <BarChartOutlined />,
    TableOutlined: <TableOutlined />,
    CalendarOutlined: <CalendarOutlined />,
    FormOutlined: <FormOutlined />,
    SearchOutlined: <SearchOutlined />,
    ToolOutlined: <ToolOutlined />,
    ShoppingCartOutlined: <ShoppingCartOutlined />,
    ShopOutlined: <ShopOutlined />,
    FolderOpenOutlined: <FolderOpenOutlined />,
    FolderOutlined: <FolderOutlined />,
    CloudOutlined: <CloudOutlined />,
    DatabaseOutlined: <DatabaseOutlined />,
    ApiOutlined: <ApiOutlined />,
    CodeOutlined: <CodeOutlined />,
    BugOutlined: <BugOutlined />,
    BellOutlined: <BellOutlined />,
    // 新增常用图标映射
    PlusOutlined: <PlusOutlined />,
    EditOutlined: <EditOutlined />,
    DeleteOutlined: <DeleteOutlined />,
    UploadOutlined: <UploadOutlined />,
    DownloadOutlined: <DownloadOutlined />,
    EyeOutlined: <EyeOutlined />,
    EyeInvisibleOutlined: <EyeInvisibleOutlined />,
    StarOutlined: <StarOutlined />,
    HeartOutlined: <HeartOutlined />,
    LikeOutlined: <LikeOutlined />,
    DislikeOutlined: <DislikeOutlined />,
    SmileOutlined: <SmileOutlined />,
    FrownOutlined: <FrownOutlined />,
    PhoneOutlined: <PhoneOutlined />,
    MailOutlined: <MailOutlined />,
    EnvironmentOutlined: <EnvironmentOutlined />,
    GlobalOutlined: <GlobalOutlined />,
    AimOutlined: <AimOutlined />,
    CompassOutlined: <CompassOutlined />,
    CameraOutlined: <CameraOutlined />,
    VideoCameraOutlined: <VideoCameraOutlined />,
    SoundOutlined: <SoundOutlined />,
    WifiOutlined: <WifiOutlined />,
    RocketOutlined: <RocketOutlined />,
    ThunderboltOutlined: <ThunderboltOutlined />,
    ExperimentOutlined: <ExperimentOutlined />,
    BulbOutlined: <BulbOutlined />,
    GiftOutlined: <GiftOutlined />,
    BankOutlined: <BankOutlined />,
    WalletOutlined: <WalletOutlined />,
    MoneyCollectOutlined: <MoneyCollectOutlined />,
    BookOutlined: <BookOutlined />,
    ReadOutlined: <ReadOutlined />,
    ProfileOutlined: <ProfileOutlined />,
    CloudUploadOutlined: <CloudUploadOutlined />,
    CloudDownloadOutlined: <CloudDownloadOutlined />,
    InboxOutlined: <InboxOutlined />,
    FolderAddOutlined: <FolderAddOutlined />,
    SlidersOutlined: <SlidersOutlined />,
    FilterOutlined: <FilterOutlined />,
    AlertOutlined: <AlertOutlined />,
    ClockCircleOutlined: <ClockCircleOutlined />,
    FieldTimeOutlined: <FieldTimeOutlined />,
    HistoryOutlined: <HistoryOutlined />,
    ContactsOutlined: <ContactsOutlined />,
    SolutionOutlined: <SolutionOutlined />,
    IdcardOutlined: <IdcardOutlined />,
    QrcodeOutlined: <QrcodeOutlined />,
    ScanOutlined: <ScanOutlined />,
    SafetyOutlined: <SafetyOutlined />,
    SecurityScanOutlined: <SecurityScanOutlined />,
    UnlockOutlined: <UnlockOutlined />,
    HddOutlined: <HddOutlined />,
    CopyOutlined: <CopyOutlined />,
    ScissorOutlined: <ScissorOutlined />,
    SnippetsOutlined: <SnippetsOutlined />,
    FileProtectOutlined: <FileProtectOutlined />,
    DesktopOutlined: <DesktopOutlined />,
    LaptopOutlined: <LaptopOutlined />,
    MobileOutlined: <MobileOutlined />,
    TabletOutlined: <TabletOutlined />,
    ClusterOutlined: <ClusterOutlined />,
    AppstoreAddOutlined: <AppstoreAddOutlined />,
    PlusSquareOutlined: <PlusSquareOutlined />,
    SyncOutlined: <SyncOutlined />,
    ReloadOutlined: <ReloadOutlined />,
  }), [])

  useEffect(() => {
    const fetchMenus = async () => {
      try {
        const { data } = await api.get('/auth/menus')
        if (data?.code === 0) {
          const list: MenuItemResp[] = data.data || []
          setRawMenus(list)
        }
      } catch (e) {
        // ignore
      }
    }
    fetchMenus()
  }, [])

  useEffect(() => {
    // 前端移除不再需要的“权限”相关菜单项
    const filtered = rawMenus.filter((m: MenuItemResp) => m.path !== '/permissions' && m.path !== '/demo/perms')

    // build tree items from filtered
    const map = new Map<number, any>()
    const byId = new Map<number, MenuItemResp>()
    filtered.forEach((m: MenuItemResp) => byId.set(m.id, m))
    filtered
      .filter((m: MenuItemResp) => m.type !== 3) // skip buttons
      .forEach((m: MenuItemResp) => {
        const key = m.path && m.path.startsWith('/') ? m.path : `m-${m.id}`
        const item: any = {
          key,
          label: m.name,
          icon: m.icon ? iconMap[m.icon] : undefined,
          // NOTE: 不要预先放 children: []，否则在 antd Menu 中会被当成可展开项
        }
        map.set(m.id, item)
      })
    const roots: any[] = []
    filtered
      .filter((m: MenuItemResp) => m.type !== 3)
      .forEach((m: MenuItemResp) => {
        const node = map.get(m.id)
        const pid = m.parent_id || undefined
        // 只有当父级不是按钮时，才允许挂载，避免将节点放到按钮下
        if (pid && map.has(pid) && byId.get(pid)?.type !== 3) {
          const parent = map.get(pid)
          if (!parent.children) parent.children = []
          parent.children.push(node)
        } else {
          roots.push(node)
        }
      })
    setMenuItems(roots)
  }, [rawMenus, iconMap])

  const handleLogout = async () => {
    try {
      await api.post('/auth/logout')
    } catch (_) {}
    clearToken()
    navigate('/login', { replace: true })
  }

  const openProfile = () => {
    const u = getUserLocal()
    setUser(u)
    form.setFieldsValue({ username: u?.username, nickname: u?.nickname, avatar: (u as any)?.avatar || '' })
    setProfileOpen(true)
  }

  const handleSaveProfile = async () => {
    try{
      const values = await form.validateFields()
      const uid = (user as any)?.id
      if (uid) {
        const { data } = await api.put(`/users/${uid}`, { nickname: values.nickname })
        if (data?.code !== 0) throw new Error(data?.message || '更新失败')
      }
      const merged = { ...(user as any), nickname: values.nickname, avatar: values.avatar }
      setUserLocal(merged)
      setUser(merged)
      message.success('资料已更新')
      setProfileOpen(false)
    }catch(e: any){ if(e?.errorFields) return; message.error(e?.message || '更新失败') }
  }

  const onMenuClick = (info: any) => {
    const key = info?.key as string
    if (key && key.startsWith('/')) navigate(key)
  }

  const selectedKeys = useMemo(() => {
    const k = loc.pathname
    return [k]
  }, [loc.pathname])

  // 根据当前路径计算需要展开的父级菜单 keys（不包含叶子自身）
  const [openKeys, setOpenKeys] = useState<string[]>(() => {
    try {
      const v = localStorage.getItem('layout:menuOpenKeys')
      const arr = v ? JSON.parse(v) : []
      return Array.isArray(arr) ? (arr as string[]) : []
    } catch { return [] }
  })
  // 持久化用户手动展开/收起的子菜单状态，刷新后保持
  useEffect(() => {
    try { localStorage.setItem('layout:menuOpenKeys', JSON.stringify(openKeys)) } catch {}
  }, [openKeys])
  // 确保当前路由对应的父级菜单也处于展开状态，但不覆盖用户手动展开的其他菜单（合并而非替换）
  const currentAncestors = useMemo(() => {
    const list = rawMenus.filter((m: MenuItemResp) => m.type !== 3 && m.path !== '/permissions' && m.path !== '/demo/perms')
    const idMap = new Map<number, MenuItemResp>()
    const pathToId = new Map<string, number>()
    list.forEach((m: MenuItemResp) => { idMap.set(m.id, m); if (m.path) pathToId.set(m.path, m.id) })

    const currentPath = loc.pathname
    let foundId: number | undefined = pathToId.get(currentPath)
    if (!foundId) {
      const candidates = list.filter((m: MenuItemResp) => m.path && currentPath.startsWith(m.path))
      if (candidates.length) {
        candidates.sort((a: MenuItemResp, b: MenuItemResp) => (b.path?.length || 0) - (a.path?.length || 0))
        foundId = candidates[0].id
      }
    }
    if (!foundId) return [] as string[]

    const chain: MenuItemResp[] = []
    let cur: MenuItemResp | undefined = idMap.get(foundId)
    let guard = 0
    while (cur && guard++ < 50) {
      chain.push(cur)
      const pid = cur.parent_id || undefined
      cur = pid ? idMap.get(pid) : undefined
    }
    chain.reverse()
    const ancestors = chain.slice(0, Math.max(0, chain.length - 1))
    return ancestors.map((m: MenuItemResp) => (m.path && m.path.startsWith('/') ? m.path : `m-${m.id}`))
  }, [rawMenus, loc.pathname])
  useEffect(() => {
    setOpenKeys(prev => {
      const s = new Set(prev)
      currentAncestors.forEach(k => s.add(k))
      return Array.from(s)
    })
  }, [currentAncestors])

  const dropdownMenuItems = useMemo(() => ([
    { key: 'profile', label: '个人信息', icon: <UserOutlined /> },
    { type: 'divider' as any },
    { key: 'logout', label: '退出登录', icon: <LogoutOutlined /> },
  ]), [])

  // 基于菜单树与当前路径计算面包屑
  const breadcrumbItems = useMemo(() => {
    // 过滤掉不需要显示的菜单与按钮（type 3）
    const list = rawMenus.filter((m: MenuItemResp) => m.type !== 3 && m.path !== '/permissions' && m.path !== '/demo/perms')
    const idMap = new Map<number, MenuItemResp>()
    const pathToId = new Map<string, number>()
    list.forEach((m: MenuItemResp) => { idMap.set(m.id, m); if (m.path) pathToId.set(m.path, m.id) })

    const currentPath = loc.pathname
    let foundId: number | undefined
    if (pathToId.has(currentPath)) {
      foundId = pathToId.get(currentPath)!
    } else {
      // 兜底：取路径前缀最长匹配（例如 /users/detail/123 匹配 /users）
      const candidates = list.filter((m: MenuItemResp) => m.path && currentPath.startsWith(m.path))
      if (candidates.length) {
        candidates.sort((a: MenuItemResp, b: MenuItemResp) => (b.path?.length || 0) - (a.path?.length || 0))
        foundId = candidates[0].id
      }
    }
    if (!foundId) return [] as any[]

    const chain: MenuItemResp[] = []
    let cur: MenuItemResp | undefined = idMap.get(foundId)
    let guard = 0
    while (cur && guard++ < 50) {
      chain.push(cur)
      const pid = cur.parent_id || undefined
      cur = pid ? idMap.get(pid) : undefined
    }
    chain.reverse()

    return chain.map((m: MenuItemResp, idx: number) => ({
      title: (m.path && idx !== chain.length - 1)
        ? <a onClick={(e: any) => { e.preventDefault(); navigate(m.path!) }}>{m.name}</a>
        : m.name
    }))
  }, [rawMenus, loc.pathname, navigate])

  // 路由页签与缓存（放在 return 之前的顶层）
  type TabItem = { key: string; title: string; keepAlive: boolean }
  const [tabs, setTabs] = useState<TabItem[]>([])
  const [cache, setCache] = useState<Record<string, React.ReactNode>>({})
  const outlet = useOutlet()
  // 右侧菜单折叠状态（默认收起）
  // 左侧菜单折叠状态：持久化到 localStorage，刷新不丢失
  const [leftCollapsed, setLeftCollapsed] = useState<boolean>(() => {
    try {
      const v = localStorage.getItem('layout:leftCollapsed')
      return v ? v === '1' : false
    } catch { return false }
  })
  // 断点状态：仅用于小屏时临时强制折叠，不写入持久化
  const [isBroken, setIsBroken] = useState(false)

  useEffect(() => {
    try { localStorage.setItem('layout:leftCollapsed', leftCollapsed ? '1' : '0') } catch {}
  }, [leftCollapsed])

  // 取消自动展开：尊重用户的折叠偏好（刷新后保持折叠/展开状态）
  // 取消自动展开：尊重用户的折叠偏好（刷新后保持折叠/展开状态）

  // path -> menu 映射，便于取标题与 keep_alive
  const pathToMenu = useMemo(() => {
    const map = new Map<string, MenuItemResp>()
    rawMenus.forEach((m: MenuItemResp) => { if (m.path) map.set(m.path, m) })
    return map
  }, [rawMenus])

  // 当前路由激活 key
  const activeKey = useMemo(() => loc.pathname, [loc.pathname])

  // 根据菜单变更，修正已存在 tabs 的标题与 keepAlive（解决刷新后标题变为路径的问题）
  useEffect(() => {
    setTabs(prev => {
      let changed = false
      const next = prev.map(t => {
        // 特殊处理首页：无菜单映射时也应显示“首页”
        if (t.key === '/') {
          const nextTitle = '首页'
          const nextKeep = true
          if (t.title !== nextTitle || t.keepAlive !== nextKeep) {
            changed = true
            return { ...t, title: nextTitle, keepAlive: nextKeep }
          }
          return t
        }
        const m = pathToMenu.get(t.key)
        if (!m) return t
        const nextKeep = (typeof m.keep_alive === 'boolean') ? !!m.keep_alive : true
        const nextTitle = m.name || t.title
        if (t.title !== nextTitle || t.keepAlive !== nextKeep) {
          changed = true
          return { ...t, title: nextTitle, keepAlive: nextKeep }
        }
        return t
      })
      return changed ? next : prev
    })
  }, [pathToMenu])

  // 根据当前路由补齐 tabs
  useEffect(() => {
    const curPath = loc.pathname
    if (!curPath.startsWith('/')) return
    const m = pathToMenu.get(curPath)
    const title = m?.name || (curPath === '/' ? '首页' : curPath)
    const keepAlive = (m && typeof m.keep_alive === 'boolean') ? !!m.keep_alive : true
    setTabs(prev => (prev.some(t => t.key === curPath) ? prev : [...prev, { key: curPath, title, keepAlive }]))
  }, [loc.pathname, pathToMenu])

  // 确保缓存当前激活页（若 keepAlive 打开）
  useEffect(() => {
    const cur = tabs.find(t => t.key === activeKey)
    if (!cur) return
    if (cur.keepAlive && outlet && !cache[activeKey]) {
      setCache(prev => ({ ...prev, [activeKey]: outlet }))
    }
  }, [activeKey, outlet, tabs, cache])

  const onTabChange = (key: string) => { if (key && key !== activeKey) navigate(key) }
  const onTabEdit = (targetKey: any, action: 'add' | 'remove') => {
    if (action === 'remove') {
      const tKey = String(targetKey)
      if (tKey === '/') return
      setTabs(prev => {
        const idx = prev.findIndex(t => t.key === tKey)
        if (idx === -1) return prev
        const next = prev.filter(t => t.key !== tKey)
        // 清理缓存
        setCache(c => { const n = { ...c }; delete n[tKey]; return n })
        // 如果关闭的是当前激活页，跳转到相邻页
        if (tKey === activeKey) {
          const fallback = next[idx - 1] || next[idx] || { key: '/' }
          if (fallback.key) navigate(fallback.key)
        }
        return next
      })
    }
  }

  // 确保“首页”始终存在且固定（仅初始化时补齐一次）
  useEffect(() => {
    setTabs(prev => (prev.some(t => t.key === '/') ? prev : [{ key: '/', title: '首页', keepAlive: true }, ...prev]))
  }, [])

  return (
      <PermissionProvider codes={permissionCodes}>
        <ConfigProvider locale={localeObj}>
          <Layout style={{ minHeight: '100vh' }}>
            {/* 其余内容保持不变 */}
      <Sider
      collapsible
      collapsed={isBroken ? true : leftCollapsed}
      onCollapse={(collapsed, type) => {
        // 仅在用户点击触发器时更新用户偏好；响应式折叠不写入
        if (type === 'clickTrigger') {
          setLeftCollapsed(collapsed)
        }
      }}
      breakpoint="lg"
      onBreakpoint={(broken) => setIsBroken(broken)}
      trigger={null}
      collapsedWidth={56}
      width={220}
      style={{ background: colorBgContainer }}
      >
        <div
          style={{ 
            height: 64, 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'center', 
            fontWeight: 600, 
            fontSize: leftCollapsed ? '16px' : '18px',
            cursor: 'pointer', 
            userSelect: 'none' 
          }}
          onClick={() => setLeftCollapsed(c => !c)}
          title={leftCollapsed ? '展开菜单' : '收起菜单'}
        >
          {leftCollapsed ? APP_CONFIG.SITE_NAME_SHORT : APP_CONFIG.SITE_NAME}
        </div>
         <Menu
           mode="inline"
           selectedKeys={selectedKeys}
           openKeys={openKeys}
           onOpenChange={(keys) => setOpenKeys(keys as string[])}
           inlineCollapsed={isBroken ? true : leftCollapsed}
           items={menuItems}
           onClick={onMenuClick}
           style={{ borderInlineEnd: 0 }}
         />
       </Sider>
       <Layout>
         <Header style={{ padding: '8px 16px', background: colorBgContainer }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 12 }}>
              {/* 用户要求：隐藏展开/收起图标，保留名称点击收起/展开 */}
               {tabs.length > 0 && (
                 <Tabs
                   className="top-tabs"
                   hideAdd
                   type="editable-card"
                   items={tabs.map(t => ({ key: t.key, label: t.title, closable: t.key !== '/' }))}
                    activeKey={activeKey}
                    onChange={onTabChange}
                    onEdit={onTabEdit as any}
                  />
               )}
             </div>
             <Space size={16} align="center">
               <Dropdown
                 menu={{
                   items: [
                     { key: 'zh', label: 'CN' },
                     { key: 'en', label: 'EN' },
                   ],
                   onClick: ({ key }) => { const v = key as 'zh'|'en'; setLang(v); localStorage.setItem('lang', v) }
                 }}
                 placement="bottomLeft"
               >
                 <Space style={{ cursor: 'pointer', userSelect: 'none' }}>
                   <GlobalOutlined />
                   <span>{lang === 'zh' ? 'CN' : 'EN'}</span>
                 </Space>
               </Dropdown>
               <Dropdown
                 menu={{ items: dropdownMenuItems as any, onClick: (e: { key: string }) => { if (e.key === 'logout') handleLogout(); if (e.key === 'profile') openProfile() } }}
                 placement="bottomRight"
               >
                 <Space style={{ cursor: 'pointer' }}>
                   <Avatar size={32} icon={<UserOutlined />} />
                   <span>{(user as any)?.nickname || (user as any)?.username || '用户'}</span>
                 </Space>
               </Dropdown>
             </Space>
           </div>
         </Header>
         <Content style={{ margin: '16px', padding: 16, background: colorBgContainer, borderRadius: borderRadiusLG }}>
           {/* 缓存的标签页：非激活隐藏 */}
           {tabs.filter(t => t.keepAlive).map(t => (
             <div key={t.key} style={{ display: t.key === activeKey ? 'block' : 'none' }}>
               {cache[t.key]}
             </div>
           ))}
           {/* 未开启缓存：只渲染当前路由 */}
           {(() => {
             const cur = tabs.find(t => t.key === activeKey)
             if (!cur) return null
             if (cur.keepAlive) return null
             return <div key={activeKey}>{outlet}</div>
           })()}
         </Content>
       </Layout>
     </Layout>

      <Modal title="个人信息" open={profileOpen} onOk={handleSaveProfile} onCancel={() => setProfileOpen(false)} okText="保存" width={840}>
        <Form form={form} layout="horizontal" labelCol={{ span: 2 }} wrapperCol={{ span: 22 }} labelAlign="right">
          <Form.Item name="username" label="用户名">
            <Input disabled />
          </Form.Item>
          <Form.Item name="nickname" label="昵称" rules={[{ required: true, message: '请输入昵称' }]}> 
            <Input placeholder="请输入昵称" />
          </Form.Item>
          <Form.Item name="avatar" label="头像 URL">
            <Input placeholder="请输入头像图片地址（URL）" />
          </Form.Item>
        </Form>
      </Modal>
        </ConfigProvider>
      </PermissionProvider>
   )
 }