数据更新

package.json

@@ -29,6 +29,7 @@
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",
     "sass": "^1.55.0",
+    "svg-pan-zoom": "^3.6.2",
     "typescript": "^4.8.4",
     "vconsole": "^3.15.1",
     "web-vitals": "^2.1.4"
@@ -64,4 +65,4 @@
     "react-app-rewired": "^2.2.1"
   },
   "homepage": "."
-}
+}

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -140,21 +140,21 @@ function Sinicize() {
 
           <div className={styles.Sinicize2}>
             <div className='scroll'>
-              {myData.sinicizeData.map((item, index) => (
+              {myData.sinicizeData.map((sItem, index) => (
                 <div className='yearItem' key={index}>
                   <div
                     className='year'
-                    style={{ backgroundImage: `url(${item.bgPath})` }}
+                    style={{ backgroundImage: `url(${sItem.bgPath})` }}
                     onClick={() => handleYearItemClick(index)}
                   >
-                    <div className='txt'>{item.time}</div>
+                    <div className='txt'>{sItem.time}</div>
                   </div>
                   <div className={`${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
                     <div className='left'>
                       <div className='desc'>
-                        {item.desc}
+                        {sItem.desc}
                       </div>
-                      {item.items.map((item, index) => (
+                      {sItem.items.map((item, index) => (
                         <div className='txtItem' key={index}>
                           <div className='title'>{item.title}</div>
                           <div className='txt'>{item.txt}</div>
@@ -162,11 +162,11 @@ function Sinicize() {
                       ))}
                     </div>
                     <div className='right'>
-                      <div className='title'>{myData.sinicizeData[index].imgItems[currentImgIndex].title}</div>
-                      <div className='pic'><img src={myData.sinicizeData[index].imgItems[currentImgIndex].src} alt="" /></div>
-                      <div className="txt">{myData.sinicizeData[index].imgItems[currentImgIndex].txt}</div>
+                      <div className='title'>{sItem.imgItems[currentImgIndex]?.title || ''}</div>
+                      <div className='pic'><img src={sItem.imgItems[currentImgIndex]?.src || ''} alt="" /></div>
+                      <div className="txt">{sItem.imgItems[currentImgIndex]?.txt || ''}</div>
                       <div className="iconContainner">
-                        {item.imgItems.map((i, index) => {
+                        {sItem.imgItems.map((i, index) => {
                           return (
                             <div className='icon' key={index} onClick={() => { setCurrentImgIndex(index) }}>
                               <img src={require(`@/assets/img/A6_sincize_detailIcon${currentImgIndex === index ? '_ac' : ''}.png`)} draggable='false' alt='' />

src/pages/A6ybwx/Genealogy/components/GraphSVG/index.module.scss

@@ -0,0 +1,9 @@
+.graphSvg {
+  width: 2500px;
+  height: 800px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #ccc;
+}

src/pages/A6ybwx/Genealogy/components/GraphSVG/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "./index.module.scss";
+// import { ReactComponent as GraphSvg } from '@/assets/img/Graph.svg'
+function GraphSvg() {
+
+  return (
+    <div className={styles.graphSvg}>
+      {/* <GraphSvg className={styles.graphSvg} /> */}
+    </div>
+  )
+}
+
+const MemoGraphSvg = React.memo(GraphSvg);
+
+export default MemoGraphSvg;

yarn.lock

@@ -10123,6 +10123,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svg-pan-zoom@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.npmmirror.com/svg-pan-zoom/-/svg-pan-zoom-3.6.2.tgz#be136506211b242627a234a9656f8128fcbbabed"
+  integrity sha512-JwnvRWfVKw/Xzfe6jriFyfey/lWJLq4bUh2jwoR5ChWQuQoOH8FEh1l/bEp46iHHKHEJWIyFJETbazraxNWECg==
+
 svg-parser@^2.0.2:
   version "2.0.4"
   resolved "https://registry.npmmirror.com/svg-parser/-/svg-parser-2.0.4.tgz"