表情包和pdf预览代码提交

liics

@@ -1 +0,0 @@
-Subproject commit e9d7f5bf799bf2d3d3df068f35290eba414237ad

package.json

@@ -24,6 +24,7 @@
     "mescroll.js": "^1.4.2",
     "node-forge": "^1.4.0",
     "pinia": "^3.0.4",
+    "pdfjs-dist": "5.4.149",
     "qs": "^6.15.0",
     "recorder-core": "^1.3.26070800",
     "sa-sdk-javascript": "^1.27.14",

src/assets/style/chat.css

@@ -965,7 +965,11 @@ img.avatarUrl-img[lazy="loading"] {
   color: #2c3562;
   line-height: 22rem;
 }
-
+.elder-wrapper .question-answer-con img {
+  width: 18rem;
+  vertical-align: text-top;
+  margin-right: 3rem;
+}
 .elder-wrapper .question-answer-con .open-wx-web-button {
   width: 311rem;
   height: 40rem;

src/components/emoticon-box.vue

@@ -1,21 +1,167 @@
 <template>
-  <!-- 模板不变，只需： -->
+  <div class="smile-emoticon-box" :class="{ elder: !!elder }">
-  <!-- $elder → elder -->
+    <div class="emoticon-panel">
-  <!-- v-lazy="..." → 改用 DynamicImage 组件或 @error 处理 -->
+      <div
+        class="emoticon-pages"
+        :style="{ width: scrollWidth + 'px', transform: `translateX(-${scrollPosition}px)` }"
+      >
+        <div
+          class="emoticon-page"
+          v-for="(page, pageIndex) in faces"
+          :key="pageIndex"
+          :style="{ width: pageWidth + 'px' }"
+        >
+          <button
+            type="button"
+            class="emoticon-item"
+            v-for="(face, faceIndex) in page"
+            :key="`${pageIndex}-${faceIndex}-${face.id}`"
+            @click.stop="chooseFace(face)"
+          >
+            <img :src="publicPath + face.src" :alt="face.title" />
+          </button>
+        </div>
+      </div>
+
+      <div class="emoticon-dots" v-if="faces.length > 1">
+        <span
+          v-for="(_, pageIndex) in faces"
+          :key="pageIndex"
+          class="dot"
+          :class="{ active: active === pageIndex }"
+          @click.stop="active = pageIndex"
+        ></span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, computed, inject } from 'vue'
+import { ref, computed, inject, onMounted, onBeforeUnmount } from 'vue'
 import faceJSON from '@/mock/face.json'
 
-const elder = inject('elder', false)
+defineOptions({ name: 'EmoticonBox' })
+
+const emit = defineEmits(['onFaceChoose'])
 
-const publicPath = ref(import.meta.env.BASE_URL)
+const elder = inject('elder', ref(false))
+const publicPath = import.meta.env.BASE_URL || '/'
 const active = ref(0)
