开发商务模块的文件预览功能
This commit is contained in:
chabai
parent
e098cfd8fa
commit
fdd20e9a9b
|
|
@ -57,6 +57,7 @@ declare global {
|
|||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useId: typeof import('vue')['useId']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useModel: typeof import('vue')['useModel']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
|
|
|
|||
|
|
@ -552,7 +552,7 @@
|
|||
|
||||
<script setup>
|
||||
// 导入核心依赖
|
||||
import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue';
|
||||
import { ref, reactive, onMounted, computed, watch, nextTick, h } from 'vue';
|
||||
import {
|
||||
IconFolder,
|
||||
IconFile,
|
||||
|
|
@ -1358,9 +1358,15 @@ const handlePreview = async (file) => {
|
|||
// PDF预览（在新窗口打开）
|
||||
window.open(url, '_blank');
|
||||
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);
|
||||
} 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)) {
|
||||
// Office文档预览提示
|
||||
Modal.confirm({
|
||||
|
|
@ -1409,47 +1415,267 @@ const handlePreview = async (file) => {
|
|||
|
||||
// 显示图片预览
|
||||
const showImagePreview = (url, fileName) => {
|
||||
const container = document.createElement('div');
|
||||
container.style.cssText = `
|
||||
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');
|
||||
img.src = url;
|
||||
img.style.cssText = `
|
||||
max-width: 100%;
|
||||
max-height: 70vh;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
`;
|
||||
|
||||
const title = document.createElement('div');
|
||||
title.textContent = fileName;
|
||||
title.style.cssText = `
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
`;
|
||||
|
||||
container.appendChild(img);
|
||||
container.appendChild(title);
|
||||
const imageScale = ref(1);
|
||||
const imageRotation = ref(0);
|
||||
|
||||
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: {
|
||||
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: () => 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' } }, '🏠'),
|
||||
'重置'
|
||||
])
|
||||
]),
|
||||
|
||||
// 图片容器
|
||||
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({
|
||||
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,
|
||||
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,
|
||||
footer: null
|
||||
footer: null,
|
||||
closable: true,
|
||||
okText: null,
|
||||
cancelText: null
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -1457,29 +1683,208 @@ const showImagePreview = (url, fileName) => {
|
|||
const showTextPreview = async (blob, fileName) => {
|
||||
try {
|
||||
const text = await blob.text();
|
||||
const container = document.createElement('div');
|
||||
container.style.cssText = `
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
background-color: #fafafa;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
`;
|
||||
container.textContent = text;
|
||||
const fontSize = ref(16);
|
||||
|
||||
const container = h('div', {
|
||||
style: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
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: {
|
||||
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({
|
||||
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,
|
||||
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,
|
||||
footer: null
|
||||
footer: null,
|
||||
closable: true,
|
||||
okText: null,
|
||||
cancelText: null
|
||||
});
|
||||
} catch (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) => {
|
||||
try {
|
||||
|
|
@ -2393,6 +3041,95 @@ onMounted(() => {
|
|||
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 {
|
||||
height: 36px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue