Merge pull request 'feat: 实现全局响应式布局，适配不同设备、不同屏幕、不同分辨率' (#17 ) from feat/responsive-layout into master

Merge PR 17 feat responsive-layout
merge: resolve conflicts between feat/responsive-layout and master
2026-06-05 07:21:29 +00:00 · 2026-06-05 15:14:17 +08:00 · 2026-06-05 06:58:37 +00:00 · 2026-06-05 14:05:39 +08:00 · 2026-06-05 10:34:19 +08:00 · 2026-06-04 18:06:43 +08:00
20 changed files with 2495 additions and 813 deletions
@@ -3,6 +3,24 @@ import type { ReactNode } from "react";
 import type { WorkbenchOption, WorkbenchFieldGroup } from "./workbenchConstants";
 import { getRatioOptionClassName, getSettingsGridColumnsClassName } from "./workbenchReferenceUtils";

+const VIDEO_MODEL_ICON_URLS = {
+  happyHorse: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/HappyHorse.svg",
+  pixverse: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/Pixverse.svg",
+  vidu: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/viduQ3.svg",
+  wanxiang: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/wan.svg",
+  kling: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/kling.svg",
+} as const;
+
+function getVideoModelIconUrl(option: WorkbenchOption): string | null {
+  const text = `${option.value} ${option.label}`.toLowerCase();
+  if (text.includes("happyhorse")) return VIDEO_MODEL_ICON_URLS.happyHorse;
+  if (text.includes("pixverse")) return VIDEO_MODEL_ICON_URLS.pixverse;
+  if (text.includes("vidu")) return VIDEO_MODEL_ICON_URLS.vidu;
+  if (text.includes("wan") || text.includes("万相")) return VIDEO_MODEL_ICON_URLS.wanxiang;
+  if (text.includes("kling") || text.includes("可灵")) return VIDEO_MODEL_ICON_URLS.kling;
+  return null;
+}
+
 export function SelectChip({
  chipId,
  value,
@@ -56,6 +74,7 @@ export function SelectChip({
        >
          {options.map((option, index) => {
            const active = option.value === value;
+            const iconUrl = chipId === "video-model" ? getVideoModelIconUrl(option) : null;
            return (
              <button
                key={option.value}
@@ -71,6 +90,11 @@ export function SelectChip({
              >
                <span className="ai-workbench-select-chip__option-label">
                  <span className="ai-workbench-select-chip__option-dot" aria-hidden="true" />
+                  {iconUrl ? (
+                    <span className="ai-workbench-select-chip__option-icon" aria-hidden="true">
+                      <img src={iconUrl} alt="" loading="lazy" />
+                    </span>
+                  ) : null}
                  <span className="ai-workbench-select-chip__option-copy">
                    <span className="ai-workbench-select-chip__option-title">
                      <span>{option.label}</span>
@@ -261,4 +285,4 @@ export function InlineOptionChip({
      ) : null}
    </div>
  );
-}
+}
@@ -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;
+  }
+}
@@ -243,3 +243,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);
+  }
+}
@@ -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;
+  }
+}
@@ -910,3 +910,94 @@
  height: 100%;
  cursor: crosshair;
 }
+
+/* ═══════════════════════════════════════════════════════
+   Responsive: Canvas
+   Breakpoints: 900px / 560px
+   ═══════════════════════════════════════════════════════ */
+
+@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;
+  }
+}
+
+@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;
+  }
+}
@@ -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;
+  }
+}
@@ -1166,6 +1166,25 @@
  background: #202c28;
 }

+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full {
+  cursor: default;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full strong {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.08);
+  color: #aeb8c4;
+  box-shadow: none;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full:hover {
+  border-color: rgba(255, 255, 255, 0.16);
+  background:
+    radial-gradient(circle at 50% 0%, rgba(var(--ecm-accent-rgb), 0.09), transparent 58%),
+    var(--ecm-inset);
+  transform: none;
+}
+
 .product-clone-page[data-tool="clone"] .clone-ai-upload-zone:active {
  transform: scale(0.98);
 }
@@ -1283,6 +1302,27 @@
  transform: scale(0.92);
 }

