Merge branch 'master' of http://192.168.0.115:3000/lanxin/Chengzhebei

public/knowlege/asset-manifest.json

@@ -1,20 +1,20 @@
 {
   "files": {
     "main.css": "./static/css/main.592aab85.css",
-    "main.js": "./static/js/main.f6c967f0.js",
+    "main.js": "./static/js/main.fa046c4b.js",
     "static/css/912.a53e8d10.chunk.css": "./static/css/912.a53e8d10.chunk.css",
-    "static/js/912.3d7cf3e1.chunk.js": "./static/js/912.3d7cf3e1.chunk.js",
+    "static/js/912.91ec5b14.chunk.js": "./static/js/912.91ec5b14.chunk.js",
     "static/js/258.d9c4f188.chunk.js": "./static/js/258.d9c4f188.chunk.js",
     "static/media/bg_jiaohu-min.jpg": "./static/media/bg_jiaohu-min.a9768d99e466f68ab764.jpg",
     "index.html": "./index.html",
     "main.592aab85.css.map": "./static/css/main.592aab85.css.map",
-    "main.f6c967f0.js.map": "./static/js/main.f6c967f0.js.map",
+    "main.fa046c4b.js.map": "./static/js/main.fa046c4b.js.map",
     "912.a53e8d10.chunk.css.map": "./static/css/912.a53e8d10.chunk.css.map",
-    "912.3d7cf3e1.chunk.js.map": "./static/js/912.3d7cf3e1.chunk.js.map",
+    "912.91ec5b14.chunk.js.map": "./static/js/912.91ec5b14.chunk.js.map",
     "258.d9c4f188.chunk.js.map": "./static/js/258.d9c4f188.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.592aab85.css",
-    "static/js/main.f6c967f0.js"
+    "static/js/main.fa046c4b.js"
   ]
 }

src/pages/A9knowlege/components/Panel/index.module.scss

@@ -16,33 +16,45 @@
   flex: 1;
   padding-right: 20px;
   overflow-y: auto;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: 16px;
+  row-gap: 10px;
+  grid-auto-rows: min-content;
+  align-items: start;
 }
 
 .panelLine {
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
-  margin-bottom: 10px;
+  display: contents;
 
+  i {
+    font-style: italic;
+  }
   p:first-child {
     position: relative;
-    white-space: nowrap;
     font-weight: bold;
+    max-width: 100px;
 
     span {
       position: relative;
       z-index: 1;
-    }
-    &::after {
-      content: '';
-      position: absolute;
-      left: 2px;
-      right: 2px;
-      bottom: 0;
-      height: 8px;
-      background: #af8764;
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 2px;
+        right: 2px;
+        bottom: 0;
+        height: 8px;
+        background: #af8764;
+        z-index: -1;
+      }
     }
   }
+  > div {
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
 }
 
 .panelClose {
@@ -52,4 +64,8 @@
   width: 61px;
   height: 25px;
   cursor: pointer;
+
+  &.panelCloseEn {
+    height: 23px;
+  }
 }

src/pages/A9knowlege/components/Panel/index.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
+import { useSelector } from 'react-redux'
+import classNames from 'classnames'
 import styles from './index.module.scss'
+import { RootState } from '@/store'
 
 type Props = {
   detail?: any
@@ -7,7 +10,9 @@ type Props = {
 }
 
 function Panel({ detail, onClose }: Props) {
+  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
   const title = detail?.label || '文物简介'
+  const isEn = myLangue === 'EN'
 
   return (
     <div className={styles.panel}>
@@ -21,15 +26,15 @@ function Panel({ detail, onClose }: Props) {
                 <span>{block.label}</span>
               </p>
             ) : null}
-            <p>{block.value}</p>
+            <div dangerouslySetInnerHTML={{ __html: block.value }} />
           </div>
         ))}
       </div>
 
       <img
         draggable={false}
