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:
Andy Yang
2026-03-09 20:26:43 +08:00
committed by lyingbug
parent daa9ef500c
commit e57deb218c
5 changed files with 94 additions and 3 deletions
+85 -2
View File
@@ -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 ──
+2
View File
@@ -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',
+2
View File
@@ -3049,6 +3049,8 @@ export default {
retry: '재시도',
unsupported: '이 파일 유형은 온라인 미리보기를 지원하지 않습니다',
unsupportedHint: '파일을 다운로드하여 로컬 앱으로 열어주세요',
fullscreen: '전체 화면',
exitFullscreen: '전체 화면 종료',
},
knowledgeSearch: {
title: '검색',
+3 -1
View File
@@ -2580,7 +2580,9 @@ export default {
loadFailed: 'Не удалось загрузить предпросмотр документа',
retry: 'Повторить',
unsupported: 'Этот тип файла не поддерживает онлайн-просмотр',
unsupportedHint: 'Скачайте файл и откройте локально'
unsupportedHint: 'Скачайте файл и откройте локально',
fullscreen: 'Полноэкранный режим',
exitFullscreen: 'Выйти из полноэкранного режима',
},
knowledgeSearch: {
title: 'Поиск',
+2
View File
@@ -2978,6 +2978,8 @@ export default {
retry: "重试",
unsupported: "该文件类型暂不支持在线预览",
unsupportedHint: "请下载文件后使用本地应用查看",
fullscreen: "全屏预览",
exitFullscreen: "退出全屏",
},
knowledgeSearch: {
title: "搜索",