+.product-clone-page[data-tool="clone"] .clone-ai-card,
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone,
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-files {
+  position: relative;
+  overflow: visible;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone {
+  z-index: 8;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-uploaded-file:hover),
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-uploaded-file:focus-within) {
+  z-index: 90;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:focus-within {
+  z-index: 95;
+}
+
 .product-clone-page[data-tool="clone"] .clone-ai-settings-section {
  display: grid;
  gap: 8px;
@@ -3474,7 +3514,7 @@

 .uploaded-image-zoom {
  position: absolute;
-  z-index: 70;
+  z-index: 220;
  left: 50%;
  bottom: calc(100% + 10px);
  display: block;
@@ -3495,6 +3535,18 @@
  visibility: hidden;
 }

+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file .uploaded-image-zoom {
+  left: 0;
+  bottom: calc(100% + 12px);
+  width: min(240px, 58vw);
+  transform: translate(0, 8px) scale(0.96);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover .uploaded-image-zoom,
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:focus-within .uploaded-image-zoom {
+  transform: translate(0, 0) scale(1);
+}
+
 .uploaded-image-zoom img {
  display: block;
  width: 100%;
@@ -3517,6 +3569,233 @@
  visibility: visible;
 }

+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) {
+  align-content: start;
+  justify-items: stretch;
+  gap: 10px;
+  min-height: 0;
+  padding: 12px;
+  text-align: left;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-main {
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  width: 100%;
+  align-items: center;
+  justify-items: start;
+  gap: 4px 9px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-icon {
+  grid-row: span 2;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  font-size: 16px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-title {
+  min-width: 0;
+  color: #c9d2dd;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) strong {
+  grid-row: span 2;
+  min-width: 96px;
+  height: 34px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-hint {
+  grid-column: 2;
+  min-width: 0;
+  font-size: 10px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview-wrap {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview {
+  position: relative;
+  display: grid;
+  width: 100%;
+  min-height: 126px;
+  overflow: hidden;
+  border: 1px solid rgba(var(--ecm-accent-rgb), 0.2);
+  border-radius: 10px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 48%),
+    rgba(8, 10, 12, 0.56);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview img {
+  display: block;
+  width: 100%;
+  height: 126px;
+  object-fit: contain;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 2px;
+  color: #eef2f6;
+  text-align: left;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta span {
+  display: grid;
+  min-width: 0;
+  gap: 1px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta b,
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta em {
+  display: block;
+  overflow: hidden;
+  max-width: 260px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta b {
+  color: var(--ecm-accent);
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta em {
+  color: #aeb8c4;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin-top: 0;
+  padding-top: 2px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-stack {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-head {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: #768292;
+  font-size: 10px;
+  font-weight: 900;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-head span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-head b {
+  flex: 0 0 auto;
+  padding: 2px 7px;
+  border: 1px solid rgba(var(--ecm-accent-rgb), 0.18);
+  border-radius: 999px;
+  background: rgba(var(--ecm-accent-rgb), 0.07);
+  color: var(--ecm-accent);
+  font-size: 10px;
+  line-height: 1.4;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file {
+  width: 46px;
+  height: 46px;
+  overflow: hidden;
+  border-color: rgba(255, 255, 255, 0.12);
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.035);
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file > button:not(.clone-ai-uploaded-file__thumb) {
+  top: 2px;
+  right: 2px;
+  width: 16px;
+  height: 16px;
+  background: rgba(8, 10, 12, 0.82);
+  color: #fff;
+  font-size: 9px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file.is-active {
+  border-color: rgba(var(--ecm-accent-rgb), 0.86);
+  box-shadow: 0 0 0 2px rgba(var(--ecm-accent-rgb), 0.12);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file .clone-ai-uploaded-file__thumb {
+  position: static;
+  inset: auto;
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: inherit;
+  opacity: 1;
+  transform: none;
+  transition: none;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file .clone-ai-uploaded-file__thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file__thumb span {
+  position: absolute;
+  left: 3px;
+  bottom: 3px;
+  min-width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: rgba(8, 10, 12, 0.76);
+  color: #eef2f6;
+  font-size: 9px;
+  font-weight: 900;
+  line-height: 14px;
+  text-align: center;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover {
+  border-color: rgba(var(--ecm-accent-rgb), 0.62);
+  transform: translateY(-1px);
+}
+
@keyframes image-mention-menu-rise {
  from {
    opacity: 0;
@@ -8382,6 +8661,147 @@
 .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; }

 /* ===== Ecommerce Template Apple Carousel ===== */
@@ -8763,6 +9183,13 @@
  box-shadow: 0 10px 28px rgba(var(--ecm-accent-rgb), 0.18);
 }

+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full strong {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.08);
+  color: #aeb8c4;
+  box-shadow: none;
+}
+
 .product-clone-page[data-tool="clone"] :is(.clone-ai-generate:hover:not(:disabled), .clone-ai-send-button:hover:not(:disabled)) {
  filter: brightness(1.03);
  transform: translateY(-1px);
@@ -1776,3 +1776,28 @@ textarea.image-workbench-prompt {
 .image-workbench-result-card:nth-child(2) { animation-delay: 0.08s; }
 .image-workbench-result-card:nth-child(3) { animation-delay: 0.16s; }
 .image-workbench-result-card:nth-child(4) { animation-delay: 0.24s; }
+
+@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;
+  }
+}
@@ -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;
+  }
+}
@@ -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;
+  }
+}
@@ -2,16 +2,32 @@

 /* ── 代表作滚动容器：固定3列，刚好显示9个（3行），超出可滚动，隐藏滚动条 ── */
 .profile-page__works-scroll {
-  max-height: 390px; /* 3行卡片：3 × 120(min-height) + 2 × 10(gap) = 380px，留10px余量 */
+  max-height: 390px;
  overflow-y: auto;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE/Edge */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }

 .profile-page__works-scroll::-webkit-scrollbar {
-  display: none; /* Chrome/Safari/Edge */
+  display: none;
 }

 .profile-page__works-scroll .profile-page__list-grid {
-  grid-template-columns: repeat(3, 1fr); /* 固定3列，刚好3×3=9个可见 */
+  grid-template-columns: repeat(3, 1fr);
+}
+
+@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;
+  }
 }
@@ -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;
+  }
 }
@@ -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%;
+  }
+}
@@ -674,3 +674,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;
+  }
+}
@@ -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;
+  }
+}
@@ -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;
+  }
+}
@@ -896,6 +896,21 @@
  cursor: pointer;
 }

+@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;
+  }
+}
+
@media (max-width: 900px) {
  .web-shell {
    overflow: hidden;
@@ -962,6 +977,7 @@
  }
 }

