From 4df6d04547f889fc2204ffdbab0ad8e37f51ef76 Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Mon, 10 Aug 2026 00:03:04 +0800 Subject: [PATCH] =?UTF-8?q?fix:=205=20=E4=B8=AA=E5=93=8D=E5=BA=94=E5=BC=8F?= =?UTF-8?q?/z-index=20=E9=97=AE=E9=A2=98=20(#1316)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 8 +++++++- apps/web/src/pages/editing-planner/EditingPlanner.css | 2 +- .../src/pages/editing-planner/components/FilterPanel.tsx | 1 + .../pages/editing-planner/components/GreenScreenPanel.tsx | 1 + .../pages/editing-planner/components/IntroOutroPanel.tsx | 1 + .../src/pages/editing-planner/components/SpeedPanel.tsx | 1 + .../editing-planner/components/SubtitleStylePanel.tsx | 1 + .../editing-planner/components/TransitionSelector.tsx | 1 + .../pages/editing-planner/components/WatermarkPanel.tsx | 1 + apps/web/src/pages/templates/templates.css | 6 +++--- apps/web/src/pages/voice-clone/voice-clone.css | 4 ++-- apps/web/src/pages/voices/voices.css | 2 +- 12 files changed, 21 insertions(+), 8 deletions(-) diff --git a/apps/web/src/pages/assets/components/ResultDrawer.tsx b/apps/web/src/pages/assets/components/ResultDrawer.tsx index bbd119bc3..7cbf637bc 100644 --- a/apps/web/src/pages/assets/components/ResultDrawer.tsx +++ b/apps/web/src/pages/assets/components/ResultDrawer.tsx @@ -14,7 +14,13 @@ export interface ResultDrawerProps { } const ResultDrawer: React.FC = ({ open, title, result, onClose }) => ( - + {result && (
diff --git a/apps/web/src/pages/editing-planner/EditingPlanner.css b/apps/web/src/pages/editing-planner/EditingPlanner.css index 9260e772a..d62b5e7dd 100644 --- a/apps/web/src/pages/editing-planner/EditingPlanner.css +++ b/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; diff --git a/apps/web/src/pages/editing-planner/components/FilterPanel.tsx b/apps/web/src/pages/editing-planner/components/FilterPanel.tsx index 4314137f5..ab11a04c6 100644 --- a/apps/web/src/pages/editing-planner/components/FilterPanel.tsx +++ b/apps/web/src/pages/editing-planner/components/FilterPanel.tsx @@ -56,6 +56,7 @@ const FilterPanel: React.FC = ({ open, onClose, config, onChan title="滤镜调色" placement="right" width={420} + styles={{ wrapper: { maxWidth: "100vw" } }} open={open} onClose={onClose} className="filter-panel-drawer" diff --git a/apps/web/src/pages/editing-planner/components/GreenScreenPanel.tsx b/apps/web/src/pages/editing-planner/components/GreenScreenPanel.tsx index 25caa2d83..d7c87e8fd 100755 --- a/apps/web/src/pages/editing-planner/components/GreenScreenPanel.tsx +++ b/apps/web/src/pages/editing-planner/components/GreenScreenPanel.tsx @@ -48,6 +48,7 @@ const GreenScreenPanel: React.FC = ({ open, onClose, conf title="绿幕抠像" placement="right" width={420} + styles={{ wrapper: { maxWidth: "100vw" } }} open={open} onClose={onClose} className="green-screen-panel-drawer" diff --git a/apps/web/src/pages/editing-planner/components/IntroOutroPanel.tsx b/apps/web/src/pages/editing-planner/components/IntroOutroPanel.tsx index 87b67f58c..909ea0a84 100644 --- a/apps/web/src/pages/editing-planner/components/IntroOutroPanel.tsx +++ b/apps/web/src/pages/editing-planner/components/IntroOutroPanel.tsx @@ -63,6 +63,7 @@ const IntroOutroPanel: React.FC = ({ open, onClose, config title="🎬 片头片尾设置" placement="right" width={420} + styles={{ wrapper: { maxWidth: "100vw" } }} open={open} onClose={onClose} className="intro-outro-panel-drawer" diff --git a/apps/web/src/pages/editing-planner/components/SpeedPanel.tsx b/apps/web/src/pages/editing-planner/components/SpeedPanel.tsx index ea81bb136..b7c7b7f2d 100644 --- a/apps/web/src/pages/editing-planner/components/SpeedPanel.tsx +++ b/apps/web/src/pages/editing-planner/components/SpeedPanel.tsx @@ -74,6 +74,7 @@ const SpeedPanel: React.FC = ({ open, onClose, config, onChange title="⚡ 片段调速" placement="right" width={380} + styles={{ wrapper: { maxWidth: "100vw" } }} open={open} onClose={onClose} className="speed-panel-drawer" diff --git a/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx b/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx index 18511651d..fc3982506 100755 --- a/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx +++ b/apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx @@ -34,6 +34,7 @@ const SubtitleStylePanel: React.FC = ({ title="💬 字幕样式配置" placement="right" width={380} + styles={{ wrapper: { maxWidth: "100vw" } }} open={open} onClose={onClose} className="subtitle-style-drawer" diff --git a/apps/web/src/pages/editing-planner/components/TransitionSelector.tsx b/apps/web/src/pages/editing-planner/components/TransitionSelector.tsx index 2341d4a03..9c087209d 100644 --- a/apps/web/src/pages/editing-planner/components/TransitionSelector.tsx +++ b/apps/web/src/pages/editing-planner/components/TransitionSelector.tsx @@ -53,6 +53,7 @@ const TransitionSelector: React.FC = ({ title={`🎬 ${title}`} placement="right" width={480} + styles={{ wrapper: { maxWidth: "100vw" } }} open={open} onClose={onClose} className="transition-selector-drawer" diff --git a/apps/web/src/pages/editing-planner/components/WatermarkPanel.tsx b/apps/web/src/pages/editing-planner/components/WatermarkPanel.tsx index cef414809..47e251991 100644 --- a/apps/web/src/pages/editing-planner/components/WatermarkPanel.tsx +++ b/apps/web/src/pages/editing-planner/components/WatermarkPanel.tsx @@ -42,6 +42,7 @@ const WatermarkPanel: React.FC = ({ open, onClose, config, title="🔖 水印设置" placement="right" width={400} + styles={{ wrapper: { maxWidth: "100vw" } }} open={open} onClose={onClose} className="watermark-panel-drawer" diff --git a/apps/web/src/pages/templates/templates.css b/apps/web/src/pages/templates/templates.css index 51113ffc4..e49d1a7cd 100644 --- a/apps/web/src/pages/templates/templates.css +++ b/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); } diff --git a/apps/web/src/pages/voice-clone/voice-clone.css b/apps/web/src/pages/voice-clone/voice-clone.css index 651b4a52c..c639038dd 100644 --- a/apps/web/src/pages/voice-clone/voice-clone.css +++ b/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); diff --git a/apps/web/src/pages/voices/voices.css b/apps/web/src/pages/voices/voices.css index d319fae1e..74ae27897 100644 --- a/apps/web/src/pages/voices/voices.css +++ b/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)); -- 2.54.0