wxc
2 years ago
19 changed files with 975 additions and 886 deletions
@ -1,19 +0,0 @@
|
||||
|
||||
|
||||
client_max_body_size 10M; |
||||
|
||||
server { |
||||
listen 80; |
||||
server_name mailbox.biutag.com; |
||||
|
||||
location / { |
||||
root /usr/share/nginx/html/mailbox; |
||||
index index.html; |
||||
try_files $uri $uri/ /index.html; |
||||
} |
||||
|
||||
location /api/ { |
||||
proxy_pass http://172.31.217.20:30784/; |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,116 @@
|
||||
<template> |
||||
<div class="attachments" v-if="files.length"> |
||||
<template v-for="(file, index) in files" :key="index"> |
||||
<div |
||||
:style="{ |
||||
backgroundImage: `url(/api/file/stream/${file.filepath})`, |
||||
}" |
||||
class="file" |
||||
@click="handlePreview(file, index)" |
||||
></div> |
||||
</template> |
||||
</div> |
||||
<van-empty v-else description="无附件" style="padding-top: 0" /> |
||||
<div |
||||
v-if="show" |
||||
class="img-preview-container flex v-center center" |
||||
@click="show = false" |
||||
> |
||||
<img :src="filepath" v-touch:swipe.left="swipeleft" v-touch:swipe.right="swiperight" /> |
||||
<div class="dots flex-inline gap"> |
||||
<span |
||||
v-for="(item, index) in Array.from({ length: files.length })" |
||||
:key="index" |
||||
:active="activeIndex === index" |
||||
></span> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
const props = defineProps({ |
||||
files: { |
||||
type: Array, |
||||
default: [], |
||||
}, |
||||
}); |
||||
|
||||
const show = ref(false); |
||||
const filepath = ref(""); |
||||
const activeIndex = ref(-1); |
||||
function handlePreview(file, index) { |
||||
activeIndex.value = index; |
||||
filepath.value = `/api/file/stream/${file.filepath}`; |
||||
show.value = true; |
||||
} |
||||
|
||||
function swipeleft() { |
||||
if (activeIndex.value === props.files.length - 1) { |
||||
activeIndex.value = 0 |
||||
} else { |
||||
activeIndex.value += 1; |
||||
} |
||||
|
||||
filepath.value = `/api/file/stream/${ |
||||
props.files[activeIndex.value].filepath |
||||
}`; |
||||
} |
||||
function swiperight() { |
||||
if (activeIndex.value === 0) { |
||||
activeIndex.value = props.files.length - 1 |
||||
} else { |
||||
activeIndex.value -= 1; |
||||
} |
||||
filepath.value = `/api/file/stream/${ |
||||
props.files[activeIndex.value].filepath |
||||
}`; |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.attachments { |
||||
margin-top: 10px; |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr 1fr; |
||||
grid-gap: 10px; |
||||
.file { |
||||
background-color: #f3faff; |
||||
height: 108px; |
||||
background-size: cover; |
||||
.name { |
||||
width: 100%; |
||||
max-width: 108px; |
||||
text-align: center; |
||||
max-height: 38px; |
||||
overflow: hidden; |
||||
word-break: break-word; |
||||
} |
||||
} |
||||
} |
||||
.img-preview-container { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background-color: #0e0e0e; |
||||
z-index: 2; |
||||
img { |
||||
max-width: 100%; |
||||
} |
||||
.dots { |
||||
position: absolute; |
||||
bottom: 20px; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
span { |
||||
display: block; |
||||
width: 8px; |
||||
height: 8px; |
||||
background-color: #777; |
||||
border-radius: 50%; |
||||
&[active="true"] { |
||||
background-color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,44 +0,0 @@
|
||||
<template> |
||||
<div v-if="show" @click="hide" class="img-preview-container flex v-center center"> |
||||
<img :src="filepath" alt="" /> |
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import { watch } from "vue" |
||||
|
||||
const props = defineProps({ |
||||
filepath: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
show: { |
||||
type: Boolean, |
||||
default: false |
||||
} |
||||
}) |
||||
const emit = defineEmits(['update:show']) |
||||
|
||||
const show = ref(false) |
||||
|
||||
watch(() => props.show, (val) => { |
||||
show.value = val |
||||
}) |
||||
|
||||
function hide() { |
||||
emit('update:show', false) |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.img-preview-container { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background-color: #000; |
||||
z-index: 2; |
||||
img { |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -1,55 +1,60 @@
|
||||
import { defineConfig } from 'vite' |
||||
import { defineConfig, loadEnv } from 'vite' |
||||
import vue from '@vitejs/plugin-vue' |
||||
import AutoImport from 'unplugin-auto-import/vite' |
||||
import svgLoader from 'vite-svg-loader' |
||||
import path from 'path' |
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({ |
||||
|
||||
plugins: [ |
||||
vue(), |
||||
svgLoader(), |
||||
AutoImport({ |
||||
imports: [ |
||||
'vue' |
||||
] |
||||
}), |
||||
], |
||||
resolve: { |
||||
// https://cn.vitejs.dev/config/#resolve-alias
|
||||
alias: { |
||||
// 设置路径
|
||||
'~': path.resolve(__dirname, './'), |
||||
// 设置别名
|
||||
'@': path.resolve(__dirname, './src/') |
||||
export default ({ mode }) => { |
||||
const env = loadEnv(mode, process.cwd()); |
||||
return defineConfig({ |
||||
define: { |
||||
'process.env': env |
||||
}, |
||||
plugins: [ |
||||
vue(), |
||||
svgLoader(), |
||||
AutoImport({ |
||||
imports: [ |
||||
'vue' |
||||
] |
||||
}), |
||||
], |
||||
resolve: { |
||||
// https://cn.vitejs.dev/config/#resolve-alias
|
||||
alias: { |
||||
// 设置路径
|
||||
'~': path.resolve(__dirname, './'), |
||||
// 设置别名
|
||||
'@': path.resolve(__dirname, './src/') |
||||
}, |
||||
// https://cn.vitejs.dev/config/#resolve-extensions
|
||||
extensions: ['.js'] |
||||
}, |
||||
// https://cn.vitejs.dev/config/#resolve-extensions
|
||||
extensions: ['.js'] |
||||
}, |
||||
server: { |
||||
host: '0.0.0.0', |
||||
proxy: { |
||||
'/api': { |
||||
// https://mailbox.biutag.com/api
|
||||
// http://127.0.0.1:8080
|
||||
target: 'https://mailbox.biutag.com/api', |
||||
changeOrigin: true, |
||||
rewrite: (p) => p.replace(/^\/api/, '') |
||||
server: { |
||||
host: '0.0.0.0', |
||||
proxy: { |
||||
'/api': { |
||||
// https://mailbox.biutag.com/api
|
||||
// http://127.0.0.1:8080
|
||||
target: 'https://jzxx.biutag.com/api', |
||||
changeOrigin: true, |
||||
rewrite: (p) => p.replace(/^\/api/, '') |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
build: { |
||||
rollupOptions: { |
||||
output: { |
||||
entryFileNames: `assets/[name].${new Date().getTime()}.js`, |
||||
chunkFileNames: `assets/[name].${new Date().getTime()}.js`, |
||||
assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`, |
||||
compact: true, |
||||
manualChunks: { |
||||
vue: ['vue'] |
||||
}, |
||||
}, |
||||
build: { |
||||
rollupOptions: { |
||||
output: { |
||||
entryFileNames: `assets/[name].${new Date().getTime()}.js`, |
||||
chunkFileNames: `assets/[name].${new Date().getTime()}.js`, |
||||
assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`, |
||||
compact: true, |
||||
manualChunks: { |
||||
vue: ['vue'] |
||||
}, |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
Loading…
Reference in new issue