+/* ── 640px: Narrower topbar adjustments ── */
@media (max-width: 640px) {
  .brand-lockup__name {
    font-size: 14px;
@@ -981,3 +997,33 @@
    justify-content: space-between;
  }
 }
+
+/* ── 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;
+  }
+}
@@ -1485,6 +1485,40 @@
  opacity: 1;
 }

+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  margin-top: 0;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.075);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option-icon img {
+  display: block;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+  filter: brightness(0) invert(1);
+  opacity: 0.86;
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option:hover .ai-workbench-select-chip__option-icon,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option.is-active .ai-workbench-select-chip__option-icon {
+  border-color: rgba(var(--accent-rgb), 0.2);
+  background: rgba(var(--accent-rgb), 0.08);
+}
+
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option:hover .ai-workbench-select-chip__option-icon img,
+.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option.is-active .ai-workbench-select-chip__option-icon img {
+  opacity: 1;
+}
+
 .web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option-copy {
  display: flex;
  flex: 1;
@@ -7365,6 +7399,93 @@
  }
 }

+/* Profile center: align with the ecommerce generator's flatter dark-green tone. */
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard {
+  background: var(--bg-base);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner {
+  background: var(--bg-panel);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner.has-image {
+  background-color: var(--bg-panel);
+  background-blend-mode: luminosity;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner-overlay {
+  background:
+    linear-gradient(180deg, rgba(13, 15, 15, 0.7), rgba(13, 15, 15, 0.88)),
+    linear-gradient(90deg, rgba(13, 15, 15, 0.62), rgba(13, 15, 15, 0.28) 44%, rgba(13, 15, 15, 0.68));
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-item,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-state,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__upload-card {
+  border-color: var(--border-weak);
+  background: var(--bg-panel);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs {
+  background: var(--bg-inset);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button {
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--fg-soft);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button.is-active,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button.is-active {
+  border-color: rgba(var(--accent-rgb), 0.42);
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__meta-item {
+  border-color: rgba(255, 255, 255, 0.065);
+  background: rgba(255, 255, 255, 0.024);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview:not(.has-media) {
+  border-color: rgba(255, 255, 255, 0.065);
+  background: rgba(255, 255, 255, 0.024);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-placeholder {
+  border-color: rgba(var(--accent-rgb), 0.2);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-badge {
+  background: rgba(8, 14, 12, 0.78);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring .profile-page__avatar {
+  box-shadow: none;
+}
+
 /* Ecommerce generation page: keep its carousel and composer independent from
   the community carousel rules that share class names. */
 .web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {
@@ -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)
+   ═══════════════════════════════════════════════════════ */
Author	SHA1	Message	Date
stringadmin	c113d82844	Merge pull request 'feat: 实现全局响应式布局，适配不同设备、不同屏幕、不同分辨率' (#17 ) from feat/responsive-layout into master Merge PR 17 feat responsive-layout	2026-06-05 07:21:29 +00:00
stringadmin	8cf9ee3519	merge: resolve conflicts between feat/responsive-layout and master Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-05 15:14:17 +08:00
stringadmin	2129b29dfe	Merge pull request 'Feat/profile account polish' (#16 ) from feat/profile-account-polish into master Reviewed-on: #16	2026-06-05 06:58:37 +00:00
stringadmin	d36d46836f	merge: resolve EcommercePage.tsx conflict, integrate master into profile-account-polish Keep master's EcommercePage.tsx (has more complete upload logic from prior conflict resolution). Accept all other master changes including canvas tool panels, task lifecycle, and workbench updates. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-05 14:05:39 +08:00
ludan	b17a978e9e	Merge origin/master: 保留电商上传优化版，接入master新增面板组件冲突解决：EcommercePage.tsx 保留本地版本（上传预览大图+缩略图切换交互） master新增：6个独立面板组件、图片校验工具、视频工作区增强、CSS更新	2026-06-05 10:34:19 +08:00
ludan	6d68ab02bb	feat: 个人中心账户摘要区重构、主题色调对齐电商【账户摘要区重构】 - 新增 profile-page__account-summary 双列网格布局（主信息 + 右侧指标） - 主信息区（account-summary-main）：显示账号名/任务概览 - 指标区（account-summary-metric）：品牌绿色数字展示积分/完成数，左侧分隔线 - 任务概览改为"X 个任务"更自然的表达方式 - 替代旧 upload-card--meta/meta-item 类名体系【主题色调对齐】 - 个人中心页面背景、侧边栏、卡片统一为电商同款平坦暗色 - 移除 box-shadow 深度阴影，使用 var(--bg-panel)/var(--bg-inset) Token - Tab 切换按钮透明背景，选中态品牌绿边框+浅绿背景 - 统计卡片/简介/Bio/媒体预览卡片统一边框与背景色 - 媒体徽章、分享按钮、头像环去除阴影	2026-06-04 18:06:43 +08:00
ludan	2b65206b84	feat: 电商克隆上传交互升级、视频模型选择器图标【电商克隆 - 商品图上传交互重构】 - 新增上传预览大图区（clone-ai-upload-preview-wrap），点击缩略图可切换预览 - 选中缩略图增加 is-active 绿色边框高亮 - 预览区显示商品图编号 + 尺寸/比例/格式信息（formatProductImageSpec） - 上传区到达 7 张上限时显示"已达上限"、阻止拖拽上传、输入框禁用 - 上传图片自动异步读取尺寸（width/height），无需等待上传完成即可展示 - 已上传素材区重构为列表头（标题+计数）+ 缩略图栈式布局 - 缩略图增加序号角标（1-7），删除按钮独立于缩略图下方 - selectedProductImageId 状态自动管理：删除/新增时自动切换到有效图片【工作台 - 视频模型选择器图标】 - 新增 VIDEO_MODEL_ICON_URLS 映射（HappyHorse/Pixverse/Vidu/Wan/Kling） - SelectChip 组件在 chipId=video-model 时显示模型品牌图标 - getVideoModelIconUrl 支持中英文模糊匹配【样式】 - ecommerce.css: 预览区/素材栈/缩略图选中态/上限态完整样式 - dark-green.css: 主题层微调	2026-06-04 17:27:40 +08:00
ludan	ecade14bd0	feat: 实现全局响应式布局，适配不同设备、不同屏幕、不同分辨率 - 统一断点体系：560px(手机)、900px(平板)、1180px(小桌面) - Shell导航：900px底部导航条、560px紧凑布局、顶栏触控优化 - 电商页面：三栏布局在平板/手机下改为单栏堆叠+横向标签切换 - 工作台：启动页编辑器全宽、消息气泡适配窄屏、建议标签换行 - 画布页面：工具栏横向滚动、节点缩小、手机全屏操作 - 社区/资产库/工具页/数字人等全部17个页面补齐响应式断点 - 新增32条@media规则，媒体查询从107条增至139条	2026-06-02 17:45:57 +08:00