generator-mico-cli 0.2.12 → 0.2.14

package/generators/micro-react/templates/apps/layout/src/components/RightContent/AvatarDropdown.tsx

@@ -0,0 +1,388 @@
+import { logout, STORAGE_KEYS } from '@/common/auth';
+import {
+  getCurrentTimezone,
+  getTimezoneRegion,
+  setTimezoneRegion as setTimezoneRegionToStorage,
+  setTimezone as setTimezoneToStorage,
+  utcOffsetToTimezone,
+} from '@/common/helpers';
+import {
+  getCurrentLocale,
+  LOCALE,
+  setLocaleToStorage,
+  type TLocale,
+} from '<%= packageScope %>/common-intl';
+import IconFont from '@/components/IconFont';
+import { useTheme } from '@/hooks/useTheme';
+import { getTimezoneList, type ITimezone } from '@/services/config';
+import { Avatar, Menu } from '@arco-design/web-react';
+import { history, useIntl, useModel } from '@umijs/max';
+import React, { useEffect, useState, useTransition } from 'react';
+import { flushSync } from 'react-dom';
+import HeaderDropdown from '../HeaderDropdown';
+import './avatar-dropdown.less';
+
+const MenuItem = Menu.Item;
+const SubMenu = Menu.SubMenu;
+
+export type GlobalHeaderRightProps = {
+  menu?: boolean;
+  children?: React.ReactNode;
+};
+
+// 菜单项类型定义
+interface IMenuItem {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+  path?: string;
+  children?: IMenuItem[];
+}
+
+const DEFAULT_AVATAR =
+  'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png';
+
+// TODO: 临时假数据，后续接入真实登录态
+const MOCK_USER = {
+  user_name: 'Test User',
+  avatar: DEFAULT_AVATAR,
+};
+
+export const AvatarName: React.FC<{ userName?: string }> = ({ userName }) => {
+  return <span className="ml-2 mr-2">{userName}</span>;
+};
+
+const languageLabelMap: Record<string, string> = {
+  [LOCALE.ZH_CN]: '中文',
+  [LOCALE.EN_US]: 'English',
+};
+
+export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
+  const { setInitialState, initialState } = useModel('@@initialState');
+  const { formatMessage } = useIntl();
+  // TODO: 临时使用假数据，后续接入真实登录态
+  const currentUser = initialState?.currentUser || MOCK_USER;
+  const { theme, setTheme } = useTheme();
+  const [timezoneLoading, startTransition] = useTransition();
+
+  // 时区相关状态
+  const [timezoneList, setTimezoneList] = useState<ITimezone[]>([]);
+  const [currentTimezone, setCurrentTimezone] = useState<string>(
+    getCurrentTimezone(),
+  );
+
+  // 获取当前时区的显示名称
+  const getCurrentTimezoneLabel = (): string => {
+    const offsetNum = Number(
+      currentTimezone.replace('UTC', '').replace('+', ''),
+    );
+    const currentRegion = getTimezoneRegion();
+
+    // 从 timezoneList 中找到匹配的时区（同时匹配 region 和 utc_offset）
+    const matchedTimezone = timezoneList.find(
+      (tz) => tz.utc_offset === offsetNum && tz.region === currentRegion,
+    );
+
+    if (matchedTimezone) {
+      return `${matchedTimezone.region} (${utcOffsetToTimezone(matchedTimezone.utc_offset)})`;
+    }
+
+    // 回退：只匹配 utc_offset
+    const fallbackTimezone = timezoneList.find(
+      (tz) => tz.utc_offset === offsetNum,
+    );
+    if (fallbackTimezone) {
+      return `${fallbackTimezone.region} (${utcOffsetToTimezone(fallbackTimezone.utc_offset)})`;
+    }
+
+    return utcOffsetToTimezone(offsetNum);
+  };
+
+  // 管理头像 URL
+  const [avatarSrc, setAvatarSrc] = useState<string>(
+    currentUser?.avatar || DEFAULT_AVATAR,
+  );
+
+  useEffect(() => {
+    setAvatarSrc(currentUser?.avatar || DEFAULT_AVATAR);
+  }, [currentUser?.avatar]);
+
+  // 加载时区列表
+  useEffect(() => {
+    const loadTimezoneList = async () => {
+      try {
+        const response = await getTimezoneList();
+        if (response?.timezone_list) {
+          setTimezoneList(response.timezone_list);
+        }
+      } catch (error) {
+        console.error('加载时区列表失败:', error);
+      }
+    };
+
+    startTransition(loadTimezoneList as any);
+  }, []);
+
+  // 监听 localStorage 中时区的变化
+  useEffect(() => {
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === STORAGE_KEYS.TIMEZONE && e.newValue) {
+        const offsetNum = Number(e.newValue);
+        if (!Number.isNaN(offsetNum) && e.newValue.trim() !== '') {
+          setCurrentTimezone(utcOffsetToTimezone(offsetNum));
+        } else {
+          setCurrentTimezone(e.newValue);
+        }
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
+
+  const handleAvatarError = () => {
+    setAvatarSrc(DEFAULT_AVATAR);
+  };
+
+  const loginOut = async () => {
+    logout();
+    const { search, pathname } = window.location;
+    const urlParams = new URL(window.location.href).searchParams;
+    const searchParams = new URLSearchParams({
+      redirect: pathname + search,
+    });
+    const redirect = urlParams.get('redirect');
+    if (window.location.pathname !== '/user/login' && !redirect) {
+      history.replace({
+        pathname: '/user/login',
+        search: searchParams.toString(),
+      });
+    }
+  };
+
+  const onMenuClick = (key: string, path?: string) => {
+    if (key === 'logout') {
+      flushSync(() => {
+        setInitialState((s) => ({ ...s, currentUser: undefined }));
+      });
+      loginOut();
+      return;
+    }
+
+    // 处理语言切换
+    if (key.startsWith('language-')) {
+      const newLocale = key.replace('language-', '') as TLocale;
+      const currentLocale = getCurrentLocale();
+      if (newLocale === currentLocale) {
+        return;
+      }
+      // 存储 common-intl 格式的语言标识符，刷新后 umi 会通过映射转换
+      setLocaleToStorage(newLocale);
+      window.location.reload();
+      return;
+    }
+
+    // 处理时区切换
+    if (key.includes('/')) {
+      const lastSlashIndex = key.lastIndexOf('/');
+      const region = key.substring(0, lastSlashIndex);
+      const utcOffsetStr = key.substring(lastSlashIndex + 1);
+      const utcOffsetNum = Number(utcOffsetStr);
+      const timezoneStr = utcOffsetToTimezone(utcOffsetNum);
+      const currentRegion = getTimezoneRegion();
+
+      if (timezoneStr === currentTimezone && region === currentRegion) {
+        return;
+      }
+
+      setTimezoneToStorage(utcOffsetStr);
+      setTimezoneRegionToStorage(region);
+      setCurrentTimezone(timezoneStr);
+      window.location.reload();
+      return;
+    }
+
+    // 处理主题切换
+    if (key.startsWith('theme-')) {
+      const themeMode = key.replace('theme-', '') as 'light' | 'dark';
+      // 如果切换的主题和当前主题一致，则无需切换
+      if (themeMode === theme) {
+        return;
+      }
+      // 切换主题
+      setTheme(themeMode);
+      return;
+    }
+
+    if (path) {
+      history.push(path);
+    } else {
+      history.push(`/account/${key}`);
+    }
+  };
+
+  // TODO: 临时关闭加载逻辑，使用假数据
+  // const loading = <Spin size={16} className="ml-2 mr-2" />;
+  // if (!initialState) {
+  //   return loading;
+  // }
+  // if (!currentUser || !currentUser.user_name) {
+  //   return loading;
+  // }
+
+  // 菜单配置
+  const menuItems: IMenuItem[] = [
+    ...(menu
+      ? [
+          {
+            key: 'language',
+            label: formatMessage({ id: 'avatar.language' }),
+            children: [
+              {
+                key: `language-${LOCALE.ZH_CN}`,
+                label: formatMessage({ id: 'avatar.language.zh_CN' }),
+              },
+              {
+                key: `language-${LOCALE.EN_US}`,
+                label: formatMessage({ id: 'avatar.language.en' }),
+              },
+            ],
+          },
+          {
+            key: 'timezone',
+            label: getCurrentTimezoneLabel(),
+            children:
+              timezoneLoading || timezoneList.length === 0
+                ? []
+                : timezoneList.map((tz) => ({
+                    key: `${tz.region}/${tz.utc_offset}`,
+                    label: `${tz.region} (${utcOffsetToTimezone(tz.utc_offset)})`,
+                  })),
+          },
+          {
+            key: 'theme',
+            label: formatMessage({ id: 'avatar.theme' }),
+            children: [
+              {
+                key: 'theme-light',
+                label: formatMessage({ id: 'avatar.theme.light' }),
+              },
+              {
+                key: 'theme-dark',
+                label: formatMessage({ id: 'avatar.theme.dark' }),
+              },
+            ],
+          },
+        ]
+      : []),
+    {
+      key: 'logout',
+      label: formatMessage({ id: 'avatar.logout' }),
+    },
+  ];
+
+  // 递归渲染菜单项
+  const renderMenuItems = (items: IMenuItem[]): React.ReactNode[] => {
+    return items.map((item) => {
+      if (item.children && item.children.length > 0) {
+        const subMenuTitle = (
+          <>
+            {item.icon && <span className="mr-2">{item.icon}</span>}
+            <span>{item.label}</span>
+          </>
+        );
+        return (
+          <SubMenu key={item.key} title={subMenuTitle}>
+            {renderMenuItems(item.children)}
+          </SubMenu>
+        );
+      }
+
+      let displayLabel: string | React.ReactNode = item.label;
+
+      // 否则渲染为普通菜单项
+      // 检查是否是主题菜单项，如果是则显示当前使用状态
+      if (item.key.startsWith('theme-')) {
+        const themeMode = item.key.replace('theme-', '') as 'light' | 'dark';
+        if (themeMode === theme) {
+          displayLabel = <span className="selected-label">{item.label}</span>;
+        }
+      }
+
+      // 语言菜单项选中状态
+      if (item.key.startsWith('language-')) {
+        const locale = item.key.replace('language-', '') as TLocale;
+        const currentLocale = getCurrentLocale();
+        if (locale === currentLocale) {
+          displayLabel = (
+            <>
+              <span className="selected-label">
+                {languageLabelMap[locale] || ''}
+              </span>{' '}
+              - <span className="label-name">{item.label}</span>
+            </>
+          );
+        } else {
+          displayLabel = (
+            <>
+              <span>{languageLabelMap[locale] || ''}</span> -{' '}
+              <span className="label-name">{item.label}</span>
+            </>
+          );
+        }
+      }
+
+      // 时区菜单项选中状态
+      if (item.key.includes('/')) {
+        const lastSlashIndex = item.key.lastIndexOf('/');
+        const region = item.key.substring(0, lastSlashIndex);
+        const utcOffsetStr = item.key.substring(lastSlashIndex + 1);
+        const utcOffsetNum = Number(utcOffsetStr);
+        const timezoneStr = utcOffsetToTimezone(utcOffsetNum);
+        const currentRegion = getTimezoneRegion();
+
+        if (timezoneStr === currentTimezone && region === currentRegion) {
+          displayLabel = <span className="selected-label">{item.label}</span>;
+        }
+      }
+
+      return (
+        <MenuItem
+          key={item.key}
+          onClick={() => onMenuClick(item.key, item.path)}
+        >
+          {item.icon && <span className="mr-2">{item.icon}</span>}
+          <span>{displayLabel}</span>
+        </MenuItem>
+      );
+    });
+  };
+
+  return (
+    <HeaderDropdown
+      position="br"
+      triggerProps={{ popupAlign: { bottom: [0, 20] } }}
+      droplist={
+        <Menu className="avatar-dropdown-menu">
+          {renderMenuItems(menuItems)}
+        </Menu>
+      }
+    >
+      <div className="flex items-center avatar-dropdown-trigger">
+        <div className="flex items-center">
+          <Avatar size={24} shape="circle">
+            <img src={avatarSrc} alt="avatar" onError={handleAvatarError} />
+          </Avatar>
+        </div>
+        <AvatarName userName={currentUser?.user_name} />
+        <IconFont
+          type="webcs-outline_down1"
+          className="avatar-dropdown-icon"
+          fontSize={12}
+        />
+      </div>
+    </HeaderDropdown>
+  );
+};

package/generators/micro-react/templates/apps/layout/src/components/RightContent/avatar-dropdown.less

@@ -0,0 +1,35 @@
+@import '<%= packageScope %>/shared-styles/variables-only';
+
+.avatar-dropdown-trigger {
+  background-color: @color-fill-2;
+  border-radius: @border-radius-button;
+  height: 32px;
+  padding: 1px 10px;
+  color: @color-text-1;
+  cursor: pointer;
+}
+
+.avatar-dropdown-trigger:hover {
+  background: @color-fill-3;
+}
+
+.avatar-dropdown-trigger.arco-dropdown-popup-visible .arco-icon-down {
+  transform: rotate(180deg);
+}
+
+.avatar-dropdown-menu.arco-dropdown-menu {
+  width: 154px;
+}
+
+.avatar-dropdown-icon {
+  margin-left: 4px;
+  transition: transform 0.2s;
+}
+
+.selected-label {
+  color: @Brand1-6;
+}
+
+.label-name {
+  color: @color-text-3;
+}

package/generators/micro-react/templates/apps/layout/src/components/RightContent/index.ts

@@ -0,0 +1,2 @@
+export { AvatarDropdown, AvatarName } from './AvatarDropdown';
+export type { GlobalHeaderRightProps } from './AvatarDropdown';

package/generators/micro-react/templates/apps/layout/src/constants/index.ts

@@ -169,6 +169,8 @@ export const STORAGE_KEYS = {
   APP_INFO: 'appInfo',
   IS_SUPERUSER: 'is_superuser',
   GROUPS: 'groups',
+  TIMEZONE: 'mico-cs-timezone',
+  TIMEZONE_REGION: 'mico-cs-timezone-region',
 } as const;
 
 /**

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

@@ -1,10 +1,7 @@
-// ==================== 全局样式 ====================
-// 先导入 Arco Design CSS（确保它在项目样式之前）
-@import (css) '~@arco-design/web-react/dist/css/arco.css';
 
-// 再导入共享主题变量（CSS Variables + Less Variables）
-// 这样项目的变量定义会在 Arco 之后，可以正确覆盖
-@import '<%= packageScope %>/shared-styles';
+// 再导入 @mico-platform/theme 主题变量（CSS Variables + Less Variables）
+// 这样项目的变量定义会在 UI 库之后，可以正确覆盖
+@import '@mico-platform/theme';
 
 * {
   box-sizing: border-box;

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

@@ -9,15 +9,17 @@ import {
   Layout,
   Menu,
   Space,
-} from '@arco-design/web-react';
+} from '@mico-platform/ui';
+
 import {
   IconMoonFill,
   IconPoweroff,
   IconSettings,
   IconSunFill,
-} from '@arco-design/web-react/icon';
+} from '@mico-platform/ui/icon';
 import { useModel } from '@umijs/max';
 import React, { useCallback } from 'react';
+import { AvatarDropdown } from '@/components/RightContent';
 import './index.less';
 
 const Header = Layout.Header;
@@ -66,18 +68,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 +93,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 {
@@ -135,6 +135,8 @@
 // Sider styles
 .<%= projectName %>-sider {
   box-shadow: none;
+  position: fixed !important;
+  height: calc(100vh - 56px) !important;
 
   .arco-layout-sider-trigger {
     display: flex;

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

@@ -4,8 +4,8 @@ import { isAuthDisabled, isNoPermissionRoute } from '@/constants';
 import IconFont from '@/components/IconFont';
 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 { useLocation, useModel } from '@umijs/max';
 import React, { useEffect, useMemo, useRef } from 'react';
 import './index.less';
@@ -15,8 +15,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',

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,9 @@
   }
 }
 
-.<%= projectName %>-sider {
+.mico-cs-sider {
   box-shadow: none;
+  background-color: @color-text-5;
 
   .arco-layout-sider-trigger {
     display: flex;
@@ -57,6 +90,7 @@
 
   .click-trigger-btn {
     cursor: pointer;
+    // width: 100%;
     display: flex;
   }
 
@@ -69,3 +103,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;
+}