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

- 统一断点体系：560px(手机)、900px(平板)、1180px(小桌面) - Shell导航：900px底部导航条、560px紧凑布局、顶栏触控优化 - 电商页面：三栏布局在平板/手机下改为单栏堆叠+横向标签切换 - 工作台：启动页编辑器全宽、消息气泡适配窄屏、建议标签换行 - 画布页面：工具栏横向滚动、节点缩小、手机全屏操作 - 社区/资产库/工具页/数字人等全部17个页面补齐响应式断点 - 新增32条@media规则，媒体查询从107条增至139条
2026-06-02 17:45:57 +08:00
parent bedee3ba8d
commit ecade14bd0
17 changed files with 769 additions and 0 deletions
@@ -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;
+  }
+}