Explorar el Código

feat(dashboard-v6): 翻译模式新增排版方向设置,修正阅读模式方向反转

visuddhinanda hace 2 semanas
padre
commit
8fb6616b23

+ 13 - 3
dashboard-v6/src/components/sentence/SentContent.tsx

@@ -88,9 +88,19 @@ const SentContentWidget = ({
     if (containerWidth > 0 && containerWidth < 550) return "column";
     if (containerWidth > 0 && containerWidth < 550) return "column";
     if (containerWidth === 0) return layout; // SSR / first render fallback
     if (containerWidth === 0) return layout; // SSR / first render fallback
 
 
-    const userDirection = GetUserSetting("setting.layout.direction", settings);
-    if (typeof userDirection === "string") {
-      return userDirection as TDirection;
+    // 翻译模式排版方向:优先使用翻译设置,auto(或未设置)时回退到阅读模式
+    const translateDirection = GetUserSetting(
+      "setting.translate.layout.direction",
+      settings
+    );
+    const userDirection =
+      translateDirection === "auto" ||
+      typeof translateDirection === "undefined"
+        ? GetUserSetting("setting.layout.direction", settings)
+        : translateDirection;
+
+    if (userDirection === "row" || userDirection === "column") {
+      return userDirection;
     }
     }
     return layout;
     return layout;
   }, [containerWidth, layout, settings]);
   }, [containerWidth, layout, settings]);

+ 1 - 1
dashboard-v6/src/components/sentence/SentRead.tsx

@@ -122,7 +122,7 @@ const SentReadFrame = ({
       <Flex vertical={layoutCommentary === "row"}>
       <Flex vertical={layoutCommentary === "row"}>
         <Flex
         <Flex
           gap="middle"
           gap="middle"
-          vertical={layoutDirection === "row"}
+          vertical={layoutDirection === "column"}
           style={{ flex: 5 }}
           style={{ flex: 5 }}
         >
         >
           {/* 原文 */}
           {/* 原文 */}

+ 3 - 0
dashboard-v6/src/components/setting/SettingEditor.tsx

@@ -33,6 +33,9 @@ const SettingEditor = () => {
           id: `buttons.translate`,
           id: `buttons.translate`,
         })}
         })}
       </Divider>
       </Divider>
+      <SettingItem
+        data={SettingFind("setting.translate.layout.direction", settings)}
+      />
 
 
       <Divider>
       <Divider>
         {intl.formatMessage({
         {intl.formatMessage({

+ 24 - 0
dashboard-v6/src/components/setting/default.ts

@@ -75,6 +75,30 @@ export const defaultSetting: ISetting[] = [
     ],
     ],
     widget: "radio-button",
     widget: "radio-button",
   },
   },
+  {
+    /**
+     * 翻译模式排版方向
+     */
+    key: "setting.translate.layout.direction",
+    label: "setting.translate.layout.direction.label",
+    description: "setting.translate.layout.direction.description",
+    defaultValue: "auto",
+    options: [
+      {
+        value: "auto",
+        label: "setting.translate.layout.direction.auto.label",
+      },
+      {
+        value: "column",
+        label: "setting.layout.direction.col.label",
+      },
+      {
+        value: "row",
+        label: "setting.layout.direction.row.label",
+      },
+    ],
+    widget: "select",
+  },
   {
   {
     /**
     /**
      * commentary排版方向
      * commentary排版方向

+ 1 - 1
dashboard-v6/src/components/tipitaka/components/ParagraphReadPara.tsx

@@ -33,7 +33,7 @@ const ParagraphReadPara = ({ data }: IWidget) => {
 
 
   return (
   return (
     <Flex vertical={layoutCommentary === "row"}>
     <Flex vertical={layoutCommentary === "row"}>
-      <Flex gap="middle" vertical={direction === "row"} style={{ flex: 5 }}>
+      <Flex gap="middle" vertical={direction === "column"} style={{ flex: 5 }}>
         {/**原文区 */}
         {/**原文区 */}
         <div className="sent_read" style={{ flex: 5, padding: 4 }}>
         <div className="sent_read" style={{ flex: 5, padding: 4 }}>
           {data?.map((item) => {
           {data?.map((item) => {

+ 1 - 1
dashboard-v6/src/components/tipitaka/components/ParagraphReadSent.tsx

@@ -29,7 +29,7 @@ const ParagraphReadSent = ({ data }: IWidget) => {
           <Flex vertical={layoutCommentary === "row"}>
           <Flex vertical={layoutCommentary === "row"}>
             <Flex
             <Flex
               gap="middle"
               gap="middle"
-              vertical={direction === "row"}
+              vertical={direction === "column"}
               style={{ flex: 5 }}
               style={{ flex: 5 }}
             >
             >
               {/**原文区 */}
               {/**原文区 */}

+ 4 - 0
dashboard-v6/src/locales/en-US/setting/index.ts

@@ -5,6 +5,10 @@ const items = {
   "setting.layout.direction.description": "横向或者纵向排版",
   "setting.layout.direction.description": "横向或者纵向排版",
   "setting.layout.direction.col.label": "colum",
   "setting.layout.direction.col.label": "colum",
   "setting.layout.direction.row.label": "row",
   "setting.layout.direction.row.label": "row",
+  "setting.translate.layout.direction.label": "direction",
+  "setting.translate.layout.direction.description":
+    "Original & translation layout in translation mode (auto follows reading mode)",
+  "setting.translate.layout.direction.auto.label": "auto",
   "setting.layout.paragraph.label": "对照方式",
   "setting.layout.paragraph.label": "对照方式",
   "setting.layout.paragraph.description": "逐段或逐句对照(仅阅读模式)",
   "setting.layout.paragraph.description": "逐段或逐句对照(仅阅读模式)",
   "setting.layout.paragraph.paragraph.label": "逐段",
   "setting.layout.paragraph.paragraph.label": "逐段",

+ 4 - 0
dashboard-v6/src/locales/zh-Hans/setting/index.ts

@@ -5,6 +5,10 @@ const items = {
   "setting.layout.direction.description": "横向或者纵向排版",
   "setting.layout.direction.description": "横向或者纵向排版",
   "setting.layout.direction.col.label": "纵向排版",
   "setting.layout.direction.col.label": "纵向排版",
   "setting.layout.direction.row.label": "横向排版",
   "setting.layout.direction.row.label": "横向排版",
+  "setting.translate.layout.direction.label": "排版方向",
+  "setting.translate.layout.direction.description":
+    "翻译模式下原文与译文的排版方向(自动时与阅读模式一致)",
+  "setting.translate.layout.direction.auto.label": "自动",
   "setting.layout.paragraph.label": "对照方式",
   "setting.layout.paragraph.label": "对照方式",
   "setting.layout.paragraph.description": "逐段或逐句对照(仅阅读模式)",
   "setting.layout.paragraph.description": "逐段或逐句对照(仅阅读模式)",
   "setting.layout.paragraph.paragraph.label": "逐段",
   "setting.layout.paragraph.paragraph.label": "逐段",