add save qrcode

src/Utils.ts

@@ -1,6 +1,6 @@
+import { useStorage } from '@vueuse/core'
 import { createDiscreteApi, useOsTheme } from 'naive-ui'
 import { ThemeType } from './api/api-models'
-import { useStorage } from '@vueuse/core'
 
 const { message } = createDiscreteApi(['message'])
 
@@ -49,3 +49,25 @@ export function GetGuardColor(level: number | null | undefined): string {
   }
   return ''
 }
+export function downloadImage(imageSrc: string, filename: string) {
+  const image = new Image()
+  image.crossOrigin = 'Anonymous' // This might be needed depending on the image's server
+  image.onload = () => {
+    const canvas = document.createElement('canvas')
+    canvas.width = image.width
+    canvas.height = image.height
+    const ctx = canvas.getContext('2d')
+    ctx!.drawImage(image, 0, 0)
+    canvas.toBlob((blob) => {
+      if (blob) {
+        const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
+        link.download = filename
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      }
+    }) // Omitted the 'image/jpeg' to use the original image format
+  }
+  image.src = imageSrc
+}

src/views/manage/QuestionBoxManageView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { copyToClipboard } from '@/Utils'
+import { copyToClipboard, downloadImage } from '@/Utils'
 import { useAccount } from '@/api/account'
 import { QAInfo } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
@@ -250,6 +250,9 @@ function saveShareImage() {
     )
   })
 }
+function saveQRCode() {
+  downloadImage(`https://api.qrserver.com/v1/create-qr-code/?data=${shareUrl.value}`, 'vtsuru-提问箱二维码.png');
+}
 
 onMounted(() => {
   if (selectedTabItem.value == '0') {
@@ -320,9 +323,11 @@ onMounted(() => {
               <NImage v-if="item.question?.image" :src="item.question.image" height="100" lazy />
               <br />
             </template>
-            <NButton text @click="onOpenModal(item)">
+
+            <NText style="">
               {{ item.question?.message }}
-            </NButton>
+            </NText>
+            <NButton text @click="onOpenModal(item)" style="max-width: 100%; word-wrap: break-word"> </NButton>
           </NCard>
         </NListItem>
       </NList>
@@ -400,6 +405,7 @@ onMounted(() => {
     <br /><br />
     <NSpace justify="center">
       <NButton type="primary" @click="saveShareImage"> 保存卡片 </NButton>
+      <NButton type="primary" @click="saveQRCode"> 保存二维码 </NButton>
     </NSpace>
   </NModal>
 </template>

src/views/manage/VideoCollectDetailView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { downloadImage } from '@/Utils'
 import { VideoCollectCreateModel, VideoCollectDetail, VideoCollectTable, VideoCollectVideo, VideoInfo, VideoStatus } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import VideoCollectInfoCard from '@/components/VideoCollectInfoCard.vue'
@@ -293,6 +294,9 @@ function closeTable() {
       isLoading.value = false
     })
 }
+function saveQRCode() {
+  downloadImage(`https://api.qrserver.com/v1/create-qr-code/?data=${'https://vtsuru.live/video-collect/' + videoDetail.value.table.shortId}`, `vtsuru-视频征集二维码-${videoDetail.value.table.name}.png`)
+}
 </script>
 <template>
   <NSpace>
@@ -365,8 +369,12 @@ function closeTable() {
     </NTabs>
   </template>
   <NModal v-model:show="shareModalVisiable" title="分享" preset="card" style="width: 600px; max-width: 90vw">
-    <Qrcode :value="'https://vtsuru.live/video-collect/' + videoDetail.table.shortId" level="Q" :size="100" background="#00000000" foreground="#ffffff" :margin="1" />
+    <Qrcode :value="'https://vtsuru.live/video-collect/' + videoDetail.table.shortId" level="Q" :size="100" background="#fff" :margin="1" />
     <NInput :value="'https://vtsuru.live/video-collect/' + videoDetail.table.shortId" />
+    <NDivider/>
+    <NSpace justify="center">
+      <NButton type="primary" @click="saveQRCode"> 保存二维码 </NButton>
+    </NSpace>
   </NModal>
   <NModal v-model:show="editModalVisiable" title="更新信息" preset="card" style="width: 600px; max-width: 90vw">
     <NForm ref="formRef" :model="updateModel" :rules="createRules">