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

Merged
auto-approve-bot merged 1 commits from fix/responsive-zindex-issues into develop 2026-08-10 00:11:06 +08:00
12 changed files with 21 additions and 8 deletions
@@ -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">
@@ -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;
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
+3 -3
View File
@@ -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);
}
@@ -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);
+1 -1
View File
@@ -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));