@fe-free/core 6.0.8 → 6.0.10

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @fe-free/core
 
+## 6.0.10
+
+### Patch Changes
+
+- feat: i18n
+  - @fe-free/icons@6.0.10
+  - @fe-free/tool@6.0.10
+
+## 6.0.9
+
+### Patch Changes
+
+- fix: tabs
+  - @fe-free/icons@6.0.9
+  - @fe-free/tool@6.0.9
+
 ## 6.0.8
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "6.0.8",
+  "version": "6.0.10",
   "description": "React 业务核心组件库：CRUD、ProForm 扩展、布局、路由、树、上传等（Antd + ProComponents）",
   "license": "ISC",
   "author": "",
@@ -43,8 +43,8 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/icons": "6.0.8",
-    "@fe-free/tool": "6.0.8"
+    "@fe-free/icons": "6.0.10",
+    "@fe-free/tool": "6.0.10"
   },
   "scripts": {
     "i18n-extract": "rm -rf ./src/locales/zh-CN && npx i18next-cli extract"

package/src/core_app/index.tsx

@@ -8,6 +8,7 @@ import { merge } from 'lodash-es';
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BrowserRouter as Router, useNavigate } from 'react-router-dom';
+
 import { EnumLanguage, I18nProvider } from '../i18n';
 import { routeTool } from '../route';
 import { customValueTypeMap } from '../value_type_map';
@@ -86,7 +87,7 @@ function CheckUpdate({ basename }: { basename: string }) {
     return () => {
       clearInterval(timer);
     };
-  }, [t]);
+  }, [t, basename, modal]);
 
   return null;
 }
@@ -139,7 +140,7 @@ function CoreAppBase(props: CoreAppProps) {
     if (window.location.pathname === '/' && basename !== '/' && basename !== '') {
       window.location.href = basename;
     }
-  }, []);
+  }, [basename]);
 
   const theme = useMemo(() => {
     return merge(themeConfig, configProviderProps?.theme);

package/src/crud_of_list/index.tsx

@@ -3,8 +3,10 @@ import { Input } from 'antd';
 import classNames from 'classnames';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+
 import type { CRUDProps } from '../crud';
 import { CRUD } from '../crud';
+
 import './style.scss';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
@@ -35,7 +37,7 @@ function useTips(props) {
         ),
       );
     }
