From dbf8ec53dd7dced7de0fb81f0572a608a10f039b Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Sun, 1 Feb 2026 12:49:56 +0800
Subject: [PATCH] =?UTF-8?q?style(ui):=20=E7=BB=9F=E4=B8=80=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=A8=A1=E6=80=81=E6=A1=86=E5=AE=BD=E5=BA=A6=E4=B8=BA?=
 =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B0=BA=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 CreateAnnotationTaskDialog 中的预览模态框宽度从固定像素改为 80vw
- 将 VisualTemplateBuilder 中的预览抽屉宽度从 600px 改为 80vw
- 将 PreviewPromptModal 中的模态框宽度从 800px 改为 80vw
- 将 Overview 组件中的文本和媒体预览宽度统一改为 80vw
- 将 KnowledgeSetDetail 中的文本和媒体预览宽度统一改为 80vw
- 移除原来固定的像素值，使用响应式单位提升用户体验
---
 .../Create/components/CreateAnnotationTaskDialog.tsx      | 7 ++++---
 .../DataAnnotation/Template/VisualTemplateBuilder.tsx     | 3 ++-
 .../src/pages/DataEvaluation/Create/PreviewPrompt.tsx     | 4 +++-
 .../pages/DataManagement/Detail/components/Overview.tsx   | 8 ++++----
 .../KnowledgeManagement/Detail/KnowledgeSetDetail.tsx     | 4 ++--
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx b/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx
index 2a3fefd..a3eab21 100644
--- a/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx
+++ b/frontend/src/pages/DataAnnotation/Create/components/CreateAnnotationTaskDialog.tsx
@@ -61,6 +61,7 @@ const isRecord = (value: unknown): value is Record<string, unknown> =>
 
 const DEFAULT_SEGMENTATION_ENABLED = true;
 const FILE_PREVIEW_MAX_HEIGHT = 500;
+const PREVIEW_MODAL_WIDTH = "80vw";
 const SEGMENTATION_OPTIONS = [
   { label: "需要切片段", value: true },
   { label: "不需要切片段", value: false },
@@ -829,7 +830,7 @@ export default function CreateAnnotationTask({
         open={showPreview}
         onCancel={() => setShowPreview(false)}
         title="标注界面预览"
-        width={1000}
+        width={PREVIEW_MODAL_WIDTH}
         footer={[
           <Button key="close" onClick={() => setShowPreview(false)}>
             关闭
@@ -854,7 +855,7 @@ export default function CreateAnnotationTask({
         open={datasetPreviewVisible}
         onCancel={() => setDatasetPreviewVisible(false)}
         title="数据集预览（前10条文件）"
-        width={700}
+        width={PREVIEW_MODAL_WIDTH}
         footer={[
           <Button key="close" onClick={() => setDatasetPreviewVisible(false)}>
             关闭
@@ -911,7 +912,7 @@ export default function CreateAnnotationTask({
           setFileContent("");
         }}
         title={`文件预览：${previewFileName}`}
-        width={previewFileType === "text" ? 800 : 700}
+        width={PREVIEW_MODAL_WIDTH}
         footer={[
           <Button key="close" onClick={() => {
             setFileContentVisible(false);
diff --git a/frontend/src/pages/DataAnnotation/Template/VisualTemplateBuilder.tsx b/frontend/src/pages/DataAnnotation/Template/VisualTemplateBuilder.tsx
index 88e4d8a..37eb62a 100644
--- a/frontend/src/pages/DataAnnotation/Template/VisualTemplateBuilder.tsx
+++ b/frontend/src/pages/DataAnnotation/Template/VisualTemplateBuilder.tsx
@@ -18,6 +18,7 @@ import {
 import { TagBrowser } from "./components";
 
 const { Paragraph } = Typography;
+const PREVIEW_DRAWER_WIDTH = "80vw";
 
 interface VisualTemplateBuilderProps {
     onSave?: (templateCode: string) => void;
@@ -129,7 +130,7 @@ const VisualTemplateBuilder: React.FC<VisualTemplateBuilderProps> = ({
             <Drawer
                 title="模板代码预览"
                 placement="right"
-                width={600}
+                width={PREVIEW_DRAWER_WIDTH}
                 open={previewVisible}
                 onClose={() => setPreviewVisible(false)}
             >
diff --git a/frontend/src/pages/DataEvaluation/Create/PreviewPrompt.tsx b/frontend/src/pages/DataEvaluation/Create/PreviewPrompt.tsx
index 72c9cba..9fc5192 100644
--- a/frontend/src/pages/DataEvaluation/Create/PreviewPrompt.tsx
+++ b/frontend/src/pages/DataEvaluation/Create/PreviewPrompt.tsx
@@ -7,6 +7,8 @@ interface PreviewPromptModalProps {
   evaluationPrompt: string;
 }
 
+const PREVIEW_MODAL_WIDTH = "80vw";
+
 const PreviewPromptModal: React.FC<PreviewPromptModalProps> = ({ previewVisible, onCancel, evaluationPrompt }) => {
   return (
     <Modal
@@ -24,7 +26,7 @@ const PreviewPromptModal: React.FC<PreviewPromptModalProps> = ({ previewVisible,
           关闭
         </Button>
       ]}
-      width={800}
+      width={PREVIEW_MODAL_WIDTH}
     >
       <div style={{
         background: '#f5f5f5',
diff --git a/frontend/src/pages/DataManagement/Detail/components/Overview.tsx b/frontend/src/pages/DataManagement/Detail/components/Overview.tsx
index 1b5c4e4..af61e91 100644
--- a/frontend/src/pages/DataManagement/Detail/components/Overview.tsx
+++ b/frontend/src/pages/DataManagement/Detail/components/Overview.tsx
@@ -20,10 +20,10 @@ type DatasetFileRow = DatasetFile & {
 };
 
 const PREVIEW_MAX_HEIGHT = 500;
-const PREVIEW_MODAL_WIDTH = {
-  text: 800,
-  media: 700,
-};
+const PREVIEW_MODAL_WIDTH = {
+  text: "80vw",
+  media: "80vw",
+};
 const PREVIEW_TEXT_FONT_SIZE = 12;
 const PREVIEW_TEXT_PADDING = 12;
 const PREVIEW_AUDIO_PADDING = 40;
diff --git a/frontend/src/pages/KnowledgeManagement/Detail/KnowledgeSetDetail.tsx b/frontend/src/pages/KnowledgeManagement/Detail/KnowledgeSetDetail.tsx
index d52a367..df122b1 100644
--- a/frontend/src/pages/KnowledgeManagement/Detail/KnowledgeSetDetail.tsx
+++ b/frontend/src/pages/KnowledgeManagement/Detail/KnowledgeSetDetail.tsx
@@ -55,8 +55,8 @@ import {
 
 const PREVIEW_MAX_HEIGHT = 500;
 const PREVIEW_MODAL_WIDTH = {
-  text: 800,
-  media: 700,
+  text: "80vw",
+  media: "80vw",
 };
 const PREVIEW_TEXT_FONT_SIZE = 12;
 const PREVIEW_TEXT_PADDING = 12;