generator-mico-cli 0.2.13 → 0.2.15

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 '@mico-platform/ui';
+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 '@mico-platform/theme/variables';
+
+.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

@@ -1,58 +1,12 @@
-import { useTheme } from '@/hooks/useTheme';
-import { logout } from '@/common/auth';
+import { AvatarDropdown } from '@/components/RightContent';
 import { DEFAULT_NAME } from '@/constants';
-import { ROUTES } from '@/constants';
-import {
-  Avatar,
-  Divider,
-  Dropdown,
-  Layout,
-  Menu,
-  Space,
-} from '@arco-design/web-react';
-import {
-  IconMoonFill,
-  IconPoweroff,
-  IconSettings,
-  IconSunFill,
-} from '@arco-design/web-react/icon';
-import { useModel } from '@umijs/max';
-import React, { useCallback } from 'react';
+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 */}
@@ -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 {
@@ -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',