-        className={styles.panelClose}
-        src={require('../../images/btn_close_red.png')}
+        className={classNames(styles.panelClose, isEn && styles.panelCloseEn)}
+        src={require(isEn ? '../../images/btn_close_en.png' : '../../images/btn_close_red.png')}
         alt=''
         onClick={() => onClose && onClose()}
       />

src/pages/A9knowlege/components/Panel2/index.module.scss

@@ -28,6 +28,10 @@
   font-size: 14px;
   margin-bottom: 15px;
   // white-space: pre-line;
+
+  p {
+    padding-bottom: 5px;
+  }
 }
 
 .panelImg {
@@ -48,4 +52,8 @@
   width: 61px;
   height: 25px;
   cursor: pointer;
+
+  &.panelCloseEn {
+    height: 23px;
+  }
 }

src/pages/A9knowlege/components/Panel2/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
+import { useSelector } from 'react-redux'
 import classNames from 'classnames'
 import styles from './index.module.scss'
+import { RootState } from '@/store'
 
 type Props = {
   detail?: any
@@ -8,6 +10,8 @@ type Props = {
 }
 
 function Panel({ detail, onClose }: Props) {
+  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
+  const isEn = myLangue === 'EN'
   const title = detail?.label || ''
   const content = detail?.content || ''
   const imgs = detail?.imgs || []
@@ -34,8 +38,8 @@ function Panel({ detail, onClose }: Props) {
 
       <img
         draggable={false}
-        className={styles.panelClose}
-        src={require('../../images/btn_close_red.png')}
+        className={classNames(styles.panelClose, isEn && styles.panelCloseEn)}
+        src={require(isEn ? '../../images/btn_close_en.png' : '../../images/btn_close_red.png')}
         alt=''
         onClick={() => onClose && onClose()}
       />

src/pages/A9knowlege/index.tsx

@@ -1,4 +1,5 @@
-import React, { useRef, useState, useEffect } from 'react'
+import React, { useRef, useState, useEffect, useCallback } from 'react'
+import { useSelector } from 'react-redux'
 import http from '@/utils/axios'
 import styles from './index.module.scss'
 import { echPageBackFu } from '@/components/MenuSider/data'
@@ -8,8 +9,10 @@ import Panel from './components/Panel'
 import Panel2 from './components/Panel2'
 import ModelPanel from './components/ModelPanel'
 import { DotLoading } from 'antd-mobile'
+import { RootState } from '@/store'
 
 function A9knowlege() {
+  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
   // 控制 sidebar 显示
   const [sidebarVisible, setSidebarVisible] = useState(true)
   const [detail, setDetail] = useState<any>(null)
@@ -34,6 +37,17 @@ function A9knowlege() {
     setSidebarVisible(!sidebarVisible)
   }
 
+  // 将 myLangue 传递给 iframe：URL 参数 + load 后及语言变化时 postMessage
+  const sendLangueToIframe = useCallback(() => {
+    iframeRef.current?.contentWindow?.postMessage({ action: 'setLangue', langue: myLangue }, '*')
+  }, [myLangue])
+  useEffect(() => {
+    sendLangueToIframe()
+  }, [sendLangueToIframe])
+  const onIframeLoad = useCallback(() => {
+    sendLangueToIframe()
+  }, [sendLangueToIframe])
+
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
       if (event.data && event.data.id) {
@@ -67,7 +81,10 @@ function A9knowlege() {
         return
       }
 
-      const { label, name, rtf } = response.data
+      const isEn = myLangue === 'EN'
+      const label = isEn ? response.data.enLabel : response.data.label
+      const name = isEn ? response.data.enName : response.data.name
+      const rtf = isEn ? response.data.enRtf : response.data.rtf
       let detailData: any = { name }
 
       // 存在 label 显示 Panel
@@ -123,8 +140,9 @@ function A9knowlege() {
       <iframe
         ref={iframeRef}
         className={styles.iframe}
-        src='knowlege/index.html'
+        src={`knowlege/index.html?lang=${myLangue}`}
         title='knowlege'
+        onLoad={onIframeLoad}
       />
 
       <div