-const faceData = ref(faceJSON)
+const pageWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 375)
-const faceIndex = ref(0)
+const pageSize = computed(() => (elder?.value ? 16 : 20))
+
+const flatFaces = computed(() => {
+  const list = []
+  ;(faceJSON || []).forEach((group) => {
+    ;(group.faceList || []).forEach((face) => {
+      if (face?.title && face?.src) list.push(face)
+    })
+  })
+  return list
+})
+
+const faces = computed(() => {
+  const size = pageSize.value || 20
+  const pages = []
+  const source = flatFaces.value
+  for (let i = 0; i < source.length; i += size) {
+    pages.push(source.slice(i, i + size))
+  }
+  return pages.length ? pages : [[]]
+})
+
+const scrollWidth = computed(() => faces.value.length * pageWidth.value)
+const scrollPosition = computed(() => active.value * pageWidth.value)
+
+function chooseFace(face) {
+  if (!face?.title) return
+  emit('onFaceChoose', `[${face.title}]`)
+}
+
+function updatePageWidth() {
+  pageWidth.value = window.innerWidth || document.documentElement.clientWidth || 375
+  if (active.value > faces.value.length - 1) active.value = 0
+}
+
+onMounted(() => {
+  updatePageWidth()
+  window.addEventListener('resize', updatePageWidth)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePageWidth)
+})
+</script>
+
+<style scoped>
+.smile-emoticon-box {
+  width: 100%;
+  background-color: #efefef;
+  overflow: hidden;
+}
+
+.emoticon-panel {
+  padding: 12px 8px 8px;
+  box-sizing: border-box;
+}
+
+.emoticon-pages {
+  display: flex;
+  transition: transform 0.25s ease;
+}
+
+.emoticon-page {
+  flex-shrink: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  padding: 0 4px;
+  box-sizing: border-box;
+}
+
+.emoticon-item {
+  width: 20%;
+  height: 48px;
+  border: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.smile-emoticon-box.elder .emoticon-item {
+  width: 25%;
+  height: 56px;
+}
+
+.emoticon-item img {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+}
+
+.smile-emoticon-box.elder .emoticon-item img {
+  width: 34px;
+  height: 34px;
+}
+
+.emoticon-dots {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  padding-top: 6px;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #c7c7c7;
+}
 
-const faces = computed(() => { /* ... 逻辑不变 ... */ })
+.dot.active {
-const scrollWidth = computed(() => faces.value.length * document.body.scrollWidth)
+  background: #025cea;
-const scrollPosition = computed(() => active.value * document.body.scrollWidth)
+}
-</script>
+</style>

src/components/footer-bar-input.vue

@@ -95,7 +95,7 @@
 
   <!-- 表情符号 -->
   <!-- <transition name="draw"> -->
-  <emoticon-box :class="{ min_heightauto: !smileFlag }" @onFaceChoose="handleFaceChoose"></emoticon-box>
+  <emoticon-box class="smile-emoticon-box" :class="{ min_heightauto: !smileFlag }" @onFaceChoose="handleFaceChoose"></emoticon-box>
   <!-- </transition> -->
 
   <upload-image ref="uploadImageRef" @image-selected="handleImageSelected" @image-sent="handleImageSent"

src/components/history-content.vue

@@ -47,7 +47,7 @@ function processedEmoji() {
 }
 
 function emojiToImage(str) {
-  let regex = /$$[^$$]+\]/g
+  let regex = /\[[^\]]+\]/g
   return str.replace(regex, (item) => {
     if (expressionProcessing.value[item]) { return `<img src="${publicPath + expressionProcessing.value[item]}" alt="small-image" title="${item}" />` }
     else if (bigExpressionProcessing.value[item]) { return `<img src="${publicPath + bigExpressionProcessing.value[item]}" alt="big-image" title="${item}"/>` }

src/components/previewPDF/index.vue

@@ -4,7 +4,10 @@
       <span class="back_icon"></span>
       <span class="back_text">返回</span>
     </div>
-    <div v-if="!!pdfUrl" id="previewPdf_comp"></div>
+    <!-- <div v-if="!!pdfUrl" id="previewPdf_comp"></div> -->
+    <div ref="pdfwrapper" v-if="!!pdfUrl" class="preview-content" style="position: absolute">
+      <div ref="pdfViewer" class="pdfViewer" />
+    </div>
   </div>
 </template>
 
@@ -12,8 +15,17 @@
 import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { showFailToast } from 'vant'
-import Pdfh5 from 'pdfh5'
+import * as pdfjsLib from "pdfis-dist/legacy/build/pdf.mjs"
-import 'pdfh5/css/pdfh5.css'
+import MyWorker from 'pdfjs-dist/legacy/build/pdf.worker.mjs?worker'
+pdfjsLib.GlobalWorkerOptions.workerPort = new MyWorker()
+import "pdfjs-dist/legacy/web/pdf viewer.css"
+import * as pdfViewerLib from 'pdfjs dist/legacy/web/pdf viewer.mjs'
+const pdfwrapper = ref(null)
+const pdfViewer = ref(null)
+let pdfObj = null
+let viewer = null
+// import Pdfh5 from 'pdfh5'
+// import 'pdfh5/css/pdfh5.css'
 
 // ── 路由 ────────────────────────────────────────────
 const route = useRoute()
@@ -24,35 +36,46 @@ const pdfUrl = ref('')
 let pdfh5 = null
 
 // ── 初始化 ──────────────────────────────────────────
-pdfUrl.value = route.params.url
+const getPdfDocument = async (url = '') => {
-
+  const loadingTask = pdfjsLib.getDocument({
-// ── 生命周期 ────────────────────────────────────────
+    url, cMapUrl: '/cmaps/', cMapPacked: true,
-onMounted(() => {
-  pdfh5 = new Pdfh5('#previewPdf_comp', {
-    pdfurl: pdfUrl.value,
-    lazy: true,
-    cMapUrl: 'https://app.unpkg.com/pdfjs-dist@2.0.943/files/cmaps',
   })
+  const pdf = await loadingTask.promise
+  return pdf
 
-  pdfh5.on('error', function (status, msg, time) {
+}
-    showFailToast('PDF加载失败')
+const init = (url = '') => {
+  getPdfDocument(url).then((pdf) => {
+    pdfObj = pdf
+    viewer = new pdfViewerLib.PDFViewer({
+      container: pdfwrapper.value,
+      viewer: pdfViewer.value,
+      eventBus: new pdfViewerLib.EventBus(), textLayerMode: 0,
+    })
+    viewer.eventBus.on('pagesloaded', () => {
+      viewer!.currentScaleValue = 'page-width'
+    })
+    viewer.setDocument(pdfObj)
   })
+}
+// ── 生命周期 ────────────────────────────────────────
+onMounted(() => {
+  pdfUrl.value = route.params.url
+  init(pdfUrl.value)
 })
 
-// ── 方法 ────────────────────────────────────────────
+// ── 方法 ──
 function routeBack() {
-  router.back()
+  router.go(-1)
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-#previewPdf_comp .pageNum {
+preview-content {
-  left: unset !important;
+  position: absolute;
-  right: 20px !important;
+  overflow: hidden !important;
 }
-</style>
 
-<style lang="scss" scoped>
 .preViewPdf_body {
   position: absolute;
   left: 0;
@@ -72,35 +95,35 @@ function routeBack() {
 
 .back_btn {
   position: fixed;
-  left: 12px;
+  left: 12rem;
-  top: 12px;
+  top: 12rem;
   z-index: 999;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 8px 12px;
+  padding: 8rem 12rem;
   background: rgba(255, 255, 255, 0.95);
   color: #333;
-  border-radius: 16px;
+  border-radius: 16rem;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2rem 12rem rgba(0, 0, 0, 0.15);
   cursor: pointer;
   transition: all 0.3s ease;
-  font-size: 12px;
+  font-size: 12rem;
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(10rem);
-  -webkit-backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10rem);
   user-select: none;
 }
 
 .back_btn:active {
   transform: scale(0.95);
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1rem 6rem rgba(0, 0, 0, 0.2);
 }
 
 .back_icon {
   display: inline-block;
-  width: 12px;
+  width: 12rem;
-  height: 12px;
+  height: 12rem;
-  margin-right: 4px;
+  margin-right: 4rem;
   position: relative;
 }
 
@@ -109,15 +132,15 @@ function routeBack() {
   position: absolute;
   left: 0;
   top: 50%;
-  width: 8px;
+  width: 8rem;
-  height: 8px;
+  height: 8rem;
-  border-left: 2px solid #333;
+  border-left: 2rem solid #333;
-  border-bottom: 2px solid #333;
+  border-bottom: 2rem solid #333;
   transform: translateY(-50%) rotate(45deg);
 }
 
 .back_text {
-  font-size: 12px;
+  font-size: 12rem;
   font-weight: 500;
   line-height: 1;
 }
@@ -130,10 +153,10 @@ function routeBack() {
 .right_bottom {
   left: auto;
   right: 0;
-  top: 30px;
+  top: 30rem;
 }
 
 .right_top {
-  top: 0px !important;
+  top: 0rem !important;
 }
 </style>

src/components/send-message.vue

@@ -91,7 +91,7 @@ function processedEmoji() {
 }
 
 function emojiToImage(str) {
-  let regex = /$$[^$$]+\]/g
+  let regex = /\[[^\]]+\]/g
   return str.replace(regex, (item) => {
     if (expressionProcessing.value[item]) {
       return `<img src="${

src/components/text-content.vue

@@ -272,7 +272,7 @@ function processedEmoji() {
 
 function emojiToImage(str) {
   let srcImg = ''
-  let regex = /$$[^$$]+\]/g
+  let regex = /\[[^\]]+\]/g
   srcImg = str.replace(regex, (item) => {
     if (expressionProcessing.value[item]) {
       return `<img src="${

src/components/text-folding.vue

@@ -361,7 +361,7 @@ function processedEmoji() {
 }
 
 function emojiToImage(str) {
-  let regex = /$$[^$$]+\]/g
+  let regex = /\[[^\]]+\]/g
   return str.replace(regex, (item) => {
     if (expressionProcessing.value[item]) {
       return `<img src="${

yarn.lock

@@ -677,6 +677,78 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@napi-rs/canvas-android-arm64@0.1.100":
+  version "0.1.100"
+  resolved "https://registry.npmmirror.com/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.100.tgz#b7c68b91d57702a5fc523fa82de72ea741e6766e"
+  integrity sha512-hjhCKhntPv9+t4ckHymdx0phYNcVW+GKQR6Lzw2zE+pOVjOplSmtx9nNNknTjbEDLcuLZqA1y8ufKg1XfgftzQ==
+
+"@napi-rs/canvas-darwin-arm64@0.1.100":
+  version "0.1.100"
+  resolved "https://registry.npmmirror.com/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.100.tgz#d1686fa6ca699b07640efa5f45425db0a4e725e2"
+  integrity sha512-2PcswRaC7Ly645DGt88///zuFDhJxJYdKAs1uU3mfk1atYkXufgcgLfBpk6Tm12nCQBaNt1wpybuPZ4qOhTo8A==
+
+"@napi-rs/canvas-darwin-x64@0.1.100":
+  version "0.1.100"
+  resolved "https://registry.npmmirror.com/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.100.tgz#92978fd7eca21f7f1b59bd13ba3ce7c0e7c879a1"
+  integrity sha512-ePNZtj7pNIva/siZMg+HmbeozkIjqUIYdoymH8HaA3qK7LfzFN4WMBM8G6HQ9ZC+H3+Dnn5pqtiXpgLykaPOhw==
+
+"@napi-rs/canvas-linux-arm-gnueabihf@0.1.100":
+  version "0.1.100"
+  resolved "https://registry.npmmirror.com/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.100.tgz#95f9892e1d5a8274871d8ee406374e9ef692bd9f"
+  integrity sha512-d5cDB48oWFGU8/XPhUOFAlySgb/VAu7D+s8fi55K1Pcfg8aPplHWqMgibhVLU8ky7Pyg/fuiVLz4Nf3JrSTuUA==
+
+"@napi-rs/canvas-linux-arm64-gnu@0.1.100":
+  version "0.1.100"
+  resolved "https://registry.npmmirror.com/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.100.tgz#6b2b7c4bb016b8f5308115ac9ae909df4967a94b"
+  integrity sha512-rDxgxRu69RvDlX/bh9o22DxLsGr8EqsNgotL9+RwQE1S0b0cqeatqsw6aW45mukm0B42DIAaAacKaYQ8cqS1nw==
+
+"@napi-rs/canvas-linux-arm64-musl@0.1.100":
+  version "0.1.100"
+  resolved "https://registry.npmmirror.com/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.100.tgz#48cf6342543e4f87cf1f8e9b1aaa19ad85bcc178"
+  integrity sha512-K3mDW66N+xT2/V439u1alFANiBUjdEx2gLiNYnCmUsva5jZMxWTjafBYwTzYK+EMFMHrUoabuU+T1BIP5CgbYQ==
+
+"@napi-rs/canvas-linux-riscv64-gnu@0.1.100":
+  version "0.1.100"
+  resolved "https://registry.npmmirror.com/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.100.tgz#71b011007b03755c834a961735302c5837b041da"
+  integrity sha512-mooqUBTIsccZpnoQC4NgrC1v6C1vof39etLNMnBwCY+p0gajWJvAHLGQ6g/gGyS5YrpDW+GefSN4+Cvcr08UWw==
+
+"@napi-rs/canvas-linux-x64-gnu@0.1.100":
+  version "0.1.100"
+  resolved "https://registry.npmmirror.com/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.100.tgz#3f479d3b8b8c4658e5dec1b943ad7d2eefd2811f"
+  integrity sha512-1eCvkDCazm7FFhsT7DfGOdSaHgZVK3bt/dSBl5EWHOWmnz+I7j8tPseJqqD81NF+MH21jKUK4wQSDjN0mdhnTg==
+
+"@napi-rs/canvas-linux-x64-musl@0.1.100":
+  version "0.1.100"
+  resolved "https://registry.npmmirror.com/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.100.tgz#1beaca22c1fe97709a9c287115cb3c90194ddec6"
+  integrity sha512-20arT6lnI19S68qNlii73TSEDbECNgzMz2EpldC1V3mZFuRkeujXkcebRk0LRJe9SEUAooYiLokfMViY8IX7yA==
+
+"@napi-rs/canvas-win32-arm64-msvc@0.1.100":
+  version "0.1.100"
+  resolved "https://registry.npmmirror.com/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-0.1.100.tgz#8a1728b455dd17965f95c0bfdf6753be8c5851c0"
+  integrity sha512-DZFFT1wIAg37LJw37yhMRFfjATd3vTQzjZ1Yki8u2vhO6Hi5VE6BVaGQ1aaDu7xb4iMErz+9EOwjpS7xcxFeBw==
+
+"@napi-rs/canvas-win32-x64-msvc@0.1.100":
+  version "0.1.100"
+  resolved "https://registry.npmmirror.com/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.100.tgz#1e52883f8784ffdbe52dc2d47b05a0886aa6e9cf"
+  integrity sha512-MyT1j3mHC2+Lu4pBi9mKyMJhtP6U7k7EldY7sj/uS5gJA65gTXt8MefJQXLJo5d/vZbuWmfxzkEUNc/urV3pHA==
+
+"@napi-rs/canvas@^0.1.77":
+  version "0.1.100"
+  resolved "https://registry.npmmirror.com/@napi-rs/canvas/-/canvas-0.1.100.tgz#2c89a15c28a62e1372be23fd474762ae1a8b16b7"
+  integrity sha512-xglYA6q3XO5P3BNJYxVZ1IV7DLVjp1Py6nwag88YntrS+3vKHyYcMqXVS4ZztJmwz2uGvz1FWhI/4LgbR5uQDA==
+  optionalDependencies:
+    "@napi-rs/canvas-android-arm64" "0.1.100"
+    "@napi-rs/canvas-darwin-arm64" "0.1.100"
+    "@napi-rs/canvas-darwin-x64" "0.1.100"
+    "@napi-rs/canvas-linux-arm-gnueabihf" "0.1.100"
+    "@napi-rs/canvas-linux-arm64-gnu" "0.1.100"
+    "@napi-rs/canvas-linux-arm64-musl" "0.1.100"
+    "@napi-rs/canvas-linux-riscv64-gnu" "0.1.100"
+    "@napi-rs/canvas-linux-x64-gnu" "0.1.100"
+    "@napi-rs/canvas-linux-x64-musl" "0.1.100"
+    "@napi-rs/canvas-win32-arm64-msvc" "0.1.100"
+    "@napi-rs/canvas-win32-x64-msvc" "0.1.100"
+
 "@napi-rs/lzma-linux-x64-gnu@1.5.1":
   version "1.5.1"
   resolved "http://registry-npm.wepack-gp22dmp-dev.group.cpic.com/public/npm-ga-public/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz#e57d4306966078662038094fb38eb9146dc3aea9"
@@ -1745,6 +1817,13 @@ pathe@^2.0.3:
   resolved "http://registry-npm.wepack-gp22dmp-dev.group.cpic.com/public/npm-ga-public/pathe/-/pathe-2.0.3.tgz#3ecbec55421685b70a9da872b2cff3e1cbed1716"
   integrity sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==
 
+pdfjs-dist@5.4.149:
+  version "5.4.149"
+  resolved "https://registry.npmmirror.com/pdfjs-dist/-/pdfjs-dist-5.4.149.tgz#7ff5b8427f37cd43e16377adf509af8595938afc"
+  integrity sha512-Xe8/1FMJEQPUVSti25AlDpwpUm2QAVmNOpFP0SIahaPIOKBKICaefbzogLdwey3XGGoaP4Lb9wqiw2e9Jqp0LA==
+  optionalDependencies:
+    "@napi-rs/canvas" "^0.1.77"
+
 perfect-debounce@^1.0.0:
   version "1.0.0"
   resolved "http://registry-npm.wepack-gp22dmp-dev.group.cpic.com/public/npm-ga-public/perfect-debounce/-/perfect-debounce-1.0.0.tgz#9c2e8bc30b169cc984a58b7d5b28049839591d2a"