style

frontend/src/pages/DataAnnotation/Create/components/CustomTemplateDialog.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import {
   Modal,
   Input,
@@ -116,6 +116,58 @@ export default function CustomTemplateDialog({
     datasetType === "image" ? defaultImageTemplate : defaultTextTemplate
   );
 
+  const previewIframeRef = useRef<HTMLIFrameElement>(null);
+
+  const updatePreview = () => {
+    const iframe = previewIframeRef.current;
+    if (!iframe || !iframe.contentWindow) return;
+
+    const mockTask =
+      datasetType === "image"
+        ? {
+            data: {
+              image:
+                "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02oi_9b855efe-ce37-4387-a845-d8ef9aaa1a8g.jpg-GhkhlenJlzOQLSDqyBm2iaC6jbv7VA.jpeg",
+              case_id: "20230101-A",
+              part: "Lung",
+            },
+          }
+        : {
+            data: {
+              text: "这是一段用于预览的示例文本。您可以在左侧修改模板代码，右侧将实时更新标注界面的样式。",
+            },
+          };
+
+    iframe.contentWindow.postMessage(
+      {
+        type: "LS_INIT",
+        payload: {
+          labelConfig: templateCode,
+          task: mockTask,
+          user: { id: "preview-user" },
+          interfaces: [
+            "panel",
+            "controls",
+            "side-column",
+            "annotations:tabs",
+            "annotations:menu",
+            "annotations:current",
+            "annotations:history",
+          ],
+        },
+      },
+      window.location.origin
+    );
+  };
+
+  useEffect(() => {
+    // Simple debounce/delay to avoid freezing on every keystroke if rendering is heavy
+    const timer = setTimeout(() => {
+      updatePreview();
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [templateCode, datasetType, open]);
+
   const handleSave = () => {
     if (!templateName.trim()) {
       message.error("请输入模板名称");
@@ -183,38 +235,19 @@ export default function CustomTemplateDialog({
                 />
               </Card>
             </div>
-            <div className="w-96 border-l border-gray-100 pl-6">
+            <div className="w-96 border-l border-gray-100 pl-6 flex flex-col">
               <div className="mb-2 font-medium">预览</div>
-              <Card
-                cover={
-                  <img
-                    alt="预览图像"
-                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02oi_9b855efe-ce37-4387-a845-d8ef9aaa1a8g.jpg-GhkhlenJlzOQLSDqyBm2iaC6jbv7VA.jpeg"
-                    className="object-cover h-48"
-                  />
-                }
+              <Card 
+                bodyStyle={{ padding: 0, height: 400, overflow: 'hidden' }}
+                className="flex-1"
               >
-                <div className="mb-2">
-                  <span className="text-gray-500">病例号：</span>
-                  <span>undefined</span>
-                </div>
-                <div className="mb-2">
-                  <span className="text-gray-500">取材部位：</span>
-                  <span>undefined</span>
-                </div>
-                <Divider />
-                <div>
-                  <div className="font-medium mb-2">标注</div>
-                  <div className="mb-2 text-gray-500">是否有肿瘤</div>
-                  <Radio.Group>
-                    <Radio value="1">是[1]</Radio>
-                    <Radio value="0">否[2]</Radio>
-                  </Radio.Group>
-                  <div className="mt-4">
-                    <div className="text-gray-500 mb-1">备注</div>
-                    <TextArea rows={3} placeholder="添加备注..." />
-                  </div>
-                </div>
+                <iframe
+                  ref={previewIframeRef}
+                  src="/lsf/lsf.html"
+                  className="w-full h-full border-0"
+                  title="Template Preview"
+                  onLoad={updatePreview} 
+                />
               </Card>
             </div>
           </div>