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

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

@@ -0,0 +1,383 @@
+import { logout, STORAGE_KEYS } from '@/common/auth';
+import type { IUserInfo } from '@/common/auth/type';
+import {
+	getCurrentTimezone,
+	getTimezoneRegion,
+	setTimezoneRegion as setTimezoneRegionToStorage,
+	setTimezone as setTimezoneToStorage,
+	utcOffsetToTimezone,
+} from '@/common/helpers';
+import {
+	getCurrentLocale,
+	LOCALE,
+	setLocaleToStorage,
+	type SupportedLocale,
+} from '@/common/locale';
+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[];
+}
+
+// TODO: 临时假数据，后续接入真实登录态
+const MOCK_USER: Partial<IUserInfo> = {
+	user_name: 'Test User',
+	username: 'test@micous.com',
+};
+
+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 || '',
+	);
+
+	useEffect(() => {
+		setAvatarSrc(currentUser?.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 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 SupportedLocale;
+			const currentLocale = getCurrentLocale();
+			if (newLocale === currentLocale) {
+				return;
+			}
+			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 SupportedLocale;
+				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">
+				{avatarSrc && (
+					<div className="flex items-center">
+						<Avatar size={24} shape="circle">
+							<img src={avatarSrc} alt="avatar" />
+						</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

@@ -1,15 +1,179 @@
-export const DEFAULT_NAME = 'Umi Max';
-
 /**
- * 无需认证的路由路径
+ * 应用常量定义
+ */
+export const DEFAULT_NAME = '<%= projectName %>';
+/**
+ * 路由路径常量
  */
-export const NO_AUTH_ROUTES = {
+export const ROUTES = {
+  /** 登录页 */
   LOGIN: '/user/login',
+  /** 注册页 */
+  REGISTER: '/user/register',
+  /** 注册结果页 */
+  REGISTER_RESULT: '/user/register-result',
+  /** 403 无权限页 */
   FORBIDDEN: '/403',
+  /** 404 未找到页 */
   NOT_FOUND: '/404',
 } as const;
 
 /**
- * 无需认证的路由列表
+ * 无需认证的路由列表（静态配置）
+ */
+export const NO_AUTH_ROUTE_LIST: string[] = [
+  ROUTES.LOGIN,
+  ROUTES.REGISTER,
+  ROUTES.REGISTER_RESULT,
+  ROUTES.FORBIDDEN,
+  ROUTES.NOT_FOUND,
+];
+
+/**
+ * 获取合并后的免鉴权路由列表
+ * 合并静态常量 + window.__MICO_CONFIG__.noAuthRouteList
+ */
+export const getNoAuthRouteList = (): string[] => {
+  const dynamicRoutes = window.__MICO_CONFIG__?.noAuthRouteList ?? [];
+  return [...new Set([...NO_AUTH_ROUTE_LIST, ...dynamicRoutes])];
+};
+
+/**
+ * 判断路径是否匹配路由列表（支持精确匹配和前缀匹配）
+ * @param pathname - 当前路由路径
+ * @param routes - 路由列表
+ * @returns 是否匹配
+ */
+const matchRouteList = (pathname: string, routes: string[]): boolean => {
+  return routes.some((route) => {
+    // 前缀匹配：/public/* 匹配 /public/xxx
+    if (route.endsWith('/*')) {
+      const prefix = route.slice(0, -1); // 去掉末尾的 *，保留 /
+      return pathname.startsWith(prefix) || pathname === prefix.slice(0, -1);
+    }
+    // 精确匹配
+    return pathname === route;
+  });
+};
+
+/**
+ * 判断指定路径是否为免认证路由（跳过 SSO 登录）
+ * 支持精确匹配和前缀匹配（以 /* 结尾的模式）
+ * @param pathname - 当前路由路径
+ * @returns 是否免认证
+ */
+export const isNoAuthRoute = (pathname: string): boolean => {
+  return matchRouteList(pathname, getNoAuthRouteList());
+};
+
+/**
+ * 免权限校验的路由列表（静态配置）
+ * 这些路由不检查菜单权限，但仍可能需要登录
+ */
+export const NO_PERMISSION_ROUTE_LIST: string[] = [
+  ROUTES.FORBIDDEN,
+  ROUTES.NOT_FOUND,
+];
+
+/**
+ * 获取合并后的免权限校验路由列表
+ * 合并静态常量 + window.__MICO_CONFIG__.noPermissionRouteList
+ */
+export const getNoPermissionRouteList = (): string[] => {
+  const dynamicRoutes = window.__MICO_CONFIG__?.noPermissionRouteList ?? [];
+  return [...new Set([...NO_PERMISSION_ROUTE_LIST, ...dynamicRoutes])];
+};
+
+/**
+ * 判断指定路径是否为免权限校验路由（跳过菜单权限检查）
+ * 支持精确匹配和前缀匹配（以 /* 结尾的模式）
+ * @param pathname - 当前路由路径
+ * @returns 是否免权限校验
+ */
+export const isNoPermissionRoute = (pathname: string): boolean => {
+  return matchRouteList(pathname, getNoPermissionRouteList());
+};
+
+/**
+ * 不显示布局的路由列表（静态配置）
+ * 注意：403/404 保留布局，方便用户通过导航返回
+ */
+export const NO_LAYOUT_ROUTE_LIST: string[] = [
+  ROUTES.LOGIN,
+  ROUTES.REGISTER,
+  ROUTES.REGISTER_RESULT,
+];
+
+/**
+ * 获取合并后的不显示布局路由列表
+ * 合并静态常量 + window.__MICO_CONFIG__.noLayoutRouteList
+ */
+export const getNoLayoutRouteList = (): string[] => {
+  const dynamicRoutes = window.__MICO_CONFIG__?.noLayoutRouteList ?? [];
+  return [...new Set([...NO_LAYOUT_ROUTE_LIST, ...dynamicRoutes])];
+};
+
+/**
+ * 判断指定路径是否不显示布局
+ * 支持精确匹配和前缀匹配（以 /* 结尾的模式）
+ * @param pathname - 当前路由路径
+ * @returns 是否不显示布局
+ */
+export const isNoLayoutRoute = (pathname: string): boolean => {
+  return matchRouteList(pathname, getNoLayoutRouteList());
+};
+
+/**
+ * 判断是否关闭权限控制
+ * 关闭后：菜单全部显示，路由不校验权限
+ * @returns 是否关闭权限控制
+ */
+export const isAuthDisabled = (): boolean => {
+  return window.__MICO_CONFIG__?.disableAuth === true;
+};
+
+/**
+ * 主题相关常量
+ */
+export const THEME = {
+  /** localStorage 存储键 */
+  STORAGE_KEY: '<%= ProjectName %>-theme',
+  /** 默认主题 */
+  DEFAULT: 'light' as const,
+  /** 可选主题值 */
+  VALUES: ['light', 'dark'] as const,
+} as const;
+
+/**
+ * 时区相关常量
+ */
+export const TIMEZONE = {
+  /** localStorage 存储键（IANA 时区，如 Asia/Shanghai） */
+  STORAGE_KEY: '<%= ProjectName %>-timezone',
+  /** localStorage 存储键（用于展示的地区/名称，可选） */
+  REGION_STORAGE_KEY: '<%= ProjectName %>-timezone-region',
+} as const;
+
+/**
+ * 在线状态相关常量
+ */
+export const PRESENCE = {
+  /** localStorage 存储键 */
+  STORAGE_KEY: '<%= ProjectName %>-presence-status',
+} as const;
+
+/**
+ * 存储键常量
+ */
+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;
+
+/**
+ * OSS 上传目录分类
  */
-export const NO_AUTH_ROUTE_LIST = Object.values(NO_AUTH_ROUTES);
+export type TDirCategory = number;

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

@@ -1,13 +1,26 @@
-// ==================== 全局样式 ====================
-// 导入共享主题变量（CSS Variables + Less Variables）
-@import '<%= packageScope %>/shared-styles';
+
+// 再导入 @mico-platform/theme 主题变量（CSS Variables + Less Variables）
+// 这样项目的变量定义会在 UI 库之后，可以正确覆盖
+@import '@mico-platform/theme/variables';
 
 * {
   box-sizing: border-box;
 }
 
-#<%= projectName %> {
-  height: 100vh;
-  min-height: 800px;
+// 禁用 Mac 触摸板双指左右滑动触发的浏览器前进/后退手势
+html {
+  overscroll-behavior-x: none;
+  height: 100%;
+}
+
+body {
+  overscroll-behavior-x: none;
+  height: 100%;
+  background-color: @color-fill-1;
+}
+
+#root {
+  min-height: max(100%, 800px);
+  // 这里是为了让子容器撑满高度，正常的height: 100%并不能撑满
   display: flex;
 }

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

@@ -1,5 +1,6 @@
 import type { MenuItem, ParsedMenuItem, ParsedRoute } from '@/common/menu';
-import { extractRoutes, getWindowMenus, parseMenuItems } from '@/common/menu';
+import { extractRoutes, parseMenuItems } from '@/common/menu';
+import { getMenus } from '@/common/portal-data';
 import { useMemo } from 'react';
 
 /**
@@ -8,7 +9,7 @@ import { useMemo } from 'react';
 export const useMenu = () => {
   // 获取原始菜单数据
   const rawMenus = useMemo<MenuItem[]>(() => {
-    return getWindowMenus();
+    return getMenus();
   }, []);
 
   // 解析后的菜单项（用于渲染菜单组件）