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

src/pages/A0base/index.tsx

@@ -84,7 +84,7 @@ function A0base() {
         </div>
       </div>
 
-      <div className='home' onClick={e => goto(e, './')}>
+      <div className='home' onClick={e => goto(e, '#/')}>
         <img src={require('@/assets/img/home.png')} alt='' />
       </div>
 

src/pages/A6ybwx/A6_1_zxys/index.module.scss

@@ -2,6 +2,7 @@
   width: 100%;
   height: 100%;
   position: relative;
+  z-index: 1;
   background: url('../../../assets/img/A6_zaoxiang_bg.png') no-repeat center center;
   background-size: 100% 100%;
 

src/pages/A6ybwx/A6_2_zxzgh/index.module.scss

@@ -1,5 +1,8 @@
 .Sinicize {
   width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
   overflow-x: auto;
   transition: all 0.3s ease-in-out;
 
@@ -256,6 +259,7 @@
         height: 100%;
         display: flex;
         align-items: center;
+        background-color: #fff;
 
         .year {
           width: 100px;
@@ -266,14 +270,60 @@
           text-align: center;
           background-size: 100% 100%;
 
-          .txt {
-            writing-mode: vertical-rl;
-            text-align: left;
-            letter-spacing: 4px;
+          .yearContainner {
             width: 100%;
-            padding: 50px 40%;
             height: 100%;
-            background-image: linear-gradient(to bottom, #7d3807 0%, rgba(232, 205, 149, 0) 100%);
+            background-image: linear-gradient(
+              to bottom,
+              rgba(117, 56, 4, 1) 0%,
+              rgba(163, 117, 63, 0.2) 100%
+            );
+            .txt {
+              writing-mode: vertical-rl;
+              text-align: right;
+              letter-spacing: 4px;
+              width: 100%;
+              padding: 30px 40%;
+              height: 44%;
+            }
+            .front {
+              width: 100%;
+              height: 50%;
+              padding: 0 6px;
+              font-size: 16px;
+              line-height: 24px;
+              font-weight: 400;
+              overflow: auto;
+              mask-image: linear-gradient(
+                to bottom,
+                rgba(0, 0, 0, 1) 0%,
+                rgba(0, 0, 0, 1) 80%,
+                /* 保留顶部70%不透明 */ rgba(0, 0, 0, 0) 100% /* 底部30%完全透明 */
+              );
+              -webkit-mask-image: linear-gradient(
+                to bottom,
+                rgba(0, 0, 0, 1) 0%,
+                rgba(0, 0, 0, 1) 80%,
+                rgba(0, 0, 0, 0) 100%
+              );
+              &::-webkit-scrollbar {
+                width: 0;
+                height: 0;
+              }
+            }
+          }
+        }
+
+        .year-zongjie {
+          width: 150px;
+          .yearContainner {
+            .txt {
+              letter-spacing: 10px;
+              height: 30%;
+            }
+            .front {
+              height: 65%;
+            }
           }
         }
 

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -10,19 +10,30 @@ type InfoCardProps = {
   text?: string
   from: string
   inset?: string
+  index: number
 }
+type showLineType = {
+  index: number
+  isShow: boolean
+}[]
+
 function Sinicize() {
   const { myData } = useSelector((state: RootState) => state.A0Layout)
 
   const [currentTab, setCurrentTab] = useState(0)
   const [selectedTime, setSelectedTime] = useState(0)
   const [isShowTip, setIsShowTip] = useState(false)
-  const [currentImgIndex, setCurrentImgIndex] = useState(0)
-  const [isShowLine, setIsShowLine] = useState(true)
+  const [isShowLine, setIsShowLine] = useState<showLineType>(
+    myData.sinicizeData[0].imgItems.map((item, index) => ({
+      index,
+      isShow: true
+    }))
+  )
+  console.log(isShowLine, 'isShowLine')
 
   const originRef = useRef<HTMLDivElement>(null)
   const sinicize1Ref = useRef<HTMLDivElement>(null)
-  const ori_touchStartX = useRef<number>(0)
+  // const ori_touchStartX = useRef<number>(0)
 
   // width 线的长度 inset 整体的定位 name 文字 direct 方向 left/right
   const Label = ({
@@ -62,13 +73,17 @@ function Sinicize() {
       })
       return
     }
-    setIsShowLine(true)
-    setCurrentImgIndex(0)
     if (selectedTime === index) {
       setSelectedTime(-1)
       return
     }
     setSelectedTime(index)
+    setIsShowLine(
+      myData.sinicizeData[index].imgItems.map((item, index) => ({
+        index,
+        isShow: true
+      }))
+    )
 
     // 点击时将对应年份项滚动到最左边
     if (sinicize1Ref.current && originRef.current) {
@@ -102,10 +117,22 @@ function Sinicize() {
   //   ori_touchStartX.current = e.touches[0].clientY
   // }
 
-  const InfoCard = ({ time, location, text, from, inset }: InfoCardProps) => {
+  const InfoCard = ({ time, location, text, from, inset, index }: InfoCardProps) => {
     return (
       <div className={styles.InfoCard} style={{ inset: inset }}>
-        <div className="cardClose" onClick={() => setIsShowLine(true)}>×</div>
+        <div
+          className='cardClose'
+          onClick={() =>
+            setIsShowLine(
+              isShowLine.map(item => ({
+                ...item,
+                isShow: item.index === index ? true : item.isShow
+              }))
+            )
+          }
+        >
+          ×
+        </div>
         <div className='dotLeft'>
           <img src={require('@/assets/img/A6_arrow.png')} alt='' />
         </div>
@@ -156,27 +183,27 @@ function Sinicize() {
             )}
             {currentTab === 0 && (
               <>
-                <Label width={70} inset={'53px auto auto 360px'} name={'肉髻'} direct={'right'} />
+                <Label width={70} inset={'53px auto auto 340px'} name={'肉髻'} direct={'right'} />
                 <Label
-                  width={93}
-                  inset={'176px auto auto 339px'}
+                  width={70}
+                  inset={'176px auto auto 345px'}
                   name={'僧祇支'}
                   direct={'right'}
                 />
-                <Label width={68} inset={'300px auto auto 298px'} name={'衣摆'} direct={'right'} />
-                <Label width={40} inset={'205px auto auto 528px'} name={'佛衣'} direct={'left'} />
-                <Label width={40} inset={'70px auto auto 513px'} name={'头光'} direct={'left'} />
-                <Label width={36} inset={'122px auto auto 532px'} name={'身光'} direct={'left'} />
+                <Label width={42} inset={'300px auto auto 306px'} name={'衣摆'} direct={'right'} />
+                <Label width={40} inset={'205px auto auto 547px'} name={'佛衣'} direct={'left'} />
+                <Label width={40} inset={'70px auto auto 532px'} name={'头光'} direct={'left'} />
+                <Label width={36} inset={'122px auto auto 550px'} name={'身光'} direct={'left'} />
               </>
             )}
 
             {currentTab === 1 && (
               <>
-                <Label width={70} inset={'83px auto auto 360px'} name={'头光'} direct={'right'} />
-                <Label width={93} inset={'181px auto auto 318px'} name={'披帛'} direct={'right'} />
-                <Label width={68} inset={'272px auto auto 345px'} name={'天衣'} direct={'right'} />
-                <Label width={40} inset={'93px auto auto 506px'} name={'头冠'} direct={'left'} />
-                <Label width={36} inset={'129px auto auto 512px'} name={'宝缯'} direct={'left'} />
+                <Label width={51} inset={'83px auto auto 360px'} name={'头光'} direct={'right'} />
+                <Label width={51} inset={'181px auto auto 339px'} name={'披帛'} direct={'right'} />
+                <Label width={50} inset={'272px auto auto 345px'} name={'天衣'} direct={'right'} />
+                <Label width={40} inset={'93px auto auto 522px'} name={'头冠'} direct={'left'} />
+                <Label width={36} inset={'129px auto auto 530px'} name={'宝缯'} direct={'left'} />
               </>
             )}
 
@@ -207,74 +234,129 @@ function Sinicize() {
                     style={{ backgroundImage: `url(${sItem.bgPath})` }}
                     onClick={() => handleYearItemClick(index)}
                   >
-                    <div className='txt'>{sItem.time}</div>
+                    <div className="yearContainner">
+                      <div className='txt'>{sItem.time}</div>
+                      <div className='front'>{sItem.desc}</div>
+                    </div>
+
                   </div>
+
                   <div className={`${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
-                    <div className='left'>
-                      <div className='lTop'>{sItem.desc}</div>
-                      <div className='lContent'>
-                        <div className='lImgBox'>
-                          {/* <img
+                    {selectedTime === index && (
+                      <>
+                        <div className='left'>
+                          <div className='lTop'>{sItem.desc}</div>
+                          <div className='lContent'>
+                            <div className='lImgBox'>
+                              {/* <img
                             src={isShowLine ? sItem.imgItems[0].srcLine : sItem.imgItems[0].src}
                             alt=''
                           /> */}
-                          <div style={{
-                            backgroundImage: `url(${isShowLine ? sItem.imgItems[0].srcLine : sItem.imgItems[0].src})`
-                          }} className={`pic ${isShowLine ? 'picLine' : ''}`} />
-                          {!isShowLine ? (
-                            <InfoCard
-                              time={sItem.imgItems[0].time}
-                              location={sItem.imgItems[0].title}
-                              text={sItem.imgItems[0].txt}
-                              from={sItem.imgItems[0].title}
-                            />
-                          ) : (
-                            <div className='point' onClick={() => setIsShowLine(false)}>
-                              <div className="pointTime">{sItem.imgItems[0].time}</div>
-                              <div className='pointTitle'>{sItem.imgItems[0].title}</div>
+                              <div
+                                style={{
+                                  backgroundImage: `url(${isShowLine[0].isShow
+                                    ? sItem.imgItems[0].srcLine
+                                    : sItem.imgItems[0].src
+                                    })`
+                                }}
+                                className={`pic ${isShowLine[0].isShow ? 'picLine' : ''}`}
+                              />
+                              {!isShowLine[0].isShow ? (
+                                <InfoCard
+                                  time={sItem.imgItems[0].time}
+                                  location={sItem.imgItems[0].title}
+                                  text={sItem.imgItems[0].txt}
+                                  from={sItem.imgItems[0].title}
+                                  index={0}
+                                />
+                              ) : (
+                                <div
+                                  className='point'
+                                  onClick={() =>
+                                    setIsShowLine(
+                                      isShowLine.map(item => ({
+                                        ...item,
+                                        isShow: item.index === 0 ? false : item.isShow
+                                      }))
+                                    )
+                                  }
+                                >
+                                  <div className='pointTime'>{sItem.imgItems[0].time}</div>
+                                  <div className='pointTitle'>{sItem.imgItems[0].title}</div>
+                                </div>
+                              )}
                             </div>
-                          )}
-                        </div>
-                        <div className='lInfo'>
-                          {sItem.items.map((i, index) => (
-                            <div className='item' key={index}>
-                              <div className='lTitle'>{i.title}</div>
-                              <div className='lText'>{i.txt}</div>
+                            <div className='lInfo'>
+                              {sItem.items.map((i, index) => (
+                                <div className='item' key={index}>
+                                  <div className='lTitle'>{i.title}</div>
+                                  <div className='lText'>{i.txt}</div>
+                                </div>
+                              ))}
                             </div>
-                          ))}
+                          </div>
                         </div>
-                      </div>
-                    </div>
-                    <div className='right'>
-                      <div className='RItems'>
-                        {sItem.imgItems.filter((i, index) => index !== 0).map((i, index) => (
-                          <div className='item' key={index}>
-                            {/* <div className='pic'>
+                        <div className='right'>
+                          <div className='RItems'>
+                            {sItem.imgItems
+                              .filter((i, index) => index !== 0)
+                              .map((i, index2) => (
+                                <div className='item' key={index2}>
+                                  {/* <div className='pic'>
                               <img src={i.src} alt='' />
                             </div> */}
-                            <div style={{
-                              backgroundImage: `url(${isShowLine ? i.srcLine : i.src})`
-                            }} className={`pic ${isShowLine ? 'picLine' : ''}`} />
-                            {!isShowLine ? (
-                              <InfoCard
-                                time={i.time}
-                                location={i.title}
-                                text={i.txt}
-                                from={i.title}
-                              />
-                            ) : (
-                              <div className='point' onClick={() => setIsShowLine(false)}>
-                                <div className="pointTime">{i.time}</div>
-                                <div className='pointTitle'>{i.title}</div>
-                              </div>
-                            )}
+                                  <div
+                                    style={{
+                                      backgroundImage: `url(${isShowLine[index2 + 1].isShow ? i.srcLine : i.src
+                                        })`
+                                    }}
+                                    className={`pic ${isShowLine[index2 + 1].isShow ? 'picLine' : ''
+                                      }`}
+                                  />
+                                  {!isShowLine[index2 + 1].isShow ? (
+                                    <InfoCard
+                                      time={i.time}
+                                      location={i.title}
+                                      text={i.txt}
+                                      from={i.title}
+                                      index={index2}
+                                    />
+                                  ) : (
+                                    <div
+                                      className='point'
+                                      onClick={() =>
+                                        setIsShowLine(
+                                          isShowLine.map(item => ({
+                                            ...item,
+                                            isShow: item.index === index2 + 1 ? false : item.isShow
+                                          }))
+                                        )
+                                      }
+                                    >
+                                      <div className='pointTime'>{i.time}</div>
+                                      <div className='pointTitle'>{i.title}</div>
+                                    </div>
+                                  )}
+                                </div>
+                              ))}
                           </div>
-                        ))}
-                      </div>
-                    </div>
+                        </div>
+                      </>
+                    )}
                   </div>
                 </div>
               ))}
+              <div className='yearItem'>
+                <div
+                  className='year year-zongjie'
+                >
+                  <div className="yearContainner">
+                    <div className='txt'>{myData.sinicizeDataStatic.zongjie.title}</div>
+                    <div className='front'>{myData.sinicizeDataStatic.zongjie.txt}</div>
+                  </div>
+
+                </div>
+              </div>
             </div>
           </div>
         </div>

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
-import { NodeTurnRight, NodeRight, NodeBottom, RightLineDash, NodeActive, NodeTurnBottomRight } from '../Utils'
+import { NodeTurnRight, NodeRight, NodeBottom, RightLineDash, NodeActive, NodeTurnBottomRight, NodeRightDash } from '../Utils'
 import { useDrag } from '@use-gesture/react'
 import { isMobiileFu } from '@/utils/history'
 import { useSelector } from 'react-redux'
@@ -13,7 +13,7 @@ const MINIMAP_SCALE = 0.045
 function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) => void }) {
 
 
-  const {myData} = useSelector((state: RootState) => state.A0Layout)
+  const { myData } = useSelector((state: RootState) => state.A0Layout)
 
   // 新增拖拽相关状态
   const [isDragging, setIsDragging] = useState(false)
@@ -229,6 +229,9 @@ function Graph({ setCurrentNodeIndex }: { setCurrentNodeIndex: (index: number) =
         if (item.type === 'nodeTurnRight_n') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
         if (item.type === 'nodeTurnRight_a') res = <NodeTurnRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' nameClick={() => handleNameClick(index)} />
         if (item.type === 'nodeTurnBottomRight_a') res = <NodeTurnBottomRight key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' nameClick={() => handleNameClick(index)} />
+        if (item.type === 'nodeRight_dash_n') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='normal' nameClick={() => handleNameClick(index)} />
+        if (item.type === 'nodeRight_dash_a') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='active' nameClick={() => handleNameClick(index)} />
+        if (item.type === 'nodeRight_dash_f') res = <NodeRightDash key={index} data={item} style={{ transform: `translate(${item.position.x}px, ${item.position.y}px)` }} type='false' nameClick={() => handleNameClick(index)} />
         return res
       })}
     </>

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

@@ -125,29 +125,42 @@
       width: 97px;
       height: 22px;
       line-height: 22px;
-      padding-right: 20px;
+      padding-right: 5px;
       background: url('../../../../../assets/img/A6_gen_normal.png') no-repeat center center;
       background-size: 100% 100%;
       font-size: 13px;
       font-weight: 500;
       color: rgba(91, 71, 46, 1);
       text-align: center;
+      display: flex;
+      justify-content: center;
+      .span1 {
+        width: fit-content;
+        height: 100%;
+      }
+      .span2 {
+        line-height: 27px;
+        width: fit-content;
+        height: 100%;
+        font-size: 8px;
+      }
     }
-    .txt {
+    .txt,
+    .time {
       width: 100%;
       height: fit-content;
       max-height: 29px;
       line-height: 9px;
       font-size: 8px;
       color: rgba(255, 233, 182, 1);
-      padding-left: 10px;
+      padding-left: 3px;
     }
     .extra {
       width: 100%;
       height: fit-content;
       max-height: 10px;
       font-size: 8px;
-      padding-left: 10px;
+      padding-left: 3px;
       color: #fff;
     }
   }
@@ -173,6 +186,29 @@
   }
 }
 
+.nodeRightDash {
+  pointer-events: none;
+  width: 200px;
+  height: 60px;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  :global {
+    #rightLineDash {
+      transform: translate(3px, 8px);
+    }
+    #nodeNormal,
+    #nodeActive,
+    #nodeFalse {
+      .bg {
+        pointer-events: auto !important;
+      }
+    }
+  }
+}
+
 .nodeRight {
   pointer-events: none;
   width: 200px;
@@ -216,6 +252,13 @@
       .bg {
         pointer-events: auto !important;
       }
+      .extra {
+        width: 50%;
+        position: absolute;
+        top: 50%;
+        right: 50%;
+        transform: translate(60%, -393%);
+      }
     }
   }
 }

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

@@ -2,18 +2,19 @@ import React from 'react'
 import styles from './index.module.scss'
 
 interface dataType {
-  name: string;
-  type: string;
-  addTxt: string;
-  extra: string;
+  name: string
+  customN?: string
+  type: string
+  addTxt: { time: string; pos: string; backEnd: string }
+  extra: string
   position: {
-    x: number;
-    y: number;
-  };
-  text1: {
-    title: string;
-    content: string;
-  };
+    x: number
+    y: number
+  }
+  text: {
+    title: string
+    content: string
+  }[]
 }
 
 interface nodeProps {
@@ -72,8 +73,18 @@ const TurnBottomRightLine = () => {
 const NodeNormal = ({ className, nameClick, style, data }: nodeProps) => {
   return (
     <div className={`${styles.nodeNormal} ${className}`} style={style} id='nodeNormal'>
-      <div className='bg' onClick={(e) => { nameClick?.(); console.log(123) }}>{data.name}</div>
-      <div className='txt'>{data.text1.content}</div>
+      <div
+        className='bg'
+        onClick={e => {
+          nameClick?.()
+          console.log(123)
+        }}
+      >
+        <div className='span1'> {data.name}</div> <div className='span2'>{data.customN}</div>
+
+      </div>
+      <div className='time'>{data.addTxt.time}</div>
+      <div className='txt'>{data.addTxt.pos}</div>
       <div className='extra'>{data.extra}</div>
     </div>
   )
@@ -81,8 +92,18 @@ const NodeNormal = ({ className, nameClick, style, data }: nodeProps) => {
 const NodeActive = ({ className, nameClick, style, data }: nodeProps) => {
   return (
     <div className={`${styles.nodeActive} ${className}`} style={style} id='nodeActive'>
-      <div className='bg' onClick={(e) => { e.stopPropagation(); nameClick?.() }}>{data.name}</div>
-      <div className='txt'>{data.text1.content}</div>
+      <div
+        className='bg'
+        onClick={e => {
+          e.stopPropagation()
+          nameClick?.()
+        }}
+      >
+        <div className='span1'> {data.name}</div> <div className='span2'>{data.customN}</div>
+
+      </div>
+      <div className='time'>{data.addTxt.time}</div>
+      <div className='txt'>{data.addTxt.pos}</div>
       <div className='extra'>{data.extra}</div>
     </div>
   )
@@ -90,20 +111,23 @@ const NodeActive = ({ className, nameClick, style, data }: nodeProps) => {
 const NodeFalse = ({ className, nameClick, style, data }: nodeProps) => {
   return (
     <div className={`${styles.nodeFalse} ${className}`} style={style} id='nodeFalse'>
-      <div className='bg' onClick={(e) => { e.stopPropagation(); nameClick?.() }}>{data.name}</div>
-      <div className='txt'>{data.text1.content}</div>
+      <div
+        className='bg'
+        onClick={e => {
+          e.stopPropagation()
+          nameClick?.()
+        }}
+      >
+        <div className='span1'> {data.name}</div> <div className='span2'>{data.customN}</div>
+      </div>
+      <div className='time'>{data.addTxt.time}</div>
+      <div className='txt'>{data.addTxt.pos}</div>
       <div className='extra'>{data.extra}</div>
     </div>
   )
 }
 
-const NodeRight = ({
-  type,
-  className,
-  nameClick,
-  style,
-  data
-}: nodeProps) => {
+const NodeRight = ({ type, className, nameClick, style, data }: nodeProps) => {
   return (
     <div className={`${styles.nodeRight} ${className}`} id='nodeRight' style={style}>
       <RightLine />
@@ -114,13 +138,18 @@ const NodeRight = ({
   )
 }
 
-const NodeBottom = ({
-  type,
-  className,
-  nameClick,
-  style,
-  data
-}: nodeProps) => {
+const NodeRightDash = ({ type, className, nameClick, style, data }: nodeProps) => {
+  return (
+    <div className={`${styles.nodeRightDash} ${className}`} id='nodeRightDash' style={style}>
+      <RightLineDash />
+      {type === 'normal' && <NodeNormal nameClick={nameClick} data={data} />}
+      {type === 'active' && <NodeActive nameClick={nameClick} data={data} />}
+      {type === 'false' && <NodeFalse nameClick={nameClick} data={data} />}
+    </div>
+  )
+}
+
+const NodeBottom = ({ type, className, nameClick, style, data }: nodeProps) => {
   return (
     <div className={`${styles.nodeBottom} ${className}`} id='nodeBottom' style={style}>
       <BottomLine />
@@ -131,13 +160,7 @@ const NodeBottom = ({
   )
 }
 
-const NodeTurnRight = ({
-  type,
-  className,
-  nameClick,
-  style,
-  data
-}: nodeProps) => {
+const NodeTurnRight = ({ type, className, nameClick, style, data }: nodeProps) => {
   return (
     <div className={`${styles.nodeTurnRight} ${className}`} id='nodeTurnRight' style={style}>
       <TurnRightLine />
@@ -148,15 +171,13 @@ const NodeTurnRight = ({
   )
 }
 
-const NodeTurnBottomRight = ({
-  type,
-  className,
-  nameClick,
-  style,
-  data
-}: nodeProps) => {
+const NodeTurnBottomRight = ({ type, className, nameClick, style, data }: nodeProps) => {
   return (
-    <div className={`${styles.nodeTurnBottomRight} ${className}`} id='nodeTurnBottomRight' style={style}>
+    <div
+      className={`${styles.nodeTurnBottomRight} ${className}`}
+      id='nodeTurnBottomRight'
+      style={style}
+    >
       <TurnBottomRightLine />
       {type === 'normal' && <NodeNormal nameClick={nameClick} data={data} />}
       {type === 'active' && <NodeActive nameClick={nameClick} data={data} />}
@@ -166,7 +187,7 @@ const NodeTurnBottomRight = ({
 }
 
 export {
-
+  NodeRightDash,
   NodeTurnBottomRight,
   NodeTurnRight,
   NodeRight,
@@ -177,5 +198,5 @@ export {
   TurnRightLine,
   NodeNormal,
   NodeActive,
-  NodeFalse,
+  NodeFalse
 }

src/pages/A6ybwx/Genealogy/index.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import Graph from './components/Graph'
 import MemuSider from '@/components/MenuSider'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 // import SvgGraph from './components/GraphSVG'
 function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
   const [isShowIntro, setIsShowIntro] = useState(true)
@@ -10,14 +12,22 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
 
   const [gestureState1, setGestureState1] = useState('')
 
+  const { myData } = useSelector((state: RootState) => state.A0Layout)
+
   useEffect(() => {
-    if (!isShowIntro)
-      setTimeout(() => {
-        setGestureState1('state1')
+    let timer: NodeJS.Timeout
+    if (!isShowIntro) {
+      timer =
         setTimeout(() => {
-          setGestureState1('')
-        }, 2000)
-      }, 500)
+          setGestureState1('state1')
+          setTimeout(() => {
+            setGestureState1('')
+          }, 2000)
+        }, 500)
+    }
+    return () => {
+      clearTimeout(timer)
+    }
   }, [isShowIntro])
 
   return (
@@ -25,23 +35,25 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
       <div className='back' onClick={() => setGotoTab(0)}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
-      <div className='icon1'>
-        <img src={require('@/assets/img/A6_gen_icon1.png')} alt='' />
-      </div>
+
       <MemuSider activeTab={1} />
 
       <Graph setCurrentNodeIndex={setCurrentNodeIndex} />
       {/* <SvgGraph /> */}
 
-      {isShowGesture && (
-        <div
-          className={`${styles.gesture} ${gestureState1}`}
-          onClick={() => setIsShowGesture(false)}
-        >
-          <img src={require('@/assets/img/A6_gen_gesture.png')} draggable='false' alt='' />
-          点击查看更多
-        </div>
-      )}
+      <div className='icon1' onClick={() => setIsShowIntro(true)}>
+        <img src={require('@/assets/img/A6_gen_icon1.png')} alt='' />
+      </div>
+
+
+      <div
+        className={`${styles.gesture} ${gestureState1}`}
+        onClick={() => setIsShowGesture(false)}
+      >
+        <img src={require('@/assets/img/A6_gen_gesture.png')} draggable='false' alt='' />
+        点击查看更多
+      </div>
+      )
 
       {isShowIntro && (
         <div className={styles.intro}>
@@ -68,14 +80,16 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
 
       <div className={`${styles.nodeDetail} ${currentNodeIndex !== -1 ? 'showD' : 'hideD'}`}>
         <div className='sider'>
-          <div className='name'>程周</div>
+          <div className='name'>{myData?.genealogyData?.[currentNodeIndex]?.name}</div>
           <div className='info'>
-            <div className='infoitem'>
-              <div className='title'>任时与官职</div>
-              <div className='txt'>
-                上党太守，慕容超命为功曹，东燕建兴七年，除镇军将军、常山太守。
+            {myData?.genealogyData?.[currentNodeIndex]?.text?.map((item, index) => (
+              <div className='infoitem' key={index}>
+                <div className='title'>{item?.title}</div>
+                <div className='txt'>
+                  {item?.content}
+                </div>
               </div>
-            </div>
+            ))}
           </div>
           <div
             className='close'

src/types/declaration.d.ts

@@ -52,7 +52,7 @@ declare const F_Video: any
   // 未解之思
   weijie: string
   // 造像中国化
-  sinicizeDataStatic: { desc: string }
+  sinicizeDataStatic: { desc: string ,zongjie:{title:string,txt:string} }
   sinicizeData: {
     time: string
     bgPath: string
@@ -73,11 +73,11 @@ declare const F_Video: any
   // 家族谱系
   genealogyData: {
     name: string
+    customN?: string
     type: string
-    addTxt: string
+    addTxt: { time: string; pos: string; backEnd: string }
     extra: string
     position: { x: number; y: number }
-    text1: { title: string; content: string }
-    text2: { title: string; content: string }
+    text: { title: string; content: string }[]
   }[]
 }