From e57deb218c644e917bb5f144aab66b01665eafd4 Mon Sep 17 00:00:00 2001
From: Andy Yang <2398571272@qq.com>
Date: Mon, 9 Mar 2026 18:21:56 +0800
Subject: [PATCH] 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.
---
 frontend/src/components/document-preview.vue | 87 +++++++++++++++++++-
 frontend/src/i18n/locales/en-US.ts           |  2 +
 frontend/src/i18n/locales/ko-KR.ts           |  2 +
 frontend/src/i18n/locales/ru-RU.ts           |  4 +-
 frontend/src/i18n/locales/zh-CN.ts           |  2 +
 5 files changed, 94 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/document-preview.vue b/frontend/src/components/document-preview.vue
index 4514dcbda..0c6f54962 100644
--- a/frontend/src/components/document-preview.vue
+++ b/frontend/src/components/document-preview.vue
@@ -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 ──
diff --git a/frontend/src/i18n/locales/en-US.ts b/frontend/src/i18n/locales/en-US.ts
index fdb9b3131..8ce2b4c73 100755
--- a/frontend/src/i18n/locales/en-US.ts
+++ b/frontend/src/i18n/locales/en-US.ts
@@ -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',
diff --git a/frontend/src/i18n/locales/ko-KR.ts b/frontend/src/i18n/locales/ko-KR.ts
index 811605e44..d1948dfa2 100755
--- a/frontend/src/i18n/locales/ko-KR.ts
+++ b/frontend/src/i18n/locales/ko-KR.ts
@@ -3049,6 +3049,8 @@ export default {
     retry: '재시도',
     unsupported: '이 파일 유형은 온라인 미리보기를 지원하지 않습니다',
     unsupportedHint: '파일을 다운로드하여 로컬 앱으로 열어주세요',
+    fullscreen: '전체 화면',
+    exitFullscreen: '전체 화면 종료',
   },
   knowledgeSearch: {
     title: '검색',
diff --git a/frontend/src/i18n/locales/ru-RU.ts b/frontend/src/i18n/locales/ru-RU.ts
index 88123f047..0ac82bf86 100755
--- a/frontend/src/i18n/locales/ru-RU.ts
+++ b/frontend/src/i18n/locales/ru-RU.ts
@@ -2580,7 +2580,9 @@ export default {
     loadFailed: 'Не удалось загрузить предпросмотр документа',
     retry: 'Повторить',
     unsupported: 'Этот тип файла не поддерживает онлайн-просмотр',
-    unsupportedHint: 'Скачайте файл и откройте локально'
+    unsupportedHint: 'Скачайте файл и откройте локально',
+    fullscreen: 'Полноэкранный режим',
+    exitFullscreen: 'Выйти из полноэкранного режима',
   },
   knowledgeSearch: {
     title: 'Поиск',
diff --git a/frontend/src/i18n/locales/zh-CN.ts b/frontend/src/i18n/locales/zh-CN.ts
index 846d0c7e0..a084635e5 100755
--- a/frontend/src/i18n/locales/zh-CN.ts
+++ b/frontend/src/i18n/locales/zh-CN.ts
@@ -2978,6 +2978,8 @@ export default {
     retry: "重试",
     unsupported: "该文件类型暂不支持在线预览",
     unsupportedHint: "请下载文件后使用本地应用查看",
+    fullscreen: "全屏预览",
+    exitFullscreen: "退出全屏",
   },
   knowledgeSearch: {
     title: "搜索",