generator-mico-cli 0.1.29 → 0.2.2-8.beta.1

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

@@ -0,0 +1,72 @@
+import { useLocation, useModel } from '@umijs/max';
+import { useEffect, useRef, useState } from 'react';
+import { layoutLogger } from '@/common/logger';
+import { isNoAuthRoute } from '@/constants';
+
+/**
+ * 路由切换时自动刷新用户权限
+ *
+ * 功能：
+ * - 路由变化时自动刷新 initialState（用户信息和权限）
+ * - 防抖处理，避免频繁切换路由时重复请求
+ * - 跳过首次渲染（getInitialState 已获取过）
+ * - 跳过免认证路由
+ * - 只响应 pathname 变化，忽略 search/hash
+ */
+export function useRoutePermissionRefresh() {
+  const location = useLocation();
+  const { refresh } = useModel('@@initialState');
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const isFirstRender = useRef(true);
+  const prevPathRef = useRef(location.pathname);
+  const refreshRef = useRef(refresh);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+  refreshRef.current = refresh;
+
+  useEffect(() => {
+    // 跳过首次渲染
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    // 路径未变化
+    if (prevPathRef.current === location.pathname) {
+      return;
+    }
+
+    prevPathRef.current = location.pathname;
+
+    // 免认证路由不需要刷新
+    if (isNoAuthRoute(location.pathname)) {
+      return;
+    }
+
+    // 清除之前的定时器
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    setIsRefreshing(true);
+    layoutLogger.log('Route changed, scheduling user info refresh:', location.pathname);
+
+    // 防抖 300ms
+    timerRef.current = setTimeout(async () => {
+      try {
+        await refreshRef.current?.();
+        layoutLogger.log('User info refreshed');
+      } finally {
+        setIsRefreshing(false);
+      }
+    }, 300);
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [location.pathname]);
+
+  return { isRefreshing };
+}

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

@@ -1,4 +1,4 @@
-@import '<%= packageScope %>/shared-styles/variables-only';
+@import '@mico-platform/theme/variables';
 
 // Common mixins
 .header-gray-btn-mixin() {
@@ -22,6 +22,8 @@
   z-index: @header-z-index;
   height: @header-height;
   line-height: @header-height;
+  position: fixed;
+  width: 100vw;
   padding: 0 @spacing-lg;
   display: flex;
   align-items: center;

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

@@ -1,64 +1,18 @@
-import { useTheme } from '@/hooks/useTheme';
-import { logout } from '@/common/auth';
-import { ROUTES } from '@/common/constants';
-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 { AvatarDropdown } from '@/components/RightContent';
+import { DEFAULT_NAME } from '@/constants';
+import { Layout, Space } from '@mico-platform/ui';
+import React from 'react';
 import './index.less';
 
 const Header = Layout.Header;
 
 const LayoutHeader: React.FC = () => {
-  const { initialState } = useModel('@@initialState');
-  const { theme, toggleTheme } = useTheme();
-
-  const handleMenuClick = useCallback((key: string) => {
-    if (key === 'logout') {
-      // 清除本地存储的认证信息
-      logout();
-      // 跳转到登录页
-      window.location.href = ROUTES.LOGIN;
-      return;
-    } 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 || 'Mico CENTER'}
+          {window.__MICO_CONFIG__?.appName || DEFAULT_NAME}
         </span>
       </div>
 
@@ -66,18 +20,18 @@ const LayoutHeader: React.FC = () => {
       <div className="layout-header-right">
         <Space size="medium">
           {/* Theme toggle */}
-          <div
+          {/* <div
             className="layout-header-action"
             onClick={toggleTheme}
             title={theme === 'dark' ? '切换到亮色模式' : '切换到暗色模式'}
           >
             {theme === 'dark' ? <IconSunFill /> : <IconMoonFill />}
-          </div>
+          </div> */}
 
           <span className="split-line" />
 
           {/* User info */}
-          <Dropdown droplist={droplist} position="br" trigger="click">
+          {/* <Dropdown droplist={droplist} position="br" trigger="click">
             <div className="layout-header-user">
               {initialState?.currentUser?.avatar && (
                 <Avatar size={32} style={{ marginRight: 8 }}>
@@ -91,7 +45,8 @@ const LayoutHeader: React.FC = () => {
                   initialState?.currentUser?.email}
               </span>
             </div>
-          </Dropdown>
+          </Dropdown> */}
+          <AvatarDropdown menu />
         </Space>
       </div>
     </Header>

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

@@ -1,4 +1,4 @@
-@import '<%= packageScope %>/shared-styles/variables-only';
+@import '@mico-platform/theme/variables';
 
 .arco-layout-sider-collapsed {
   .layout-menu {
@@ -9,8 +9,10 @@
   }
 }
 
-.layout-menu {
+.layout-menu.arco-menu-dark,
+.layout-menu.arco-menu {
   font-size: @font-size-base;
+  background-color: @color-text-5;
 
   // Base menu item styles
   .arco-menu-item {
@@ -48,7 +50,7 @@
   }
 
   .arco-menu-indent {
-    width: 32px;
+    width: 12px;
   }
 
   .layout-menu-level-3 {
@@ -133,8 +135,12 @@
 }
 
 // Sider styles
-.<%= projectName %>-sider {
+.layout-web-sider {
   box-shadow: none;
+  background-color: @color-text-5 !important;
+  position: fixed !important;
+  height: calc(100vh - @header-height) !important;
+  z-index: 999;
 
   .arco-layout-sider-trigger {
     display: flex;
@@ -146,6 +152,10 @@
   .click-trigger-btn {
     cursor: pointer;
     display: flex;
+    width: 24px;
+    height: 24px;
+    align-items: center;
+    justify-content: center;
 
     // 图标颜色适配主题
     .arco-icon {
@@ -161,4 +171,24 @@
   .click-trigger-btn.collapsed {
     justify-content: center;
   }
+
+  .arco-menu-collapse .arco-menu-item .arco-icon,
+  .arco-menu-collapse .arco-menu-pop-header .arco-icon {
+    margin-left: 0;
+  }
+
+  .arco-menu .arco-menu-item,
+  .arco-menu .arco-menu-group-title,
+  .arco-menu .arco-menu-pop-header,
+  .arco-menu .arco-menu-inline-header .arco-menu-dark .arco-menu-item,
+  .arco-menu-dark .arco-menu-group-title,
+  .arco-menu-dark .arco-menu-pop-header,
+  .arco-menu-dark .arco-menu-inline-header {
+    background-color: @color-text-5;
+    color: @color-text-2;
+
+    &.arco-menu-selected {
+      color: @Brand1-6;
+    }
+  }
 }

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

@@ -1,10 +1,13 @@
 import type { ParsedMenuItem } from '@/common/menu';
-import { getWindowMenus, parseMenuItems } from '@/common/menu';
+import { filterMenuItems, parseMenuItems } from '@/common/menu';
+import { getMenus } from '@/common/portal-data';
 import IconFont from '@/components/IconFont';
+import { isAuthDisabled } from '@/constants';
 import { useMenuState } from '@/hooks/useMenuState';
 import { useTheme } from '@/hooks/useTheme';
-import { Layout, Menu } from '@arco-design/web-react';
-import * as Icons from '@arco-design/web-react/icon';
+import { Layout, Menu } from '@mico-platform/ui';
+import * as Icons from '@mico-platform/ui/icon';
+import { useModel } from '@umijs/max';
 import React, { useEffect, useMemo, useRef } from 'react';
 import './index.less';
 
@@ -13,8 +16,8 @@ const SubMenu = Menu.SubMenu;
 const Sider = Layout.Sider;
 
 /**
- * 图标名称到 Arco Icon 组件的映射
- * 用于处理自定义图标名称与 Arco 图标名称的差异
+ * 图标名称到 @mico-platform/ui Icon 组件的映射
+ * 用于处理自定义图标名称与 UI 图标名称的差异
  */
 const ICON_ALIAS_MAP: Record<string, keyof typeof Icons> = {
   Package: 'IconApps',
@@ -28,6 +31,16 @@ const ICON_ALIAS_MAP: Record<string, keyof typeof Icons> = {
 const getIconComponent = (iconName: string): React.ReactNode => {
   if (!iconName) return null;
 
+  // 从中台配置的 icon 是有 Icon 前缀的。类似 IconMenu 这种
+  const directIconKey = iconName as keyof typeof Icons;
+  const DirectIconComponent = Icons[directIconKey] as
+    | React.ComponentType
+    | undefined;
+
+  if (DirectIconComponent) {
+    return <DirectIconComponent />;
+  }
+
   // 尝试直接匹配 Icon${name} 格式
   const iconKey = `Icon${iconName}` as keyof typeof Icons;
   const IconComponent = Icons[iconKey] as React.ComponentType | undefined;
@@ -102,12 +115,23 @@ interface LayoutMenuProps {
 const LayoutMenu: React.FC<LayoutMenuProps> = () => {
   const siderRef = useRef<HTMLDivElement>(null);
   const { isDark } = useTheme();
+  const { initialState } = useModel('@@initialState');
+  const currentUser = initialState?.currentUser;
 
   // Parse menu data
+  // isMenuAllowed 内部已对每个菜单项单独检查 isNoPermissionRoute，
+  // 无需在此按当前页面路径全局跳过过滤，避免菜单可见性随页面变化
   const menuItems = useMemo(() => {
-    const menus = getWindowMenus();
-    return parseMenuItems(menus);
-  }, []);
+    const menus = getMenus();
+    if (isAuthDisabled()) {
+      return parseMenuItems(menus);
+    }
+    const filteredMenus = filterMenuItems(menus, {
+      isSuperuser: currentUser?.is_superuser,
+      sideMenus: (currentUser?.side_menus || []) as string[],
+    });
+    return parseMenuItems(filteredMenus);
+  }, [currentUser?.is_superuser, currentUser?.side_menus]);
 
   // 使用菜单状态 Hook
   const {
@@ -152,7 +176,7 @@ const LayoutMenu: React.FC<LayoutMenuProps> = () => {
       onCollapse={handleCollapsed}
       collapsible
       breakpoint="xl"
-      className="<%= projectName %>-sider"
+      className="layout-web-sider"
       trigger={clickTriggerBtn}
       theme={isDark ? 'dark' : 'light'}
     >

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

@@ -1,32 +1,60 @@
-@import '<%= packageScope %>/shared-styles/variables-only';
+@import '@mico-platform/theme/variables';
+
+.arco-tree-node:hover {
+  background-color: @color-fill-2;
+}
+
+body {
+  // 防止触发mac浏览器的双指水平滑动触发后退前进
+  overscroll-behavior-x: none;
+}
 
 .layout-container {
-  min-width: 100vw;
+  min-width: @size-base * 128;
   background: @color-fill-1;
-  overflow-x: auto;
-  overflow-y: hidden;
+  // overflow-x: auto;s
+  // overflow-y: hidden;
   display: flex;
   flex-direction: column;
+  // 适配子元素高度，覆盖 arco-layout 默认的 flex: 1
+  flex: none;
+  width: 100%;
 
   .layout-content {
-    overflow: hidden;
+    // overflow: hidden;
     flex: 1;
-    display: flex;
-    flex-direction: row;
+    margin-top: @header-height;
 
     .layout-content-right {
-      padding: @spacing-md @spacing-lg;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
+      padding: @spacing-md @spacing-md;
+      margin-left: var(--sider-width, @sidebar-width);
+      // flex: 1;
+      // display: flex;
+      // flex-direction: column;
+      // min-height: calc(100vh - @header-height);
+      // 当菜单折叠时，自适应调整 marginLeft
+      transition: margin-left 0.2s ease;
+      // overflow-y: auto;
+      // overflow: hidden auto;
+
+      .layout-content-scroll-container {
+        display: flex;
+        flex-direction: column;
+        min-height: 100%;
+      }
 
       .layout-content-outlet {
         flex: 1;
+        // overflow-y: scroll;
         overflow: hidden;
         background: none;
         border-radius: @border-radius-lg;
         position: relative;
+
+        --layout-content-outlet-margin-top: 32px;
+
+        margin-top: var(--layout-content-outlet-margin-top);
+        height: calc(100% - var(--layout-content-outlet-margin-top));
       }
     }
   }
@@ -34,6 +62,10 @@
   .arco-spin-children::after {
     background-color: color-mix(in srgb, var(--color-text-5) 60%, transparent);
   }
+
+  .arco-layout-sider-trigger {
+    background-color: @color-text-5;
+  }
 }
 
 .arco-form {
@@ -47,8 +79,10 @@
   }
 }
 
-.<%= projectName %>-sider {
+.layout-web-sider {
   box-shadow: none;
+  background-color: @color-text-5;
+  z-index: 999;
 
   .arco-layout-sider-trigger {
     display: flex;
@@ -57,6 +91,7 @@
 
   .click-trigger-btn {
     cursor: pointer;
+    // width: 100%;
     display: flex;
   }
 
@@ -69,3 +104,39 @@
     justify-content: center;
   }
 }
+
+.arco-drawer-header {
+  border-bottom: 1px solid @color-line-2;
+}
+
+.arco-drawer-footer {
+  border-top: 1px solid @color-line-2;
+}
+
+.arco-dropdown-menu {
+  border-color: @color-line-2;
+}
+
+.arco-message-success,
+.arco-message-error,
+.arco-message-warning,
+.arco-message-loading {
+  border-color: @color-line-2;
+}
+
+// 按钮样式覆盖
+.arco-btn-secondary:not(.arco-btn-disabled) {
+  background-color: @color-fill-2;
+}
+
+.arco-btn-secondary:not(.arco-btn-disabled):not(.arco-btn-loading):hover {
+  background-color: @color-fill-3;
+}
+
+.arco-btn-secondary:not(.arco-btn-disabled):not(.arco-btn-loading):active {
+  background-color: @color-fill-4;
+}
+
+.arco-btn-secondary.arco-btn-disabled {
+  background-color: @color-fill-1;
+}