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

public/myData/myData.js

@@ -3295,7 +3295,7 @@ const knowlegeData = [
                             desc: `司马金龙墓表图片来源：《山西大同石家寨北魏司马金龙墓》图7`
                           },
                           {
-                            path: ``,
+                            path: `./myData/knowlegeImg/bjzcyczb-bc-smjlmb-3.png`,
                             desc: `洛阳集成P1080`
                           }
                         ]

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

@@ -4,14 +4,13 @@
   gap: 10px;
   position: absolute;
   inset: 0;
-  padding: 28px 20px 20px 32px;
+  padding: 28px 0 20px 32px;
 }
 
 .chartWrap {
   flex: 1;
-  margin: -5px -2px;
+  padding-right: 20px;
   overflow-y: auto;
-  overflow-x: hidden;
 }
 
 .quickQuestions {
@@ -65,7 +64,8 @@
 }
 
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {
@@ -79,6 +79,7 @@
   align-items: center;
   justify-content: center;
   gap: 8px;
+  padding-right: 20px;
 
   &::before {
     content: '';
@@ -97,8 +98,7 @@
   border-radius: 50px;
   border: 1px solid #7c4b36;
 
-  &::after {
-    content: '';
+  .btn {
     position: absolute;
     top: 50%;
     right: 10px;
@@ -167,3 +167,27 @@
     background: url('../../images/frame_01_03.png') no-repeat center / contain;
   }
 }
+
+.chartRefresh {
+  position: absolute;
+  bottom: 80px;
+  right: 10px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 1px solid #7c4b36;
+  overflow: hidden;
+  background: url('../../images/refresh.png') no-repeat center / 20px 20px;
+  z-index: 9;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: rgba(124, 75, 54, 0.1);
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}

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

@@ -4,11 +4,10 @@ import styles from './index.module.scss'
 import { decrypt } from '@/utils/encrypt'
 
 const questions = [
-  '程哲碑最值得看的亮点是什么？',
-  '程哲是谁？',
-  '为什么说既是造像碑又是墓碑？',
-  '最初在哪里被发现的？',
-  '想了解北朝历史，这个展览能提供什么信息？'
+  '程哲碑有哪些特殊之处？',
+  '碑主程哲是一个怎样的人？',
+  '程哲碑的造像艺术有何特点？',
+  '什么是“碑禁政策”？'
 ]
 
 const FASTGPT_API_URL = 'https://cloud.fastgpt.cn/api'
@@ -150,6 +149,12 @@ function Chart() {
     }
   }
 
+  const handleReset = () => {
+    setMessages([])
+    setInputValue('')
+    setShowQuickQuestions(true)
+  }
+
   return (
     <div className={styles.chart}>
       <div className={styles.chartWrap}>
@@ -187,6 +192,8 @@ function Chart() {
         )}
       </div>
 
+      {messages.length > 0 && <div className={styles.chartRefresh} onClick={handleReset} />}
+
       <div className={styles.chartFooter}>
         <div className={styles.chartInput}>
           <input
@@ -198,6 +205,7 @@ function Chart() {
             onKeyPress={handleInputKeyPress}
             disabled={isLoading}
           />
+          <div className={styles.btn} onClick={handleSendMessage.bind(null, inputValue)} />
         </div>
       </div>
     </div>

src/pages/A9knowlege/index.module.scss

@@ -15,7 +15,7 @@
 .main {
   flex: 1;
 
-  >* {
+  > * {
     width: 100%;
     height: 100%;
     border: none;
@@ -26,5 +26,6 @@
   position: relative;
   width: 298px;
   height: 100%;
+  overflow: hidden;
   background: url('./images/img_pop_02-min.png') no-repeat center / cover;
-}
+}

src/pages/A9knowlege/index.tsx

@@ -76,6 +76,10 @@ function A9knowlege() {
           links: graph.links,
           categories: graph.categories,
           roam: true,
+          scaleLimit: {
+            min: 0.5,
+            max: 3
+          },
           label: { position: 'right' },
           emphasis: { focus: 'adjacency' },
           force: { repulsion: 200, edgeLength: [50, 120] },
@@ -85,9 +89,20 @@ function A9knowlege() {
     }
 
     myChart.setOption(option, true)
-    myChart.off('click')
+    myChart.on('mouseover', function (params: any) {
+      myChart.dispatchAction({
+        type: 'downplay'
+      })
+    })
     myChart.on('click', function (params: any) {
       if (!params || !params.data) return
+
+      // 高亮相关节点连线
+      myChart.dispatchAction({
+        type: 'highlight',
+        dataIndex: params.dataIndex
+      })
+
       const node = params.data
       if (node && node.raw && node.raw.type) {
         setDetail(node.raw)