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