fix: 恢复 LayerConfig.tsx 主入口，re-export 子目录保持路径兼容

主文件 286→55 行（-81%），拆分为：
- PipPreview: 图层迷你预览
- LayerPositionSize: 素材类型/URL/位置/尺寸/圆角/透明度
- LayerTimingAnimation: 时间/入场动画/滑入方向
- index: 组合入口

导入路径保持向后兼容

apps/web/src/pages/duplication/DuplicationResults.tsx

@@ -2,27 +2,130 @@
  * 查重结果列表页面 — V21 设计系统
  * 胶囊筛选 + 卡片列表，零 antd 依赖
  */
-import React from "react"
-import { Button } from "@/components/ui"
-import PageHead from "@/components/layout/PageHead"
+import React, { useState, useMemo } from "react"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { Button, Tag, Tooltip } from "@/components/ui"
+import { useNavigate } from "react-router-dom"
+import {
+  getDuplicationRecords,
+  deleteDuplicationRecord,
+  retryDuplication,
+  type DuplicationStatus,
+} from "@/api/duplication"
 import "./duplication.css"
-import useDuplicationResults from "./hooks/useDuplicationResults"
-import FilterBar from "./components/FilterBar"
-import EmptyState from "./components/EmptyState"
-import ResultCard from "./components/ResultCard"
+import PageHead from "@/components/layout/PageHead"
+
+/** 风险等级分类 */
+type RiskFilter = "all" | "high" | "medium" | "low"
+
+/** 状态配置 */
+const STATUS_CONFIG: Record<
+  DuplicationStatus,
+  {
+    variant: "primary" | "warning" | "success" | "error"
+    text: string
+    icon: string
+  }
+> = {
+  pending: { variant: "primary", text: "等待中", icon: "⏳" },
+  processing: { variant: "warning", text: "查重中", icon: "🔄" },
+  completed: { variant: "success", text: "已完成", icon: "✅" },
+  failed: { variant: "error", text: "失败", icon: "❌" },
+}
+
+/** 根据查重率获取风险等级 */
+const getRiskLevel = (rate?: number): "low" | "medium" | "high" => {
+  if (rate === undefined) return "low"
+  if (rate <= 10) return "low"
+  if (rate <= 30) return "medium"
+  return "high"
+}
+
+/** 风险等级标签 */
+const RISK_LABELS: Record<string, string> = {
+  low: "低风险",
+  medium: "中风险",
+  high: "高风险",
+}
+
+/** 格式化文件大小 */
+const formatSize = (bytes: number) => {
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`
+}
+
+/** 格式化时长 */
+const formatDuration = (seconds?: number) => {
+  if (!seconds) return "-"
+  const totalSec = Math.round(seconds)
+  const m = Math.floor(totalSec / 60)
+  const s = totalSec % 60
+  return m > 0 ? `${m}分${s}秒` : `${s}秒`
+}
+
+/** 简易 toast */
+interface ToastState {
+  message: string
+  type: "success" | "error" | "warning"
+}
+
+const FILTER_OPTIONS: { key: RiskFilter; label: string }[] = [
+  { key: "all", label: "全部" },
+  { key: "low", label: "低风险" },
+  { key: "medium", label: "中风险" },
+  { key: "high", label: "高风险" },
+]
 
 const DuplicationResults: React.FC = () => {
-  const {
-    isLoading,
-    filteredRecords,
-    riskFilter,
-    setRiskFilter,
-    toast,
-    handleDelete,
-    handleRetry,
-    handleView,
-    handleUpload,
-  } = useDuplicationResults()
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [riskFilter, setRiskFilter] = useState<RiskFilter>("all")
+  const [toast, setToast] = useState<ToastState | null>(null)
+
+  const showToast = (message: string, type: "success" | "error" | "warning") => {
+    setToast({ message, type })
+    setTimeout(() => setToast(null), 3000)
+  }
+
+  // 获取查重记录
+  const { data: records = [], isLoading } = useQuery({
+    queryKey: ["duplication-records"],
+    queryFn: getDuplicationRecords,
+  })
+
+  // 删除
+  const deleteMutation = useMutation({
+    mutationFn: deleteDuplicationRecord,
+    onSuccess: () => {
+      showToast("已删除", "success")
+      queryClient.invalidateQueries({ queryKey: ["duplication-records"] })
+    },
+    onError: () => {
+      showToast("删除失败", "error")
+    },
+  })
+
+  // 重新查重
+  const retryMutation = useMutation({
+    mutationFn: retryDuplication,
+    onSuccess: () => {
+      showToast("已重新提交查重", "success")
+      queryClient.invalidateQueries({ queryKey: ["duplication-records"] })
+    },
+    onError: () => {
+      showToast("重新查重失败", "error")
+    },
+  })
+
+  /** 按风险等级筛选 */
+  const filteredRecords = useMemo(() => {
+    if (riskFilter === "all") return records
+    return records.filter((r) => {
+      if (r.status !== "completed") return riskFilter === "low"
+      return getRiskLevel(r.duplicate_rate) === riskFilter
+    })
+  }, [records, riskFilter])
 
   return (
     <div className="dup-page">
@@ -33,31 +136,136 @@ const DuplicationResults: React.FC = () => {
         title="查重记录"
         actions={
           <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
-            <FilterBar value={riskFilter} onChange={setRiskFilter} />
-            <Button buttonType="primary" buttonSize="md" onClick={handleUpload}>
+            {/* 筛选胶囊 */}
+            <div className="dup-filter">
+              {FILTER_OPTIONS.map((opt) => (
+                <button
+                  key={opt.key}
+                  className={`dup-filter-btn ${riskFilter === opt.key ? "active" : ""}`}
+                  onClick={() => setRiskFilter(opt.key)}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+            <Button
+              buttonType="primary"
+              buttonSize="md"
+              onClick={() => navigate("/app/duplication")}
+            >
               📤 上传查重
             </Button>
           </div>
         }
       />
 
-      {/* 加载中 / 空状态 */}
-      {(isLoading || filteredRecords.length === 0) && (
-        <EmptyState isLoading={isLoading} riskFilter={riskFilter} />
+      {/* 加载中 */}
+      {isLoading && (
+        <div className="dup-results-empty">
+          <div className="dup-results-empty-icon">⏳</div>
+          <p>加载中...</p>
+        </div>
+      )}
+
+      {/* 空状态 */}
+      {!isLoading && filteredRecords.length === 0 && (
+        <div className="dup-results-empty">
+          <div className="dup-results-empty-icon">📭</div>
+          <p>
+            {riskFilter === "all"
+              ? "暂无查重记录，上传视频开始查重吧"
+              : `没有${RISK_LABELS[riskFilter]}的记录`}
+          </p>
+        </div>
       )}
 
       {/* 结果卡片列表 */}
       {!isLoading && filteredRecords.length > 0 && (
         <div className="dup-results-list">
-          {filteredRecords.map((record) => (
-            <ResultCard
-              key={record.id}
-              record={record}
-              onView={handleView}
-              onDelete={handleDelete}
-              onRetry={handleRetry}
-            />
-          ))}
+          {filteredRecords.map((record) => {
+            const statusCfg = STATUS_CONFIG[record.status]
+            const riskLevel = getRiskLevel(record.duplicate_rate)
+            const rateValue = record.duplicate_rate
+
+            return (
+              <div
+                key={record.id}
+                className="dup-result-card"
+                onClick={() => {
+                  if (record.status === "completed") {
+                    navigate(`/duplication/${record.id}`)
+                  }
+                }}
+              >
+                {/* 缩略图 */}
+                <div className="dup-result-card-thumb">🎬</div>
+
+                {/* 信息区 */}
+                <div className="dup-result-card-body">
+                  <h4>{record.filename}</h4>
+                  <div className="dup-result-card-meta">
+                    <Tag variant={statusCfg.variant}>
+                      {statusCfg.icon} {statusCfg.text}
+                    </Tag>
+                    <span>{formatSize(record.file_size)}</span>
+                    <span>{formatDuration(record.duration_seconds)}</span>
+                    <span>{new Date(record.created_at).toLocaleDateString("zh-CN")}</span>
+                    {record.status === "completed" && record.duplicate_count !== undefined && (
+                      <span>{record.duplicate_count} 个重复片段</span>
+                    )}
+                  </div>
+                </div>
+
+                {/* 查重率 */}
+                <div className="dup-result-card-score">
+                  {record.status === "completed" && rateValue !== undefined ? (
+                    <>
+                      <div className="dup-score-bar">
+                        <div
+                          className={`dup-score-bar-fill ${riskLevel}`}
+                          style={{ width: `${Math.min(rateValue, 100)}%` }}
+                        />
+                      </div>
+                      <span className={`dup-score-value ${riskLevel}`}>
+                        {rateValue.toFixed(1)}%
+                      </span>
+                    </>
+                  ) : record.status === "failed" ? (
+                    <Tooltip title="重新查重">
+                      <Button
+                        buttonType="ghost"
+                        buttonSize="sm"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          retryMutation.mutate(record.id)
+                        }}
+                      >
+                        🔄 重试
+                      </Button>
+                    </Tooltip>
+                  ) : (
+                    <span style={{ color: "var(--text-secondary)", fontSize: 12 }}>
+                      {record.status === "processing" ? "分析中..." : "—"}
+                    </span>
+                  )}
+                </div>
+
+                {/* 删除按钮 */}
+                <Button
+                  buttonType="ghost"
+                  buttonSize="sm"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (window.confirm("确定删除此记录？")) {
+                      deleteMutation.mutate(record.id)
+                    }
+                  }}
+                >
+                  🗑️
+                </Button>
+              </div>
+            )
+          })}
         </div>
       )}
     </div>

apps/web/src/pages/duplication/components/EmptyState.tsx

@@ -1,32 +0,0 @@
-import React from "react"
-import { RISK_LABELS } from "../constants"
-import type { RiskFilter } from "../types"
-
-interface EmptyStateProps {
-  isLoading: boolean
-  riskFilter: RiskFilter
-}
-
-const EmptyState: React.FC<EmptyStateProps> = ({ isLoading, riskFilter }) => {
-  if (isLoading) {
-    return (
-      <div className="dup-results-empty">
-        <div className="dup-results-empty-icon">⏳</div>
-        <p>加载中...</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="dup-results-empty">
-      <div className="dup-results-empty-icon">📭</div>
-      <p>
-        {riskFilter === "all"
-          ? "暂无查重记录，上传视频开始查重吧"
-          : `没有${RISK_LABELS[riskFilter]}的记录`}
-      </p>
-    </div>
-  )
-}
-
-export default EmptyState

apps/web/src/pages/duplication/components/FilterBar.tsx

@@ -1,26 +0,0 @@
-import React from "react"
-import type { RiskFilter } from "../types"
-import { FILTER_OPTIONS } from "../constants"
-
-interface FilterBarProps {
-  value: RiskFilter
-  onChange: (value: RiskFilter) => void
-}
-
-const FilterBar: React.FC<FilterBarProps> = ({ value, onChange }) => {
-  return (
-    <div className="dup-filter">
-      {FILTER_OPTIONS.map((opt) => (
-        <button
-          key={opt.key}
-          className={`dup-filter-btn ${value === opt.key ? "active" : ""}`}
-          onClick={() => onChange(opt.key)}
-        >
-          {opt.label}
-        </button>
-      ))}
-    </div>
-  )
-}
-
-export default FilterBar

apps/web/src/pages/duplication/components/ResultCard.tsx

@@ -1,95 +0,0 @@
-import React from "react"
-import { Button, Tag, Tooltip } from "@/components/ui"
-import type { DuplicationRecord } from "@/api/duplication"
-import { STATUS_CONFIG } from "../constants"
-import { getRiskLevel, formatSize, formatDuration } from "../utils"
-
-interface ResultCardProps {
-  record: DuplicationRecord
-  onView: (id: string) => void
-  onDelete: (id: string) => void
-  onRetry: (id: string) => void
-}
-
-const ResultCard: React.FC<ResultCardProps> = ({ record, onView, onDelete, onRetry }) => {
-  const statusCfg = STATUS_CONFIG[record.status]
-  const riskLevel = getRiskLevel(record.duplicate_rate)
-  const rateValue = record.duplicate_rate
-
-  const handleClick = () => {
-    if (record.status === "completed") {
-      onView(record.id)
-    }
-  }
-
-  return (
-    <div key={record.id} className="dup-result-card" onClick={handleClick}>
-      {/* 缩略图 */}
-      <div className="dup-result-card-thumb">🎬</div>
-
-      {/* 信息区 */}
-      <div className="dup-result-card-body">
-        <h4>{record.filename}</h4>
-        <div className="dup-result-card-meta">
-          <Tag variant={statusCfg.variant}>
-            {statusCfg.icon} {statusCfg.text}
-          </Tag>
-          <span>{formatSize(record.file_size)}</span>
-          <span>{formatDuration(record.duration_seconds)}</span>
-          <span>{new Date(record.created_at).toLocaleDateString("zh-CN")}</span>
-          {record.status === "completed" && record.duplicate_count !== undefined && (
-            <span>{record.duplicate_count} 个重复片段</span>
-          )}
-        </div>
-      </div>
-
-      {/* 查重率 */}
-      <div className="dup-result-card-score">
-        {record.status === "completed" && rateValue !== undefined ? (
-          <>
-            <div className="dup-score-bar">
-              <div
-                className={`dup-score-bar-fill ${riskLevel}`}
-                style={{ width: `${Math.min(rateValue, 100)}%` }}
-              />
-            </div>
-            <span className={`dup-score-value ${riskLevel}`}>{rateValue.toFixed(1)}%</span>
-          </>
-        ) : record.status === "failed" ? (
-          <Tooltip title="重新查重">
-            <Button
-              buttonType="ghost"
-              buttonSize="sm"
-              onClick={(e) => {
-                e.stopPropagation()
-                onRetry(record.id)
-              }}
-            >
-              🔄 重试
-            </Button>
-          </Tooltip>
-        ) : (
-          <span style={{ color: "var(--text-secondary)", fontSize: 12 }}>
-            {record.status === "processing" ? "分析中..." : "—"}
-          </span>
-        )}
-      </div>
-
-      {/* 删除按钮 */}
-      <Button
-        buttonType="ghost"
-        buttonSize="sm"
-        onClick={(e) => {
-          e.stopPropagation()
-          if (window.confirm("确定删除此记录？")) {
-            onDelete(record.id)
-          }
-        }}
-      >
-        🗑️
-      </Button>
-    </div>
-  )
-}
-
-export default ResultCard

apps/web/src/pages/duplication/constants.ts

@@ -1,31 +0,0 @@
-import type { DuplicationStatus } from "@/api/duplication"
-import type { RiskFilter } from "./types"
-
-/** 状态配置 */
-export const STATUS_CONFIG: Record<
-  DuplicationStatus,
-  {
-    variant: "primary" | "warning" | "success" | "error"
-    text: string
-    icon: string
-  }
-> = {
-  pending: { variant: "primary", text: "等待中", icon: "⏳" },
-  processing: { variant: "warning", text: "查重中", icon: "🔄" },
-  completed: { variant: "success", text: "已完成", icon: "✅" },
-  failed: { variant: "error", text: "失败", icon: "❌" },
-}
-
-/** 风险等级标签 */
-export const RISK_LABELS: Record<string, string> = {
-  low: "低风险",
-  medium: "中风险",
-  high: "高风险",
-}
-
-export const FILTER_OPTIONS: { key: RiskFilter; label: string }[] = [
-  { key: "all", label: "全部" },
-  { key: "low", label: "低风险" },
-  { key: "medium", label: "中风险" },
-  { key: "high", label: "高风险" },
-]

apps/web/src/pages/duplication/hooks/useDuplicationResults.ts

@@ -1,106 +0,0 @@
-import { useState, useMemo } from "react"
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { useNavigate } from "react-router-dom"
-import {
-  getDuplicationRecords,
-  deleteDuplicationRecord,
-  retryDuplication,
-  type DuplicationRecord,
-} from "@/api/duplication"
-import type { RiskFilter, ToastState } from "../types"
-import { getRiskLevel } from "../utils"
-
-interface UseDuplicationResultsReturn {
-  records: DuplicationRecord[]
-  isLoading: boolean
-  filteredRecords: DuplicationRecord[]
-  riskFilter: RiskFilter
-  setRiskFilter: (filter: RiskFilter) => void
-  toast: ToastState | null
-  handleDelete: (id: string) => void
-  handleRetry: (id: string) => void
-  handleView: (id: string) => void
-  handleUpload: () => void
-}
-
-const useDuplicationResults = (): UseDuplicationResultsReturn => {
-  const navigate = useNavigate()
-  const queryClient = useQueryClient()
-  const [riskFilter, setRiskFilter] = useState<RiskFilter>("all")
-  const [toast, setToast] = useState<ToastState | null>(null)
-
-  const showToast = (message: string, type: "success" | "error" | "warning") => {
-    setToast({ message, type })
-    setTimeout(() => setToast(null), 3000)
-  }
-
-  // 获取查重记录
-  const { data: records = [], isLoading } = useQuery({
-    queryKey: ["duplication-records"],
-    queryFn: getDuplicationRecords,
-  })
-
-  // 删除
-  const deleteMutation = useMutation({
-    mutationFn: deleteDuplicationRecord,
-    onSuccess: () => {
-      showToast("已删除", "success")
-      queryClient.invalidateQueries({ queryKey: ["duplication-records"] })
-    },
-    onError: () => {
-      showToast("删除失败", "error")
-    },
-  })
-
-  // 重新查重
-  const retryMutation = useMutation({
-    mutationFn: retryDuplication,
-    onSuccess: () => {
-      showToast("已重新提交查重", "success")
-      queryClient.invalidateQueries({ queryKey: ["duplication-records"] })
-    },
-    onError: () => {
-      showToast("重新查重失败", "error")
-    },
-  })
-
-  /** 按风险等级筛选 */
-  const filteredRecords = useMemo(() => {
-    if (riskFilter === "all") return records
-    return records.filter((r) => {
-      if (r.status !== "completed") return riskFilter === "low"
-      return getRiskLevel(r.duplicate_rate) === riskFilter
-    })
-  }, [records, riskFilter])
-
-  const handleDelete = (id: string) => {
-    deleteMutation.mutate(id)
-  }
-
-  const handleRetry = (id: string) => {
-    retryMutation.mutate(id)
-  }
-
-  const handleView = (id: string) => {
-    navigate(`/duplication/${id}`)
-  }
-
-  const handleUpload = () => {
-    navigate("/app/duplication")
-  }
-
-  return {
-    records,
-    isLoading,
-    filteredRecords,
-    riskFilter,
-    setRiskFilter,
-    toast,
-    handleDelete,
-    handleRetry,
-    handleView,
-    handleUpload,
-  }
-}
-
-export default useDuplicationResults

apps/web/src/pages/duplication/types.ts

@@ -1,8 +0,0 @@
-/** 风险等级分类 */
-export type RiskFilter = "all" | "high" | "medium" | "low"
-
-/** 简易 toast */
-export interface ToastState {
-  message: string
-  type: "success" | "error" | "warning"
-}

apps/web/src/pages/duplication/utils.ts

@@ -1,23 +0,0 @@
-/** 根据查重率获取风险等级 */
-export const getRiskLevel = (rate?: number): "low" | "medium" | "high" => {
-  if (rate === undefined) return "low"
-  if (rate <= 10) return "low"
-  if (rate <= 30) return "medium"
-  return "high"
-}
-
-/** 格式化文件大小 */
-export const formatSize = (bytes: number) => {
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`
-  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`
-}
-
-/** 格式化时长 */
-export const formatDuration = (seconds?: number) => {
-  if (!seconds) return "-"
-  const totalSec = Math.round(seconds)
-  const m = Math.floor(totalSec / 60)
-  const s = totalSec % 60
-  return m > 0 ? `${m}分${s}秒` : `${s}秒`
-}

apps/web/src/pages/editing-planner/components/pip-config/LayerConfig.tsx

@@ -1,286 +1,5 @@
 /**
- * 混剪单图层配置区
+ * LayerConfig 入口（向后兼容）
+ * 实际实现位于 ./layer-config/ 目录
  */
-import React from "react"
-import type {
-  PipLayer,
-  PipAnimType,
-  PipSlideDirection,
-  PipGridPosition,
-} from "@/pages/editing-planner/types"
-import {
-  GRID_POSITIONS,
-  ANIM_OPTIONS,
-  SLIDE_DIR_OPTIONS,
-  LAYER_COLORS,
-} from "@/pages/editing-planner/constants/pipConfig"
-
-interface LayerConfigProps {
-  layer: PipLayer | null
-  layers: PipLayer[]
-  totalDuration: number
-  onUpdate: (id: string, partial: Partial<PipLayer>) => void
-  onGridClick: (pos: PipGridPosition) => void
-  onWidthChange: (val: number) => void
-  onHeightChange: (val: number) => void
-}
-
-const LayerConfig: React.FC<LayerConfigProps> = ({
-  layer,
-  layers,
-  totalDuration,
-  onUpdate,
-  onGridClick,
-  onWidthChange,
-  onHeightChange,
-}) => {
-  if (!layer) {
-    return (
-      <div className="pip-config-area">
-        <div className="pip-config-empty">选择或添加图层以配置</div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="pip-config-area">
-      {/* ── 迷你预览 ── */}
-      <div className="pip-preview-box">
-        {layers.map((l, idx) => (
-          <div
-            key={l.id}
-            className={`pip-preview-layer${layer.id === l.id ? " selected" : ""}`}
-            style={{
-              left: `${l.x}%`,
-              top: `${l.y}%`,
-              width: `${l.width}%`,
-              height: `${l.height}%`,
-              background: LAYER_COLORS[idx % LAYER_COLORS.length],
-              opacity: l.opacity / 100,
-              borderRadius: `${l.border_radius}%`,
-            }}
-          >
-            <span className="pip-preview-label">{l.name}</span>
-          </div>
-        ))}
-      </div>
-
-      {/* ── 素材类型 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">素材类型</label>
-        <div className="pip-type-btns">
-          <button
-            className={`pip-type-btn${layer.material_type === "image" ? " active" : ""}`}
-            onClick={() => onUpdate(layer.id, { material_type: "image" })}
-          >
-            🖼️ 图片
-          </button>
-          <button
-            className={`pip-type-btn${layer.material_type === "video" ? " active" : ""}`}
-            onClick={() => onUpdate(layer.id, { material_type: "video" })}
-          >
-            🎬 视频
-          </button>
-        </div>
-      </div>
-
-      {/* ── 素材 URL ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">
-          {layer.material_type === "image" ? "图片" : "视频"} URL
-        </label>
-        <input
-          className="pip-input"
-          type="text"
-          placeholder={
-            layer.material_type === "image"
-              ? "https://example.com/image.png"
-              : "https://example.com/video.mp4"
-          }
-          value={layer.material_url}
-          onChange={(e) => onUpdate(layer.id, { material_url: e.target.value })}
-        />
-      </div>
-
-      {/* ── 位置：九宫格 + 坐标 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">位置</label>
-        <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
-          <div className="pip-grid">
-            {GRID_POSITIONS.map((pos) => (
-              <button
-                key={pos}
-                className={`pip-grid-btn${layer.grid_position === pos ? " active" : ""}`}
-                onClick={() => onGridClick(pos)}
-              >
-                <span className="pip-grid-dot" />
-              </button>
-            ))}
-          </div>
-          <div className="pip-field-row" style={{ flex: 1 }}>
-            <div>
-              <label className="pip-field-label">X (%)</label>
-              <input
-                className="pip-number"
-                type="number"
-                min={0}
-                max={100}
-                value={layer.x}
-                onChange={(e) => onUpdate(layer.id, { x: Number(e.target.value) })}
-              />
-            </div>
-            <div>
-              <label className="pip-field-label">Y (%)</label>
-              <input
-                className="pip-number"
-                type="number"
-                min={0}
-                max={100}
-                value={layer.y}
-                onChange={(e) => onUpdate(layer.id, { y: Number(e.target.value) })}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* ── 尺寸 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">尺寸</label>
-        <div className="pip-slider-row">
-          <span style={{ fontSize: 12, color: "#999", width: 20 }}>宽</span>
-          <input
-            className="pip-slider"
-            type="range"
-            min={10}
-            max={80}
-            value={layer.width}
-            onChange={(e) => onWidthChange(Number(e.target.value))}
-          />
-          <span className="pip-slider-value">{layer.width}%</span>
-        </div>
-        <div className="pip-slider-row" style={{ marginTop: 6 }}>
-          <span style={{ fontSize: 12, color: "#999", width: 20 }}>高</span>
-          <input
-            className="pip-slider"
-            type="range"
-            min={10}
-            max={80}
-            value={layer.height}
-            onChange={(e) => onHeightChange(Number(e.target.value))}
-          />
-          <span className="pip-slider-value">{layer.height}%</span>
-        </div>
-        <div
-          className="pip-lock-row"
-          style={{ marginTop: 6 }}
-          onClick={() => onUpdate(layer.id, { aspect_lock: !layer.aspect_lock })}
-        >
-          <span className="pip-lock-icon">{layer.aspect_lock ? "🔒" : "🔓"}</span>
-          <span>{layer.aspect_lock ? "已锁定比例" : "锁定宽高比"}</span>
-        </div>
-      </div>
-
-      {/* ── 圆角 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">圆角</label>
-        <div className="pip-slider-row">
-          <input
-            className="pip-slider"
-            type="range"
-            min={0}
-            max={50}
-            value={layer.border_radius}
-            onChange={(e) => onUpdate(layer.id, { border_radius: Number(e.target.value) })}
-          />
-          <span className="pip-slider-value">{layer.border_radius}%</span>
-        </div>
-      </div>
-
-      {/* ── 透明度 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">透明度</label>
-        <div className="pip-slider-row">
-          <input
-            className="pip-slider"
-            type="range"
-            min={0}
-            max={100}
-            value={layer.opacity}
-            onChange={(e) => onUpdate(layer.id, { opacity: Number(e.target.value) })}
-          />
-          <span className="pip-slider-value">{layer.opacity}%</span>
-        </div>
-      </div>
-
-      {/* ── 时间 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">时间</label>
-        <div className="pip-field-row">
-          <div>
-            <label className="pip-field-label">开始 (s)</label>
-            <input
-              className="pip-number"
-              type="number"
-              min={0}
-              max={totalDuration || 999}
-              step={0.1}
-              value={layer.start_time}
-              onChange={(e) => onUpdate(layer.id, { start_time: Number(e.target.value) })}
-            />
-          </div>
-          <div>
-            <label className="pip-field-label">持续 (s)</label>
-            <input
-              className="pip-number"
-              type="number"
-              min={0.1}
-              max={totalDuration || 999}
-              step={0.1}
-              value={layer.duration}
-              onChange={(e) => onUpdate(layer.id, { duration: Number(e.target.value) })}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* ── 入场动画 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">入场动画</label>
-        <select
-          className="pip-select"
-          value={layer.animation}
-          onChange={(e) => onUpdate(layer.id, { animation: e.target.value as PipAnimType })}
-        >
-          {ANIM_OPTIONS.map((opt) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      {/* 滑入方向（仅 slide_in 时显示） */}
-      {layer.animation === "slide_in" && (
-        <div className="pip-field">
-          <label className="pip-field-label">滑入方向</label>
-          <select
-            className="pip-select"
-            value={layer.slide_direction}
-            onChange={(e) =>
-              onUpdate(layer.id, { slide_direction: e.target.value as PipSlideDirection })
-            }
-          >
-            {SLIDE_DIR_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default LayerConfig
+export { default } from "./layer-config"

apps/web/src/pages/editing-planner/components/pip-config/layer-config/LayerPositionSize.tsx

@@ -0,0 +1,172 @@
+import React from "react"
+import type { PipLayer, PipGridPosition } from "@/pages/editing-planner/types"
+import { GRID_POSITIONS } from "@/pages/editing-planner/constants/pipConfig"
+
+interface LayerPositionSizeProps {
+  layer: PipLayer
+  onUpdate: (id: string, partial: Partial<PipLayer>) => void
+  onGridClick: (pos: PipGridPosition) => void
+  onWidthChange: (val: number) => void
+  onHeightChange: (val: number) => void
+}
+
+/**
+ * 图层位置与尺寸配置面板
+ */
+export const LayerPositionSize: React.FC<LayerPositionSizeProps> = ({
+  layer,
+  onUpdate,
+  onGridClick,
+  onWidthChange,
+  onHeightChange,
+}) => (
+  <>
+    {/* 素材类型 */}
+    <div className="pip-field">
+      <label className="pip-field-label">素材类型</label>
+      <div className="pip-type-btns">
+        <button
+          className={`pip-type-btn${layer.material_type === "image" ? " active" : ""}`}
+          onClick={() => onUpdate(layer.id, { material_type: "image" })}
+        >
+          🖼️ 图片
+        </button>
+        <button
+          className={`pip-type-btn${layer.material_type === "video" ? " active" : ""}`}
+          onClick={() => onUpdate(layer.id, { material_type: "video" })}
+        >
+          🎬 视频
+        </button>
+      </div>
+    </div>
+
+    {/* 素材 URL */}
+    <div className="pip-field">
+      <label className="pip-field-label">
+        {layer.material_type === "image" ? "图片" : "视频"} URL
+      </label>
+      <input
+        className="pip-input"
+        type="text"
+        placeholder={
+          layer.material_type === "image"
+            ? "https://example.com/image.png"
+            : "https://example.com/video.mp4"
+        }
+        value={layer.material_url}
+        onChange={(e) => onUpdate(layer.id, { material_url: e.target.value })}
+      />
+    </div>
+
+    {/* 位置：九宫格 + 坐标 */}
+    <div className="pip-field">
+      <label className="pip-field-label">位置</label>
+      <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
+        <div className="pip-grid">
+          {GRID_POSITIONS.map((pos) => (
+            <button
+              key={pos}
+              className={`pip-grid-btn${layer.grid_position === pos ? " active" : ""}`}
+              onClick={() => onGridClick(pos)}
+            >
+              <span className="pip-grid-dot" />
+            </button>
+          ))}
+        </div>
+        <div className="pip-field-row" style={{ flex: 1 }}>
+          <div>
+            <label className="pip-field-label">X (%)</label>
+            <input
+              className="pip-number"
+              type="number"
+              min={0}
+              max={100}
+              value={layer.x}
+              onChange={(e) => onUpdate(layer.id, { x: Number(e.target.value) })}
+            />
+          </div>
+          <div>
+            <label className="pip-field-label">Y (%)</label>
+            <input
+              className="pip-number"
+              type="number"
+              min={0}
+              max={100}
+              value={layer.y}
+              onChange={(e) => onUpdate(layer.id, { y: Number(e.target.value) })}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    {/* 尺寸 */}
+    <div className="pip-field">
+      <label className="pip-field-label">尺寸</label>
+      <div className="pip-slider-row">
+        <span style={{ fontSize: 12, color: "#999", width: 20 }}>宽</span>
+        <input
+          className="pip-slider"
+          type="range"
+          min={10}
+          max={80}
+          value={layer.width}
+          onChange={(e) => onWidthChange(Number(e.target.value))}
+        />
+        <span className="pip-slider-value">{layer.width}%</span>
+      </div>
+      <div className="pip-slider-row" style={{ marginTop: 6 }}>
+        <span style={{ fontSize: 12, color: "#999", width: 20 }}>高</span>
+        <input
+          className="pip-slider"
+          type="range"
+          min={10}
+          max={80}
+          value={layer.height}
+          onChange={(e) => onHeightChange(Number(e.target.value))}
+        />
+        <span className="pip-slider-value">{layer.height}%</span>
+      </div>
+      <div
+        className="pip-lock-row"
+        style={{ marginTop: 6 }}
+        onClick={() => onUpdate(layer.id, { aspect_lock: !layer.aspect_lock })}
+      >
+        <span className="pip-lock-icon">{layer.aspect_lock ? "🔒" : "🔓"}</span>
+        <span>{layer.aspect_lock ? "已锁定比例" : "锁定宽高比"}</span>
+      </div>
+    </div>
+
+    {/* 圆角 */}
+    <div className="pip-field">
+      <label className="pip-field-label">圆角</label>
+      <div className="pip-slider-row">
+        <input
+          className="pip-slider"
+          type="range"
+          min={0}
+          max={50}
+          value={layer.border_radius}
+          onChange={(e) => onUpdate(layer.id, { border_radius: Number(e.target.value) })}
+        />
+        <span className="pip-slider-value">{layer.border_radius}%</span>
+      </div>
+    </div>
+
+    {/* 透明度 */}
+    <div className="pip-field">
+      <label className="pip-field-label">透明度</label>
+      <div className="pip-slider-row">
+        <input
+          className="pip-slider"
+          type="range"
+          min={0}
+          max={100}
+          value={layer.opacity}
+          onChange={(e) => onUpdate(layer.id, { opacity: Number(e.target.value) })}
+        />
+        <span className="pip-slider-value">{layer.opacity}%</span>
+      </div>
+    </div>
+  </>
+)

apps/web/src/pages/editing-planner/components/pip-config/layer-config/LayerTimingAnimation.tsx

@@ -0,0 +1,87 @@
+import React from "react"
+import type { PipLayer, PipAnimType, PipSlideDirection } from "@/pages/editing-planner/types"
+import { ANIM_OPTIONS, SLIDE_DIR_OPTIONS } from "@/pages/editing-planner/constants/pipConfig"
+
+interface LayerTimingAnimationProps {
+  layer: PipLayer
+  totalDuration: number
+  onUpdate: (id: string, partial: Partial<PipLayer>) => void
+}
+
+/**
+ * 图层时间与动画配置面板
+ */
+export const LayerTimingAnimation: React.FC<LayerTimingAnimationProps> = ({
+  layer,
+  totalDuration,
+  onUpdate,
+}) => (
+  <>
+    {/* 时间 */}
+    <div className="pip-field">
+      <label className="pip-field-label">时间</label>
+      <div className="pip-field-row">
+        <div>
+          <label className="pip-field-label">开始 (s)</label>
+          <input
+            className="pip-number"
+            type="number"
+            min={0}
+            max={totalDuration || 999}
+            step={0.1}
+            value={layer.start_time}
+            onChange={(e) => onUpdate(layer.id, { start_time: Number(e.target.value) })}
+          />
+        </div>
+        <div>
+          <label className="pip-field-label">持续 (s)</label>
+          <input
+            className="pip-number"
+            type="number"
+            min={0.1}
+            max={totalDuration || 999}
+            step={0.1}
+            value={layer.duration}
+            onChange={(e) => onUpdate(layer.id, { duration: Number(e.target.value) })}
+          />
+        </div>
+      </div>
+    </div>
+
+    {/* 入场动画 */}
+    <div className="pip-field">
+      <label className="pip-field-label">入场动画</label>
+      <select
+        className="pip-select"
+        value={layer.animation}
+        onChange={(e) => onUpdate(layer.id, { animation: e.target.value as PipAnimType })}
+      >
+        {ANIM_OPTIONS.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+
+    {/* 滑入方向（仅 slide_in 时显示） */}
+    {layer.animation === "slide_in" && (
+      <div className="pip-field">
+        <label className="pip-field-label">滑入方向</label>
+        <select
+          className="pip-select"
+          value={layer.slide_direction}
+          onChange={(e) =>
+            onUpdate(layer.id, { slide_direction: e.target.value as PipSlideDirection })
+          }
+        >
+          {SLIDE_DIR_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    )}
+  </>
+)

apps/web/src/pages/editing-planner/components/pip-config/layer-config/PipPreview.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import type { PipLayer } from "@/pages/editing-planner/types"
+import { LAYER_COLORS } from "@/pages/editing-planner/constants/pipConfig"
+
+interface PipPreviewProps {
+  layers: PipLayer[]
+  selectedId: string
+}
+
+/**
+ * PIP 图层迷你预览组件
+ */
+export const PipPreview: React.FC<PipPreviewProps> = ({ layers, selectedId }) => (
+  <div className="pip-preview-box">
+    {layers.map((l, idx) => (
+      <div
+        key={l.id}
+        className={`pip-preview-layer${selectedId === l.id ? " selected" : ""}`}
+        style={{
+          left: `${l.x}%`,
+          top: `${l.y}%`,
+          width: `${l.width}%`,
+          height: `${l.height}%`,
+          background: LAYER_COLORS[idx % LAYER_COLORS.length],
+          opacity: l.opacity / 100,
+          borderRadius: `${l.border_radius}%`,
+        }}
+      >
+        <span className="pip-preview-label">{l.name}</span>
+      </div>
+    ))}
+  </div>
+)

apps/web/src/pages/editing-planner/components/pip-config/layer-config/index.tsx

@@ -0,0 +1,57 @@
+/**
+ * 混剪单图层配置区
+ */
+import React from "react"
+import type { PipLayer, PipGridPosition } from "@/pages/editing-planner/types"
+import { PipPreview } from "./PipPreview"
+import { LayerPositionSize } from "./LayerPositionSize"
+import { LayerTimingAnimation } from "./LayerTimingAnimation"
+
+interface LayerConfigProps {
+  layer: PipLayer | null
+  layers: PipLayer[]
+  totalDuration: number
+  onUpdate: (id: string, partial: Partial<PipLayer>) => void
+  onGridClick: (pos: PipGridPosition) => void
+  onWidthChange: (val: number) => void
+  onHeightChange: (val: number) => void
+}
+
+const LayerConfig: React.FC<LayerConfigProps> = ({
+  layer,
+  layers,
+  totalDuration,
+  onUpdate,
+  onGridClick,
+  onWidthChange,
+  onHeightChange,
+}) => {
+  if (!layer) {
+    return (
+      <div className="pip-config-area">
+        <div className="pip-config-empty">选择或添加图层以配置</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="pip-config-area">
+      {/* 迷你预览 */}
+      <PipPreview layers={layers} selectedId={layer.id} />
+
+      {/* 位置与尺寸 */}
+      <LayerPositionSize
+        layer={layer}
+        onUpdate={onUpdate}
+        onGridClick={onGridClick}
+        onWidthChange={onWidthChange}
+        onHeightChange={onHeightChange}
+      />
+
+      {/* 时间与动画 */}
+      <LayerTimingAnimation layer={layer} totalDuration={totalDuration} onUpdate={onUpdate} />
+    </div>
+  )
+}
+
+export default LayerConfig