fix: 5 个响应式/z-index 问题 (#1316)

1. z-index 硬编码 1000 → var(--z-modal)（voice-clone/templates/voices.css）
2. ResultDrawer 移动端溢出 → 加 maxWidth: 100vw
3. EditingPlanner height:100vh → calc(100vh - 68px)
4. templates-grid 响应式断点：1400px→3列、1024px→2列
5. EditingPlanner Drawers 窄屏溢出 → 7 个面板加 maxWidth 约束

apps/web/src/pages/assets/components/ResultDrawer.tsx

@@ -14,7 +14,13 @@ export interface ResultDrawerProps {
 }
 
 const ResultDrawer: React.FC<ResultDrawerProps> = ({ open, title, result, onClose }) => (
-  <Drawer title={`${title} — 操作结果`} open={open} onClose={onClose} width={420}>
+  <Drawer
+    title={`${title} — 操作结果`}
+    open={open}
+    onClose={onClose}
+    width={420}
+    styles={{ wrapper: { maxWidth: "100vw" } }}
+  >
     {result && (
       <div className="xx-batch-result">
         <div className="xx-batch-result-summary">

apps/web/src/pages/editing-planner/EditingPlanner.css

@@ -14,7 +14,7 @@
 .ep-v8-root {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: calc(100vh - 68px);
   background: var(--bg-secondary, #f8fafc);
   color: var(--text-primary, #1e293b);
   font-family: "PingFang SC", "Microsoft YaHei", sans-serif;

apps/web/src/pages/editing-planner/components/FilterPanel.tsx

@@ -56,6 +56,7 @@ const FilterPanel: React.FC<FilterPanelProps> = ({ open, onClose, config, onChan
       title="滤镜调色"
       placement="right"
       width={420}
+      styles={{ wrapper: { maxWidth: "100vw" } }}
       open={open}
       onClose={onClose}
       className="filter-panel-drawer"

apps/web/src/pages/editing-planner/components/GreenScreenPanel.tsx

@@ -48,6 +48,7 @@ const GreenScreenPanel: React.FC<GreenScreenPanelProps> = ({ open, onClose, conf
       title="绿幕抠像"
       placement="right"
       width={420}
+      styles={{ wrapper: { maxWidth: "100vw" } }}
       open={open}
       onClose={onClose}
       className="green-screen-panel-drawer"

apps/web/src/pages/editing-planner/components/IntroOutroPanel.tsx

@@ -63,6 +63,7 @@ const IntroOutroPanel: React.FC<IntroOutroPanelProps> = ({ open, onClose, config
       title="🎬 片头片尾设置"
       placement="right"
       width={420}
+      styles={{ wrapper: { maxWidth: "100vw" } }}
       open={open}
       onClose={onClose}
       className="intro-outro-panel-drawer"

apps/web/src/pages/editing-planner/components/SpeedPanel.tsx

@@ -74,6 +74,7 @@ const SpeedPanel: React.FC<SpeedPanelProps> = ({ open, onClose, config, onChange
       title="⚡ 片段调速"
       placement="right"
       width={380}
+      styles={{ wrapper: { maxWidth: "100vw" } }}
       open={open}
       onClose={onClose}
       className="speed-panel-drawer"

apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx

@@ -34,6 +34,7 @@ const SubtitleStylePanel: React.FC<SubtitleStylePanelProps> = ({
       title="💬 字幕样式配置"
       placement="right"
       width={380}
+      styles={{ wrapper: { maxWidth: "100vw" } }}
       open={open}
       onClose={onClose}
       className="subtitle-style-drawer"

apps/web/src/pages/editing-planner/components/TransitionSelector.tsx

@@ -53,6 +53,7 @@ const TransitionSelector: React.FC<TransitionSelectorProps> = ({
       title={`🎬 ${title}`}
       placement="right"
       width={480}
+      styles={{ wrapper: { maxWidth: "100vw" } }}
       open={open}
       onClose={onClose}
       className="transition-selector-drawer"

apps/web/src/pages/editing-planner/components/WatermarkPanel.tsx

@@ -42,6 +42,7 @@ const WatermarkPanel: React.FC<WatermarkPanelProps> = ({ open, onClose, config,
       title="🔖 水印设置"
       placement="right"
       width={400}
+      styles={{ wrapper: { maxWidth: "100vw" } }}
       open={open}
       onClose={onClose}
       className="watermark-panel-drawer"

apps/web/src/pages/templates/templates.css

@@ -439,7 +439,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  z-index: var(--z-modal);
   padding: 20px;
   animation: fadeIn 0.2s ease;
 }
@@ -717,13 +717,13 @@
 /* ============================================================
    响应式
    ============================================================ */
-@media (max-width: 1200px) {
+@media (max-width: 1400px) {
   .xx-templates-grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
   .xx-templates-page {
     padding: var(--space-md);
   }

apps/web/src/pages/voice-clone/voice-clone.css

@@ -264,7 +264,7 @@
   position: fixed;
   top: 80px;
   right: 20px;
-  z-index: 1000;
+  z-index: var(--z-modal);
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -310,7 +310,7 @@
 .vc-edit-overlay {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: var(--z-modal);
   display: grid;
   place-items: center;
   background: var(--overlay-bg);

apps/web/src/pages/voices/voices.css

@@ -733,7 +733,7 @@
 .xx-clone-detail-overlay {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: var(--z-modal);
   display: grid;
   place-items: center;
   background: var(--overlay-bg, rgba(0, 0, 0, 0.4));