mirror of
https://github.com/Tencent/WeKnora.git
synced 2026-09-24 16:29:01 +08:00
feat(preview): add localized document fullscreen toggle
This feature introduces a localized fullscreen toggle capability directly to the document preview component. It adds translations across 4 UI languages (zh-CN, en-US, ko-KR, ru-RU) avoiding hardcoded strings. It also sets proper responsive height scaling for DOCX views expanding to full viewport.
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
// @ts-nocheck
|
||||
<script setup lang="ts">
|
||||
import { ref, shallowRef, watch, onUnmounted, nextTick, defineAsyncComponent } from 'vue';
|
||||
import { ref, shallowRef, watch, onUnmounted, nextTick, defineAsyncComponent, onMounted } from 'vue';
|
||||
import { previewKnowledgeFile } from '@/api/knowledge-base/index';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
import hljs from 'highlight.js';
|
||||
@@ -32,6 +32,32 @@ const imageNaturalWidth = ref(0);
|
||||
const imageNaturalHeight = ref(0);
|
||||
let loadedForId = '';
|
||||
|
||||
const isFullscreen = ref(false);
|
||||
const previewContainerRef = ref<HTMLElement | null>(null);
|
||||
|
||||
function toggleFullscreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
if (previewContainerRef.value?.requestFullscreen) {
|
||||
previewContainerRef.value.requestFullscreen().catch((err: any) => {
|
||||
console.error(`Error attempting to enable fullscreen: ${err.message}`);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleFullscreenChange() {
|
||||
isFullscreen.value = !!document.fullscreenElement;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
||||
});
|
||||
|
||||
|
||||
const fileTypeMap: Record<string, typeof previewType.value> = {};
|
||||
['pdf'].forEach(t => fileTypeMap[t] = 'pdf');
|
||||
['docx'].forEach(t => fileTypeMap[t] = 'docx');
|
||||
@@ -296,12 +322,24 @@ watch(
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
||||
cleanup();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="document-preview">
|
||||
<div ref="previewContainerRef" class="document-preview" :class="{ 'is-fullscreen': isFullscreen }">
|
||||
<!-- Toolbar -->
|
||||
<div class="preview-toolbar" v-if="!loading && !error && previewType !== 'unsupported'">
|
||||
<t-space size="small">
|
||||
<t-tooltip :content="isFullscreen ? $t('preview.exitFullscreen') : $t('preview.fullscreen')" placement="bottom">
|
||||
<t-button theme="default" variant="text" shape="square" @click="toggleFullscreen">
|
||||
<template #icon><t-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" /></template>
|
||||
</t-button>
|
||||
</t-tooltip>
|
||||
</t-space>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="preview-loading">
|
||||
<t-loading size="medium" />
|
||||
@@ -397,6 +435,51 @@ onUnmounted(() => {
|
||||
|
||||
.document-preview {
|
||||
min-height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.is-fullscreen {
|
||||
background: var(--td-bg-color-container);
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
|
||||
.preview-container {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.preview-pdf, .preview-pptx {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.preview-docx {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.docx-container {
|
||||
max-height: 100vh;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-toolbar {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 24px;
|
||||
z-index: 10;
|
||||
background: var(--td-bg-color-container);
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: var(--td-radius-default);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
padding: 4px;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// ── States ──
|
||||
|
||||
@@ -2981,6 +2981,8 @@ export default {
|
||||
retry: 'Retry',
|
||||
unsupported: 'This file type does not support online preview',
|
||||
unsupportedHint: 'Please download and open with a local application',
|
||||
fullscreen: 'Fullscreen',
|
||||
exitFullscreen: 'Exit Fullscreen',
|
||||
},
|
||||
knowledgeSearch: {
|
||||
title: 'Search',
|
||||
|
||||
@@ -3049,6 +3049,8 @@ export default {
|
||||
retry: '재시도',
|
||||
unsupported: '이 파일 유형은 온라인 미리보기를 지원하지 않습니다',
|
||||
unsupportedHint: '파일을 다운로드하여 로컬 앱으로 열어주세요',
|
||||
fullscreen: '전체 화면',
|
||||
exitFullscreen: '전체 화면 종료',
|
||||
},
|
||||
knowledgeSearch: {
|
||||
title: '검색',
|
||||
|
||||
@@ -2580,7 +2580,9 @@ export default {
|
||||
loadFailed: 'Не удалось загрузить предпросмотр документа',
|
||||
retry: 'Повторить',
|
||||
unsupported: 'Этот тип файла не поддерживает онлайн-просмотр',
|
||||
unsupportedHint: 'Скачайте файл и откройте локально'
|
||||
unsupportedHint: 'Скачайте файл и откройте локально',
|
||||
fullscreen: 'Полноэкранный режим',
|
||||
exitFullscreen: 'Выйти из полноэкранного режима',
|
||||
},
|
||||
knowledgeSearch: {
|
||||
title: 'Поиск',
|
||||
|
||||
@@ -2978,6 +2978,8 @@ export default {
|
||||
retry: "重试",
|
||||
unsupported: "该文件类型暂不支持在线预览",
|
||||
unsupportedHint: "请下载文件后使用本地应用查看",
|
||||
fullscreen: "全屏预览",
|
||||
exitFullscreen: "退出全屏",
|
||||
},
|
||||
knowledgeSearch: {
|
||||
title: "搜索",
|
||||
|
||||
Reference in New Issue
Block a user