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 vue from '@vitejs/plugin-vue' |
||||||
import AutoImport from 'unplugin-auto-import/vite' |
import AutoImport from 'unplugin-auto-import/vite' |
||||||
import svgLoader from 'vite-svg-loader' |
import svgLoader from 'vite-svg-loader' |
||||||
import path from 'path' |
import path from 'path' |
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({ |
export default ({ mode }) => { |
||||||
|
const env = loadEnv(mode, process.cwd()); |
||||||
plugins: [ |
return defineConfig({ |
||||||
vue(), |
define: { |
||||||
svgLoader(), |
'process.env': env |
||||||
AutoImport({ |
}, |
||||||
imports: [ |
plugins: [ |
||||||
'vue' |
vue(), |
||||||
] |
svgLoader(), |
||||||
}), |
AutoImport({ |
||||||
], |
imports: [ |
||||||
resolve: { |
'vue' |
||||||
// https://cn.vitejs.dev/config/#resolve-alias
|
] |
||||||
alias: { |
}), |
||||||
// 设置路径
|
], |
||||||
'~': path.resolve(__dirname, './'), |
resolve: { |
||||||
// 设置别名
|
// https://cn.vitejs.dev/config/#resolve-alias
|
||||||
'@': path.resolve(__dirname, './src/') |
alias: { |
||||||
|
// 设置路径
|
||||||
|
'~': path.resolve(__dirname, './'), |
||||||
|
// 设置别名
|
||||||
|
'@': path.resolve(__dirname, './src/') |
||||||
|
}, |
||||||
|
// https://cn.vitejs.dev/config/#resolve-extensions
|
||||||
|
extensions: ['.js'] |
||||||
}, |
}, |
||||||
// https://cn.vitejs.dev/config/#resolve-extensions
|
server: { |
||||||
extensions: ['.js'] |
host: '0.0.0.0', |
||||||
}, |
proxy: { |
||||||
server: { |
'/api': { |
||||||
host: '0.0.0.0', |
// https://mailbox.biutag.com/api
|
||||||
proxy: { |
// http://127.0.0.1:8080
|
||||||
'/api': { |
target: 'https://jzxx.biutag.com/api', |
||||||
// https://mailbox.biutag.com/api
|
changeOrigin: true, |
||||||
// http://127.0.0.1:8080
|
rewrite: (p) => p.replace(/^\/api/, '') |
||||||
target: 'https://mailbox.biutag.com/api', |
} |
||||||
changeOrigin: true, |
|
||||||
rewrite: (p) => p.replace(/^\/api/, '') |
|
||||||
} |
} |
||||||
} |
}, |
||||||
}, |
build: { |
||||||
build: { |
rollupOptions: { |
||||||
rollupOptions: { |
output: { |
||||||
output: { |
entryFileNames: `assets/[name].${new Date().getTime()}.js`, |
||||||
entryFileNames: `assets/[name].${new Date().getTime()}.js`, |
chunkFileNames: `assets/[name].${new Date().getTime()}.js`, |
||||||
chunkFileNames: `assets/[name].${new Date().getTime()}.js`, |
assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`, |
||||||
assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`, |
compact: true, |
||||||
compact: true, |
manualChunks: { |
||||||
manualChunks: { |
vue: ['vue'] |
||||||
vue: ['vue'] |
}, |
||||||
}, |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
}) |
||||||
}) |
} |
||||||
|
|||||||
Loading…
Reference in new issue