:bug: 正在函数中使用了intl

dashboard/src/components/auth/setting/SettingItem.tsx

@@ -1,3 +1,4 @@
+import { useIntl } from "react-intl";
 import { useEffect, useState } from "react";
 import { Switch, Typography, Radio, RadioChangeEvent, Select } from "antd";
 
@@ -17,9 +18,14 @@ interface IWidgetSettingItem {
   onChange?: Function;
 }
 const Widget = ({ data, onChange }: IWidgetSettingItem) => {
+  const intl = useIntl();
   const settings: ISettingItem[] | undefined = useAppSelector(settingInfo);
   const [value, setValue] = useState(data?.defaultValue);
-  const title = <Title level={5}>{data?.label}</Title>;
+  const title = (
+    <Title level={5}>
+      {data?.label ? intl.formatMessage({ id: data.label }) : ""}
+    </Title>
+  );
   console.log(data);
   useEffect(() => {
     const currSetting = settings?.find((element) => element.key === data?.key);
@@ -42,7 +48,9 @@ const Widget = ({ data, onChange }: IWidgetSettingItem) => {
                 <>
                   {title}
                   <div>
-                    <Text>{data.description}</Text>
+                    <Text>
+                      {intl.formatMessage({ id: "data.description" })}
+                    </Text>
                   </div>
                   <Radio.Group
                     value={value}
@@ -60,7 +68,7 @@ const Widget = ({ data, onChange }: IWidgetSettingItem) => {
                     {data.options.map((item, id) => {
                       return (
                         <Radio.Button key={id} value={item.value}>
-                          {item.label}
+                          {intl.formatMessage({ id: item.label })}
                         </Radio.Button>
                       );
                     })}
@@ -86,7 +94,12 @@ const Widget = ({ data, onChange }: IWidgetSettingItem) => {
                         })
                       );
                     }}
-                    options={data.options}
+                    options={data.options.map((item) => {
+                      return {
+                        value: item.value,
+                        label: intl.formatMessage({ id: item.label }),
+                      };
+                    })}
                   />
                 </div>
               );
@@ -110,7 +123,7 @@ const Widget = ({ data, onChange }: IWidgetSettingItem) => {
                 );
               }}
             />
-            <Text>{data.description}</Text>
+            <Text>{intl.formatMessage({ id: data.description })}</Text>
           </div>
         );
         break;
