@creekjs/web-components 1.0.4 → 1.0.6

package/src/creek-config-provider/CreekConfigContext.tsx

@@ -1,7 +1,11 @@
 import { createContext } from 'react';
 
 export type CreekConfigContextProps = {
-  iconFontCNs?: string[]
+  iconFontCNs?: string[];
+  /**
+   * 国际化语言包
+   */
+  locale?: Record<string, string>;
 };
 
 export const CreekConfigContext = createContext<CreekConfigContextProps>({});

package/src/creek-config-provider/CreekI18nProvider.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from 'react';
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+
+import { IntlContext, IntlProvider, getIntl, getLocale, setLocale, setLocaleMessages } from '@creekjs/i18n/react';
+
+import enUS from '../locales/en-US';
+import zhCN from '../locales/zh-CN';
+
+const DEFAULT_LOCALE = 'zh-CN';
+
+export interface CreekI18nProviderProps {
+  children?: ReactNode;
+  /**
+   * 语言标识
+   * @default 'zh-CN'
+   */
+  locale?: string;
+  /**
+   * 国际化语言包，透传给 react-intl
+   */
+  messages?: Record<string, string>;
+}
+
+const MESSAGES_MAP: Record<string, Record<string, string>> = {
+  [DEFAULT_LOCALE]: zhCN,
+  'en-US': enUS,
+};
+
+export const LocaleContext = createContext({
+  locale: getLocale() || DEFAULT_LOCALE,
+  changeLocale: (lang: string) => {},
+});
+
+export const useAppLocale = () => useContext(LocaleContext);
+
+export const CreekI18nProvider = (props: CreekI18nProviderProps) => {
+  const { children, locale, messages } = props;
+
+  // Try to get parent intl context
+  const parentIntl = useContext(IntlContext);
+
+  const [intl, setIntl] = useState(() => getIntl());
+
+  const changeLocale = useCallback((lang: string) => {
+    setLocale(lang, false);
+    setIntl(getIntl());
+  }, []);
+
+  // 1. 确定最终生效的 locale
+  // 优先级：当前组件内部的 state > props.locale > parentIntl.locale > 全局默认
+  const currentLocale = intl?.locale || locale || parentIntl?.locale || DEFAULT_LOCALE;
+
+  // 2. 提取父级上下文的安全配置 (避免将 IntlShape 的内部方法直接传给 IntlProvider)
+  const intlConfig = parentIntl || intl || {};
+  const safeConfig = {
+    formats: intlConfig.formats,
+    defaultLocale: intlConfig.defaultLocale,
+    defaultFormats: intlConfig.defaultFormats,
+    onError: intlConfig.onError,
+  };
+
+  // 3. 确定最终的 messages
+  // 避免使用 stale 的 parentIntl.messages
+  let baseMessages = {};
+  if (parentIntl && parentIntl.locale === currentLocale) {
+    baseMessages = parentIntl.messages;
+  } else {
+    baseMessages = getIntl()?.messages || {};
+  }
+
+  const finalMessages = {
+    ...baseMessages,
+    ...(MESSAGES_MAP[currentLocale] || zhCN),
+    ...(messages || {}),
+  };
+
+  // 4. 同步给全局 globalIntl，确保非 React 组件能够拿到
+  useEffect(() => {
+    setLocaleMessages(currentLocale, finalMessages);
+  }, [currentLocale, finalMessages]);
+
+  return (
+    <IntlProvider {...safeConfig} locale={currentLocale} messages={finalMessages}>
+      <LocaleContext.Provider value={{ locale: currentLocale, changeLocale }}>{children}</LocaleContext.Provider>
+    </IntlProvider>
+  );
+};

package/src/creek-config-provider/index.tsx

@@ -1,12 +1,61 @@
+import type { ConfigProviderProps } from 'antd';
+import { App, ConfigProvider } from 'antd';
+import enUS_antd from 'antd/locale/en_US';
+import zhCN_antd from 'antd/locale/zh_CN';
+import merge from 'lodash/merge';
+
+import { AppProvider } from '../creek-hooks';
+import { useLayoutSettingsStore } from '../creek-layout/useLayoutSettingsStore';
 import { CreekConfigContext, CreekConfigContextProps } from './CreekConfigContext';
