style

frontend/public/lsf/lsf.html

@@ -5,16 +5,29 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DataMate - 数据标注</title>
     <style>
+      :root {
+        --ls-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+        --ls-primary-color: #1677ff;
+      }
       html,
       body {
         height: 100%;
         margin: 0;
         overflow: hidden;
+        font-family: var(--ls-font-family);
+        background: #fff;
       }
       #label-studio {
         height: 100vh;
         overflow: auto;
       }
+      /* Beautify overrides */
+      .lsf-topbar {
+        display: none !important; /* Hide default top bar as we have external controls */
+      }
+      .ls-common {
+        font-family: var(--ls-font-family) !important;
+      }
     </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
+              <Card 
-                cover={
+                bodyStyle={{ padding: 0, height: 400, overflow: 'hidden' }}
-                  <img
+                className="flex-1"
-                    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"
-                  />
-                }
               >
-                <div className="mb-2">
+                <iframe
-                  <span className="text-gray-500">病例号：</span>
+                  ref={previewIframeRef}
-                  <span>undefined</span>
+                  src="/lsf/lsf.html"
-                </div>
+                  className="w-full h-full border-0"
-                <div className="mb-2">
+                  title="Template Preview"
-                  <span className="text-gray-500">取材部位：</span>
+                  onLoad={updatePreview} 
-                  <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>
               </Card>
             </div>
           </div>