feat: 实现全局响应式布局，适配不同设备、不同屏幕、不同分辨率

- 统一断点体系：560px(手机)、900px(平板)、1180px(小桌面)
- Shell导航：900px底部导航条、560px紧凑布局、顶栏触控优化
- 电商页面：三栏布局在平板/手机下改为单栏堆叠+横向标签切换
- 工作台：启动页编辑器全宽、消息气泡适配窄屏、建议标签换行
- 画布页面：工具栏横向滚动、节点缩小、手机全屏操作
- 社区/资产库/工具页/数字人等全部17个页面补齐响应式断点
- 新增32条@media规则，媒体查询从107条增至139条

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;
+  }
+}

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);
+  }
+}

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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; }

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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;
+  }
 }

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%;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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)
+   ═══════════════════════════════════════════════════════ */