feat: 图片下载开关

package.json

@@ -25,7 +25,7 @@
     "masonry-layout": "^4.2.2",
     "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
-    "naive-ui": "^2.34.4",
+    "naive-ui": "^2.38.1",
     "pinia": "^2.0.33",
     "qs": "^6.11.2",
     "sortablejs": "^1.15.1",

pnpm-lock.yaml

@@ -39,8 +39,8 @@ dependencies:
     specifier: ^1.1.0
     version: 1.1.0
   naive-ui:
-    specifier: ^2.34.4
+    specifier: ^2.38.1
-    version: 2.34.4(vue@3.3.10)
+    version: 2.38.1(vue@3.3.10)
   pinia:
     specifier: ^2.0.33
     version: 2.1.7(typescript@4.9.5)(vue@3.3.10)
@@ -1300,8 +1300,8 @@ packages:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
 
-  /@types/katex@0.14.0:
+  /@types/katex@0.16.7:
-    resolution: {integrity: sha512-+2FW2CcT0K3P+JMR8YG846bmDwplKUTsWgT2ENwdQ1UdVfRk3GQrh6Mi4sTopy30gI8Uau5CEqHTDZ6YvWIUPA==}
+    resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
     dev: false
 
   /@types/lodash-es@4.17.12:
@@ -2587,15 +2587,19 @@ packages:
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
+  /csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+    dev: false
+
   /dargs@7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
     dev: true
 
-  /date-fns-tz@1.3.8(date-fns@2.30.0):
+  /date-fns-tz@2.0.1(date-fns@2.30.0):
-    resolution: {integrity: sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==}
+    resolution: {integrity: sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==}
     peerDependencies:
-      date-fns: '>=2.0.0'
+      date-fns: 2.x
     dependencies:
       date-fns: 2.30.0
     dev: false
@@ -5230,20 +5234,21 @@ packages:
       thenify-all: 1.6.0
     dev: true
 
-  /naive-ui@2.34.4(vue@3.3.10):
+  /naive-ui@2.38.1(vue@3.3.10):
-    resolution: {integrity: sha512-aPG8PDfhSzIzn/jSC9y3Jb3Pe2wHJ7F0cFV1EWlbImSrZECeUmoc+fIcOSWbizoztkKfaUAeKwYdMl09MKkj1g==}
+    resolution: {integrity: sha512-AnU1FQ7K/CbhguAX++V4kCFjk7h7RvWt4nvZPRjORMpq+fUIlzD+EcQ5Cv1VqDloNF8+eMv4Akc2Ogacc9S+5A==}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
       '@css-render/plugin-bem': 0.15.12(css-render@0.15.12)
       '@css-render/vue3-ssr': 0.15.12(vue@3.3.10)
-      '@types/katex': 0.14.0
+      '@types/katex': 0.16.7
       '@types/lodash': 4.14.202
       '@types/lodash-es': 4.17.12
       async-validator: 4.2.5
       css-render: 0.15.12
+      csstype: 3.1.3
       date-fns: 2.30.0
-      date-fns-tz: 1.3.8(date-fns@2.30.0)
+      date-fns-tz: 2.0.1(date-fns@2.30.0)
       evtd: 0.2.4
       highlight.js: 11.9.0
       lodash: 4.17.21

src/utils/image.ts

@@ -0,0 +1,17 @@
+import { unref } from 'vue'
+import { useConfig } from '@/store/modules/asideConfig'
+
+const downloadSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg>'
+
+export function hideDownload(e: MouseEvent) {
+  setTimeout(() => {
+    const configStore = useConfig()
+    const downloadEle: any = document.querySelector('.n-image-preview-toolbar')?.children[5]
+    const asideValue = unref(configStore.getAsideValue)
+    const download = asideValue.izimgdownload
+    if (downloadEle && downloadEle.innerHTML === downloadSvg && download === false)
+      downloadEle.style.display = 'none'
+    else
+      downloadEle.style.display = 'block'
+  }, 100)
+}

src/views/home/aside/comp/Upload.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import type { GlobalThemeOverrides, UploadCustomRequestOptions } from 'naive-ui'
-import { computed, ref } from 'vue'
+import { computed, ref, unref } from 'vue'
 import { useElementHover } from '@vueuse/core'
 import { useThemeVars } from 'naive-ui'
 import { upload } from '@/api/home/main'
 import { getImgUrl } from '@/utils/urlUtils'
-
+import { useConfig } from '@/store/modules/asideConfig'
-defineOptions({ name: 'Upload' })
+import { hideDownload } from '@/utils/image'
 
 const props = defineProps<{
   value: string
@@ -16,6 +16,8 @@ const emit = defineEmits<{
   (e: 'update:value', value: string): void
 }>()
 
+const configStore = useConfig()
+
 const figureUrl = ref(props.value)
 
 async function customRequest(data: UploadCustomRequestOptions) {
@@ -70,7 +72,7 @@ const imageGroupThemeOverrides = computed(() => {
           <span class="wrapper-tip2">上传格式为：.png .jpg .bmp 20M以内</span>
         </div>
         <div v-show="showFigure" ref="figureRef" class="wrapper-figure">
-          <n-image ref="imageRef" :theme-overrides="imageGroupThemeOverrides" width="288" height="116" :src="figureUrl" />
+          <n-image ref="imageRef" :img-props="{ onClick: hideDownload }" :theme-overrides="imageGroupThemeOverrides" width="288" height="116" :src="figureUrl" />
           <div v-show="figureHovered" class="wrapper-figure-tools">
             <SvgIcon size="28" name="view" @click="previewHandler" />
             <div class="wrapper-figure-line" />

src/views/home/content/Content.vue

@@ -20,6 +20,7 @@ import img5 from '@/assets/images/5.jpg'
 import { useConfig } from '@/store/modules/asideConfig'
 import emitter from '@/utils/mitt'
 import { getImgUrl } from '@/utils/urlUtils'
+import { hideDownload } from '@/utils/image'
 
 const deviceHeight = ref(600)
 let _masonry: null | Masonry = null
@@ -300,10 +301,11 @@ async function refreshHandler() {
           <div ref="masonryRef" class="grid">
             <div v-for="(item, index) in listData" :key="index" :style="{ height: gridHeight }" class="grid-item">
               <!-- <div :style="{ 'background-color': randomColor(0.2) }" class="wrapper-content-item-img" /> -->
-              <img
+              <!-- <img
                 class="wrapper-content-item-img" :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }"
                 :src="item.imgUrl"
-              >
+              > -->
+              <n-image class="wrapper-content-item-img" :img-props="{ onClick: hideDownload }" :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl" />
               <div class="wrapper-content-item-info">
                 <div class="wrapper-content-item-info-left">
                   <n-avatar :src="getImgUrl(item.uphead)" class="wrapper-content-item-info-avatar" round />