generator-mico-cli 0.2.29 → 0.2.31

package/generators/micro-react/templates/apps/layout/src/common/menu/types.ts

@@ -215,6 +215,33 @@ declare global {
       disableAuth?: boolean;
       /** 获取时区列表的 API 地址 */
       timezoneListUrl?: string;
+      /**
+       * 多语言中台 initIntl 参数（优先于下方 commonIntl；与 packages/common-intl/src/intl.ts 合并默认项）
+       */
+      intl?: {
+        tag: string;
+        app_name: string;
+        indexedDBParams?: {
+          dbName?: string;
+          dbVersion?: number;
+          storeName?: string;
+          keyPathKey?: string;
+        };
+      };
+      /**
+       * 多语言中台：配置有效 `tag`、`app_name` 时主应用首屏拉取中台文案（见 packages/common-intl/README.md）
+       * @deprecated 优先使用 `intl`；仍保留以兼容旧 head 注入
+       */
+      commonIntl?: {
+        tag: string;
+        app_name: string;
+        indexedDBParams?: {
+          dbName?: string;
+          dbVersion?: number;
+          storeName?: string;
+          keyPathKey?: string;
+        };
+      };
       [key: string]: unknown;
     };
     __MICO_WORKSPACE__?: WorkspaceConfig | null;

package/generators/micro-react/templates/apps/layout/src/common/micro/types.ts

@@ -1,3 +1,6 @@
+import type { ITenantItem } from '@/common/auth/type';
+import type { SupportedLocale } from '@/common/locale';
+
 /**
  * 微前端 Props 类型定义
  * 主应用通过 qiankun 传递给子应用的配置数据
@@ -8,6 +11,7 @@
  * - 1: 鉴权失败（token 无效/过期），需要主应用重新获取 token
  * - 2: 业务错误（参数错误、逻辑拒绝、网络超时、权限不足等）
  */
