refactor(demos): add multi-language switch feature

package.json

@@ -101,7 +101,6 @@
     "*.{ts,tsx,js}": "eslint"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.9",
     "@nutui/icons-react": "^3.0.0-beta.2",
     "@nutui/icons-react-taro": "^3.0.0-beta.2",
     "@nutui/jdesign-icons-react-taro": "1.0.6-beta.2",
@@ -118,6 +117,10 @@
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/runtime": "^7.23.9",
+    "@babel/standalone": "^7.26.4",
+    "@babel/types": "^7.26.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@commitlint/cli": "^19.0.3",
     "@commitlint/config-conventional": "^19.0.3",

src/packages/backtop/demos/h5/demo1.tsx

@@ -1,14 +1,21 @@
 import React from 'react'
 import { BackTop, Cell } from '@nutui/nutui-react'
+import { withTranslation, propsType } from '@/translation/demo.translation'
 
-const Demo1 = () => {
+const Demo1 = ({ t }: propsType) => {
   return (
     <>
       {new Array(24).fill(0).map((_, index) => {
-        return <Cell key={index}>我是测试数据{index}</Cell>
+        return (
+          <Cell key={index}>
+            {t.testData}
+            {index}
+          </Cell>
+        )
       })}
       <BackTop target="target" />
     </>
   )
 }
-export default Demo1
+
+export default withTranslation(Demo1)

src/packages/backtop/demos/h5/demo2.tsx

@@ -1,14 +1,21 @@
 import React from 'react'
 import { BackTop, Cell } from '@nutui/nutui-react'
+import { withTranslation, propsType } from '@/translation/demo.translation'
 
-const Demo2 = () => {
+const Demo2 = ({ t }: propsType) => {
   return (
     <>
       {new Array(24).fill(0).map((_, index) => {
-        return <Cell key={index}>我是测试数据{index}</Cell>
+        return (
+          <Cell key={index}>
+            {t.testData}
+            {index}
+          </Cell>
+        )
       })}
       <BackTop target="target" threshold={200} />
     </>
   )
 }
-export default Demo2
+
+export default withTranslation(Demo2)

src/packages/backtop/demos/h5/demo3.tsx

@@ -1,18 +1,25 @@
 import React from 'react'
 import { Top } from '@nutui/icons-react'
 import { BackTop, Cell } from '@nutui/nutui-react'
+import { withTranslation, propsType } from '@/translation/demo.translation'
 
-const Demo3 = () => {
+const Demo3 = ({ t }: propsType) => {
   return (
     <>
       {new Array(24).fill(0).map((_, index) => {
-        return <Cell key={index}>我是测试数据{index}</Cell>
+        return (
+          <Cell key={index}>
+            {t.testData}
+            {index}
+          </Cell>
+        )
       })}
       <BackTop threshold={100} target="target">
         <Top width={12} height={12} />
-        <div style={{ fontSize: '12px' }}>顶部</div>
+        <div style={{ fontSize: '12px' }}>{t.top}</div>
       </BackTop>
     </>
   )
 }
-export default Demo3
+
+export default withTranslation(Demo3)

src/packages/backtop/demos/h5/demo4.tsx

@@ -1,14 +1,21 @@
 import React from 'react'
 import { BackTop, Cell } from '@nutui/nutui-react'
+import { withTranslation, propsType } from '@/translation/demo.translation'
 
-const Demo4 = () => {
+const Demo4 = ({ t }: propsType) => {
   return (
     <div id="target2" style={{ height: '800px', overflowY: 'auto' }}>
       {new Array(24).fill(0).map((_, index) => {
-        return <Cell key={index}>我是测试数据{index}</Cell>
+        return (
+          <Cell key={index}>
+            {t.testData}
+            {index}
+          </Cell>
+        )
       })}
       <BackTop target="target2" threshold={100} />
     </div>
   )
 }
-export default Demo4
+
+export default withTranslation(Demo4)

src/packages/backtop/demos/h5/demo5.tsx

@@ -1,14 +1,21 @@
 import React from 'react'
 import { BackTop, Cell } from '@nutui/nutui-react'
+import { withTranslation, propsType } from '@/translation/demo.translation'
 
-const Demo5 = () => {
+const Demo5 = ({ t }: propsType) => {
   const handleClick = () => {
     const ele = document.getElementsByClassName('backtop-button')[0]
   }
+
   return (
     <>
       {new Array(24).fill(0).map((_, index) => {
-        return <Cell key={index}>我是测试数据{index}</Cell>
+        return (
+          <Cell key={index}>
+            {t.testData}
+            {index}
+          </Cell>
+        )
       })}
       <BackTop
         onClick={() => {
@@ -20,4 +27,5 @@ const Demo5 = () => {
     </>
   )
 }
-export default Demo5
+
+export default withTranslation(Demo5)

src/packages/button/demos/h5/demo1.tsx

@@ -1,29 +1,30 @@
 import React from 'react'
 import { Button } from '@nutui/nutui-react'
+import { withTranslation, propsType } from '@/translation/demo.translation'
 
-const Demo1 = () => {
+const Demo1 = ({ t }: propsType) => {
   const marginStyle = { margin: 8 }
   return (
     <>
       <Button type="primary" style={marginStyle}>
-        Primary
+        {t.primary}
       </Button>
       <Button type="info" style={marginStyle}>
-        Info
+        {t.info}
       </Button>
       <Button type="default" style={marginStyle}>
-        Default
+        {t.default}
       </Button>
       <Button type="danger" style={marginStyle}>
-        Danger
+        {t.danger}
       </Button>
       <Button type="warning" style={marginStyle}>
-        Warning
+        {t.warning}
       </Button>
       <Button type="success" style={marginStyle}>
-        Success
+        {t.success}
       </Button>
     </>
   )
 }
-export default Demo1
+export default withTranslation(Demo1)

src/packages/button/demos/h5/demo2.tsx

@@ -1,23 +1,25 @@
 import React from 'react'
 import { Button } from '@nutui/nutui-react'
+import { withTranslation, propsType } from '@/translation/demo.translation'
 
-const Demo2 = () => {
+const Demo2 = ({ t }: propsType) => {
   const marginStyle = { margin: 8 }
   return (
     <>
       <Button type="primary" fill="solid" style={marginStyle}>
-        Solid
+        {t.solid}
       </Button>
       <Button type="primary" fill="outline" style={marginStyle}>
-        Outline
+        {t.outline}
       </Button>
       <Button type="primary" fill="dashed" style={marginStyle}>
-        Dashed
+        {t.dashed}
       </Button>
       <Button fill="none" style={marginStyle}>
-        None
+        {t.none}
       </Button>
     </>
   )
 }
-export default Demo2
+
+export default withTranslation(Demo2)

src/packages/button/demos/h5/demo3.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import { Star, Plus } from '@nutui/icons-react'
 import { Button } from '@nutui/nutui-react'
+import { withTranslation, propsType } from '@/translation/demo.translation'
 
-const Demo3 = () => {
+const Demo3 = ({ t }: propsType) => {
   const marginStyle = { margin: 8 }
   return (
     <>
@@ -12,7 +13,7 @@ const Demo3 = () => {
         rightIcon={<Star />}
         style={marginStyle}
       >
-        Button
+        {t.button}
       </Button>
       <Button
         type="primary"
@@ -21,7 +22,7 @@ const Demo3 = () => {
         rightIcon={<Star />}
         style={marginStyle}
       >
-        Button
+        {t.button}
       </Button>
       <Button
         type="primary"
@@ -30,7 +31,7 @@ const Demo3 = () => {
         rightIcon={<Star />}
         style={marginStyle}
       >
-        Button
+        {t.button}
       </Button>
       <Button
         icon={<Star />}
@@ -42,7 +43,7 @@ const Demo3 = () => {
           color: `var(--nutui-color-primary)`,
         }}
       >
-        Button
+        {t.button}
       </Button>
       <Button
         type="default"
@@ -55,7 +56,7 @@ const Demo3 = () => {
           color: `var(--nutui-gray-7)`,
         }}
       >
-        Button
+        {t.button}
       </Button>
       <Button
         type="default"
@@ -68,43 +69,39 @@ const Demo3 = () => {
           color: `var(--nutui-gray-7)`,
         }}
       >
-        Button
+        {t.button}
       </Button>
       <Button
         type="default"
         icon={<Star />}
         rightIcon={<Star />}
         style={marginStyle}
       >
-        Button
+        {t.button}
       </Button>
       <Button
         shape="square"
         fill="outline"
         type="primary"
         icon={<Plus />}
         style={marginStyle}
-      />
-      <Button
-        fill="outline"
-        type="primary"
-        icon={<Plus />}
-        style={marginStyle}
-      />
-      <Button
-        type="primary"
-        fill="dashed"
-        icon={<Plus />}
-        style={marginStyle}
-      />
+      >
+        {t.button}
+      </Button>
+      <Button fill="outline" type="primary" icon={<Plus />} style={marginStyle}>
+        {t.button}
+      </Button>
+      <Button type="primary" fill="dashed" icon={<Plus />} style={marginStyle}>
+        {t.button}
+      </Button>
       <Button
         type="primary"
         size="large"
         icon={<Star />}
         rightIcon={<Star />}
         style={marginStyle}
       >
-        Button
+        {t.button}
       </Button>
       <Button
         type="primary"
@@ -113,9 +110,10 @@ const Demo3 = () => {
         rightIcon={<Star />}
         style={marginStyle}
       >
-        Button
+        {t.button}
       </Button>
     </>
   )
 }
-export default Demo3
+
+export default withTranslation(Demo3)