From a6aa59a5eaadba105d75951712d00bb705706571 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 30 Jul 2026 09:10:00 +0800
Subject: [PATCH] =?UTF-8?q?refactor(PipConfigPanel):=20=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=8C=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PipConfigPanel/components/PipPreview.tsx  | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 apps/web/src/pages/editing-planner/components/PipConfigPanel/components/PipPreview.tsx

diff --git a/apps/web/src/pages/editing-planner/components/PipConfigPanel/components/PipPreview.tsx b/apps/web/src/pages/editing-planner/components/PipConfigPanel/components/PipPreview.tsx
new file mode 100644
index 000000000..9d03d0536
--- /dev/null
+++ b/apps/web/src/pages/editing-planner/components/PipConfigPanel/components/PipPreview.tsx
@@ -0,0 +1,32 @@
+import React from "react"
+import type { PipLayer } from "../types"
+import { LAYER_COLORS } from "../constants"
+
+export interface PipPreviewProps {
+  layers: PipLayer[]
+  selectedId: string
+}
+
+export const PipPreview: React.FC<PipPreviewProps> = ({ layers, selectedId }) => {
+  return (
+    <div className="pip-preview-box">
+      {layers.map((layer, idx) => (
+        <div
+          key={layer.id}
+          className={`pip-preview-layer${selectedId === layer.id ? " selected" : ""}`}
+          style={{
+            left: `${layer.x}%`,
+            top: `${layer.y}%`,
+            width: `${layer.width}%`,
+            height: `${layer.height}%`,
+            background: LAYER_COLORS[idx % LAYER_COLORS.length],
+            opacity: layer.opacity / 100,
+            borderRadius: `${layer.border_radius}%`,
+          }}
+        >
+          <span className="pip-preview-label">{layer.name}</span>
+        </div>
+      ))}
+    </div>
+  )
+}