style(ui): 统一预览模态框宽度为响应式尺寸

- 将 CreateAnnotationTaskDialog 中的预览模态框宽度从固定像素改为 80vw
- 将 VisualTemplateBuilder 中的预览抽屉宽度从 600px 改为 80vw
- 将 PreviewPromptModal 中的模态框宽度从 800px 改为 80vw
- 将 Overview 组件中的文本和媒体预览宽度统一改为 80vw
- 将 KnowledgeSetDetail 中的文本和媒体预览宽度统一改为 80vw
- 移除原来固定的像素值,使用响应式单位提升用户体验
This commit is contained in:
2026-02-01 12:49:56 +08:00
parent 5f89968974
commit dbf8ec53dd
5 changed files with 15 additions and 11 deletions

View File

@@ -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);

View File

@@ -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)}
>