文件预览
This commit is contained in:
parent
2bda2b75a8
commit
7d38fc745b
|
|
@ -1,303 +1,156 @@
|
|||
<!-- OnlyOfficeViewer.vue -->
|
||||
<template>
|
||||
<div class="onlyoffice-viewer" :style="{ height: height }">
|
||||
<!-- 工具栏 -->
|
||||
<div v-if="!loading && !error" class="viewer-toolbar">
|
||||
<div class="toolbar-left">
|
||||
<button @click="handleClose" class="toolbar-btn" :disabled="closing">
|
||||
<i class="el-icon-back"></i> 返回
|
||||
</button>
|
||||
<span class="document-title" :title="documentName">{{ documentName }}</span>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<button v-if="allowDownload" @click="downloadDocument" class="toolbar-btn download" :disabled="downloading">
|
||||
<i class="el-icon-download"></i> {{ downloading ? '下载中...' : '下载' }}
|
||||
</button>
|
||||
<button v-if="!isMobile && allowFullscreen" @click="toggleFullscreen" class="toolbar-btn">
|
||||
<i :class="isFullscreen ? 'el-icon-copy-document' : 'el-icon-full-screen'"></i>
|
||||
{{ isFullscreen ? '退出全屏' : '全屏' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="viewer-loading">
|
||||
<div class="loading-content">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>{{ loadingText }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-if="error" class="viewer-error">
|
||||
<div class="error-content">
|
||||
<div class="error-icon">❌</div>
|
||||
<h3>加载失败</h3>
|
||||
<p>{{ errorMessage }}</p>
|
||||
<button @click="retry" class="retry-btn" :disabled="loading">重试</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑器容器 -->
|
||||
<div v-if="!loading && !error" ref="editorContainer" class="editor-container"
|
||||
:class="{ 'fullscreen': isFullscreen }" :style="{ height: containerHeight, width: '100%' }"></div>
|
||||
|
||||
<!-- 移动端提示 -->
|
||||
<div v-if="isMobile && !loading && !error" class="mobile-tip">
|
||||
<p>💡 在移动端建议横屏查看以获得更好体验</p>
|
||||
</div>
|
||||
<div class="onlyoffice-container">
|
||||
<div id="placeholder" class="editor-placeholder"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getConfigAPI } from '@/api/common/onlyOfficeViewer';
|
||||
import { downloadFileWithLoading } from '@/utils/download';
|
||||
|
||||
import { getConfigAPI, generateCallbackTokenAPI } from '@/api/common/onlyOfficeViewer'
|
||||
export default {
|
||||
name: 'OnlyOfficeViewer',
|
||||
|
||||
props: {
|
||||
// 文档ID
|
||||
documentId: {
|
||||
// 可以添加 props 来动态配置
|
||||
documentUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
default: 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/11/03/716d9f3d89434c56bc49296dbbccc226.docx'
|
||||
},
|
||||
// 文档名称
|
||||
documentName: {
|
||||
documentTitle: {
|
||||
type: String,
|
||||
required: true
|
||||
default: '716d9f3d89434c56bc49296dbbccc226.docx'
|
||||
},
|
||||
// 组件高度
|
||||
height: {
|
||||
documentKey: {
|
||||
type: String,
|
||||
default: '600px'
|
||||
default: '1'
|
||||
},
|
||||
// 是否允许下载
|
||||
allowDownload: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
fileName: {
|
||||
type: String,
|
||||
default: 'technicalSolutionDatabase/2025/11/03/716d9f3d89434c56bc49296dbbccc226.docx'
|
||||
},
|
||||
// 是否允许全屏
|
||||
allowFullscreen: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 查看模式：view（查看）或 edit（编辑）
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'view',
|
||||
default: 'view', // 'view' 或 'edit'
|
||||
validator: (value) => ['view', 'edit'].includes(value)
|
||||
},
|
||||
// 下载API路径（可选，默认使用统一的下载接口）
|
||||
downloadUrl: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: 'desktop', // 'desktop', 'mobile', 'embedded'
|
||||
validator: (value) => ['desktop', 'mobile', 'embedded'].includes(value)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
loadingText: '正在加载文档...',
|
||||
error: false,
|
||||
errorMessage: '',
|
||||
editor: null,
|
||||
isFullscreen: false,
|
||||
isMobile: false,
|
||||
downloading: false,
|
||||
closing: false
|
||||
docEditor: null,
|
||||
onlyOfficeScriptLoaded: false,
|
||||
editorConfig: {}
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
// API基础URL
|
||||
apiBaseUrl() {
|
||||
return process.env.VUE_APP_BASE_API || '';
|
||||
},
|
||||
// OnlyOffice服务URL
|
||||
onlyOfficeUrl() {
|
||||
return process.env.VUE_APP_ONLYOFFICE_URL || process.env.VUE_APP_BASE_API || '';
|
||||
},
|
||||
// 容器高度（减去工具栏高度）
|
||||
containerHeight() {
|
||||
if (this.isFullscreen) {
|
||||
return '100vh';
|
||||
}
|
||||
// 工具栏高度约48px，减去后计算容器高度
|
||||
if (this.height.includes('vh')) {
|
||||
// 如果是vh单位，直接计算
|
||||
const vhValue = parseFloat(this.height);
|
||||
return `calc(${vhValue}vh - 48px)`;
|
||||
}
|
||||
const heightValue = parseInt(this.height);
|
||||
if (isNaN(heightValue)) {
|
||||
return 'calc(100% - 48px)';
|
||||
}
|
||||
return `${Math.max(heightValue - 48, 200)}px`; // 最小高度200px
|
||||
}
|
||||
created() {
|
||||
this.getConfig();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.checkMobile();
|
||||
this.setupFullscreenListener();
|
||||
this.initViewer();
|
||||
this.initOnlyOffice();
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.cleanup();
|
||||
this.destroyEditor();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 初始化查看器
|
||||
*/
|
||||
async initViewer() {
|
||||
// 加载编辑器配置
|
||||
async getConfig() {
|
||||
try {
|
||||
this.loading = true;
|
||||
this.loadingText = '正在加载文档...';
|
||||
this.error = false;
|
||||
this.errorMessage = '';
|
||||
|
||||
// 检查容器是否存在
|
||||
if (!this.$refs.editorContainer) {
|
||||
throw new Error('编辑器容器未找到');
|
||||
const res = await getConfigAPI({
|
||||
fileId: this.documentKey,
|
||||
fileName: this.fileName,
|
||||
mode: this.mode,
|
||||
type: this.type
|
||||
})
|
||||
if (res.code !== 200) {
|
||||
throw new Error(res.msg || '获取编辑器配置失败');
|
||||
}
|
||||
if (!res.data) {
|
||||
throw new Error('配置数据为空');
|
||||
}
|
||||
|
||||
|
||||
this.editorConfig = res.data;
|
||||
this.$set(this.editorConfig, 'events', {
|
||||
onDocumentReady: this.onDocumentReady,
|
||||
onError: this.onEditorError,
|
||||
onAppReady: this.onAppReady
|
||||
});
|
||||
|
||||
console.log('编辑器配置', this.editorConfig);
|
||||
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取编辑器配置失败:', error);
|
||||
throw new Error('获取编辑器配置失败');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化 OnlyOffice
|
||||
*/
|
||||
async initOnlyOffice() {
|
||||
try {
|
||||
// 加载 OnlyOffice 脚本
|
||||
this.loadingText = '正在加载 OnlyOffice 脚本...';
|
||||
await this.loadOnlyOfficeScript();
|
||||
|
||||
// 获取编辑器配置
|
||||
this.loadingText = '正在获取文档配置...';
|
||||
const config = await this.getEditorConfig();
|
||||
console.log('OnlyOffice 配置:', config);
|
||||
|
||||
// 验证配置格式
|
||||
if (!config || typeof config !== 'object') {
|
||||
throw new Error('获取的配置格式不正确');
|
||||
}
|
||||
|
||||
// 验证必要的配置项
|
||||
if (!config.document || !config.document.url) {
|
||||
throw new Error('配置中缺少文档URL');
|
||||
}
|
||||
|
||||
if (!config.documentType) {
|
||||
console.warn('配置中缺少 documentType，将尝试自动检测');
|
||||
}
|
||||
|
||||
// 创建编辑器实例
|
||||
if (!window.DocsAPI) {
|
||||
throw new Error('OnlyOffice API 未加载成功');
|
||||
}
|
||||
|
||||
this.loadingText = '正在初始化编辑器...';
|
||||
|
||||
// 确保容器有正确的尺寸
|
||||
const container = this.$refs.editorContainer;
|
||||
if (container) {
|
||||
// 确保容器可见
|
||||
container.style.display = 'block';
|
||||
container.style.width = '100%';
|
||||
|
||||
// 等待下一个tick确保DOM已更新
|
||||
await this.$nextTick();
|
||||
|
||||
// 验证容器尺寸
|
||||
const rect = container.getBoundingClientRect();
|
||||
if (rect.width === 0 || rect.height === 0) {
|
||||
console.warn('容器尺寸为0，等待尺寸调整...', rect);
|
||||
// 等待一段时间再初始化
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
}
|
||||
}
|
||||
|
||||
// 创建编辑器实例
|
||||
try {
|
||||
this.editor = new window.DocsAPI.DocEditor(
|
||||
this.$refs.editorContainer,
|
||||
config
|
||||
);
|
||||
|
||||
// 监听编辑器事件（如果存在）
|
||||
if (this.editor && this.editor.events) {
|
||||
// 等待编辑器准备就绪
|
||||
this.editor.events.on('onDocumentReady', () => {
|
||||
console.log('OnlyOffice 文档已准备就绪');
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
this.editor.events.on('onAppReady', () => {
|
||||
console.log('OnlyOffice 应用已准备就绪');
|
||||
// 应用准备就绪后，可以隐藏加载状态
|
||||
setTimeout(() => {
|
||||
if (this.loading) {
|
||||
this.loading = false;
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
this.editor.events.on('onError', (error) => {
|
||||
console.error('OnlyOffice 错误:', error);
|
||||
this.handleError(`编辑器错误: ${error?.data || error?.message || '未知错误'}`);
|
||||
});
|
||||
}
|
||||
|
||||
// 设置超时，防止一直加载
|
||||
setTimeout(() => {
|
||||
if (this.loading) {
|
||||
this.loading = false;
|
||||
console.warn('编辑器初始化超时，但可能仍在加载中');
|
||||
}
|
||||
}, 30000); // 30秒超时
|
||||
|
||||
// 默认设置加载完成
|
||||
this.loading = false;
|
||||
this.$emit('loaded', this.editor);
|
||||
} catch (editorError) {
|
||||
console.error('创建编辑器实例失败:', editorError);
|
||||
throw new Error(`创建编辑器失败: ${editorError.message}`);
|
||||
}
|
||||
// 初始化编辑器
|
||||
this.initDocEditor();
|
||||
} catch (error) {
|
||||
console.error('初始化文档查看器失败:', error);
|
||||
const errorMsg = error?.message || error?.response?.data?.msg || '加载文档失败，请重试';
|
||||
this.handleError(errorMsg);
|
||||
console.error('初始化 OnlyOffice 失败:', error);
|
||||
this.$emit('error', error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载 OnlyOffice 脚本
|
||||
* @returns {Promise}
|
||||
*/
|
||||
loadOnlyOfficeScript() {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 如果已经加载，直接返回
|
||||
if (window.DocsAPI) {
|
||||
this.onlyOfficeScriptLoaded = true;
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否正在加载
|
||||
const existingScript = document.querySelector('script[data-onlyoffice-api]');
|
||||
const existingScript = document.querySelector('script[data-onlyoffice]');
|
||||
if (existingScript) {
|
||||
existingScript.addEventListener('load', resolve);
|
||||
existingScript.addEventListener('error', () => {
|
||||
reject(new Error('加载 OnlyOffice 脚本失败'));
|
||||
existingScript.addEventListener('load', () => {
|
||||
this.onlyOfficeScriptLoaded = true;
|
||||
resolve();
|
||||
});
|
||||
existingScript.addEventListener('error', reject);
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建并加载脚本
|
||||
// 创建新的脚本元素
|
||||
const script = document.createElement('script');
|
||||
script.src = `${this.onlyOfficeUrl}/web-apps/apps/api/documents/api.js`;
|
||||
script.setAttribute('data-onlyoffice-api', 'true');
|
||||
// onlyOfficeUrl 是 OnlyOffice 服务地址
|
||||
const onlyOfficeUrl = process.env.VUE_APP_ONLYOFFICE_URL;
|
||||
script.src = `${onlyOfficeUrl}/web-apps/apps/api/documents/api.js`;
|
||||
script.setAttribute('data-onlyoffice', 'true');
|
||||
|
||||
script.onload = () => {
|
||||
// 等待一小段时间确保 API 完全初始化
|
||||
setTimeout(resolve, 100);
|
||||
this.onlyOfficeScriptLoaded = true;
|
||||
// 等待 API 完全初始化
|
||||
setTimeout(() => {
|
||||
if (window.DocsAPI) {
|
||||
resolve();
|
||||
} else {
|
||||
reject(new Error('OnlyOffice API 未正确加载'));
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
script.onerror = () => {
|
||||
reject(new Error('加载 OnlyOffice 脚本失败，请检查 OnlyOffice 服务是否正常运行'));
|
||||
reject(new Error('加载 OnlyOffice 脚本失败'));
|
||||
};
|
||||
|
||||
document.head.appendChild(script);
|
||||
|
|
@ -305,438 +158,98 @@ export default {
|
|||
},
|
||||
|
||||
/**
|
||||
* 获取编辑器配置
|
||||
* @returns {Promise<Object>}
|
||||
* 初始化文档编辑器
|
||||
*/
|
||||
async getEditorConfig() {
|
||||
try {
|
||||
const res = await getConfigAPI({
|
||||
fileId: this.documentId,
|
||||
fileName: this.documentName,
|
||||
mode: this.mode
|
||||
});
|
||||
|
||||
if (res.code !== 200) {
|
||||
throw new Error(res.msg || '获取编辑器配置失败');
|
||||
}
|
||||
|
||||
return res.data;
|
||||
} catch (error) {
|
||||
console.error('获取编辑器配置失败:', error);
|
||||
const errorMsg = error?.response?.data?.msg || error?.message || '获取文档配置失败';
|
||||
throw new Error(errorMsg);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 下载文档
|
||||
*/
|
||||
async downloadDocument() {
|
||||
if (!this.allowDownload || this.downloading) {
|
||||
initDocEditor() {
|
||||
if (!window.DocsAPI) {
|
||||
console.error('DocsAPI 未加载');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.downloading = true;
|
||||
this.$emit('downloading');
|
||||
|
||||
// 使用统一的下载方法
|
||||
let downloadPath = this.downloadUrl;
|
||||
if (!downloadPath) {
|
||||
// 默认下载路径
|
||||
downloadPath = `smartBid/documents/download?fileId=${this.documentId}&fileName=${encodeURIComponent(this.documentName)}`;
|
||||
}
|
||||
|
||||
await downloadFileWithLoading(
|
||||
downloadPath,
|
||||
this.documentName,
|
||||
'正在下载文档，请稍候...'
|
||||
);
|
||||
|
||||
this.$emit('download-success');
|
||||
this.docEditor = new window.DocsAPI.DocEditor("placeholder", this.editorConfig);
|
||||
this.$emit('initialized', this.docEditor);
|
||||
} catch (error) {
|
||||
console.error('下载文档失败:', error);
|
||||
this.$message?.error?.('下载文档失败，请稍后重试');
|
||||
this.$emit('download-error', error);
|
||||
} finally {
|
||||
this.downloading = false;
|
||||
console.error('创建 OnlyOffice 编辑器失败:', error);
|
||||
this.$emit('error', error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换全屏
|
||||
* 文档准备就绪回调
|
||||
*/
|
||||
toggleFullscreen() {
|
||||
if (!this.allowFullscreen) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.isFullscreen) {
|
||||
this.enterFullscreen();
|
||||
} else {
|
||||
this.exitFullscreen();
|
||||
}
|
||||
onDocumentReady() {
|
||||
console.log("文档准备好了");
|
||||
this.$emit('document-ready');
|
||||
},
|
||||
|
||||
/**
|
||||
* 进入全屏
|
||||
* 应用准备就绪回调
|
||||
*/
|
||||
enterFullscreen() {
|
||||
const element = this.$refs.editorContainer;
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
const requestFullscreen =
|
||||
element.requestFullscreen ||
|
||||
element.webkitRequestFullscreen ||
|
||||
element.mozRequestFullScreen ||
|
||||
element.msRequestFullscreen;
|
||||
|
||||
if (requestFullscreen) {
|
||||
requestFullscreen.call(element);
|
||||
} else {
|
||||
this.$message?.warning?.('您的浏览器不支持全屏功能');
|
||||
}
|
||||
onAppReady() {
|
||||
console.log("OnlyOffice 应用准备就绪");
|
||||
this.$emit('app-ready');
|
||||
},
|
||||
|
||||
/**
|
||||
* 退出全屏
|
||||
* 编辑器错误回调
|
||||
*/
|
||||
exitFullscreen() {
|
||||
const exitFullscreen =
|
||||
document.exitFullscreen ||
|
||||
document.webkitExitFullscreen ||
|
||||
document.mozCancelFullScreen ||
|
||||
document.msExitFullscreen;
|
||||
|
||||
if (exitFullscreen) {
|
||||
exitFullscreen.call(document);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置全屏监听
|
||||
*/
|
||||
setupFullscreenListener() {
|
||||
const events = [
|
||||
'fullscreenchange',
|
||||
'webkitfullscreenchange',
|
||||
'mozfullscreenchange',
|
||||
'msfullscreenchange'
|
||||
];
|
||||
|
||||
events.forEach(event => {
|
||||
document.addEventListener(event, this.handleFullscreenChange);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 清理全屏监听
|
||||
*/
|
||||
cleanupFullscreenListener() {
|
||||
const events = [
|
||||
'fullscreenchange',
|
||||
'webkitfullscreenchange',
|
||||
'mozfullscreenchange',
|
||||
'msfullscreenchange'
|
||||
];
|
||||
|
||||
events.forEach(event => {
|
||||
document.removeEventListener(event, this.handleFullscreenChange);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理全屏变化
|
||||
*/
|
||||
handleFullscreenChange() {
|
||||
this.isFullscreen = !!(
|
||||
document.fullscreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.msFullscreenElement
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 检查移动端
|
||||
*/
|
||||
checkMobile() {
|
||||
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
|
||||
this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
|
||||
userAgent.toLowerCase()
|
||||
);
|
||||
onEditorError(error) {
|
||||
console.error("OnlyOffice 错误:", error);
|
||||
this.$emit('error', error);
|
||||
},
|
||||
|
||||
/**
|
||||
* 销毁编辑器
|
||||
*/
|
||||
destroyEditor() {
|
||||
try {
|
||||
if (this.editor && typeof this.editor.destroy === 'function') {
|
||||
this.editor.destroy();
|
||||
if (this.docEditor && typeof this.docEditor.destroy === 'function') {
|
||||
try {
|
||||
this.docEditor.destroy();
|
||||
} catch (error) {
|
||||
console.warn('销毁编辑器时出错:', error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('销毁编辑器时出错:', error);
|
||||
} finally {
|
||||
const container = this.$refs.editorContainer;
|
||||
if (container) {
|
||||
container.innerHTML = '';
|
||||
}
|
||||
this.editor = null;
|
||||
}
|
||||
this.docEditor = null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理错误
|
||||
* @param {String} message - 错误消息
|
||||
* 重新加载文档
|
||||
*/
|
||||
handleError(message) {
|
||||
this.error = true;
|
||||
this.errorMessage = message || '未知错误';
|
||||
this.loading = false;
|
||||
this.$emit('error', message);
|
||||
},
|
||||
|
||||
/**
|
||||
* 重试加载
|
||||
*/
|
||||
retry() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.error = false;
|
||||
this.errorMessage = '';
|
||||
this.initViewer();
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭查看器
|
||||
*/
|
||||
handleClose() {
|
||||
if (this.closing) {
|
||||
return;
|
||||
}
|
||||
this.closing = true;
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
/**
|
||||
* 清理资源
|
||||
*/
|
||||
cleanup() {
|
||||
reloadDocument(newConfig = {}) {
|
||||
this.destroyEditor();
|
||||
this.cleanupFullscreenListener();
|
||||
|
||||
// 可以在这里更新配置
|
||||
if (newConfig.documentUrl) {
|
||||
this.documentUrl = newConfig.documentUrl;
|
||||
}
|
||||
if (newConfig.documentTitle) {
|
||||
this.documentTitle = newConfig.documentTitle;
|
||||
}
|
||||
if (newConfig.mode) {
|
||||
this.mode = newConfig.mode;
|
||||
}
|
||||
|
||||
// 等待 DOM 更新后重新初始化
|
||||
this.$nextTick(() => {
|
||||
this.initDocEditor();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.onlyoffice-viewer {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
<style scoped>
|
||||
.onlyoffice-container {
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.viewer-toolbar {
|
||||
background: #f8f9fa;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
min-height: 48px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.toolbar-left,
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ddd;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
white-space: nowrap;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #f0f0f0;
|
||||
border-color: #bbb;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.download {
|
||||
background: #27ae60;
|
||||
color: white;
|
||||
border-color: #27ae60;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #219a52;
|
||||
border-color: #219a52;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.document-title {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-left: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 300px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.viewer-loading,
|
||||
.viewer-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.loading-content,
|
||||
.error-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.error-content h3 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.error-content p {
|
||||
margin: 0 0 16px 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.retry-btn:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
.editor-placeholder {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
background: #f5f5f5;
|
||||
min-height: 200px;
|
||||
display: block !important;
|
||||
/* 确保容器始终显示 */
|
||||
|
||||
/* 确保 OnlyOffice iframe 正确显示 */
|
||||
::v-deep iframe {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-container.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
background: white;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mobile-tip {
|
||||
background: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
color: #856404;
|
||||
padding: 8px 16px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.viewer-toolbar {
|
||||
padding: 8px 12px;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.toolbar-left,
|
||||
.toolbar-right {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.document-title {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin: 4px 0;
|
||||
}
|
||||
min-height: 600px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue