generator-mico-cli 0.1.18

package/generators/micro-react/templates/apps/layout/src/hooks/useAuth.ts

@@ -0,0 +1,75 @@
+import { getAuthInfo } from '@/common/auth/tool';
+import type { AuthInfo } from '@/common/auth/type';
+import { handleAuthFailureRedirect, resolveAuthToken } from '@/common/request';
+import { useCallback, useEffect, useState } from 'react';
+
+interface UseAuthOptions {
+  /** 是否跳过认证检查 */
+  skipAuthCheck?: boolean;
+}
+
+/**
+ * 认证管理 Hook
+ */
+export const useAuth = (options: UseAuthOptions = {}) => {
+  const { skipAuthCheck = false } = options;
+  const [authInfo, setAuthInfo] = useState<AuthInfo | null>(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  // 检查认证状态
+  const checkAuth = useCallback(() => {
+    if (skipAuthCheck) {
+      setLoading(false);
+      return;
+    }
+
+    const token = resolveAuthToken();
+    if (token) {
+      const info = getAuthInfo();
+      setAuthInfo(info);
+      setIsAuthenticated(true);
+    } else {
+      setIsAuthenticated(false);
+    }
+    setLoading(false);
+  }, [skipAuthCheck]);
+
+  // 初始化时检查认证
+  useEffect(() => {
+    checkAuth();
+  }, [checkAuth]);
+
+  // 登出
+  const logout = useCallback(() => {
+    // 清除本地存储的认证信息
+    localStorage.removeItem('authtoken');
+    localStorage.removeItem('refreshtoken');
+    localStorage.removeItem('uid');
+    localStorage.removeItem('nickname');
+    localStorage.removeItem('avatar');
+
+    setAuthInfo(null);
+    setIsAuthenticated(false);
+
+    // 跳转到登录页
+    handleAuthFailureRedirect();
+  }, []);
+
+  // 刷新认证信息
+  const refreshAuthInfo = useCallback(() => {
+    const info = getAuthInfo();
+    setAuthInfo(info);
+  }, []);
+
+  return {
+    authInfo,
+    isAuthenticated,
+    loading,
+    logout,
+    refreshAuthInfo,
+    checkAuth,
+  };
+};
+
+export default useAuth;

package/generators/micro-react/templates/apps/layout/src/hooks/useMenu.ts

@@ -0,0 +1,35 @@
+import type { MenuItem, ParsedMenuItem, ParsedRoute } from '@/common/menu';
+import { extractRoutes, getWindowMenus, parseMenuItems } from '@/common/menu';
+import { useMemo } from 'react';
+
+/**
+ * 菜单管理 Hook
+ */
+export const useMenu = () => {
+  // 获取原始菜单数据
+  const rawMenus = useMemo<MenuItem[]>(() => {
+    return getWindowMenus();
+  }, []);
+
+  // 解析后的菜单项（用于渲染菜单组件）
+  const menuItems = useMemo<ParsedMenuItem[]>(() => {
+    return parseMenuItems(rawMenus);
+  }, [rawMenus]);
+
+  // 解析后的路由配置（用于路由匹配）
+  const routes = useMemo<ParsedRoute[]>(() => {
+    return extractRoutes(rawMenus);
+  }, [rawMenus]);
+
+  // 是否有菜单数据
+  const hasMenus = rawMenus.length > 0;
+
+  return {
+    rawMenus,
+    menuItems,
+    routes,
+    hasMenus,
+  };
+};
+
+export default useMenu;

package/generators/micro-react/templates/apps/layout/src/hooks/useMenuState.ts

@@ -0,0 +1,112 @@
+import type { ParsedMenuItem } from '@/common/menu';
+import { findMenuKeyByPath } from '@/common/menu';
+import { history, useLocation } from '@umijs/max';
+import { useCallback, useEffect, useState } from 'react';
+
+export enum ETriggerMode {
+  CLICK_TRIGGER = 'clickTrigger',
+  HOVER_TRIGGER = 'hoverTrigger',
+}
+
+interface UseMenuStateOptions {
+  menuItems: ParsedMenuItem[];
+}
+
+interface UseMenuStateReturn {
+  selectedKeys: string[];
+  openKeys: string[];
+  collapsed: boolean;
+  triggerMode: ETriggerMode;
+  handleClickMenuItem: (key: string) => void;
+  handleCollapsed: (
+    isCollapsed: boolean,
+    type: 'clickTrigger' | 'responsive',
+  ) => void;
+  setOpenKeys: (keys: string[]) => void;
+}
+
+/**
+ * 菜单状态管理 Hook
+ * 分离菜单的状态逻辑，使组件更简洁
+ */
+export const useMenuState = ({
+  menuItems,
+}: UseMenuStateOptions): UseMenuStateReturn => {
+  const location = useLocation();
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const [openKeys, setOpenKeys] = useState<string[]>([]);
+  const [collapsed, setCollapsed] = useState<boolean>(false);
+  const [triggerMode, setTriggerMode] = useState<ETriggerMode>(
+    ETriggerMode.CLICK_TRIGGER,
+  );
+
+  // 根据当前路径更新选中状态
+  useEffect(() => {
+    const result = findMenuKeyByPath(menuItems, location.pathname);
+    if (result) {
+      setSelectedKeys([result.key]);
+      if (!collapsed && result.openKeys.length > 0) {
+        setOpenKeys((prev) => [...new Set([...prev, ...result.openKeys])]);
+      }
+    }
+  }, [location.pathname, menuItems, collapsed]);
+
+  // 查找菜单项
+  const findItem = useCallback(
+    (items: ParsedMenuItem[], targetKey: string): ParsedMenuItem | null => {
+      for (const item of items) {
+        if (item.key === targetKey) return item;
+        if (item.children) {
+          const found = findItem(item.children, targetKey);
+          if (found) return found;
+        }
+      }
+      return null;
+    },
+    [],
+  );
+
+  // 处理菜单项点击
+  const handleClickMenuItem = useCallback(
+    (key: string) => {
+      const item = findItem(menuItems, key);
+      if (item?.path && item.type !== 'link') {
+        history.push(item.path);
+      }
+    },
+    [menuItems, findItem],
+  );
+
+  // 处理侧边栏折叠
+  const handleCollapsed = useCallback(
+    (isCollapsed: boolean, type: 'clickTrigger' | 'responsive') => {
+      // 点击触发时切换到 hover 模式
+      if (
+        type === 'clickTrigger' &&
+        triggerMode === ETriggerMode.CLICK_TRIGGER
+      ) {
+        setTriggerMode(ETriggerMode.HOVER_TRIGGER);
+        setCollapsed(isCollapsed);
+        return;
+      }
+
+      // hover 模式下点击切换回 click 模式
+      if (triggerMode === ETriggerMode.HOVER_TRIGGER) {
+        setTriggerMode(ETriggerMode.CLICK_TRIGGER);
+      }
+    },
+    [triggerMode],
+  );
+
+  return {
+    selectedKeys,
+    openKeys,
+    collapsed,
+    triggerMode,
+    handleClickMenuItem,
+    handleCollapsed,
+    setOpenKeys,
+  };
+};
+
+export default useMenuState;

package/generators/micro-react/templates/apps/layout/src/hooks/useTheme.ts

@@ -0,0 +1,124 @@
+import {
+  applyTheme,
+  getStoredTheme,
+  THEME,
+  type ThemeMode,
+} from '@/common/theme';
+import { useCallback, useEffect, useSyncExternalStore } from 'react';
+
+// 主题变化订阅者列表
+const subscribers = new Set<() => void>();
+
+// 当前主题值（模块级别的共享状态）
+let currentTheme: ThemeMode | null = null;
+
+/**
+ * 通知所有订阅者主题已变化
+ */
+const notifySubscribers = (): void => {
+  subscribers.forEach((callback) => callback());
+};
+
+/**
+ * 获取当前主题（用于 useSyncExternalStore）
+ */
+const getSnapshot = (): ThemeMode => {
+  if (currentTheme === null) {
+    currentTheme = getStoredTheme();
+  }
+  return currentTheme;
+};
+
+/**
+ * 订阅主题变化（用于 useSyncExternalStore）
+ */
+const subscribe = (callback: () => void): (() => void) => {
+  subscribers.add(callback);
+  return () => {
+    subscribers.delete(callback);
+  };
+};
+
+/**
+ * 设置主题（内部方法）
+ */
+const setThemeInternal = (theme: ThemeMode, persist = true): void => {
+  if (currentTheme === theme) return;
+
+  currentTheme = theme;
+  applyTheme(theme);
+
+  if (persist) {
+    localStorage.setItem(THEME.STORAGE_KEY, theme);
+  }
+
+  // 通知所有使用 useTheme 的组件
+  notifySubscribers();
+};
+
+/**
+ * 主题管理 Hook
+ *
+ * 使用 useSyncExternalStore 实现跨组件状态同步，
+ * 解决多个组件各自调用 useTheme 时状态不同步的问题。
+ */
+export const useTheme = () => {
+  // 使用 useSyncExternalStore 订阅共享的主题状态
+  const theme = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  // 首次挂载时应用主题
+  useEffect(() => {
+    applyTheme(theme);
+  }, []);
+
+  // 监听系统主题变化
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = (e: MediaQueryListEvent): void => {
+      // 只有在没有手动设置主题时才跟随系统
+      if (!localStorage.getItem(THEME.STORAGE_KEY)) {
+        const newTheme: ThemeMode = e.matches ? 'dark' : 'light';
+        setThemeInternal(newTheme, false);
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  // 监听 storage 事件（其他标签页的主题变化）
+  useEffect(() => {
+    const handleStorage = (e: StorageEvent): void => {
+      if (e.key === THEME.STORAGE_KEY && e.newValue) {
+        const newTheme = e.newValue as ThemeMode;
+        if (newTheme === 'light' || newTheme === 'dark') {
+          setThemeInternal(newTheme, false);
+        }
+      }
+    };
+
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, []);
+
+  // 切换主题
+  const toggleTheme = useCallback((): void => {
+    const next: ThemeMode = currentTheme === 'light' ? 'dark' : 'light';
+    setThemeInternal(next, true);
+  }, []);
+
+  // 设置指定主题
+  const setThemeValue = useCallback((newTheme: ThemeMode): void => {
+    setThemeInternal(newTheme, true);
+  }, []);
+
+  return {
+    theme,
+    toggleTheme,
+    setTheme: setThemeValue,
+    isDark: theme === 'dark',
+  };
+};
+
+export default useTheme;

package/generators/micro-react/templates/apps/layout/src/layouts/components/header/index.less

@@ -0,0 +1,109 @@
+@import '@/styles/variables.less';
+
+// Common mixins
+.header-gray-btn-mixin() {
+  background: @color-fill-2;
+  border-radius: @border-radius-button;
+}
+
+.center-mixin() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.round-mixin(@size) {
+  width: @size;
+  height: @size;
+  border-radius: @border-radius-round;
+}
+
+.layout-header {
+  z-index: @header-z-index;
+  height: @header-height;
+  line-height: @header-height;
+  padding: 0 @spacing-lg;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--color-bg-3);
+  box-shadow: 0 4px 4px 0 rgba(134, 144, 156, 8%);
+  flex-shrink: 0;
+
+  .trigger {
+    margin-left: 20px;
+  }
+}
+
+.layout-header-logo {
+  display: flex;
+  align-items: center;
+  margin-right: auto;
+
+  .logo-text {
+    font-size: @font-size-lg;
+    font-weight: @font-weight-bold;
+    color: @Brand1-6;
+    letter-spacing: 1px;
+  }
+}
+
+.layout-header-right {
+  display: flex;
+  align-items: center;
+}
+
+.layout-header-action {
+  width: 32px;
+  height: 32px;
+  .center-mixin();
+
+  border-radius: @border-radius-round;
+  cursor: pointer;
+  transition: background-color @animation-duration-fast;
+
+  &:hover {
+    background: @color-fill-2;
+  }
+
+  svg {
+    font-size: 18px;
+    color: @color-text-2;
+  }
+}
+
+.layout-header-user {
+  display: flex;
+  align-items: center;
+  padding: @spacing-xs @spacing-sm;
+  border-radius: @border-radius-md;
+  cursor: pointer;
+  transition: background-color @animation-duration-fast;
+
+  &:hover {
+    background: @color-fill-2;
+  }
+
+  .user-name {
+    color: @color-text-1;
+    font-size: @font-size-base;
+  }
+}
+
+.split-line {
+  width: 1px;
+  height: 16px;
+  background: var(--color-border-2);
+  margin: 0 @spacing-xs;
+}
+
+.notification-btn {
+  .header-gray-btn-mixin();
+  .center-mixin();
+
+  color: @color-text-1;
+
+  .unread-count {
+    background-color: @Danger-6;
+  }
+}

package/generators/micro-react/templates/apps/layout/src/layouts/components/header/index.tsx

@@ -0,0 +1,97 @@
+import { getAuthInfo } from '@/common/auth/tool';
+import { useTheme } from '@/hooks/useTheme';
+import {
+  Avatar,
+  Divider,
+  Dropdown,
+  Layout,
+  Menu,
+  Space,
+} from '@arco-design/web-react';
+import {
+  IconMoonFill,
+  IconPoweroff,
+  IconSettings,
+  IconSunFill,
+  IconUser,
+} from '@arco-design/web-react/icon';
+import { useModel } from '@umijs/max';
+import React, { useCallback } from 'react';
+import './index.less';
+
+const Header = Layout.Header;
+
+const LayoutHeader: React.FC = () => {
+  const { initialState } = useModel('@@initialState');
+  const { theme, toggleTheme } = useTheme();
+  const authInfo = getAuthInfo();
+
+  const handleMenuClick = useCallback((key: string) => {
+    if (key === 'logout') {
+      // TODO: Implement logout logic
+      console.log('logout');
+    } else if (key === 'settings') {
+      // TODO: Navigate to settings page
+      console.log('settings');
+    }
+  }, []);
+
+  const droplist = (
+    <Menu onClickMenuItem={handleMenuClick}>
+      <Menu.Item key="settings">
+        <IconSettings style={{ marginRight: 8 }} />
+        设置
+      </Menu.Item>
+      <Divider style={{ margin: '4px 0' }} />
+      <Menu.Item key="logout">
+        <IconPoweroff style={{ marginRight: 8 }} />
+        退出登录
+      </Menu.Item>
+    </Menu>
+  );
+
+  return (
+    <Header className="layout-header">
+      {/* Logo */}
+      <div className="layout-header-logo">
+        <span className="logo-text">
+          {window.__MICO_MENUS__?.appName || 'AUDIT CENTER'}
+        </span>
+      </div>
+
+      {/* Right section */}
+      <div className="layout-header-right">
+        <Space size="medium">
+          {/* Theme toggle */}
+          <div
+            className="layout-header-action"
+            onClick={toggleTheme}
+            title={theme === 'dark' ? '切换到亮色模式' : '切换到暗色模式'}
+          >
+            {theme === 'dark' ? <IconSunFill /> : <IconMoonFill />}
+          </div>
+
+          <span className="split-line" />
+
+          {/* User info */}
+          <Dropdown droplist={droplist} position="br" trigger="click">
+            <div className="layout-header-user">
+              <Avatar size={32} style={{ marginRight: 8 }}>
+                {authInfo.avatar ? (
+                  <img src={authInfo.avatar} alt="avatar" />
+                ) : (
+                  <IconUser />
+                )}
+              </Avatar>
+              <span className="user-name">
+                {authInfo.nickname || initialState?.currentUser?.name || '用户'}
+              </span>
+            </div>
+          </Dropdown>
+        </Space>
+      </div>
+    </Header>
+  );
+};
+
+export default LayoutHeader;

package/generators/micro-react/templates/apps/layout/src/layouts/components/menu/index.less

@@ -0,0 +1,164 @@
+@import '@/styles/variables.less';
+
+.arco-layout-sider-collapsed {
+  .layout-menu {
+    .layout-menu-level-1 {
+      // Handle safari text ellipsis in collapsed state
+      text-overflow: clip;
+    }
+  }
+}
+
+.layout-menu {
+  font-size: @font-size-base;
+
+  // Base menu item styles
+  .arco-menu-item {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 12px;
+
+    &:hover {
+      background-color: @Brand1-1;
+    }
+  }
+
+  .arco-menu-inline-header {
+    &:hover {
+      background-color: @Brand1-1;
+    }
+  }
+
+  .arco-menu-inline-header.arco-menu-selected {
+    &:hover {
+      background-color: @Brand1-1;
+    }
+  }
+
+  .arco-menu-item.arco-menu-selected {
+    background-color: @Brand1-1;
+  }
+
+  .arco-menu-pop-header.arco-menu-selected {
+    background-color: @Brand1-1;
+  }
+
+  .arco-menu-pop-header:hover {
+    background-color: @Brand1-1;
+  }
+
+  .arco-menu-indent {
+    width: 32px;
+  }
+
+  .layout-menu-level-3 {
+    margin-bottom: 0;
+
+    .arco-menu-indent {
+      width: 24px;
+    }
+  }
+
+  .arco-icon {
+    font-size: 16px;
+  }
+
+  .arco-menu-inline-header .arco-icon {
+    margin-right: 16px;
+  }
+
+  .arco-menu-icon-suffix {
+    .arco-icon {
+      font-size: 14px;
+    }
+  }
+
+  // Level 1 menu spacing
+  &-level-1 {
+    margin-bottom: @spacing-sm;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Level 2 menu styles
+  .arco-menu-inner {
+    .arco-menu-sub-menu {
+      // Level 2 menu item spacing
+      .arco-menu-item {
+        margin-bottom: @spacing-xs;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      // Spacing between level 1 and level 2 menus
+      > .arco-menu-item {
+        margin-top: @spacing-xs;
+      }
+    }
+
+    // Level 3 menu styles
+    .arco-menu-sub-menu .arco-menu-sub-menu {
+      // Level 3 menu item spacing is 0
+      .arco-menu-item {
+        margin-bottom: 0;
+      }
+
+      // Level 3 menu indent relative to level 2
+      .arco-menu-inner {
+        padding-left: 56px;
+      }
+    }
+  }
+
+  // Submenu expanded styles
+  .arco-menu-sub-menu {
+    .arco-menu-sub-menu-title {
+      height: 40px;
+      line-height: 40px;
+      padding: 0 16px;
+    }
+  }
+
+  // Limit to max 3 levels
+  .arco-menu-sub-menu .arco-menu-sub-menu .arco-menu-sub-menu {
+    // Hide level 4+ menus
+    .arco-menu-sub-menu {
+      display: none;
+    }
+  }
+}
+
+// Sider styles
+.<%= projectName %>-sider {
+  box-shadow: none;
+
+  .arco-layout-sider-trigger {
+    display: flex;
+    justify-content: flex-end;
+    // 使用主题变量适配亮/暗主题
+    background-color: @color-text-5;
+  }
+
+  .click-trigger-btn {
+    cursor: pointer;
+    display: flex;
+
+    // 图标颜色适配主题
+    .arco-icon {
+      color: @color-text-2;
+    }
+  }
+
+  .click-trigger-btn:not(.collapsed) {
+    background-color: @color-fill-1;
+    border-radius: @border-radius-lg;
+  }
+
+  .click-trigger-btn.collapsed {
+    justify-content: center;
+  }
+}