+import { CreekI18nProvider, CreekI18nProviderProps, LocaleContext, useAppLocale } from './CreekI18nProvider';
+
+export type CreekConfigProviderProps = CreekConfigContextProps & Omit<ConfigProviderProps, 'locale'> & CreekI18nProviderProps;
+
+export { CreekI18nProvider, LocaleContext, useAppLocale };
+export type { CreekI18nProviderProps };
+
+const InnerConfigProvider = (props: Omit<CreekConfigProviderProps, 'locale' | 'messages'>) => {
+  const { children, theme, ...more } = props;
+  const { locale } = useAppLocale();
+  const settingsStore = useLayoutSettingsStore();
 
-export type CreekConfigProviderProps = CreekConfigContextProps & {
-  children?: React.ReactNode;
+  const activeColorPrimary = settingsStore.colorPrimary || theme?.token?.colorPrimary;
+
+  let finalTheme = merge(
+    {},
+    theme,
+    activeColorPrimary
+      ? {
+          token: {
+            colorPrimary: activeColorPrimary,
+            colorLink: activeColorPrimary,
+            colorLinkHover: activeColorPrimary,
+            colorLinkActive: activeColorPrimary,
+          },
+        }
+      : {}
+  );
+
+
+  return (
+    <ConfigProvider locale={locale === 'en-US' ? enUS_antd : zhCN_antd} theme={finalTheme} {...more}>
+      <CreekConfigContext.Provider value={more as any}>
+        <App>
+          <AppProvider>{children}</AppProvider>
+        </App>
+      </CreekConfigContext.Provider>
+    </ConfigProvider>
+  );
 };
 
 export const CreekConfigProvider = (props: CreekConfigProviderProps) => {
-  const { children, ...more } = props;
-  return <CreekConfigContext.Provider value={more}>{children}</CreekConfigContext.Provider>;
+  const { children, locale, messages, ...more } = props;
+
+  return (
+    <CreekI18nProvider locale={locale} messages={messages}>
+      <InnerConfigProvider {...more}>{children}</InnerConfigProvider>
+    </CreekI18nProvider>
+  );
 };
 
 CreekConfigProvider.CreekConfigContext = CreekConfigContext;

package/src/creek-keep-alive/index.tsx

@@ -1,11 +1,230 @@
-import { useEffect, useState } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { Dropdown, MenuProps, Tabs } from 'antd';
+import { isRegExp, isString, omit } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { useLocation, useNavigate, useOutlet } from 'react-router-dom';
 
-export const CreekKeepAlive = () => {
-  const [isMounted, setIsMounted] = useState(false);
+import { useT } from '@/utils/i18n';
 
+export interface CreekKeepAliveProps {
+  /**
+   * 不需要缓存的路径
+   */
+  exclude?: (string | RegExp)[];
+  /**
+   * 自定义Tab标题获取方法
+   */
+  getTabTitle?: (pathname: string) => React.ReactNode;
+  /**
+   * 默认首页路径
+   */
+  homePath?: string;
+  /**
+   * Tabs的样式
+   */
+  tabBarStyle?: React.CSSProperties;
+  /**
+   * 最大缓存数量，默认为 20
+   */
+  maxTabCount?: number;
+}
+
+interface TabItem {
+  key: string;
+  label: React.ReactNode;
+  closable?: boolean;
+}
+
+export const CreekKeepAlive: React.FC<CreekKeepAliveProps> = (props) => {
+  const { exclude = [], getTabTitle, homePath = '/', tabBarStyle, maxTabCount = 20 } = props;
+
+  const t = useT();
+  const outlet = useOutlet();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const [tabItems, setTabItems] = useState<TabItem[]>([]);
+  const [activeKey, setActiveKey] = useState<string>('');
+  const [cachedPages, setCachedPages] = useState<Record<string, React.ReactNode>>({});
+
+  // 判断是否不需要缓存
+  const isPathExcluded = (path: string) => {
+    return exclude.some((item) => {
+      if (isString(item)) {
+        return item === path;
+      }
+      if (isRegExp(item)) {
+        return item.test(path);
+      }
+      return false;
+    });
+  };
+
+  // 初始化或路由变化时更新
   useEffect(() => {
-    setIsMounted(true);
+    const currentPath = location.pathname;
+    setActiveKey(currentPath);
+
+    // 更新页面内容缓存
+    setCachedPages((prev) => {
+      if (prev[currentPath]) {
+        return prev;
+      }
+      return {
+        ...prev,
+        [currentPath]: outlet,
+      };
+    });
+
+    // 更新 Tab 列表
+    setTabItems((prev) => {
+      if (prev.find((i) => i.key === currentPath)) {
+        return prev;
+      }
+      const title = getTabTitle?.(currentPath) || currentPath;
+      const newItems = [...prev, { key: currentPath, label: title, closable: currentPath !== homePath }];
+
+      // 超过最大数量限制
+      if (newItems.length > maxTabCount) {
+        // 找到第一个可以关闭的 Tab（非首页、非当前页）
+        // 这里策略是移除最早加入的那个可关闭 Tab。prev[0] 是最早的。
+        // 但要注意不要移除当前页（currentPath），虽然 currentPath 是刚加进去的，但在极端情况下（比如 max=1）
+        // 简单策略：移除第一个 closable 且 key !== currentPath 的 item
+        const indexToRemove = newItems.findIndex((item) => item.closable && item.key !== currentPath);
+        if (indexToRemove !== -1) {
+          const itemToRemove = newItems[indexToRemove];
+          // 顺便移除缓存
+          setCachedPages((currentCached) => omit(currentCached, [itemToRemove.key]));
+          newItems.splice(indexToRemove, 1);
+        }
+      }
+      return newItems;
+    });
+  }, [location.pathname, outlet, getTabTitle, homePath, maxTabCount]);
+
+  // 清理不需要缓存的页面
+  useEffect(() => {
+    // 监听路由离开
+    // 这里比较 tricky，因为 useEffect 拿到的 activeKey 已经是新的了
+    // 我们需要知道"上一个"路径
+    // 简化处理：每次 render 时，检查 pages 里哪些是不需要缓存且不处于 active 状态的，将其移除？
+    // 但如果在 setState 里做会导致死循环。
+    // 另一种策略：不缓存 = 离开时销毁。
+    // 我们可以在 pages 渲染时控制。
   }, []);
 
-  return <div>KeepAlive</div>;
-};
+  const closeTab = useMemoizedFn((targetKey: string) => {
+    const targetIndex = tabItems.findIndex((item) => item.key === targetKey);
+    const newTabItems = tabItems.filter((item) => item.key !== targetKey);
+
+    // 移除缓存
+    setCachedPages((prev) => omit(prev, [targetKey]));
+    setTabItems(newTabItems);
+
+    // 如果关闭的是当前页，跳转到临近页
+    if (targetKey === activeKey) {
+      if (newTabItems.length > 0) {
+        // 尝试跳到右边，没有则左边
+        const nextIndex = targetIndex >= newTabItems.length ? newTabItems.length - 1 : targetIndex;
+        const nextKey = newTabItems[nextIndex].key;
+        navigate(nextKey);
+      } else {
+        navigate(homePath);
+      }
+    }
+  });
+
+  const closeOtherTabs = useMemoizedFn((currentKey: string) => {
+    const newTabItems = tabItems.filter((item) => item.key === currentKey || item.key === homePath);
+    setTabItems(newTabItems);
+
+    const keepKeys = newTabItems.map((i) => i.key);
+    setCachedPages((prev) => {
+      const newCachedPages: Record<string, React.ReactNode> = {};
+      keepKeys.forEach((k) => {
+        if (prev[k]) newCachedPages[k] = prev[k];
+      });
+      return newCachedPages;
+    });
+
+    if (activeKey !== currentKey) {
+      navigate(currentKey);
+    }
+  });
+
+  const closeRightTabs = useMemoizedFn((currentKey: string) => {
+    const currentIndex = tabItems.findIndex((i) => i.key === currentKey);
+    const rightItems = tabItems.slice(currentIndex + 1);
+    const rightKeys = rightItems.map((i) => i.key);
+
+    const newTabItems = tabItems.filter((i) => !rightKeys.includes(i.key));
+    setTabItems(newTabItems);
+
+    setCachedPages((prev) => omit(prev, rightKeys));
+
+    if (rightKeys.includes(activeKey)) {
+      navigate(currentKey);
+    }
+  });
+
+  const handleTabEdit = (targetKey: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => {
+    if (action === 'remove' && isString(targetKey)) {
+      closeTab(targetKey);
+    }
+  };
+
+  const handleTabClick = (key: string) => {
+    navigate(key);
+  };
+
+  const renderTabLabel = (item: TabItem) => {
+    const menuItems: MenuProps['items'] = [
+      {
+        key: 'close',
+        label: t('creek-keep-alive.index.guanBiDangQian', '关闭当前'),
+        disabled: item.key === homePath,
+        onClick: () => closeTab(item.key),
+      },
+      {
+        key: 'closeOthers',
+        label: t('creek-keep-alive.index.guanBiQiTa', '关闭其他'),
+        onClick: () => closeOtherTabs(item.key),
+      },
+      {
+        key: 'closeRight',
+        label: t('creek-keep-alive.index.guanBiYouCe', '关闭右侧'),
+        onClick: () => closeRightTabs(item.key),
+      },
+    ];
+
+    return (
+      <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>
+        <span>{item.label}</span>
+      </Dropdown>
+    );
+  };
+
+  return (
+    <div className="creek-keep-alive">
+      <Tabs
+        activeKey={activeKey}
+        type="editable-card"
+        hideAdd
+        onChange={handleTabClick}
+        onEdit={handleTabEdit}
+        tabBarStyle={{ margin: 0, ...tabBarStyle }}
+        items={tabItems.map((item) => ({
+          ...item,
+          label: renderTabLabel(item),
+          children: (
+            <div key={item.key} style={{ height: '100%', display: activeKey === item.key ? 'block' : 'none' }}>
+              {/* 如果是不缓存的页面，且不是当前页，则不渲染(销毁) */}
+              {/* 如果是缓存页面，或者是当前页，则渲染 */}
+              {!isPathExcluded(item.key) || activeKey === item.key ? cachedPages[item.key] : null}
+            </div>
+          ),
+        }))}
+      />
+    </div>
+  );
+};

package/src/creek-layout/{HeaderContent → ActionRender}/FullScreen.tsx

@@ -1,7 +1,10 @@
-import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
-import { useFullscreen, useMemoizedFn } from "ahooks";
-import { Tooltip } from "antd";
-import { create } from "zustand";
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { useFullscreen, useMemoizedFn } from 'ahooks';
+import { Tooltip } from 'antd';
+
+import { create } from 'zustand';
+
+import { useT } from '@/utils/i18n';
 
 export type FullScreenStore = {
   isFullScreen: boolean;
@@ -21,6 +24,7 @@ export const useFullScreenStore = create<FullScreenStore>((set, get) => {
 });
 
 export const FullScreen = () => {
+  const t = useT();
   const [, { toggleFullscreen }] = useFullscreen(document.body);
 
   const { isFullScreen, changeFullScreen } = useFullScreenStore.getState();
@@ -33,11 +37,11 @@ export const FullScreen = () => {
   return (
     <>
       {isFullScreen ? (
-        <Tooltip title="退出全屏" placement="top">
+        <Tooltip title={t('creek-layout.ActionRender.FullScreen.tuiChuQuanPing', '退出全屏')} placement="top">
           <FullscreenExitOutlined onClick={handleFullScreen} />
         </Tooltip>
       ) : (
-        <Tooltip title="全屏" placement="top">
+        <Tooltip title={t('creek-layout.ActionRender.FullScreen.quanPing', '全屏')} placement="top">
           <FullscreenOutlined onClick={handleFullScreen} />
         </Tooltip>
       )}

package/src/creek-layout/ActionRender/LayoutSettings.tsx

@@ -0,0 +1,67 @@
+import { SettingOutlined } from '@ant-design/icons';
+import { ColorPicker, Form, Switch, Tooltip } from 'antd';
+
+import { useT } from '@creekjs/i18n/react';
+
+import { useApp } from '../../creek-hooks';
+import { useLayoutSettingsStore } from '../useLayoutSettingsStore';
+
+const SettingsForm = ({ defaultShowFullScreen, defaultShowLocaleButton, defaultKeepAlive }: { defaultShowFullScreen?: boolean; defaultShowLocaleButton?: boolean; defaultKeepAlive?: boolean }) => {
+  const t = useT();
+  const { colorPrimary, showFullScreen, showLocaleButton, keepAlive, setSettings } = useLayoutSettingsStore();
+
+  const currentShowFullScreen = showFullScreen ?? defaultShowFullScreen ?? false;
+  const currentShowLocaleButton = showLocaleButton ?? defaultShowLocaleButton ?? true;
+  const currentKeepAlive = keepAlive ?? defaultKeepAlive ?? true;
+
+  return (
+    <Form layout="vertical">
+      <Form.Item label={t('creek-layout.ActionRender.LayoutSettings.themeColor', '主题色')}>
+        <ColorPicker
+          value={colorPrimary}
+          onChange={(color, hex) => {
+            setSettings({ colorPrimary: hex || undefined });
+          }}
+          allowClear
+        />
+      </Form.Item>
+      <Form.Item label={t('creek-layout.ActionRender.LayoutSettings.showFullScreen', '展示全屏按钮')}>
+        <Switch checked={currentShowFullScreen} onChange={(checked) => setSettings({ showFullScreen: checked })} />
+      </Form.Item>
+      <Form.Item label={t('creek-layout.ActionRender.LayoutSettings.showLocaleButton', '展示国际化按钮')}>
+        <Switch checked={currentShowLocaleButton} onChange={(checked) => setSettings({ showLocaleButton: checked })} />
+      </Form.Item>
+      <Form.Item label={t('creek-layout.ActionRender.LayoutSettings.keepAlive', '开启页面缓存 (Keep Alive)')}>
+        <Switch checked={currentKeepAlive} onChange={(checked) => setSettings({ keepAlive: checked })} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export const LayoutSettings = ({
+  defaultShowFullScreen,
+  defaultShowLocaleButton,
+  defaultKeepAlive,
+}: {
+  defaultShowFullScreen?: boolean;
+  defaultShowLocaleButton?: boolean;
+  defaultKeepAlive?: boolean;
+}) => {
+  const t = useT();
+  const { drawer } = useApp();
+
+  const handleOpenSettings = () => {
+    drawer.open({
+      title: t('creek-layout.ActionRender.LayoutSettings.title', '系统设置'),
+      placement: 'right',
+
+      content: <SettingsForm defaultShowFullScreen={defaultShowFullScreen} defaultShowLocaleButton={defaultShowLocaleButton} defaultKeepAlive={defaultKeepAlive} />,
+    });
+  };
+
+  return (
+    <Tooltip title={t('creek-layout.ActionRender.LayoutSettings.title', '系统设置')} placement="top">
+      <SettingOutlined onClick={handleOpenSettings} />
+    </Tooltip>
+  );
+};

package/src/creek-layout/ActionRender/UserInfo.tsx

@@ -0,0 +1,43 @@
+import { Avatar, Dropdown, DropDownProps, Space } from "antd";
+import { createStyles } from "antd-style";
+
+const useStyles = createStyles(({ token}) => ({
+  avatarContainer: {
+    backgroundColor: token.colorPrimary,
+    width: 24,
+    height: 24,
+  },
+  userInfoDropdownOverlay: {
+    ".ant-dropdown-menu": {
+      padding: "8px 0",
+    },
+    ".ant-dropdown-menu-item": {
+      ".ant-dropdown-menu-item-icon": {
+        fontSize: "18px",
+        marginRight: "8px",
+      },
+    },
+  },
+}));
+
+export interface UserInfoProps {
+  name?: React.ReactNode;
+  avatar?: string;
+  menu?: DropDownProps['menu'];
+}
+
+export const UserInfo = (props: UserInfoProps) => {
+  const { styles } = useStyles();
+  const { name, avatar, menu } = props;
+
+  return (
+    <Dropdown arrow placement="bottom" overlayClassName={styles.userInfoDropdownOverlay} menu={menu}>
+      <Space size={4} align="center">
+        <Avatar className={styles.avatarContainer} src={avatar}>
+          {name}
+        </Avatar>
+        <span>{name}</span>
+      </Space>
+    </Dropdown>
+  );
+};

package/src/creek-layout/ActionRender/index.tsx

@@ -0,0 +1,4 @@
+export { FullScreen } from './FullScreen';
+export { UserInfo } from './UserInfo';
+export { LayoutSettings } from './LayoutSettings';
+