tkmind/memind
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Improve WeChat MP replies and ship MindSpace/H5 production updates.

Browse Source 
Add WeChat service account routing with sync acks, connectivity tests, and context isolation; document deploy runbooks; and bundle related MindSpace, voice, Plaza, and server gateway changes for production rollout.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
john
2026-06-19 23:06:43 +08:00
parent b0f5d6a51c
commit 229805a070
241 changed files with 13190 additions and 902 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ChatHeaderMoreMenu.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ export function ChatHeaderMoreMenu({
<>
<div className="header-more-divider" role="separator" />
<div className="header-more-wechat">
<WechatAccountButton returnTo={returnTo} />
<WechatAccountButton returnTo={returnTo} onBeforeAction={() => setOpen(false)} />
</div>
</>
)}
src/components/ChatPanel.tsx
+226 -31
View File
@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'react';
import { ChangeEvent, useEffect, useRef, useState } from 'react';
import { useNetworkStatus } from '../hooks/useNetworkStatus';
import { openAvatarPicker } from '../utils/userAvatar';
import { CHAT_SKILL_OPTIONS, filterChatSkills } from '../utils/chatSkills';
@@ -10,6 +10,14 @@ import { VoiceInputButton } from './VoiceInputButton';
import type { CapabilityMap, ChatState, Message, PortalUser, Session, ToolConfirmation } from '../types';
import type { MindSpaceSaveCategory } from '../types';
const MAX_PENDING_IMAGES = 6;
type PendingChatImage = {
id: string;
url: string;
local: boolean;
};
export function ChatPanel({
variant,
user,
@@ -20,6 +28,7 @@ export function ChatPanel({
capabilities,
grantedSkills,
onSubmit,
onUploadImage,
onStop,
onApproveTool,
onPageSaved,
@@ -33,7 +42,8 @@ export function ChatPanel({
session: Session | null;
capabilities?: CapabilityMap;
grantedSkills?: string[];
onSubmit: (text: string) => void | Promise<void>;
onSubmit: (text: string, imageUrls?: string[]) => void | Promise<void>;
onUploadImage?: (file: File) => Promise<string>;
onStop: () => void | Promise<void>;
onApproveTool: (allow: boolean) => void | Promise<void>;
onPageSaved?: (result: {
@@ -45,9 +55,28 @@ export function ChatPanel({
}) {
const online = useNetworkStatus();
const [input, setInput] = useState('');
const [voiceRecording, setVoiceRecording] = useState(false);
const [pageSource, setPageSource] = useState<Message | null>(null);
const [voiceNotice, setVoiceNotice] = useState<string | null>(null);
const [pendingImages, setPendingImages] = useState<PendingChatImage[]>([]);
const [uploadingImage, setUploadingImage] = useState(false);
const [imageError, setImageError] = useState<string | null>(null);
const imageInputRef = useRef<HTMLInputElement>(null);
const bottomRef = useRef<HTMLDivElement>(null);
const inputRef = useRef(input);
const voiceBaseRef = useRef('');
const pendingImagesRef = useRef(pendingImages);
inputRef.current = input;
pendingImagesRef.current = pendingImages;
useEffect(() => {
return () => {
pendingImagesRef.current.forEach((item) => {
if (item.local) URL.revokeObjectURL(item.url);
});
};
}, []);
useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -61,13 +90,6 @@ export function ChatPanel({
const chatSkills = filterChatSkills(CHAT_SKILL_OPTIONS, { grantedSkills, canPublish });
const compact = variant === 'compact';
const handleSubmit = async () => {
const text = input;
if (!text.trim()) return;
setInput('');
await onSubmit(text);
};
const placeholder = offlineBlocked
? '网络断开，恢复连接后可继续输入'
: chatState === 'connecting'
@@ -76,12 +98,133 @@ export function ChatPanel({
? '在这里继续和 Agent 对话…'
: '输入任务，例如：列出当前目录文件';
const handleVoiceSend = async (text: string) => {
const mergeVoiceText = (spoken: string) => {
const base = voiceBaseRef.current.trimEnd();
const chunk = spoken.trim();
if (!chunk) return base;
return base ? `${base} ${chunk}` : chunk;
};
const handleVoiceStart = () => {
voiceBaseRef.current = inputRef.current;
setVoiceNotice(null);
await onSubmit(text);
};
const handleVoiceLiveTranscript = (text: string) => {
setInput(mergeVoiceText(text));
};
const handleVoiceTranscript = (text: string) => {
setInput(mergeVoiceText(text));
setVoiceNotice('已识别，可编辑后发送');
};
const handleVoiceComplete = () => {
setVoiceNotice('已识别，可编辑后发送');
};
const voiceDisabled = busy || !!pendingTool || chatState === 'error' || offlineBlocked;
const canSubmit = input.trim() || pendingImages.length > 0;
const imageAttachmentDisabled = !onUploadImage || busy || uploadingImage || offlineBlocked || !!pendingTool;
const revokePendingImage = (item: PendingChatImage) => {
if (item.local) URL.revokeObjectURL(item.url);
};
const handleSubmit = async () => {
const trimmed = input.trim();
if ((!trimmed && pendingImages.length === 0) || voiceDisabled) return;
if (uploadingImage || pendingImages.some((item) => item.local)) {
setImageError('图片仍在上传中，请稍候再发送');
return;
}
const imagesToSend = pendingImages.map((item) => item.url);
const sentImages = [...pendingImages];
setInput('');
setImageError(null);
try {
await onSubmit(trimmed, imagesToSend);
sentImages.forEach(revokePendingImage);
setPendingImages([]);
} catch (err) {
setInput(trimmed);
setPendingImages(sentImages);
setImageError(err instanceof Error ? err.message : '发送失败，请重试');
}
};
const handleImageInputChange = async (event: ChangeEvent<HTMLInputElement>) => {
if (!onUploadImage) return;
const selected = Array.from(event.currentTarget.files ?? []);
event.currentTarget.value = '';
if (selected.length === 0) return;
const imageFiles = selected.filter((file) => file.type.startsWith('image/'));
if (imageFiles.length === 0) {
setImageError('请上传图片文件');
return;
}
const remaining = MAX_PENDING_IMAGES - pendingImages.length;
if (remaining <= 0) {
setImageError(`最多支持一次性附加 ${MAX_PENDING_IMAGES} 张图片`);
return;
}
const toUpload = imageFiles.slice(0, remaining);
if (imageFiles.length > remaining) {
setImageError(`最多支持 ${MAX_PENDING_IMAGES} 张图片，本次仅上传前 ${remaining} 张`);
} else {
setImageError(null);
}
const placeholders = toUpload.map((file, index) => ({
id: `${Date.now()}-${index}-${file.name}`,
url: URL.createObjectURL(file),
local: true,
}));
setPendingImages((prev) => [...prev, ...placeholders]);
setUploadingImage(true);
try {
const uploaded = await Promise.all(toUpload.map((file) => onUploadImage(file)));
const placeholderIds = placeholders.map((item) => item.id);
setPendingImages((prev) => {
const next = prev.map((item) => {
const index = placeholderIds.indexOf(item.id);
if (index < 0 || !uploaded[index]) return item;
revokePendingImage(item);
return { ...item, url: uploaded[index], local: false };
});
const seen = new Set<string>();
return next.filter((item) => {
if (seen.has(item.url)) return false;
seen.add(item.url);
return true;
});
});
} catch (err) {
setPendingImages((prev) => {
const removeIds = new Set(placeholders.map((item) => item.id));
prev.forEach((item) => {
if (removeIds.has(item.id)) revokePendingImage(item);
});
return prev.filter((item) => !removeIds.has(item.id));
});
setImageError(err instanceof Error ? err.message : '图片上传失败');
} finally {
setUploadingImage(false);
}
};
const handleRemoveImage = (idToRemove: string) => {
setPendingImages((prev) => {
const target = prev.find((item) => item.id === idToRemove);
if (target) revokePendingImage(target);
return prev.filter((item) => item.id !== idToRemove);
});
};
return (
<>
@@ -138,26 +281,78 @@ export function ChatPanel({
{voiceNotice}
</div>
)}
{(pendingImages.length > 0 || imageError) && (
<div className="chat-image-attachments">
{imageError && <div className="chat-image-upload-error">{imageError}</div>}
{pendingImages.length > 0 && (
<div className="chat-image-attachment-grid">
{pendingImages.map((item, index) => (
<div key={item.id} className="chat-image-attachment-item">
<a href={item.url} target="_blank" rel="noreferrer">
<img src={item.url} alt={`上传图片 ${index + 1}`} className="chat-image-attachment-thumb" />
</a>
<button
type="button"
className="chat-image-attachment-remove"
aria-label="移除图片"
onClick={() => handleRemoveImage(item.id)}
>
×
</button>
</div>
))}
</div>
)}
</div>
)}
<div className="chat-input-row">
<VoiceInputButton
disabled={voiceDisabled}
onSend={(text) => void handleVoiceSend(text)}
onError={setVoiceNotice}
/>
<textarea
className="input"
rows={1}
placeholder={placeholder}
value={input}
disabled={voiceDisabled}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
void handleSubmit();
}
}}
/>
<div className="chat-input-shell">
{onUploadImage && (
<>
<button
type="button"
className="chat-image-upload-trigger"
title="上传图片"
disabled={imageAttachmentDisabled}
onClick={() => imageInputRef.current?.click()}
>
🖼️
</button>
<input
ref={imageInputRef}
type="file"
accept="image/*"
multiple
hidden
onChange={handleImageInputChange}
/>
</>
)}
<textarea
className={`input chat-input-field${onUploadImage ? ' chat-input-field-with-image-upload' : ''}`}
rows={1}
placeholder={placeholder}
value={input}
disabled={voiceDisabled}
readOnly={voiceRecording}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
void handleSubmit();
}
}}
/>
<VoiceInputButton
disabled={voiceDisabled}
onVoiceStart={handleVoiceStart}
onLiveTranscript={handleVoiceLiveTranscript}
onTranscript={handleVoiceTranscript}
onVoiceComplete={handleVoiceComplete}
onRecordingChange={setVoiceRecording}
onError={setVoiceNotice}
/>
</div>
{chatSkills.length > 0 && (
<ChatSkillPicker
skills={chatSkills}
@@ -174,7 +369,7 @@ export function ChatPanel({
<button
type="button"
className="send-btn chat-input-action"
disabled={!input.trim() || voiceDisabled}
disabled={!canSubmit || voiceDisabled || uploadingImage}
onClick={() => void handleSubmit()}
>
发送
src/components/ChatView.tsx
+3 -4
View File
@@ -53,11 +53,11 @@ export function ChatView({
retryConnect,
dismissNotice,
onSidebarOpen,
workingDir,
balanceCents,
totalCreditCents,
tokensUsed,
openRecharge,
uploadChatImage,
} = useChat();
const online = useNetworkStatus();
const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -287,7 +287,8 @@ export function ChatView({
session={session}
capabilities={capabilities}
grantedSkills={grantedSkills}
onSubmit={submit}
onSubmit={(text, imageUrls) => void submit(text, undefined, imageUrls)}
onUploadImage={uploadChatImage}
onStop={stop}
onApproveTool={approveTool}
onPageSaved={(result) => {
@@ -298,8 +299,6 @@ export function ChatView({
onOpenSpace?.({ categoryCode: result.categoryCode });
}}
/>
{workingDir && <div className="meta">工作目录：{workingDir}</div>}
</div>
</div>
);
src/components/MessageList.tsx
+22 -1
View File
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { useUserAvatar } from '../hooks/useUserAvatar';
import type { Message } from '../types';
import { getDisplayText, getThinking, getVisibleText } from '../utils/message';
import { getDisplayText, getImageUrls, getThinking } from '../utils/message';
import { getMessageSaveActions } from '../utils/messageSave';
import { renderMarkdown } from '../utils/markdown';
import { formatChatTime, shouldShowTimestamp } from '../utils/time';
@@ -139,6 +139,7 @@ function MessageRow({
const saveActions = getMessageSaveActions(text, publishUsername);
const thinking = getThinking(message);
const isUser = message.role === 'user';
const imageUrls = getImageUrls(message);
const copyText = [thinking ? `【思考】\n${thinking}` : '', text].filter(Boolean).join('\n\n');
if (!text && !thinking && message.role === 'assistant') {
@@ -169,6 +170,26 @@ function MessageRow({
<pre>{thinking}</pre>
</details>
)}
{imageUrls.length > 0 && (
<div className="msg-image-gallery">
{imageUrls.map((imageUrl, index) => (
<a
key={`${imageUrl}-${index}`}
href={imageUrl}
target="_blank"
rel="noreferrer"
className="msg-image-link"
>
<img
src={imageUrl}
alt={`图片 ${index + 1}`}
className="msg-image-thumb"
loading="lazy"
/>
</a>
))}
</div>
)}
{text && (
<div
className="bubble-text"
src/components/MindSpacePageDetail.tsx
+233 -2
View File
@@ -16,6 +16,7 @@ import {
import type {
MindSpacePage,
MindSpacePageDeletePreview,
MindSpacePublication,
MindSpacePublicationStats,
MindSpacePublishCheck,
MindSpaceQuota,
@@ -30,6 +31,9 @@ import {
} from './MindSpacePageFullscreenPreview';
import { MindSpacePagePreviewPanel } from './MindSpacePagePreviewPanel';
import { MindSpaceModal } from './MindSpaceModal';
import { MindSpacePublishSuccess } from './MindSpacePublishSuccess';
import { ShareSheet } from './ShareSheet';
import { buildPageSharePayload, type SharePayload } from '../utils/shareChannels';
type AccessMode = MindSpacePublishCheck['accessMode'];
@@ -88,6 +92,123 @@ function truncateLabel(text: string, max = 48) {
return `${value.slice(0, max - 1)}…`;
}
type Html2CanvasRenderer = (
element: HTMLElement,
options?: Record<string, unknown>,
) => Promise<HTMLCanvasElement>;
type Html2CanvasWindow = Window & { html2canvas?: Html2CanvasRenderer };
const HTML2CANVAS_CDN = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
const LONG_IMAGE_RENDER_SCALE = 2;
let html2CanvasLoader: Promise<Html2CanvasRenderer> | null = null;
async function loadHtml2CanvasRenderer(): Promise<Html2CanvasRenderer> {
const existing = (window as Html2CanvasWindow).html2canvas;
if (existing) return existing;
if (html2CanvasLoader) return html2CanvasLoader;
html2CanvasLoader = new Promise<Html2CanvasRenderer>((resolve, reject) => {
const script = document.createElement('script');
script.src = HTML2CANVAS_CDN;
script.async = true;
script.onload = () => {
const loaded = (window as Html2CanvasWindow).html2canvas;
if (!loaded) {
reject(new Error('无法加载页面截图能力'));
return;
}
resolve(loaded);
};
script.onerror = () => {
reject(new Error('无法加载页面截图能力'));
};
document.body.appendChild(script);
}).catch((error) => {
html2CanvasLoader = null;
throw error;
});
return html2CanvasLoader;
}
function blobToDataUrl(blob: Blob): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(String(reader.result ?? ''));
reader.onerror = () => reject(new Error('无法读取图片数据'));
reader.readAsDataURL(blob);
});
}
function downloadBlobAsFile(dataUrl: string, filename: string) {
const link = document.createElement('a');
link.href = dataUrl;
link.download = filename;
document.body.appendChild(link);
link.click();
link.remove();
}
function buildExportFilename(pageId: string, title: string) {
const safeTitle = String(title ?? '')
.trim()
.replace(/[\\/*?:"<>|]/g, '-')
.replace(/\s+/g, '-')
.slice(0, 24);
const suffix = safeTitle ? `-${safeTitle}` : '';
const timestamp = new Date().toISOString().replace(/[T:]/g, '-').replace(/\..+/, '');
return `mindspace-page-${pageId}${suffix}-${timestamp}.png`;
}
function ensureBlobFromCanvas(canvas: HTMLCanvasElement): Promise<Blob> {
return new Promise((resolve, reject) => {
canvas.toBlob((blob) => {
if (!blob) {
reject(new Error('图片生成失败'));
return;
}
resolve(blob);
}, 'image/png');
});
}
async function exportIframeToPng(iframe: HTMLIFrameElement): Promise<string> {
const renderer = await loadHtml2CanvasRenderer();
const doc = iframe.contentDocument;
if (!doc || !doc.body) {
throw new Error('预览内容无法访问');
}
const width = Math.max(doc.documentElement?.scrollWidth ?? 0, doc.body.scrollWidth, 320);
const height = Math.max(doc.documentElement?.scrollHeight ?? 0, doc.body.scrollHeight, 320);
const canvas = await renderer(doc.body, {
useCORS: true,
scale: LONG_IMAGE_RENDER_SCALE,
backgroundColor: '#ffffff',
width,
height,
windowWidth: width,
windowHeight: height,
x: 0,
y: 0,
scrollX: 0,
scrollY: 0,
});
const blob = await ensureBlobFromCanvas(canvas);
return await blobToDataUrl(blob);
}
async function fetchPageThumbnailAsDataUrl(pageId: string): Promise<string> {
const response = await fetch(`/api/mindspace/v1/pages/${encodeURIComponent(pageId)}/thumbnail?v=${Date.now()}`);
if (!response.ok) {
throw new Error('未生成页面封面图');
}
const blob = await response.blob();
if (!blob || !blob.size) {
throw new Error('未生成页面封面图');
}
return await blobToDataUrl(blob);
}
export function MindSpacePageDetail({
pageId,
onBack,
@@ -146,6 +267,10 @@ export function MindSpacePageDetail({
const [deletePreviewOpen, setDeletePreviewOpen] = useState(false);
const [deletePreview, setDeletePreview] = useState<MindSpacePageDeletePreview | null>(null);
const [deletePreviewLoading, setDeletePreviewLoading] = useState(false);
const [sharePayload, setSharePayload] = useState<SharePayload | null>(null);
const [previewFrame, setPreviewFrame] = useState<HTMLIFrameElement | null>(null);
const [isExportingImage, setIsExportingImage] = useState(false);
const [exportFeedback, setExportFeedback] = useState<string | null>(null);
const [plazaOpen, setPlazaOpen] = useState(false);
const [plazaCategories, setPlazaCategories] = useState<PlazaCategory[]>([]);
const [plazaCategoryId, setPlazaCategoryId] = useState('');
@@ -156,6 +281,12 @@ export function MindSpacePageDetail({
const [plazaPost, setPlazaPost] = useState<PlazaPostBrief | null>(null);
const [pushToPlaza, setPushToPlaza] = useState(false);
const [fixNotice, setFixNotice] = useState<MindSpaceRedactionChange[] | null>(null);
const [publishSuccess, setPublishSuccess] = useState<{
publication: MindSpacePublication;
plazaPost: PlazaPostBrief | null;
pageTitle: string;
pushedToPlaza: boolean;
} | null>(null);
const applyPageRecord = useCallback(
(next: MindSpacePage, options?: { recordHistory?: boolean }) => {
@@ -281,12 +412,20 @@ export function MindSpacePageDetail({
password: accessPassword || undefined,
expiresAt: expiresAt ? new Date(expiresAt).getTime() : null,
});
let nextPlazaPost: PlazaPostBrief | null = plazaPost;
if (pushToPlaza) {
await publishToPlazaWithDefaults(publication.id);
nextPlazaPost = await publishToPlazaWithDefaults(publication.id);
}
setPublishOpen(false);
setFullscreenPreviewOpen(false);
onFullscreenPreviewChange?.(false);
setPublishSuccess({
publication,
plazaPost: nextPlazaPost,
pageTitle: title || page.title,
pushedToPlaza: pushToPlaza,
});
await onSaved();
await load();
} catch (err) {
setError(err instanceof Error ? err.message : pushToPlaza ? '发布或推送到 Plaza 失败' : '发布失败');
} finally {
@@ -294,6 +433,21 @@ export function MindSpacePageDetail({
}
};
const offlineFromSuccess = async () => {
if (!publishSuccess) return;
setPublishing(true);
setError(null);
try {
await offlineMindSpacePublication(publishSuccess.publication.id);
await onSaved();
onBack();
} catch (err) {
setError(err instanceof Error ? err.message : '下线失败');
} finally {
setPublishing(false);
}
};
const offline = async () => {
if (!page?.publication) return;
setPublishing(true);
@@ -494,6 +648,7 @@ export function MindSpacePageDetail({
};
useEffect(() => {
setPublishSuccess(null);
void load();
}, [pageId]);
@@ -561,6 +716,46 @@ export function MindSpacePageDetail({
setPreviewRefreshPending(false);
};
const handleOpenShareSheet = () => {
if (!page) return;
const shareUrl = page.publication ? resolvePublicPageUrl(page.publication.publicUrl) : undefined;
setSharePayload(buildPageSharePayload(page, shareUrl));
setExportFeedback(null);
};
const handleExportPageImage = async () => {
if (!page) return;
setIsExportingImage(true);
setExportFeedback(null);
try {
let dataUrl = '';
let usedFallback = false;
if (previewFrame) {
try {
dataUrl = await exportIframeToPng(previewFrame);
} catch {
usedFallback = true;
}
} else {
usedFallback = true;
}
if (!dataUrl) {
dataUrl = await fetchPageThumbnailAsDataUrl(page.id);
}
downloadBlobAsFile(dataUrl, buildExportFilename(page.id, page.title || 'page'));
setExportFeedback(
usedFallback
? '截图暂不可用，已使用页面封面图保存'
: '已导出当前页面图片',
);
setTimeout(() => setExportFeedback(null), 2200);
} catch (err) {
setExportFeedback(err instanceof Error ? err.message : '导出图片失败');
} finally {
setIsExportingImage(false);
}
};
const handlePreviewUndo = () => {
const previous = undo();
if (!previous) return false;
@@ -599,6 +794,21 @@ export function MindSpacePageDetail({
);
}
if (publishSuccess) {
return (
<MindSpacePublishSuccess
pageTitle={publishSuccess.pageTitle}
publication={publishSuccess.publication}
plazaPost={publishSuccess.plazaPost}
pushedToPlaza={publishSuccess.pushedToPlaza}
offlineBusy={publishing}
error={error}
onOffline={offlineFromSuccess}
onBack={onBack}
/>
);
}
return (
<>
<section className="mindspace-page-detail">
@@ -629,6 +839,24 @@ export function MindSpacePageDetail({
</button>
</div>
</div>
<div className="mindspace-page-floating-actions">
<button type="button" className="mindspace-page-floating-action" onClick={handleOpenShareSheet}>
分享
</button>
<button
type="button"
className="mindspace-page-floating-action is-secondary"
onClick={() => void handleExportPageImage()}
disabled={isExportingImage}
>
{isExportingImage ? '保存中…' : '保存图片'}
</button>
</div>
{exportFeedback ? (
<p className="mindspace-page-export-feedback" role="status">
{exportFeedback}
</p>
) : null}
{error && !deletePreviewOpen && <div className="mindspace-security-note">{error}</div>}
@@ -1091,6 +1319,7 @@ export function MindSpacePageDetail({
title={title}
summary={summary}
content={previewContent}
onFrameReady={setPreviewFrame}
reloadKey={previewKey}
onContentChange={handlePreviewContentChange}
/>
@@ -1101,6 +1330,7 @@ export function MindSpacePageDetail({
summary={summary}
content={content}
templateId={templateId}
onFrameReady={setPreviewFrame}
reloadKey={previewKey}
minHeight={680}
maxHeight={12000}
@@ -1153,6 +1383,7 @@ export function MindSpacePageDetail({
))}
</section>
</section>
{sharePayload ? <ShareSheet payload={sharePayload} onClose={() => setSharePayload(null)} /> : null}
{fullscreenPreviewOpen && page && page.contentFormat === 'html' ? (
<MindSpacePageFullscreenPreview
src/components/MindSpacePageDraftPreviewFrame.tsx
+9
View File
@@ -21,6 +21,7 @@ export function MindSpacePageDraftPreviewFrame({
maxHeight = 12000,
className = 'mindspace-page-preview-frame',
changeHighlight = null,
onFrameReady,
}: {
pageId: string;
title: string;
@@ -33,6 +34,7 @@ export function MindSpacePageDraftPreviewFrame({
maxHeight?: number;
className?: string;
changeHighlight?: MindSpacePreviewChangeHighlight | null;
onFrameReady?: (iframe: HTMLIFrameElement | null) => void;
}) {
const iframeRef = useRef<HTMLIFrameElement>(null);
const [srcdoc, setSrcdoc] = useState('');
@@ -73,6 +75,13 @@ export function MindSpacePageDraftPreviewFrame({
setHeight(minHeight);
}, [srcdoc, reloadKey, minHeight]);
useEffect(() => {
onFrameReady?.(iframeRef.current);
return () => {
onFrameReady?.(null);
};
}, [onFrameReady, srcdoc, reloadKey]);
useEffect(() => {
const iframe = iframeRef.current;
if (!iframe || !srcdoc) return;
src/components/MindSpacePageEditablePreviewFrame.tsx
+9
View File
@@ -15,6 +15,7 @@ export function MindSpacePageEditablePreviewFrame({
compact = false,
fillViewport = false,
showHint = true,
onFrameReady,
onContentChange,
}: {
title: string;
@@ -26,6 +27,7 @@ export function MindSpacePageEditablePreviewFrame({
compact?: boolean;
fillViewport?: boolean;
showHint?: boolean;
onFrameReady?: (iframe: HTMLIFrameElement | null) => void;
onContentChange: (html: string) => void;
}) {
const scrollInsideFrame = compact || fillViewport;
@@ -99,6 +101,13 @@ export function MindSpacePageEditablePreviewFrame({
};
}, [maxHeight, minHeight, scrollInsideFrame, srcdoc]);
useEffect(() => {
onFrameReady?.(iframeRef.current);
return () => {
onFrameReady?.(null);
};
}, [onFrameReady, reloadKey, srcdoc, minHeight, maxHeight, scrollInsideFrame, compact, fillViewport]);
if (previewFailed) {
return <div className="mindspace-state mindspace-error">页面预览加载失败</div>;
}
src/components/MindSpacePagePreviewPanel.tsx
+12 -3
View File
@@ -3,9 +3,15 @@ import {
regenerateMindSpacePageThumbnail,
uploadMindSpacePageThumbnail,
} from '../api/client';
import { compressImageForUpload } from '../utils/imageUpload';
import { MindSpacePageEditablePreviewFrame } from './MindSpacePageEditablePreviewFrame';
function readFileAsBase64(file: File): Promise<{ base64: string; mimeType: string }> {
async function readCompressedImageAsBase64(file: File): Promise<{ base64: string; mimeType: string }> {
const compressed = await compressImageForUpload(file, {
maxInputBytes: 8 * 1024 * 1024,
maxOutputBytes: 900 * 1024,
maxDimension: 1200,
});
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
@@ -18,7 +24,7 @@ function readFileAsBase64(file: File): Promise<{ base64: string; mimeType: strin
resolve({ mimeType: match[1], base64: match[2] });
};
reader.onerror = () => reject(new Error('无法读取图片'));
reader.readAsDataURL(file);
reader.readAsDataURL(compressed);
});
}
@@ -28,6 +34,7 @@ export function MindSpacePagePreviewPanel({
summary,
content,
reloadKey,
onFrameReady,
onContentChange,
}: {
pageId: string;
@@ -35,6 +42,7 @@ export function MindSpacePagePreviewPanel({
summary: string;
content: string;
reloadKey: number;
onFrameReady?: (iframe: HTMLIFrameElement | null) => void;
onContentChange: (html: string) => void;
}) {
const [thumbnailFailed, setThumbnailFailed] = useState(false);
@@ -75,7 +83,7 @@ export function MindSpacePagePreviewPanel({
setThumbError(null);
setThumbNotice(null);
try {
const { base64, mimeType } = await readFileAsBase64(file);
const { base64, mimeType } = await readCompressedImageAsBase64(file);
await uploadMindSpacePageThumbnail(pageId, {
imageBase64: base64,
mimeType,
@@ -133,6 +141,7 @@ export function MindSpacePagePreviewPanel({
reloadKey={reloadKey}
compact
showHint={false}
onFrameReady={onFrameReady}
onContentChange={onContentChange}
/>
</div>
src/components/MindSpacePublishSuccess.tsx
+76
View File
@@ -0,0 +1,76 @@
import type { MindSpacePublication, PlazaPostBrief } from '../types';
import {
resolvePlazaHomeUrl,
resolvePlazaPostUrl,
resolvePublicPageUrl,
} from '../utils/publicUrl';
export function MindSpacePublishSuccess({
pageTitle,
publication,
plazaPost,
pushedToPlaza = false,
offlineBusy = false,
error,
onOffline,
onBack,
}: {
pageTitle: string;
publication: MindSpacePublication;
plazaPost?: PlazaPostBrief | null;
pushedToPlaza?: boolean;
offlineBusy?: boolean;
error?: string | null;
onOffline: () => void | Promise<void>;
onBack: () => void;
}) {
const publicPageUrl = resolvePublicPageUrl(publication.publicUrl);
const plazaUrl = plazaPost ? resolvePlazaPostUrl(plazaPost.id) : resolvePlazaHomeUrl();
return (
<section className="mindspace-publish-success">
<div className="mindspace-publish-success-card">
<p className="mindspace-eyebrow">PUBLISHED</p>
<h2>发布成功</h2>
<p className="mindspace-publish-success-title">{pageTitle}</p>
<a
className="mindspace-publish-success-url"
href={publicPageUrl}
target="_blank"
rel="noreferrer"
>
{publicPageUrl}
</a>
{pushedToPlaza ? (
<p className="mindspace-publish-success-note">
已推送到 Plaza。新发布内容会优先出现在广场首页前排。
</p>
) : (
<p className="mindspace-publish-success-note">
尚未推送到 Plaza。公开页已生效，如需上广场请在页面详情中点击「发布到广场」。
</p>
)}
{error ? <div className="mindspace-security-note">{error}</div> : null}
<div className="mindspace-publish-success-actions">
<a
className="mindspace-primary"
href={publicPageUrl}
target="_blank"
rel="noreferrer"
>
打开页面
</a>
<a href={plazaUrl} target="_blank" rel="noreferrer">
{plazaPost ? '查看 Plaza 帖子' : '进 Plaza'}
</a>
<button type="button" onClick={() => void onOffline()} disabled={offlineBusy}>
{offlineBusy ? '下线中…' : '立即下线'}
</button>
</div>
<button type="button" className="mindspace-inline-back" onClick={onBack}>
返回页面列表
</button>
</div>
</section>
);
}
src/components/MindSpaceView.tsx
+549 -36
View File
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef, useState, type MouseEvent } from 'react';
import { useEffect, useMemo, useRef, useState, type ChangeEvent, type MouseEvent } from 'react';
import { useLocation } from 'react-router-dom';
import { useChat } from '../context/ChatProvider';
import {
@@ -11,6 +11,7 @@ import {
bindMindSpacePageLiveEdit,
getMindSpaceAgentJob,
getMindSpace,
getMindSpacePage,
getMindSpacePageDeletePreview,
listMindSpaceAgentJobs,
listMindSpaceAssets,
@@ -22,6 +23,7 @@ import {
uploadMindSpaceAsset,
ApiError,
} from '../api/client';
import { compressImageForUpload } from '../utils/imageUpload';
import type {
MindSpace,
MindSpaceAsset,
@@ -73,7 +75,29 @@ const CATEGORY_ACTIONS: Partial<Record<MindSpaceCategory['code'], string>> = {
};
const AGENT_JOBS_PAGE_SIZE = 10;
const RECENT_PAGES_PAGE_SIZE = 6;
const IMAGE_PAGE_SIZE = 10;
const MAX_UPLOAD_FILE_BYTES = 2 * 1024 * 1024;
const UPLOAD_FILE_EXTENSIONS = [
'.doc',
'.docx',
'.xls',
'.xlsx',
'.pdf',
'.ppt',
'.pptx',
'.png',
'.jpg',
'.jpeg',
'.webp',
'.md',
'.csv',
'.txt',
'.html',
'.htm',
] as const;
const UPLOAD_ACCEPT = UPLOAD_FILE_EXTENSIONS.join(',');
const UPLOAD_FILE_TYPE_LABEL = 'Word、Excel、PDF、PPT、图片、Markdown、CSV、TXT 和 HTML';
const JOB_STATUS_LABELS: Record<MindSpaceAgentJob['status'], string> = {
queued: '排队中',
@@ -84,6 +108,256 @@ const JOB_STATUS_LABELS: Record<MindSpaceAgentJob['status'], string> = {
timed_out: '超时',
};
const PREVIEW_SCHEDULE_ITEMS = [
{
id: 'schedule-preview-1',
time: '09:30',
kind: '待办',
title: '跟进客户报价单',
meta: 'OA 工作区资料',
tone: 'task',
},
{
id: 'schedule-preview-2',
time: '14:00',
kind: '日程',
title: '产品评审会',
meta: '提前 30 分钟提醒',
tone: 'event',
},
{
id: 'schedule-preview-3',
time: '明天',
kind: '提醒',
title: '带项目材料去会议',
meta: '服务号推送',
tone: 'reminder',
},
] as const;
const PREVIEW_PAGE_READERS: Record<string, { kicker: string; body: string[] }> = {
'page-1': {
kicker: '市场趋势',
body: ['消费者对 AI 辅助决策的接受度持续提升，企业侧开始从试点转向流程内嵌。', '下一阶段重点是把洞察沉淀为可复用页面，而不是停留在一次性聊天结论。'],
},
'page-2': {
kicker: '旅行攻略',
body: ['吉隆坡和槟城适合组合成 5 天轻行程，城市交通、夜市和海岛体验都比较均衡。', '预算建议优先保证住宿位置，减少跨城交通带来的时间损耗。'],
},
'page-3': {
kicker: '客户成功',
body: ['本月高价值客户续费意向稳定，但两个账号存在使用频次下降信号。', '建议在下周安排专项回访，并用案例页同步给销售团队。'],
},
'page-4': {
kicker: '经营摘要',
body: ['收入增长主要来自老客户扩容，新线索转化仍需提高。', '成本侧波动集中在交付人力，建议把高频交付问题整理为自动化模板。'],
},
'page-5': {
kicker: '私人清单',
body: ['出行前 48 小时确认证件、充电器、常用药和当地交通 App。', '个人资料区默认不公开，适合保存只给自己看的备忘。'],
},
'page-6': {
kicker: '选型笔记',
body: ['模型选择需要同时看质量、延迟、成本和可观测性。', '对高频生产任务，优先选择稳定性更强、可回放的流程。'],
},
'page-7': {
kicker: '发布指南',
body: ['公开发布前先做风险检查，再确认标题、摘要和封面是否准确。', '适合进入 Plaza 的内容应该有明确主题和可快速理解的首屏。'],
},
'page-8': {
kicker: '活动复盘',
body: ['旧活动的关键价值在于保留假设、执行过程和结论，而不是只保存结果截图。', '归档内容保持可搜索即可，不需要占据首页主要空间。'],
},
};
type Html2CanvasRenderer = (
element: HTMLElement,
options?: Record<string, unknown>,
) => Promise<HTMLCanvasElement>;
type Html2CanvasWindow = Window & { html2canvas?: Html2CanvasRenderer };
const HTML2CANVAS_CDN = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
const LONG_IMAGE_VIEWPORT_WIDTH = 1280;
const LONG_IMAGE_VIEWPORT_HEIGHT = 720;
const LONG_IMAGE_RENDER_SCALE = 2;
const LONG_IMAGE_MAX_PIXELS = 64_000_000;
let html2CanvasLoader: Promise<Html2CanvasRenderer> | null = null;
async function loadHtml2CanvasRenderer(): Promise<Html2CanvasRenderer> {
const existing = (window as Html2CanvasWindow).html2canvas;
if (existing) return existing;
if (html2CanvasLoader) return html2CanvasLoader;
html2CanvasLoader = new Promise<Html2CanvasRenderer>((resolve, reject) => {
const script = document.createElement('script');
script.src = HTML2CANVAS_CDN;
script.async = true;
script.onload = () => {
const loaded = (window as Html2CanvasWindow).html2canvas;
if (!loaded) {
reject(new Error('无法加载页面截图能力'));
return;
}
resolve(loaded);
};
script.onerror = () => {
reject(new Error('无法加载页面截图能力'));
};
document.body.appendChild(script);
}).catch((error) => {
html2CanvasLoader = null;
throw error;
});
return html2CanvasLoader;
}
function blobToDataUrl(blob: Blob): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(String(reader.result ?? ''));
reader.onerror = () => reject(new Error('无法读取图片数据'));
reader.readAsDataURL(blob);
});
}
function downloadBlobAsFile(dataUrl: string, filename: string) {
const link = document.createElement('a');
link.href = dataUrl;
link.download = filename;
document.body.appendChild(link);
link.click();
link.remove();
}
function buildExportFilename(pageId: string, title: string) {
const safeTitle = String(title ?? '')
.trim()
.replace(/[\\/*?:"<>|]/g, '-')
.replace(/\s+/g, '-')
.slice(0, 24);
const suffix = safeTitle ? `-${safeTitle}` : '';
const timestamp = new Date().toISOString().replace(/[T:]/g, '-').replace(/\..+/, '');
return `mindspace-page-${pageId}${suffix}-${timestamp}.png`;
}
function fileExtension(filename: string) {
const dotIndex = filename.lastIndexOf('.');
return dotIndex >= 0 ? filename.slice(dotIndex).toLowerCase() : '';
}
function validateSelectedUploadFile(file: File) {
if (file.size <= 0) return '文件不能为空，请重新选择。';
if (file.size > MAX_UPLOAD_FILE_BYTES) {
return `文件不能超过 ${formatBytes(MAX_UPLOAD_FILE_BYTES)}，当前为 ${formatBytes(file.size)}。`;
}
const extension = fileExtension(file.name);
if (!UPLOAD_FILE_EXTENSIONS.includes(extension as (typeof UPLOAD_FILE_EXTENSIONS)[number])) {
return `暂不支持 ${extension || '无扩展名'} 文件，请选择支持的资料格式。`;
}
return null;
}
function ensureBlobFromCanvas(canvas: HTMLCanvasElement): Promise<Blob> {
return new Promise((resolve, reject) => {
canvas.toBlob((blob) => {
if (!blob) {
reject(new Error('图片生成失败'));
return;
}
resolve(blob);
}, 'image/png');
});
}
async function exportIframeToPng(iframe: HTMLIFrameElement): Promise<string> {
const renderer = await loadHtml2CanvasRenderer();
const doc = iframe.contentDocument;
if (!doc || !doc.body) {
throw new Error('预览内容无法访问');
}
const width = Math.max(
doc.documentElement?.scrollWidth ?? 0,
doc.body.scrollWidth,
LONG_IMAGE_VIEWPORT_WIDTH,
);
const height = Math.max(
doc.documentElement?.scrollHeight ?? 0,
doc.body.scrollHeight,
LONG_IMAGE_VIEWPORT_HEIGHT,
);
const scale = Math.min(
LONG_IMAGE_RENDER_SCALE,
Math.max(1, Math.sqrt(LONG_IMAGE_MAX_PIXELS / Math.max(width * height, 1))),
);
const canvas = await renderer(doc.body, {
useCORS: true,
scale,
backgroundColor: '#ffffff',
width,
height,
windowWidth: width,
windowHeight: height,
x: 0,
y: 0,
scrollX: 0,
scrollY: 0,
});
const blob = await ensureBlobFromCanvas(canvas);
return await blobToDataUrl(blob);
}
async function waitForIframeAssets(iframe: HTMLIFrameElement): Promise<void> {
const doc = iframe.contentDocument;
if (!doc) return;
await doc.fonts?.ready.catch(() => undefined);
await Promise.all(
Array.from(doc.images)
.filter((img) => !img.complete)
.map(
(img) =>
new Promise<void>((resolve) => {
img.addEventListener('load', () => resolve(), { once: true });
img.addEventListener('error', () => resolve(), { once: true });
}),
),
);
await new Promise((resolve) => window.setTimeout(resolve, 450));
}
async function exportPagePreviewToPng(page: MindSpacePage): Promise<string> {
const iframe = document.createElement('iframe');
iframe.src = `/api/mindspace/v1/pages/${encodeURIComponent(page.id)}/preview?v=${page.versionNo ?? page.updatedAt}`;
iframe.setAttribute('aria-hidden', 'true');
iframe.tabIndex = -1;
iframe.style.position = 'fixed';
iframe.style.left = '-99999px';
iframe.style.top = '0';
iframe.style.width = `${LONG_IMAGE_VIEWPORT_WIDTH}px`;
iframe.style.height = `${LONG_IMAGE_VIEWPORT_HEIGHT}px`;
iframe.style.border = '0';
iframe.style.opacity = '0';
iframe.style.pointerEvents = 'none';
document.body.appendChild(iframe);
try {
await new Promise<void>((resolve, reject) => {
const timer = window.setTimeout(() => reject(new Error('页面预览加载超时')), 12000);
iframe.onload = () => {
window.clearTimeout(timer);
resolve();
};
iframe.onerror = () => {
window.clearTimeout(timer);
reject(new Error('页面预览加载失败'));
};
});
await waitForIframeAssets(iframe);
return await exportIframeToPng(iframe);
} finally {
iframe.remove();
}
}
function formatBytes(bytes: number) {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -155,6 +429,7 @@ export function MindSpaceView({
const [uploadOpen, setUploadOpen] = useState(false);
const [uploading, setUploading] = useState(false);
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [uploadError, setUploadError] = useState<string | null>(null);
const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
const [newPageOpen, setNewPageOpen] = useState(false);
const [newPageTitle, setNewPageTitle] = useState('');
@@ -179,6 +454,9 @@ export function MindSpaceView({
const [agentJobsTotal, setAgentJobsTotal] = useState(0);
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);
const [pageDeleteTarget, setPageDeleteTarget] = useState<MindSpacePage | null>(null);
@@ -219,6 +497,13 @@ export function MindSpaceView({
}
}, [selectedPageId]);
useEffect(() => {
if (!allPagesOpen && !selectedPageId) return;
window.requestAnimationFrame(() => {
window.scrollTo({ top: 0, left: 0 });
});
}, [allPagesOpen, selectedPageId]);
useEffect(() => {
if (!selectedPageId || !session?.id || previewMode || pageFullscreenPreviewOpen) return;
void bindMindSpacePageLiveEdit(selectedPageId, session.id).catch(() => {});
@@ -329,6 +614,20 @@ export function MindSpaceView({
showPage(page.id);
},
},
{
label: '公开链接',
onClick: (event: MouseEvent) => {
event.stopPropagation();
void openPagePublicShare(page);
},
},
{
label: exportingPageId === page.id ? '保存中…' : '保存长图',
onClick: (event: MouseEvent) => {
event.stopPropagation();
void exportPageLongImage(page);
},
},
{
label: '删除',
onClick: (event: MouseEvent) => {
@@ -347,6 +646,44 @@ export function MindSpaceView({
}
};
const openPagePublicShare = async (page: MindSpacePage) => {
if (previewMode) {
setError('预览模式下暂不支持跳转分享页');
return;
}
if (page.publicationUrl) {
window.open(resolvePublicPageUrl(page.publicationUrl), '_blank', 'noopener,noreferrer');
return;
}
try {
const pageDetail = await getMindSpacePage(page.id);
if (!pageDetail.publication?.publicUrl) {
setError('该页面未发布，先发布后再分享');
return;
}
window.open(resolvePublicPageUrl(pageDetail.publication.publicUrl), '_blank', 'noopener,noreferrer');
} catch (err) {
setError(err instanceof Error ? err.message : '获取分享链接失败');
}
};
const exportPageLongImage = async (page: MindSpacePage) => {
if (previewMode) {
setError('预览模式下暂不支持保存长图');
return;
}
setExportingPageId(page.id);
setError(null);
try {
const dataUrl = await exportPagePreviewToPng(page);
downloadBlobAsFile(dataUrl, buildExportFilename(page.id, page.title || 'page'));
} catch (err) {
setError(err instanceof Error ? err.message : '保存长图失败');
} finally {
setExportingPageId((current) => (current === page.id ? null : current));
}
};
const closeCategory = () => {
setSelectedCategory(null);
setUploadOpen(false);
@@ -430,6 +767,7 @@ export function MindSpaceView({
setSelectedCategory(null);
setSelectedPageId(null);
setNewPageOpen(false);
setAllPagesOpen(false);
setAgentJobsPanelOpen(true);
routeSync?.pushHome();
void loadAgentJobsPage(0);
@@ -565,6 +903,7 @@ export function MindSpaceView({
const openCategory = async (category: MindSpaceCategory) => {
setAgentJobsPanelOpen(false);
setAllPagesOpen(false);
setSelectedCategory(category);
setSelectedPageId(null);
setNewPageOpen(false);
@@ -598,6 +937,7 @@ export function MindSpaceView({
null;
if (target) setSelectedCategory(target);
setSelectedFile(null);
setUploadError(null);
setUploadOpen(true);
};
@@ -605,6 +945,7 @@ export function MindSpaceView({
if (uploading) return;
setUploadOpen(false);
setSelectedFile(null);
setUploadError(null);
};
const uploadDialogTitle = (category: MindSpaceCategory) =>
@@ -612,14 +953,27 @@ export function MindSpaceView({
const submitUpload = async () => {
if (!selectedCategory || !selectedFile) return;
const validationError = validateSelectedUploadFile(selectedFile);
if (validationError) {
setUploadError(validationError);
return;
}
if (previewMode) {
setError(previewBlocked().message);
return;
}
setUploading(true);
setError(null);
setUploadError(null);
try {
await uploadMindSpaceAsset(selectedCategory.id, selectedFile);
const fileToUpload = selectedFile.type.startsWith('image/')
? await compressImageForUpload(selectedFile, {
maxInputBytes: MAX_UPLOAD_FILE_BYTES,
maxOutputBytes: MAX_UPLOAD_FILE_BYTES,
maxDimension: 1600,
})
: selectedFile;
await uploadMindSpaceAsset(selectedCategory.id, fileToUpload);
setUploadOpen(false);
setSelectedFile(null);
await load();
@@ -631,6 +985,24 @@ export function MindSpaceView({
}
};
const handleUploadFileChange = (event: ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0] ?? null;
if (!file) {
setSelectedFile(null);
setUploadError(null);
return;
}
const validationError = validateSelectedUploadFile(file);
if (validationError) {
setSelectedFile(null);
setUploadError(validationError);
event.currentTarget.value = '';
return;
}
setSelectedFile(file);
setUploadError(null);
};
const removeAsset = async (assetId: string) => {
if (!selectedCategory) return;
if (previewMode) {
@@ -795,6 +1167,17 @@ 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 visibleCardAssets =
assetFilter === 'all'
? [...fileAssets, ...workAssets]
@@ -930,6 +1313,22 @@ export function MindSpaceView({
</article>
);
const showHomeModules =
space && !selectedCategory && !selectedPageId && !newPageOpen && !agentJobsPanelOpen && !allPagesOpen;
const scheduleItems = previewMode ? PREVIEW_SCHEDULE_ITEMS : [];
const selectedPreviewPage = selectedPageId
? pages.find((page) => page.id === selectedPageId) ?? null
: null;
const selectedPreviewReader = selectedPreviewPage
? PREVIEW_PAGE_READERS[selectedPreviewPage.id] ?? {
kicker: selectedPreviewPage.templateId,
body: [
selectedPreviewPage.summary || '这是该页面的站内预览内容。',
'正式接入真实数据后，这里会直接呈现用户生成页面的完整内容。',
],
}
: null;
return (
<div className={`mindspace-page${previewMode ? ' mindspace-page-preview' : ''}`}>
{previewMode && (
@@ -978,6 +1377,7 @@ export function MindSpaceView({
</header>
<main className="mindspace-content">
{!allPagesOpen && (
<section className="mindspace-hero">
<div className="mindspace-hero-left">
<p className="mindspace-eyebrow">MINDSPACE</p>
@@ -998,6 +1398,7 @@ export function MindSpaceView({
onClick={() => {
setSelectedCategory(null);
setSelectedPageId(null);
setAllPagesOpen(false);
setNewPageOpen(true);
}}
>
@@ -1125,6 +1526,43 @@ export function MindSpaceView({
</div>
)}
</section>
)}
{showHomeModules && (
<section className="mindspace-schedule-module" aria-labelledby="mindspace-schedule-title">
<div className="mindspace-schedule-head">
<div>
<p className="mindspace-eyebrow">TODAY</p>
<h2 id="mindspace-schedule-title">待办行事历</h2>
</div>
<button type="button" className="mindspace-schedule-link">
查看日历
</button>
</div>
<div className="mindspace-schedule-summary">
<strong>今天 {scheduleItems.length || 0} 项</strong>
<span>{scheduleItems.length ? '1 个提醒即将推送' : '还没有安排'}</span>
</div>
{scheduleItems.length > 0 ? (
<div className="mindspace-schedule-list">
{scheduleItems.map((item) => (
<article className="mindspace-schedule-item" key={item.id}>
<time>{item.time}</time>
<span className={`mindspace-schedule-kind is-${item.tone}`}>{item.kind}</span>
<div>
<strong>{item.title}</strong>
<small>{item.meta}</small>
</div>
</article>
))}
</div>
) : (
<p className="mindspace-schedule-empty">
今天还没有待办，可以在聊天里说“明天上午提醒我带材料”。
</p>
)}
</section>
)}
{loading && <div className="mindspace-state">正在加载个人空间…</div>}
@@ -1141,15 +1579,29 @@ export function MindSpaceView({
<>
{selectedPageId ? (
previewMode ? (
<section className="mindspace-section mindspace-state">
<button
type="button"
className="mindspace-inline-back"
onClick={closePage}
>
返回空间首页
</button>
<p>预览模式不加载页面详情，返回后可继续调整首页布局。</p>
<section className="mindspace-page-reader">
<header className="mindspace-page-reader-bar">
<button type="button" className="mindspace-inline-back" onClick={closePage}>
{allPagesOpen ? '返回全部页面' : '返回空间首页'}
</button>
<span>站内浏览</span>
</header>
{selectedPreviewPage && selectedPreviewReader ? (
<article className="mindspace-page-reader-sheet">
<p className="mindspace-eyebrow">{selectedPreviewReader.kicker}</p>
<h2>{selectedPreviewPage.title}</h2>
<p className="mindspace-page-reader-summary">
{selectedPreviewPage.summary}
</p>
<div className="mindspace-page-reader-body">
{selectedPreviewReader.body.map((paragraph) => (
<p key={paragraph}>{paragraph}</p>
))}
</div>
</article>
) : (
<div className="mindspace-state">页面不存在或已被删除</div>
)}
</section>
) : (
<MindSpacePageDetail
@@ -1212,6 +1664,39 @@ export function MindSpaceView({
</button>
</div>
</section>
) : allPagesOpen ? (
<section className="mindspace-independent-page mindspace-all-pages">
<div className="mindspace-section-heading">
<div>
<button
type="button"
className="mindspace-inline-back"
onClick={() => setAllPagesOpen(false)}
>
返回空间首页
</button>
<p className="mindspace-eyebrow">ALL PAGES</p>
<h2>全部页面</h2>
</div>
<span>{pages.length} 个页面</span>
</div>
{pages.length > 0 ? (
<div className="mindspace-feed-grid mindspace-recent-work-grid is-all-pages">
{pages.map((page) => (
<MindSpaceFeedCard
key={page.id}
page={page}
previewMode={previewMode}
onClick={() => showPage(page.id)}
/>
))}
</div>
) : (
<div className="mindspace-recent-work-empty">
<p>上传资料或从聊天保存页面后，所有页面会集中显示在这里。</p>
</div>
)}
</section>
) : agentJobsPanelOpen ? (
<section className="mindspace-section">
<div className="mindspace-section-heading">
@@ -1595,41 +2080,68 @@ export function MindSpaceView({
<p>{CATEGORY_DESCRIPTIONS[category.code]}</p>
</article>
))}
<button
type="button"
className="mindspace-agent-jobs-module"
onClick={openAgentJobsPanel}
>
<span className="mindspace-eyebrow">AGENT JOBS</span>
<strong>{agentJobsTotal} 条任务</strong>
<span>查看 AI 生成记录</span>
</button>
</div>
</div>
</section>
)}
{!selectedCategory && !selectedPageId && !newPageOpen && !agentJobsPanelOpen && (
{!selectedCategory && !selectedPageId && !newPageOpen && !agentJobsPanelOpen && !allPagesOpen && (
<section className="mindspace-section mindspace-recent-work">
<div className="mindspace-section-heading">
<div>
<p className="mindspace-eyebrow">RECENT WORK</p>
<h2>{pages.length > 0 ? '最近页面' : '这里会出现你的 AI 成果'}</h2>
</div>
{pages.length > 0 && <span>{pages.length} 个页面</span>}
{pages.length > 0 && (
<button
type="button"
className="mindspace-section-link"
onClick={() => setAllPagesOpen(true)}
>
查看全部
</button>
)}
</div>
{pages.length > 0 ? (
<div className="mindspace-feed-grid">
{pages.slice(0, 6).map((page) => (
<MindSpaceFeedCard
key={page.id}
page={page}
previewMode={previewMode}
onClick={() => showPage(page.id)}
actions={buildPageCardActions(page)}
/>
))}
</div>
<>
<div className="mindspace-feed-grid mindspace-recent-work-grid">
{pagedRecentPages.map((page) => (
<MindSpaceFeedCard
key={page.id}
page={page}
previewMode={previewMode}
onClick={() => showPage(page.id)}
/>
))}
</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">
<p>上传资料或从聊天保存页面后，报告、图片和作品会以卡片形式出现在这里。</p>
@@ -1672,13 +2184,14 @@ export function MindSpaceView({
</button>
</div>
<p className="mindspace-upload-dialog-desc">
支持 Word、Excel、PDF、PPT、图片、Markdown、CSV 和 TXT，单文件最大 2 MB。
支持 {UPLOAD_FILE_TYPE_LABEL}，单文件最大 {formatBytes(MAX_UPLOAD_FILE_BYTES)}。
</p>
<input
type="file"
accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx,.png,.jpg,.jpeg,.webp,.md,.csv,.txt"
onChange={(event) => setSelectedFile(event.target.files?.[0] ?? null)}
accept={UPLOAD_ACCEPT}
onChange={handleUploadFileChange}
/>
{uploadError && <p className="mindspace-upload-error">{uploadError}</p>}
{selectedFile && (
<div className="mindspace-upload-file">
<span>{selectedFile.name}</span>
src/components/SpaceChatPanel.tsx
+5 -3
View File
@@ -46,6 +46,7 @@ export function SpaceChatPanel({
notice,
dismissNotice,
openRecharge,
uploadChatImage,
retryConnect,
} = chat;
@@ -122,11 +123,12 @@ export function SpaceChatPanel({
chatState={chatState}
pendingTool={pendingTool}
session={session}
onSubmit={(text) =>
onSubmit={(text, imageUrls) =>
chatBridge
? void submit(text, context)
: void submit(text, { mindspaceContext: context })
? void submit(text, context, imageUrls)
: void submit(text, { mindspaceContext: context }, imageUrls)
}
onUploadImage={uploadChatImage}
onStop={stop}
onApproveTool={approveTool}
onPageSaved={onPageSaved}
src/components/VoiceInputButton.tsx
+292 -34
View File
@@ -1,66 +1,324 @@
import { useEffect, useState } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useVoiceSession } from '../hooks/useVoiceSession';
import { shouldShowVoiceInputControl, isVoiceInputAvailable } from '../voice/capabilities';
import { VoiceInputDialog } from './VoiceInputDialog';
import { isWechatBrowser } from '../utils/wechat';
import {
checkWechatVoiceApis,
isWechatVoiceReady,
prepareWechatVoiceSdk,
startWechatVoiceRecord,
stopWechatVoiceRecord,
translateWechatVoice,
} from '../voice/wechatVoice';
function MicIcon() {
return (
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
<path
fill="currentColor"
d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3Zm5-3a1 1 0 1 0-2 0 5 5 0 0 1-10 0 1 1 0 1 0-2 0 7 7 0 0 0 6 6.92V19H9a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-2v-1.08A7 7 0 0 0 17 11Z"
d="M12 15c1.66 0 3-1.34 3-3V6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5-3c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-2.08c3.39-.49 6-3.39 6-6.92h-2z"
/>
</svg>
);
}
function VoiceActiveIcon() {
return (
<span className="voice-btn-eq" aria-hidden="true">
<span className="voice-btn-eq-bar" />
<span className="voice-btn-eq-bar" />
<span className="voice-btn-eq-bar" />
<span className="voice-btn-eq-bar" />
</span>
);
}
export function VoiceInputButton({
disabled = false,
onSend,
onTranscript,
onLiveTranscript,
onVoiceStart,
onVoiceComplete,
onRecordingChange,
onError,
}: {
disabled?: boolean;
onSend: (text: string) => void;
onTranscript?: (text: string) => void;
onLiveTranscript?: (text: string) => void;
onVoiceStart?: () => void;
onVoiceComplete?: () => void;
onRecordingChange?: (recording: boolean) => void;
onError?: (message: string) => void;
}) {
const [open, setOpen] = useState(false);
const [sessionKey, setSessionKey] = useState(0);
const [available, setAvailable] = useState(true);
const [browserActive, setBrowserActive] = useState(false);
const [wechatReady, setWechatReady] = useState(false);
const [wechatApiAvailable, setWechatApiAvailable] = useState(false);
const [wechatPrepareError, setWechatPrepareError] = useState<string | null>(null);
const [wechatPhase, setWechatPhase] = useState<'idle' | 'requesting' | 'recording' | 'transcribing'>('idle');
const wechatPhaseRef = useRef(wechatPhase);
const pendingWechatStopRef = useRef(false);
const startedAtRef = useRef(0);
const startingRef = useRef(false);
const browserCommittedRef = useRef(false);
const prevRecordingRef = useRef(false);
useEffect(() => {
setAvailable(isVoiceInputAvailable());
}, []);
useEffect(() => {
wechatPhaseRef.current = wechatPhase;
}, [wechatPhase]);
const wechatMode = isWechatBrowser();
const wechatBusy = wechatPhase === 'requesting' || wechatPhase === 'transcribing';
const wechatRecording = wechatPhase === 'recording';
const wechatUnavailable = wechatMode && (!wechatReady || !wechatApiAvailable || !!wechatPrepareError);
const {
phase: browserPhase,
text: browserText,
liveRecognition,
stopListening,
finishFallbackRecording,
resetSession,
} = useVoiceSession({
active: !wechatMode && browserActive && !disabled,
onError,
});
const browserBusy = browserPhase === 'requesting' || browserPhase === 'transcribing';
const browserListening = browserPhase === 'listening';
const recording = wechatRecording || browserListening;
const busy = wechatMode ? wechatBusy : browserBusy;
const blocked = disabled || !available || busy;
useEffect(() => {
if (recording && !prevRecordingRef.current) {
onVoiceStart?.();
}
prevRecordingRef.current = recording;
onRecordingChange?.(recording);
}, [onRecordingChange, onVoiceStart, recording]);
useEffect(() => {
if (wechatMode || !browserListening || !onLiveTranscript) return;
onLiveTranscript(browserText);
}, [browserListening, browserText, onLiveTranscript, wechatMode]);
useEffect(() => {
if (wechatMode || !browserActive) return;
if (browserPhase === 'ready') {
const transcript = browserText.trim();
if (transcript && !browserCommittedRef.current) {
browserCommittedRef.current = true;
if (liveRecognition) {
onVoiceComplete?.();
} else {
onTranscript?.(transcript);
}
}
setBrowserActive(false);
return;
}
if (browserPhase === 'error') {
setBrowserActive(false);
}
}, [browserActive, browserPhase, browserText, liveRecognition, onTranscript, onVoiceComplete, wechatMode]);
useEffect(() => {
if (browserActive || wechatMode) return;
browserCommittedRef.current = false;
resetSession();
}, [browserActive, resetSession, wechatMode]);
useEffect(() => {
if (!wechatMode) return;
let cancelled = false;
setWechatReady(isWechatVoiceReady());
setWechatApiAvailable(false);
prepareWechatVoiceSdk()
.then(() => {
if (cancelled) return;
setWechatReady(true);
setWechatPrepareError(null);
return checkWechatVoiceApis();
})
.then((result) => {
if (cancelled || !result) return;
const unavailable = ['startRecord', 'stopRecord', 'translateVoice'].filter((api) => result[api] === false);
if (unavailable.length) {
setWechatApiAvailable(false);
setWechatPrepareError(`微信语音接口不可用：${unavailable.join(', ')}`);
return;
}
setWechatApiAvailable(true);
})
.catch((err) => {
if (cancelled) return;
setWechatReady(false);
setWechatApiAvailable(false);
setWechatPrepareError(err instanceof Error ? err.message : '微信语音初始化失败');
});
return () => {
cancelled = true;
};
}, [wechatMode]);
const commitWechatTranscript = useCallback(
(text: string) => {
const value = text.trim();
if (!value) {
onError?.('未识别到语音，请重试');
return;
}
onTranscript?.(value);
},
[onError, onTranscript],
);
const finishWechatRecording = useCallback(
async (localId?: string) => {
if (wechatPhaseRef.current === 'idle') return;
const duration = Date.now() - startedAtRef.current;
setWechatPhase('transcribing');
try {
if (duration < 500 && !localId) {
try {
await stopWechatVoiceRecord();
} catch {
// ignore best-effort cleanup for very short taps
}
onError?.('说话时间太短');
return;
}
const voiceId = localId || (await stopWechatVoiceRecord());
const text = await translateWechatVoice(voiceId);
commitWechatTranscript(text);
} catch (err) {
onError?.(err instanceof Error ? err.message : '微信语音识别失败');
} finally {
pendingWechatStopRef.current = false;
setWechatPhase('idle');
}
},
[commitWechatTranscript, onError],
);
const beginWechatRecording = useCallback(
async () => {
if (startingRef.current || wechatPhaseRef.current !== 'idle') return;
if (blocked) {
if (!available) onError?.('当前浏览器不支持语音输入');
return;
}
if (!isWechatVoiceReady() || !wechatApiAvailable) {
setWechatReady(false);
void prepareWechatVoiceSdk()
.then(() => {
setWechatReady(true);
setWechatPrepareError(null);
return checkWechatVoiceApis();
})
.then((result) => {
if (!result) return;
const unavailable = ['startRecord', 'stopRecord', 'translateVoice'].filter((api) => result[api] === false);
if (unavailable.length) {
setWechatApiAvailable(false);
setWechatPrepareError(`微信语音接口不可用：${unavailable.join(', ')}`);
return;
}
setWechatApiAvailable(true);
})
.catch((err) => {
setWechatReady(false);
setWechatApiAvailable(false);
setWechatPrepareError(err instanceof Error ? err.message : '微信语音初始化失败');
});
onError?.(wechatPrepareError || '微信语音初始化中，请稍后再试');
return;
}
pendingWechatStopRef.current = false;
startedAtRef.current = Date.now();
startingRef.current = true;
setWechatPhase('requesting');
try {
await startWechatVoiceRecord((localId) => {
void finishWechatRecording(localId);
});
setWechatPhase('recording');
if (pendingWechatStopRef.current) {
void finishWechatRecording();
}
} catch (err) {
pendingWechatStopRef.current = false;
setWechatPhase('idle');
onError?.(err instanceof Error ? err.message : '微信语音启动失败');
} finally {
startingRef.current = false;
}
},
[available, blocked, finishWechatRecording, onError, wechatApiAvailable, wechatPrepareError],
);
if (!shouldShowVoiceInputControl()) return null;
const blocked = disabled || !available;
return (
<>
<button
type="button"
className={`voice-btn${open ? ' voice-btn-recording' : ''}`}
disabled={blocked}
aria-label="语音输入"
title={available ? '语音输入' : '当前浏览器不支持麦克风，请改用文字输入'}
onClick={() => {
if (blocked) {
if (!available) onError?.('当前浏览器不支持语音输入');
<button
type="button"
className={`voice-btn${recording ? ' voice-btn-recording' : ''}${busy ? ' voice-btn-busy' : ''}${
wechatMode ? ' voice-btn-wechat' : ''
}`}
disabled={blocked}
aria-label="语音输入"
title={
available
? wechatMode
? wechatRecording
? '点击结束识别'
: wechatUnavailable
? wechatPrepareError || '微信语音初始化中，请稍后再试'
: '点击开始语音输入'
: browserListening
? liveRecognition
? '点击结束听写'
: '点击结束录音并识别'
: browserBusy
? '正在识别…'
: '点击开始语音输入'
: '当前浏览器不支持麦克风，请改用文字输入'
}
onClick={() => {
if (wechatMode) {
if (wechatRecording) {
void finishWechatRecording();
return;
}
setSessionKey((value) => value + 1);
setOpen(true);
}}
>
void beginWechatRecording();
return;
}
if (blocked) {
if (!available) onError?.('当前浏览器不支持语音输入');
return;
}
if (browserListening) {
if (liveRecognition) {
stopListening();
} else {
void finishFallbackRecording();
}
return;
}
browserCommittedRef.current = false;
setBrowserActive(true);
}}
>
{busy ? (
<span className="voice-btn-spinner" aria-hidden="true" />
) : recording ? (
<VoiceActiveIcon />
) : (
<MicIcon />
</button>
<VoiceInputDialog
key={sessionKey}
open={open}
disabled={disabled}
onClose={() => setOpen(false)}
onSend={onSend}
onError={onError}
/>
</>
)}
</button>
);
}
src/components/WechatAccountButton.tsx
+163 -5
View File
@@ -1,10 +1,34 @@
import { useEffect, useState } from 'react';
import { getWechatBindingStatus } from '../api/client';
import {
getWechatAgentRouteStatus,
getWechatBindingStatus,
resetWechatAgentRoute,
type WechatAgentRouteStatus,
} from '../api/client';
import { buildWechatAuthorizeUrl } from '../utils/wechat';
export function WechatAccountButton({ returnTo }: { returnTo?: string }) {
function formatRouteTime(timestamp: number | null) {
if (!timestamp) return '暂无';
const date = new Date(timestamp);
if (Number.isNaN(date.getTime())) return '暂无';
const pad = (value: number) => String(value).padStart(2, '0');
return `${date.getMonth() + 1}-${date.getDate()} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
}
export function WechatAccountButton({
returnTo,
onBeforeAction,
}: {
returnTo?: string;
onBeforeAction?: () => void;
}) {
const [bound, setBound] = useState<boolean | null>(null);
const [nickname, setNickname] = useState<string | null>(null);
const [debugOpen, setDebugOpen] = useState(false);
const [route, setRoute] = useState<WechatAgentRouteStatus | null>(null);
const [routeLoading, setRouteLoading] = useState(false);
const [routeError, setRouteError] = useState<string | null>(null);
const [resetting, setResetting] = useState(false);
useEffect(() => {
void getWechatBindingStatus().then((status) => {
@@ -17,13 +41,146 @@ export function WechatAccountButton({ returnTo }: { returnTo?: string }) {
});
}, []);
useEffect(() => {
if (!debugOpen) return;
let cancelled = false;
setRouteLoading(true);
setRouteError(null);
void getWechatAgentRouteStatus()
.then((status) => {
if (cancelled) return;
setRoute(status);
})
.catch((err) => {
if (cancelled) return;
setRouteError(err instanceof Error ? err.message : '获取公众号 Agent 状态失败');
})
.finally(() => {
if (!cancelled) setRouteLoading(false);
});
return () => {
cancelled = true;
};
}, [debugOpen]);
if (bound === null) return null;
if (bound) {
return (
<span className="ghost-btn wechat-account-bound" title="已绑定微信">
微信已绑{nickname ? ` · ${nickname}` : ''}
</span>
<>
<button
type="button"
className="ghost-btn wechat-account-bound wechat-account-debug-trigger"
title="查看微信绑定与公众号 Agent 调试信息"
onClick={() => {
onBeforeAction?.();
setDebugOpen(true);
}}
>
微信已绑{nickname ? ` · ${nickname}` : ''}
</button>
{debugOpen && (
<div className="wechat-debug-overlay" onClick={() => setDebugOpen(false)}>
<section
className="wechat-debug-card"
onClick={(event) => event.stopPropagation()}
aria-modal="true"
role="dialog"
aria-label="公众号 Agent 调试"
>
<div className="wechat-debug-head">
<div>
<p className="wechat-debug-eyebrow">Wechat Agent</p>
<h3>公众号调试</h3>
</div>
<button
type="button"
className="wechat-debug-close"
aria-label="关闭"
onClick={() => setDebugOpen(false)}
>
×
</button>
</div>
<div className="wechat-debug-grid">
<div className="wechat-debug-item">
<span>微信绑定</span>
<strong>{nickname ? `已绑定 · ${nickname}` : '已绑定'}</strong>
</div>
<div className="wechat-debug-item">
<span>公众号通道</span>
<strong>
{route?.enabled ? '已启用' : routeLoading ? '读取中…' : '未启用'}
</strong>
</div>
<div className="wechat-debug-item">
<span>OpenID</span>
<code>{route?.openid ?? '暂无'}</code>
</div>
<div className="wechat-debug-item">
<span>Agent Session</span>
<code>{route?.agentSessionId ?? '暂无'}</code>
</div>
<div className="wechat-debug-item">
<span>路由状态</span>
<strong>{route?.routeStatus ?? '暂无'}</strong>
</div>
<div className="wechat-debug-item">
<span>最近刷新</span>
<strong>{formatRouteTime(route?.updatedAt ?? null)}</strong>
</div>
</div>
{routeLoading && <p className="wechat-debug-hint">正在读取公众号 Agent 路由状态…</p>}
{routeError && <p className="wechat-debug-error">{routeError}</p>}
{!routeLoading && !routeError && route && !route.enabled && (
<p className="wechat-debug-hint">
当前环境未启用公众号消息转发，所以不会影响现有 H5 聊天。
</p>
)}
<div className="wechat-debug-actions">
<button
type="button"
className="ghost-btn"
disabled={routeLoading || resetting || !route?.enabled}
onClick={() => {
setRouteLoading(true);
setRouteError(null);
void getWechatAgentRouteStatus()
.then((status) => setRoute(status))
.catch((err) =>
setRouteError(err instanceof Error ? err.message : '刷新路由状态失败'),
)
.finally(() => setRouteLoading(false));
}}
>
刷新状态
</button>
<button
type="button"
className="ghost-btn"
disabled={routeLoading || resetting || !route?.enabled}
onClick={() => {
setResetting(true);
setRouteError(null);
void resetWechatAgentRoute()
.then((status) => setRoute(status))
.catch((err) =>
setRouteError(err instanceof Error ? err.message : '重建公众号 Agent 路由失败'),
)
.finally(() => setResetting(false));
}}
>
{resetting ? '重建中…' : '一键重建'}
</button>
</div>
</section>
</div>
)}
</>
);
}
@@ -32,6 +189,7 @@ export function WechatAccountButton({ returnTo }: { returnTo?: string }) {
type="button"
className="ghost-btn"
onClick={() => {
onBeforeAction?.();
window.location.href = buildWechatAuthorizeUrl({
intent: 'bind',
returnTo: returnTo ?? window.location.pathname,