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/App.tsx

@@ -263,7 +263,6 @@ function App() {
 
   // Task store
   const tasks = useTaskStore((s) => s.tasks);
-  const setTasks = useTaskStore((s) => s.setTasks);
   const appendTask = useTaskStore((s) => s.appendTask);
   const mergeServerTasks = useTaskStore((s) => s.mergeServerTasks);
   const clearTasks = useTaskStore((s) => s.clearTasks);
@@ -1043,8 +1042,6 @@ function App() {
             onOpenWorkbench={() => handleSetView("workbench")}
             onOpenCommunity={() => handleSetView("community")}
             onDeleteProject={handleDeleteProject}
-            onOpenProject={handleOpenProject}
-            onRemoveWork={(task) => setTasks(tasks.filter((item) => item.id !== task.id))}
           />
         );
       case "community":

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>({});
@@ -75,7 +78,7 @@ function AppShell({
   const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
   const isAuthView = activeView === "login";
   const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
-  const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
+  const showFloatingNav = (!isAuthView || !!session) && !isImmersiveView && activeView !== "home";
   const toolSurfaceViews = [
     "workbench",
     "canvas",
@@ -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/more/MorePage.tsx

@@ -12,7 +12,7 @@ import {
   ThunderboltOutlined,
   VideoCameraOutlined,
 } from "@ant-design/icons";
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { useCallback, useEffect, useState } from "react";
 import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
 
@@ -28,8 +28,6 @@ interface MoreTool {
   id: string;
   title: string;
   text: string;
-  useCase: string;
-  tags: string[];
   icon: ReactNode;
   category: ToolCategory;
   target?: WebViewKey;
@@ -39,77 +37,23 @@ interface MoreTool {
   featured?: boolean;
 }
 
-type CompareScene =
-  | "workbench"
-  | "inpaint"
-  | "camera"
-  | "upscale"
-  | "watermark"
-  | "dialog"
-  | "subtitle"
-  | "digital-human"
-  | "character"
-  | "avatar";
-
-const toolCompareScenes: Record<string, CompareScene> = {
-  workbench: "workbench",
-  inpaint: "inpaint",
-  camera: "camera",
-  upscale: "upscale",
-  watermarkRemoval: "watermark",
-  dialogGenerator: "dialog",
-  subtitleRemoval: "subtitle",
-  digitalHuman: "digital-human",
-  characterMix: "character",
-  avatarConsole: "avatar",
-};
-
-function ToolComparePanel({ scene }: { scene: CompareScene }) {
-  return (
-    <span className={`more-card__compare more-card__compare--${scene}`} aria-hidden="true">
-      <span className="more-card__compare-labels">
-        <span>Before</span>
-        <span>After</span>
-      </span>
-      <span className="more-card__compare-stage">
-        <span className="more-card__compare-side more-card__compare-side--before">
-          <span className="more-card__scene-subject" />
-          <span className="more-card__scene-detail" />
-          <span className="more-card__scene-overlay" />
-        </span>
-        <span className="more-card__compare-divider">
-          <span />
-        </span>
-        <span className="more-card__compare-side more-card__compare-side--after">
-          <span className="more-card__scene-subject" />
-          <span className="more-card__scene-detail" />
-          <span className="more-card__scene-overlay" />
-        </span>
-      </span>
-    </span>
-  );
-}
-
 const tools: MoreTool[] = [
-  { id: "workbench", title: "图片工作台", text: "融合、修复、局部增强", useCase: "适合商品图精修、创意合成和局部画面重做", tags: ["热门", "一站式", "商品图"], icon: <EditOutlined />, category: "image", imageTool: "workbench", ready: true, featured: true },
-  { id: "inpaint", title: "局部重绘", text: "修掉瑕疵、替换物体、重做局部画面", useCase: "适合快速处理商品瑕疵、人物细节和背景杂物", tags: ["新手推荐", "精修"], icon: <HighlightOutlined />, category: "image", imageTool: "inpaint", ready: true },
-  { id: "camera", title: "镜头实验室", text: "快速生成俯拍、特写、广角等商业镜头", useCase: "适合做产品主图、种草图和不同机位方案", tags: ["电商常用", "镜头"], icon: <CameraOutlined />, category: "image", imageTool: "camera", ready: true },
-  { id: "upscale", title: "分辨率提升", text: "把低清图片或视频提升到可交付质感", useCase: "适合修复旧素材、放大商品图和增强短视频清晰度", tags: ["高清", "交付前"], icon: <ColumnWidthOutlined />, category: "image", target: "resolutionUpscale", ready: true },
-  { id: "watermarkRemoval", title: "去水印", text: "智能去除图片水印、文字和遮挡元素", useCase: "适合整理素材、清理参考图和恢复画面干净度", tags: ["素材清理", "高频"], icon: <DeleteOutlined />, category: "image", target: "watermarkRemoval", ready: true },
-  { id: "dialogGenerator", title: "交互式对话框生成器", text: "上传背景图，快速制作可拖拽编辑的对话框", useCase: "适合剧情海报、社媒截图和角色对白设计", tags: ["内容创作", "可编辑"], icon: <MessageOutlined />, category: "image", target: "dialogGenerator", ready: true },
-  { id: "subtitleRemoval", title: "字幕去除", text: "擦除视频字幕，让画面重新变干净", useCase: "适合二创前素材整理、短视频重剪和画面修复", tags: ["视频增强", "素材清理"], icon: <DeleteOutlined />, category: "video", target: "subtitleRemoval", ready: true },
-  { id: "digitalHuman", title: "数字人", text: "用一张人像和音频生成口播视频", useCase: "适合品牌讲解、课程口播和带货短视频", tags: ["热门", "口播", "视频"], icon: <CustomerServiceOutlined />, category: "video", target: "digitalHuman", ready: true, featured: true },
-  { id: "characterMix", title: "角色迁移", text: "把人物图迁移到参考视频的动作里", useCase: "适合角色短片、动作复刻和虚拟人内容生产", tags: ["角色视频", "动作"], icon: <SwapOutlined />, category: "video", target: "characterMix", ready: true },
-  { id: "avatarConsole", title: "数字人控制台", text: "管理形象、播报、互动与接入配置", useCase: "适合持续运营数字人、配置品牌形象和复用口播模板", tags: ["运营台", "企业"], icon: <DashboardOutlined />, category: "video", target: "avatarConsole", ready: true },
+  { id: "workbench", title: "图片工作台", text: "融合、修复、局部增强", icon: <EditOutlined />, category: "image", imageTool: "workbench", ready: true, featured: true },
+  { id: "inpaint", title: "局部重绘", text: "遮罩区域重新生成", icon: <HighlightOutlined />, category: "image", imageTool: "inpaint", ready: true },
+  { id: "camera", title: "镜头实验室", text: "角度、焦段和机位控制", icon: <CameraOutlined />, category: "image", imageTool: "camera", ready: true },
+  { id: "upscale", title: "分辨率提升", text: "图片与视频高清超分", icon: <ColumnWidthOutlined />, category: "image", target: "resolutionUpscale", ready: true },
+  { id: "watermarkRemoval", title: "去水印", text: "AI 智能去除图片水印和文字", icon: <DeleteOutlined />, category: "image", target: "watermarkRemoval", ready: true },
+  { id: "dialogGenerator", title: "交互式对话框生成器", text: "上传背景图，添加可拖拽编辑的对话框", icon: <MessageOutlined />, category: "image", target: "dialogGenerator", ready: true },
+  { id: "subtitleRemoval", title: "字幕去除", text: "AI 智能擦除视频字幕", icon: <DeleteOutlined />, category: "video", target: "subtitleRemoval", ready: true },
+  { id: "digitalHuman", title: "数字人", text: "参考人像与音频生成口播视频", icon: <CustomerServiceOutlined />, category: "video", target: "digitalHuman", ready: true, featured: true },
+  { id: "characterMix", title: "角色迁移", text: "人物图迁移到参考视频动作", icon: <SwapOutlined />, category: "video", target: "characterMix", ready: true },
+  { id: "avatarConsole", title: "数字人控制台", text: "形象、播报、互动与接入配置", icon: <DashboardOutlined />, category: "video", target: "avatarConsole", ready: true },
 ];
 
 interface FeaturedTool {
   id: string;
   title: string;
   desc: string;
-  kicker: string;
-  steps: string[];
-  outcome: string;
   icon: ReactNode;
   imageTool?: WebImageWorkbenchTool;
   target?: WebViewKey;
@@ -121,10 +65,7 @@ const featuredTools: FeaturedTool[] = [
   {
     id: "workbench",
     title: "图片工作台",
-    desc: "从一张素材开始，完成精修、合成和二次创作。",
-    kicker: "图片精修工作流",
-    steps: ["上传素材", "局部修复", "高清导出"],
-    outcome: "适合商品图、海报图和创意视觉",
+    desc: "融合、修复、局部增强 — 一站式图片创作",
     icon: <EditOutlined />,
     imageTool: "workbench",
     category: "image",
@@ -133,10 +74,7 @@ const featuredTools: FeaturedTool[] = [
   {
     id: "digitalHuman",
     title: "数字人",
-    desc: "用参考人像和音频，快速生成可交付口播视频。",
-    kicker: "口播视频工作流",
-    steps: ["选择人像", "上传音频", "生成视频"],
-    outcome: "适合品牌讲解、课程和带货短视频",
+    desc: "参考人像与音频，一键生成口播视频",
     icon: <CustomerServiceOutlined />,
     target: "digitalHuman",
     category: "video",
@@ -198,18 +136,6 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
     }
   }, [onOpenImageTool, onSelectView]);
 
-  const openFeaturedTool = useCallback((tool: FeaturedTool) => {
-    pushRecentToolId(tool.id);
-    setRecentIds(getRecentToolIds());
-    if (tool.imageTool && onOpenImageTool) {
-      onOpenImageTool(tool.imageTool);
-      return;
-    }
-    if (tool.target && onSelectView) {
-      onSelectView(tool.target);
-    }
-  }, [onOpenImageTool, onSelectView]);
-
   const filteredTools = tools.filter((t) => {
     if (t.featured) return false;
     if (filter === "all") return true;
@@ -217,13 +143,6 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
     return t.category === filter;
   });
 
-  const filterCounts: Record<FilterKey, number> = {
-    all: tools.filter((t) => !t.featured).length,
-    image: tools.filter((t) => !t.featured && t.category === "image").length,
-    video: tools.filter((t) => !t.featured && t.category === "video").length,
-    upcoming: tools.filter((t) => !t.featured && !t.ready).length,
-  };
-
   const recentTools = recentIds
     .map((id) => tools.find((t) => t.id === id))
     .filter((t): t is MoreTool => Boolean(t) && (t?.ready ?? false));
@@ -234,31 +153,19 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
     return acc;
   }, {} as Record<ToolCategory, MoreTool[]>);
 
-  const activeFilterLabel = filters.find((item) => item.key === filter)?.label ?? "全部";
-  const hasGroupedTools = (["image", "video"] as ToolCategory[]).some((cat) => groupedTools[cat]?.length);
-
   return (
     <div className="more-page-v2">
       <header className="more-page-v2__header">
-        <div className="more-page-v2__title-group">
-          <span className="more-page-v2__eyebrow">AI Tool Hub</span>
         <h1>工具盒</h1>
-        </div>
-        <div className="more-page-v2__header-meta" aria-label="工具盒概览">
-          <span>{tools.filter((tool) => tool.ready).length} 个可用工具</span>
-          <span>{featuredTools.length} 个核心入口</span>
-        </div>
-        <nav className="more-page-v2__filters" aria-label="工具分类筛选">
+        <nav className="more-page-v2__filters">
           {filters.map((f) => (
             <button
               key={f.key}
               type="button"
               className={filter === f.key ? "is-active" : ""}
-              aria-pressed={filter === f.key}
               onClick={() => setFilter(f.key)}
             >
-              <span>{f.label}</span>
-              <em>{filterCounts[f.key]}</em>
+              {f.label}
             </button>
           ))}
         </nav>
@@ -269,7 +176,6 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
           <section className="more-page-v2__section">
             <h2 className="more-page-v2__section-title">
               <ClockCircleOutlined /> 最近使用
-              <span>继续使用</span>
             </h2>
             <div className="more-page-v2__recent-row">
               {recentTools.map((tool) => (
@@ -277,14 +183,10 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                   key={tool.id}
                   type="button"
                   className="more-card more-card--recent"
-                  aria-label={`打开最近使用工具：${tool.title}`}
                   onClick={() => openTool(tool)}
                 >
                   <span className="more-card__icon">{tool.icon}</span>
-                  <span className="more-card__recent-body">
                   <strong>{tool.title}</strong>
-                    <small>{categoryLabels[tool.category]}</small>
-                  </span>
                 </button>
               ))}
             </div>
@@ -302,22 +204,23 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                   key={tool.id}
                   type="button"
                   className="more-card more-card--featured"
-                  style={{ "--card-gradient": tool.gradient } as CSSProperties}
-                  aria-label={`打开核心工具：${tool.title}，${tool.desc}`}
-                  onClick={() => openFeaturedTool(tool)}
+                  style={{ "--card-gradient": tool.gradient } as React.CSSProperties}
+                  onClick={() => {
+                    pushRecentToolId(tool.id);
+                    setRecentIds(getRecentToolIds());
+                    if (tool.imageTool && onOpenImageTool) {
+                      onOpenImageTool(tool.imageTool);
+                      return;
+                    }
+                    if (tool.target && onSelectView) {
+                      onSelectView(tool.target);
+                    }
+                  }}
                 >
                   <span className="more-card__featured-icon">{tool.icon}</span>
                   <div className="more-card__featured-body">
-                    <span className="more-card__featured-kicker">{tool.kicker}</span>
                     <strong>{tool.title}</strong>
-                    <ToolComparePanel scene={toolCompareScenes[tool.id]} />
-                    <span className="more-card__featured-desc">{tool.desc}</span>
-                    <span className="more-card__steps" aria-hidden="true">
-                      {tool.steps.map((step) => (
-                        <span key={step}>{step}</span>
-                      ))}
-                    </span>
-                    <span className="more-card__outcome">{tool.outcome}</span>
+                    <span>{tool.desc}</span>
                     <span className="more-card__cta">开始使用 →</span>
                   </div>
                 </button>
@@ -326,14 +229,13 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
           </section>
         )}
 
-        {(["image", "video"] as ToolCategory[]).map((cat) => {
+        {(["image", "video", "template"] as ToolCategory[]).map((cat) => {
           const group = groupedTools[cat];
           if (!group || group.length === 0) return null;
           return (
             <section key={cat} className="more-page-v2__section">
               <h2 className="more-page-v2__section-title">
                 {categoryIcons[cat]} {categoryLabels[cat]}
-                <span>{group.length}</span>
               </h2>
               <div className="more-page-v2__grid">
                 {group.map((tool) => (
@@ -341,21 +243,12 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                     key={tool.id}
                     type="button"
                     className={`more-card${tool.ready ? " more-card--ready" : " more-card--pending"}`}
-                    aria-label={tool.ready ? `打开工具：${tool.title}，${tool.text}` : `${tool.title}暂未开放`}
                     onClick={() => openTool(tool)}
                     disabled={!tool.ready}
                   >
                     <span className="more-card__icon">{tool.icon}</span>
-                    <span className="more-card__topline">
-                      {tool.tags.slice(0, 2).map((tag) => (
-                        <span key={tag}>{tag}</span>
-                      ))}
-                    </span>
                     <strong>{tool.title}</strong>
-                    <ToolComparePanel scene={toolCompareScenes[tool.id]} />
                     <span className="more-card__desc">{tool.text}</span>
-                    <span className="more-card__use-case">{tool.useCase}</span>
-                    <span className="more-card__action">打开工具 →</span>
                     {tool.badge && <span className="more-card__badge">{tool.badge}</span>}
                   </button>
                 ))}
@@ -363,21 +256,6 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
             </section>
           );
         })}
-
-        {!hasGroupedTools && (
-          <section className="more-page-v2__section">
-            <div className="more-page-v2__empty">
-              <span className="more-page-v2__empty-icon">
-                <ClockCircleOutlined />
-              </span>
-              <strong>{activeFilterLabel}工具正在整理中</strong>
-              <p>当前分类暂无可展示入口，后续能力上线后会在这里集中呈现。</p>
-              <button type="button" className="more-page-v2__empty-action" onClick={() => setFilter("all")}>
-                查看全部可用工具
-              </button>
-            </div>
-          </section>
-        )}
       </div>
     </div>
   );

src/features/profile/ProfilePage.tsx

@@ -4,7 +4,6 @@ import {
   CheckCircleFilled,
   CloseOutlined,
   DeleteOutlined,
-  DownloadOutlined,
   EditOutlined,
   FileImageOutlined,
   FolderOpenOutlined,
@@ -18,8 +17,7 @@ import {
   ShareAltOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { useEffect, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from "react";
-import { createPortal } from "react-dom";
+import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from "react";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { assetClient } from "../../api/assetClient";
 import { communityClient, type ServerCommunityCase } from "../../api/communityClient";
@@ -28,7 +26,6 @@ import { isServerRequestError } from "../../api/serverConnection";
 import { ossAssets } from "../../data/ossAssets";
 import type { WebAuthMode, WebGenerationPreviewTask, WebProjectSummary, WebUsageSummary, WebUserSession } from "../../types";
 import type { SavedAssetItem } from "../assets/localAssetStore";
-import { downloadResultAsset } from "../workbench/workbenchDownload";
 
 interface ProfilePageProps {
   session: WebUserSession | null;
@@ -44,16 +41,11 @@ interface ProfilePageProps {
   onOpenWorkbench: () => void;
   onOpenCommunity: () => void;
   onDeleteProject?: (project: WebProjectSummary) => void;
-  onOpenProject?: (project: WebProjectSummary) => void;
-  onRemoveWork?: (task: WebGenerationPreviewTask) => void;
 }
 
 type AuthTab = "password" | "email" | "phone";
 type ProfilePanel = "works" | "projects" | "assets" | "community";
 type AccountPanel = "credits" | "tasks";
-type ProfileDetailSelection =
-  | { kind: "work"; item: WebGenerationPreviewTask }
-  | { kind: "asset"; item: SavedAssetItem };
 
 const PROFILE_LOCAL_STORAGE_PREFIX = "omniai-web-profile-ui";
 const AUTH_LOGO_URL = ossAssets.brand.logo;
@@ -218,8 +210,6 @@ function ProfilePage({
   onOpenWorkbench,
   onOpenCommunity,
   onDeleteProject,
-  onOpenProject,
-  onRemoveWork,
 }: ProfilePageProps) {
   const isLoggedIn = Boolean(session);
   const userId = session?.user.id;
@@ -263,10 +253,6 @@ function ProfilePage({
   const [bioEditBackup, setBioEditBackup] = useState("");
   const [bioStatusNotice, setBioStatusNotice] = useState<string | null>(null);
   const [bannerUrl, setBannerUrl] = useState(() => session?.user.backgroundUrl || readLocalProfileValue(userId, "background"));
-  const [detailSelection, setDetailSelection] = useState<ProfileDetailSelection | null>(null);
-  const [detailNotice, setDetailNotice] = useState<string | null>(null);
-  const [isDeletingDetail, setIsDeletingDetail] = useState(false);
-  const [isDownloadingDetail, setIsDownloadingDetail] = useState(false);
 
   const completedTasks = tasks.filter((task) => task.status === "completed");
   const visibleWorks = completedTasks.length ? completedTasks : tasks.slice(0, 6);
@@ -274,30 +260,6 @@ function ProfilePage({
   const packageLabel = session?.user.activePackages?.[0]?.name || "按量积分";
   const avatarUrl = session?.user.avatarUrl || localAvatarUrl || null;
   const displayedBio = profileBio.trim() || "这个人还没有填写个性签名";
-  const activePanelTitle =
-    activePanel === "works"
-      ? "代表作"
-      : activePanel === "projects"
-        ? "服务器项目"
-        : activePanel === "assets"
-          ? "我的资产"
-          : "社区审核";
-  const activePanelDescription =
-    activePanel === "works"
-      ? "最近完成的高质量生成内容"
-      : activePanel === "projects"
-        ? "云端同步的创作项目"
-        : activePanel === "assets"
-          ? "可复用的图片、视频与素材"
-          : "已提交社区的案例状态";
-  const activePanelCount =
-    activePanel === "works"
-      ? visibleWorks.length
-      : activePanel === "projects"
-        ? projects.length
-        : activePanel === "assets"
-          ? savedAssets.length
-          : communityCases.length;
   const emailLooksValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
   const phoneLooksValid = /^1[3-9]\d{9}$/.test(phone.trim());
   const passwordLooksReady = password.length >= (mode === "register" ? 6 : 1);
@@ -649,213 +611,6 @@ function ProfilePage({
     setBioStatusNotice(null);
   };
 
-  const handleInteractiveCardKeyDown = (event: KeyboardEvent<HTMLElement>, action: () => void) => {
-    if (event.target !== event.currentTarget) return;
-    if (event.key !== "Enter" && event.key !== " ") return;
-    event.preventDefault();
-    action();
-  };
-
-  const openDetailSelection = (selection: ProfileDetailSelection) => {
-    setDetailNotice(null);
-    setIsDeletingDetail(false);
-    setIsDownloadingDetail(false);
-    setDetailSelection(selection);
-  };
-
-  const closeDetailSelection = () => {
-    if (isDeletingDetail || isDownloadingDetail) return;
-    setDetailSelection(null);
-    setDetailNotice(null);
-  };
-
-  useEffect(() => {
-    if (!detailSelection) return undefined;
-    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
-      if (event.key === "Escape") closeDetailSelection();
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [detailSelection, isDeletingDetail, isDownloadingDetail]);
-
-  useEffect(() => {
-    if (!detailSelection || typeof document === "undefined") return undefined;
-
-    const { body, documentElement } = document;
-    const previousBodyOverflow = body.style.overflow;
-    const previousRootOverscroll = documentElement.style.overscrollBehavior;
-
-    body.style.overflow = "hidden";
-    documentElement.style.overscrollBehavior = "contain";
-
-    return () => {
-      body.style.overflow = previousBodyOverflow;
-      documentElement.style.overscrollBehavior = previousRootOverscroll;
-    };
-  }, [detailSelection]);
-
-  const handleDownloadSelectedDetail = async () => {
-    if (!detailSelection || isDownloadingDetail) return;
-
-    const isWork = detailSelection.kind === "work";
-    const item = detailSelection.item;
-    const url = isWork ? item.outputUrl : item.imageUrl || item.url || "";
-    if (!url) {
-      setDetailNotice("暂无可下载的媒体文件");
-      return;
-    }
-
-    const isVideo = isWork ? item.type === "video" : item.type === "video" || /\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(url);
-    const taskId = isWork ? item.id : item.sourceTaskId || undefined;
-    const name = isWork ? item.title : item.name;
-
-    setIsDownloadingDetail(true);
-    setDetailNotice("正在准备下载...");
-    try {
-      const status = await downloadResultAsset(url, name, isVideo, taskId);
-      setDetailNotice(status === "saved" ? "已保存到本地" : "已开始保存到本地");
-    } catch (error) {
-      if (error instanceof DOMException && error.name === "AbortError") {
-        setDetailNotice("已取消下载");
-      } else {
-        setDetailNotice(error instanceof Error ? error.message : "下载失败，请稍后重试");
-      }
-    } finally {
-      setIsDownloadingDetail(false);
-    }
-  };
-
-  const handleDeleteSelectedDetail = async () => {
-    if (!detailSelection || isDeletingDetail) return;
-
-    if (detailSelection.kind === "work") {
-      onRemoveWork?.(detailSelection.item);
-      setDetailNotice("已从当前代表作列表移除");
-      setDetailSelection(null);
-      return;
-    }
-
-    setIsDeletingDetail(true);
-    setDetailNotice(null);
-    try {
-      await assetClient.delete(detailSelection.item.id, { cleanupUserData: true });
-      setSavedAssets((current) => current.filter((asset) => asset.id !== detailSelection.item.id));
-      setDetailSelection(null);
-      setAssetNotice(`已删除 ${detailSelection.item.name}`);
-    } catch (error) {
-      setDetailNotice(formatProfileLoadError(error, "资产删除失败"));
-    } finally {
-      setIsDeletingDetail(false);
-    }
-  };
-
-  const renderDetailMedia = (url: string | null | undefined, type: "image" | "video" | "asset") => {
-    const mediaUrl = typeof url === "string" ? url.trim() : "";
-    const isVideoPreview = type === "video" || /\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(mediaUrl);
-
-    if (!mediaUrl) {
-      return (
-        <div className="profile-page__detail-placeholder">
-          {type === "video" ? <PlayCircleOutlined /> : <FileImageOutlined />}
-          <span>暂无可预览内容</span>
-        </div>
-      );
-    }
-
-    return isVideoPreview ? (
-      <video className="profile-page__detail-media" src={mediaUrl} controls playsInline />
-    ) : (
-      <img className="profile-page__detail-media" src={mediaUrl} alt="" />
-    );
-  };
-
-  const renderDetailModal = () => {
-    if (!detailSelection) return null;
-    const modalTarget = typeof document === "undefined" ? null : document.querySelector(".web-shell") || document.body;
-    if (!modalTarget) return null;
-
-    const isWork = detailSelection.kind === "work";
-    const title = isWork ? detailSelection.item.title : detailSelection.item.name;
-    const description = isWork ? detailSelection.item.prompt : detailSelection.item.description;
-    const mediaUrl = isWork ? detailSelection.item.outputUrl : detailSelection.item.imageUrl || detailSelection.item.url;
-    const mediaType = isWork
-      ? detailSelection.item.type === "video" ? "video" : "image"
-      : detailSelection.item.type === "video" ? "video" : "asset";
-
-    return createPortal(
-      <div className="profile-page__detail-overlay" role="dialog" aria-modal="true" aria-labelledby="profile-detail-title">
-        <button type="button" className="profile-page__detail-backdrop" aria-label="关闭详情" onClick={closeDetailSelection} />
-        <section className="profile-page__detail-panel">
-          <header className="profile-page__detail-head">
-            <div>
-              <span className="profile-page__detail-eyebrow">{isWork ? "代表作详情" : "资产详情"}</span>
-              <h2 id="profile-detail-title">{title}</h2>
-            </div>
-            <button type="button" className="profile-page__detail-close" aria-label="关闭详情" onClick={closeDetailSelection}>
-              <CloseOutlined />
-            </button>
-          </header>
-
-          <div className="profile-page__detail-body">
-            <div className="profile-page__detail-preview">
-              {renderDetailMedia(mediaUrl, mediaType)}
-            </div>
-            <div className="profile-page__detail-info">
-              <p>{description || "暂无描述"}</p>
-              <dl>
-                <div>
-                  <dt>{isWork ? "类型" : "资产类型"}</dt>
-                  <dd>{isWork ? formatTaskType(detailSelection.item.type) : formatAssetType(detailSelection.item.type)}</dd>
-                </div>
-                <div>
-                  <dt>状态</dt>
-                  <dd>{isWork ? formatTaskStatus(detailSelection.item.status) : formatAssetStatus(detailSelection.item.status)}</dd>
-                </div>
-                <div>
-                  <dt>{isWork ? "创建时间" : "更新时间"}</dt>
-                  <dd>{formatProfileDate(isWork ? detailSelection.item.createdAt : detailSelection.item.updatedAt)}</dd>
-                </div>
-                {!isWork ? (
-                  <div>
-                    <dt>标签</dt>
-                    <dd>{detailSelection.item.tags?.length ? detailSelection.item.tags.join(" / ") : "服务器素材"}</dd>
-                  </div>
-                ) : null}
-              </dl>
-              {detailNotice ? <span className="profile-page__detail-notice">{detailNotice}</span> : null}
-            </div>
-          </div>
-
-          <footer className="profile-page__detail-actions">
-            <button
-              type="button"
-              className="profile-page__detail-action profile-page__detail-action--primary"
-              onClick={() => void handleDownloadSelectedDetail()}
-              disabled={isDownloadingDetail}
-            >
-              <DownloadOutlined />
-              {isDownloadingDetail ? "下载中..." : "下载"}
-            </button>
-            <button type="button" className="profile-page__detail-action profile-page__detail-action--secondary" onClick={onOpenWorkbench}>
-              <EditOutlined />
-              {isWork ? "继续编辑" : "使用素材"}
-            </button>
-            <button
-              type="button"
-              className="profile-page__detail-action profile-page__detail-action--danger"
-              onClick={() => void handleDeleteSelectedDetail()}
-              disabled={isDeletingDetail}
-            >
-              <DeleteOutlined />
-              {isDeletingDetail ? "删除中..." : isWork ? "移除代表作" : "删除资产"}
-            </button>
-          </footer>
-        </section>
-      </div>,
-      modalTarget,
-    );
-  };
-
   const renderEmptyState = (text: string, actionLabel: string, action: () => void) => (
     <div className="profile-page__empty-state">
       <span className="profile-page__empty-mark" aria-hidden="true">
@@ -901,15 +656,7 @@ function ProfilePage({
         <div className="profile-page__works-scroll">
           <div className="profile-page__list-grid motion-stagger">
             {visibleWorks.map((task) => (
-              <article
-                key={task.id}
-                className="profile-page__list-card profile-page__media-card profile-page__interactive-card"
-                role="button"
-                tabIndex={0}
-                aria-label={`查看代表作 ${task.title}`}
-                onClick={() => openDetailSelection({ kind: "work", item: task })}
-                onKeyDown={(event) => handleInteractiveCardKeyDown(event, () => openDetailSelection({ kind: "work", item: task }))}
-              >
+              <article key={task.id} className="profile-page__list-card profile-page__media-card">
                 {renderCardPreview(task.outputUrl, task.type === "video" ? "video" : "image", formatTaskType(task.type))}
                 <div className="profile-page__list-card-body">
                   <div className="profile-page__list-card-head">
@@ -934,17 +681,7 @@ function ProfilePage({
       return projects.length ? (
         <div className="profile-page__list-grid motion-stagger">
           {projects.map((project) => (
-            <article
-              key={project.id}
-              className="profile-page__list-card profile-page__media-card profile-page__interactive-card"
-              role="button"
-              tabIndex={0}
-              aria-label={`打开项目 ${project.name}`}
-              onClick={() => (onOpenProject ? onOpenProject(project) : onOpenWorkbench())}
-              onKeyDown={(event) =>
-                handleInteractiveCardKeyDown(event, () => (onOpenProject ? onOpenProject(project) : onOpenWorkbench()))
-              }
-            >
+            <article key={project.id} className="profile-page__list-card profile-page__media-card">
               {renderCardPreview(project.thumbnailUrl, "project", "项目")}
               <div className="profile-page__list-card-body">
                 <div className="profile-page__list-card-head">
@@ -954,10 +691,7 @@ function ProfilePage({
                       type="button"
                       className="profile-page__delete-project"
                       aria-label={`删除项目 ${project.name}`}
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        onDeleteProject(project);
-                      }}
+                      onClick={() => onDeleteProject(project)}
                     >
                       <DeleteOutlined />
                     </button>
@@ -981,15 +715,7 @@ function ProfilePage({
       return savedAssets.length ? (
         <div className="profile-page__list-grid">
           {savedAssets.map((asset) => (
-            <article
-              key={asset.id}
-              className="profile-page__list-card profile-page__media-card profile-page__interactive-card"
-              role="button"
-              tabIndex={0}
-              aria-label={`查看资产 ${asset.name}`}
-              onClick={() => openDetailSelection({ kind: "asset", item: asset })}
-              onKeyDown={(event) => handleInteractiveCardKeyDown(event, () => openDetailSelection({ kind: "asset", item: asset }))}
-            >
+            <article key={asset.id} className="profile-page__list-card profile-page__media-card">
               {renderCardPreview(asset.imageUrl || asset.url, asset.type === "video" ? "video" : "asset", formatAssetType(asset.type))}
               <div className="profile-page__list-card-body">
                 <div className="profile-page__list-card-head">
@@ -1039,9 +765,9 @@ function ProfilePage({
           className={`profile-page__banner${bannerUrl ? " has-image" : ""}`}
           style={bannerUrl ? { backgroundImage: `url(${bannerUrl})` } : undefined}
         >
-          <button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()} aria-label="更换背景">
+          <button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()}>
             <CameraOutlined />
-            <span className="profile-page__banner-btn-label">更换背景</span>
+            更换背景
           </button>
           <div className="profile-page__banner-overlay" />
         </header>
@@ -1121,16 +847,14 @@ function ProfilePage({
                   className={accountPanel === "credits" ? "is-active" : ""}
                   onClick={() => setAccountPanel("credits")}
                 >
-                  <span>可用积分</span>
-                  <strong>{(totalBalance / 100).toFixed(2)}</strong>
+                  积分 {(totalBalance / 100).toFixed(2)}
                 </button>
                 <button
                   type="button"
                   className={accountPanel === "tasks" ? "is-active" : ""}
                   onClick={() => setAccountPanel("tasks")}
                 >
-                  <span>生成任务</span>
-                  <strong>{tasks.length}</strong>
+                  任务 {tasks.length}
                 </button>
               </div>
               <div className="profile-page__account-summary">
@@ -1139,7 +863,6 @@ function ProfilePage({
                     <span className="profile-page__account-summary-main">
                       <small>当前账号</small>
                       <strong>{displayName}</strong>
-                      <em>{packageLabel}</em>
                     </span>
                     <span className="profile-page__account-summary-metric">
                       <small>积分剩余</small>
@@ -1151,7 +874,6 @@ function ProfilePage({
                     <span className="profile-page__account-summary-main">
                       <small>任务概览</small>
                       <strong>{tasks.length} 个任务</strong>
-                      <em>{completedTasks.length} 个已完成</em>
                     </span>
                     <span className="profile-page__account-summary-metric">
                       <small>已完成</small>
@@ -1162,7 +884,6 @@ function ProfilePage({
               </div>
             </div>
 
-            <div className="profile-page__actions">
             <button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
               <ShareAltOutlined />
               {packageLabel}
@@ -1180,36 +901,38 @@ function ProfilePage({
               <LockOutlined />
               退出登录
             </button>
-            </div>
           </aside>
 
           <main className="profile-page__main">
             <div className="profile-page__main-tabs">
               <button type="button" className={activePanel === "works" ? "is-active" : ""} onClick={() => setActivePanel("works")}>
-                <span>我的作品</span>
+                我的作品
               </button>
               <button type="button" className={activePanel === "projects" ? "is-active" : ""} onClick={() => setActivePanel("projects")}>
-                <span>我的项目</span>
+                我的项目
               </button>
               <button type="button" className={activePanel === "assets" ? "is-active" : ""} onClick={() => setActivePanel("assets")}>
-                <span>我的资产</span>
+                我的资产
               </button>
               <button type="button" className={activePanel === "community" ? "is-active" : ""} onClick={() => setActivePanel("community")}>
-                <span>社区发布</span>
+                社区发布
               </button>
             </div>
 
             <div className="profile-page__section">
-              <div className="profile-page__section-head">
-                <span className="profile-page__section-label">{activePanelTitle}</span>
-                <span className="profile-page__section-desc">{activePanelDescription}</span>
-                <span className="profile-page__section-meta">{activePanelCount} 项</span>
-              </div>
+              <span className="profile-page__section-label">
+                {activePanel === "works"
+                  ? "代表作"
+                  : activePanel === "projects"
+                    ? "服务器项目"
+                    : activePanel === "assets"
+                      ? "我的资产"
+                      : "社区审核"}
+              </span>
               {renderActivePanel()}
             </div>
           </main>
         </div>
-        {renderDetailModal()}
       </section>
     );
   }

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/profile.css

@@ -15,438 +15,3 @@
 .profile-page__works-scroll .profile-page__list-grid {
   grid-template-columns: repeat(3, 1fr); /* 固定3列，刚好3×3=9个可见 */
 }
-
-/* Dashboard uses natural page scrolling instead of a nested works scroller. */
-.profile-page--dashboard .profile-page__works-scroll {
-  max-height: none;
-  overflow: visible;
-  scrollbar-width: auto;
-}
-
-.profile-page__interactive-card {
-  cursor: pointer;
-  user-select: none;
-}
-
-.profile-page__interactive-card:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
-  outline-offset: 3px;
-}
-
-.profile-page__detail-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 120;
-  display: grid;
-  place-items: center;
-  padding: clamp(18px, 3vw, 32px);
-  isolation: isolate;
-  overscroll-behavior: contain;
-}
-
-.profile-page__detail-backdrop {
-  position: absolute;
-  inset: 0;
-  border: 0;
-  background: rgba(0, 0, 0, 0.62);
-  cursor: pointer;
-}
-
-.profile-page__detail-panel {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  gap: 16px;
-  width: min(1080px, calc(100vw - 48px));
-  max-height: min(820px, calc(100dvh - 48px));
-  overflow: hidden;
-  padding: clamp(16px, 2vw, 22px);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 18px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
-    color-mix(in srgb, var(--bg-panel) 94%, #000);
-  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
-}
-
-.profile-page__detail-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 18px;
-  min-width: 0;
-  padding-bottom: 2px;
-}
-
-.profile-page__detail-head h2 {
-  max-width: 760px;
-  margin: 5px 0 0;
-  color: var(--text);
-  font-size: clamp(18px, 2vw, 25px);
-  line-height: 1.25;
-}
-
-.profile-page__detail-eyebrow {
-  color: var(--accent);
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.profile-page__detail-close {
-  display: inline-grid;
-  flex: 0 0 38px;
-  place-items: center;
-  width: 38px;
-  height: 38px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text-muted);
-  cursor: pointer;
-}
-
-.profile-page__detail-close:hover,
-.profile-page__detail-close:focus-visible {
-  border-color: rgba(255, 255, 255, 0.22);
-  background: rgba(255, 255, 255, 0.075);
-  color: var(--text);
-  outline: none;
-}
-
-.profile-page__detail-body {
-  display: grid;
-  grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.78fr);
-  gap: 18px;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.profile-page__detail-preview {
-  display: grid;
-  place-items: center;
-  align-self: stretch;
-  min-height: min(500px, 54dvh);
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 16px;
-  background:
-    linear-gradient(135deg, rgba(var(--accent-rgb), 0.055), transparent 58%),
-    rgba(255, 255, 255, 0.024);
-}
-
-.profile-page__detail-media {
-  display: block;
-  width: 100%;
-  height: 100%;
-  max-height: min(640px, 56dvh);
-  object-fit: contain;
-}
-
-video.profile-page__detail-media {
-  height: 100%;
-  min-height: 320px;
-  background: #050607;
-}
-
-.profile-page__detail-placeholder {
-  display: grid;
-  justify-items: center;
-  gap: 10px;
-  color: var(--text-muted);
-  font-size: 13px;
-}
-
-.profile-page__detail-placeholder .anticon {
-  display: grid;
-  place-items: center;
-  width: 50px;
-  height: 50px;
-  border: 1px solid rgba(var(--accent-rgb), 0.2);
-  border-radius: 16px;
-  background: rgba(var(--accent-rgb), 0.08);
-  color: var(--accent);
-  font-size: 20px;
-}
-
-.profile-page__detail-info {
-  display: grid;
-  align-content: start;
-  gap: 14px;
-  min-width: 0;
-  min-height: 0;
-  overflow: auto;
-  padding-right: 4px;
-  scrollbar-gutter: stable;
-}
-
-.profile-page__detail-info p {
-  margin: 0;
-  max-height: min(230px, 28dvh);
-  overflow: auto;
-  padding: 13px 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 13px;
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--text-muted);
-  font-size: 14px;
-  line-height: 1.7;
-  word-break: break-word;
-  scrollbar-gutter: stable;
-}
-
-.profile-page__detail-info dl {
-  display: grid;
-  gap: 10px;
-  margin: 0;
-}
-
-.profile-page__detail-info dl div {
-  display: grid;
-  gap: 4px;
-  min-width: 0;
-  padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 13px;
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.profile-page__detail-info dt {
-  color: var(--text-soft);
-  font-size: 11px;
-  font-weight: 760;
-}
-
-.profile-page__detail-info dd {
-  margin: 0;
-  overflow: hidden;
-  color: var(--text);
-  font-size: 13px;
-  font-weight: 700;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.profile-page__detail-notice {
-  display: inline-flex;
-  width: fit-content;
-  max-width: 100%;
-  padding: 7px 10px;
-  border: 1px solid rgba(243, 170, 38, 0.28);
-  border-radius: 999px;
-  background: rgba(243, 170, 38, 0.08);
-  color: var(--warning);
-  font-size: 12px;
-  line-height: 1.3;
-}
-
-.profile-page__detail-actions {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
-  align-items: center;
-  justify-content: stretch;
-  gap: 10px;
-  min-width: 0;
-  padding-top: 14px;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.profile-page__detail-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  min-height: 40px;
-  padding: 0 16px;
-  border: 1px solid rgba(var(--accent-rgb), 0.36);
-  border-radius: 12px;
-  background: rgba(var(--accent-rgb), 0.11);
-  color: var(--accent);
-  font-size: 13px;
-  font-weight: 750;
-  cursor: pointer;
-}
-
-.profile-page__detail-action--primary {
-  justify-self: start;
-  min-width: 132px;
-}
-
-.profile-page__detail-action--secondary,
-.profile-page__detail-action--danger {
-  min-width: 118px;
-}
-
-.profile-page__detail-action:hover,
-.profile-page__detail-action:focus-visible {
-  border-color: rgba(var(--accent-rgb), 0.54);
-  background: rgba(var(--accent-rgb), 0.16);
-  outline: none;
-}
-
-.profile-page__detail-action--danger {
-  border-color: rgba(255, 90, 95, 0.24);
-  background: rgba(255, 90, 95, 0.08);
-  color: #ffadb0;
-}
-
-.profile-page__detail-action--danger:hover,
-.profile-page__detail-action--danger:focus-visible {
-  border-color: rgba(255, 90, 95, 0.42);
-  background: rgba(255, 90, 95, 0.13);
-}
-
-.profile-page__detail-action:disabled {
-  cursor: wait;
-  opacity: 0.62;
-}
-
-@media (max-width: 760px) {
-  .profile-page__detail-overlay {
-    align-items: end;
-    padding: 10px 10px 0;
-  }
-
-  .profile-page__detail-panel {
-    width: 100%;
-    max-height: calc(100dvh - 10px);
-    padding: 16px;
-    border-radius: 18px 18px 0 0;
-  }
-
-  .profile-page__detail-body {
-    grid-template-columns: 1fr;
-    gap: 14px;
-    overflow: auto;
-    padding-right: 0;
-  }
-
-  .profile-page__detail-preview {
-    align-items: start;
-    min-height: 260px;
-    max-height: 42dvh;
-    overflow: auto;
-  }
-
-  .profile-page__detail-media {
-    width: 100%;
-    height: auto;
-    max-height: none;
-  }
-
-  video.profile-page__detail-media {
-    align-self: center;
-    height: auto;
-    min-height: 220px;
-    max-height: 42dvh;
-  }
-
-  .profile-page__detail-info {
-    overflow: auto;
-    padding-right: 0;
-  }
-
-  .profile-page__detail-info p {
-    min-height: 96px;
-    max-height: 30dvh;
-  }
-
-  .profile-page__detail-info dl {
-    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
-    gap: 8px;
-  }
-
-  .profile-page__detail-info dl div {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 7px;
-    min-height: 40px;
-    padding: 8px 10px;
-  }
-
-  .profile-page__detail-info dt {
-    display: none;
-  }
-
-  .profile-page__detail-info dd {
-    min-width: 0;
-    color: var(--text);
-    font-weight: 800;
-    text-align: left;
-  }
-
-  .profile-page__detail-actions {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .profile-page__detail-action--primary {
-    grid-column: 1 / -1;
-    justify-self: stretch;
-  }
-
-  .profile-page__detail-action--secondary,
-  .profile-page__detail-action--danger {
-    min-width: 0;
-  }
-}
-
-@media (max-width: 420px) {
-  .profile-page__detail-overlay {
-    padding: 0;
-  }
-
-  .profile-page__detail-panel {
-    max-height: 94dvh;
-    padding: 14px;
-    border-right: 0;
-    border-bottom: 0;
-    border-left: 0;
-    border-radius: 18px 18px 0 0;
-  }
-
-  .profile-page__detail-head {
-    gap: 12px;
-  }
-
-  .profile-page__detail-head h2 {
-    font-size: 18px;
-  }
-
-  .profile-page__detail-close {
-    flex-basis: 36px;
-    width: 36px;
-    height: 36px;
-  }
-
-  .profile-page__detail-info dl {
-    gap: 8px;
-  }
-
-  .profile-page__detail-info p {
-    min-height: 108px;
-  }
-
-  .profile-page__detail-preview {
-    min-height: 240px;
-    max-height: 40dvh;
-  }
-
-  .profile-page__detail-info dl {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .profile-page__detail-actions {
-    grid-template-columns: 1fr;
-  }
-
-  .profile-page__detail-action--primary {
-    grid-column: auto;
-  }
-
-  .profile-page__detail-action {
-    min-height: 42px;
-  }
-}