feat(feedback): 新增用户反馈提交、分页列表与语音描述

支持 Bug/需求提交、截图与聊天同款语音输入，全站反馈分页浏览与详情页，并从聊天与空间页提供入口。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-29 20:49:15 +08:00
parent 08c5b22d4a
commit 18ea4f82fd
19 changed files with 2846 additions and 150 deletions
@@ -4,7 +4,6 @@ import { INSUFFICIENT_BALANCE_NOTICE } from '../hooks/useTKMindChat';
 import type { CapabilityMap, PortalUser } from '../types';
 import { useNetworkStatus } from '../hooks/useNetworkStatus';
 import { getSessionDisplayName } from '../utils/sessions';
-import { openAvatarPicker } from '../utils/userAvatar';
 import { BalanceRing } from './BalanceRing';
 import { HistorySidebar } from './HistorySidebar';
 import { TKMindAvatar } from './TKMindAvatar';
@@ -23,6 +22,7 @@ export function ChatView({
  onOpenSpace,
  onOpenPage,
  onOpenAdmin,
+  onOpenFeedback,
 }: {
  user?: PortalUser | null;
  capabilities?: CapabilityMap;
@@ -32,25 +32,32 @@ export function ChatView({
  onOpenSpace?: (target?: { categoryCode?: MindSpaceSaveCategory; pageId?: string }) => void;
  onOpenPage?: (pageId: string) => void;
  onOpenAdmin?: () => void;
+  onOpenFeedback?: () => void;
 }) {
  const {
    session,
    sessions,
    sessionsLoading,
+    sessionsLoadingMore,
+    sessionsHasMore,
+    sessionSearchQuery,
    messages,
+    messageHistoryLoadingMore,
+    messageHistoryHasMore,
+    messageHistoryTotal,
    chatState,
    error,
    notice,
    pendingTool,
-    memoryLoading,
    submit,
    stop,
    approveTool,
    newSession,
-    rememberCurrentContext,
-    refreshProjectMemory,
    switchSession,
    deleteSession,
+    loadMoreSessions,
+    loadOlderMessages,
+    setSessionSearchQuery,
    retryConnect,
    dismissNotice,
    onSidebarOpen,
@@ -71,7 +78,6 @@ export function ChatView({
    }
  }, [sidebarOpen, onSidebarOpen]);

-  const busy = chatState === 'streaming' || chatState === 'loading' || chatState === 'connecting';
  const showHomeWelcome = messages.length === 0;

  const handleSelectSession = (sessionId: string) => {
@@ -96,18 +102,9 @@ export function ChatView({
      label: '新会话',
      onClick: () => void handleNewSession(),
    },
-    {
-      id: 'remember',
-      label: '记住本轮',
-      onClick: () => void rememberCurrentContext(),
-      disabled: busy || memoryLoading || messages.length === 0,
-    },
-    {
-      id: 'refresh-memory',
-      label: memoryLoading ? '同步中…' : '刷新记忆',
-      onClick: () => void refreshProjectMemory(),
-      disabled: busy || memoryLoading,
-    },
+    ...(onOpenFeedback
+      ? [{ id: 'feedback', label: '反馈与建议', onClick: () => onOpenFeedback() }]
+      : []),
    ...(onOpenAdmin
      ? [{ id: 'admin', label: '管理', onClick: () => onOpenAdmin() }]
      : []),
@@ -123,10 +120,15 @@ export function ChatView({
        sessions={sessions}
        activeSessionId={session?.id}
        loading={sessionsLoading}
+        loadingMore={sessionsLoadingMore}
+        hasMore={sessionsHasMore}
+        searchQuery={sessionSearchQuery}
        onClose={() => setSidebarOpen(false)}
        onSelect={handleSelectSession}
        onNew={handleNewSession}
        onDelete={(sessionId) => void deleteSession(sessionId)}
+        onLoadMore={() => void loadMoreSessions()}
+        onSearchChange={setSessionSearchQuery}
      />

      <div className={`app${showHomeWelcome ? ' app-home' : ''}`}>
@@ -168,24 +170,11 @@ export function ChatView({
                我的空间
              </button>
            )}
-            <button
-              type="button"
-              className="ghost-btn"
-              disabled={busy || memoryLoading || messages.length === 0}
-              onClick={() => void rememberCurrentContext()}
-              title="把最近几条对话保存到 harness 项目知识库"
-            >
-              记住本轮
-            </button>
-            <button
-              type="button"
-              className="ghost-btn"
-              disabled={busy || memoryLoading}
-              onClick={() => void refreshProjectMemory()}
-              title="从 harness 和项目文件重新加载长期记忆"
-            >
-              {memoryLoading ? '同步中…' : '刷新记忆'}
-            </button>
+            {onOpenFeedback && (
+              <button type="button" className="ghost-btn" onClick={() => onOpenFeedback()}>
+                反馈
+              </button>
+            )}
            <button type="button" className="ghost-btn" onClick={() => void handleNewSession()}>
              新会话
            </button>
@@ -292,6 +281,9 @@ export function ChatView({
          variant="full"
          user={user}
          messages={messages}
+          historyLoadingMore={messageHistoryLoadingMore}
+          historyHasMore={messageHistoryHasMore}
+          historyTotal={messageHistoryTotal}
          chatState={chatState}
          pendingTool={pendingTool}
          session={session}
@@ -301,6 +293,7 @@ export function ChatView({
            void submit(text, undefined, imageUrls, previewImageUrls)
          }
          onUploadImage={uploadChatImage}
+          onLoadOlderMessages={loadOlderMessages}
          onStop={stop}
          onApproveTool={approveTool}
          onPageSaved={(result) => {
@@ -0,0 +1,179 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { listFeedbackBoard } from '../api/client';
+import type { FeedbackSubmission, PortalUser } from '../types';
+import {
+  FEEDBACK_STATUS_LABELS,
+  FEEDBACK_TYPE_LABELS,
+  formatFeedbackTime,
+} from '../utils/feedbackLabels';
+import { FeedbackPageHeader } from './FeedbackPageHeader';
+
+const PAGE_SIZE = 10;
+
+function FeedbackBoardItem({
+  item,
+  currentUserId,
+  onOpen,
+}: {
+  item: FeedbackSubmission;
+  currentUserId?: string;
+  onOpen: (id: string) => void;
+}) {
+  const isMine = item.userId === currentUserId;
+  return (
+    <li className="feedback-board-item">
+      <button type="button" className="feedback-board-item-trigger" onClick={() => onOpen(item.id)}>
+        <div className="feedback-board-item-main">
+          <div className="feedback-list-item-badges">
+            <span className={`feedback-badge feedback-badge-type feedback-badge-type-${item.type}`}>
+              {FEEDBACK_TYPE_LABELS[item.type]}
+            </span>
+            <span className={`feedback-badge feedback-badge-status feedback-badge-status-${item.status}`}>
+              {FEEDBACK_STATUS_LABELS[item.status]}
+            </span>
+            {isMine ? <span className="feedback-badge feedback-badge-mine">我的</span> : null}
+          </div>
+          <strong className="feedback-board-item-title">{item.title}</strong>
+          {item.description ? <p className="feedback-board-item-preview">{item.description}</p> : null}
+        </div>
+        <div className="feedback-board-item-meta">
+          <span>{item.submitterDisplayName ?? '用户'}</span>
+          <time dateTime={new Date(item.createdAt).toISOString()}>{formatFeedbackTime(item.createdAt)}</time>
+          {(item.imageCount ?? 0) > 0 ? <span>{item.imageCount} 图</span> : null}
+          <span className="feedback-list-item-chevron" aria-hidden="true">
+            ▸
+          </span>
+        </div>
+      </button>
+    </li>
+  );
+}
+
+export function FeedbackBoardView({
+  user,
+  onLogout,
+}: {
+  user?: PortalUser | null;
+  onLogout?: () => void;
+}) {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const page = Math.max(Number(searchParams.get('page')) || 1, 1);
+
+  const [items, setItems] = useState<FeedbackSubmission[]>([]);
+  const [totalPages, setTotalPages] = useState(0);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadPage = useCallback(async (targetPage: number) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await listFeedbackBoard(targetPage, PAGE_SIZE);
+      setItems(result.items);
+      setTotalPages(result.totalPages);
+      setTotal(result.total);
+      if (result.totalPages > 0 && targetPage > result.totalPages) {
+        setSearchParams({ page: String(result.totalPages) }, { replace: true });
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '反馈列表加载失败');
+      setItems([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [setSearchParams]);
+
+  useEffect(() => {
+    void loadPage(page);
+  }, [loadPage, page]);
+
+  const goToPage = (nextPage: number) => {
+    if (nextPage < 1 || (totalPages > 0 && nextPage > totalPages) || nextPage === page) return;
+    setSearchParams({ page: String(nextPage) });
+  };
+
+  return (
+    <div className="feedback-submit-page feedback-board-page">
+      <FeedbackPageHeader
+        title="用户反馈"
+        onBack={() => navigate('/feedback')}
+        onLogout={onLogout}
+      />
+
+      <main className="feedback-submit-main feedback-board-main">
+        <section className="feedback-submit-card feedback-board-card">
+          <div className="feedback-board-toolbar">
+            <div className="feedback-board-toolbar-copy">
+              <p className="feedback-submit-eyebrow">Bug List</p>
+              <h1>全部用户反馈</h1>
+              <p className="feedback-submit-desc feedback-board-desc">
+                共 {total} 条 · 每页 {PAGE_SIZE} 条
+              </p>
+            </div>
+            <button
+              type="button"
+              className="feedback-panel-close"
+              aria-label="关闭反馈"
+              onClick={() => navigate('/')}
+            >
+              关闭
+            </button>
+          </div>
+
+          {!loading && total > 0 ? (
+            <p className="feedback-board-page-indicator">第 {page} / {totalPages || 1} 页</p>
+          ) : null}
+
+          <div className="feedback-board-scroll">
+            {loading ? <p className="feedback-list-muted">加载中…</p> : null}
+            {error ? <p className="feedback-submit-error">{error}</p> : null}
+
+            {!loading && !error && items.length === 0 ? (
+              <p className="feedback-list-empty">还没有任何用户反馈。</p>
+            ) : null}
+
+            {!loading && items.length > 0 ? (
+              <ul className="feedback-board-list">
+                {items.map((item) => (
+                  <FeedbackBoardItem
+                    key={item.id}
+                    item={item}
+                    currentUserId={user?.id}
+                    onOpen={(id) => navigate(`/feedback/${id}`)}
+                  />
+                ))}
+              </ul>
+            ) : null}
+          </div>
+
+          {totalPages > 1 ? (
+            <nav className="feedback-pagination" aria-label="反馈分页">
+              <button
+                type="button"
+                className="ghost-btn"
+                disabled={loading || page <= 1}
+                onClick={() => goToPage(page - 1)}
+              >
+                上一页
+              </button>
+              <span className="feedback-pagination-status">
+                第 {page} / {totalPages} 页
+              </span>
+              <button
+                type="button"
+                className="ghost-btn"
+                disabled={loading || page >= totalPages}
+                onClick={() => goToPage(page + 1)}
+              >
+                下一页
+              </button>
+            </nav>
+          ) : null}
+        </section>
+      </main>
+    </div>
+  );
+}
@@ -0,0 +1,137 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { getFeedbackDetail } from '../api/client';
+import type { FeedbackSubmission } from '../types';
+import {
+  FEEDBACK_STATUS_LABELS,
+  FEEDBACK_TYPE_LABELS,
+  feedbackImageDataUrl,
+  formatFeedbackTime,
+} from '../utils/feedbackLabels';
+import { FeedbackPageHeader } from './FeedbackPageHeader';
+
+export function FeedbackDetailView({
+  onLogout,
+}: {
+  onLogout?: () => void;
+}) {
+  const navigate = useNavigate();
+  const { feedbackId } = useParams<{ feedbackId: string }>();
+  const [item, setItem] = useState<FeedbackSubmission | null>(null);
+  const [isMine, setIsMine] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!feedbackId) {
+      setError('反馈不存在');
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    void getFeedbackDetail(feedbackId)
+      .then((result) => {
+        if (cancelled) return;
+        setItem(result.item);
+        setIsMine(result.isMine);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : '反馈详情加载失败');
+        setItem(null);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [feedbackId]);
+
+  return (
+    <div className="feedback-submit-page">
+      <FeedbackPageHeader
+        title="反馈详情"
+        onBack={() => navigate('/feedback/list')}
+        onLogout={onLogout}
+      />
+
+      <main className="feedback-submit-main">
+        <section className="feedback-submit-card feedback-detail-card">
+          {loading ? <p className="feedback-list-muted">加载中…</p> : null}
+          {error ? <p className="feedback-submit-error">{error}</p> : null}
+
+          {!loading && !error && item ? (
+            <>
+              <div className="feedback-detail-header">
+                <div className="feedback-list-item-badges">
+                  <span className={`feedback-badge feedback-badge-type feedback-badge-type-${item.type}`}>
+                    {FEEDBACK_TYPE_LABELS[item.type]}
+                  </span>
+                  <span className={`feedback-badge feedback-badge-status feedback-badge-status-${item.status}`}>
+                    {FEEDBACK_STATUS_LABELS[item.status]}
+                  </span>
+                  {isMine ? <span className="feedback-badge feedback-badge-mine">我的</span> : null}
+                </div>
+                <h1>{item.title}</h1>
+                <p className="feedback-detail-meta">
+                  提交者：{item.submitterDisplayName ?? '用户'}
+                  <span aria-hidden="true"> · </span>
+                  {formatFeedbackTime(item.createdAt)}
+                  <span aria-hidden="true"> · </span>
+                  编号 <code>{item.id.slice(0, 8)}</code>
+                </p>
+              </div>
+
+              <div className="feedback-detail-section">
+                <h2>详细描述</h2>
+                <p className="feedback-detail-description">{item.description || '（无描述）'}</p>
+              </div>
+
+              {isMine && item.contact ? (
+                <div className="feedback-detail-section">
+                  <h2>联系方式</h2>
+                  <p className="feedback-detail-text">{item.contact}</p>
+                </div>
+              ) : null}
+
+              {item.context?.pagePath ? (
+                <div className="feedback-detail-section">
+                  <h2>来源页面</h2>
+                  <p className="feedback-detail-text">
+                    <code>{item.context.pagePath}</code>
+                  </p>
+                </div>
+              ) : null}
+
+              {(item.images?.length ?? 0) > 0 ? (
+                <div className="feedback-detail-section">
+                  <h2>截图</h2>
+                  <div className="feedback-detail-images">
+                    {item.images?.map((image, index) => (
+                      <a
+                        key={`${item.id}-${index}`}
+                        href={feedbackImageDataUrl(image)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="feedback-detail-image-link"
+                      >
+                        <img
+                          src={feedbackImageDataUrl(image)}
+                          alt={`${item.title} 截图 ${index + 1}`}
+                          className="feedback-detail-image"
+                        />
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              ) : null}
+            </>
+          ) : null}
+        </section>
+      </main>
+    </div>
+  );
+}
@@ -0,0 +1,30 @@
+import { TKMindAvatar } from './TKMindAvatar';
+
+export function FeedbackPageHeader({
+  title,
+  onBack,
+  onLogout,
+}: {
+  title: string;
+  onBack: () => void;
+  onLogout?: () => void;
+}) {
+  return (
+    <header className="feedback-submit-header">
+      <button type="button" className="ghost-btn" onClick={onBack}>
+        返回
+      </button>
+      <div className="feedback-submit-header-brand">
+        <TKMindAvatar size="sm" />
+        <span>{title}</span>
+      </div>
+      {onLogout ? (
+        <button type="button" className="ghost-btn logout-btn" onClick={onLogout}>
+          登出
+        </button>
+      ) : (
+        <span aria-hidden="true" />
+      )}
+    </header>
+  );
+}
@@ -0,0 +1,430 @@
+import { useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { submitFeedback } from '../api/client';
+import type { FeedbackImageInput, FeedbackSubmissionType, PortalUser } from '../types';
+import {
+  CHAT_IMAGE_UPLOAD_MAX_INPUT_BYTES,
+  CHAT_IMAGE_UPLOAD_MAX_OUTPUT_BYTES,
+  CHAT_IMAGE_MAX_SIDE,
+  compressImageForUpload,
+} from '../utils/imageUpload';
+import { FeedbackPageHeader } from './FeedbackPageHeader';
+import { VoiceInputButton } from './VoiceInputButton';
+
+const TYPE_OPTIONS: Array<{ value: FeedbackSubmissionType; label: string; hint: string }> = [
+  { value: 'bug', label: 'Bug 报告', hint: '功能异常、报错、无法完成操作' },
+  { value: 'feature', label: '功能建议', hint: '新能力、体验优化、流程改进' },
+  { value: 'other', label: '其他反馈', hint: '账号、计费、文档等问题' },
+];
+
+const MAX_IMAGES = 5;
+
+type PendingImage = {
+  id: string;
+  previewUrl: string;
+  file: File;
+};
+
+function fileToBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = typeof reader.result === 'string' ? reader.result : '';
+      const comma = result.indexOf(',');
+      resolve(comma >= 0 ? result.slice(comma + 1) : result);
+    };
+    reader.onerror = () => reject(new Error('图片读取失败'));
+    reader.readAsDataURL(file);
+  });
+}
+
+function buildFeedbackContext(sessionId?: string | null) {
+  return {
+    pageUrl: window.location.href,
+    pagePath: `${window.location.pathname}${window.location.search}`,
+    userAgent: navigator.userAgent,
+    viewport: `${window.innerWidth}x${window.innerHeight}`,
+    appVersion: import.meta.env.VITE_APP_VERSION ?? undefined,
+    sessionId: sessionId ?? undefined,
+  };
+}
+
+export function FeedbackSubmitView({
+  user,
+  sessionId,
+  onLogout,
+}: {
+  user?: PortalUser | null;
+  sessionId?: string | null;
+  onLogout?: () => void;
+}) {
+  const navigate = useNavigate();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const descriptionRef = useRef<HTMLTextAreaElement>(null);
+  const descriptionTextRef = useRef('');
+  const voiceBaseRef = useRef('');
+  const suppressVoiceUpdateRef = useRef(false);
+
+  const [type, setType] = useState<FeedbackSubmissionType>('bug');
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [contact, setContact] = useState(user?.email ?? '');
+  const [images, setImages] = useState<PendingImage[]>([]);
+  const [imageError, setImageError] = useState<string | null>(null);
+  const [voiceNotice, setVoiceNotice] = useState<string | null>(null);
+  const [voiceRecording, setVoiceRecording] = useState(false);
+  const [voiceStopSignal, setVoiceStopSignal] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [submittedId, setSubmittedId] = useState<string | null>(null);
+  const [uploadingImages, setUploadingImages] = useState(false);
+
+  descriptionTextRef.current = description;
+
+  const selectedType = TYPE_OPTIONS.find((item) => item.value === type) ?? TYPE_OPTIONS[0];
+  const voiceDisabled = submitting || uploadingImages;
+
+  const mergeVoiceText = (spoken: string) => {
+    const base = voiceBaseRef.current.trimEnd();
+    const chunk = spoken.trim();
+    if (!chunk) return base;
+    return base ? `${base} ${chunk}` : chunk;
+  };
+
+  const handleVoiceStart = () => {
+    suppressVoiceUpdateRef.current = false;
+    voiceBaseRef.current = descriptionTextRef.current;
+    setVoiceNotice(null);
+  };
+
+  const handleVoiceLiveTranscript = (text: string) => {
+    if (suppressVoiceUpdateRef.current) return;
+    setDescription(mergeVoiceText(text));
+  };
+
+  const handleVoiceTranscript = (text: string) => {
+    if (suppressVoiceUpdateRef.current) return;
+    setDescription(mergeVoiceText(text));
+    setVoiceNotice('已识别，可编辑后提交');
+  };
+
+  const handleVoiceComplete = () => {
+    setVoiceNotice('已识别，可编辑后提交');
+  };
+
+  const stopVoiceInput = () => {
+    suppressVoiceUpdateRef.current = true;
+    if (voiceRecording) {
+      setVoiceStopSignal((value) => value + 1);
+    }
+    setVoiceRecording(false);
+  };
+
+  const handlePickImages = async (files: FileList | null) => {
+    if (!files?.length) return;
+    setImageError(null);
+
+    const remaining = MAX_IMAGES - images.length;
+    if (remaining <= 0) {
+      setImageError(`最多上传 ${MAX_IMAGES} 张图片`);
+      return;
+    }
+
+    const selected = Array.from(files).slice(0, remaining);
+    setUploadingImages(true);
+    try {
+      const nextItems: PendingImage[] = [];
+      for (const file of selected) {
+        if (!file.type.startsWith('image/')) {
+          throw new Error('只支持图片文件');
+        }
+        const compressed = await compressImageForUpload(file, {
+          maxInputBytes: CHAT_IMAGE_UPLOAD_MAX_INPUT_BYTES,
+          maxOutputBytes: CHAT_IMAGE_UPLOAD_MAX_OUTPUT_BYTES,
+          maxDimension: CHAT_IMAGE_MAX_SIDE,
+        });
+        nextItems.push({
+          id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+          previewUrl: URL.createObjectURL(compressed),
+          file: compressed,
+        });
+      }
+      setImages((prev) => [...prev, ...nextItems]);
+    } catch (err) {
+      setImageError(err instanceof Error ? err.message : '图片处理失败');
+    } finally {
+      setUploadingImages(false);
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  };
+
+  const removeImage = (id: string) => {
+    setImages((prev) => {
+      const target = prev.find((item) => item.id === id);
+      if (target) URL.revokeObjectURL(target.previewUrl);
+      return prev.filter((item) => item.id !== id);
+    });
+  };
+
+  const resetForm = () => {
+    stopVoiceInput();
+    setSubmittedId(null);
+    setTitle('');
+    setDescription('');
+    voiceBaseRef.current = '';
+    suppressVoiceUpdateRef.current = false;
+    setVoiceNotice(null);
+    setImages([]);
+    setType('bug');
+    setError(null);
+  };
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    stopVoiceInput();
+
+    const trimmedTitle = title.trim();
+    const trimmedDescription = description.trim();
+    if (!trimmedTitle) {
+      suppressVoiceUpdateRef.current = false;
+      setError('请填写标题');
+      return;
+    }
+    if (!trimmedDescription) {
+      suppressVoiceUpdateRef.current = false;
+      setError('请填写详细描述，或使用语音口述');
+      descriptionRef.current?.focus();
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const imagePayload: FeedbackImageInput[] = [];
+      for (const item of images) {
+        imagePayload.push({
+          filename: item.file.name,
+          mimeType: item.file.type || 'image/jpeg',
+          dataBase64: await fileToBase64(item.file),
+        });
+      }
+
+      const result = await submitFeedback({
+        type,
+        title: trimmedTitle,
+        description: trimmedDescription,
+        contact: contact.trim() || undefined,
+        images: imagePayload,
+        context: buildFeedbackContext(sessionId),
+      });
+      setSubmittedId(result.id);
+      suppressVoiceUpdateRef.current = false;
+      setVoiceNotice(null);
+    } catch (err) {
+      suppressVoiceUpdateRef.current = false;
+      setError(err instanceof Error ? err.message : '提交失败，请稍后重试');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="feedback-submit-page">
+      <FeedbackPageHeader
+        title={submittedId ? '反馈已收到' : '反馈与建议'}
+        onBack={() => navigate(-1)}
+        onLogout={onLogout}
+      />
+
+      <main className="feedback-submit-main">
+        <div className="feedback-submit-layout">
+          {submittedId ? (
+            <section className="feedback-submit-card feedback-submit-success">
+              <p className="feedback-submit-eyebrow">提交成功</p>
+              <h1>感谢你的反馈</h1>
+              <p className="feedback-submit-desc">
+                我们已收到你的{selectedType.label}，编号 <code>{submittedId.slice(0, 8)}</code>。
+                你可以在「用户反馈」中查看进度。
+              </p>
+              <div className="feedback-submit-actions page-save-actions">
+                <button type="button" className="page-save-primary" onClick={() => navigate(`/feedback/${submittedId}`)}>
+                  查看详情
+                </button>
+                <button type="button" className="ghost-btn" onClick={() => navigate('/feedback/list')}>
+                  用户反馈
+                </button>
+                <button type="button" className="ghost-btn" onClick={resetForm}>
+                  继续提交
+                </button>
+              </div>
+            </section>
+          ) : (
+            <form className="feedback-submit-card" onSubmit={(event) => void handleSubmit(event)}>
+              <div className="feedback-submit-intro">
+                <p className="feedback-submit-eyebrow">帮助我们改进 TKMind</p>
+                <div className="feedback-submit-title-row">
+                  <h1>提交 Bug 或需求</h1>
+                  <button
+                    type="button"
+                    className="feedback-board-link"
+                    onClick={() => navigate('/feedback/list')}
+                  >
+                    用户反馈
+                  </button>
+                </div>
+                <p className="feedback-submit-desc">
+                  你可以用文字描述、上传截图，或点击麦克风口述问题。我们会自动附带当前页面与设备信息，便于定位问题。
+                </p>
+              </div>
+
+              <fieldset className="feedback-submit-fieldset">
+                <legend>反馈类型</legend>
+                <div className="feedback-type-grid" role="radiogroup" aria-label="反馈类型">
+                  {TYPE_OPTIONS.map((option) => (
+                    <label
+                      key={option.value}
+                      className={`feedback-type-option${type === option.value ? ' is-selected' : ''}`}
+                    >
+                      <input
+                        type="radio"
+                        name="feedback-type"
+                        value={option.value}
+                        checked={type === option.value}
+                        onChange={() => setType(option.value)}
+                      />
+                      <span className="feedback-type-label">{option.label}</span>
+                      <span className="feedback-type-hint">{option.hint}</span>
+                    </label>
+                  ))}
+                </div>
+              </fieldset>
+
+              <label className="feedback-submit-label">
+                标题
+                <input
+                  className="input"
+                  value={title}
+                  onChange={(event) => setTitle(event.target.value)}
+                  placeholder={
+                    type === 'bug'
+                      ? '例如：保存页面时按钮无响应'
+                      : type === 'feature'
+                        ? '例如：希望支持批量导出'
+                        : '简要概括你的问题或建议'
+                  }
+                  maxLength={120}
+                  required
+                />
+              </label>
+
+              <div className="feedback-description-block">
+                <label className="feedback-submit-label" htmlFor="feedback-description">
+                  详细描述
+                </label>
+                {voiceNotice ? (
+                  <div className="feedback-voice-notice" role="status">
+                    {voiceNotice}
+                  </div>
+                ) : null}
+                <div className="feedback-description-shell">
+                  <textarea
+                    id="feedback-description"
+                    ref={descriptionRef}
+                    className="input feedback-description-input"
+                    rows={6}
+                    value={description}
+                    disabled={voiceDisabled}
+                    readOnly={voiceRecording}
+                    onChange={(event) => setDescription(event.target.value)}
+                    placeholder="请描述复现步骤、期望行为，或你想实现的功能…点击右下角麦克风可语音输入。"
+                    maxLength={5000}
+                    required
+                  />
+                  <VoiceInputButton
+                    disabled={voiceDisabled}
+                    onVoiceStart={handleVoiceStart}
+                    onLiveTranscript={handleVoiceLiveTranscript}
+                    onTranscript={handleVoiceTranscript}
+                    onVoiceComplete={handleVoiceComplete}
+                    onRecordingChange={setVoiceRecording}
+                    onError={setVoiceNotice}
+                    stopSignal={voiceStopSignal}
+                  />
+                </div>
+                <p className="feedback-description-hint">
+                  {voiceRecording ? '正在聆听，文字会实时显示在输入框中…' : '支持实时听写；识别完成后可继续编辑再提交。'}
+                </p>
+              </div>
+
+              <div className="feedback-submit-label">
+                <span>截图（可选，最多 {MAX_IMAGES} 张）</span>
+                {imageError ? <p className="feedback-submit-inline-error">{imageError}</p> : null}
+                <div className="feedback-image-grid">
+                  {images.map((item) => (
+                    <div key={item.id} className="feedback-image-item">
+                      <img src={item.previewUrl} alt="反馈截图预览" className="feedback-image-thumb" />
+                      <button
+                        type="button"
+                        className="feedback-image-remove"
+                        aria-label="移除图片"
+                        onClick={() => removeImage(item.id)}
+                      >
+                        ×
+                      </button>
+                    </div>
+                  ))}
+                  {images.length < MAX_IMAGES ? (
+                    <button
+                      type="button"
+                      className="feedback-image-add"
+                      disabled={uploadingImages || submitting}
+                      onClick={() => fileInputRef.current?.click()}
+                    >
+                      {uploadingImages ? '处理中…' : '+ 添加图片'}
+                    </button>
+                  ) : null}
+                </div>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  multiple
+                  hidden
+                  onChange={(event) => void handlePickImages(event.target.files)}
+                />
+              </div>
+
+              <label className="feedback-submit-label">
+                联系方式（可选）
+                <input
+                  className="input"
+                  value={contact}
+                  onChange={(event) => setContact(event.target.value)}
+                  placeholder="邮箱或微信，便于我们回复你"
+                  maxLength={120}
+                  autoComplete="email"
+                />
+              </label>
+
+              <p className="feedback-submit-meta">
+                将自动附带：当前路径 <code>{window.location.pathname}</code>
+                {sessionId ? <>、会话 ID</> : null}
+              </p>
+
+              {error ? <p className="feedback-submit-error">{error}</p> : null}
+
+              <div className="feedback-submit-actions page-save-actions">
+                <button type="button" className="ghost-btn" disabled={submitting} onClick={() => navigate(-1)}>
+                  取消
+                </button>
+                <button type="submit" className="page-save-primary" disabled={submitting || uploadingImages}>
+                  {submitting ? '提交中…' : '提交反馈'}
+                </button>
+              </div>
+            </form>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}
@@ -24,7 +24,7 @@ import {
  uploadMindSpaceAsset,
  ApiError,
 } from '../api/client';
-import { compressImageForUpload } from '../utils/imageUpload';
+import { MINDSPACE_IMAGE_UPLOAD_MAX_BYTES } from '../utils/imageUpload';
 import type {
  MindSpace,
  MindSpaceAsset,
@@ -63,7 +63,7 @@ import { NotificationCenter } from './NotificationCenter';

 const CATEGORY_DESCRIPTIONS: Record<MindSpaceCategory['code'], string> = {
  oa: '上传文档、表格和资料，让 AI 生成报告与页面',
-  private: '保存敏感资料，发布前必须完成风险检查与脱敏',
+  private: '已停用',
  public: '管理可公开使用的页面、图片和静态资源',
  draft: '继续编辑尚未发布或等待安全检查的页面',
  archive: '保存不再活跃但仍需要保留的内容',
@@ -71,13 +71,20 @@ const CATEGORY_DESCRIPTIONS: Record<MindSpaceCategory['code'], string> = {

 const CATEGORY_ACTIONS: Partial<Record<MindSpaceCategory['code'], string>> = {
  oa: '进入工作区',
-  private: '进入私人区',
  public: '查看发布',
  draft: '继续创作',
 };

 const AGENT_JOBS_PAGE_SIZE = 10;
 const RECENT_PAGES_PAGE_SIZE = 6;
+
+function sortPagesByCreatedAt(pages: MindSpacePage[]) {
+  return [...pages].sort((left, right) => {
+    const createdDiff = (right.createdAt ?? 0) - (left.createdAt ?? 0);
+    if (createdDiff !== 0) return createdDiff;
+    return (right.updatedAt ?? 0) - (left.updatedAt ?? 0);
+  });
+}
 const IMAGE_PAGE_SIZE = 10;
 const DEFAULT_MAX_UPLOAD_FILE_BYTES = 5 * 1024 * 1024;
 const UPLOAD_FILE_EXTENSIONS = [
@@ -282,15 +289,29 @@ function fileExtension(filename: string) {
  return dotIndex >= 0 ? filename.slice(dotIndex).toLowerCase() : '';
 }

+function isUploadImageFile(file: File) {
+  const extension = fileExtension(file.name);
+  return (
+    file.type.startsWith('image/') ||
+    extension === '.png' ||
+    extension === '.jpg' ||
+    extension === '.jpeg' ||
+    extension === '.webp'
+  );
+}
+
 function validateSelectedUploadFile(file: File, maxBytes: number) {
  if (file.size <= 0) return '文件不能为空，请重新选择。';
-  if (file.size > maxBytes) {
-    return `文件不能超过 ${formatBytes(maxBytes)}，当前为 ${formatBytes(file.size)}。`;
-  }
  const extension = fileExtension(file.name);
  if (!UPLOAD_FILE_EXTENSIONS.includes(extension as (typeof UPLOAD_FILE_EXTENSIONS)[number])) {
    return `暂不支持 ${extension || '无扩展名'} 文件，请选择支持的资料格式。`;
  }
+  const effectiveMaxBytes = isUploadImageFile(file)
+    ? Math.min(maxBytes, MINDSPACE_IMAGE_UPLOAD_MAX_BYTES)
+    : maxBytes;
+  if (file.size > effectiveMaxBytes) {
+    return `文件不能超过 ${formatBytes(effectiveMaxBytes)}，当前为 ${formatBytes(file.size)}。`;
+  }
  return null;
 }

@@ -450,6 +471,7 @@ export function MindSpaceView({
  initialCategoryCode,
  onBack,
  onLogout,
+  onOpenFeedback,
  routeSync,
 }: {
  user: PortalUser;
@@ -458,6 +480,7 @@ export function MindSpaceView({
  initialCategoryCode?: MindSpaceSaveCategory | null;
  onBack: () => void;
  onLogout: () => void;
+  onOpenFeedback?: () => void;
  routeSync?: MindSpaceRouteSync;
 }) {
  const [space, setSpace] = useState<MindSpace | null>(null);
@@ -503,7 +526,6 @@ export function MindSpaceView({
  const [agentJobsPage, setAgentJobsPage] = useState(0);
  const [agentJobsLoading, setAgentJobsLoading] = useState(false);
  const [allPagesOpen, setAllPagesOpen] = useState(false);
-  const [recentPagesPage, setRecentPagesPage] = useState(0);
  const [exportingPageId, setExportingPageId] = useState<string | null>(null);
  const [sharePayload, setSharePayload] = useState<SharePayload | null>(null);
  const [previewPageTarget, setPreviewPageTarget] = useState<MindSpacePage | null>(null);
@@ -1033,14 +1055,9 @@ export function MindSpaceView({
    setError(null);
    setUploadError(null);
    try {
-      const fileToUpload = selectedFile.type.startsWith('image/')
-        ? await compressImageForUpload(selectedFile, {
-            maxInputBytes: maxUploadFileBytes,
-            maxOutputBytes: maxUploadFileBytes,
-            maxDimension: 1600,
-          })
-        : selectedFile;
-      await uploadMindSpaceAsset(selectedCategory.id, fileToUpload);
+      await uploadMindSpaceAsset(selectedCategory.id, selectedFile, {
+        maxImageBytes: MINDSPACE_IMAGE_UPLOAD_MAX_BYTES,
+      });
      setUploadOpen(false);
      setSelectedFile(null);
      await load();
@@ -1255,7 +1272,8 @@ export function MindSpaceView({

  const visibleImageAssets =
    assetFilter === 'all' || assetFilter === 'images' ? imageAssets : [];
-  const imagePaginationEnabled = visibleImageAssets.length > IMAGE_PAGE_SIZE;
+  const imagePaginationEnabled =
+    selectedCategory?.code !== 'public' && visibleImageAssets.length > IMAGE_PAGE_SIZE;
  const imagePageCount = Math.max(
    1,
    Math.ceil(visibleImageAssets.length / IMAGE_PAGE_SIZE),
@@ -1267,17 +1285,20 @@ export function MindSpaceView({
        safeImagePage * IMAGE_PAGE_SIZE + IMAGE_PAGE_SIZE,
      )
    : visibleImageAssets;
-  const recentPagesTotal = Math.max(1, Math.ceil(pages.length / RECENT_PAGES_PAGE_SIZE));
-  const safeRecentPagesPage = Math.min(recentPagesPage, recentPagesTotal - 1);
-  const pagedRecentPages = pages.slice(
-    safeRecentPagesPage * RECENT_PAGES_PAGE_SIZE,
-    safeRecentPagesPage * RECENT_PAGES_PAGE_SIZE + RECENT_PAGES_PAGE_SIZE,
-  );
-  useEffect(() => {
-    const lastRecentPage = Math.max(0, recentPagesTotal - 1);
-    setRecentPagesPage((current) => Math.min(current, lastRecentPage));
-  }, [recentPagesTotal, pages.length]);
+  const sortedPages = useMemo(() => sortPagesByCreatedAt(pages), [pages]);
+  const recentPagesPreview = sortedPages.slice(0, RECENT_PAGES_PAGE_SIZE);

+  const imageAssetsByDate = useMemo(() => {
+    const groups = new Map<string, MindSpaceAsset[]>();
+    for (const asset of visibleImageAssets) {
+      const match = asset.filename.match(/images\/(\d{4}-\d{2}-\d{2})\//);
+      const dateKey = match?.[1] ?? '其他';
+      const bucket = groups.get(dateKey) ?? [];
+      bucket.push(asset);
+      groups.set(dateKey, bucket);
+    }
+    return [...groups.entries()].sort((left, right) => right[0].localeCompare(left[0]));
+  }, [visibleImageAssets]);
  const visibleCardAssets =
    assetFilter === 'all'
      ? [...fileAssets, ...workAssets]
@@ -1676,6 +1697,11 @@ export function MindSpaceView({
          ) : (
            <MindSpaceNotificationCenter />
          )}
+          {!previewMode && onOpenFeedback && (
+            <button type="button" className="ghost-btn" onClick={onOpenFeedback}>
+              反馈
+            </button>
+          )}
          <span>{user.displayName}</span>
          <button type="button" className="ghost-btn logout-btn" onClick={onLogout}>
            登出
@@ -2033,7 +2059,7 @@ export function MindSpaceView({
                </div>
                {pages.length > 0 ? (
                  <div className="mindspace-feed-grid mindspace-recent-work-grid is-all-pages">
-                    {pages.map((page) => (
+                    {sortedPages.map((page) => (
                      <MindSpaceFeedCard
                        key={page.id}
                        page={page}
@@ -2117,7 +2143,7 @@ export function MindSpaceView({
                    </p>
                    <h2>{selectedCategory.name}</h2>
                  </div>
-                  {['oa', 'private', 'public'].includes(selectedCategory.code) && (
+                  {['oa', 'public'].includes(selectedCategory.code) && (
                    <button
                      type="button"
                      className="mindspace-primary"
@@ -2128,12 +2154,6 @@ export function MindSpaceView({
                  )}
                </div>

-                {selectedCategory.code === 'private' && (
-                  <div className="mindspace-security-note">
-                    私人区默认不可公开。后续生成公开内容时，系统会要求风险扫描和脱敏副本。
-                  </div>
-                )}
-
                {selectedCategory.code === 'draft' ? (
                  pages.length > 0 ? (
                    <>
@@ -2165,7 +2185,7 @@ export function MindSpaceView({
                        </button>
                      </div>
                      <div className="mindspace-feed-grid">
-                        {pages.map((page) => (
+                        {sortedPages.map((page) => (
                          <MindSpaceFeedCard
                            key={page.id}
                            page={page}
@@ -2186,7 +2206,7 @@ export function MindSpaceView({
                ) : (
                  <>
                {(() => {
-                  const categoryPages = pages.filter(
+                  const categoryPages = sortedPages.filter(
                    (p) => p.categoryCode === selectedCategory.code,
                  );
                  return categoryPages.length > 0 ? (
@@ -2276,6 +2296,49 @@ export function MindSpaceView({
                            <span>{visibleImageAssets.length} 张</span>
                          </div>
                        )}
+                        {selectedCategory?.code === 'public' ? (
+                          imageAssetsByDate.map(([dateKey, datedAssets]) => (
+                            <div className="mindspace-image-date-group" key={dateKey}>
+                              <div className="mindspace-section-subheading">
+                                <h3>{dateKey === '其他' ? '其他图片' : dateKey}</h3>
+                                <span>{datedAssets.length} 张</span>
+                              </div>
+                              <div className="mindspace-image-grid">
+                                {datedAssets.map((asset) => (
+                                  <article className="mindspace-image-card" key={asset.id}>
+                                    <label className="mindspace-asset-select">
+                                      <input
+                                        type="checkbox"
+                                        checked={selectedAssetSet.has(asset.id)}
+                                        onChange={() => toggleAssetSelected(asset.id)}
+                                      />
+                                      <span>选择</span>
+                                    </label>
+                                    <button
+                                      type="button"
+                                      className="mindspace-image-thumb"
+                                      onClick={() => setPreviewAssetId(asset.id)}
+                                      title={asset.displayName}
+                                    >
+                                      <img
+                                        src={buildAssetImageUrl(asset)}
+                                        alt={asset.displayName}
+                                        loading="lazy"
+                                      />
+                                    </button>
+                                    <div className="mindspace-image-meta">
+                                      <span className="mindspace-image-name">{asset.displayName}</span>
+                                      <span className="mindspace-image-size">
+                                        {formatBytes(asset.sizeBytes)}
+                                      </span>
+                                    </div>
+                                    {renderAssetActions(asset)}
+                                  </article>
+                                ))}
+                              </div>
+                            </div>
+                          ))
+                        ) : (
                        <div
                          className={`mindspace-image-grid${imagePaginationEnabled ? ' is-compact' : ''}`}
                        >
@@ -2318,6 +2381,7 @@ export function MindSpaceView({
                            </article>
                          ))}
                        </div>
+                        )}
                        {imagePaginationEnabled && (
                          <div className="mindspace-pagination mindspace-image-pagination">
                            <button
@@ -2454,7 +2518,7 @@ export function MindSpaceView({
                </div>
                <div className="mindspace-grid">
                  {space.categories
-                    .filter((category) => ['oa', 'private', 'public'].includes(category.code))
+                    .filter((category) => ['oa', 'public'].includes(category.code))
                    .map((category) => (
                      <article
                        className={`mindspace-card mindspace-card-${category.code}`}
@@ -2534,7 +2598,7 @@ export function MindSpaceView({
                {pages.length > 0 ? (
                  <>
                    <div className="mindspace-feed-grid mindspace-recent-work-grid">
-                      {pagedRecentPages.map((page) => (
+                      {recentPagesPreview.map((page) => (
                        <MindSpaceFeedCard
                          key={page.id}
                          page={page}
@@ -2543,33 +2607,6 @@ export function MindSpaceView({
                        />
                      ))}
                    </div>
-                    {pages.length > RECENT_PAGES_PAGE_SIZE ? (
-                      <div className="mindspace-pagination">
-                        <button
-                          type="button"
-                          disabled={safeRecentPagesPage <= 0}
-                          onClick={() =>
-                            setRecentPagesPage((value) => Math.max(0, value - 1))
-                          }
-                        >
-                          上一页
-                        </button>
-                        <span>
-                          第 {safeRecentPagesPage + 1} / {recentPagesTotal} 页
-                        </span>
-                        <button
-                          type="button"
-                          disabled={safeRecentPagesPage >= recentPagesTotal - 1}
-                          onClick={() =>
-                            setRecentPagesPage((value) =>
-                              Math.min(recentPagesTotal - 1, value + 1),
-                            )
-                          }
-                        >
-                          下一页
-                        </button>
-                      </div>
-                    ) : null}
                  </>
                ) : (
                  <div className="mindspace-recent-work-empty">
@@ -2613,7 +2650,8 @@ export function MindSpaceView({
              </button>
            </div>
            <p className="mindspace-upload-dialog-desc">
-              支持 {UPLOAD_FILE_TYPE_LABEL}，单文件最大 {formatBytes(maxUploadFileBytes)}。
+              支持 {UPLOAD_FILE_TYPE_LABEL}，文档最大 {formatBytes(maxUploadFileBytes)}，图片最大{' '}
+              {formatBytes(Math.min(maxUploadFileBytes, MINDSPACE_IMAGE_UPLOAD_MAX_BYTES))}。
            </p>
            <input
              type="file"