guoxiangbin
/
ocr-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: 图片下载开关

Browse Source
bak
elseif 1 year ago
parent 9828399197
commit ad5ea4d496
5 changed files with 44 additions and 18 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape View File

@ -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",

27
pnpm-lock.yaml
Unescape View File

@ -39,8 +39,8 @@ dependencies:
specifier: ^1.1.0
version: 1.1.0
naive-ui:
specifier: ^2.34.4
version: 2.34.4(vue@3.3.10)
specifier: ^2.38.1
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:
resolution: {integrity: sha512-+2FW2CcT0K3P+JMR8YG846bmDwplKUTsWgT2ENwdQ1UdVfRk3GQrh6Mi4sTopy30gI8Uau5CEqHTDZ6YvWIUPA==}
/@types/katex@0.16.7:
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):
resolution: {integrity: sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==}
/date-fns-tz@2.0.1(date-fns@2.30.0):
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):
resolution: {integrity: sha512-aPG8PDfhSzIzn/jSC9y3Jb3Pe2wHJ7F0cFV1EWlbImSrZECeUmoc+fIcOSWbizoztkKfaUAeKwYdMl09MKkj1g==}
/naive-ui@2.38.1(vue@3.3.10):
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

17
src/utils/image.ts
Unescape View File

@ -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)
}

10
src/views/home/aside/comp/Upload.vue
Unescape View File

@ -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'
defineOptions({ name: 'Upload' })
import { useConfig } from '@/store/modules/asideConfig'
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" />

6
src/views/home/content/Content.vue
Unescape View File

@ -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 />

Write Preview
Loading…
Cancel
Save