From ecade14bd05890bcb75b413bfbca90ebdb5ac34c Mon Sep 17 00:00:00 2001 From: ludan <251918489@qq.com> Date: Tue, 2 Jun 2026 17:45:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=85=A8=E5=B1=80?= =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80=EF=BC=8C=E9=80=82?= =?UTF-8?q?=E9=85=8D=E4=B8=8D=E5=90=8C=E8=AE=BE=E5=A4=87=E3=80=81=E4=B8=8D?= =?UTF-8?q?=E5=90=8C=E5=B1=8F=E5=B9=95=E3=80=81=E4=B8=8D=E5=90=8C=E5=88=86?= =?UTF-8?q?=E8=BE=A8=E7=8E=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 统一断点体系：560px(手机)、900px(平板)、1180px(小桌面) - Shell导航：900px底部导航条、560px紧凑布局、顶栏触控优化 - 电商页面：三栏布局在平板/手机下改为单栏堆叠+横向标签切换 - 工作台：启动页编辑器全宽、消息气泡适配窄屏、建议标签换行 - 画布页面：工具栏横向滚动、节点缩小、手机全屏操作 - 社区/资产库/工具页/数字人等全部17个页面补齐响应式断点 - 新增32条@media规则，媒体查询从107条增至139条 --- src/styles/pages/agent.css | 12 +++ src/styles/pages/assets.css | 21 ++++ src/styles/pages/avatar-console.css | 27 +++++ src/styles/pages/canvas.css | 93 +++++++++++++++++ src/styles/pages/community.css | 49 +++++++++ src/styles/pages/ecommerce.css | 141 ++++++++++++++++++++++++++ src/styles/pages/image-workbench.css | 25 +++++ src/styles/pages/more-tools.css | 20 ++++ src/styles/pages/more.css | 36 +++++++ src/styles/pages/profile.css | 16 +++ src/styles/pages/provider-health.css | 37 +++++++ src/styles/pages/size-template.css | 21 ++++ src/styles/pages/studio-layout.css | 16 +++ src/styles/pages/subtitle-removal.css | 12 +++ src/styles/pages/workbench.css | 134 ++++++++++++++++++++++++ src/styles/shell/app-shell.css | 98 ++++++++++++++++++ src/styles/tokens.css | 11 ++ 17 files changed, 769 insertions(+) diff --git a/src/styles/pages/agent.css b/src/styles/pages/agent.css index 7da64da..d4c7e5d 100644 --- a/src/styles/pages/agent.css +++ b/src/styles/pages/agent.css @@ -1 +1,13 @@ /* Agent page rules move here as they are retired from legacy-pages.css. */ + +@media (max-width: 900px) { + .agent-page { + padding: 16px 16px 80px; + } +} + +@media (max-width: 560px) { + .agent-page { + padding: 12px 10px 80px; + } +} diff --git a/src/styles/pages/assets.css b/src/styles/pages/assets.css index 9c3fd3e..9a9a7f8 100644 --- a/src/styles/pages/assets.css +++ b/src/styles/pages/assets.css @@ -209,3 +209,24 @@ max-height: calc(100vh - 190px); } } + +@media (max-width: 560px) { + .asset-preview-modal { + padding: 8px; + } + + .asset-preview-modal__panel { + width: calc(100vw - 16px); + max-height: calc(100vh - 16px); + border-radius: 12px; + } + + .asset-preview-modal__body { + padding: 8px; + } + + .asset-preview-modal__body img, + .asset-preview-modal__body video { + max-height: calc(100vh - 160px); + } +} diff --git a/src/styles/pages/avatar-console.css b/src/styles/pages/avatar-console.css index c3e4837..daf36ac 100644 --- a/src/styles/pages/avatar-console.css +++ b/src/styles/pages/avatar-console.css @@ -4211,3 +4211,30 @@ grid-template-columns: minmax(0, 1fr); } } + +@media (max-width: 560px) { + .avatar-console-page { + height: auto; + min-height: 100%; + overflow: auto; + } + + .avatar-console-main { + min-height: 100vh; + padding-bottom: 80px; + } + + .avatar-console-scroll { + padding: 10px; + } + + .avatar-console-toolbar { + flex-wrap: wrap; + gap: 6px; + } + + .avatar-console-video-actions { + flex-direction: column; + gap: 8px; + } +} diff --git a/src/styles/pages/canvas.css b/src/styles/pages/canvas.css index 4939941..6e74b10 100644 --- a/src/styles/pages/canvas.css +++ b/src/styles/pages/canvas.css @@ -709,3 +709,96 @@ right: -9999px; height: 1px; } + +/* ═══════════════════════════════════════════════════════ + Responsive: Canvas + Breakpoints: 900px / 560px + ═══════════════════════════════════════════════════════ */ + +/* ── 900px: Tablet — compact toolbar ── */ +@media (max-width: 900px) { + .studio-canvas-page { + flex-direction: column; + } + + .studio-canvas-toolbar { + flex: 0 0 auto; + flex-direction: row; + width: 100%; + padding: 8px 12px; + gap: 6px; + overflow-x: auto; + border-right: none; + border-bottom: 1px solid var(--border-weak); + -webkit-overflow-scrolling: touch; + } + + .studio-canvas-toolbar__group { + flex-direction: row; + flex-shrink: 0; + gap: 4px; + } + + .studio-canvas-toolbar button { + min-width: 36px; + height: 36px; + font-size: 14px; + } + + .studio-canvas-main { + flex: 1; + min-height: 0; + } + + .studio-canvas-node { + min-width: 140px; + min-height: 60px; + } +} + +/* ── 560px: Phone — fullscreen canvas ── */ +@media (max-width: 560px) { + .studio-canvas-page { + flex-direction: column; + } + + .studio-canvas-toolbar { + flex: 0 0 auto; + padding: 6px 8px; + gap: 4px; + border-bottom: 1px solid var(--border-weak); + } + + .studio-canvas-toolbar button { + min-width: 30px; + height: 30px; + padding: 0 6px; + font-size: 12px; + border-radius: 8px; + } + + .studio-canvas-main { + flex: 1; + min-height: 0; + } + + .studio-canvas-node { + min-width: 110px; + min-height: 48px; + border-radius: 10px; + padding: 8px; + } + + .studio-canvas-project-bar { + right: 8px; + left: 8px; + bottom: 80px; + gap: 4px; + border-radius: 10px; + padding: 8px 10px; + } + + .studio-canvas-project-bar__name-form { + font-size: 12px; + } +} diff --git a/src/styles/pages/community.css b/src/styles/pages/community.css index 8991a70..62b3a8b 100644 --- a/src/styles/pages/community.css +++ b/src/styles/pages/community.css @@ -117,3 +117,52 @@ font-weight: 600; line-height: 1.6; } + +/* ═══════════════════════════════════════════════════════ + Responsive: Community + Breakpoints: 900px / 560px + ═══════════════════════════════════════════════════════ */ + +@media (max-width: 900px) { + .community-page { + padding: 12px 16px 80px; + } + + .community-carousel__slide--video { + min-height: 200px; + } + + .community-carousel__video { + max-height: 220px; + } + + .community-case-card__preview { + min-height: 140px; + } +} + +@media (max-width: 560px) { + .community-page { + padding: 10px 10px 80px; + } + + .community-carousel__slide--video { + min-height: 160px; + } + + .community-carousel__video { + max-height: 180px; + } + + .community-case-card__preview { + min-height: 110px; + } + + .community-case-empty { + padding: 32px 16px; + } + + .community-case-empty__icon { + font-size: 18px; + } +} diff --git a/src/styles/pages/ecommerce.css b/src/styles/pages/ecommerce.css index c4972a3..9533ec8 100644 --- a/src/styles/pages/ecommerce.css +++ b/src/styles/pages/ecommerce.css @@ -7890,4 +7890,145 @@ .clone-ai-adwizard__risk.is-low { color: #52c41a; } .clone-ai-adwizard__risk.is-medium { color: #faad14; } .clone-ai-adwizard__risk.is-high { color: #ff4d4f; } + +/* ═══════════════════════════════════════════════════════ + Responsive: Ecommerce Tools + Breakpoints: 1180px / 900px / 560px + ═══════════════════════════════════════════════════════ */ + +/* ── 1180px: Narrower panels ── */ +@media (max-width: 1180px) { + .product-clone-page[data-tool="clone"] > .product-clone-shell { + grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); + } + .product-clone-page[data-tool="set"] > .product-clone-shell { + grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); + } +} + +/* ── 900px: Tablet — stacked layout ── */ +@media (max-width: 900px) { + /* All tools: collapse shell to single column */ + .product-clone-page > .product-clone-shell, + .product-clone-page[data-tool="clone"] > .product-clone-shell, + .product-clone-page[data-tool="set"] > .product-clone-shell { + grid-template-columns: 1fr; + grid-template-rows: auto minmax(0, 1fr); + } + + /* Rail becomes horizontal tab bar */ + .product-clone-rail { + display: flex !important; + flex-direction: row; + gap: 4px; + width: 100%; + height: auto; + padding: 8px 12px; + overflow-x: auto; + border-right: none; + border-bottom: 1px solid var(--border-weak, #2a3032); + -webkit-overflow-scrolling: touch; + } + + .product-clone-rail button { + flex-shrink: 0; + white-space: nowrap; + flex-direction: row; + gap: 6px; + padding: 8px 14px; + font-size: 12px; + } + + /* Panel: full-width, reduced height */ + .product-clone-panel { + width: 100%; + max-height: 45vh; + overflow-y: auto; + } + + .product-clone-page[data-tool="clone"] .product-clone-panel { + --clone-settings-panel-width: 100%; + max-height: 45vh; + } + + /* Preview: independent scroll area */ + .product-clone-preview { + min-height: 40vh; + overflow-y: auto; + padding: 20px 16px; + } + + .product-clone-page[data-tool="set"] .product-clone-preview { + padding: 20px 16px; + } + + /* Collapse toggle tweak */ + .product-clone-page[data-tool="clone"] .product-clone-panel { + transition: max-height 320ms ease, opacity 320ms ease; + } + + .product-clone-page.is-settings-collapsed .product-clone-panel { + max-height: 0; + overflow: hidden; + opacity: 0; + } +} + +/* ── 560px: Phone — further compression ── */ +@media (max-width: 560px) { + .product-clone-page { + grid-template-rows: 44px minmax(0, 1fr); + } + + .product-clone-rail { + padding: 6px 8px; + gap: 2px; + } + + .product-clone-rail button { + padding: 6px 10px; + font-size: 11px; + gap: 4px; + } + + .product-clone-panel { + max-height: 38vh; + } + + .product-clone-page[data-tool="clone"] .product-clone-panel { + max-height: 38vh; + } + + .product-clone-page[data-tool="set"] .product-clone-panel__scroll { + padding: 20px 14px 24px; + } + + .product-clone-page[data-tool="set"] :is(.product-set-upload-section, .product-set-settings-section) { + padding: 18px; + border-radius: 14px; + margin-bottom: 18px; + } + + .product-clone-page[data-tool="set"] .product-set-upload { + min-height: 180px; + padding: 16px; + gap: 8px; + } + + .product-clone-page[data-tool="set"] .product-set-upload-title { + font-size: 15px; + } + + .product-clone-page[data-tool="set"] .product-set-upload strong { + height: 42px; + min-width: 140px; + font-size: 16px; + } + + /* Preview full-width */ + .product-clone-preview { + padding: 12px 10px !important; + min-height: 50vh; + } +} .clone-ai-adwizard__issues { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; } diff --git a/src/styles/pages/image-workbench.css b/src/styles/pages/image-workbench.css index 10cd3f0..e25a2dd 100644 --- a/src/styles/pages/image-workbench.css +++ b/src/styles/pages/image-workbench.css @@ -1689,3 +1689,28 @@ textarea.image-workbench-prompt { opacity: 0.6; cursor: not-allowed; } + +@media (max-width: 900px) { + .image-workbench-page { + padding: 12px; + } + .image-workbench-toolbar { + flex-wrap: wrap; + gap: 8px; + } +} + +@media (max-width: 560px) { + .image-workbench-page { + padding: 8px 8px 80px; + } + .image-workbench-toolbar { + gap: 4px; + } + .image-workbench-toolbar button { + min-width: 36px; + height: 36px; + padding: 0 10px; + font-size: 12px; + } +} diff --git a/src/styles/pages/more-tools.css b/src/styles/pages/more-tools.css index 2f38e3d..ff63a3b 100644 --- a/src/styles/pages/more-tools.css +++ b/src/styles/pages/more-tools.css @@ -1286,3 +1286,23 @@ textarea.image-workbench-prompt, justify-items: start; } } + +@media (max-width: 560px) { + .token-usage-page { + padding: 0 8px 80px; + } + + .token-usage-page .script-token-page__scroll, + .script-token-page__scroll { + padding-inline: 8px; + } + + .token-member-card { + padding: 14px; + gap: 8px; + } + + .token-member-card__head { + gap: 8px; + } +} diff --git a/src/styles/pages/more.css b/src/styles/pages/more.css index efa9b84..fbb5604 100644 --- a/src/styles/pages/more.css +++ b/src/styles/pages/more.css @@ -313,3 +313,39 @@ font-size: 15px; } } + +@media (max-width: 560px) { + .more-page-v2 { + padding-left: 0; + } + + .more-page-v2__header { + padding: 10px 12px 8px; + gap: 8px; + } + + .more-page-v2__scroll { + padding: 12px 10px 72px; + } + + .more-page-v2__grid { + grid-template-columns: repeat(2, 1fr); + gap: 8px; + } + + .more-page-v2__featured-grid { + gap: 10px; + } + + .more-card--featured { + padding: 14px; + gap: 10px; + } + + .more-card__featured-icon { + width: 36px; + height: 36px; + border-radius: 10px; + font-size: 18px; + } +} diff --git a/src/styles/pages/profile.css b/src/styles/pages/profile.css index 7621d3b..b20f06f 100644 --- a/src/styles/pages/profile.css +++ b/src/styles/pages/profile.css @@ -1 +1,17 @@ /* Profile page rules move here as they are retired from legacy-pages.css. */ + +@media (max-width: 900px) { + .profile-page, + .auth-page, + .settings-page { + padding: 16px 16px 80px; + } +} + +@media (max-width: 560px) { + .profile-page, + .auth-page, + .settings-page { + padding: 12px 10px 80px; + } +} diff --git a/src/styles/pages/provider-health.css b/src/styles/pages/provider-health.css index 9668a23..7844941 100644 --- a/src/styles/pages/provider-health.css +++ b/src/styles/pages/provider-health.css @@ -163,4 +163,41 @@ .provider-health-table tr:hover td { background: var(--surface-elevated); +} + +@media (max-width: 900px) { + .provider-health-page__inner { + padding: 16px; + gap: 16px; + } + + .provider-health-grid { + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + } +} + +@media (max-width: 560px) { + .provider-health-page__inner { + padding: 12px 12px 80px; + gap: 12px; + } + + .provider-health-grid { + grid-template-columns: 1fr; + gap: 10px; + } + + .provider-health-toolbar { + flex-direction: column; + gap: 8px; + } + + .provider-health-table { + font-size: 11px; + } + + .provider-health-table th, + .provider-health-table td { + padding: 6px 8px; + } } \ No newline at end of file diff --git a/src/styles/pages/size-template.css b/src/styles/pages/size-template.css index 1f7ef74..b27100c 100644 --- a/src/styles/pages/size-template.css +++ b/src/styles/pages/size-template.css @@ -474,3 +474,24 @@ width: min(100%, 430px); } } + +@media (max-width: 560px) { + .size-template-page { + padding: 12px 10px 80px; + } + + .size-template-main-frame { + grid-template-columns: 1fr; + gap: 12px; + } + + .size-template-spec-grid { + grid-template-columns: repeat(2, 1fr); + gap: 8px; + } + + .size-template-preview-note, + .size-template-detail-card { + width: 100%; + } +} diff --git a/src/styles/pages/studio-layout.css b/src/styles/pages/studio-layout.css index 743cfd7..f534e89 100644 --- a/src/styles/pages/studio-layout.css +++ b/src/styles/pages/studio-layout.css @@ -678,3 +678,19 @@ max-height: 320px; } } + +@media (max-width: 560px) { + .studio-tool-layout { + grid-template-rows: 40px auto minmax(200px, 1fr) 32px; + } + + .studio-tool-layout__toolstrip { + padding: 6px 8px; + gap: 4px; + } + + .studio-panel { + max-height: 240px; + padding: 12px; + } +} diff --git a/src/styles/pages/subtitle-removal.css b/src/styles/pages/subtitle-removal.css index efc87b9..42304b0 100644 --- a/src/styles/pages/subtitle-removal.css +++ b/src/styles/pages/subtitle-removal.css @@ -133,3 +133,15 @@ opacity: 0.5; cursor: not-allowed; } + +@media (max-width: 900px) { + .subtitle-removal-page { + padding: 12px; + } +} + +@media (max-width: 560px) { + .subtitle-removal-page { + padding: 8px 8px 80px; + } +} diff --git a/src/styles/pages/workbench.css b/src/styles/pages/workbench.css index 740d45a..a9245ad 100644 --- a/src/styles/pages/workbench.css +++ b/src/styles/pages/workbench.css @@ -440,3 +440,137 @@ grid-template-columns: 1fr; } } + +/* ═══════════════════════════════════════════════════════ + Responsive: Workbench Launch & Active State + Breakpoints: 900px / 560px + ═══════════════════════════════════════════════════════ */ + +/* ── 900px: Tablet — launch state ── */ +@media (max-width: 900px) { + .wb-home { + padding: 36px 16px 80px; + gap: 18px; + } + + .wb-home__title { + font-size: clamp(24px, 6vw, 36px); + } + + .wb-home__composer { + max-width: 100%; + } + + .wb-home__suggestions { + max-width: 100%; + } + + .wb-showcase { + max-width: 100%; + } + + .wb-showcase__grid { + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 10px; + } + + /* Active state: message thread */ + .ai-workbench-content-scroll { + width: 100%; + padding: 16px 12px; + } + + .ai-chat-message-stack { + max-width: 86%; + } + + .ai-chat-message-bubble { + padding: 10px 12px; + font-size: 13px; + } + + /* Composer in active state */ + .wb-composer { + width: 100%; + padding: 8px 0 12px; + } +} + +/* ── 560px: Phone — full-width compact ── */ +@media (max-width: 560px) { + .wb-home { + padding: 24px 10px 72px; + gap: 14px; + } + + .wb-home__title { + font-size: clamp(20px, 7vw, 28px); + } + + .wb-home__glow { + width: 240px; + height: 120px; + top: -40px; + } + + .wb-showcase__grid { + grid-template-columns: repeat(2, 1fr); + gap: 8px; + } + + .wb-suggestion-chip { + font-size: 12px; + padding: 7px 12px; + } + + /* Active state: messages fill screen */ + .ai-workbench-content-scroll { + padding: 12px 8px; + } + + .ai-workbench-thread-shell { + max-width: 100%; + } + + .ai-chat-message-list { + gap: 8px; + } + + .ai-chat-message-stack { + max-width: 90%; + } + + .ai-chat-message-bubble { + padding: 8px 10px; + font-size: 13px; + border-radius: 12px; + } + + .ai-chat-message-bubble--user { + border-radius: 12px 12px 4px 12px; + } + + .ai-chat-message-bubble--ai { + border-radius: 12px 12px 12px 4px; + } + + .ai-chat-avatar { + width: 26px; + height: 26px; + flex: 0 0 26px; + font-size: 10px; + } + + .ai-chat-message-row { + gap: 6px; + } + + /* Composer at bottom */ + .wb-composer { + padding: 6px 0 10px; + } + + .wb-chat-scroll-actions { + display: none; + } +} diff --git a/src/styles/shell/app-shell.css b/src/styles/shell/app-shell.css index 5de0b7a..e341b1c 100644 --- a/src/styles/shell/app-shell.css +++ b/src/styles/shell/app-shell.css @@ -540,3 +540,101 @@ overflow: auto; scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent; } + +/* ═══════════════════════════════════════════════════════ + Responsive: Shell Navigation & Topbar + Breakpoints: 1180px (small desktop), 900px (tablet), + 560px (phone). Complements legacy-components.css rules. + ═══════════════════════════════════════════════════════ */ + +/* ── 1180px: Compact topbar ── */ +@media (max-width: 1180px) { + .brand-lockup__tone { + display: none; + } + .creator-button { + display: none; + } + .member-button { + max-width: 148px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +/* ── 900px: Bottom nav & Touch-friendly topbar ── */ +@media (max-width: 900px) { + .web-topbar { + position: sticky; + top: 0; + flex: 0 0 52px; + padding: 8px 12px; + gap: 10px; + } + + .brand-lockup__name { + max-width: 110px; + overflow: hidden; + text-overflow: ellipsis; + } + + .creator-button, + .member-button { + display: none; + } + + .profile-button span:last-child { + display: none; + } + + .profile-button { + min-width: 44px; + height: 44px; + padding: 0; + aspect-ratio: 1; + } + + .icon-button { + min-width: 44px; + height: 44px; + } + + .web-shell__page { + padding-bottom: 78px; + } + + .floating-page-scroll-actions { + display: none; + } +} + +/* ── 560px: Phone-sized compact layout ── */ +@media (max-width: 560px) { + .web-topbar { + flex: 0 0 44px; + padding: 6px 10px; + gap: 6px; + } + + .brand-lockup { + gap: 6px; + } + + .brand-lockup__mark { + width: 24px; + height: 24px; + border-radius: 6px; + } + + .brand-lockup__name { + font-size: 13px; + max-width: 80px; + } + + .profile-button, + .icon-button { + min-width: 36px; + height: 36px; + } +} diff --git a/src/styles/tokens.css b/src/styles/tokens.css index df06cf9..ddeacfa 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -84,3 +84,14 @@ --danger: var(--error); --shadow-soft: var(--shadow-panel); } + +/* ═══════════════════════════════════════════════════════ + Responsive Breakpoints (standardized) + Reference-only — CSS custom properties cannot be used + inside @media queries, but all pages should align to + these three breakpoints for consistency. + + Phone : 560px (max-width — portrait / landscape) + Tablet : 900px (max-width — tablet / small desktop) + Desktop: 1180px (max-width — large desktop) + ═══════════════════════════════════════════════════════ */