@@ -120,7 +133,7 @@ const Widget = ({ data, onChange }: IWidgetSettingItem) => {
 
     return (
       <div>
-        <Title level={5}>{data.label}</Title>
+        <Title level={5}>{intl.formatMessage({ id: data.label })}</Title>
         {content}
       </div>
     );

dashboard/src/components/auth/setting/default.ts

@@ -1,5 +1,3 @@
-import { useIntl } from "react-intl";
-
 import { ISettingItem } from "../../../reducers/setting";
 
 export interface ISettingItemOption {
@@ -36,156 +34,115 @@ export const GetUserSetting = (
 };
 
 export const SettingFind = (key: string): ISetting | undefined => {
-  return Settings().find((element) => element.key === key);
+  return defaultSetting.find((element) => element.key === key);
 };
-export const Settings = (): ISetting[] => {
-  const intl = useIntl();
-
-  const defaultSetting: ISetting[] = [
-    {
-      /**
-       * 是否显示巴利原文
-       */
-      key: "setting.display.original",
-      label: intl.formatMessage({ id: "setting.display.original.label" }),
-      description: intl.formatMessage({
-        id: "setting.display.original.description",
-      }),
-      defaultValue: true,
-    },
-    {
-      /**
-       * 排版方向
-       */
-      key: "setting.layout.direction",
-      label: intl.formatMessage({ id: "setting.layout.direction.label" }),
-      description: intl.formatMessage({
-        id: "setting.layout.direction.description",
-      }),
-      defaultValue: "column",
-      options: [
-        {
-          value: "column",
-          label: intl.formatMessage({
-            id: "setting.layout.direction.col.label",
-          }),
-        },
-        {
-          value: "row",
-          label: intl.formatMessage({
-            id: "setting.layout.direction.row.label",
-          }),
-        },
-      ],
-      widget: "radio-button",
-    },
-    {
-      /**
-       * 段落或者逐句对读
-       */
-      key: "setting.layout.paragraph",
-      label: intl.formatMessage({ id: "setting.layout.paragraph.label" }),
-      description: intl.formatMessage({
-        id: "setting.layout.paragraph.description",
-      }),
-      defaultValue: "sentence",
-      options: [
-        {
-          value: "sentence",
-          label: intl.formatMessage({
-            id: "setting.layout.paragraph.sentence.label",
-          }),
-        },
-        {
-          value: "paragraph",
-          label: intl.formatMessage({
-            id: "setting.layout.paragraph.paragraph.label",
-          }),
-        },
-      ],
-      widget: "radio-button",
-    },
-    {
-      /**
-       * 第一巴利脚本
-       */
-      key: "setting.pali.script1",
-      label: intl.formatMessage({ id: "setting.pali.script1.label" }),
-      description: intl.formatMessage({
-        id: "setting.pali.script1.description",
-      }),
-      defaultValue: "roman",
-      options: [
-        {
-          value: "roman",
-          label: intl.formatMessage({
-            id: "setting.pali.script.rome.label",
-          }),
-        },
-        {
-          value: "roman_to_my",
-          label: intl.formatMessage({
-            id: "setting.pali.script.my.label",
-          }),
-        },
-        {
-          value: "roman_to_si",
-          label: intl.formatMessage({
-            id: "setting.pali.script.si.label",
-          }),
-        },
-        {
-          value: "roman_to_thai",
-          label: intl.formatMessage({
-            id: "setting.pali.script.thai.label",
-          }),
-        },
-        {
-          value: "roman_to_taitham",
-          label: intl.formatMessage({
-            id: "setting.pali.script.tai.label",
-          }),
-        },
-      ],
-    },
-    {
-      /**
-       * 第二巴利脚本
-       */
-      key: "setting.pali.script2",
-      label: intl.formatMessage({ id: "setting.pali.script2.label" }),
-      description: intl.formatMessage({
-        id: "setting.pali.script2.description",
-      }),
-      defaultValue: "none",
-      options: [
-        {
-          value: "none",
-          label: intl.formatMessage({
-            id: "setting.pali.script.none.label",
-          }),
-        },
-        {
-          value: "roman",
-          label: intl.formatMessage({
-            id: "setting.pali.script.rome.label",
-          }),
-        },
-        {
-          value: "roman_to_my",
-          label: intl.formatMessage({
-            id: "setting.pali.script.my.label",
-          }),
-        },
-        {
-          value: "roman_to_si",
-          label: intl.formatMessage({
-            id: "setting.pali.script.si.label",
-          }),
-        },
-      ],
-    },
-  ];
 
-  return defaultSetting;
-};
+export const defaultSetting: ISetting[] = [
+  {
+    /**
+     * 是否显示巴利原文
+     */
+    key: "setting.display.original",
+    label: "setting.display.original.label",
+    description: "setting.display.original.description",
+    defaultValue: true,
+  },
+  {
+    /**
+     * 排版方向
+     */
+    key: "setting.layout.direction",
+    label: "setting.layout.direction.label",
+    description: "setting.layout.direction.description",
+    defaultValue: "column",
+    options: [
+      {
+        value: "column",
+        label: "setting.layout.direction.col.label",
+      },
+      {
+        value: "row",
+        label: "setting.layout.direction.row.label",
+      },
+    ],
+    widget: "radio-button",
+  },
+  {
+    /**
+     * 段落或者逐句对读
+     */
+    key: "setting.layout.paragraph",
+    label: "setting.layout.paragraph.label",
+    description: "setting.layout.paragraph.description",
+    defaultValue: "sentence",
+    options: [
+      {
+        value: "sentence",
+        label: "setting.layout.paragraph.sentence.label",
+      },
+      {
+        value: "paragraph",
+        label: "setting.layout.paragraph.paragraph.label",
+      },
+    ],
+    widget: "radio-button",
+  },
+  {
+    /**
+     * 第一巴利脚本
+     */
+    key: "setting.pali.script1",
+    label: "setting.pali.script1.label",
+    description: "setting.pali.script1.description",
+    defaultValue: "roman",
+    options: [
+      {
+        value: "roman",
+        label: "setting.pali.script.rome.label",
+      },
+      {
+        value: "roman_to_my",
+        label: "setting.pali.script.my.label",
+      },
+      {
+        value: "roman_to_si",
+        label: "setting.pali.script.si.label",
+      },
+      {
+        value: "roman_to_thai",
+        label: "setting.pali.script.thai.label",
+      },
+      {
+        value: "roman_to_taitham",
+        label: "setting.pali.script.tai.label",
+      },
+    ],
+  },
+  {
+    /**
+     * 第二巴利脚本
+     */
+    key: "setting.pali.script2",
+    label: "setting.pali.script2.label",
+    description: "setting.pali.script2.description",
+    defaultValue: "none",
+    options: [
+      {
+        value: "none",
+        label: "setting.pali.script.none.label",
+      },
+      {
+        value: "roman",
+        label: "setting.pali.script.rome.label",
+      },
+      {
+        value: "roman_to_my",
+        label: "setting.pali.script.my.label",
+      },
+      {
+        value: "roman_to_si",
+        label: "setting.pali.script.si.label",
+      },
+    ],
+  },
+];