diff --git a/app.py b/app.py index 2cc7d9a..9b7ba64 100644 --- a/app.py +++ b/app.py @@ -580,30 +580,34 @@ html, body { overflow-x: hidden !important; } -/* 外层全宽背景，内容区水平居中 */ +/* 外层全宽背景，子元素拉伸占满视口（避免 align-items:center 随内容收缩变窄） */ gradio-app, .gradio-app, #main, .app, .fillable, -.contain { +.contain, +.container { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; - align-items: center !important; + align-items: stretch !important; justify-content: flex-start !important; background: #0f1419 !important; box-sizing: border-box !important; } -/* 核心内容容器居中 — 最大宽度 1800px */ +/* 核心内容容器 — 桌面端固定 1800px（折叠音色时不随内容变窄） */ .gradio-container { background: #0f1419 !important; color: #eef2f7 !important; font-size: 15px !important; - width: 100% !important; + width: min(1800px, 96vw) !important; + min-width: min(1800px, 96vw) !important; max-width: min(1800px, 96vw) !important; + flex: 0 0 auto !important; + align-self: center !important; margin-left: auto !important; margin-right: auto !important; padding: 16px clamp(12px, 2vw, 28px) !important; @@ -614,6 +618,8 @@ gradio-app, /* 平板 */ @media (max-width: 1024px) { .gradio-container { + width: 100% !important; + min-width: 100% !important; max-width: 100% !important; padding: 14px 18px !important; } @@ -622,6 +628,8 @@ gradio-app, /* 手机 */ @media (max-width: 640px) { .gradio-container { + width: 100% !important; + min-width: 100% !important; max-width: 100% !important; padding: 10px 12px !important; font-size: 14px !important; @@ -647,7 +655,7 @@ gradio-app, .oneclick-input-grid > div, .oneclick-bottom-grid, .oneclick-bottom-grid > div, - .oneclick-toolbar { + .oneclick-action-row { flex-direction: column !important; width: 100% !important; } @@ -1011,6 +1019,18 @@ gradio-app, border-color: #374151 !important; } +/* Tabs 全宽，避免 Tab 内容区 shrink-to-fit */ +.gradio-container .tabs, +.gradio-container .main-nav-tabs, +.gradio-container .tabitem, +.gradio-container .tab-content, +.gradio-container [role="tabpanel"] { + width: 100% !important; + min-width: 100% !important; + max-width: 100% !important; + box-sizing: border-box !important; +} + /* 主导航 Tab 均匀分布（兼容 Gradio 4/5） */ .gradio-container .tab-nav { display: flex !important; @@ -1171,11 +1191,34 @@ gradio-app, border-radius: 8px !important; resize: none !important; } -.oneclick-toolbar { - display: grid !important; - grid-template-columns: auto minmax(0, 1fr) 190px !important; - align-items: start !important; - gap: 12px 16px !important; +/* 配音音色 — 独立全宽行，折叠不影响页面宽度 */ +.oneclick-voice-accordion { + width: 100% !important; + min-width: 100% !important; + margin-bottom: 12px !important; + border: 1px solid #374151 !important; + border-radius: 10px !important; + background: #111827 !important; +} +.oneclick-voice-accordion > .label-wrap, +.oneclick-voice-accordion .label-wrap { + width: 100% !important; + background: #1a2332 !important; + padding: 10px 14px !important; +} +.oneclick-voice-accordion .content { + width: 100% !important; + padding: 8px 12px 12px !important; +} +.oneclick-voice-accordion .block { margin: 0 !important; padding: 0 !important; } + +/* 操作行：跳过润色 + 启动按钮 */ +.oneclick-action-row { + display: flex !important; + flex-direction: row !important; + align-items: center !important; + justify-content: space-between !important; + gap: 16px !important; padding: 12px 14px !important; margin-bottom: 14px !important; background: #111827 !important; @@ -1185,46 +1228,24 @@ gradio-app, min-width: 100% !important; flex-wrap: nowrap !important; } -.oneclick-toolbar > .column, -.oneclick-toolbar > .gr-column, -.oneclick-toolbar > div { +.oneclick-action-row > .column, +.oneclick-action-row > .gr-column, +.oneclick-action-row > .block, +.oneclick-action-row > div { + flex: 0 0 auto !important; + width: auto !important; min-width: 0 !important; - width: 100% !important; - max-width: 100% !important; -} -.oneclick-voice-col { - width: 100% !important; - min-width: 0 !important; -} -.oneclick-toolbar .block { margin: 0 !important; padding: 0 !important; } -.oneclick-toolbar .accordion, -.oneclick-toolbar .gr-accordion { - width: 100% !important; - min-width: 0 !important; - margin: 0 !important; - border: 1px solid #4b5563 !important; - border-radius: 8px !important; -} -.oneclick-toolbar .accordion .content, -.oneclick-toolbar .gr-accordion .content { - width: 100% !important; -} -.oneclick-toolbar .accordion > .label-wrap, -.oneclick-toolbar .gr-accordion .label-wrap { - background: #1a2332 !important; - padding: 8px 12px !important; - min-height: unset !important; - width: 100% !important; } .oneclick-run-btn { - width: 100% !important; - min-width: 0 !important; - max-width: 190px !important; - justify-self: end !important; + flex: 0 0 auto !important; + width: auto !important; + min-width: 190px !important; + margin-left: auto !important; } .oneclick-run-btn button { width: 100% !important; - padding: 12px 20px !important; + min-width: 190px !important; + padding: 12px 24px !important; font-size: 1rem !important; border-radius: 8px !important; } @@ -1257,12 +1278,17 @@ gradio-app, .oneclick-bottom-grid { grid-template-columns: 1fr !important; } - .oneclick-toolbar { - grid-template-columns: 1fr !important; + .oneclick-action-row { + flex-direction: column !important; + align-items: stretch !important; } .oneclick-run-btn { - max-width: 100% !important; - justify-self: stretch !important; + width: 100% !important; + min-width: 0 !important; + margin-left: 0 !important; + } + .oneclick-run-btn button { + min-width: 0 !important; } } @@ -1541,6 +1567,7 @@ def build_app() -> gr.Blocks: """构建 Gradio 主界面。""" with gr.Blocks( title="Trading Studio | 交易复盘配音中控", + fill_width=True, ) as demo: with gr.Tabs(elem_classes=["main-nav-tabs"]): # ---- Tab 1: 一键生成（默认首页）---- @@ -1568,21 +1595,26 @@ def build_app() -> gr.Blocks: placeholder="已有转写可直接粘贴，留空则 Whisper 识别", elem_classes=["bright-input"], ) - with gr.Row(elem_classes=["oneclick-toolbar"]): + with gr.Accordion( + "🎚️ 配音音色", + open=False, + elem_classes=["oneclick-voice-accordion"], + ): + pipe_voice = gr.Radio( + label="", + choices=voice_choice_labels(), + value=default_voice_label(), + elem_classes=["voice-radio"], + ) + with gr.Row(elem_classes=["oneclick-action-row"]): skip_polish_cb = gr.Checkbox( label="跳过 Gemma4 润色", value=False, scale=0, ) - with gr.Column(scale=1, elem_classes=["oneclick-voice-col"]): - with gr.Accordion("🎚️ 配音音色", open=False): - pipe_voice = gr.Radio( - label="", - choices=voice_choice_labels(), - value=default_voice_label(), - elem_classes=["voice-radio"], - ) - with gr.Column(scale=0, min_width=180, elem_classes=["oneclick-run-btn"]): + with gr.Column( + scale=0, min_width=190, elem_classes=["oneclick-run-btn"] + ): pipeline_btn = gr.Button( "▶ 启动全流程", variant="primary" )