+
 export enum EMicroAppErrorStatus {
   /** 鉴权失败，需重获 token */
   AUTH_FAILURE = 1,
@@ -163,6 +167,25 @@ export interface IMicroAppProps {
    * 子应用可以直接使用这些服务，无需重复初始化
    */
   services?: ISharedServices;
+  /** 主应用标识（固定为当前主应用名） */
+  mainApp?: string;
+  /**
+   * 主应用的 request 实例（umi-request/axios 封装）
+   * 子应用可直接使用，复用主应用的拦截器与鉴权信息
+   */
+  request?: (...args: any[]) => Promise<any>;
+  /** 当前多语言类型（zh-CN / en-US） */
+  locale?: SupportedLocale;
+  /** 按钮级权限列表（与 currentUser.button_perms 一致，便于子应用直接消费） */
+  button_perms?: string[];
+  /** 菜单级权限列表 */
+  menu_perms?: string[];
+  /** 区域级权限列表 */
+  region_perms?: string[];
+  /** 当前租户 code（多租户模式下由主应用控制，单租户时为默认租户 code） */
+  current_tenant?: string;
+  /** 当前用户有权限的租户列表（已按 app_perms 过滤） */
+  allowed_tenants?: ITenantItem[];
   /** 其他扩展字段 */
   [key: string]: unknown;
 }

package/generators/micro-react/templates/apps/layout/src/common/request/sso.ts

@@ -3,12 +3,16 @@
  */
 
 import { request as rawRequest } from '@umijs/max';
+import { resolveAuthCheckPath } from '@/common/auth/auth-check-path';
 import {
   maybePersistTokens,
   setStoredAuthToken,
 } from '@/common/auth/auth-manager';
 import { isPageAuthFree } from '@/common/menu';
 import { isNoAuthRoute, ROUTES } from '@/constants';
+import { captureError } from '@common-web/sentry';
+import { formatLayoutMessage } from '@/common/intl';
+import { Modal } from '@mico-platform/ui';
 import {
   getTicketParam,
   resolveAuthToken,
@@ -26,20 +30,46 @@ import { removeParamFromUrl } from './url-resolver';
 
 let ticketPromise: Promise<void> | null = null;
 
+/** SSO 换取 token 的时间戳（毫秒），null 表示本次会话未经过 SSO 换取 */
+let tokenAcquiredAt: number | null = null;
+
+/** 登录失败弹窗是否已显示，防止多个请求同时失败时重复弹出 */
+let redirectLimitModalShown = false;
+
+/**
+ * 执行 SSO 重定向跳转，回跳地址中固定携带 redirect_count=1
+ */
+const performSsoRedirect = (): void => {
+  const externalLoginPath = resolveExternalLoginPath();
+  console.log('[SSO] 执行 SSO 重定向', { externalLoginPath });
+
+  const redirectUrl = new URL(window.location.href);
+  redirectUrl.searchParams.delete('redirect_count');
+  redirectUrl.searchParams.set('redirect_count', '1');
+  redirectUrl.searchParams.delete('ticket');
+  const serviceUrl = redirectUrl.toString();
+
+  window.location.href = `${
+    externalLoginPath ?? ROUTES.LOGIN
+  }?service=${encodeURIComponent(serviceUrl)}`;
+};
+
 /**
  * 处理认证失败后的重定向
  */
 export const handleAuthFailureRedirect = (): void => {
   if (typeof window === 'undefined') return;
 
-  // 如果当前路由在免认证列表中，不触发 SSO 重定向
-  if (isNoAuthRoute(window.location.pathname)) {
-    console.log('[SSO] 当前路由在免认证列表中，跳过 SSO 重定向');
+  const authCheckPath = resolveAuthCheckPath(window.location.pathname);
+
+  // 与 getInitialState 一致：用 authCheckPath 判断，避免「/ + defaultPath」首屏仍按 / 误判为免认证
+  if (isNoAuthRoute(authCheckPath)) {
+    console.log('[SSO] 当前路由在免认证列表中，跳过 SSO 重定向', { authCheckPath });
     return;
   }
 
-  if (isPageAuthFree(window.location.pathname)) {
-    console.log('[SSO] 页面 accessControlEnabled=false，跳过 SSO 重定向');
+  if (isPageAuthFree(authCheckPath)) {
+    console.log('[SSO] 页面 accessControlEnabled=false，跳过 SSO 重定向', { authCheckPath });
     return;
   }
 
@@ -50,23 +80,54 @@ export const handleAuthFailureRedirect = (): void => {
     ? parseInt(redirectCountParam, 10)
     : 0;
 
-  // 如果 redirect 次数小于 1 次，则执行 redirect 跳转登录
+  console.log('[SSO] handleAuthFailureRedirect', { redirectCount });
+
+  // 如果 redirect 次数小于 1 次，则执行自动 redirect 跳转登录
   if (redirectCount < 1) {
-    const externalLoginPath = resolveExternalLoginPath();
-    console.log('handleAuthFailureRedirect', externalLoginPath);
-
-    // 构建回跳地址
-    const redirectUrl = new URL(window.location.href);
-    redirectUrl.searchParams.delete('redirect_count');
-    redirectUrl.searchParams.set('redirect_count', '1');
-    const serviceUrl = redirectUrl.toString();
-
-    window.location.href = `${
-      externalLoginPath ?? ROUTES.LOGIN
-    }?service=${encodeURIComponent(serviceUrl)}`;
-  } else {
-    console.warn('认证失败，但已达到最大重定向次数，停止重定向');
+    performSsoRedirect();
+    return;
+  }
+
+  // redirect 次数已达上限，停止自动重定向，记录日志并弹窗询问用户是否手动重试
+  console.warn('[SSO] 认证失败，已达到最大重定向次数，停止重定向', {
+    redirectCount,
+  });
+
+  const tokenAge =
+    tokenAcquiredAt !== null
+      ? Math.round((Date.now() - tokenAcquiredAt) / 1000)
+      : null;
+
+  captureError(new Error('认证失败：redirect_count 已达上限，停止重定向'), {
+    tags: { scene: 'auth_redirect_limit' },
+    extra: {
+      tokenAcquiredAt: tokenAcquiredAt
+        ? new Date(tokenAcquiredAt).toISOString()
+        : null,
+      tokenAgeSeconds: tokenAge,
+    },
+  });
+
+  if (redirectLimitModalShown) {
+    console.log('[SSO] 登录失败弹窗已显示，跳过重复弹出');
+    return;
   }
+
+  redirectLimitModalShown = true;
+  Modal.confirm({
+    title: formatLayoutMessage({ id: 'sso_auth_failure_modal_title', defaultMessage: '登录提示' }),
+    content: formatLayoutMessage({ id: 'sso_auth_failure_modal_content', defaultMessage: '自动登录失败，是否重新尝试登录？' }),
+    okText: formatLayoutMessage({ id: 'sso_auth_failure_modal_ok', defaultMessage: '重新登录' }),
+    cancelText: formatLayoutMessage({ id: 'sso_auth_failure_modal_cancel', defaultMessage: '取消' }),
+    onOk: () => {
+      console.log('[SSO] 用户确认重新登录，执行手动重试重定向');
+      redirectLimitModalShown = false;
+      performSsoRedirect();
+    },
+    onCancel: () => {
+      redirectLimitModalShown = false;
+    },
+  });
 };
 
 /**
@@ -113,6 +174,7 @@ export const ensureSsoSession = async (): Promise<void> => {
         setFetchingToken(false);
 
         if (resolveAuthToken()) {
+          tokenAcquiredAt = Date.now();
           processPendingRequests();
         } else {
           throw new Error('SSO 认证失败');

package/generators/micro-react/templates/apps/layout/src/common/request/token-refresh.ts

@@ -10,6 +10,7 @@ import {
   setStoredRefreshToken,
 } from '@/common/auth/auth-manager';
 import { resolveRefreshEndpoint } from './config';
+import { buildDefaultHeaders } from './interceptors';
 import type { PendingRequest, RequestContext } from './types';
 
 // 当前是否在请求用ticket换取token
@@ -82,6 +83,7 @@ export const refreshAuthToken = async (): Promise<string | null> => {
     }>(endpoint, {
       method: 'POST',
       data: { refresh: refreshToken },
+      headers: buildDefaultHeaders(),
     });
 
     maybePersistTokens(result);

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

@@ -1,3 +1,4 @@
+import type { IUserInfo } from '@/common/auth/type';
 import { getAuthInfo } from '@/common/auth/auth-manager';
 import { EEnv, getEnv } from '@/common/env';
 import { getCurrentLocale } from '@/common/locale';
@@ -75,16 +76,24 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
       : 'production';
   }, []);
 
-  // 构建传递给子应用的 props
+  // 构建传递给子应用的 props（用户信息以 initialState.currentUser 为准，token 仍读存储）
   const buildProps = useCallback(() => {
     const authInfo = getAuthInfo();
-    return {
+    const displayName = currentUser?.user_name || currentUser?.name || '';
+    // 用户有权限的租户列表：tenant ∩ app_perms（按 app_perm.key === tenant.code 匹配）
+    const allowedTenantCodes = new Set(
+      (currentUser?.app_perms ?? []).map((p) => p.key),
+    );
+    const allowedTenants = (currentUser?.tenant ?? []).filter((t) =>
+      allowedTenantCodes.has(t.code),
+    );
+    const props = {
       mainApp: '<%= projectName %>',
       env,
       authToken: authInfo.token,
-      uid: authInfo.uid,
-      avatar: authInfo.avatar,
-      nickname: authInfo.nickname,
+      uid: currentUser ? String(currentUser.id) : authInfo.uid,
+      avatar: currentUser?.avatar ?? authInfo.avatar,
+      nickname: displayName || authInfo.nickname,
       base: normalizeMicroAppBase(base || '/'),
       // 传递当前路由路径，让子应用进行内部路由切换
       routePath,
@@ -94,9 +103,22 @@ const MicroAppLoader: React.FC<MicroAppLoaderProps> = ({
       locale: getCurrentLocale(),
       // 与 fetchUserInfo 一致：子应用用于按钮级权限（如 PermissionFilter）
       button_perms: currentUser?.button_perms ?? [],
+      menu_perms: currentUser?.menu_perms ?? [],
+      region_perms: currentUser?.region_perms ?? [],
       is_superuser: currentUser?.is_superuser,
+      // 将当前用户信息传递给子应用，仅传使用到的字段
+      currentUser: {
+        tenant: currentUser?.tenant,
+        isMultiTenant: currentUser?.isMultiTenant,
+        email: currentUser?.email,
+      },
+      current_tenant: currentUser?.current_tenant,
+      allowed_tenants: allowedTenants,
     };
-  }, [base, env, routePath, currentUser]);
+    const { request: _request, ...loggableProps } = props;
+    console.log('[MicroAppLoader] buildProps', { appName, ...loggableProps });
+    return props;
+  }, [base, env, routePath, currentUser, appName]);
 
   // ref 持有最新的 buildProps，避免加载 effect 依赖它导致子应用被重载
   const buildPropsRef = useRef(buildProps);

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

@@ -0,0 +1,76 @@
+import { setStoredTenantCode } from '@/common/auth/tenant';
+import IconFont from '@/components/IconFont';
+import useTenant from '@/hooks/useTenant';
+import { Menu } from '@mico-platform/ui';
+import { useModel } from '@umijs/max';
+import React, { useMemo } from 'react';
+import HeaderDropdown from '../HeaderDropdown';
+import './tenant-dropdown.less';
+
+const MenuItem = Menu.Item;
+
+export const TenantDropdown: React.FC = () => {
+  const { isMultiTenant, tenants } = useTenant();
+  const { initialState } = useModel('@@initialState');
+  const currentUser = initialState?.currentUser;
+  const currentTenantCode = currentUser?.current_tenant;
+
+  // 仅保留 app_perms 中授权的租户（按 app_perm.key === tenant.code 匹配）
+  const allowedTenants = useMemo(() => {
+    const allowedCodes = new Set(
+      (currentUser?.app_perms ?? []).map((p) => p.key),
+    );
+    return tenants.filter((t) => allowedCodes.has(t.code));
+  }, [tenants, currentUser?.app_perms]);
+
+  const currentTenantName =
+    allowedTenants.find((t) => t.code === currentTenantCode)?.name || '';
+
+  if (!isMultiTenant || allowedTenants.length === 0) {
+    return null;
+  }
+
+  const onClickTenant = (code: string) => {
+    if (!code || code === currentTenantCode) {
+      return;
+    }
+    setStoredTenantCode(code);
+    // 参考语言/时区切换：整页 reload，确保菜单、路由、权限全部重建
+    window.location.reload();
+  };
+
+  return (
+    <HeaderDropdown
+      position="br"
+      triggerProps={{ popupAlign: { bottom: [0, 20] } }}
+      droplist={
+        <Menu className="tenant-dropdown-menu">
+          {allowedTenants.map((tenant) => {
+            const selected = tenant.code === currentTenantCode;
+            return (
+              <MenuItem
+                key={tenant.code}
+                onClick={() => onClickTenant(tenant.code)}
+              >
+                <span className={selected ? 'selected-label' : ''}>
+                  {tenant.name}
+                </span>
+              </MenuItem>
+            );
+          })}
+        </Menu>
+      }
+    >
+      <div className="flex items-center tenant-dropdown-trigger">
+        <span className="tenant-name">{currentTenantName}</span>
+        <IconFont
+          type="webcs-outline_down1"
+          className="tenant-dropdown-icon"
+          fontSize={12}
+        />
+      </div>
+    </HeaderDropdown>
+  );
+};
+
+export default TenantDropdown;

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

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

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

@@ -0,0 +1,48 @@
+@import '@mico-platform/theme/variables';
+
+@tenant-dropdown-width: 140px;
+
+.tenant-dropdown-trigger {
+  display: inline-flex;
+  justify-content: space-between;
+  width: @tenant-dropdown-width;
+  background-color: @color-fill-2;
+  border-radius: @border-radius-button;
+  height: 32px;
+  padding: 1px 10px;
+  color: @color-text-1;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.tenant-dropdown-trigger:hover {
+  background: @color-fill-3;
+}
+
+.tenant-dropdown-trigger .tenant-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tenant-dropdown-trigger.arco-dropdown-popup-visible .arco-icon-down {
+  transform: rotate(180deg);
+}
+
+.tenant-dropdown-menu.arco-dropdown-menu {
+  width: @tenant-dropdown-width;
+  max-height: 320px;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.tenant-dropdown-icon {
+  margin-left: 4px;
+  transition: transform 0.2s;
+}
+
+.tenant-dropdown-menu .selected-label {
+  color: @Brand1-6;
+}

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

@@ -171,6 +171,7 @@ export const STORAGE_KEYS = {
   GROUPS: 'groups',
   TIMEZONE: 'mico-cs-timezone',
   TIMEZONE_REGION: 'mico-cs-timezone-region',
+  CURRENT_TENANT: 'mico-current-tenant',
 } as const;
 
 /**

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

@@ -1,3 +1,4 @@
 export { useAuth } from './useAuth';
 export { useMenu } from './useMenu';
+export { useTenant } from './useTenant';
 export { useTheme } from './useTheme';

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

@@ -22,6 +22,8 @@ interface UseMenuStateReturn {
     isCollapsed: boolean,
     type: 'clickTrigger' | 'responsive',
   ) => void;
+  handleMouseEnter: () => void;
+  handleMouseLeave: () => void;
   setOpenKeys: (keys: string[]) => void;
 }
 
@@ -98,6 +100,20 @@ export const useMenuState = ({
     [triggerMode],
   );
 
+  // hover 模式下鼠标进入自动展开
+  const handleMouseEnter = useCallback(() => {
+    if (triggerMode === ETriggerMode.HOVER_TRIGGER) {
+      setCollapsed(false);
+    }
+  }, [triggerMode]);
+
+  // hover 模式下鼠标离开自动收起
+  const handleMouseLeave = useCallback(() => {
+    if (triggerMode === ETriggerMode.HOVER_TRIGGER) {
+      setCollapsed(true);
+    }
+  }, [triggerMode]);
+
   return {
     selectedKeys,
     openKeys,
@@ -105,6 +121,8 @@ export const useMenuState = ({
     triggerMode,
     handleClickMenuItem,
     handleCollapsed,
+    handleMouseEnter,
+    handleMouseLeave,
     setOpenKeys,
   };
 };

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

@@ -0,0 +1,41 @@
+import { ETenantModel, type ITenantItem } from '@/common/auth/type';
+import { useModel } from '@umijs/max';
+
+export interface IUseTenantResult {
+  /** 是否多租户模式 */
+  isMultiTenant: boolean;
+  /** 当前租户模式原始值（1 单租户，2 多租户） */
+  tenantModel: number;
+  /** 用户所属租户列表 */
+  tenants: ITenantItem[];
+}
+
+/**
+ * 租户模式 Hook
+ *
+ * 从 initialState.currentUser 读取 tenant_model / tenant 字段，
+ * 对外暴露语义化的 isMultiTenant 标志和 tenants 列表，供业务组件直接使用。
+ *
+ * @example
+ * const { isMultiTenant, tenants } = useTenant();
+ * if (isMultiTenant) {
+ *   // 渲染租户选择器
+ * }
+ */
+export function useTenant(): IUseTenantResult {
+  const { initialState } = useModel('@@initialState');
+  const currentUser = initialState?.currentUser;
+
+  const tenantModel = currentUser?.tenant_model ?? ETenantModel.Single;
+  const tenants = currentUser?.tenant ?? [];
+  const isMultiTenant =
+    currentUser?.isMultiTenant ?? tenantModel === ETenantModel.Multi;
+
+  return {
+    isMultiTenant,
+    tenantModel,
+    tenants,
+  };
+}
+
+export default useTenant;

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

@@ -1,4 +1,4 @@
-import { AvatarDropdown } from '@/components/RightContent';
+import { AvatarDropdown, TenantDropdown } from '@/components/RightContent';
 import { DEFAULT_NAME } from '@/constants';
 import { Layout, Space } from '@mico-platform/ui';
 import React from 'react';
@@ -28,6 +28,9 @@ const LayoutHeader: React.FC = () => {
             {theme === 'dark' ? <IconSunFill /> : <IconMoonFill />}
           </div> */}
 
+          {/* Tenant switcher (仅多租户模式可见) */}
+          <TenantDropdown />
+
           <span className="split-line" />
 
           {/* User info */}

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

@@ -140,19 +140,31 @@ const LayoutMenu: React.FC<LayoutMenuProps> = () => {
     collapsed,
     handleClickMenuItem,
     handleCollapsed,
+    handleMouseEnter,
+    handleMouseLeave,
     setOpenKeys,
   } = useMenuState({ menuItems });
 
   useEffect(() => {
-    document.documentElement.style.setProperty(
-      '--sider-width',
-      collapsed ? '48px' : '200px',
-    );
+    const layoutContent = document.querySelector('.layout-content');
+    if (layoutContent) {
+      (layoutContent as HTMLElement).style.setProperty(
+        '--sider-width',
+        collapsed ? '48px' : '200px',
+      );
+    }
+  }, [collapsed]);
 
+  useEffect(() => {
+    const sider = siderRef.current;
+    if (!sider) return;
+    sider.addEventListener('mouseenter', handleMouseEnter);
+    sider.addEventListener('mouseleave', handleMouseLeave);
     return () => {
-      document.documentElement.style.removeProperty('--sider-width');
+      sider.removeEventListener('mouseenter', handleMouseEnter);
+      sider.removeEventListener('mouseleave', handleMouseLeave);
     };
-  }, [collapsed]);
+  }, [handleMouseEnter, handleMouseLeave]);
 
   // 点击触发按钮图标
   const clickTriggerBtnIcon = collapsed

package/generators/micro-react/templates/apps/layout/src/locales/en-US.ts

@@ -38,6 +38,17 @@ export default {
   'cs_web_menu_permission_management': 'Permission Management',
   'cs_web_menu_group_management': 'Group Management',
 
+  // SSO auth failure modal
+  'sso.auth.failure.modal.title': 'Login Required',
+  'sso.auth.failure.modal.content':
+    'Auto login failed. Would you like to try logging in again?',
+  'sso.auth.failure.modal.ok': 'Re-login',
+  'sso.auth.failure.modal.cancel': 'Cancel',
+  sso_auth_failure_modal_title: 'Login Required',
+  sso_auth_failure_modal_content: 'Auto login failed. Would you like to try logging in again?',
+  sso_auth_failure_modal_ok: 'Re-login',
+  sso_auth_failure_modal_cancel: 'Cancel',
+
   // AvatarDropdown
   'avatar.language': 'Language',
   'avatar.language.zh_CN': 'Simplified Chinese',

package/generators/micro-react/templates/apps/layout/src/locales/zh-CN.ts

@@ -36,6 +36,16 @@ export default {
   'cs_web_menu_permission_management': '权限管理',
   'cs_web_menu_group_management': '小组管理',
 
+  // SSO 认证失败弹框
+  'sso.auth.failure.modal.title': '登录提示',
+  'sso.auth.failure.modal.content': '自动登录失败，是否重新尝试登录？',
+  'sso.auth.failure.modal.ok': '重新登录',
+  'sso.auth.failure.modal.cancel': '取消',
+  sso_auth_failure_modal_title: '登录提示',
+  sso_auth_failure_modal_content: '自动登录失败，是否重新尝试登录？',
+  sso_auth_failure_modal_ok: '重新登录',
+  sso_auth_failure_modal_cancel: '取消',
+
   // AvatarDropdown
   'avatar.language': '语言',
   'avatar.language.zh_CN': '简体中文',

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

@@ -5,7 +5,34 @@
   color: @color-text-1;
 }
 
+.title {
+  margin: 0 0 12px;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.hint {
+  margin: 0 0 8px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: @color-text-2;
+}
+
+.meta {
+  margin: 0;
+  font-size: 12px;
+  font-family: ui-monospace, monospace;
+  color: @color-text-3;
+}
+
 .demoCard {
   margin-top: 16px;
   max-width: 720px;
 }
+
+.tzDemoList {
+  width: 100%;
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+  line-height: 1.8;
+}