wip: init i18n

ice.config.mts

@@ -1,4 +1,5 @@
 import { defineConfig } from '@ice/app';
+import i18n from '@ice/plugin-i18n';
 
 // The project config, see https://v3.ice.work/docs/guide/basic/config
 const minify = process.env.NODE_ENV === 'production' ? 'swc' : false;
@@ -12,4 +13,10 @@ export default defineConfig(() => ({
     onDemand: true,
     format: 'esm',
   },
+  plugins: [
+    i18n({
+      locales: ['en-US', 'zh-CN'],
+      defaultLocale: 'en-US',
+    }),
+  ],
 }));

src/fabritor/UI/panel/DesignPanel/index.tsx

@@ -5,7 +5,7 @@ import { SKETCH_ID } from '@/utils/constants';
 import { GroupOutlined, HeartTwoTone } from '@ant-design/icons';
 import ContextMenu from '@/fabritor/components/ContextMenu';
 import DEMOJSON from '@/assets/demo.json';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '@/i18n/utils';
 
 export default function Layer () {
   const { isReady, setReady, object: activeObject, setActiveObject, editor } = useContext(GloablStateContext);

src/fabritor/UI/panel/index.tsx

@@ -9,7 +9,7 @@ import DesignPanel from './DesignPanel';
 import { GloablStateContext } from '@/context';
 import AppPanel from './AppPanel';
 import { PANEL_WIDTH } from '@/config';
-import { translate } from '@/utils';
+import { Trans } from '@/i18n/utils';
 
 import './index.scss';
 
@@ -25,7 +25,7 @@ const iconStyle = { fontSize: 18, marginRight: 0 };
 
 const OBJECT_TYPES = [
   {
-    label: translate('panel.design'),
+    label: <Trans i18nKey="panel.design" />,
     value: 'design',
     icon: <AlertOutlined style={iconStyle} />
   },

src/global.css

@@ -11,6 +11,10 @@ html, body {
   padding: 8px 18px;
 }
 
+.fabritor-layout .ant-tabs-tab-btn {
+  width: 100%;
+}
+
 .ant-tabs-content-holder {
   overflow: auto !important;
 }

src/i18n/utils.ts

@@ -0,0 +1,7 @@
+import i18n from './index';
+
+export const translate = (key) => {
+  return i18n.t(key);
+}
+
+export { useTranslation, Trans } from 'react-i18next';