cpms_operation_platform/src/layouts/BasicLayout.tsx

import { computed, defineComponent, h, Transition, KeepAlive } from 'vue';
import type { CSSProperties } from 'vue';
import { useRouter, useRoute, RouterView } from 'vue-router';
import { Layout, Menu, Modal, Breadcrumb, Dropdown, message } from 'ant-design-vue';
import type { MenuProps } from 'ant-design-vue';
import {
  EditOutlined,
  LogoutOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons-vue';
import { useMenuStore } from '@/stores/menuStore';
import { useUserStore } from '@/stores/userStore';
import { useTabsStore } from '@/stores/tabsStore';
import { useState, useBreadcrumb, auth } from '@/hooks';
import { ChangePasswordModal, PageTabs } from '@/components';
import { renderRouteIcon } from '@/utils/routeIcon';
import logoutSvg from '@/assets/img/icon/logout.svg';
import styles from './BasicLayout.module.less';

const { Header, Sider, Content, Footer } = Layout;

const headerStyle: CSSProperties = {
  background: '#fff',
  padding: '0',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  color: '#1a1a1a',
  boxShadow: '0 1px 4px rgba(0, 21, 41, 0.08)',
  height: 'auto',
};

const siderStyle: CSSProperties = {
  background: '#fff',
  boxShadow: '2px 0 8px rgba(0, 21, 41, 0.08)',
};

const footerStyle: CSSProperties = {
  padding: '0 50px 16px 50px',
  textAlign: 'center',
  color: '#3a3a3a',
  userSelect: 'none',
};

/**
 * 将 menuStore 中的 menuItems 转为 antd Menu 的 items 格式
 * 递归处理 iconName → vue-icons-plus 图标 VNode
 */
function resolveMenuItems(items: any[]): MenuProps['items'] {
  return items.map((item) => {
    const resolved: any = {
      key: item.key,
      label: item.label,
    };

    if (item.iconName) {
      resolved.icon = () => renderRouteIcon(item.iconName, { size: 16 });
    }

    if (item.children?.length) {
      resolved.children = resolveMenuItems(item.children);
    }

    return resolved;
  });
}

/**
 * 基础布局:左侧导航(后端菜单驱动) + 顶部栏 + 内容区 + 页脚
 */
export default defineComponent({
  name: 'BasicLayout',
  setup() {
    const route = useRoute();
    const router = useRouter();
    const [collapsed, setCollapsed] = useState(false);

    const { menuItems } = useMenuStore();
    const { phone } = useUserStore();
    const { tabs, cachedViews, removeTab } = useTabsStore();
    const { breadcrumbs } = useBreadcrumb();

    const selectedKeys = computed<string[]>(() => [route.path]);

    const resolvedItems = computed(() => resolveMenuItems(menuItems.value));

    const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
      router.push(key as string);
    };

    const toggleCollapsed = () => {
      setCollapsed(!collapsed.value);
    };

    const activeTabKey = computed(() => route.path);

    /** ===== 退出登录 ===== */
    const handleLogout = () => {
      Modal.confirm({
        title: '提示',
        content: '是否退出登录？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          const { clearUser } = useUserStore();
          clearUser();
          auth.logout();
        },
      });
    };

    /** ===== 修改密码弹窗 ===== */
    const [changePwdVisible, setChangePwdVisible] = useState<boolean>(false);
    const [changePwdSubmitting, setChangePwdSubmitting] = useState<boolean>(false);

    const handleChangePassword = () => {
      setChangePwdVisible(true);
    };

    const handleChangePwdSave = async (payload: { newPassword: string }) => {
      if (changePwdSubmitting.value) return;
      setChangePwdSubmitting(true);
      try {
        // TODO: 替换为真实 API 调用
        console.log('修改密码:', payload);
        message.success('修改成功');
        setChangePwdVisible(false);
      } catch (err: any) {
        message.error(err?.msg || '修改失败');
      } finally {
        setChangePwdSubmitting(false);
      }
    };

    /** ===== 头像下拉菜单：修改密码 / 退出登录 ===== */
    const handleUserMenuClick: MenuProps['onClick'] = ({ key }) => {
      if (key === 'changePassword') {
        handleChangePassword();
      } else if (key === 'logout') {
        handleLogout();
      }
    };

    /** ===== PageTabs 事件 ===== */
    const handleTabChange = (key: string) => {
      if (key !== route.path) {
        router.push(key);
      }
    };

    const handleTabClose = (key: string) => {
      removeTab(key);
    };

    return () => (
      <Layout class={styles.basicLayoutMain}>
        <Sider style={siderStyle} collapsed={collapsed.value} trigger={null} collapsible>
          <div class={styles.logo}>
            <span class={styles.logoText}>{collapsed.value ? '6羽' : '六羽赛事运营平台'}</span>
          </div>
          <Menu
            theme="light"
            mode="inline"
            selectedKeys={selectedKeys.value}
            items={resolvedItems.value}
            onClick={handleMenuClick}
          />
        </Sider>

        <Layout class={styles.main}>
          <Header style={headerStyle}>
            {/*
              ── 顶部行：折叠按钮 + 面包屑 + 右侧账号信息 ──
              按需求把原来平铺在 Header 里的三块统一包到一个 row 容器内，
              形成「行容器 + tabs 容器」的两层结构
            */}
            <div class={styles.headerRow}>
              <span class={styles.trigger} onClick={toggleCollapsed}>
                {collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              </span>

              {/* 面包屑：紧跟在折叠按钮之后 */}
              <Breadcrumb separator=">" class={styles.breadcrumb}>
                {breadcrumbs.value.map((item, index) => {
                  const isLast = index === breadcrumbs.value.length - 1;
                  return (
                    <Breadcrumb.Item key={item.path || index}>
                      {isLast || !item.path ? (
                        <span>{item.title}</span>
                      ) : (
                        <a onClick={() => router.push(item.path as string)}>{item.title}</a>
                      )}
                    </Breadcrumb.Item>
                  );
                })}
              </Breadcrumb>

              {/* 右侧: 账号信息 + 退出 */}
              <div class={styles.headerRight}>
                <span class={styles.userPhone}>{phone.value}</span>
                <Dropdown trigger={['hover']} placement="bottomLeft">
                  {{
                    default: () => <img src={logoutSvg} class={styles.logoutIcon} />,
                    overlay: () => (
                      <Menu onClick={handleUserMenuClick}>
                        <Menu.Item key="changePassword">
                          <span class={styles.menuItem}>
                            <EditOutlined />
                            修改密码
                          </span>
                        </Menu.Item>
                        <Menu.Divider />
                        <Menu.Item key="logout">
                          <span class={`${styles.menuItem} ${styles.menuItemDanger}`}>
                            <LogoutOutlined />
                            退出登录
                          </span>
                        </Menu.Item>
                      </Menu>
                    ),
                  }}
                </Dropdown>
              </div>
            </div>

            {/*
              ── Tabs 行：Chrome 风格页面标签栏 ──
              数据来自 tabsStore，点击切换路由，关闭按钮走 store.removeTab
            */}
            <div class={styles.pageTabs}>
              <PageTabs
                tabs={tabs.value}
                activeKey={activeTabKey.value}
                onChange={handleTabChange}
                onClose={handleTabClose}
              />
            </div>
          </Header>

          {/*
            ── 路由出口 ──
            用 <KeepAlive :include="cachedViews"> 缓存已访问过的页面,
            include 是组件 name 列表,所以页面组件需要在 defineComponent 中显式给出 name
          */}
          <Content class={styles.content}>
            <div class={styles.pageView}>
              <RouterView
                v-slots={{
                  default: ({ Component, route }: any) => (
                    <KeepAlive include={cachedViews.value}>
                      <Transition name="page-fade-slide">
                        {Component ? h(Component, { key: route.path }) : null}
                      </Transition>
                    </KeepAlive>
                  ),
                }}
              />
            </div>
          </Content>

          <Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>
        </Layout>

        {/* 修改密码弹窗 */}
        {changePwdVisible.value && (
          <ChangePasswordModal
            visible={changePwdVisible.value}
            submitting={changePwdSubmitting.value}
            onClose={() => setChangePwdVisible(false)}
            onSave={handleChangePwdSave}
          />
        )}
      </Layout>
    );
  },
});