From dd9d2e51f0e543f26bc4cdde67823656b9d861d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Thu, 5 Jun 2025 17:17:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(AI):=20=E6=B7=BB=E5=8A=A0=20PDF=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 pdf.vue 组件用于渲染 PDF 文件
- 在 TabBox组件中添加 PDF 预览对话框
- 优化 treasureBox 组件的列表展示
- 在 AI 页面中添加滚动到顶部按钮
- 修复 SCSS 变量定义方式
---
 src/views/AI/components/TabBox.vue      | 39 +++++++++++++++++---
 src/views/AI/components/pdf.vue         | 48 +++++++++++++++++++++++++
 src/views/AI/components/treasureBox.vue |  2 +-
 src/views/AI/index.vue                  | 24 +++++++++++--
 4 files changed, 106 insertions(+), 7 deletions(-)
 create mode 100644 src/views/AI/components/pdf.vue

diff --git a/src/views/AI/components/TabBox.vue b/src/views/AI/components/TabBox.vue
index 7a40f3a..7327a48 100644
--- a/src/views/AI/components/TabBox.vue
+++ b/src/views/AI/components/TabBox.vue
@@ -5,18 +5,33 @@
        {{item.title}}
      </div>
      <div class='box-container'>
-      <div v-for='list in item.list'>
+      <div v-for='list in item.list' :class='list.value?"link":"" ' @click='view(list)'>
         {{list.title}}
       </div>
      </div>
    </div>
+
+
+    <van-dialog  v-model="show" width='90%' :title='title' confirm-button-color='#2E5CA9'>
+      <div style='height: 70vh;overflow: scroll' >
+        <pdf :url='url' v-if='show'></pdf>
+      </div>
+    </van-dialog>
+
+
   </div>
 </template>
 <script>
+import {Dialog} from 'vant'
+import pdf from '@/views/AI/components/pdf.vue'
 export default {
   name: 'box',
   data() {
-    return {}
+    return {
+      url:'',
+      show:false,
+    title:''
+    }
   },
   props: {
     list: {
@@ -25,9 +40,20 @@ export default {
     }
   },
   watch: {},
-  components: {},
+  components: {
+    [Dialog.name]:Dialog,
+    pdf
+  },
   filters: {},
-  methods: {},
+  methods: {
+    view(item){
+      console.log(item)
+      if(!item.value) return
+      this.url = item.value
+      this.title = item.title
+      this.show = true
+    },
+  },
   created() {
   },
   mounted() {
@@ -40,6 +66,7 @@ export default {
 $primary-color: #2E5CA9; // 修复了 SCSS 变量的定义方式
 $primary-text-color: #F6AA21; // 修复了 SCSS 变量的定义方式
 $primary-trans-color: rgba(135, 162, 208, 0.5); // 使用rgba定义颜色，透明度为0.8
+
 .tab-box{
   border-radius: 5px;
   overflow: hidden;
@@ -61,6 +88,10 @@ $primary-trans-color: rgba(135, 162, 208, 0.5); // 使用rgba定义颜色，透
     //justify-content: space-between;
     flex-wrap: wrap;
     gap: 8px;
+    .link{
+      color:$primary-color
+    }
+
   }
 }
 </style>
diff --git a/src/views/AI/components/pdf.vue b/src/views/AI/components/pdf.vue
new file mode 100644
index 0000000..204345f
--- /dev/null
+++ b/src/views/AI/components/pdf.vue
@@ -0,0 +1,48 @@
+<template>
+  <div style='height: 100%;'>
+    <div v-if='!numPages'  style='height: 100%;display: flex;align-items: center;justify-content: center;'>
+      <van-loading color="#2E5CA9"  vertical>加载中...</van-loading>
+    </div>
+    <pdf-container :src="url" ref="pdfContainer" v-for="index in numPages" :key="index" :page="index" ></pdf-container>
+  </div>
+</template>
+<script>
+import pdfContainer from 'vue-pdf'
+export default {
+  name: 'pdfTemplate',
+  data() {
+    return {
+      // url: 'https://www.gjtool.cn/pdfh5/git.pdf',
+      // url: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
+      numPages: null
+    }
+  },
+  props: {
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    pdfContainer
+  },
+  created() {
+    this.getNumPages()
+  },
+  methods: {
+    getNumPages() {
+      let loadingTask = pdfContainer.createLoadingTask(this.url)
+      loadingTask.promise.then(pdf => {
+        this.numPages = pdf.numPages
+        this.url = loadingTask
+
+
+
+      })
+      // .catch(err => {
+      //   console.log('pdf加载失败', err)
+      // })
+    }
+  }
+}
+</script>
diff --git a/src/views/AI/components/treasureBox.vue b/src/views/AI/components/treasureBox.vue
index 6504dbd..34e2bf7 100644
--- a/src/views/AI/components/treasureBox.vue
+++ b/src/views/AI/components/treasureBox.vue
@@ -75,7 +75,7 @@ export default {
           list:this.item.detail.knowledge[i].split(',').map(item=>{
             return  {
               title:item,
-              value:item
+              // value:item
             }
           })
         })
diff --git a/src/views/AI/index.vue b/src/views/AI/index.vue
index 5750898..b59936b 100644
--- a/src/views/AI/index.vue
+++ b/src/views/AI/index.vue
@@ -7,6 +7,13 @@
           <messageComponent :messagesList="messages" :is-deep="isDeep" :is-search="isSearching" :think-ok='isThink'></messageComponent>
         </div>
       </div>
+
+
+
+<!--      按钮点击滚动到顶-->
+      <div class="button-container" style='background: #fff'>
+        <van-icon name="upgrade" size='2em' @click='scrollToTop' />
+      </div>
     </main>
     <section class="section">
       <button @click="searchInternet" :class="{ active: isSearching }">
@@ -97,8 +104,10 @@ export default {
         this.hasTreasureBox()
         return
       }
-
+      this.autoScrollEnabled = true
       this.axiosGetAiChat()
+
+
     },
 
     throttle(fn, delay = 50) {
@@ -112,6 +121,11 @@ export default {
       }
     },
 
+    scrollToTop(){
+      const messageArea = this.$refs.messageArea
+      messageArea.scrollTop = 0
+    },
+
     scrollToBottom: function () {
       if (!this.autoScrollEnabled) return
 
@@ -285,7 +299,13 @@ $primary-trans-color: rgba(135, 162, 208, 0.5);
     overflow-y: auto;
     padding: 10px;
     background: #f7f8fa;
-
+    position: relative;
+    .button-container{
+      position: fixed;
+      bottom: 120px;
+      right:10px;
+      border-radius: 50%;
+    }
     .chat-content {
       height: 100%;
       .message-area {