feat: add bug feedback feature, fix canvas context menu on zoom, remove billing note from chat

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/api/bugFeedbackClient.ts

@@ -0,0 +1,32 @@
+import { serverRequest } from "./serverConnection";
+
+export interface BugFeedbackInput {
+  title: string;
+  description: string;
+  screenshotUrl?: string;
+}
+
+export interface BugFeedbackItem {
+  id: number;
+  title: string;
+  description: string;
+  screenshotUrl?: string | null;
+  status: "pending" | "approved" | "rejected";
+  adminNote?: string | null;
+  createdAt: string;
+}
+
+export const bugFeedbackClient = {
+  async submit(input: BugFeedbackInput): Promise<{ id: number; status: string; createdAt: string }> {
+    const payload = await serverRequest<{ feedback: { id: number; status: string; createdAt: string } }>(
+      "bug-feedback",
+      { method: "POST", body: input },
+    );
+    return payload.feedback;
+  },
+
+  async listMine(): Promise<BugFeedbackItem[]> {
+    const payload = await serverRequest<{ feedbacks?: BugFeedbackItem[] }>("bug-feedback/mine");
+    return Array.isArray(payload.feedbacks) ? payload.feedbacks : [];
+  },
+};

src/components/AppShell.tsx

@@ -1,6 +1,7 @@
 import {
   ArrowDownOutlined,
   ArrowUpOutlined,
+  BugOutlined,
   CheckCircleOutlined,
   FlagOutlined,
   InfoCircleOutlined,
@@ -14,6 +15,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { publicConfigClient, type WebPublicConfig } from "../api/publicConfigClient";
 import { toast } from "./toast/toastStore";
+import { BugFeedbackModal } from "./BugFeedbackModal";
 import type { ServerConnectionHealth } from "../api/serverConnection";
 import { ossAssets } from "../data/ossAssets";
 import { canManageCommunityCases, canReviewCommunity } from "../features/community-review/communityPermissions";
@@ -68,6 +70,7 @@ function AppShell({
   const [profileOpen, setProfileOpen] = useState(false);
   const [rechargeOpen, setRechargeOpen] = useState(false);
   const [infoOpen, setInfoOpen] = useState(false);
+  const [bugFeedbackOpen, setBugFeedbackOpen] = useState(false);
   const infoRef = useRef<HTMLDivElement>(null);
   const [openSubmenuKey, setOpenSubmenuKey] = useState<WebViewKey | null>(null);
   const [publicConfig, setPublicConfig] = useState<WebPublicConfig>({});
@@ -343,6 +346,11 @@ function AppShell({
                   onMarkAllRead={onMarkAllNotificationsRead}
                 />
               )}
+              {session && (
+                <button className="info-button" type="button" aria-label="Bug反馈" title="Bug反馈" onClick={() => setBugFeedbackOpen(true)}>
+                  <BugOutlined />
+                </button>
+              )}
               <div className="info-popover-anchor" ref={infoRef}>
                 <button
                   className="info-button"
@@ -491,6 +499,7 @@ function AppShell({
       </div>
       {session?.user.role === "admin" ? <AdminMonitor /> : null}
       <RechargeModal open={rechargeOpen} onClose={() => setRechargeOpen(false)} currentBalance={displayedBalanceCents} />
+      <BugFeedbackModal open={bugFeedbackOpen} onClose={() => setBugFeedbackOpen(false)} />
       <CookieConsentBanner />
     </div>
   );

src/components/BugFeedbackModal.tsx

@@ -0,0 +1,131 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { BugOutlined, CameraOutlined, CloseOutlined } from "@ant-design/icons";
+import { bugFeedbackClient, type BugFeedbackItem } from "../api/bugFeedbackClient";
+import { uploadAssetWithProgress } from "../api/uploadWithProgress";
+import { toast } from "./toast/toastStore";
+
+interface BugFeedbackModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function BugFeedbackModal({ open, onClose }: BugFeedbackModalProps) {
+  const [tab, setTab] = useState<"submit" | "history">("submit");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [screenshotUrl, setScreenshotUrl] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [history, setHistory] = useState<BugFeedbackItem[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const backdropRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (open && tab === "history") loadHistory();
+  }, [open, tab]);
+
+  const loadHistory = useCallback(async () => {
+    setHistoryLoading(true);
+    try {
+      const items = await bugFeedbackClient.listMine();
+      setHistory(items);
+    } catch { /* silent */ }
+    finally { setHistoryLoading(false); }
+  }, []);
+
+  const handleScreenshot = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploading(true);
+    try {
+      const reader = new FileReader();
+      const dataUrl = await new Promise<string>((resolve) => {
+        reader.onload = () => resolve(reader.result as string);
+        reader.readAsDataURL(file);
+      });
+      const result = await uploadAssetWithProgress({ dataUrl, name: file.name, scope: "bug-feedback" });
+      setScreenshotUrl(result.url);
+    } catch { toast.error("截图上传失败"); }
+    finally { setUploading(false); }
+  }, []);
+
+  const handleSubmit = useCallback(async () => {
+    if (!title.trim()) { toast.error("请输入标题"); return; }
+    if (!description.trim()) { toast.error("请输入问题描述"); return; }
+    setSubmitting(true);
+    try {
+      await bugFeedbackClient.submit({ title: title.trim(), description: description.trim(), screenshotUrl: screenshotUrl || undefined });
+      toast.success("反馈提交成功，审核通过后将奖励 1 积分");
+      setTitle("");
+      setDescription("");
+      setScreenshotUrl(null);
+      onClose();
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : "提交失败");
+    } finally { setSubmitting(false); }
+  }, [title, description, screenshotUrl, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="bug-feedback-overlay" ref={backdropRef} onClick={(e) => { if (e.target === backdropRef.current) onClose(); }}>
+      <div className="bug-feedback-modal" role="dialog" aria-modal="true" aria-label="Bug反馈">
+        <div className="bug-feedback-modal__header">
+          <div className="bug-feedback-modal__tabs">
+            <button type="button" className={tab === "submit" ? "is-active" : ""} onClick={() => setTab("submit")}>提交反馈</button>
+            <button type="button" className={tab === "history" ? "is-active" : ""} onClick={() => setTab("history")}>我的反馈</button>
+          </div>
+          <button type="button" className="bug-feedback-modal__close" onClick={onClose} aria-label="关闭"><CloseOutlined /></button>
+        </div>
+        {tab === "submit" && (
+          <div className="bug-feedback-modal__form">
+            <p className="bug-feedback-modal__tip"><BugOutlined /> 提交有效 Bug 反馈，审核通过奖励 1 积分</p>
+            <label className="bug-feedback-modal__label">标题</label>
+            <input className="bug-feedback-modal__input" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="简述遇到的问题" maxLength={200} />
+            <label className="bug-feedback-modal__label">问题描述</label>
+            <textarea className="bug-feedback-modal__textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="详细描述操作步骤、预期结果和实际结果" maxLength={5000} rows={5} />
+            <label className="bug-feedback-modal__label">截图（可选）</label>
+            <div className="bug-feedback-modal__screenshot">
+              {screenshotUrl ? (
+                <div className="bug-feedback-modal__preview">
+                  <img src={screenshotUrl} alt="截图预览" />
+                  <button type="button" onClick={() => setScreenshotUrl(null)}>移除</button>
+                </div>
+              ) : (
+                <button type="button" className="bug-feedback-modal__upload-btn" onClick={() => fileInputRef.current?.click()} disabled={uploading}>
+                  <CameraOutlined /> {uploading ? "上传中..." : "添加截图"}
+                </button>
+              )}
+              <input ref={fileInputRef} type="file" accept="image/*" hidden onChange={handleScreenshot} />
+            </div>
+            <button type="button" className="bug-feedback-modal__submit" disabled={submitting} onClick={handleSubmit}>
+              {submitting ? "提交中..." : "提交反馈"}
+            </button>
+          </div>
+        )}
+        {tab === "history" && (
+          <div className="bug-feedback-modal__history">
+            {historyLoading ? <p className="bug-feedback-modal__empty">加载中...</p> : history.length === 0 ? <p className="bug-feedback-modal__empty">暂无反馈记录</p> : (
+              <ul className="bug-feedback-modal__list">
+                {history.map((item) => (
+                  <li key={item.id} className="bug-feedback-modal__item">
+                    <div className="bug-feedback-modal__item-head">
+                      <span className="bug-feedback-modal__item-title">{item.title}</span>
+                      <span className={`bug-feedback-modal__status bug-feedback-modal__status--${item.status}`}>
+                        {item.status === "pending" ? "审核中" : item.status === "approved" ? "已通过 +1积分" : "未通过"}
+                      </span>
+                    </div>
+                    <p className="bug-feedback-modal__item-desc">{item.description}</p>
+                    {item.adminNote && <p className="bug-feedback-modal__item-note">回复：{item.adminNote}</p>}
+                    <span className="bug-feedback-modal__item-date">{new Date(item.createdAt).toLocaleDateString()}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/features/canvas/CanvasPage.tsx

@@ -2874,6 +2874,10 @@ function CanvasPage({
       return;
     }
 
+    closeNodeContextMenus();
+    setContextMenu(null);
+    setSelectionContextMenu(null);
+
     const point = getCanvasPointFromClient(event.clientX, event.clientY);
     const zoomDelta = event.deltaY < 0 ? 1.08 : 0.92;
     setCanvasViewport((viewport) => {

src/features/workbench/WorkbenchPage.tsx

@@ -3102,11 +3102,6 @@ function WorkbenchPage({
                                   <span>{message.taskStatusLabel || generationStatus}</span>
                                 </div>
                               )}
-                              {message.role === "assistant" && message.mode === "chat" && message.status === "completed" && (
-                                <div className="ai-chat-task-billing-note">
-                                  {formatTextTokenUsage(message.taskUsage)}
-                                </div>
-                              )}
                               {(message.resultUrl || (message.result && message.status !== "thinking")) && (
                                 <ResultCard
                                   message={message}

src/styles/components/bug-feedback-modal.css

@@ -0,0 +1,252 @@
+.bug-feedback-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+}
+
+.bug-feedback-modal {
+  width: min(560px, 92vw);
+  max-height: 80vh;
+  overflow-y: auto;
+  border-radius: 16px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border-subtle);
+  box-shadow: var(--shadow-heavy, 0 12px 40px rgba(0,0,0,0.4));
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.bug-feedback-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bug-feedback-modal__tabs {
+  display: flex;
+  gap: 4px;
+}
+
+.bug-feedback-modal__tabs button {
+  padding: 6px 14px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.bug-feedback-modal__tabs button.is-active {
+  background: var(--accent);
+  color: #000;
+  border-color: var(--accent);
+}
+
+.bug-feedback-modal__close {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  border: none;
+  background: var(--bg-subtle);
+  color: var(--fg-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s;
+}
+
+.bug-feedback-modal__close:hover {
+  background: var(--bg-hover);
+}
+
+.bug-feedback-modal__form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.bug-feedback-modal__tip {
+  font-size: 13px;
+  color: var(--accent);
+  margin: 0;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: rgba(var(--accent-rgb, 0 255 136), 0.08);
+}
+
+.bug-feedback-modal__label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--fg-muted);
+}
+
+.bug-feedback-modal__input,
+.bug-feedback-modal__textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-subtle);
+  color: var(--fg-default);
+  font-size: 14px;
+  resize: vertical;
+}
+
+.bug-feedback-modal__textarea {
+  min-height: 100px;
+}
+
+.bug-feedback-modal__screenshot {
+  display: flex;
+  align-items: center;
+}
+
+.bug-feedback-modal__upload-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  border: 1px dashed var(--border-subtle);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.bug-feedback-modal__upload-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.bug-feedback-modal__preview {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.bug-feedback-modal__preview img {
+  width: 80px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 6px;
+  border: 1px solid var(--border-subtle);
+}
+
+.bug-feedback-modal__preview button {
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--border-subtle);
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.bug-feedback-modal__submit {
+  padding: 10px 20px;
+  border-radius: 8px;
+  border: none;
+  background: var(--accent);
+  color: #000;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.bug-feedback-modal__submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.bug-feedback-modal__history {
+  min-height: 120px;
+}
+
+.bug-feedback-modal__empty {
+  text-align: center;
+  color: var(--fg-muted);
+  font-size: 13px;
+  padding: 32px 0;
+}
+
+.bug-feedback-modal__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.bug-feedback-modal__item {
+  padding: 12px;
+  border-radius: 10px;
+  background: var(--bg-subtle);
+  border: 1px solid var(--border-subtle);
+}
+
+.bug-feedback-modal__item-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.bug-feedback-modal__item-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--fg-default);
+}
+
+.bug-feedback-modal__status {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.bug-feedback-modal__status--pending {
+  background: rgba(255, 180, 0, 0.15);
+  color: #e6a700;
+}
+
+.bug-feedback-modal__status--approved {
+  background: rgba(0, 200, 80, 0.15);
+  color: #00c850;
+}
+
+.bug-feedback-modal__status--rejected {
+  background: rgba(255, 60, 60, 0.15);
+  color: #ff4040;
+}
+
+.bug-feedback-modal__item-desc {
+  font-size: 13px;
+  color: var(--fg-muted);
+  margin: 0 0 4px;
+  white-space: pre-wrap;
+}
+
+.bug-feedback-modal__item-note {
+  font-size: 12px;
+  color: var(--accent);
+  margin: 4px 0;
+}
+
+.bug-feedback-modal__item-date {
+  font-size: 11px;
+  color: var(--fg-muted);
+  opacity: 0.7;
+}

src/styles/index.css

@@ -38,5 +38,6 @@
 @import "./components/empty-state.css";
 @import "./components/page-transition.css";
 @import "./components/motion.css";
+@import "./components/bug-feedback-modal.css";
 @import "./themes/dark-green.css";
 @import "./pages/local-theme-parity.css";

src/styles/pages/agent.css

@@ -1,13 +1 @@
 /* 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

@@ -243,24 +243,3 @@
     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,30 +4211,3 @@
     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

@@ -910,94 +910,3 @@
   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;
-  }
-}

src/styles/pages/community.css

@@ -117,52 +117,3 @@
   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

@@ -8382,147 +8382,6 @@
 .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 ===== */

src/styles/pages/image-workbench.css

@@ -1776,28 +1776,3 @@ 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;
-  }
-}

src/styles/pages/more-tools.css

@@ -1286,23 +1286,3 @@ 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,39 +313,3 @@
     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

@@ -2,32 +2,16 @@
 
 /* ── 代表作滚动容器：固定3列，刚好显示9个（3行），超出可滚动，隐藏滚动条 ── */
 .profile-page__works-scroll {
-  max-height: 390px;
+  max-height: 390px; /* 3行卡片：3 × 120(min-height) + 2 × 10(gap) = 380px，留10px余量 */
   overflow-y: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
 }
 
 .profile-page__works-scroll::-webkit-scrollbar {
-  display: none;
+  display: none; /* Chrome/Safari/Edge */
 }
 
 .profile-page__works-scroll .profile-page__list-grid {
-  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;
-  }
+  grid-template-columns: repeat(3, 1fr); /* 固定3列，刚好3×3=9个可见 */
 }

src/styles/pages/provider-health.css

@@ -163,41 +163,4 @@
 
 .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,24 +474,3 @@
     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

@@ -674,19 +674,3 @@
     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,15 +133,3 @@
   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,137 +440,3 @@
     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

@@ -896,21 +896,6 @@
   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;
@@ -977,7 +962,6 @@
   }
 }
 
-/* ── 640px: Narrower topbar adjustments ── */
 @media (max-width: 640px) {
   .brand-lockup__name {
     font-size: 14px;
@@ -997,33 +981,3 @@
     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;
-  }
-}

src/styles/tokens.css

@@ -84,14 +84,3 @@
   --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)
-   ═══════════════════════════════════════════════════════ */