-  }, [t]);
+  }, [t]); // eslint-disable-line react-hooks/exhaustive-deps
 }
 
 function SearchRender(props: {
@@ -91,7 +93,7 @@ function CRUDOfList(props: CRUDOfListProps) {
 
   const newParams = useMemo(() => {
     return {
-      ...(tableProps.params || {}),
+      ...tableProps.params,
       [searchDataIndex]: debouncedSearchValue,
     };
   }, [debouncedSearchValue, searchDataIndex, tableProps.params]);

package/src/editor_json/index.tsx

@@ -17,7 +17,7 @@ function EditorJSON({ value, onChange, readonly, mode, mainMenuBar }: EditorJSON
   const refOnChange = useRef(onChange);
 
   useEffect(() => {
-    refEditor.current?.update({
+    void refEditor.current?.update({
       text: value || '',
     });
   }, [value]);

package/src/i18n.tsx

@@ -29,40 +29,60 @@ const listLanguage = Object.keys(valueEnumLanguage).map((key) => {
   };
 });
 
-function initI18n({ enTranslation }) {
-  const cacheLng = localStorage.getItem('i18nextLng') || EnumLanguage.ZH_CN;
+let hasSetupPlugins = false;
+
+function getDefaultLng() {
+  if (typeof window === 'undefined') {
+    return EnumLanguage.ZH_CN;
+  }
+
+  const cacheLng = window.localStorage.getItem('i18nextLng') || EnumLanguage.ZH_CN;
   const lng = listLanguage.find((item) => item.value === cacheLng) ? cacheLng : EnumLanguage.ZH_CN;
 
-  console.log('initI18n', 'cacheLng', cacheLng, 'lng', lng);
-
-  i18n
-    .use(LanguageDetector)
-    .use(initReactI18next)
-    .use(ICU)
-    .init({
-      resources: {
-        [EnumLanguage.ZH_CN]: {
-          translation: {},
-        },
-        [EnumLanguage.EN_US]: {
-          translation: {
-            ...enTranslation,
-          },
-        },
+  return lng;
+}
+
+function initI18n({ enTranslation = {} }: { enTranslation?: Record<string, unknown> } = {}) {
+  if (i18n.isInitialized) {
+    i18n.addResourceBundle(EnumLanguage.EN_US, 'translation', enTranslation, true, true);
+    return;
+  }
+
+  if (!hasSetupPlugins) {
+    i18n.use(LanguageDetector).use(initReactI18next).use(ICU);
+    hasSetupPlugins = true;
+  }
+
+  const lng = getDefaultLng();
+  console.log('initI18n', lng);
+
+  void i18n.init({
+    resources: {
+      [EnumLanguage.ZH_CN]: {
+        translation: {},
       },
-      lng,
-      fallbackLng: EnumLanguage.ZH_CN,
-      interpolation: {
-        escapeValue: false,
+      [EnumLanguage.EN_US]: {
+        translation: enTranslation,
       },
-    });
+    },
+    lng,
+    fallbackLng: EnumLanguage.ZH_CN,
+    interpolation: {
+      escapeValue: false,
+    },
+  });
 }
 
 function I18nProvider({ children }: { children: React.ReactNode }) {
+  initI18n();
   return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
 }
 
-// @ts-ignore
-window._i18n = i18n;
+initI18n();
+
+if (typeof window !== 'undefined') {
+  // @ts-ignore
+  window._i18n = i18n;
+}
 
 export { EnumLanguage, I18nProvider, initI18n, listLanguage, valueEnumLanguage };

package/src/page_layout/index.tsx

@@ -1,3 +1,4 @@
+import type { TabsProps as AntdTabsProps } from 'antd';
 import classNames from 'classnames';
 import { Fragment, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
@@ -94,47 +95,55 @@ function PageLayout({
 }
 
 interface PageLayoutTabsProps extends PageLayoutProps {
-  tabsProps: Omit<TabsProps, 'items' | 'withSearchParams'> & {
-    items: {
-      key: string;
-      label: React.ReactNode;
-      children: React.ReactNode;
-    }[];
+  tabsProps: Omit<TabsProps, 'withSearchParams' | 'tabsProps'> & {
+    tabsProps: Omit<AntdTabsProps, 'items'> & {
+      items: {
+        key: string;
+        label: React.ReactNode;
+        children: React.ReactNode;
+      }[];
+    };
   };
 }
 
 function PageLayoutTabs(props: PageLayoutTabsProps) {
   const { tabsProps, ...rest } = props;
+  const { tabsProps: antdTabsProps, ...tabsPropsRest } = tabsProps;
+  const { items: antdItems, ...antdTabsPropsRest } = antdTabsProps;
 
   const [searchParams] = useSearchParams();
   const tab = searchParams.get(tabsProps.tabKey || 'tab') || undefined;
 
   const { children, newItems } = useMemo(() => {
-    const items = props.tabsProps.items;
+    const items = antdItems ?? [];
 
-    const item = items.find((item) => item.key === tab);
-    const children = item?.children || items[0]?.children;
+    const item = items.find((v) => v.key === tab);
+    const child = item?.children || items[0]?.children;
 
-    const newItems = items.map((item) => ({
-      ...item,
-      children: undefined,
-    }));
-
-    return { children, newItems };
-  }, [props.tabsProps.items, tab]);
+    return {
+      children: child,
+      newItems: items.map((v) => ({
+        ...v,
+        children: undefined,
+      })),
+    };
+  }, [antdItems, tab]);
 
   return (
     <PageLayout
       direction="vertical"
       start={
         <Tabs
-          tabBarExtraContent={{
-            left: <div className="w-4" />,
-            right: <div className="w-4" />,
+          tabsProps={{
+            tabBarExtraContent: {
+              left: <div className="w-4" />,
+              right: <div className="w-4" />,
+            },
+            ...antdTabsPropsRest,
+            items: newItems,
           }}
-          {...tabsProps}
-          items={newItems}
           withSearchParams
+          {...tabsPropsRest}
         />
       }
       {...rest}

package/src/page_layout/page_layout_tabs.stories.tsx

@@ -0,0 +1,17 @@
+import { PageLayoutTabs } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof PageLayoutTabs> = {
+  title: '@fe-free/core/PageLayoutTabs',
+  component: PageLayoutTabs,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof PageLayoutTabs>;
+
+export const Default: Story = {
+  render: () => {
+    return <div>依赖 react-router-dom 的 Route 组件，暂不提供 demo</div>;
+  },
+};

package/src/tabs/index.tsx

@@ -12,15 +12,15 @@ interface TabsProps {
   withSearchParams?: boolean;
   /** 设置 searchParams 的类型，默认 set */
   searchParamsType?: 'set' | 'change';
-  /** 默认 tab */
+  /** url 上字段的名字，默认 tab */
   tabKey?: string;
-
-  tabProps?: AntdTabsProps;
+  /** antd Tabs 的 props */
+  tabsProps?: AntdTabsProps;
 }
 
 function Tabs(props: TabsProps) {
-  const { withSearchParams, searchParamsType = 'set', tabKey = 'tab', tabProps } = props;
-  const { className, activeKey, onChange, ...rest } = tabProps || {};
+  const { withSearchParams, searchParamsType = 'set', tabKey = 'tab', tabsProps } = props;
+  const { className, activeKey, onChange, ...rest } = tabsProps || {};
 
   const [searchParams] = useSearchParams();
   const tab = searchParams.get(tabKey) || undefined;