开发商务模块的文件预览功能
This commit is contained in:
chabai
parent
e098cfd8fa
commit
fdd20e9a9b
|
|
@ -57,6 +57,7 @@ declare global {
|
||||||
const useCssVars: typeof import('vue')['useCssVars']
|
const useCssVars: typeof import('vue')['useCssVars']
|
||||||
const useId: typeof import('vue')['useId']
|
const useId: typeof import('vue')['useId']
|
||||||
const useLink: typeof import('vue-router')['useLink']
|
const useLink: typeof import('vue-router')['useLink']
|
||||||
|
const useModel: typeof import('vue')['useModel']
|
||||||
const useRoute: typeof import('vue-router')['useRoute']
|
const useRoute: typeof import('vue-router')['useRoute']
|
||||||
const useRouter: typeof import('vue-router')['useRouter']
|
const useRouter: typeof import('vue-router')['useRouter']
|
||||||
const useSlots: typeof import('vue')['useSlots']
|
const useSlots: typeof import('vue')['useSlots']
|
||||||
|
|
|
||||||
|
|
@ -552,7 +552,7 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
// 导入核心依赖
|
// 导入核心依赖
|
||||||
import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue';
|
import { ref, reactive, onMounted, computed, watch, nextTick, h } from 'vue';
|
||||||
import {
|
import {
|
||||||
IconFolder,
|
IconFolder,
|
||||||
IconFile,
|
IconFile,
|
||||||
|
|
@ -1358,9 +1358,15 @@ const handlePreview = async (file) => {
|
||||||
// PDF预览（在新窗口打开）
|
// PDF预览（在新窗口打开）
|
||||||
window.open(url, '_blank');
|
window.open(url, '_blank');
|
||||||
Message.success('PDF文件已在新窗口打开');
|
Message.success('PDF文件已在新窗口打开');
|
||||||
} else if (['txt', 'md', 'json', 'xml', 'csv'].includes(ext)) {
|
} else if (['txt', 'md', 'json', 'xml', 'csv', 'log'].includes(ext)) {
|
||||||
// 文本文件预览
|
// 文本文件预览
|
||||||
showTextPreview(blob, fileName);
|
showTextPreview(blob, fileName);
|
||||||
|
} else if (['mp4', 'avi', 'mov', 'wmv', 'flv'].includes(ext)) {
|
||||||
|
// 视频预览
|
||||||
|
showVideoPreview(url, fileName);
|
||||||
|
} else if (['mp3', 'wav', 'flac', 'aac'].includes(ext)) {
|
||||||
|
// 音频预览
|
||||||
|
showAudioPreview(url, fileName);
|
||||||
} else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
|
} else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
|
||||||
// Office文档预览提示
|
// Office文档预览提示
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
|
|
@ -1409,47 +1415,267 @@ const handlePreview = async (file) => {
|
||||||
|
|
||||||
// 显示图片预览
|
// 显示图片预览
|
||||||
const showImagePreview = (url, fileName) => {
|
const showImagePreview = (url, fileName) => {
|
||||||
const container = document.createElement('div');
|
const imageScale = ref(1);
|
||||||
container.style.cssText = `
|
const imageRotation = ref(0);
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const img = document.createElement('img');
|
const container = h('div', {
|
||||||
img.src = url;
|
style: {
|
||||||
img.style.cssText = `
|
width: '100%',
|
||||||
max-width: 100%;
|
height: '100%',
|
||||||
max-height: 70vh;
|
display: 'flex',
|
||||||
object-fit: contain;
|
flexDirection: 'column',
|
||||||
border-radius: 8px;
|
alignItems: 'center',
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
justifyContent: 'center',
|
||||||
`;
|
padding: '24px',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
borderRadius: '16px',
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
// 背景装饰
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '-50%',
|
||||||
|
left: '-50%',
|
||||||
|
width: '200%',
|
||||||
|
height: '200%',
|
||||||
|
background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
|
||||||
|
animation: 'float 6s ease-in-out infinite'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
const title = document.createElement('div');
|
// 顶部工具栏
|
||||||
title.textContent = fileName;
|
h('div', {
|
||||||
title.style.cssText = `
|
style: {
|
||||||
margin-top: 16px;
|
display: 'flex',
|
||||||
font-size: 14px;
|
justifyContent: 'center',
|
||||||
color: #666;
|
alignItems: 'center',
|
||||||
text-align: center;
|
gap: '16px',
|
||||||
word-break: break-all;
|
marginBottom: '24px',
|
||||||
`;
|
padding: '16px 24px',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
borderRadius: '16px',
|
||||||
|
boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.2)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 10
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('button', {
|
||||||
|
onClick: () => imageScale.value = Math.max(0.3, imageScale.value - 0.2),
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '🔍'),
|
||||||
|
'缩小'
|
||||||
|
]),
|
||||||
|
h('button', {
|
||||||
|
onClick: () => imageScale.value = Math.min(4, imageScale.value + 0.2),
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '🔍'),
|
||||||
|
'放大'
|
||||||
|
]),
|
||||||
|
h('button', {
|
||||||
|
onClick: () => imageRotation.value += 90,
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '🔄'),
|
||||||
|
'旋转'
|
||||||
|
]),
|
||||||
|
h('button', {
|
||||||
|
onClick: () => {
|
||||||
|
imageScale.value = 1;
|
||||||
|
imageRotation.value = 0;
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '🏠'),
|
||||||
|
'重置'
|
||||||
|
])
|
||||||
|
]),
|
||||||
|
|
||||||
container.appendChild(img);
|
// 图片容器
|
||||||
container.appendChild(title);
|
h('div', {
|
||||||
|
style: {
|
||||||
|
flex: 1,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
overflow: 'auto',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
padding: '32px',
|
||||||
|
boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
|
||||||
|
minHeight: '500px',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.3)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 5
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('img', {
|
||||||
|
src: url,
|
||||||
|
style: {
|
||||||
|
maxWidth: '100%',
|
||||||
|
maxHeight: '100%',
|
||||||
|
objectFit: 'contain',
|
||||||
|
borderRadius: '16px',
|
||||||
|
transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
transform: `scale(${imageScale.value}) rotate(${imageRotation.value}deg)`,
|
||||||
|
boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
|
||||||
|
border: '2px solid rgba(255,255,255,0.8)'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]),
|
||||||
|
|
||||||
|
// 文件名
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
marginTop: '20px',
|
||||||
|
fontSize: '16px',
|
||||||
|
color: 'white',
|
||||||
|
textAlign: 'center',
|
||||||
|
wordBreak: 'break-all',
|
||||||
|
padding: '12px 24px',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.15)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.2)',
|
||||||
|
fontWeight: '500',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 5
|
||||||
|
}
|
||||||
|
}, fileName)
|
||||||
|
]);
|
||||||
|
|
||||||
Modal.info({
|
Modal.info({
|
||||||
title: '图片预览',
|
title: h('div', {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '12px',
|
||||||
|
fontSize: '20px',
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#2c3e50',
|
||||||
|
textAlign: 'center',
|
||||||
|
width: '100%',
|
||||||
|
justifyContent: 'center'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '24px' } }, '🖼️'),
|
||||||
|
'图片预览'
|
||||||
|
]),
|
||||||
content: container,
|
content: container,
|
||||||
width: '80%',
|
width: '95%',
|
||||||
|
style: {
|
||||||
|
maxWidth: '1600px',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
|
||||||
|
border: '3px solid rgba(255,255,255,0.2)'
|
||||||
|
},
|
||||||
|
mask: true,
|
||||||
maskClosable: true,
|
maskClosable: true,
|
||||||
footer: null
|
footer: null,
|
||||||
|
closable: true,
|
||||||
|
okText: null,
|
||||||
|
cancelText: null
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -1457,29 +1683,208 @@ const showImagePreview = (url, fileName) => {
|
||||||
const showTextPreview = async (blob, fileName) => {
|
const showTextPreview = async (blob, fileName) => {
|
||||||
try {
|
try {
|
||||||
const text = await blob.text();
|
const text = await blob.text();
|
||||||
const container = document.createElement('div');
|
const fontSize = ref(16);
|
||||||
container.style.cssText = `
|
|
||||||
width: 100%;
|
const container = h('div', {
|
||||||
height: 400px;
|
style: {
|
||||||
border: 1px solid #e5e5e5;
|
width: '100%',
|
||||||
border-radius: 6px;
|
height: '100%',
|
||||||
padding: 16px;
|
display: 'flex',
|
||||||
background-color: #fafafa;
|
flexDirection: 'column',
|
||||||
font-family: 'Courier New', monospace;
|
padding: '24px',
|
||||||
font-size: 13px;
|
boxSizing: 'border-box',
|
||||||
line-height: 1.6;
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
overflow: auto;
|
borderRadius: '16px',
|
||||||
white-space: pre-wrap;
|
position: 'relative',
|
||||||
word-break: break-word;
|
overflow: 'hidden'
|
||||||
`;
|
}
|
||||||
container.textContent = text;
|
}, [
|
||||||
|
// 背景装饰
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '-50%',
|
||||||
|
left: '-50%',
|
||||||
|
width: '200%',
|
||||||
|
height: '200%',
|
||||||
|
background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
|
||||||
|
animation: 'float 6s ease-in-out infinite'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
// 顶部工具栏
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '16px',
|
||||||
|
marginBottom: '24px',
|
||||||
|
padding: '16px 24px',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
borderRadius: '16px',
|
||||||
|
boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.2)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 10
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('button', {
|
||||||
|
onClick: () => fontSize.value = Math.max(12, fontSize.value - 2),
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '🔍'),
|
||||||
|
'缩小字体'
|
||||||
|
]),
|
||||||
|
h('button', {
|
||||||
|
onClick: () => fontSize.value = Math.min(28, fontSize.value + 2),
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '🔍'),
|
||||||
|
'放大字体'
|
||||||
|
]),
|
||||||
|
h('button', {
|
||||||
|
onClick: () => {
|
||||||
|
const textArea = document.createElement('textarea');
|
||||||
|
textArea.value = text;
|
||||||
|
document.body.appendChild(textArea);
|
||||||
|
textArea.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(textArea);
|
||||||
|
Message.success('文本已复制到剪贴板');
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
padding: '10px 16px',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '12px',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
color: 'white',
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: '500',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '8px',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
|
||||||
|
},
|
||||||
|
onMouseenter: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(-2px)';
|
||||||
|
e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
|
||||||
|
},
|
||||||
|
onMouseleave: (e) => {
|
||||||
|
e.target.style.transform = 'translateY(0)';
|
||||||
|
e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '18px' } }, '📋'),
|
||||||
|
'复制文本'
|
||||||
|
])
|
||||||
|
]),
|
||||||
|
|
||||||
|
// 文本内容
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
padding: '32px',
|
||||||
|
boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
|
||||||
|
overflow: 'auto',
|
||||||
|
fontFamily: "'JetBrains Mono', 'Fira Code', 'Courier New', 'Monaco', 'Menlo', monospace",
|
||||||
|
fontSize: `${fontSize.value}px`,
|
||||||
|
lineHeight: '1.8',
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
wordBreak: 'break-word',
|
||||||
|
color: '#2c3e50',
|
||||||
|
border: '1px solid rgba(255,255,255,0.3)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 5
|
||||||
|
}
|
||||||
|
}, text)
|
||||||
|
]);
|
||||||
|
|
||||||
Modal.info({
|
Modal.info({
|
||||||
title: `文本预览 - ${fileName}`,
|
title: h('div', {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '12px',
|
||||||
|
fontSize: '20px',
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#2c3e50',
|
||||||
|
textAlign: 'center',
|
||||||
|
width: '100%',
|
||||||
|
justifyContent: 'center'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '24px' } }, '📄'),
|
||||||
|
`文本预览 - ${fileName}`
|
||||||
|
]),
|
||||||
content: container,
|
content: container,
|
||||||
width: '70%',
|
width: '90%',
|
||||||
|
style: {
|
||||||
|
maxWidth: '1400px',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
|
||||||
|
border: '3px solid rgba(255,255,255,0.2)'
|
||||||
|
},
|
||||||
|
mask: true,
|
||||||
maskClosable: true,
|
maskClosable: true,
|
||||||
footer: null
|
footer: null,
|
||||||
|
closable: true,
|
||||||
|
okText: null,
|
||||||
|
cancelText: null
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('文本预览失败:', error);
|
console.error('文本预览失败:', error);
|
||||||
|
|
@ -1487,6 +1892,249 @@ const showTextPreview = async (blob, fileName) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 显示视频预览
|
||||||
|
const showVideoPreview = (url, fileName) => {
|
||||||
|
const container = h('div', {
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '24px',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
borderRadius: '16px',
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
// 背景装饰
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '-50%',
|
||||||
|
left: '-50%',
|
||||||
|
width: '200%',
|
||||||
|
height: '200%',
|
||||||
|
background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
|
||||||
|
animation: 'float 6s ease-in-out infinite'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
// 视频容器
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: '1000px',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
padding: '32px',
|
||||||
|
boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.3)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 5
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('video', {
|
||||||
|
src: url,
|
||||||
|
controls: true,
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
maxHeight: '70vh',
|
||||||
|
borderRadius: '16px',
|
||||||
|
background: '#000',
|
||||||
|
boxShadow: '0 12px 32px rgba(0,0,0,0.3)',
|
||||||
|
border: '3px solid rgba(255,255,255,0.8)',
|
||||||
|
transition: 'all 0.3s ease'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]),
|
||||||
|
|
||||||
|
// 文件名
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
marginTop: '20px',
|
||||||
|
fontSize: '16px',
|
||||||
|
color: 'white',
|
||||||
|
wordBreak: 'break-all',
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '12px 24px',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.15)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.2)',
|
||||||
|
fontWeight: '500',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 5
|
||||||
|
}
|
||||||
|
}, fileName)
|
||||||
|
]);
|
||||||
|
|
||||||
|
Modal.info({
|
||||||
|
title: h('div', {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '12px',
|
||||||
|
fontSize: '20px',
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#2c3e50',
|
||||||
|
textAlign: 'center',
|
||||||
|
width: '100%',
|
||||||
|
justifyContent: 'center'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '24px' } }, '🎬'),
|
||||||
|
'视频预览'
|
||||||
|
]),
|
||||||
|
content: container,
|
||||||
|
width: '90%',
|
||||||
|
style: {
|
||||||
|
maxWidth: '1400px',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
|
||||||
|
border: '3px solid rgba(255,255,255,0.2)'
|
||||||
|
},
|
||||||
|
mask: true,
|
||||||
|
maskClosable: true,
|
||||||
|
footer: null,
|
||||||
|
closable: true,
|
||||||
|
okText: null,
|
||||||
|
cancelText: null
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 显示音频预览
|
||||||
|
const showAudioPreview = (url, fileName) => {
|
||||||
|
const container = h('div', {
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: '24px',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
borderRadius: '16px',
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
// 背景装饰
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '-50%',
|
||||||
|
left: '-50%',
|
||||||
|
width: '200%',
|
||||||
|
height: '200%',
|
||||||
|
background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
|
||||||
|
animation: 'float 6s ease-in-out infinite'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
// 音频容器
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: '500px',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
padding: '40px',
|
||||||
|
boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
|
||||||
|
backdropFilter: 'blur(10px)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.3)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 5,
|
||||||
|
textAlign: 'center'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
// 音频图标
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
fontSize: '64px',
|
||||||
|
marginBottom: '24px',
|
||||||
|
animation: 'pulse 2s ease-in-out infinite'
|
||||||
|
}
|
||||||
|
}, '🎵'),
|
||||||
|
|
||||||
|
// 音频播放器
|
||||||
|
h('audio', {
|
||||||
|
src: url,
|
||||||
|
controls: true,
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
height: '50px',
|
||||||
|
borderRadius: '12px',
|
||||||
|
marginBottom: '20px'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
// 文件名
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
fontSize: '16px',
|
||||||
|
color: '#2c3e50',
|
||||||
|
wordBreak: 'break-all',
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '12px 16px',
|
||||||
|
backgroundColor: 'rgba(102, 126, 234, 0.1)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
fontWeight: '500',
|
||||||
|
border: '1px solid rgba(102, 126, 234, 0.2)'
|
||||||
|
}
|
||||||
|
}, fileName)
|
||||||
|
])
|
||||||
|
]);
|
||||||
|
|
||||||
|
Modal.info({
|
||||||
|
title: h('div', {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '12px',
|
||||||
|
fontSize: '20px',
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#2c3e50',
|
||||||
|
textAlign: 'center',
|
||||||
|
width: '100%',
|
||||||
|
justifyContent: 'center'
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('span', { style: { fontSize: '24px' } }, '🎵'),
|
||||||
|
'音频预览'
|
||||||
|
]),
|
||||||
|
content: container,
|
||||||
|
width: '70%',
|
||||||
|
style: {
|
||||||
|
maxWidth: '800px',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
|
||||||
|
border: '3px solid rgba(255,255,255,0.2)'
|
||||||
|
},
|
||||||
|
mask: true,
|
||||||
|
maskClosable: true,
|
||||||
|
footer: null,
|
||||||
|
closable: true,
|
||||||
|
okText: null,
|
||||||
|
cancelText: null
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// 下载文件
|
// 下载文件
|
||||||
const handleDownload = async (file) => {
|
const handleDownload = async (file) => {
|
||||||
try {
|
try {
|
||||||
|
|
@ -2393,6 +3041,95 @@ onMounted(() => {
|
||||||
to { transform: rotate(360deg); }
|
to { transform: rotate(360deg); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 预览弹窗动画效果 */
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||||
|
25% { transform: translateY(-10px) rotate(1deg); }
|
||||||
|
50% { transform: translateY(-5px) rotate(-1deg); }
|
||||||
|
75% { transform: translateY(-15px) rotate(0.5deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { transform: scale(1); opacity: 1; }
|
||||||
|
50% { transform: scale(1.05); opacity: 0.8; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-30px) scale(0.9);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 预览弹窗样式增强 */
|
||||||
|
:deep(.arco-modal) {
|
||||||
|
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-modal-mask) {
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-modal-content) {
|
||||||
|
border-radius: 20px !important;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 32px 96px rgba(0,0,0,0.3) !important;
|
||||||
|
border: 3px solid rgba(255,255,255,0.2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-modal-header) {
|
||||||
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.2);
|
||||||
|
padding: 20px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-modal-title) {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.arco-modal-close) {
|
||||||
|
background: rgba(255,255,255,0.9);
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255,255,255,1);
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮悬停效果增强 */
|
||||||
|
:deep(.arco-btn) {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 16px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 骨架屏样式 */
|
/* 骨架屏样式 */
|
||||||
.skeleton-item {
|
.skeleton-item {
|
||||||
height: 36px;
|
height: 36px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue