mirror of
https://wget.la/https://github.com/Wxw-Gu/WechatExplorer
synced 2026-08-21 21:47:00 +08:00
feat: 完成 UI 基础层与核心页面迁移
This commit is contained in:
Wxw-Gu
@@ -1,6 +1,7 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { Message, Contact } from '../../../shared/types'
|
||||
import { ChatHeader } from './chat/ChatHeader'
|
||||
import { ChatImageViewer } from './chat/ChatImageViewer'
|
||||
import { ChatStatusBar } from './chat/ChatStatusBar'
|
||||
import { DataTrustBar } from './chat/DataTrustBar'
|
||||
import { EmptyConversationState } from './chat/EmptyConversationState'
|
||||
@@ -46,13 +47,6 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
|
||||
const messageListRef = useRef<HTMLDivElement>(null)
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null)
|
||||
const [imageScale, setImageScale] = useState(0.75)
|
||||
const [imageRotation, setImageRotation] = useState(0)
|
||||
const [imageOffset, setImageOffset] = useState({ x: 0, y: 0 })
|
||||
const imageViewerStageRef = useRef<HTMLDivElement>(null)
|
||||
const imageDragRef = useRef<{ x: number; y: number; offsetX: number; offsetY: number } | null>(
|
||||
null
|
||||
)
|
||||
const [showAvatar, setShowAvatar] = useState(true)
|
||||
const [isAtLatest, setIsAtLatest] = useState(true)
|
||||
const [isReloadingAvatars, setIsReloadingAvatars] = useState(false)
|
||||
@@ -101,53 +95,10 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
|
||||
|
||||
const openImagePreview = (imageUrl: string): void => {
|
||||
setPreviewImage(imageUrl)
|
||||
setImageScale(1)
|
||||
setImageRotation(0)
|
||||
setImageOffset({ x: 0, y: 0 })
|
||||
}
|
||||
|
||||
const closeImagePreview = (): void => {
|
||||
setPreviewImage(null)
|
||||
imageDragRef.current = null
|
||||
}
|
||||
|
||||
const zoomImage = (delta: number): void => {
|
||||
setImageScale((prev) => Math.min(8, Math.max(0.1, Number((prev + delta).toFixed(2)))))
|
||||
}
|
||||
|
||||
const resetImageTransform = (): void => {
|
||||
setImageScale(1)
|
||||
setImageRotation(0)
|
||||
setImageOffset({ x: 0, y: 0 })
|
||||
}
|
||||
|
||||
const handleViewerWheel = (event: React.WheelEvent): void => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
zoomImage(event.deltaY > 0 ? -0.1 : 0.1)
|
||||
}
|
||||
|
||||
const handleViewerMouseDown = (event: React.MouseEvent): void => {
|
||||
event.preventDefault()
|
||||
imageDragRef.current = {
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
offsetX: imageOffset.x,
|
||||
offsetY: imageOffset.y
|
||||
}
|
||||
}
|
||||
|
||||
const handleViewerMouseMove = (event: React.MouseEvent): void => {
|
||||
if (!imageDragRef.current) return
|
||||
const drag = imageDragRef.current
|
||||
setImageOffset({
|
||||
x: drag.offsetX + event.clientX - drag.x,
|
||||
y: drag.offsetY + event.clientY - drag.y
|
||||
})
|
||||
}
|
||||
|
||||
const handleViewerMouseUp = (): void => {
|
||||
imageDragRef.current = null
|
||||
}
|
||||
|
||||
const handleReloadAvatars = async (): Promise<void> => {
|
||||
@@ -160,24 +111,6 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!previewImage) return
|
||||
|
||||
const previousOverflow = document.body.style.overflow
|
||||
document.body.style.overflow = 'hidden'
|
||||
|
||||
const stage = imageViewerStageRef.current
|
||||
const preventBackgroundWheel = (event: WheelEvent): void => {
|
||||
event.preventDefault()
|
||||
}
|
||||
stage?.addEventListener('wheel', preventBackgroundWheel, { passive: false })
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = previousOverflow
|
||||
stage?.removeEventListener('wheel', preventBackgroundWheel)
|
||||
}
|
||||
}, [previewImage])
|
||||
|
||||
const filteredMessages = React.useMemo(() => {
|
||||
return messages.filter((msg) => {
|
||||
const filterTypes = (import.meta.env.VITE_FILTER_MSG_TYPES || '')
|
||||
@@ -241,55 +174,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
{previewImage && (
|
||||
<div className="image-viewer-overlay" onClick={closeImagePreview}>
|
||||
<div className="image-viewer-window" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="image-viewer-titlebar">
|
||||
<div className="image-viewer-tools">
|
||||
<span className="image-viewer-title">图片查看</span>
|
||||
<button onClick={() => zoomImage(-0.1)} title="缩小">
|
||||
−
|
||||
</button>
|
||||
<span className="image-viewer-zoom">{Math.round(imageScale * 100)}%</span>
|
||||
<button onClick={() => zoomImage(0.1)} title="放大">
|
||||
+
|
||||
</button>
|
||||
<span className="image-viewer-divider" />
|
||||
<button onClick={() => setImageRotation((prev) => prev - 90)} title="左旋转">
|
||||
↶
|
||||
</button>
|
||||
<button onClick={() => setImageRotation((prev) => prev + 90)} title="右旋转">
|
||||
↷
|
||||
</button>
|
||||
<button onClick={resetImageTransform} title="重置">
|
||||
⟲
|
||||
</button>
|
||||
</div>
|
||||
<button className="image-viewer-close" onClick={closeImagePreview} aria-label="关闭">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
ref={imageViewerStageRef}
|
||||
className="image-viewer-stage"
|
||||
onWheel={handleViewerWheel}
|
||||
onMouseDown={handleViewerMouseDown}
|
||||
onMouseMove={handleViewerMouseMove}
|
||||
onMouseUp={handleViewerMouseUp}
|
||||
onMouseLeave={handleViewerMouseUp}
|
||||
>
|
||||
<img
|
||||
src={previewImage}
|
||||
alt="图片预览"
|
||||
draggable={false}
|
||||
style={{
|
||||
transform: `translate(${imageOffset.x}px, ${imageOffset.y}px) scale(${imageScale}) rotate(${imageRotation}deg)`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{previewImage && <ChatImageViewer imageUrl={previewImage} onClose={closeImagePreview} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from 'react'
|
||||
import React, { useRef } from 'react'
|
||||
import { Button, Dialog, DialogContent, DialogDescription, DialogTitle } from './ui'
|
||||
|
||||
interface FirstUseWelcomeProps {
|
||||
onDismiss: () => void
|
||||
@@ -16,63 +17,81 @@ export function FirstUseWelcome({
|
||||
onOpenReport,
|
||||
onOpenAISettings
|
||||
}: FirstUseWelcomeProps): React.ReactElement {
|
||||
const restoreFocusRef = useRef<HTMLElement | null>(null)
|
||||
|
||||
const dismiss = (): void => {
|
||||
const restoreFocus = restoreFocusRef.current
|
||||
restoreFocusRef.current = null
|
||||
onDismiss()
|
||||
queueMicrotask(() => restoreFocus?.focus())
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="first-use-welcome-overlay" role="presentation">
|
||||
<section
|
||||
className="first-use-welcome"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="first-use-welcome-title"
|
||||
<Dialog open onOpenChange={(open) => !open && dismiss()}>
|
||||
<DialogContent
|
||||
className="max-h-[calc(100vh-2rem)] max-w-[520px] overflow-y-auto p-6 sm:p-8"
|
||||
onOpenAutoFocus={() => {
|
||||
restoreFocusRef.current =
|
||||
document.activeElement instanceof HTMLElement ? document.activeElement : null
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="first-use-welcome-close"
|
||||
onClick={onDismiss}
|
||||
aria-label="关闭欢迎提示"
|
||||
<div
|
||||
className="mb-4 grid h-10 w-10 place-items-center rounded-md bg-primary text-xl text-primary-foreground shadow-surface"
|
||||
aria-hidden="true"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<div className="first-use-welcome-mark" aria-hidden="true">
|
||||
✦
|
||||
</div>
|
||||
<p className="first-use-welcome-eyebrow">微信已连接</p>
|
||||
<h2 id="first-use-welcome-title">开始探索你的微信</h2>
|
||||
<p className="first-use-welcome-lead">
|
||||
<p className="text-xs font-semibold uppercase text-primary">微信已连接</p>
|
||||
<DialogTitle className="mt-1 text-2xl">开始探索你的微信</DialogTitle>
|
||||
<DialogDescription className="mt-2 text-sm leading-relaxed">
|
||||
最关键的一步已经完成。现在，让 AI 帮你看看最近的聊天都发生了什么。
|
||||
</p>
|
||||
</DialogDescription>
|
||||
|
||||
<button type="button" className="first-use-welcome-feature" onClick={onOpenReport}>
|
||||
<span className="first-use-welcome-feature-icon" aria-hidden="true">
|
||||
<Button
|
||||
className="mt-5 h-auto w-full justify-start whitespace-normal p-4 text-left"
|
||||
onClick={onOpenReport}
|
||||
>
|
||||
<span
|
||||
className="grid h-9 w-9 shrink-0 place-items-center rounded-md bg-surface text-lg text-primary"
|
||||
aria-hidden="true"
|
||||
>
|
||||
✦
|
||||
</span>
|
||||
<span className="first-use-welcome-feature-copy">
|
||||
<strong>试试 AI 群聊日报</strong>
|
||||
<small>选择一个群聊，看看最近聊了什么</small>
|
||||
<span className="min-w-0 flex-1">
|
||||
<strong className="block text-sm">试试 AI 群聊日报</strong>
|
||||
<small className="mt-0.5 block text-xs text-primary-foreground/75">
|
||||
选择一个群聊，看看最近聊了什么
|
||||
</small>
|
||||
</span>
|
||||
<span className="first-use-welcome-feature-arrow" aria-hidden="true">
|
||||
<span className="shrink-0 text-xs" aria-hidden="true">
|
||||
立即体验 →
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<div className="first-use-welcome-secondary-actions">
|
||||
<button type="button" onClick={onDismiss}>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
<Button variant="ghost" size="sm" onClick={dismiss}>
|
||||
查看聊天记录
|
||||
</button>
|
||||
<button type="button" onClick={onOpenSearch}>
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={onOpenSearch}>
|
||||
问问你的微信
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="first-use-welcome-footer">
|
||||
<div className="mt-5 flex flex-col items-start gap-2 border-t border-border pt-4 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
|
||||
<span>还没有配置 AI？</span>
|
||||
<button type="button" onClick={onOpenAISettings}>
|
||||
<Button className="h-auto p-0 text-xs" variant="link" onClick={onOpenAISettings}>
|
||||
配置 AI 模型
|
||||
</button>
|
||||
<a href={GUIDE_URL} target="_blank" rel="noreferrer">
|
||||
</Button>
|
||||
<a
|
||||
className="text-primary hover:underline"
|
||||
href={GUIDE_URL}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
查看完整使用教程
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useCallback, useEffect, useRef } from 'react'
|
||||
import type { JSX, MouseEvent } from 'react'
|
||||
import type { JSX, KeyboardEvent, MouseEvent } from 'react'
|
||||
import { getCachedLoadedImage, requestImage } from './image-loader'
|
||||
|
||||
interface ImageBubbleProps {
|
||||
@@ -156,6 +156,12 @@ export function ImageBubble({
|
||||
if (imageUrl) onImageClick?.(imageUrl)
|
||||
}
|
||||
|
||||
const handlePreviewKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
|
||||
if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return
|
||||
event.preventDefault()
|
||||
void handleClick()
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div ref={containerRef} className="image-bubble image-loading" onClick={handleClick}>
|
||||
@@ -184,7 +190,14 @@ export function ImageBubble({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="image-bubble image-loaded" onClick={handleClick}>
|
||||
<div
|
||||
className="image-bubble image-loaded"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label="查看图片"
|
||||
onClick={handleClick}
|
||||
onKeyDown={handlePreviewKeyDown}
|
||||
>
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt="图片"
|
||||
|
||||
@@ -1,496 +0,0 @@
|
||||
// Legacy fallback: SETTINGS-01 moved the default entry to features/settings.
|
||||
// Keep this panel intact until its database-key, image-key, AI and API sections are migrated.
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { isWindows } from '../utils/runtime-environment'
|
||||
|
||||
interface SelfInfo {
|
||||
wxid: string
|
||||
nickname: string
|
||||
avatar?: string
|
||||
accountRoot: string
|
||||
}
|
||||
|
||||
interface AppSettings {
|
||||
dbRoot: string
|
||||
apiEnabled: boolean
|
||||
apiHost: string
|
||||
apiPort: number
|
||||
imageKeyRoot: string
|
||||
imageXorKey: string
|
||||
imageAesKey: string
|
||||
}
|
||||
|
||||
interface ApiState {
|
||||
running: boolean
|
||||
host: string
|
||||
port: number
|
||||
error?: string
|
||||
}
|
||||
|
||||
interface AiModelConfig {
|
||||
apiKey: string
|
||||
baseURL: string
|
||||
model: string
|
||||
}
|
||||
|
||||
interface SettingsPanelProps {
|
||||
open: boolean
|
||||
selfInfo: SelfInfo | null
|
||||
dbReady: boolean
|
||||
dbKey: string
|
||||
aiModelConfig: AiModelConfig
|
||||
onClose: () => void
|
||||
onDbKeyChange: (key: string) => void
|
||||
onAiModelConfigChange: (config: AiModelConfig) => void
|
||||
onSaveAiModelConfig: () => void
|
||||
onDbRootChanged: () => void
|
||||
}
|
||||
|
||||
const AI_MODEL_OPTIONS = [
|
||||
{ value: 'deepseek-chat', label: 'DeepSeek Chat' },
|
||||
{ value: 'gpt-4o', label: 'GPT-4o' },
|
||||
{ value: 'gpt-4o-mini', label: 'GPT-4o Mini' },
|
||||
{ value: 'gpt-4-turbo', label: 'GPT-4 Turbo' },
|
||||
{ value: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet' },
|
||||
{ value: 'moonshot-v1-8k', label: 'Moonshot V1' }
|
||||
]
|
||||
|
||||
export const SettingsPanel: React.FC<SettingsPanelProps> = ({
|
||||
open,
|
||||
selfInfo,
|
||||
dbReady,
|
||||
dbKey,
|
||||
aiModelConfig,
|
||||
onClose,
|
||||
onDbKeyChange,
|
||||
onAiModelConfigChange,
|
||||
onSaveAiModelConfig,
|
||||
onDbRootChanged
|
||||
}) => {
|
||||
const dbRootPlaceholder = isWindows
|
||||
? 'C:\\Users\\你\\Documents\\WeChat Files'
|
||||
: '~/Library/Containers/com.tencent.xinWeChat/Data/Documents/xwechat_files'
|
||||
const [settings, setSettings] = useState<AppSettings | null>(null)
|
||||
const [settingsPath, setSettingsPath] = useState('')
|
||||
const [apiState, setApiState] = useState<ApiState | null>(null)
|
||||
const [testStatus, setTestStatus] = useState<{
|
||||
kind: 'idle' | 'ok' | 'fail'
|
||||
message: string
|
||||
wxid?: string
|
||||
accountRoot?: string
|
||||
}>({ kind: 'idle', message: '' })
|
||||
const [reopenStatus, setReopenStatus] = useState<string>('')
|
||||
const [imageKeyStatus, setImageKeyStatus] = useState<{
|
||||
kind: 'idle' | 'ok' | 'fail'
|
||||
message: string
|
||||
}>({ kind: 'idle', message: '' })
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
void refresh()
|
||||
}, [open])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
return window.api.onImageKeyStatus(({ message }) => {
|
||||
setImageKeyStatus({ kind: 'idle', message })
|
||||
})
|
||||
}, [open])
|
||||
|
||||
async function refresh(): Promise<void> {
|
||||
const [{ settings, settingsPath }, api] = await Promise.all([
|
||||
window.api.getSettings(),
|
||||
window.api.apiStatus()
|
||||
])
|
||||
setSettings(settings)
|
||||
setSettingsPath(settingsPath)
|
||||
setApiState(api)
|
||||
}
|
||||
|
||||
if (!open) return null
|
||||
|
||||
async function handleSave(patch: Partial<AppSettings>): Promise<void> {
|
||||
if (!settings) return
|
||||
setBusy(true)
|
||||
const next = await window.api.setSettings(patch)
|
||||
setSettings(next.settings)
|
||||
setBusy(false)
|
||||
}
|
||||
|
||||
async function handleTest(): Promise<void> {
|
||||
setTestStatus({ kind: 'idle', message: '测试中...' })
|
||||
setBusy(true)
|
||||
try {
|
||||
const result = await window.api.testConnection(dbKey, settings?.dbRoot)
|
||||
if (result.success) {
|
||||
setTestStatus({
|
||||
kind: 'ok',
|
||||
message: '连接成功',
|
||||
wxid: result.wxid,
|
||||
accountRoot: result.accountRoot
|
||||
})
|
||||
if (result.accountRoot && settings && result.accountRoot !== settings.dbRoot) {
|
||||
const next = await window.api.setSettings({ dbRoot: result.accountRoot })
|
||||
setSettings(next.settings)
|
||||
}
|
||||
} else {
|
||||
setTestStatus({ kind: 'fail', message: result.error || '连接失败' })
|
||||
}
|
||||
} catch (error) {
|
||||
setTestStatus({
|
||||
kind: 'fail',
|
||||
message: error instanceof Error ? error.message : String(error)
|
||||
})
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleReopen(): Promise<void> {
|
||||
if (!settings) return
|
||||
setBusy(true)
|
||||
setReopenStatus('重新初始化中...')
|
||||
try {
|
||||
const result = await window.api.reopenWithRoot(settings.dbRoot)
|
||||
if (result.success) {
|
||||
setReopenStatus(`已重新打开:${result.info?.wxid || '未知'}`)
|
||||
onDbRootChanged()
|
||||
} else {
|
||||
setReopenStatus(result.error || '重新打开失败')
|
||||
}
|
||||
} catch (error) {
|
||||
setReopenStatus(error instanceof Error ? error.message : String(error))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleApiToggle(enabled: boolean): Promise<void> {
|
||||
setBusy(true)
|
||||
await handleSave({ apiEnabled: enabled })
|
||||
const state = await window.api.apiToggle(enabled)
|
||||
setApiState(state)
|
||||
setBusy(false)
|
||||
}
|
||||
|
||||
async function handleApiRestart(): Promise<void> {
|
||||
if (!settings) return
|
||||
setBusy(true)
|
||||
await window.api.apiStop()
|
||||
const state = await window.api.apiStart(settings.apiHost, settings.apiPort)
|
||||
setApiState(state)
|
||||
setBusy(false)
|
||||
}
|
||||
|
||||
async function handleAutoGetImageKey(): Promise<void> {
|
||||
if (!settings) return
|
||||
setBusy(true)
|
||||
setImageKeyStatus({ kind: 'idle', message: '正在扫描微信内存获取图片密钥...' })
|
||||
try {
|
||||
const result = await window.api.autoGetImageKey()
|
||||
if (!result.success || !result.aesKey) {
|
||||
setImageKeyStatus({ kind: 'fail', message: result.error || '图片密钥获取失败' })
|
||||
return
|
||||
}
|
||||
const imageXorKey =
|
||||
result.imageXorKey ||
|
||||
(typeof result.xorKey === 'number'
|
||||
? `0x${result.xorKey.toString(16).toUpperCase().padStart(2, '0')}`
|
||||
: settings.imageXorKey)
|
||||
const imageAesKey = result.imageAesKey || result.aesKey
|
||||
setSettings(result.settings || { ...settings, imageXorKey, imageAesKey })
|
||||
setImageKeyStatus({
|
||||
kind: 'ok',
|
||||
message: result.verified ? '图片密钥已获取并校验通过' : '图片密钥已获取，未完成模板校验'
|
||||
})
|
||||
} catch (error) {
|
||||
setImageKeyStatus({
|
||||
kind: 'fail',
|
||||
message: error instanceof Error ? error.message : String(error)
|
||||
})
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="settings-overlay" onClick={onClose}>
|
||||
<div className="settings-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="settings-header">
|
||||
<h2>设置</h2>
|
||||
<button className="settings-close" onClick={onClose} title="关闭">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="settings-body">
|
||||
{/* 自我信息卡片 */}
|
||||
<section className="settings-section">
|
||||
<div className="settings-section-title">账号信息</div>
|
||||
{dbReady && selfInfo ? (
|
||||
<div className="settings-self">
|
||||
<div className="settings-self-avatar">
|
||||
{selfInfo.avatar ? (
|
||||
<img
|
||||
src={selfInfo.avatar}
|
||||
alt={selfInfo.nickname}
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
) : (
|
||||
(selfInfo.nickname || selfInfo.wxid || '?').charAt(0)
|
||||
)}
|
||||
</div>
|
||||
<div className="settings-self-info">
|
||||
<div className="settings-self-nickname">{selfInfo.nickname}</div>
|
||||
<div className="settings-self-wxid">{selfInfo.wxid}</div>
|
||||
<div className="settings-self-account">{selfInfo.accountRoot}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="settings-self-empty">尚未连接数据库</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* 测试连接 */}
|
||||
<section className="settings-section">
|
||||
<div className="settings-section-title">连接测试</div>
|
||||
<div className="settings-row">
|
||||
<button
|
||||
className="settings-btn settings-btn-primary"
|
||||
onClick={handleTest}
|
||||
disabled={busy || !dbKey}
|
||||
>
|
||||
测试连接
|
||||
</button>
|
||||
{testStatus.kind !== 'idle' && (
|
||||
<span className={`settings-status ${testStatus.kind}`}>
|
||||
{testStatus.kind === 'ok' ? '✓' : '✗'} {testStatus.message}
|
||||
{testStatus.wxid ? ` · ${testStatus.wxid}` : ''}
|
||||
{testStatus.accountRoot ? ` · ${testStatus.accountRoot}` : ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="settings-hint">
|
||||
使用当前密钥 + 下方配置的根目录尝试打开数据库,只校验不持久化。
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 解密密钥 */}
|
||||
<section className="settings-section">
|
||||
<div className="settings-section-title">解密密钥</div>
|
||||
<div className="settings-row">
|
||||
<input
|
||||
type="text"
|
||||
className="settings-input"
|
||||
value={dbKey}
|
||||
onChange={(e) => onDbKeyChange(e.target.value)}
|
||||
placeholder="64 位 hex 密钥,如 0x..."
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-hint">
|
||||
密钥通过系统 safeStorage 加密保存在本机，不会上传任何服务器。
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 图片解密密钥 */}
|
||||
<section className="settings-section">
|
||||
<div className="settings-section-title">图片解密密钥</div>
|
||||
<div className="settings-row">
|
||||
<input
|
||||
type="text"
|
||||
className="settings-input"
|
||||
value={settings?.imageKeyRoot || settings?.dbRoot || ''}
|
||||
onChange={(e) =>
|
||||
setSettings(settings ? { ...settings, imageKeyRoot: e.target.value } : null)
|
||||
}
|
||||
onBlur={(e) => handleSave({ imageKeyRoot: e.target.value })}
|
||||
placeholder={dbRootPlaceholder}
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-row">
|
||||
<input
|
||||
type="text"
|
||||
className="settings-input settings-input-quarter"
|
||||
value={settings?.imageXorKey ?? ''}
|
||||
onChange={(e) =>
|
||||
setSettings(settings ? { ...settings, imageXorKey: e.target.value } : null)
|
||||
}
|
||||
onBlur={(e) => handleSave({ imageXorKey: e.target.value })}
|
||||
placeholder="XOR Key，如 0x40"
|
||||
spellCheck={false}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="settings-input"
|
||||
value={settings?.imageAesKey ?? ''}
|
||||
onChange={(e) =>
|
||||
setSettings(settings ? { ...settings, imageAesKey: e.target.value } : null)
|
||||
}
|
||||
onBlur={(e) => handleSave({ imageAesKey: e.target.value })}
|
||||
placeholder="AES Key，16 位字符"
|
||||
spellCheck={false}
|
||||
/>
|
||||
<button className="settings-btn" onClick={handleAutoGetImageKey} disabled={busy}>
|
||||
内存扫描图片密钥
|
||||
</button>
|
||||
</div>
|
||||
{imageKeyStatus.message && (
|
||||
<div className={`settings-status ${imageKeyStatus.kind}`}>
|
||||
{imageKeyStatus.kind === 'ok' ? '✓ ' : imageKeyStatus.kind === 'fail' ? '✗ ' : ''}
|
||||
{imageKeyStatus.message}
|
||||
</div>
|
||||
)}
|
||||
<div className="settings-hint">
|
||||
目录默认使用数据库根目录，用于查找图片模板文件。Windows
|
||||
会直接扫描微信内存，请先在微信中打开 2-3 张图片大图。
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 数据库根目录 */}
|
||||
<section className="settings-section">
|
||||
<div className="settings-section-title">数据库根目录</div>
|
||||
<div className="settings-row">
|
||||
<input
|
||||
type="text"
|
||||
className="settings-input"
|
||||
value={settings?.dbRoot ?? ''}
|
||||
onChange={(e) =>
|
||||
setSettings(settings ? { ...settings, dbRoot: e.target.value } : null)
|
||||
}
|
||||
onBlur={(e) => handleSave({ dbRoot: e.target.value })}
|
||||
placeholder={dbRootPlaceholder}
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-row">
|
||||
<button className="settings-btn" onClick={handleReopen} disabled={busy || !dbReady}>
|
||||
应用并重新初始化
|
||||
</button>
|
||||
{reopenStatus && <span className="settings-status">{reopenStatus}</span>}
|
||||
</div>
|
||||
<div className="settings-hint">
|
||||
可填写微信数据总目录或具体账号目录。Windows 通常是 Documents\WeChat Files，macOS
|
||||
通常是 xwechat_files；程序会自动选择包含 db_storage/session.db 的账号目录。
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="settings-section">
|
||||
<div className="settings-section-title">AI 模型配置</div>
|
||||
<div className="settings-row">
|
||||
<select
|
||||
className="settings-input settings-input-half"
|
||||
value={aiModelConfig.model}
|
||||
onChange={(event) =>
|
||||
onAiModelConfigChange({ ...aiModelConfig, model: event.target.value })
|
||||
}
|
||||
>
|
||||
{AI_MODEL_OPTIONS.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button className="settings-btn" onClick={onSaveAiModelConfig}>
|
||||
保存 AI 配置
|
||||
</button>
|
||||
</div>
|
||||
<div className="settings-row">
|
||||
<input
|
||||
type="text"
|
||||
className="settings-input"
|
||||
value={aiModelConfig.baseURL}
|
||||
onChange={(event) =>
|
||||
onAiModelConfigChange({ ...aiModelConfig, baseURL: event.target.value })
|
||||
}
|
||||
placeholder="https://api.deepseek.com"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-row">
|
||||
<input
|
||||
type="password"
|
||||
className="settings-input"
|
||||
value={aiModelConfig.apiKey}
|
||||
onChange={(event) =>
|
||||
onAiModelConfigChange({ ...aiModelConfig, apiKey: event.target.value })
|
||||
}
|
||||
placeholder="API Key"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="settings-hint">
|
||||
所选内容会发送至你配置的模型服务进行处理。配置沿用原有本地 localStorage 保存方式。
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* API 服务 */}
|
||||
<section className="settings-section">
|
||||
<div className="settings-section-title">本地 HTTP API</div>
|
||||
<div className="settings-row">
|
||||
<label className="settings-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings?.apiEnabled ?? false}
|
||||
onChange={(e) => handleApiToggle(e.target.checked)}
|
||||
disabled={busy}
|
||||
/>
|
||||
<span>启用 API 服务(127.0.0.1:6131)</span>
|
||||
</label>
|
||||
{apiState && (
|
||||
<span className={`settings-status ${apiState.running ? 'ok' : 'fail'}`}>
|
||||
{apiState.running ? '运行中' : '已停止'}
|
||||
{apiState.error ? ` · ${apiState.error}` : ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="settings-row">
|
||||
<input
|
||||
type="text"
|
||||
className="settings-input settings-input-half"
|
||||
value={settings?.apiHost ?? ''}
|
||||
onChange={(e) =>
|
||||
setSettings(settings ? { ...settings, apiHost: e.target.value } : null)
|
||||
}
|
||||
onBlur={(e) => handleSave({ apiHost: e.target.value })}
|
||||
placeholder="host"
|
||||
spellCheck={false}
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
className="settings-input settings-input-quarter"
|
||||
value={settings?.apiPort ?? 6131}
|
||||
onChange={(e) =>
|
||||
setSettings(
|
||||
settings ? { ...settings, apiPort: Number(e.target.value) || 6131 } : null
|
||||
)
|
||||
}
|
||||
onBlur={(e) => handleSave({ apiPort: Number(e.target.value) || 6131 })}
|
||||
placeholder="port"
|
||||
/>
|
||||
<button className="settings-btn" onClick={handleApiRestart} disabled={busy}>
|
||||
重启 API
|
||||
</button>
|
||||
</div>
|
||||
<div className="settings-hint">
|
||||
API 默认仅监听本机，并通过 Bearer Token 保护数据接口。Token 请在 API Center
|
||||
中显示或复制。关闭后 Claude / Codex 等客户端无法读取聊天数据。
|
||||
<br />
|
||||
配置文档：<code>docs/skill/tracememo-reader/SKILL.md</code>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 配置文件位置 */}
|
||||
<section className="settings-section">
|
||||
<div className="settings-section-title">配置文件</div>
|
||||
<div className="settings-row">
|
||||
<code className="settings-path">{settingsPath}</code>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { Contact } from '../../../../shared/types'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui'
|
||||
import { ConversationContentSearch } from './ConversationContentSearch'
|
||||
import { AiIcon, MoreIcon, RefreshIcon, SearchIcon, SendIcon } from './icons'
|
||||
import { supportsPersonalWechatSend } from '../../utils/runtime-environment'
|
||||
@@ -32,21 +33,10 @@ export function ChatHeader({
|
||||
onOpenAiSettings
|
||||
}: ChatHeaderProps): React.ReactElement {
|
||||
const [searchOpen, setSearchOpen] = useState(Boolean(contentFilter))
|
||||
const [moreOpen, setMoreOpen] = useState(false)
|
||||
const moreRef = useRef<HTMLDivElement>(null)
|
||||
const displayName = contact.m_nsNickName || contact.m_nsUsrName || '未命名会话'
|
||||
const typeLabel = isGroupChat ? '群聊' : '联系人'
|
||||
const visibleCount = contentFilter ? filteredCount : loadedCount
|
||||
|
||||
useEffect(() => {
|
||||
if (!moreOpen) return
|
||||
const handlePointerDown = (event: PointerEvent): void => {
|
||||
if (!moreRef.current?.contains(event.target as Node)) setMoreOpen(false)
|
||||
}
|
||||
window.addEventListener('pointerdown', handlePointerDown)
|
||||
return () => window.removeEventListener('pointerdown', handlePointerDown)
|
||||
}, [moreOpen])
|
||||
|
||||
const handleCloseSearch = (): void => {
|
||||
onContentFilterChange('')
|
||||
setSearchOpen(false)
|
||||
@@ -91,29 +81,16 @@ export function ChatHeader({
|
||||
<button type="button" className="chat-icon-button" onClick={onRefresh} title="刷新聊天记录">
|
||||
<RefreshIcon />
|
||||
</button>
|
||||
<div className="chat-menu" ref={moreRef}>
|
||||
<button
|
||||
type="button"
|
||||
className="chat-icon-button"
|
||||
onClick={() => setMoreOpen((current) => !current)}
|
||||
title="更多"
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button type="button" className="chat-icon-button" title="更多">
|
||||
<MoreIcon />
|
||||
</button>
|
||||
{moreOpen && (
|
||||
<div className="chat-dropdown-menu right">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onRefreshData?.()
|
||||
setMoreOpen(false)
|
||||
}}
|
||||
>
|
||||
刷新数据
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onSelect={() => onRefreshData?.()}>刷新数据</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<span
|
||||
className="chat-tool-button-wrapper"
|
||||
title={supportsPersonalWechatSend ? '发送消息' : '仅支持 macOS'}
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
import { useRef, useState } from 'react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Separator
|
||||
} from '../ui'
|
||||
|
||||
interface ChatImageViewerProps {
|
||||
imageUrl: string
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function ChatImageViewer({ imageUrl, onClose }: ChatImageViewerProps): React.ReactElement {
|
||||
const [scale, setScale] = useState(1)
|
||||
const [rotation, setRotation] = useState(0)
|
||||
const [offset, setOffset] = useState({ x: 0, y: 0 })
|
||||
const dragRef = useRef<{ x: number; y: number; offsetX: number; offsetY: number } | null>(null)
|
||||
const contentRef = useRef<HTMLDivElement | null>(null)
|
||||
const restoreFocusRef = useRef<HTMLElement | null>(null)
|
||||
const closingRef = useRef(false)
|
||||
|
||||
const closeViewer = (): void => {
|
||||
if (closingRef.current) return
|
||||
closingRef.current = true
|
||||
const restoreFocus = restoreFocusRef.current
|
||||
restoreFocusRef.current = null
|
||||
onClose()
|
||||
queueMicrotask(() => restoreFocus?.focus())
|
||||
}
|
||||
|
||||
const zoom = (delta: number): void => {
|
||||
setScale((current) => Math.min(8, Math.max(0.1, Number((current + delta).toFixed(2)))))
|
||||
}
|
||||
|
||||
const reset = (): void => {
|
||||
setScale(1)
|
||||
setRotation(0)
|
||||
setOffset({ x: 0, y: 0 })
|
||||
}
|
||||
|
||||
const handleMouseDown = (event: React.MouseEvent): void => {
|
||||
event.preventDefault()
|
||||
dragRef.current = {
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
offsetX: offset.x,
|
||||
offsetY: offset.y
|
||||
}
|
||||
}
|
||||
|
||||
const handleMouseMove = (event: React.MouseEvent): void => {
|
||||
if (!dragRef.current) return
|
||||
const drag = dragRef.current
|
||||
setOffset({
|
||||
x: drag.offsetX + event.clientX - drag.x,
|
||||
y: drag.offsetY + event.clientY - drag.y
|
||||
})
|
||||
}
|
||||
|
||||
const stopDragging = (): void => {
|
||||
dragRef.current = null
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open onOpenChange={(open) => !open && closeViewer()}>
|
||||
<DialogContent
|
||||
ref={contentRef}
|
||||
className="h-[min(900px,calc(100vh-2rem))] max-w-[min(1280px,calc(100vw-2rem))] grid-rows-[48px_minmax(0,1fr)] gap-0 overflow-hidden rounded-lg bg-muted p-0"
|
||||
onOpenAutoFocus={(event) => {
|
||||
restoreFocusRef.current =
|
||||
document.activeElement instanceof HTMLElement ? document.activeElement : null
|
||||
event.preventDefault()
|
||||
contentRef.current?.focus()
|
||||
}}
|
||||
>
|
||||
<DialogHeader className="flex-row items-center space-y-0 border-b border-border bg-surface/90 px-4 pr-12">
|
||||
<DialogTitle className="mr-2 shrink-0 text-sm font-medium tracking-normal">
|
||||
图片查看
|
||||
</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
可缩放、旋转和拖动查看当前聊天图片。
|
||||
</DialogDescription>
|
||||
<div className="flex min-w-0 items-center gap-1">
|
||||
<IconButton
|
||||
label="缩小"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 text-lg"
|
||||
onClick={() => zoom(-0.1)}
|
||||
>
|
||||
<span aria-hidden>−</span>
|
||||
</IconButton>
|
||||
<span className="w-12 shrink-0 text-center text-xs tabular-nums text-muted-foreground">
|
||||
{Math.round(scale * 100)}%
|
||||
</span>
|
||||
<IconButton
|
||||
label="放大"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 text-lg"
|
||||
onClick={() => zoom(0.1)}
|
||||
>
|
||||
<span aria-hidden>+</span>
|
||||
</IconButton>
|
||||
<Separator orientation="vertical" className="mx-1 h-5" />
|
||||
<IconButton
|
||||
label="左旋转"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 text-lg"
|
||||
onClick={() => setRotation((current) => current - 90)}
|
||||
>
|
||||
<span aria-hidden>↶</span>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
label="右旋转"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 text-lg"
|
||||
onClick={() => setRotation((current) => current + 90)}
|
||||
>
|
||||
<span aria-hidden>↷</span>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
label="重置图片"
|
||||
tooltip="重置"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 text-lg"
|
||||
onClick={reset}
|
||||
>
|
||||
<span aria-hidden>⟲</span>
|
||||
</IconButton>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
<div
|
||||
className="flex min-h-0 cursor-grab select-none items-center justify-center overflow-hidden overscroll-contain bg-muted p-7 active:cursor-grabbing"
|
||||
aria-label="图片查看区域"
|
||||
onWheel={(event) => {
|
||||
event.preventDefault()
|
||||
zoom(event.deltaY > 0 ? -0.1 : 0.1)
|
||||
}}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={stopDragging}
|
||||
onMouseLeave={stopDragging}
|
||||
>
|
||||
<img
|
||||
className="pointer-events-none h-auto w-auto max-w-none select-none object-contain shadow-floating transition-transform duration-fast ease-out"
|
||||
src={imageUrl}
|
||||
alt="图片预览"
|
||||
draggable={false}
|
||||
style={{
|
||||
transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale}) rotate(${rotation}deg)`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import React from 'react'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui'
|
||||
import { ArrowDownIcon, ExportIcon } from './icons'
|
||||
|
||||
export type ExportRange = number | 'all'
|
||||
@@ -18,47 +19,30 @@ const EXPORT_OPTIONS: { label: string; value: ExportRange }[] = [
|
||||
]
|
||||
|
||||
export function ExportMenu({ disabled, onExport }: ExportMenuProps): React.ReactElement {
|
||||
const [open, setOpen] = useState(false)
|
||||
const menuRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const handlePointerDown = (event: PointerEvent): void => {
|
||||
if (!menuRef.current?.contains(event.target as Node)) setOpen(false)
|
||||
}
|
||||
window.addEventListener('pointerdown', handlePointerDown)
|
||||
return () => window.removeEventListener('pointerdown', handlePointerDown)
|
||||
}, [open])
|
||||
|
||||
return (
|
||||
<div className="chat-menu" ref={menuRef}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="chat-tool-button"
|
||||
disabled={disabled}
|
||||
onClick={() => setOpen((current) => !current)}
|
||||
title={disabled ? '没有可导出的消息' : '导出聊天记录'}
|
||||
>
|
||||
<ExportIcon />
|
||||
<span>导出</span>
|
||||
<ArrowDownIcon />
|
||||
</button>
|
||||
{open && (
|
||||
<div className="chat-dropdown-menu">
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
{EXPORT_OPTIONS.map((option, index) => (
|
||||
<button
|
||||
<DropdownMenuItem
|
||||
key={`${option.label}-${index}`}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onExport(option.value)
|
||||
setOpen(false)
|
||||
}}
|
||||
onSelect={() => onExport(option.value)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import type { Contact } from '../../../../shared/types'
|
||||
import type { PersonalWechatSenderStatus } from '../../../../shared/personal-wechat'
|
||||
import type { TextToSpeechSettings, TextToSpeechVoice } from '../../../../shared/text-to-speech'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui'
|
||||
|
||||
type SendMode = 'image' | 'voice'
|
||||
type VoiceSource = 'generated' | 'file'
|
||||
@@ -82,6 +83,8 @@ export function PersonalWechatSendDialog({
|
||||
const [result, setResult] = useState<{ success: boolean; message: string } | null>(null)
|
||||
const generatedVoiceRef = useRef<GeneratedVoice | null>(null)
|
||||
const generatedAudioRef = useRef<HTMLAudioElement | null>(null)
|
||||
const restoreFocusRef = useRef<HTMLElement | null>(null)
|
||||
const closingRef = useRef(false)
|
||||
const displayName = contact.m_nsNickName || contact.m_nsUsrName || '未命名会话'
|
||||
const targetId = contact.m_nsUsrName
|
||||
const selectedTypeReady = mode === 'voice' ? status?.canSendVoice : status?.canSendImage
|
||||
@@ -122,9 +125,13 @@ export function PersonalWechatSendDialog({
|
||||
}, [])
|
||||
|
||||
const handleClose = useCallback((): void => {
|
||||
if (isBusy) return
|
||||
if (isBusy || closingRef.current) return
|
||||
closingRef.current = true
|
||||
const restoreFocus = restoreFocusRef.current
|
||||
restoreFocusRef.current = null
|
||||
clearGeneratedVoice()
|
||||
onClose()
|
||||
queueMicrotask(() => restoreFocus?.focus())
|
||||
}, [clearGeneratedVoice, isBusy, onClose])
|
||||
|
||||
const handleOpenTextToSpeechSettings = (showSupportedVersions = false): void => {
|
||||
@@ -212,14 +219,6 @@ export function PersonalWechatSendDialog({
|
||||
return () => audio?.pause()
|
||||
}, [generatedVoice])
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent): void => {
|
||||
if (event.key === 'Escape' && !isBusy) handleClose()
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}, [handleClose, isBusy])
|
||||
|
||||
const handleRebind = async (): Promise<void> => {
|
||||
if (isBusy) return
|
||||
setIsRebinding(true)
|
||||
@@ -392,23 +391,27 @@ export function PersonalWechatSendDialog({
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="personal-wechat-send-backdrop" role="presentation" onMouseDown={handleClose}>
|
||||
<section
|
||||
className="personal-wechat-send-dialog"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="personal-wechat-send-title"
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
<Dialog open onOpenChange={(open) => !open && handleClose()}>
|
||||
<DialogContent
|
||||
className="personal-wechat-send-dialog max-h-[calc(100vh-3rem)] max-w-[620px] gap-4 overflow-y-auto p-[22px]"
|
||||
onOpenAutoFocus={() => {
|
||||
restoreFocusRef.current =
|
||||
document.activeElement instanceof HTMLElement ? document.activeElement : null
|
||||
}}
|
||||
onEscapeKeyDown={(event) => isBusy && event.preventDefault()}
|
||||
onPointerDownOutside={(event) => isBusy && event.preventDefault()}
|
||||
>
|
||||
<header>
|
||||
<DialogHeader className="flex-row items-center justify-between space-y-0 pr-10">
|
||||
<div>
|
||||
<span className="personal-wechat-send-kicker">实验性功能</span>
|
||||
<h2 id="personal-wechat-send-title">个人微信测试发送</h2>
|
||||
<span className="text-[11px] font-bold tracking-normal text-primary">实验性功能</span>
|
||||
<DialogTitle className="mt-0.5 text-[19px] leading-[26px] tracking-normal">
|
||||
个人微信测试发送
|
||||
</DialogTitle>
|
||||
</div>
|
||||
<button type="button" className="personal-wechat-send-close" onClick={handleClose}>
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
<DialogDescription className="sr-only">
|
||||
向当前微信联系人或群聊测试发送图片和语音。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="personal-wechat-send-device-note" role="note">
|
||||
<span aria-hidden>i</span>
|
||||
@@ -676,7 +679,7 @@ export function PersonalWechatSendDialog({
|
||||
</button>
|
||||
)}
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,441 @@
|
||||
import React from 'react'
|
||||
import type { ExportContactType, ExportNameMode } from '../../../../shared/export'
|
||||
import type { VoiceModelStatus } from '../../../../shared/voice-recognition'
|
||||
import { Button, Checkbox, Input, RadioGroup, RadioGroupItem } from '../ui'
|
||||
import type { Contact, ExportFormat, ExportRange, ExportStatus } from './exportTypes'
|
||||
import { displayName, formatLabels, formatOrder, messageKinds } from './exportUtils'
|
||||
|
||||
interface NameOption {
|
||||
value: ExportNameMode
|
||||
label: string
|
||||
}
|
||||
|
||||
interface ExportConfigurationPanelProps {
|
||||
taskCenter: React.ReactNode
|
||||
selectedContacts: Contact[]
|
||||
exportAll: boolean
|
||||
allContactTypes: ExportContactType[]
|
||||
selectedLabel: string
|
||||
selectionMode: boolean
|
||||
exportContactCount: number
|
||||
format: ExportFormat
|
||||
range: ExportRange
|
||||
startDate: string
|
||||
endDate: string
|
||||
selectedKinds: ReadonlySet<string>
|
||||
nameOptions: NameOption[]
|
||||
nameMode: ExportNameMode
|
||||
includeMedia: boolean
|
||||
includeVoiceTranscripts: boolean
|
||||
includeAvatars: boolean
|
||||
preferOriginal: boolean
|
||||
fallbackThumbnail: boolean
|
||||
keepMissing: boolean
|
||||
voiceModelStatus: VoiceModelStatus | null
|
||||
zip: boolean
|
||||
fileName: string
|
||||
defaultOutputName: string
|
||||
selectedTargetPath: string
|
||||
status: ExportStatus
|
||||
canStart: boolean
|
||||
onToggleSelectionMode: () => void
|
||||
onFormatChange: (format: ExportFormat) => void
|
||||
onZipChange: (zip: boolean) => void
|
||||
onRangeChange: (range: ExportRange) => void
|
||||
onStartDateChange: (value: string) => void
|
||||
onEndDateChange: (value: string) => void
|
||||
onToggleKind: (kind: string) => void
|
||||
onNameModeChange: (mode: ExportNameMode) => void
|
||||
onIncludeMediaChange: (checked: boolean) => void
|
||||
onIncludeVoiceTranscriptsChange: (checked: boolean) => void
|
||||
onIncludeAvatarsChange: (checked: boolean) => void
|
||||
onPreferOriginalChange: (checked: boolean) => void
|
||||
onFallbackThumbnailChange: (checked: boolean) => void
|
||||
onKeepMissingChange: (checked: boolean) => void
|
||||
onFileNameChange: (value: string) => void
|
||||
onSelectOutputDirectory: () => void
|
||||
onReset: () => void
|
||||
onStart: () => void
|
||||
}
|
||||
|
||||
const sectionClassName = 'mb-6'
|
||||
const sectionTitleClassName = 'mb-3 text-xs font-bold tracking-normal text-foreground'
|
||||
const helperClassName = 'mb-0 mt-2 text-[11px] leading-[17px] text-muted-foreground'
|
||||
const choicePanelClassName = 'rounded-lg bg-muted p-3'
|
||||
|
||||
export function ExportConfigurationPanel({
|
||||
taskCenter,
|
||||
selectedContacts,
|
||||
exportAll,
|
||||
allContactTypes,
|
||||
selectedLabel,
|
||||
selectionMode,
|
||||
exportContactCount,
|
||||
format,
|
||||
range,
|
||||
startDate,
|
||||
endDate,
|
||||
selectedKinds,
|
||||
nameOptions,
|
||||
nameMode,
|
||||
includeMedia,
|
||||
includeVoiceTranscripts,
|
||||
includeAvatars,
|
||||
preferOriginal,
|
||||
fallbackThumbnail,
|
||||
keepMissing,
|
||||
voiceModelStatus,
|
||||
zip,
|
||||
fileName,
|
||||
defaultOutputName,
|
||||
selectedTargetPath,
|
||||
status,
|
||||
canStart,
|
||||
onToggleSelectionMode,
|
||||
onFormatChange,
|
||||
onZipChange,
|
||||
onRangeChange,
|
||||
onStartDateChange,
|
||||
onEndDateChange,
|
||||
onToggleKind,
|
||||
onNameModeChange,
|
||||
onIncludeMediaChange,
|
||||
onIncludeVoiceTranscriptsChange,
|
||||
onIncludeAvatarsChange,
|
||||
onPreferOriginalChange,
|
||||
onFallbackThumbnailChange,
|
||||
onKeepMissingChange,
|
||||
onFileNameChange,
|
||||
onSelectOutputDirectory,
|
||||
onReset,
|
||||
onStart
|
||||
}: ExportConfigurationPanelProps): React.ReactElement {
|
||||
const mediaOptionsEnabled = includeMedia && format === 'html'
|
||||
const voiceTranscriptsEnabled =
|
||||
mediaOptionsEnabled && selectedKinds.has('voice') && voiceModelStatus?.state === 'ready'
|
||||
|
||||
return (
|
||||
<main className="export-config-panel flex min-h-0 min-w-0 flex-col overflow-hidden bg-background">
|
||||
<div className="export-config-scroll min-h-0 flex-1 overflow-auto px-7 pb-7 pt-6">
|
||||
{taskCenter}
|
||||
<header className="mb-6 flex items-center gap-3.5">
|
||||
<span className="relative h-[58px] w-[70px] shrink-0" aria-hidden>
|
||||
{exportAll
|
||||
? allContactTypes.map((type, index) => (
|
||||
<span
|
||||
className={`export-chat-avatar export-all-chat-avatar ${type} absolute grid h-[52px] w-[52px] place-items-center overflow-hidden rounded-lg border-2 border-background text-xs font-bold text-primary-foreground ${
|
||||
type === 'group' ? 'bg-[#2f7d5c]' : 'bg-[#416a8b]'
|
||||
}`}
|
||||
style={{ left: index * 12, top: 3 + index * 5 }}
|
||||
key={type}
|
||||
>
|
||||
{type === 'group' ? '群' : '联'}
|
||||
</span>
|
||||
))
|
||||
: selectedContacts.slice(0, 3).map((contact, index) => (
|
||||
<span
|
||||
className="export-chat-avatar absolute grid h-[52px] w-[52px] place-items-center overflow-hidden rounded-lg border-2 border-background bg-primary/10 text-[22px] font-bold text-primary"
|
||||
style={{ left: index * 12, top: 3 + index * 5 }}
|
||||
key={contact.md5}
|
||||
>
|
||||
{contact.avatar ? (
|
||||
<img className="h-full w-full object-cover" src={contact.avatar} alt="" />
|
||||
) : (
|
||||
displayName(contact).slice(0, 1)
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<h1 className="m-0 text-xl font-bold leading-7 tracking-normal text-foreground">
|
||||
导出设置
|
||||
</h1>
|
||||
<p className="m-0 mt-0.5 overflow-hidden text-ellipsis whitespace-nowrap text-[13px] text-muted-foreground">
|
||||
{selectedLabel}
|
||||
</p>
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-primary"
|
||||
disabled={exportAll}
|
||||
onClick={onToggleSelectionMode}
|
||||
>
|
||||
{exportAll ? '已选择全部聊天' : selectionMode ? '完成选择' : '+ 添加聊天'}
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
<section className={sectionClassName}>
|
||||
<h3 className={sectionTitleClassName}>导出格式</h3>
|
||||
<div className="grid grid-cols-2 gap-2 min-[900px]:grid-cols-4">
|
||||
{formatOrder.map((value) => {
|
||||
const active = format === value
|
||||
return (
|
||||
<Button
|
||||
key={value}
|
||||
variant="outline"
|
||||
aria-pressed={active}
|
||||
className={`${
|
||||
active ? 'active border-2 border-primary bg-primary/10 hover:bg-primary/15' : ''
|
||||
} h-[78px] min-w-0 flex-col gap-1.5 whitespace-normal px-2 text-foreground`}
|
||||
disabled={!exportAll && exportContactCount > 1 && value !== 'html'}
|
||||
onClick={() => onFormatChange(value)}
|
||||
>
|
||||
<strong className="text-[13px]">{formatLabels[value].label}</strong>
|
||||
{formatLabels[value].hint && (
|
||||
<small className="text-[10px] font-normal text-success">
|
||||
{formatLabels[value].hint}
|
||||
</small>
|
||||
)}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<p className={helperClassName}>
|
||||
{exportAll
|
||||
? '全部导出固定使用全部时间；每个群聊或联系人都会在自己的目录中生成所选格式的独立档案。'
|
||||
: selectedContacts.length > 1
|
||||
? '多聊天合并仅支持 HTML，会保留每条消息所属的聊天。'
|
||||
: 'CSV 默认最快；HTML 会包含图片、引用和其他媒体，导出时间可能较长。'}
|
||||
</p>
|
||||
{format === 'html' && (
|
||||
<>
|
||||
<RadioGroup
|
||||
className="mt-2.5 gap-2 rounded-lg border border-border bg-muted px-3 py-2.5 text-xs text-foreground"
|
||||
value={zip ? 'zip' : 'folder'}
|
||||
onValueChange={(value) => onZipChange(value === 'zip')}
|
||||
aria-label="HTML 打包方式"
|
||||
>
|
||||
<label className="flex cursor-pointer items-center gap-2" htmlFor="html-folder">
|
||||
<RadioGroupItem id="html-folder" value="folder" />
|
||||
HTML 资源包
|
||||
</label>
|
||||
<label className="flex cursor-pointer items-center gap-2" htmlFor="html-zip">
|
||||
<RadioGroupItem id="html-zip" value="zip" />
|
||||
HTML 资源包并压缩为 ZIP
|
||||
</label>
|
||||
</RadioGroup>
|
||||
<p className={helperClassName}>
|
||||
使用相同名称再次导出时，会把新消息合并进已有档案，不会删除之前导出的消息。
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className={sectionClassName}>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h3 className={sectionTitleClassName}>时间范围</h3>
|
||||
<span className="mb-3 text-xs text-primary">
|
||||
{status === 'completed' ? '已完成导出' : '消息数量将在开始导出后统计'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{(exportAll
|
||||
? [['all', '全部时间']]
|
||||
: [
|
||||
['all', '全部时间'],
|
||||
['today', '今天'],
|
||||
['threeDays', '最近 3 天'],
|
||||
['sevenDays', '最近 7 天'],
|
||||
['custom', '自定义时间']
|
||||
]
|
||||
).map(([value, label]) => (
|
||||
<Button
|
||||
key={value}
|
||||
variant={range === value ? 'default' : 'outline'}
|
||||
aria-pressed={range === value}
|
||||
className={range === value ? 'active' : ''}
|
||||
onClick={() => onRangeChange(value as ExportRange)}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
{!exportAll && range === 'custom' && (
|
||||
<div className="mt-2.5 grid grid-cols-2 gap-2.5 rounded-lg bg-muted p-3">
|
||||
<label className="grid gap-1.5 text-[11px] text-muted-foreground">
|
||||
开始时间
|
||||
<Input
|
||||
type="datetime-local"
|
||||
value={startDate}
|
||||
onChange={(event) => onStartDateChange(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label className="grid gap-1.5 text-[11px] text-muted-foreground">
|
||||
结束时间
|
||||
<Input
|
||||
type="datetime-local"
|
||||
value={endDate}
|
||||
onChange={(event) => onEndDateChange(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className={sectionClassName}>
|
||||
<h3 className={sectionTitleClassName}>消息内容</h3>
|
||||
<div
|
||||
className={`${choicePanelClassName} grid grid-cols-2 gap-x-5 gap-y-1 min-[900px]:grid-cols-3`}
|
||||
>
|
||||
{messageKinds.map(([value, label]) => (
|
||||
<label
|
||||
key={value}
|
||||
className="flex min-h-7 cursor-pointer items-center gap-2 text-xs text-foreground"
|
||||
>
|
||||
<Checkbox
|
||||
checked={selectedKinds.has(value)}
|
||||
onCheckedChange={() => onToggleKind(value)}
|
||||
/>
|
||||
<span>{label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={sectionClassName}>
|
||||
<h3 className={sectionTitleClassName}>消息显示名称</h3>
|
||||
<RadioGroup
|
||||
className="flex gap-2 rounded-lg bg-muted p-2.5"
|
||||
value={nameMode}
|
||||
onValueChange={(value) => onNameModeChange(value as ExportNameMode)}
|
||||
aria-label="消息显示名称"
|
||||
>
|
||||
{nameOptions.map((option) => (
|
||||
<label
|
||||
key={option.value}
|
||||
className="flex min-h-8 flex-1 cursor-pointer items-center gap-2 rounded-md border border-border bg-surface px-2 text-xs text-foreground"
|
||||
htmlFor={`export-name-${option.value}`}
|
||||
>
|
||||
<RadioGroupItem id={`export-name-${option.value}`} value={option.value} />
|
||||
<span>{option.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</section>
|
||||
|
||||
<section className={sectionClassName}>
|
||||
<h3 className={sectionTitleClassName}>资源处理</h3>
|
||||
<label className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-border bg-surface px-3.5 py-3 text-xs text-foreground">
|
||||
<span>包含图片、视频、语音、表情及文件附件</span>
|
||||
<Checkbox
|
||||
checked={includeMedia}
|
||||
disabled={format !== 'html'}
|
||||
onCheckedChange={(checked) => onIncludeMediaChange(checked === true)}
|
||||
/>
|
||||
</label>
|
||||
<div
|
||||
className={`${choicePanelClassName} mt-2 grid gap-0.5 ${mediaOptionsEnabled ? '' : 'opacity-50'}`}
|
||||
>
|
||||
{(
|
||||
[
|
||||
['prefer-original', '优先导出原图', preferOriginal, onPreferOriginalChange],
|
||||
[
|
||||
'fallback-thumbnail',
|
||||
'原图缺失时使用缩略图',
|
||||
fallbackThumbnail,
|
||||
onFallbackThumbnailChange
|
||||
],
|
||||
['keep-missing', '媒体缺失时保留占位说明', keepMissing, onKeepMissingChange]
|
||||
] as const
|
||||
).map(([id, label, checked, onChange]) => (
|
||||
<label
|
||||
key={id}
|
||||
className="flex min-h-7 cursor-pointer items-center gap-2 text-xs text-foreground"
|
||||
>
|
||||
<Checkbox
|
||||
checked={checked}
|
||||
disabled={!mediaOptionsEnabled}
|
||||
onCheckedChange={(nextChecked) => onChange(nextChecked === true)}
|
||||
/>
|
||||
<span>{label}</span>
|
||||
</label>
|
||||
))}
|
||||
<label className="flex min-h-7 cursor-pointer items-center gap-2 text-xs text-foreground">
|
||||
<Checkbox
|
||||
checked={includeVoiceTranscripts && voiceModelStatus?.state === 'ready'}
|
||||
disabled={!voiceTranscriptsEnabled}
|
||||
onCheckedChange={(checked) => onIncludeVoiceTranscriptsChange(checked === true)}
|
||||
/>
|
||||
<span>语音转文字，显示在语音条下方</span>
|
||||
</label>
|
||||
</div>
|
||||
<p className={helperClassName}>
|
||||
资源文件仅在 HTML 导出中生效，CSV、JSON 和 Markdown 只保留文本内容。
|
||||
</p>
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{[
|
||||
'图片解密：已就绪',
|
||||
'视频资源：可用',
|
||||
'语音资源：可用',
|
||||
`语音转文字：${voiceModelStatus?.state === 'ready' ? '已就绪' : '请先在设置中准备模型'}`,
|
||||
'表情资源：按需解析',
|
||||
'文件附件：按需复制'
|
||||
].map((label) => (
|
||||
<span
|
||||
key={label}
|
||||
className="rounded bg-primary/10 px-2 py-1 text-[10px] text-success"
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className={helperClassName}>媒体资源会延长导出时间，缺失资源不会中断任务。</p>
|
||||
<label className="mt-2 flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-border bg-surface px-3.5 py-3 text-xs text-foreground">
|
||||
<span>在聊天气泡旁显示头像</span>
|
||||
<Checkbox
|
||||
checked={includeAvatars}
|
||||
onCheckedChange={(checked) => onIncludeAvatarsChange(checked === true)}
|
||||
/>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section className="mb-0 grid gap-3">
|
||||
<h3 className="m-0 text-xs font-bold tracking-normal text-foreground">保存设置</h3>
|
||||
<label className="grid gap-1.5 text-[11px] text-muted-foreground">
|
||||
文件名称
|
||||
<Input
|
||||
value={fileName}
|
||||
onChange={(event) => onFileNameChange(event.target.value)}
|
||||
placeholder={defaultOutputName}
|
||||
/>
|
||||
</label>
|
||||
<div className="flex items-center gap-2.5 rounded-lg border border-border bg-surface px-2.5 py-2 text-[11px] text-muted-foreground">
|
||||
<span>保存位置</span>
|
||||
<strong
|
||||
className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-medium text-foreground"
|
||||
title={selectedTargetPath}
|
||||
>
|
||||
{selectedTargetPath}
|
||||
</strong>
|
||||
<Button variant="outline" size="sm" onClick={onSelectOutputDirectory}>
|
||||
选择位置
|
||||
</Button>
|
||||
</div>
|
||||
{format === 'html' && (
|
||||
<p className={helperClassName}>可以分多次选择不同时间范围，逐步补齐同一个聊天档案。</p>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer className="flex h-[58px] shrink-0 items-center gap-2 border-t border-border bg-surface px-5.5 text-xs text-muted-foreground">
|
||||
<span
|
||||
className={`h-2 w-2 shrink-0 rounded-full ${status === 'completed' ? 'bg-primary' : 'bg-success'}`}
|
||||
aria-hidden
|
||||
/>
|
||||
<span>
|
||||
{status === 'running' ? '正在后台导出' : status === 'completed' ? '导出完成' : '准备就绪'}
|
||||
</span>
|
||||
<span className="ml-3 min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-muted-foreground">
|
||||
路径：{selectedTargetPath}
|
||||
</span>
|
||||
<Button variant="ghost" size="sm" onClick={onReset}>
|
||||
恢复默认
|
||||
</Button>
|
||||
<Button className="min-w-[132px]" disabled={!canStart} onClick={onStart}>
|
||||
{status === 'running' ? '正在导出' : status === 'completed' ? '再次导出' : '开始导出'}
|
||||
</Button>
|
||||
</footer>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react'
|
||||
import type { ExportContactType } from '../../../../shared/export'
|
||||
import { Button, Checkbox, Input, Tabs, TabsList, TabsTrigger } from '../ui'
|
||||
import type { Contact, SelfInfo } from './exportTypes'
|
||||
import { displayName } from './exportUtils'
|
||||
|
||||
@@ -55,22 +56,35 @@ export function ExportContactPanel({
|
||||
(allContactTypes.includes('user') ? userCount : 0)
|
||||
|
||||
return (
|
||||
<aside className="export-contact-panel">
|
||||
<div className="export-panel-header">
|
||||
<div className="export-panel-title-row">
|
||||
<h2>选择聊天</h2>
|
||||
<span className="export-count-badge">共 {contacts.length.toLocaleString()} 个</span>
|
||||
<aside className="flex min-h-0 min-w-0 flex-col border-r border-border bg-sidebar">
|
||||
<div className="border-b border-border px-4 pb-3 pt-5">
|
||||
<div className="mb-3.5 flex items-center justify-between gap-2">
|
||||
<h2 className="text-[17px] font-bold tracking-normal text-foreground">选择聊天</h2>
|
||||
<span className="whitespace-nowrap rounded-md bg-surface px-2 py-1 text-[11px] text-muted-foreground">
|
||||
共 {contacts.length.toLocaleString()} 个
|
||||
</span>
|
||||
</div>
|
||||
<label className="export-search-field">
|
||||
<span aria-hidden>⌕</span>
|
||||
<input
|
||||
<label className="relative block">
|
||||
<span
|
||||
className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
|
||||
aria-hidden
|
||||
>
|
||||
⌕
|
||||
</span>
|
||||
<Input
|
||||
className="h-[38px] pl-9 text-[13px]"
|
||||
value={contactFilter}
|
||||
onChange={(event) => onContactFilterChange(event.target.value)}
|
||||
placeholder="搜索群聊、联系人或 wxid"
|
||||
aria-label="搜索聊天"
|
||||
/>
|
||||
</label>
|
||||
<div className="export-filter-tabs" role="tablist" aria-label="聊天类型">
|
||||
<Tabs
|
||||
className="mt-3"
|
||||
value={contactType}
|
||||
onValueChange={(value) => onContactTypeChange(value as 'all' | 'group' | 'user')}
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-3 bg-muted">
|
||||
{(
|
||||
[
|
||||
['all', '全部'],
|
||||
@@ -78,30 +92,36 @@ export function ExportContactPanel({
|
||||
['user', '联系人']
|
||||
] as const
|
||||
).map(([value, label]) => (
|
||||
<button
|
||||
<TabsTrigger
|
||||
key={value}
|
||||
type="button"
|
||||
className={contactType === value ? 'active' : ''}
|
||||
onClick={() => onContactTypeChange(value)}
|
||||
className="w-full data-[state=active]:text-primary"
|
||||
value={value}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={`export-all-button ${exportAll ? 'active' : ''}`}
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={`mt-2.5 h-auto w-full justify-between gap-3 px-2.5 py-2 text-left ${
|
||||
exportAll ? 'border-primary bg-primary/10 text-primary hover:bg-primary/15' : ''
|
||||
}`}
|
||||
aria-pressed={exportAll}
|
||||
onClick={onExportAll}
|
||||
>
|
||||
<span>
|
||||
<strong>全部导出</strong>
|
||||
<small>群聊和联系人按会话归档</small>
|
||||
<span className="grid min-w-0 gap-0.5">
|
||||
<strong className="text-xs">全部导出</strong>
|
||||
<small className="text-[10px] font-normal text-muted-foreground">
|
||||
群聊和联系人按会话归档
|
||||
</small>
|
||||
</span>
|
||||
<b>{(exportAll ? selectedAllCount : contacts.length).toLocaleString()}</b>
|
||||
</button>
|
||||
<b className="text-[11px] text-muted-foreground">
|
||||
{(exportAll ? selectedAllCount : contacts.length).toLocaleString()}
|
||||
</b>
|
||||
</Button>
|
||||
{exportAll && (
|
||||
<div className="export-all-type-options" aria-label="全部导出范围">
|
||||
<div className="mt-2 grid grid-cols-2 gap-2" aria-label="全部导出范围">
|
||||
{(
|
||||
[
|
||||
['group', '群聊'],
|
||||
@@ -109,19 +129,22 @@ export function ExportContactPanel({
|
||||
] as const
|
||||
).map(([type, label]) => {
|
||||
const count = type === 'group' ? groupCount : userCount
|
||||
const checked = allContactTypes.includes(type)
|
||||
return (
|
||||
<label key={type}>
|
||||
<input
|
||||
type="checkbox"
|
||||
<label
|
||||
className="grid min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1.5 rounded-md border border-border bg-surface px-2 py-2 text-[11px] text-muted-foreground"
|
||||
key={type}
|
||||
>
|
||||
<Checkbox
|
||||
aria-label={`导出全部${label}`}
|
||||
checked={allContactTypes.includes(type)}
|
||||
checked={checked}
|
||||
disabled={
|
||||
exportRunning || (allContactTypes.length === 1 && allContactTypes[0] === type)
|
||||
}
|
||||
onChange={() => onToggleAllContactType(type)}
|
||||
onCheckedChange={() => onToggleAllContactType(type)}
|
||||
/>
|
||||
<span>{label}</span>
|
||||
<b>{count.toLocaleString()}</b>
|
||||
<b className="text-[10px] text-muted-foreground">{count.toLocaleString()}</b>
|
||||
</label>
|
||||
)
|
||||
})}
|
||||
@@ -130,24 +153,24 @@ export function ExportContactPanel({
|
||||
</div>
|
||||
|
||||
{exportAll ? (
|
||||
<div className="export-all-status">
|
||||
<div className="border-b border-border bg-primary/10 px-4 py-2 text-[11px] leading-[17px] text-primary">
|
||||
已选择 {allContactTypes.includes('group') ? `全部群聊 ${groupCount} 个` : ''}
|
||||
{allContactTypes.length === 2 ? '和' : ''}
|
||||
{allContactTypes.includes('user') ? `全部联系人 ${userCount} 个` : ''}
|
||||
；点击单个聊天可切换回指定导出
|
||||
</div>
|
||||
) : selectionMode ? (
|
||||
<div className="export-multi-select-bar">
|
||||
<div className="flex items-center justify-between border-b border-border bg-primary/10 px-4 py-2 text-xs text-primary">
|
||||
<span>
|
||||
已选 {selectedContactIds.length} / {selectionLimit} 个
|
||||
</span>
|
||||
<button type="button" onClick={onCompleteSelection}>
|
||||
<Button className="h-auto p-0 text-xs" variant="link" onClick={onCompleteSelection}>
|
||||
完成
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="export-contact-list">
|
||||
<div className="export-contact-list min-h-0 flex-1 overflow-auto py-2">
|
||||
{filteredContacts.map((contact) => {
|
||||
const name = displayName(contact)
|
||||
const selected = selectedContactIds.includes(contact.md5)
|
||||
@@ -159,20 +182,37 @@ export function ExportContactPanel({
|
||||
<button
|
||||
key={contact.md5}
|
||||
type="button"
|
||||
className={`export-contact-item ${!exportAll && activeContact?.md5 === contact.md5 ? 'active' : ''} ${visuallySelected ? 'selected' : ''}`}
|
||||
className={`flex w-full items-center gap-2.5 border-0 border-l-[3px] px-4 py-[11px] text-left text-foreground transition-colors hover:bg-surface/60 disabled:cursor-not-allowed disabled:opacity-50 ${
|
||||
!exportAll && activeContact?.md5 === contact.md5
|
||||
? 'border-l-primary bg-primary/10'
|
||||
: 'border-l-transparent bg-transparent'
|
||||
}`}
|
||||
onClick={() => onSelectContact(contact)}
|
||||
disabled={atLimit}
|
||||
aria-pressed={visuallySelected}
|
||||
>
|
||||
<span className="export-contact-avatar">
|
||||
{contact.avatar ? <img src={contact.avatar} alt="" /> : name.slice(0, 1)}
|
||||
<span className="grid h-[38px] w-[38px] shrink-0 place-items-center overflow-hidden rounded-lg bg-primary/10 font-bold text-primary">
|
||||
{contact.avatar ? (
|
||||
<img className="h-full w-full object-cover" src={contact.avatar} alt="" />
|
||||
) : (
|
||||
name.slice(0, 1)
|
||||
)}
|
||||
</span>
|
||||
<span className="export-contact-copy">
|
||||
<strong>{name}</strong>
|
||||
<small>{contact.type === 'group' ? '群聊' : '联系人'}</small>
|
||||
<span className="grid min-w-0 flex-1 gap-0.5">
|
||||
<strong className="overflow-hidden text-ellipsis whitespace-nowrap text-[13px]">
|
||||
{name}
|
||||
</strong>
|
||||
<small className="text-[11px] text-muted-foreground">
|
||||
{contact.type === 'group' ? '群聊' : '联系人'}
|
||||
</small>
|
||||
</span>
|
||||
{!exportAll && selectionMode && (
|
||||
<span className={`export-contact-check ${selected ? 'checked' : ''}`} aria-hidden>
|
||||
<span
|
||||
className={`grid h-[18px] w-[18px] shrink-0 place-items-center rounded border text-xs text-primary-foreground ${
|
||||
selected ? 'border-primary bg-primary' : 'border-border-strong'
|
||||
}`}
|
||||
aria-hidden
|
||||
>
|
||||
{selected ? '✓' : ''}
|
||||
</span>
|
||||
)}
|
||||
@@ -181,21 +221,28 @@ export function ExportContactPanel({
|
||||
})}
|
||||
</div>
|
||||
|
||||
<button type="button" className="export-account-summary" onClick={onOpenSettings}>
|
||||
<span className="export-account-avatar">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="h-auto justify-start gap-2 border-t border-border px-4 py-3.5 text-left"
|
||||
onClick={onOpenSettings}
|
||||
>
|
||||
<span className="grid h-[34px] w-[34px] shrink-0 place-items-center overflow-hidden rounded-full bg-primary/10 font-bold text-primary">
|
||||
{selfInfo?.avatar ? (
|
||||
<img src={selfInfo.avatar} alt="" />
|
||||
<img className="h-full w-full object-cover" src={selfInfo.avatar} alt="" />
|
||||
) : (
|
||||
(selfInfo?.nickname || '我').slice(0, 1)
|
||||
)}
|
||||
</span>
|
||||
<span>
|
||||
<strong>{selfInfo?.nickname || '当前账号'}</strong>
|
||||
<small className={dbReady ? 'ready' : ''}>
|
||||
<span className="grid min-w-0 gap-0.5">
|
||||
<strong className="overflow-hidden text-ellipsis whitespace-nowrap text-[13px] text-foreground">
|
||||
{selfInfo?.nickname || '当前账号'}
|
||||
</strong>
|
||||
<small className={`text-[11px] ${dbReady ? 'text-success' : 'text-muted-foreground'}`}>
|
||||
{dbReady ? '数据库已连接' : '数据库未连接'}
|
||||
</small>
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from 'react'
|
||||
import { Button, Progress } from '../ui'
|
||||
import type { Message } from './exportTypes'
|
||||
import type { ExportJobProgress, ExportStatus, SelfInfo } from './exportTypes'
|
||||
import { formatPreviewTime } from './exportUtils'
|
||||
@@ -68,12 +69,12 @@ export function ExportPreviewPanel({
|
||||
: ''
|
||||
|
||||
return (
|
||||
<aside className={`export-preview-panel ${status !== 'idle' ? `status-${status}` : ''}`}>
|
||||
<aside className="flex min-h-0 min-w-0 flex-col overflow-hidden border-l border-border bg-surface max-[1100px]:hidden">
|
||||
{status === 'idle' && (
|
||||
<>
|
||||
<div className="export-preview-heading">
|
||||
<strong>导出预览</strong>
|
||||
<span>
|
||||
<div className="flex h-[52px] shrink-0 items-center justify-between border-b border-border px-[18px] text-xs text-foreground">
|
||||
<strong className="font-semibold">导出预览</strong>
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
{allExport
|
||||
? `${selectedCount} 个聊天 · 分目录导出`
|
||||
: selectedCount > 1
|
||||
@@ -81,8 +82,10 @@ export function ExportPreviewPanel({
|
||||
: '仅预览最近 20 条'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="export-message-preview">
|
||||
<div className="export-preview-date">{allExport ? '全量归档' : '最近消息'}</div>
|
||||
<div className="min-h-0 flex-1 overflow-auto px-3.5 py-4">
|
||||
<div className="mx-auto mb-[18px] w-fit rounded-full bg-muted px-2.5 py-1 text-[10px] text-muted-foreground">
|
||||
{allExport ? '全量归档' : '最近消息'}
|
||||
</div>
|
||||
{(allExport
|
||||
? [
|
||||
{
|
||||
@@ -107,22 +110,44 @@ export function ExportPreviewPanel({
|
||||
isSender: false
|
||||
}
|
||||
]
|
||||
).map((message) => (
|
||||
).map((message) => {
|
||||
const systemMessage = Boolean(
|
||||
message.contentData?.type === 'system' && message.contentData.pat
|
||||
)
|
||||
return (
|
||||
<div
|
||||
key={`${message.exportConversationId || 'single'}:${message.id}`}
|
||||
className={`export-preview-message ${message.isSender ? 'mine' : ''} ${
|
||||
message.contentData?.type === 'system' && message.contentData.pat ? 'system' : ''
|
||||
className={`mx-auto mb-[15px] flex w-full max-w-[620px] items-start gap-2 ${
|
||||
message.isSender ? 'flex-row-reverse' : ''
|
||||
} ${systemMessage ? 'justify-center' : ''}`}
|
||||
>
|
||||
<span
|
||||
className={`h-[30px] w-[30px] shrink-0 place-items-center overflow-hidden rounded-lg bg-primary/10 text-[11px] font-bold text-primary ${
|
||||
systemMessage ? 'hidden' : 'grid'
|
||||
}`}
|
||||
>
|
||||
<span className="export-preview-avatar">
|
||||
{message.img || (message.isSender && selfInfo?.avatar) ? (
|
||||
<img src={message.img || selfInfo?.avatar} alt="" />
|
||||
<img
|
||||
className="h-full w-full object-cover"
|
||||
src={message.img || selfInfo?.avatar}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
(message.isSender ? '我' : message.name || '友').slice(0, 1)
|
||||
)}
|
||||
</span>
|
||||
<span className="export-preview-bubble">
|
||||
<small>
|
||||
<span
|
||||
className={`export-preview-bubble max-w-[78%] rounded-lg px-2.5 py-2 text-xs leading-[18px] text-foreground shadow-surface ${
|
||||
systemMessage
|
||||
? 'max-w-[92%] bg-muted px-2.5 py-1 text-center text-[11px] text-muted-foreground shadow-none'
|
||||
: message.isSender
|
||||
? 'bg-[#95ec69]'
|
||||
: 'bg-surface'
|
||||
}`}
|
||||
>
|
||||
<small
|
||||
className={`${systemMessage ? 'hidden' : 'mb-1 block'} text-[10px] text-muted-foreground`}
|
||||
>
|
||||
{selectedCount > 1 && message.exportConversationName
|
||||
? `${message.exportConversationName} · `
|
||||
: ''}
|
||||
@@ -132,107 +157,106 @@ export function ExportPreviewPanel({
|
||||
{message.content || `[${message.type}]`}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="export-preview-stats export-preview-real-stats">
|
||||
<span>
|
||||
<div className="grid shrink-0 gap-3 border-t border-border p-[18px]">
|
||||
<span className="flex justify-between text-xs text-muted-foreground">
|
||||
预览消息<strong>{previewItems.length}</strong>
|
||||
</span>
|
||||
<span>
|
||||
<span className="flex justify-between text-xs text-muted-foreground">
|
||||
媒体预览<strong>{previewMediaCount}</strong>
|
||||
</span>
|
||||
<span>
|
||||
<span className="flex justify-between text-xs text-muted-foreground">
|
||||
预估文本大小
|
||||
<strong>
|
||||
<strong className="font-semibold text-foreground">
|
||||
{previewBytes < 1024
|
||||
? `${previewBytes} B`
|
||||
: `${(previewBytes / 1024).toFixed(1)} KB`}
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
<div className="export-preview-stats">
|
||||
<span>
|
||||
消息总数<strong>待统计</strong>
|
||||
</span>
|
||||
<span>
|
||||
媒体文件<strong>待统计</strong>
|
||||
</span>
|
||||
<span>
|
||||
预计大小<strong>待统计</strong>
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{status === 'running' && (
|
||||
<div className="export-job-state">
|
||||
<h2>正在导出</h2>
|
||||
<p>导出任务在后台运行，不影响档案浏览。</p>
|
||||
<div className="grid h-full content-center gap-3 p-7 text-center">
|
||||
<h2 className="text-lg font-bold tracking-normal text-foreground">正在导出</h2>
|
||||
<p className="text-xs leading-[18px] text-muted-foreground">
|
||||
导出任务在后台运行，不影响档案浏览。
|
||||
</p>
|
||||
{currentTargetText && (
|
||||
<div className="export-current-target">
|
||||
<span>{progress?.currentTargetType === 'group' ? '群聊' : '联系人'}</span>
|
||||
<strong>{currentTargetText}</strong>
|
||||
<div className="my-1 grid gap-1 rounded-lg border border-border bg-surface p-3">
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{progress?.currentTargetType === 'group' ? '群聊' : '联系人'}
|
||||
</span>
|
||||
<strong className="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-foreground">
|
||||
{currentTargetText}
|
||||
</strong>
|
||||
</div>
|
||||
)}
|
||||
<ol>
|
||||
<li className="done">准备导出</li>
|
||||
<ol className="my-2 grid list-none gap-2.5 p-0 text-left">
|
||||
<li className="done text-xs text-success before:mr-2 before:content-['✓']">准备导出</li>
|
||||
{steps.map((step, index) => (
|
||||
<li
|
||||
key={step.phase}
|
||||
className={
|
||||
index < currentStepIndex ? 'done' : index === currentStepIndex ? 'current' : ''
|
||||
}
|
||||
className={`${
|
||||
index < currentStepIndex
|
||||
? "done text-success before:content-['✓']"
|
||||
: index === currentStepIndex
|
||||
? "current font-semibold text-foreground before:content-['●']"
|
||||
: "text-muted-foreground before:content-['○']"
|
||||
} text-xs before:mr-2`}
|
||||
>
|
||||
{step.label}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<div
|
||||
className={`export-progress-bar ${indeterminate ? 'indeterminate' : ''}`}
|
||||
role="progressbar"
|
||||
<Progress
|
||||
className="h-1.5"
|
||||
value={percent}
|
||||
indeterminate={indeterminate}
|
||||
aria-label="导出进度"
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-valuenow={indeterminate ? undefined : percent}
|
||||
aria-valuetext={indeterminate ? '正在读取消息' : `${percent}%`}
|
||||
>
|
||||
<span style={indeterminate ? undefined : { width: `${percent}%` }} />
|
||||
</div>
|
||||
<strong>{progressText}</strong>
|
||||
<button type="button" className="export-cancel-button" onClick={() => onCancel(jobId)}>
|
||||
/>
|
||||
<strong className="text-xs font-medium text-muted-foreground">{progressText}</strong>
|
||||
<Button variant="outline" onClick={() => onCancel(jobId)}>
|
||||
取消导出
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{status === 'completed' && (
|
||||
<div className="export-job-state completed">
|
||||
<div className="export-success-icon">✓</div>
|
||||
<h2>导出完成</h2>
|
||||
<p>聊天档案已成功保存。</p>
|
||||
<div className="export-complete-summary">
|
||||
<span>
|
||||
导出消息<strong>{progress?.processed.toLocaleString() || '已完成'}</strong>
|
||||
<div className="grid h-full content-center gap-3 p-7 text-center">
|
||||
<div className="mx-auto grid h-[58px] w-[58px] place-items-center rounded-full border-[5px] border-primary/10 bg-surface text-3xl text-primary">
|
||||
✓
|
||||
</div>
|
||||
<h2 className="text-lg font-bold tracking-normal text-foreground">导出完成</h2>
|
||||
<p className="text-xs text-muted-foreground">聊天档案已成功保存。</p>
|
||||
<div className="my-3 grid gap-3 rounded-lg bg-muted p-3.5 text-left">
|
||||
<span className="flex justify-between text-xs text-muted-foreground">
|
||||
导出消息
|
||||
<strong className="font-semibold text-foreground">
|
||||
{progress?.processed.toLocaleString() || '已完成'}
|
||||
</strong>
|
||||
</span>
|
||||
<span>
|
||||
媒体资源<strong>按设置处理</strong>
|
||||
<span className="flex justify-between text-xs text-muted-foreground">
|
||||
媒体资源<strong className="font-semibold text-foreground">按设置处理</strong>
|
||||
</span>
|
||||
<span>
|
||||
输出位置<strong>已保存</strong>
|
||||
<span className="flex justify-between text-xs text-muted-foreground">
|
||||
输出位置<strong className="font-semibold text-foreground">已保存</strong>
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="export-primary-button"
|
||||
onClick={() => progress?.outputPath && onReveal(progress.outputPath)}
|
||||
>
|
||||
<Button onClick={() => progress?.outputPath && onReveal(progress.outputPath)}>
|
||||
{allExport ? '打开导出目录' : '打开档案'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="export-open-folder-button"
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => progress?.outputPath && onReveal(progress.outputPath)}
|
||||
>
|
||||
在文件夹中显示
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from 'react'
|
||||
import { Button, Progress } from '../ui'
|
||||
import type { ExportTaskRecord } from './exportTypes'
|
||||
|
||||
interface ExportTaskCenterProps {
|
||||
@@ -60,49 +61,60 @@ export function ExportTaskCenter({
|
||||
|
||||
return (
|
||||
<>
|
||||
<button type="button" className="export-task-center-button" onClick={onToggle}>
|
||||
<Button className="mb-3 self-start" size="sm" variant="outline" onClick={onToggle}>
|
||||
任务中心{taskCount > 0 ? ` (${taskCount})` : ''}
|
||||
</button>
|
||||
</Button>
|
||||
{open && (
|
||||
<section className="export-task-center">
|
||||
<div className="export-section-heading">
|
||||
<h3>导出任务</h3>
|
||||
<span>{tasks.length} 条记录</span>
|
||||
<section className="mb-[18px] rounded-lg border border-border bg-surface p-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h3 className="text-xs font-bold tracking-normal text-foreground">导出任务</h3>
|
||||
<span className="text-xs text-primary">{tasks.length} 条记录</span>
|
||||
</div>
|
||||
{tasks.length === 0 ? (
|
||||
<p>暂无导出记录</p>
|
||||
<p className="mt-3 text-xs text-muted-foreground">暂无导出记录</p>
|
||||
) : (
|
||||
tasks.map((task) => {
|
||||
const detail = taskDetail(task)
|
||||
return (
|
||||
<div className="export-task-row" key={task.jobId}>
|
||||
<span>
|
||||
<strong>{task.targetLabel}</strong>
|
||||
<small>
|
||||
<div
|
||||
className="grid grid-cols-[minmax(0,1fr)_110px_auto] items-center gap-3 border-t border-border py-2 text-xs text-muted-foreground first:mt-2"
|
||||
key={task.jobId}
|
||||
>
|
||||
<span className="grid min-w-0 gap-0.5">
|
||||
<strong className="overflow-hidden text-ellipsis whitespace-nowrap text-foreground">
|
||||
{task.targetLabel}
|
||||
</strong>
|
||||
<small className="overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{task.format.toUpperCase()} · {phaseLabels[task.progress.phase]}
|
||||
</small>
|
||||
{detail && (
|
||||
<small
|
||||
className={`export-task-detail ${task.status}`}
|
||||
className={`export-task-detail ${task.status} whitespace-normal [overflow-wrap:anywhere] ${
|
||||
task.status === 'completed'
|
||||
? 'text-primary'
|
||||
: task.status === 'failed'
|
||||
? 'text-destructive'
|
||||
: ''
|
||||
}`}
|
||||
title={task.status === 'failed' ? detail : undefined}
|
||||
>
|
||||
{detail}
|
||||
</small>
|
||||
)}
|
||||
</span>
|
||||
<span className="export-task-progress">
|
||||
<i style={{ width: `${task.progress.percent ?? 0}%` }} />
|
||||
<b>{task.progress.percent ?? 0}%</b>
|
||||
<span className="grid gap-1 text-right text-[10px] text-muted-foreground">
|
||||
<Progress className="h-1.5" value={task.progress.percent ?? 0} />
|
||||
<b className="font-medium">{task.progress.percent ?? 0}%</b>
|
||||
</span>
|
||||
{task.status === 'running' && (
|
||||
<button type="button" onClick={() => onCancel(task.jobId)}>
|
||||
<Button size="sm" variant="outline" onClick={() => onCancel(task.jobId)}>
|
||||
取消
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
{task.status === 'failed' && (
|
||||
<button type="button" onClick={() => void copyTaskLog(task)}>
|
||||
<Button size="sm" variant="outline" onClick={() => void copyTaskLog(task)}>
|
||||
{copiedJobId === task.jobId ? '已复制' : '复制日志'}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -9,6 +9,7 @@ import type {
|
||||
ExportTarget
|
||||
} from '../../../../shared/export'
|
||||
import { ExportContactPanel } from './ExportContactPanel'
|
||||
import { ExportConfigurationPanel } from './ExportConfigurationPanel'
|
||||
import { ExportPreviewPanel } from './ExportPreviewPanel'
|
||||
import { ExportTaskCenter } from './ExportTaskCenter'
|
||||
import type {
|
||||
@@ -19,7 +20,7 @@ import type {
|
||||
ExportWorkspaceProps,
|
||||
GroupMemberName
|
||||
} from './exportTypes'
|
||||
import { displayName, formatLabels, formatOrder, messageKinds } from './exportUtils'
|
||||
import { displayName } from './exportUtils'
|
||||
import type { VoiceModelStatus } from '../../../../shared/voice-recognition'
|
||||
import { resolveMemberName } from '../../../../shared/member-names'
|
||||
|
||||
@@ -445,6 +446,12 @@ export function ExportWorkspace({
|
||||
? `${outputDirectory}/${outputName}${format === 'html' ? (zip ? '.zip' : '/') : `.${format === 'markdown' ? 'md' : format}`}`
|
||||
: targetPath
|
||||
|
||||
const selectOutputDirectory = (): void => {
|
||||
void window.api.selectExportDirectory().then((result) => {
|
||||
if (!result.canceled && result.path) setOutputDirectory(result.path)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="export-workspace">
|
||||
<ExportContactPanel
|
||||
@@ -470,8 +477,8 @@ export function ExportWorkspace({
|
||||
onOpenSettings={onOpenSettings}
|
||||
/>
|
||||
|
||||
<main className="export-config-panel">
|
||||
<div className="export-config-scroll">
|
||||
<ExportConfigurationPanel
|
||||
taskCenter={
|
||||
<ExportTaskCenter
|
||||
open={taskCenterOpen}
|
||||
taskCount={taskCount}
|
||||
@@ -479,327 +486,55 @@ export function ExportWorkspace({
|
||||
onToggle={() => setTaskCenterOpen((open) => !open)}
|
||||
onCancel={(taskJobId) => void onCancelExport(taskJobId)}
|
||||
/>
|
||||
<header className="export-config-header">
|
||||
<span className="export-chat-avatar-stack" aria-hidden>
|
||||
{exportAll
|
||||
? allContactTypes.map((type) => (
|
||||
<span
|
||||
className={`export-chat-avatar export-all-chat-avatar ${type}`}
|
||||
key={type}
|
||||
>
|
||||
{type === 'group' ? '群' : '联'}
|
||||
</span>
|
||||
))
|
||||
: selectedContacts.slice(0, 3).map((contact) => (
|
||||
<span className="export-chat-avatar" key={contact.md5}>
|
||||
{contact.avatar ? (
|
||||
<img src={contact.avatar} alt="" />
|
||||
) : (
|
||||
displayName(contact).slice(0, 1)
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
<span className="export-config-title">
|
||||
<h1>导出设置</h1>
|
||||
<p>{selectedLabel}</p>
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="export-add-chat-button"
|
||||
disabled={exportAll}
|
||||
onClick={() => {
|
||||
}
|
||||
selectedContacts={selectedContacts}
|
||||
exportAll={exportAll}
|
||||
allContactTypes={allContactTypes}
|
||||
selectedLabel={selectedLabel}
|
||||
selectionMode={selectionMode}
|
||||
exportContactCount={exportContacts.length}
|
||||
format={format}
|
||||
range={range}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
selectedKinds={selectedKinds}
|
||||
nameOptions={nameOptions}
|
||||
nameMode={nameMode}
|
||||
includeMedia={includeMedia}
|
||||
includeVoiceTranscripts={includeVoiceTranscripts}
|
||||
includeAvatars={includeAvatars}
|
||||
preferOriginal={preferOriginal}
|
||||
fallbackThumbnail={fallbackThumbnail}
|
||||
keepMissing={keepMissing}
|
||||
voiceModelStatus={voiceModelStatus}
|
||||
zip={zip}
|
||||
fileName={fileName}
|
||||
defaultOutputName={defaultOutputName}
|
||||
selectedTargetPath={selectedTargetPath}
|
||||
status={status}
|
||||
canStart={Boolean(activeContact && exportContacts.length && status !== 'running')}
|
||||
onToggleSelectionMode={() => {
|
||||
setExportAll(false)
|
||||
setSelectionMode((current) => !current)
|
||||
}}
|
||||
>
|
||||
{exportAll ? '已选择全部聊天' : selectionMode ? '完成选择' : '+ 添加聊天'}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<section className="export-section export-format-top">
|
||||
<h3>导出格式</h3>
|
||||
<div className="export-format-grid">
|
||||
{formatOrder.map((value) => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
className={format === value ? 'active' : ''}
|
||||
disabled={!exportAll && exportContacts.length > 1 && value !== 'html'}
|
||||
onClick={() => setFormat(value)}
|
||||
>
|
||||
<strong>{formatLabels[value].label}</strong>
|
||||
{formatLabels[value].hint && <small>{formatLabels[value].hint}</small>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="export-helper-text">
|
||||
{exportAll
|
||||
? '全部导出固定使用全部时间；每个群聊或联系人都会在自己的目录中生成所选格式的独立档案。'
|
||||
: selectedContacts.length > 1
|
||||
? '多聊天合并仅支持 HTML，会保留每条消息所属的聊天。'
|
||||
: 'CSV 默认最快；HTML 会包含图片、引用和其他媒体，导出时间可能较长。'}
|
||||
</p>
|
||||
{format === 'html' && (
|
||||
<>
|
||||
<div className="export-html-options">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="html-package-top"
|
||||
checked={!zip}
|
||||
onChange={() => setZip(false)}
|
||||
/>{' '}
|
||||
HTML 资源包
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="html-package-top"
|
||||
checked={zip}
|
||||
onChange={() => setZip(true)}
|
||||
/>{' '}
|
||||
HTML 资源包并压缩为 ZIP
|
||||
</label>
|
||||
</div>
|
||||
<p className="export-helper-text">
|
||||
使用相同名称再次导出时，会把新消息合并进已有档案，不会删除之前导出的消息。
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="export-section">
|
||||
<div className="export-section-heading">
|
||||
<h3>时间范围</h3>
|
||||
<span>{status === 'completed' ? '已完成导出' : '消息数量将在开始导出后统计'}</span>
|
||||
</div>
|
||||
<div className="export-range-toggle">
|
||||
<button
|
||||
type="button"
|
||||
className={range === 'all' ? 'active' : ''}
|
||||
onClick={() => setRange('all')}
|
||||
>
|
||||
全部时间
|
||||
</button>
|
||||
{!exportAll && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className={range === 'today' ? 'active' : ''}
|
||||
onClick={() => setRange('today')}
|
||||
>
|
||||
今天
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={range === 'threeDays' ? 'active' : ''}
|
||||
onClick={() => setRange('threeDays')}
|
||||
>
|
||||
最近 3 天
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={range === 'sevenDays' ? 'active' : ''}
|
||||
onClick={() => setRange('sevenDays')}
|
||||
>
|
||||
最近 7 天
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={range === 'custom' ? 'active' : ''}
|
||||
onClick={() => setRange('custom')}
|
||||
>
|
||||
自定义时间
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{!exportAll && range === 'custom' && (
|
||||
<div className="export-date-fields">
|
||||
<label>
|
||||
开始时间
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={startDate}
|
||||
onChange={(event) => setStartDate(event.target.value)}
|
||||
onFormatChange={setFormat}
|
||||
onZipChange={setZip}
|
||||
onRangeChange={setRange}
|
||||
onStartDateChange={setStartDate}
|
||||
onEndDateChange={setEndDate}
|
||||
onToggleKind={toggleKind}
|
||||
onNameModeChange={setNameMode}
|
||||
onIncludeMediaChange={setIncludeMedia}
|
||||
onIncludeVoiceTranscriptsChange={setIncludeVoiceTranscripts}
|
||||
onIncludeAvatarsChange={setIncludeAvatars}
|
||||
onPreferOriginalChange={setPreferOriginal}
|
||||
onFallbackThumbnailChange={setFallbackThumbnail}
|
||||
onKeepMissingChange={setKeepMissing}
|
||||
onFileNameChange={setFileName}
|
||||
onSelectOutputDirectory={selectOutputDirectory}
|
||||
onReset={resetDefaults}
|
||||
onStart={() => void handleStart()}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
结束时间
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={endDate}
|
||||
onChange={(event) => setEndDate(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="export-section">
|
||||
<h3>消息内容</h3>
|
||||
<div className="export-kind-grid">
|
||||
{messageKinds.map(([value, label]) => (
|
||||
<label key={value} className="export-check-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedKinds.has(value)}
|
||||
onChange={() => toggleKind(value)}
|
||||
/>
|
||||
<span>{label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="export-section">
|
||||
<h3>消息显示名称</h3>
|
||||
<div className="export-name-mode-grid" role="radiogroup" aria-label="消息显示名称">
|
||||
{nameOptions.map((option) => (
|
||||
<label key={option.value} className="export-name-mode-option">
|
||||
<input
|
||||
type="radio"
|
||||
name="export-name-mode"
|
||||
checked={nameMode === option.value}
|
||||
onChange={() => setNameMode(option.value)}
|
||||
/>
|
||||
<span>{option.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="export-section">
|
||||
<h3>资源处理</h3>
|
||||
<label className="export-media-master">
|
||||
<span>包含图片、视频、语音、表情及文件附件</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={includeMedia}
|
||||
disabled={format !== 'html'}
|
||||
onChange={(event) => setIncludeMedia(event.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
<div
|
||||
className={`export-media-options ${includeMedia && format === 'html' ? '' : 'disabled'}`}
|
||||
>
|
||||
<label className="export-check-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={preferOriginal}
|
||||
disabled={!includeMedia || format !== 'html'}
|
||||
onChange={(event) => setPreferOriginal(event.target.checked)}
|
||||
/>
|
||||
<span>优先导出原图</span>
|
||||
</label>
|
||||
<label className="export-check-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={fallbackThumbnail}
|
||||
disabled={!includeMedia || format !== 'html'}
|
||||
onChange={(event) => setFallbackThumbnail(event.target.checked)}
|
||||
/>
|
||||
<span>原图缺失时使用缩略图</span>
|
||||
</label>
|
||||
<label className="export-check-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={keepMissing}
|
||||
disabled={!includeMedia || format !== 'html'}
|
||||
onChange={(event) => setKeepMissing(event.target.checked)}
|
||||
/>
|
||||
<span>媒体缺失时保留占位说明</span>
|
||||
</label>
|
||||
<label className="export-check-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={includeVoiceTranscripts && voiceModelStatus?.state === 'ready'}
|
||||
disabled={
|
||||
!includeMedia ||
|
||||
format !== 'html' ||
|
||||
!selectedKinds.has('voice') ||
|
||||
voiceModelStatus?.state !== 'ready'
|
||||
}
|
||||
onChange={(event) => setIncludeVoiceTranscripts(event.target.checked)}
|
||||
/>
|
||||
<span>语音转文字，显示在语音条下方</span>
|
||||
</label>
|
||||
</div>
|
||||
<p className="export-helper-text">
|
||||
资源文件仅在 HTML 导出中生效，CSV、JSON 和 Markdown 只保留文本内容。
|
||||
</p>
|
||||
<div className="export-resource-statuses">
|
||||
<span>图片解密：已就绪</span>
|
||||
<span>视频资源：可用</span>
|
||||
<span>语音资源：可用</span>
|
||||
<span>
|
||||
语音转文字：
|
||||
{voiceModelStatus?.state === 'ready' ? '已就绪' : '请先在设置中准备模型'}
|
||||
</span>
|
||||
<span>表情资源：按需解析</span>
|
||||
<span>文件附件：按需复制</span>
|
||||
</div>
|
||||
<p className="export-helper-text">媒体资源会延长导出时间，缺失资源不会中断任务。</p>
|
||||
<label className="export-media-master">
|
||||
<span>在聊天气泡旁显示头像</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={includeAvatars}
|
||||
onChange={(event) => setIncludeAvatars(event.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section className="export-section export-save-section">
|
||||
<h3>保存设置</h3>
|
||||
<label>
|
||||
文件名称
|
||||
<input
|
||||
value={fileName}
|
||||
onChange={(event) => setFileName(event.target.value)}
|
||||
placeholder={defaultOutputName}
|
||||
/>
|
||||
</label>
|
||||
<div className="export-target-path">
|
||||
<span>保存位置</span>
|
||||
<strong>{selectedTargetPath}</strong>
|
||||
<button type="button" onClick={() => {
|
||||
void window.api.selectExportDirectory().then((result) => {
|
||||
if (!result.canceled && result.path) setOutputDirectory(result.path)
|
||||
})
|
||||
}}>选择位置</button>
|
||||
</div>
|
||||
{format === 'html' && (
|
||||
<p className="export-helper-text">
|
||||
可以分多次选择不同时间范围，逐步补齐同一个聊天档案。
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
<footer className="export-action-bar">
|
||||
<span className={`export-ready-dot ${status === 'completed' ? 'completed' : ''}`} />
|
||||
<span>
|
||||
{status === 'running'
|
||||
? '正在后台导出'
|
||||
: status === 'completed'
|
||||
? '导出完成'
|
||||
: '准备就绪'}
|
||||
</span>
|
||||
<span className="export-target-summary">路径：{selectedTargetPath}</span>
|
||||
<button type="button" className="export-reset-button" onClick={resetDefaults}>
|
||||
恢复默认
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="export-primary-button"
|
||||
disabled={!activeContact || !exportContacts.length || status === 'running'}
|
||||
onClick={handleStart}
|
||||
>
|
||||
{status === 'running' ? '正在导出' : status === 'completed' ? '再次导出' : '开始导出'}
|
||||
</button>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<ExportPreviewPanel
|
||||
status={status}
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { AccountSummary } from '../account/AccountSummary'
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
Button
|
||||
} from '../ui'
|
||||
import type { GeneratedReportRecord } from './types'
|
||||
|
||||
interface SelfInfo {
|
||||
@@ -90,6 +100,15 @@ export function ReportHistorySidebar({
|
||||
const [keyword, setKeyword] = useState('')
|
||||
const [pendingDelete, setPendingDelete] = useState<GeneratedReportRecord | null>(null)
|
||||
const [deleteError, setDeleteError] = useState('')
|
||||
const [deletePending, setDeletePending] = useState(false)
|
||||
const deleteTriggerRef = useRef<HTMLButtonElement | null>(null)
|
||||
const restoreDeleteFocusRef = useRef(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (pendingDelete || !restoreDeleteFocusRef.current) return
|
||||
restoreDeleteFocusRef.current = false
|
||||
deleteTriggerRef.current?.focus()
|
||||
}, [pendingDelete])
|
||||
|
||||
const reportGroups = useMemo(() => {
|
||||
const lower = keyword.trim().toLowerCase()
|
||||
@@ -108,12 +127,18 @@ export function ReportHistorySidebar({
|
||||
const confirmDelete = async (): Promise<void> => {
|
||||
if (!pendingDelete) return
|
||||
setDeleteError('')
|
||||
setDeletePending(true)
|
||||
try {
|
||||
const result = await onDeleteReport(pendingDelete.id)
|
||||
if (!result.success) {
|
||||
setDeleteError(result.error || '删除日报失败')
|
||||
return
|
||||
}
|
||||
restoreDeleteFocusRef.current = false
|
||||
setPendingDelete(null)
|
||||
} finally {
|
||||
setDeletePending(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -179,14 +204,19 @@ export function ReportHistorySidebar({
|
||||
type="button"
|
||||
className="report-history-delete"
|
||||
title="删除日报"
|
||||
aria-label="删除日报"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation()
|
||||
deleteTriggerRef.current = event.currentTarget
|
||||
restoreDeleteFocusRef.current = true
|
||||
setPendingDelete(report)
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key !== 'Enter' && event.key !== ' ') return
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
deleteTriggerRef.current = event.currentTarget
|
||||
restoreDeleteFocusRef.current = true
|
||||
setPendingDelete(report)
|
||||
}}
|
||||
>
|
||||
@@ -211,23 +241,39 @@ export function ReportHistorySidebar({
|
||||
onClick={onOpenSettings}
|
||||
/>
|
||||
</div>
|
||||
{pendingDelete && (
|
||||
<div className="report-delete-confirm" role="dialog" aria-modal="true">
|
||||
<div className="report-delete-confirm-card">
|
||||
<h2>删除日报？</h2>
|
||||
<p>只删除本地生成报告，不会影响微信聊天记录。</p>
|
||||
{deleteError && <p className="report-delete-error">{deleteError}</p>}
|
||||
<div>
|
||||
<button type="button" onClick={() => setPendingDelete(null)}>
|
||||
<AlertDialog
|
||||
open={Boolean(pendingDelete)}
|
||||
onOpenChange={(open) => {
|
||||
if (!open && !deletePending) {
|
||||
setPendingDelete(null)
|
||||
setDeleteError('')
|
||||
}
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>删除日报？</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
只删除本地生成报告，不会影响微信聊天记录。
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
{deleteError && <p className="text-sm text-destructive">{deleteError}</p>}
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel asChild>
|
||||
<Button variant="outline" disabled={deletePending}>
|
||||
取消
|
||||
</button>
|
||||
<button type="button" className="danger" onClick={() => void confirmDelete()}>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</AlertDialogCancel>
|
||||
<Button
|
||||
variant="destructive"
|
||||
disabled={deletePending}
|
||||
onClick={() => void confirmDelete()}
|
||||
>
|
||||
{deletePending ? '删除中…' : '删除'}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,17 @@
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import React from 'react'
|
||||
import {
|
||||
SELECTABLE_REPORT_TEMPLATES,
|
||||
type SelectableReportTemplateId
|
||||
} from '../../../../shared/report-templates'
|
||||
import {
|
||||
Button,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger
|
||||
} from '../ui'
|
||||
|
||||
interface ReportToolbarProps {
|
||||
canCopyImage: boolean
|
||||
@@ -37,99 +46,82 @@ export function ReportToolbar({
|
||||
onShare,
|
||||
onSendToGroup
|
||||
}: ReportToolbarProps): React.ReactElement {
|
||||
const [moreOpen, setMoreOpen] = useState(false)
|
||||
const [templateOpen, setTemplateOpen] = useState(false)
|
||||
const menuRef = useRef<HTMLDivElement>(null)
|
||||
const templateMenuRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!moreOpen && !templateOpen) return
|
||||
const close = (event: PointerEvent): void => {
|
||||
if (!menuRef.current?.contains(event.target as Node)) setMoreOpen(false)
|
||||
if (!templateMenuRef.current?.contains(event.target as Node)) setTemplateOpen(false)
|
||||
}
|
||||
window.addEventListener('pointerdown', close)
|
||||
return () => window.removeEventListener('pointerdown', close)
|
||||
}, [moreOpen, templateOpen])
|
||||
|
||||
return (
|
||||
<div className="report-viewer-toolbar">
|
||||
<div className="report-template-switch-menu" ref={templateMenuRef}>
|
||||
<button
|
||||
type="button"
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={!canSwitchTemplate || isSwitchingTemplate}
|
||||
title={
|
||||
canSwitchTemplate
|
||||
? '使用已生成的数据或本地 HTML 更换展示模板，不会重新调用 AI'
|
||||
: '当前报告缺少可复用数据和 HTML，无法切换模板'
|
||||
}
|
||||
onClick={() => setTemplateOpen((open) => !open)}
|
||||
>
|
||||
{isSwitchingTemplate ? '切换中…' : '切换模板'}
|
||||
</button>
|
||||
{templateOpen && canSwitchTemplate && (
|
||||
<div className="report-template-switch-popover" role="menu" aria-label="切换日报模板">
|
||||
<p>仅重新排版，不调用 AI</p>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-64" align="end" aria-label="切换日报模板">
|
||||
<DropdownMenuLabel>仅重新排版，不调用 AI</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{SELECTABLE_REPORT_TEMPLATES.map((template) => (
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
className={template.id === currentTemplateId ? 'active' : undefined}
|
||||
<DropdownMenuItem
|
||||
className="grid min-h-11 grid-cols-[62px_minmax(0,1fr)_auto] gap-2"
|
||||
key={template.id}
|
||||
onClick={() => {
|
||||
setTemplateOpen(false)
|
||||
onSwitchTemplate(template.id)
|
||||
}}
|
||||
onSelect={() => onSwitchTemplate(template.id)}
|
||||
>
|
||||
<span>{template.label}</span>
|
||||
<b>{template.name}</b>
|
||||
{template.id === currentTemplateId && <i>当前</i>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">{template.label}</span>
|
||||
<strong className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold">
|
||||
{template.name}
|
||||
</strong>
|
||||
{template.id === currentTemplateId && (
|
||||
<span className="text-xs text-primary">当前</span>
|
||||
)}
|
||||
</div>
|
||||
<button type="button" onClick={onRegenerate}>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Button variant="outline" size="sm" onClick={onRegenerate}>
|
||||
重新生成
|
||||
</button>
|
||||
<button type="button" disabled={!canCopyImage} onClick={onCopyImage}>
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" disabled={!canCopyImage} onClick={onCopyImage}>
|
||||
复制图片
|
||||
</button>
|
||||
</Button>
|
||||
<span
|
||||
className="report-toolbar-button-hint"
|
||||
title={sendToGroupHint}
|
||||
aria-label={sendToGroupHint}
|
||||
tabIndex={canSendToGroup ? -1 : 0}
|
||||
>
|
||||
<button type="button" disabled={!canSendToGroup} onClick={() => onSendToGroup?.()}>
|
||||
发送到当前群聊
|
||||
</button>
|
||||
</span>
|
||||
<button type="button" className="primary" disabled={!canReveal} onClick={onReveal}>
|
||||
打开报告
|
||||
</button>
|
||||
<button type="button" disabled={!canShare} onClick={onShare}>
|
||||
生成微信卡片
|
||||
</button>
|
||||
<div className="report-more-menu" ref={menuRef}>
|
||||
<button type="button" onClick={() => setMoreOpen((open) => !open)}>
|
||||
更多
|
||||
</button>
|
||||
{moreOpen && (
|
||||
<div className="report-more-popover">
|
||||
<button
|
||||
type="button"
|
||||
disabled={!canReveal}
|
||||
onClick={() => {
|
||||
setMoreOpen(false)
|
||||
onReveal()
|
||||
}}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={!canSendToGroup}
|
||||
onClick={() => onSendToGroup?.()}
|
||||
>
|
||||
发送到当前群聊
|
||||
</Button>
|
||||
</span>
|
||||
<Button size="sm" disabled={!canReveal} onClick={onReveal}>
|
||||
打开报告
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
更多
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem disabled={!canShare} onSelect={onShare}>
|
||||
生成微信卡片
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem disabled={!canReveal} onSelect={onReveal}>
|
||||
打开文件夹
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import type { PublishWechatShareCardResult } from '../../../../shared/wechat-share-card'
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
Input,
|
||||
Textarea
|
||||
} from '../ui'
|
||||
|
||||
interface WechatShareCardDialogProps {
|
||||
pngPath: string
|
||||
@@ -25,6 +34,14 @@ export function WechatShareCardDialog({
|
||||
const [error, setError] = useState('')
|
||||
const [result, setResult] = useState<PublishWechatShareCardResult | null>(null)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const restoreFocusRef = useRef<HTMLElement | null>(null)
|
||||
|
||||
const closeDialog = (): void => {
|
||||
const restoreFocus = restoreFocusRef.current
|
||||
restoreFocusRef.current = null
|
||||
onClose()
|
||||
queueMicrotask(() => restoreFocus?.focus())
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
void window.api.getWechatShareConfig().then((response) => {
|
||||
@@ -34,19 +51,6 @@ export function WechatShareCardDialog({
|
||||
})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const previousOverflow = document.body.style.overflow
|
||||
document.body.style.overflow = 'hidden'
|
||||
const closeOnEscape = (event: KeyboardEvent): void => {
|
||||
if (event.key === 'Escape' && !busy) onClose()
|
||||
}
|
||||
window.addEventListener('keydown', closeOnEscape)
|
||||
return () => {
|
||||
document.body.style.overflow = previousOverflow
|
||||
window.removeEventListener('keydown', closeOnEscape)
|
||||
}
|
||||
}, [busy, onClose])
|
||||
|
||||
const publish = async (): Promise<void> => {
|
||||
setBusy(true)
|
||||
setError('')
|
||||
@@ -82,55 +86,57 @@ export function WechatShareCardDialog({
|
||||
setCopied(true)
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<div className="wechat-share-dialog-backdrop" role="presentation" onMouseDown={onClose}>
|
||||
<section
|
||||
className="wechat-share-dialog"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="wechat-share-title"
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
return (
|
||||
<Dialog open onOpenChange={(open) => !open && closeDialog()}>
|
||||
<DialogContent
|
||||
className="max-h-[calc(100vh-3rem)] max-w-[540px] overflow-y-auto p-0"
|
||||
onOpenAutoFocus={() => {
|
||||
restoreFocusRef.current =
|
||||
document.activeElement instanceof HTMLElement ? document.activeElement : null
|
||||
}}
|
||||
onEscapeKeyDown={(event) => busy && event.preventDefault()}
|
||||
>
|
||||
<header>
|
||||
<div>
|
||||
<h2 id="wechat-share-title">生成微信分享卡片</h2>
|
||||
<p>卡片和日报将在 7 天后自动失效。</p>
|
||||
</div>
|
||||
<button type="button" className="wechat-share-dialog-close" onClick={onClose}>
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
<DialogHeader className="border-b border-border px-6 py-5 pr-12">
|
||||
<DialogTitle className="text-xl">生成微信分享卡片</DialogTitle>
|
||||
<DialogDescription>卡片和日报将在 7 天后自动失效。</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{result?.qrCodeDataUrl ? (
|
||||
<div className="wechat-share-success">
|
||||
<img src={result.qrCodeDataUrl} alt="微信分享二维码" />
|
||||
<h3>使用微信扫码</h3>
|
||||
<p>打开页面后点击右上角 ···，发送给好友或群聊。</p>
|
||||
<div className="grid justify-items-center gap-3 p-7 text-center">
|
||||
<img
|
||||
className="w-[260px] max-w-[80%] rounded-lg border-[10px] border-surface shadow-floating"
|
||||
src={result.qrCodeDataUrl}
|
||||
alt="微信分享二维码"
|
||||
/>
|
||||
<h3 className="text-lg font-semibold">使用微信扫码</h3>
|
||||
<p className="text-sm leading-relaxed text-muted-foreground">
|
||||
打开页面后点击右上角 ···，发送给好友或群聊。
|
||||
</p>
|
||||
{result.expiresAt && (
|
||||
<small>有效期至 {new Date(result.expiresAt).toLocaleString('zh-CN')}</small>
|
||||
<small className="text-muted-foreground">
|
||||
有效期至 {new Date(result.expiresAt).toLocaleString('zh-CN')}
|
||||
</small>
|
||||
)}
|
||||
<div>
|
||||
<button type="button" onClick={() => void copyLink()}>
|
||||
<div className="mt-3 flex justify-end gap-2">
|
||||
<Button variant="outline" onClick={() => void copyLink()}>
|
||||
{copied ? '链接已复制' : '复制分享链接'}
|
||||
</button>
|
||||
<button type="button" className="primary" onClick={onClose}>
|
||||
完成
|
||||
</button>
|
||||
</Button>
|
||||
<Button onClick={closeDialog}>完成</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="wechat-share-form">
|
||||
<label>
|
||||
<span>卡片标题</span>
|
||||
<input
|
||||
<div className="grid gap-4 px-6 py-5">
|
||||
<label className="grid gap-2">
|
||||
<span className="text-sm font-medium">卡片标题</span>
|
||||
<Input
|
||||
maxLength={64}
|
||||
value={title}
|
||||
onChange={(event) => setTitle(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>卡片描述</span>
|
||||
<textarea
|
||||
<label className="grid gap-2">
|
||||
<span className="text-sm font-medium">卡片描述</span>
|
||||
<Textarea
|
||||
maxLength={120}
|
||||
rows={3}
|
||||
value={description}
|
||||
@@ -138,29 +144,31 @@ export function WechatShareCardDialog({
|
||||
/>
|
||||
</label>
|
||||
{configured === true && !editingConfig && (
|
||||
<div className="wechat-share-service-summary">
|
||||
<div>
|
||||
<span>卡片服务</span>
|
||||
<b>{serviceUrl}</b>
|
||||
<div className="flex min-w-0 items-center justify-between gap-3 rounded-md border border-border bg-background p-3">
|
||||
<div className="grid min-w-0 gap-1">
|
||||
<span className="text-xs text-muted-foreground">卡片服务</span>
|
||||
<b className="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
|
||||
{serviceUrl}
|
||||
</b>
|
||||
</div>
|
||||
<button type="button" onClick={() => setEditingConfig(true)}>
|
||||
<Button variant="outline" size="sm" onClick={() => setEditingConfig(true)}>
|
||||
更改
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{(configured === false || editingConfig) && (
|
||||
<div className="wechat-share-service-config">
|
||||
<h3>首次配置卡片服务</h3>
|
||||
<label>
|
||||
<span>服务地址</span>
|
||||
<input
|
||||
<div className="grid min-w-0 gap-3 rounded-md border border-primary/20 bg-primary/5 p-4">
|
||||
<h3 className="text-sm font-semibold text-primary">首次配置卡片服务</h3>
|
||||
<label className="grid gap-2">
|
||||
<span className="text-sm font-medium">服务地址</span>
|
||||
<Input
|
||||
value={serviceUrl}
|
||||
onChange={(event) => setServiceUrl(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>上传密钥</span>
|
||||
<input
|
||||
<label className="grid gap-2">
|
||||
<span className="text-sm font-medium">上传密钥</span>
|
||||
<Input
|
||||
type="password"
|
||||
autoComplete="off"
|
||||
value={uploadToken}
|
||||
@@ -168,20 +176,20 @@ export function WechatShareCardDialog({
|
||||
placeholder="Cloudflare Worker 的 UPLOAD_TOKEN"
|
||||
/>
|
||||
</label>
|
||||
<p>上传密钥仅加密保存在本机，不是公众号 AppSecret。</p>
|
||||
<p className="text-xs leading-relaxed text-muted-foreground">
|
||||
上传密钥仅加密保存在本机，不是公众号 AppSecret。
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="wechat-share-privacy">
|
||||
<div className="rounded-md bg-muted p-3 text-xs leading-relaxed text-muted-foreground">
|
||||
生成后会将当前日报长图和缩略图上传到你的私有 R2 存储。
|
||||
</div>
|
||||
{error && <p className="report-inline-error">{error}</p>}
|
||||
<footer>
|
||||
<button type="button" onClick={onClose}>
|
||||
{error && <p className="text-sm text-destructive">{error}</p>}
|
||||
<footer className="flex justify-end gap-2">
|
||||
<Button variant="outline" onClick={closeDialog}>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="primary"
|
||||
</Button>
|
||||
<Button
|
||||
disabled={
|
||||
busy ||
|
||||
configured === null ||
|
||||
@@ -191,12 +199,11 @@ export function WechatShareCardDialog({
|
||||
onClick={() => void publish()}
|
||||
>
|
||||
{busy ? '正在生成卡片…' : '生成二维码'}
|
||||
</button>
|
||||
</Button>
|
||||
</footer>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>,
|
||||
document.body
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
import * as React from 'react'
|
||||
import { Button, Popover, PopoverClose, PopoverContent, PopoverTrigger, Textarea } from '../ui'
|
||||
|
||||
export interface AISearchComposerProps {
|
||||
query: string
|
||||
sourceLabel: string
|
||||
rangeLabel: string
|
||||
history: string[]
|
||||
historyOpen: boolean
|
||||
loading: boolean
|
||||
knowledgeSyncing: boolean
|
||||
inputRef?: React.Ref<HTMLTextAreaElement>
|
||||
onQueryChange: (value: string) => void
|
||||
onHistoryOpenChange: (open: boolean) => void
|
||||
onRestoreHistory: (query: string) => void
|
||||
onRemoveHistory: (query: string) => void
|
||||
onSubmit: () => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
export function AISearchComposer({
|
||||
query,
|
||||
sourceLabel,
|
||||
rangeLabel,
|
||||
history,
|
||||
historyOpen,
|
||||
loading,
|
||||
knowledgeSyncing,
|
||||
inputRef,
|
||||
onQueryChange,
|
||||
onHistoryOpenChange,
|
||||
onRestoreHistory,
|
||||
onRemoveHistory,
|
||||
onSubmit,
|
||||
onCancel
|
||||
}: AISearchComposerProps): React.ReactElement {
|
||||
return (
|
||||
<form
|
||||
className="relative border-t border-border bg-surface px-[18px] pb-3.5 pt-3 [@media(max-height:820px)]:pb-2.5 [@media(max-height:820px)]:pt-[9px]"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
onSubmit()
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-[7px] text-[10px] leading-[15px] text-muted-foreground">
|
||||
<span>正在询问</span>
|
||||
<strong className="font-bold text-primary">{sourceLabel}</strong>
|
||||
<span className="text-foreground/70">{rangeLabel}</span>
|
||||
<Popover open={historyOpen} onOpenChange={onHistoryOpenChange}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="ml-auto h-6 rounded-full bg-background px-2 text-[10px] text-primary shadow-none"
|
||||
>
|
||||
历史提问{history.length ? ` · ${history.length}` : ''}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="max-h-[236px] w-[min(420px,calc(100vw-36px))] overflow-y-auto p-2.5"
|
||||
aria-label="历史提问"
|
||||
side="top"
|
||||
align="end"
|
||||
sideOffset={8}
|
||||
collisionPadding={16}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2 px-1 pb-2 text-xs font-semibold">
|
||||
<span>历史提问</span>
|
||||
<PopoverClose asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 text-base text-muted-foreground"
|
||||
aria-label="关闭历史提问"
|
||||
>
|
||||
<span aria-hidden>×</span>
|
||||
</Button>
|
||||
</PopoverClose>
|
||||
</div>
|
||||
{history.length ? (
|
||||
history.map((item) => (
|
||||
<div className="flex items-center gap-1" key={item}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-8 min-w-0 flex-1 justify-start overflow-hidden px-2 text-xs font-normal text-muted-foreground"
|
||||
onClick={() => onRestoreHistory(item)}
|
||||
title={item}
|
||||
>
|
||||
<span className="overflow-hidden text-ellipsis whitespace-nowrap">{item}</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 text-base text-muted-foreground"
|
||||
onClick={() => onRemoveHistory(item)}
|
||||
aria-label={`删除历史问题：${item}`}
|
||||
title="删除这条历史问题"
|
||||
>
|
||||
<span aria-hidden>×</span>
|
||||
</Button>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<span className="block px-1 pb-1 pt-2 text-[10px] text-muted-foreground">
|
||||
还没有历史提问
|
||||
</span>
|
||||
)}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div className="mt-[7px] flex items-end gap-2">
|
||||
<Textarea
|
||||
ref={inputRef}
|
||||
value={query}
|
||||
onChange={(event) => onQueryChange(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing) return
|
||||
event.preventDefault()
|
||||
onSubmit()
|
||||
}}
|
||||
className="min-h-[56px] min-w-0 flex-1 resize-none bg-background px-2.5 py-2 text-xs leading-[18px]"
|
||||
placeholder="例如：技术交流群最近讨论了哪些 Windows 性能问题？"
|
||||
rows={2}
|
||||
/>
|
||||
{loading ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="border-destructive/50 bg-destructive/10 px-3 text-[11px] text-destructive hover:bg-destructive/15 hover:text-destructive"
|
||||
onClick={(event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
onCancel()
|
||||
}}
|
||||
>
|
||||
取消分析
|
||||
<span aria-hidden className="text-base leading-3">
|
||||
×
|
||||
</span>
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
className="px-3 text-[11px]"
|
||||
disabled={knowledgeSyncing}
|
||||
title={knowledgeSyncing ? '知识库同步完成后才能开始分析' : undefined}
|
||||
>
|
||||
{knowledgeSyncing ? '同步中，暂不可分析' : '开始分析'}
|
||||
<span aria-hidden className="text-base leading-3">
|
||||
→
|
||||
</span>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1.5 flex items-center justify-between gap-2 text-[10px] leading-[15px] text-muted-foreground">
|
||||
<span>Enter 发送 · Shift + Enter 换行</span>
|
||||
<span>AI 仅使用当前搜索所需的受控证据</span>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import * as React from 'react'
|
||||
import { Button, EmptyState } from '../ui'
|
||||
import type { EvidenceItem } from './searchTypes'
|
||||
import { formatMessageTime, messageIdentity, messageText, senderName } from './searchUtils'
|
||||
|
||||
export interface AISearchEvidencePanelProps {
|
||||
evidence: EvidenceItem[]
|
||||
collectionCount: number
|
||||
selectedEvidence: number
|
||||
evidenceFlash: { index: number; nonce: number }
|
||||
senderNames: Record<string, string>
|
||||
hasMoreEvidence: boolean
|
||||
onFocusEvidence: (index: number) => void
|
||||
onJumpToEvidence: (index: number) => void
|
||||
onLoadMoreEvidence: () => void
|
||||
setEvidenceCardRef: (index: number, node: HTMLElement | null) => void
|
||||
}
|
||||
|
||||
export function AISearchEvidencePanel({
|
||||
evidence,
|
||||
collectionCount,
|
||||
selectedEvidence,
|
||||
evidenceFlash,
|
||||
senderNames,
|
||||
hasMoreEvidence,
|
||||
onFocusEvidence,
|
||||
onJumpToEvidence,
|
||||
onLoadMoreEvidence,
|
||||
setEvidenceCardRef
|
||||
}: AISearchEvidencePanelProps): React.ReactElement {
|
||||
return (
|
||||
<aside className="min-h-0 min-w-0 overflow-y-auto border-l border-border bg-surface-muted px-3.5 py-4 [@media(max-height:820px)]:pt-3">
|
||||
<div className="mb-3.5 flex items-start justify-between gap-2.5">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[10px] leading-[15px] text-muted-foreground">可追溯数据</span>
|
||||
<strong className="text-sm font-bold leading-5 text-foreground">证据与来源</strong>
|
||||
</div>
|
||||
{collectionCount > 0 && (
|
||||
<span className="whitespace-nowrap rounded-md bg-accent px-1.5 py-0.5 text-[10px] font-bold leading-4 text-accent-foreground">
|
||||
{evidence.length}/{collectionCount} 条样本
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{evidence.length ? (
|
||||
evidence.map((item, index) => {
|
||||
const selected = selectedEvidence === index
|
||||
const flashing = evidenceFlash.index === index
|
||||
const evidenceLabel = item.evidenceId || `E${index + 1}`
|
||||
const evidenceSender = senderName(item.message, item.contact, senderNames)
|
||||
return (
|
||||
<article
|
||||
key={`${messageIdentity(item.message)}-${index}-${flashing ? evidenceFlash.nonce : 0}`}
|
||||
ref={(node) => setEvidenceCardRef(index, node)}
|
||||
className={`group relative mb-2 block w-full rounded-md border bg-surface-elevated p-3 text-left text-foreground shadow-surface transition-colors duration-fast ease-tm-standard has-[:hover]:border-primary ${selected ? 'border-primary bg-accent' : 'border-border'} ${flashing ? 'focus-flash ai-search-evidence-focus-flash' : ''}`}
|
||||
style={{ animationDelay: `${Math.min(index, 7) * 45}ms` }}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute inset-0 z-0 cursor-pointer rounded-md border-0 bg-transparent p-0 hover:bg-accent/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
|
||||
aria-label={`选择证据 ${evidenceLabel}，${evidenceSender}`}
|
||||
onClick={() => onFocusEvidence(index)}
|
||||
>
|
||||
<span className="sr-only">选择这条证据</span>
|
||||
</button>
|
||||
<div className="pointer-events-none relative z-[1]">
|
||||
<span className="flex justify-between gap-2">
|
||||
<strong className="overflow-hidden text-ellipsis whitespace-nowrap text-[11px] font-bold">
|
||||
{evidenceLabel} · {evidenceSender}
|
||||
</strong>
|
||||
<time className="shrink-0 text-[9px] text-muted-foreground">
|
||||
{formatMessageTime(item.message)}
|
||||
</time>
|
||||
</span>
|
||||
<span className="mt-0.5 block text-[10px] leading-[15px] text-primary">
|
||||
{item.contact.m_nsNickName}
|
||||
</span>
|
||||
{item.sourceKind === 'voice' && (
|
||||
<span className="block text-[11px] font-semibold text-primary">语音转写</span>
|
||||
)}
|
||||
<span className="mt-[7px] block overflow-hidden text-[11px] leading-[17px] text-muted-foreground [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:3]">
|
||||
{messageText(item.message)}
|
||||
</span>
|
||||
<Button
|
||||
variant="link"
|
||||
size="sm"
|
||||
className="pointer-events-auto relative z-[2] mt-1.5 h-auto p-0 text-[10px] font-bold"
|
||||
onClick={() => onJumpToEvidence(index)}
|
||||
>
|
||||
跳转到原聊天 ↗
|
||||
</Button>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<EmptyState
|
||||
className="min-h-[260px] border-0 bg-transparent px-6 py-8"
|
||||
icon={<span className="text-[34px] leading-none opacity-60">⌕</span>}
|
||||
title="等待检索结果"
|
||||
description="分析完成后，这里会显示支持结论的原始消息。"
|
||||
/>
|
||||
)}
|
||||
{hasMoreEvidence && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mb-3 mt-1 w-full text-[11px] font-bold text-primary"
|
||||
onClick={onLoadMoreEvidence}
|
||||
>
|
||||
加载更多证据
|
||||
</Button>
|
||||
)}
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
import React, { useMemo, useRef, useState } from 'react'
|
||||
import * as Popover from '@radix-ui/react-popover'
|
||||
import { aiSearchIntentLabel, aiSearchRangeStart } from '../../../../shared/ai-search'
|
||||
import type { AiSearchProgressEvent, AiSearchTimeRange } from '../../../../shared/ai-search'
|
||||
|
||||
@@ -10,14 +9,7 @@ import type {
|
||||
SearchStage,
|
||||
SearchTrace
|
||||
} from './searchTypes'
|
||||
import {
|
||||
RANGE_LABELS,
|
||||
buildSearchCacheKey,
|
||||
formatMessageTime,
|
||||
messageIdentity,
|
||||
messageText,
|
||||
senderName
|
||||
} from './searchUtils'
|
||||
import { RANGE_LABELS, createSearchRequestContext } from './searchUtils'
|
||||
import { markdownToPlainText, renderMarkdown } from './searchMarkdown'
|
||||
import {
|
||||
contactLabel,
|
||||
@@ -27,17 +19,17 @@ import {
|
||||
formatSearchTraceOverview,
|
||||
knowledgeStateLabel
|
||||
} from './searchFormatters'
|
||||
import {
|
||||
mapEvidenceSenderNames,
|
||||
mapPipelineEvidence,
|
||||
mapSearchResultToTrace
|
||||
} from './searchMappers'
|
||||
import { createSearchResultResetState } from './searchState'
|
||||
import { mapPipelineResultToRendererResult } from './searchMappers'
|
||||
import { createSearchResultResetState, resolveSearchResultViewTransition } from './searchState'
|
||||
import { useSearchHistory } from './hooks/useSearchHistory'
|
||||
import { useKnowledgeStatus } from './hooks/useKnowledgeStatus'
|
||||
import { useExternalProviderConsent } from './hooks/useExternalProviderConsent'
|
||||
import { EVIDENCE_PAGE_SIZE, useEvidenceCollection } from './hooks/useEvidenceCollection'
|
||||
import { useAiSearchRun } from './hooks/useAiSearchRun'
|
||||
import { ensureAiSearchDataConsent } from './services/aiSearchProviderConsent'
|
||||
import { ExternalProviderConsentDialog } from './ExternalProviderConsentDialog'
|
||||
import { AISearchComposer } from './AISearchComposer'
|
||||
import { AISearchEvidencePanel } from './AISearchEvidencePanel'
|
||||
|
||||
export function AISearchWorkspace({
|
||||
contacts,
|
||||
@@ -200,24 +192,6 @@ export function AISearchWorkspace({
|
||||
const modelLabel = aiModelConfig.configured
|
||||
? `${aiModelConfig.providerName} · ${aiModelConfig.modelName}`
|
||||
: '尚未配置 AI 模型'
|
||||
const ensureAiSearchDataConsent = async (requestId: string): Promise<boolean> => {
|
||||
const status = await window.api.getAiSearchProviderStatus()
|
||||
if (!status.configured || !status.requiresConsent) return true
|
||||
if (!status.providerId || !status.recipient) throw new Error('当前 AI 服务信息不完整')
|
||||
const confirmed = await requestExternalProviderConsent(
|
||||
status.providerName || '当前 AI 服务',
|
||||
status.recipient
|
||||
)
|
||||
if (!confirmed) return false
|
||||
const authorized = await window.api.authorizeAiSearchExternalProvider({
|
||||
requestId,
|
||||
providerId: status.providerId,
|
||||
recipient: status.recipient
|
||||
})
|
||||
if (!authorized.success) throw new Error(authorized.error || '无法确认本次数据发送授权')
|
||||
return true
|
||||
}
|
||||
|
||||
const cancelAnalysis = async (): Promise<void> => {
|
||||
clearExternalProviderConsent()
|
||||
const requestId = searchRunRequestId
|
||||
@@ -247,7 +221,20 @@ export function AISearchWorkspace({
|
||||
onNotice('知识库正在同步，请等待同步完成后再开始分析')
|
||||
return
|
||||
}
|
||||
const normalizedQuery = query.trim()
|
||||
const {
|
||||
normalizedQuery,
|
||||
effectiveRange,
|
||||
effectiveTimeRangeOverride,
|
||||
conversationId,
|
||||
cacheKey
|
||||
} = createSearchRequestContext({
|
||||
query,
|
||||
scope,
|
||||
range,
|
||||
timeRangeOverride,
|
||||
activeContactMd5: activeContact?.md5,
|
||||
retry
|
||||
})
|
||||
if (!normalizedQuery) {
|
||||
setAnalysisError('先输入一个想了解的问题')
|
||||
setStage('insufficient')
|
||||
@@ -258,14 +245,6 @@ export function AISearchWorkspace({
|
||||
setStage('insufficient')
|
||||
return
|
||||
}
|
||||
const effectiveRange = retry?.range || range
|
||||
const effectiveTimeRangeOverride = retry?.timeRangeOverride || timeRangeOverride
|
||||
const cacheKey = buildSearchCacheKey(
|
||||
scope,
|
||||
scope === 'conversation' ? activeContact?.md5 || '' : '',
|
||||
effectiveRange,
|
||||
normalizedQuery
|
||||
)
|
||||
try {
|
||||
const cached = consumeCacheBypass() ? null : readCachedResult(cacheKey)
|
||||
if (cached) {
|
||||
@@ -281,7 +260,13 @@ export function AISearchWorkspace({
|
||||
}
|
||||
const requestId = createRequestId()
|
||||
try {
|
||||
if (!(await ensureAiSearchDataConsent(requestId))) {
|
||||
if (
|
||||
!(await ensureAiSearchDataConsent({
|
||||
requestId,
|
||||
api: window.api,
|
||||
requestExternalProviderConsent
|
||||
}))
|
||||
) {
|
||||
onNotice('已取消本次 AI Search，未执行检索，也未向远程 AI 服务发送聊天内容')
|
||||
return
|
||||
}
|
||||
@@ -300,7 +285,7 @@ export function AISearchWorkspace({
|
||||
text: normalizedQuery,
|
||||
scope,
|
||||
range: effectiveRange,
|
||||
conversationId: scope === 'conversation' ? activeContact?.md5 : undefined,
|
||||
conversationId,
|
||||
timeRangeOverride: effectiveTimeRangeOverride
|
||||
})
|
||||
if (outcome.kind === 'stale') return
|
||||
@@ -323,47 +308,28 @@ export function AISearchWorkspace({
|
||||
elapsedMs: searchResult.elapsedMs,
|
||||
errorStage: searchResult.errorStage
|
||||
})
|
||||
const evidenceItems = mapPipelineEvidence(searchResult.evidence, allContacts)
|
||||
const collectionItems = mapPipelineEvidence(
|
||||
searchResult.evidenceCollection || searchResult.evidence,
|
||||
allContacts
|
||||
)
|
||||
setSearchTrace(mapSearchResultToTrace(searchResult, evidenceItems.length))
|
||||
setEvidenceResult(evidenceItems, collectionItems)
|
||||
const nextSenderNames = mapEvidenceSenderNames(evidenceItems)
|
||||
setSenderNames(nextSenderNames)
|
||||
setMessageCount(searchResult.knowledge.totalMessages)
|
||||
if (searchResult.status === 'no_evidence') {
|
||||
setAnalysisError(`${RANGE_LABELS[effectiveRange]}内没有找到与问题相关的聊天消息。`)
|
||||
setStage('insufficient')
|
||||
const mappedResult = mapPipelineResultToRendererResult(searchResult, allContacts)
|
||||
setSearchTrace(mappedResult.searchTrace)
|
||||
setEvidenceResult(mappedResult.evidence, mappedResult.evidenceCollection)
|
||||
setSenderNames(mappedResult.senderNames)
|
||||
setMessageCount(mappedResult.messageCount)
|
||||
const viewTransition = resolveSearchResultViewTransition(searchResult, effectiveRange)
|
||||
if (viewTransition.stage !== 'result') {
|
||||
setAnalysisError(viewTransition.analysisError)
|
||||
setStage(viewTransition.stage)
|
||||
return
|
||||
}
|
||||
if (searchResult.status === 'retrieval_incomplete') {
|
||||
setAnalysisError(searchResult.error || '当前检索未完整覆盖聊天记录，未生成总结。')
|
||||
setStage('partial')
|
||||
return
|
||||
}
|
||||
if (searchResult.status === 'failed') {
|
||||
setAnalysisError(searchResult.error || '本地搜索暂时无法完成')
|
||||
setStage('insufficient')
|
||||
return
|
||||
}
|
||||
if (searchResult.status === 'ai_failed') {
|
||||
setAnalysisError(searchResult.error || '证据已找到，但 AI 暂时无法生成回答')
|
||||
setStage('partial')
|
||||
return
|
||||
}
|
||||
if (!searchResult.answer) throw new Error('搜索任务未返回回答')
|
||||
if (!viewTransition.answer) throw new Error('搜索任务未返回回答')
|
||||
setResultQuery(normalizedQuery)
|
||||
setAnswer(searchResult.answer)
|
||||
setAnswer(viewTransition.answer)
|
||||
rememberQuery(normalizedQuery)
|
||||
persistSearchResult({
|
||||
key: cacheKey,
|
||||
answer: searchResult.answer,
|
||||
evidence: evidenceItems,
|
||||
evidenceCollection: collectionItems,
|
||||
senderNames: nextSenderNames,
|
||||
messageCount: searchResult.knowledge.totalMessages
|
||||
answer: viewTransition.answer,
|
||||
evidence: mappedResult.evidence,
|
||||
evidenceCollection: mappedResult.evidenceCollection,
|
||||
senderNames: mappedResult.senderNames,
|
||||
messageCount: mappedResult.messageCount
|
||||
})
|
||||
setStage('result')
|
||||
} catch (error) {
|
||||
@@ -1038,212 +1004,41 @@ export function AISearchWorkspace({
|
||||
{stage === 'partial' && renderPartial()}
|
||||
{stage === 'insufficient' && renderInsufficient()}
|
||||
</div>
|
||||
<form className="ai-search-composer" onSubmit={(event) => void runAnalysis(event)}>
|
||||
<div className="ai-search-composer-meta">
|
||||
<span>正在询问</span>
|
||||
<strong>{sourceLabel}</strong>
|
||||
<em>{RANGE_LABELS[range]}</em>
|
||||
<Popover.Root open={historyOpen} onOpenChange={setHistoryOpen}>
|
||||
<Popover.Trigger asChild>
|
||||
<button type="button" className="ai-search-history-trigger">
|
||||
历史提问{history.length ? ` · ${history.length}` : ''}
|
||||
</button>
|
||||
</Popover.Trigger>
|
||||
<Popover.Portal>
|
||||
<Popover.Content
|
||||
className="ai-search-history-popover"
|
||||
aria-label="历史提问"
|
||||
side="top"
|
||||
align="end"
|
||||
sideOffset={8}
|
||||
collisionPadding={16}
|
||||
>
|
||||
<div className="ai-search-history-popover-heading">
|
||||
<strong>历史提问</strong>
|
||||
<Popover.Close asChild>
|
||||
<button type="button" aria-label="关闭历史提问">
|
||||
×
|
||||
</button>
|
||||
</Popover.Close>
|
||||
</div>
|
||||
{history.length ? (
|
||||
history.map((item) => (
|
||||
<div className="ai-search-history-popover-item" key={item}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => restoreHistoryQuery(item)}
|
||||
title={item}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeHistoryQuery(item)}
|
||||
aria-label={`删除历史问题：${item}`}
|
||||
title="删除这条历史问题"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<span className="ai-search-history-empty">还没有历史提问</span>
|
||||
)}
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
</Popover.Root>
|
||||
</div>
|
||||
<div className="ai-search-composer-row">
|
||||
<textarea
|
||||
ref={composerRef}
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing) {
|
||||
return
|
||||
}
|
||||
event.preventDefault()
|
||||
void runAnalysis()
|
||||
}}
|
||||
placeholder="例如：技术交流群最近讨论了哪些 Windows 性能问题？"
|
||||
rows={2}
|
||||
<AISearchComposer
|
||||
query={query}
|
||||
sourceLabel={sourceLabel}
|
||||
rangeLabel={RANGE_LABELS[range]}
|
||||
history={history}
|
||||
historyOpen={historyOpen}
|
||||
loading={stage === 'loading'}
|
||||
knowledgeSyncing={knowledgeSyncing}
|
||||
inputRef={composerRef}
|
||||
onQueryChange={setQuery}
|
||||
onHistoryOpenChange={setHistoryOpen}
|
||||
onRestoreHistory={restoreHistoryQuery}
|
||||
onRemoveHistory={removeHistoryQuery}
|
||||
onSubmit={() => void runAnalysis()}
|
||||
onCancel={() => void cancelAnalysis()}
|
||||
/>
|
||||
{stage === 'loading' ? (
|
||||
<button
|
||||
type="button"
|
||||
className="cancel"
|
||||
onClick={(event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
void cancelAnalysis()
|
||||
}}
|
||||
>
|
||||
取消分析
|
||||
<span>×</span>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="primary"
|
||||
disabled={knowledgeSyncing}
|
||||
title={knowledgeSyncing ? '知识库同步完成后才能开始分析' : undefined}
|
||||
>
|
||||
{knowledgeSyncing ? '同步中，暂不可分析' : '开始分析'}
|
||||
<span>→</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="ai-search-composer-foot">
|
||||
<span>Enter 发送 · Shift + Enter 换行</span>
|
||||
<span>AI 仅使用当前搜索所需的受控证据</span>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
<aside className="ai-search-evidence-panel">
|
||||
<div className="ai-search-panel-heading">
|
||||
<div>
|
||||
<span>可追溯数据</span>
|
||||
<strong>证据与来源</strong>
|
||||
<AISearchEvidencePanel
|
||||
evidence={visibleEvidence}
|
||||
collectionCount={evidenceCollection.length}
|
||||
selectedEvidence={selectedEvidence}
|
||||
evidenceFlash={evidenceFlash}
|
||||
senderNames={senderNames}
|
||||
hasMoreEvidence={hasMoreEvidence}
|
||||
onFocusEvidence={focusEvidence}
|
||||
onJumpToEvidence={jumpToEvidence}
|
||||
onLoadMoreEvidence={loadMoreEvidence}
|
||||
setEvidenceCardRef={setEvidenceCardRef}
|
||||
/>
|
||||
</div>
|
||||
{evidenceCollection.length > 0 && (
|
||||
<span className="ai-search-count-badge">
|
||||
{visibleEvidence.length}/{evidenceCollection.length} 条样本
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{visibleEvidence.length ? (
|
||||
visibleEvidence.map((item, index) => (
|
||||
<article
|
||||
key={`${messageIdentity(item.message)}-${index}-${evidenceFlash.index === index ? evidenceFlash.nonce : 0}`}
|
||||
ref={(node) => {
|
||||
setEvidenceCardRef(index, node)
|
||||
}}
|
||||
className={`ai-search-evidence-card ${selectedEvidence === index ? 'active' : ''} ${evidenceFlash.index === index ? 'focus-flash' : ''}`}
|
||||
style={{ animationDelay: `${Math.min(index, 7) * 45}ms` }}
|
||||
onClick={() => {
|
||||
focusEvidence(index)
|
||||
}}
|
||||
>
|
||||
<span className="ai-search-evidence-card-top">
|
||||
<strong>
|
||||
{item.evidenceId || `E${index + 1}`} ·{' '}
|
||||
{senderName(item.message, item.contact, senderNames)}
|
||||
</strong>
|
||||
<time>{formatMessageTime(item.message)}</time>
|
||||
</span>
|
||||
<span className="ai-search-evidence-conversation">{item.contact.m_nsNickName}</span>
|
||||
{item.sourceKind === 'voice' && (
|
||||
<span className="ai-search-evidence-source-kind">语音转写</span>
|
||||
)}
|
||||
<span className="ai-search-evidence-text">{messageText(item.message)}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="ai-search-evidence-link"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation()
|
||||
jumpToEvidence(index)
|
||||
}}
|
||||
>
|
||||
跳转到原聊天 ↗
|
||||
</button>
|
||||
</article>
|
||||
))
|
||||
) : (
|
||||
<div className="ai-search-evidence-empty">
|
||||
<div>⌕</div>
|
||||
<strong>等待检索结果</strong>
|
||||
<span>分析完成后，这里会显示支持结论的原始消息。</span>
|
||||
</div>
|
||||
)}
|
||||
{hasMoreEvidence && (
|
||||
<button
|
||||
type="button"
|
||||
className="ai-search-evidence-load-more"
|
||||
onClick={loadMoreEvidence}
|
||||
>
|
||||
加载更多证据
|
||||
</button>
|
||||
)}
|
||||
</aside>
|
||||
</div>
|
||||
{externalProviderConsent && (
|
||||
<div
|
||||
className="ai-search-consent-backdrop"
|
||||
role="presentation"
|
||||
onMouseDown={() => settleExternalProviderConsent(false)}
|
||||
>
|
||||
<section
|
||||
className="ai-search-consent-dialog"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="ai-search-consent-title"
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
>
|
||||
<span className="ai-search-kicker">AI SEARCH</span>
|
||||
<h2 id="ai-search-consent-title">确认发送本次搜索资料</h2>
|
||||
<p>
|
||||
将向 <strong>{externalProviderConsent.providerName}</strong>（
|
||||
{externalProviderConsent.recipient}
|
||||
）发送当前问题、受控检索所需的受限上下文，以及最多 8 条最终 Evidence。
|
||||
</p>
|
||||
<p className="ai-search-consent-note">
|
||||
不会发送完整微信数据库、全量聊天记录、密钥、绝对路径或内部会话/消息引用 ID。
|
||||
</p>
|
||||
<div className="ai-search-consent-actions">
|
||||
<button type="button" onClick={() => settleExternalProviderConsent(false)}>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="primary"
|
||||
onClick={() => settleExternalProviderConsent(true)}
|
||||
>
|
||||
继续并发送
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
<ExternalProviderConsentDialog
|
||||
consent={externalProviderConsent}
|
||||
onCancel={() => settleExternalProviderConsent(false)}
|
||||
onConfirm={() => settleExternalProviderConsent(true)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
import * as React from 'react'
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '../ui'
|
||||
|
||||
export interface ExternalProviderConsent {
|
||||
providerName: string
|
||||
recipient: string
|
||||
}
|
||||
|
||||
export interface ExternalProviderConsentDialogProps {
|
||||
consent: ExternalProviderConsent | null
|
||||
onConfirm: () => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
export function ExternalProviderConsentDialog({
|
||||
consent,
|
||||
onConfirm,
|
||||
onCancel
|
||||
}: ExternalProviderConsentDialogProps): React.ReactElement {
|
||||
const open = Boolean(consent)
|
||||
const restoreFocusRef = React.useRef<HTMLElement | null>(null)
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(nextOpen) => {
|
||||
if (!nextOpen && open) onCancel()
|
||||
}}
|
||||
>
|
||||
<DialogContent
|
||||
className="max-w-[460px] gap-0 p-5"
|
||||
onOpenAutoFocus={() => {
|
||||
restoreFocusRef.current =
|
||||
document.activeElement instanceof HTMLElement ? document.activeElement : null
|
||||
}}
|
||||
onCloseAutoFocus={(event) => {
|
||||
event.preventDefault()
|
||||
restoreFocusRef.current?.focus()
|
||||
restoreFocusRef.current = null
|
||||
}}
|
||||
>
|
||||
<DialogHeader className="gap-0">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
|
||||
AI SEARCH
|
||||
</span>
|
||||
<DialogTitle className="mt-1.5 text-lg">确认发送本次搜索资料</DialogTitle>
|
||||
<DialogDescription className="mt-3 text-[13px] leading-[21px]">
|
||||
将向 <strong className="font-semibold text-foreground">{consent?.providerName}</strong>{' '}
|
||||
（{consent?.recipient}）发送当前问题、受控检索所需的受限上下文，以及最多 8 条最终
|
||||
Evidence。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<p className="mt-2.5 rounded-md bg-primary/10 p-2.5 text-[13px] leading-[21px] text-foreground">
|
||||
不会发送完整微信数据库、全量聊天记录、密钥、绝对路径或内部会话/消息引用 ID。
|
||||
</p>
|
||||
<DialogFooter className="mt-[18px] gap-2">
|
||||
<Button variant="outline" onClick={onCancel}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={onConfirm}>继续并发送</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -27,6 +27,9 @@ export function useExternalProviderConsent(): {
|
||||
recipient: string
|
||||
): Promise<boolean> =>
|
||||
new Promise((resolve) => {
|
||||
const previousResolve = externalConsentResolverRef.current
|
||||
externalConsentResolverRef.current = null
|
||||
previousResolve?.(false)
|
||||
externalConsentResolverRef.current = resolve
|
||||
setExternalProviderConsent({ providerName, recipient })
|
||||
})
|
||||
|
||||
@@ -70,6 +70,33 @@ export const mapSearchResultToTrace = (
|
||||
voiceCoverage: result.knowledge.voiceCoverage
|
||||
})
|
||||
|
||||
export interface PipelineRendererResult {
|
||||
evidence: EvidenceItem[]
|
||||
evidenceCollection: EvidenceItem[]
|
||||
searchTrace: SearchTrace
|
||||
senderNames: Record<string, string>
|
||||
messageCount: number
|
||||
}
|
||||
|
||||
export const mapPipelineResultToRendererResult = (
|
||||
result: AiSearchPipelineResult,
|
||||
contacts: Contact[]
|
||||
): PipelineRendererResult => {
|
||||
const evidence = mapPipelineEvidence(result.evidence, contacts)
|
||||
const evidenceCollection = mapPipelineEvidence(
|
||||
result.evidenceCollection || result.evidence,
|
||||
contacts
|
||||
)
|
||||
|
||||
return {
|
||||
evidence,
|
||||
evidenceCollection,
|
||||
searchTrace: mapSearchResultToTrace(result, evidence.length),
|
||||
senderNames: mapEvidenceSenderNames(evidence),
|
||||
messageCount: result.knowledge.totalMessages
|
||||
}
|
||||
}
|
||||
|
||||
export const mapCacheRecordToResult = (
|
||||
cached: AISearchCacheRecord,
|
||||
queryValue: string,
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
import type { AiSearchAgentRun } from '../../../../shared/ai-search'
|
||||
import type { EvidenceItem, SearchProgressByStage, SearchTrace } from './searchTypes'
|
||||
import type { AiSearchAgentRun, AiSearchPipelineResult } from '../../../../shared/ai-search'
|
||||
import { RANGE_LABELS } from './searchUtils'
|
||||
import type {
|
||||
EvidenceItem,
|
||||
SearchProgressByStage,
|
||||
SearchRange,
|
||||
SearchStage,
|
||||
SearchTrace
|
||||
} from './searchTypes'
|
||||
|
||||
export interface SearchResultResetState {
|
||||
analysisError: string
|
||||
@@ -28,3 +35,50 @@ export const createSearchResultResetState = (): SearchResultResetState => ({
|
||||
agentTrace: [],
|
||||
searchDetailsOpen: false
|
||||
})
|
||||
|
||||
export type SearchResultViewTransition =
|
||||
| {
|
||||
stage: Extract<SearchStage, 'partial' | 'insufficient'>
|
||||
analysisError: string
|
||||
}
|
||||
| {
|
||||
stage: Extract<SearchStage, 'result'>
|
||||
analysisError: ''
|
||||
answer?: string
|
||||
}
|
||||
|
||||
export const resolveSearchResultViewTransition = (
|
||||
result: AiSearchPipelineResult,
|
||||
range: SearchRange
|
||||
): SearchResultViewTransition => {
|
||||
if (result.status === 'no_evidence') {
|
||||
return {
|
||||
stage: 'insufficient',
|
||||
analysisError: `${RANGE_LABELS[range]}内没有找到与问题相关的聊天消息。`
|
||||
}
|
||||
}
|
||||
if (result.status === 'retrieval_incomplete') {
|
||||
return {
|
||||
stage: 'partial',
|
||||
analysisError: result.error || '当前检索未完整覆盖聊天记录，未生成总结。'
|
||||
}
|
||||
}
|
||||
if (result.status === 'failed') {
|
||||
return {
|
||||
stage: 'insufficient',
|
||||
analysisError: result.error || '本地搜索暂时无法完成'
|
||||
}
|
||||
}
|
||||
if (result.status === 'ai_failed') {
|
||||
return {
|
||||
stage: 'partial',
|
||||
analysisError: result.error || '证据已找到，但 AI 暂时无法生成回答'
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
stage: 'result',
|
||||
analysisError: '',
|
||||
answer: result.answer
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
import type { Contact, Message } from '../../../../shared/types'
|
||||
import type { AISearchCacheRecord, EvidenceItem, GroupMemberName, SearchIntent, SearchQueryPlan, SearchRange, SearchScope } from './searchTypes'
|
||||
import type { AiSearchTimeRange } from '../../../../shared/ai-search'
|
||||
import type {
|
||||
AISearchCacheRecord,
|
||||
EvidenceItem,
|
||||
GroupMemberName,
|
||||
SearchIntent,
|
||||
SearchQueryPlan,
|
||||
SearchRange,
|
||||
SearchScope
|
||||
} from './searchTypes'
|
||||
|
||||
export const RANGE_LABELS: Record<SearchRange, string> = {
|
||||
today: '今天',
|
||||
@@ -77,7 +86,8 @@ const SEARCH_STOP_WORDS = new Set([
|
||||
export const messageText = (message: Message): string =>
|
||||
String(message.content || '').trim() || `[${message.type || '消息'}]`
|
||||
|
||||
export const normalizeSearchText = (value: string): string => value.toLowerCase().replace(/\s+/g, '')
|
||||
export const normalizeSearchText = (value: string): string =>
|
||||
value.toLowerCase().replace(/\s+/g, '')
|
||||
|
||||
export const includesSearchAlias = (query: string, alias: string): boolean => {
|
||||
const normalizedAlias = normalizeSearchText(alias.trim())
|
||||
@@ -215,7 +225,7 @@ export const formatMessageDate = (dateKey: string): string => {
|
||||
return `${month}/${day}`
|
||||
}
|
||||
|
||||
export const selectEvenly = <T,>(items: T[], count: number): T[] => {
|
||||
export const selectEvenly = <T>(items: T[], count: number): T[] => {
|
||||
if (count >= items.length) return items
|
||||
if (count <= 0) return []
|
||||
if (count === 1) return [items[items.length - 1]]
|
||||
@@ -262,7 +272,11 @@ const looksLikeUserId = (value: string): boolean =>
|
||||
export const formatMemberName = (member: GroupMemberName): string =>
|
||||
member.groupNickname || member.wechatNickname || member.nickname || member.remark || member.wxid
|
||||
|
||||
export const senderName = (message: Message, contact: Contact, names: Record<string, string>): string => {
|
||||
export const senderName = (
|
||||
message: Message,
|
||||
contact: Contact,
|
||||
names: Record<string, string>
|
||||
): string => {
|
||||
const identifiers = [message.senderId, message.from, message.name].filter(
|
||||
(value): value is string => Boolean(value?.trim())
|
||||
)
|
||||
@@ -304,6 +318,48 @@ export const buildSearchCacheKey = (
|
||||
query: string
|
||||
): string => JSON.stringify([scope, contactMd5, range, query.trim().toLowerCase()])
|
||||
|
||||
export type CreateSearchRequestContextInput = {
|
||||
query: string
|
||||
scope: SearchScope
|
||||
range: SearchRange
|
||||
timeRangeOverride?: AiSearchTimeRange
|
||||
activeContactMd5?: string
|
||||
retry?: {
|
||||
range: SearchRange
|
||||
timeRangeOverride?: AiSearchTimeRange
|
||||
}
|
||||
}
|
||||
|
||||
export type SearchRequestContext = {
|
||||
normalizedQuery: string
|
||||
effectiveRange: SearchRange
|
||||
effectiveTimeRangeOverride?: AiSearchTimeRange
|
||||
conversationId?: string
|
||||
cacheKey: string
|
||||
}
|
||||
|
||||
export const createSearchRequestContext = ({
|
||||
query,
|
||||
scope,
|
||||
range,
|
||||
timeRangeOverride,
|
||||
activeContactMd5,
|
||||
retry
|
||||
}: CreateSearchRequestContextInput): SearchRequestContext => {
|
||||
const normalizedQuery = query.trim()
|
||||
const effectiveRange = retry?.range || range
|
||||
const effectiveTimeRangeOverride = retry?.timeRangeOverride || timeRangeOverride
|
||||
const conversationId = scope === 'conversation' ? activeContactMd5 : undefined
|
||||
|
||||
return {
|
||||
normalizedQuery,
|
||||
effectiveRange,
|
||||
effectiveTimeRangeOverride,
|
||||
conversationId,
|
||||
cacheKey: buildSearchCacheKey(scope, conversationId || '', effectiveRange, normalizedQuery)
|
||||
}
|
||||
}
|
||||
|
||||
export const parseSearchCacheKey = (
|
||||
key: string
|
||||
): { scope: SearchScope; contactMd5: string; range: SearchRange; query: string } | null => {
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import type {
|
||||
AiSearchExternalAuthorizationResult,
|
||||
AiSearchProviderStatus
|
||||
} from '../../../../../shared/ai-provider'
|
||||
|
||||
export type AiSearchProviderConsentApi = {
|
||||
getAiSearchProviderStatus: () => Promise<AiSearchProviderStatus>
|
||||
authorizeAiSearchExternalProvider: (request: {
|
||||
requestId: string
|
||||
providerId: string
|
||||
recipient: string
|
||||
}) => Promise<AiSearchExternalAuthorizationResult>
|
||||
}
|
||||
|
||||
export type RequestExternalProviderConsent = (
|
||||
providerName: string,
|
||||
recipient: string
|
||||
) => Promise<boolean>
|
||||
|
||||
/**
|
||||
* Renderer adapter for the existing AI Search provider-consent IPC flow.
|
||||
* Provider identity and authorization policy remain owned by main/services.
|
||||
*/
|
||||
export async function ensureAiSearchDataConsent({
|
||||
requestId,
|
||||
api,
|
||||
requestExternalProviderConsent
|
||||
}: {
|
||||
requestId: string
|
||||
api: AiSearchProviderConsentApi
|
||||
requestExternalProviderConsent: RequestExternalProviderConsent
|
||||
}): Promise<boolean> {
|
||||
const status = await api.getAiSearchProviderStatus()
|
||||
if (!status.configured || !status.requiresConsent) return true
|
||||
if (!status.providerId || !status.recipient) throw new Error('当前 AI 服务信息不完整')
|
||||
|
||||
const confirmed = await requestExternalProviderConsent(
|
||||
status.providerName || '当前 AI 服务',
|
||||
status.recipient
|
||||
)
|
||||
if (!confirmed) return false
|
||||
|
||||
const authorized = await api.authorizeAiSearchExternalProvider({
|
||||
requestId,
|
||||
providerId: status.providerId,
|
||||
recipient: status.recipient
|
||||
})
|
||||
if (!authorized.success) throw new Error(authorized.error || '无法确认本次数据发送授权')
|
||||
return true
|
||||
}
|
||||
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import { cn } from '../../lib/cn'
|
||||
|
||||
const buttonVariants = cva(
|
||||
'inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors duration-fast ease-tm-standard focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
|
||||
'inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md border-0 bg-transparent text-sm font-medium transition-colors duration-fast ease-tm-standard focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
@@ -2,21 +2,33 @@ import * as React from 'react'
|
||||
import * as ProgressPrimitive from '@radix-ui/react-progress'
|
||||
import { cn } from '../../lib/cn'
|
||||
|
||||
const Progress = React.forwardRef<
|
||||
React.ElementRef<typeof ProgressPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
|
||||
>(({ className, value, ...props }, ref) => (
|
||||
interface ProgressProps extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
|
||||
indeterminate?: boolean
|
||||
}
|
||||
|
||||
const Progress = React.forwardRef<React.ElementRef<typeof ProgressPrimitive.Root>, ProgressProps>(
|
||||
({ className, value, indeterminate = false, ...props }, ref) => (
|
||||
<ProgressPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn('relative h-2 w-full overflow-hidden rounded-full bg-muted', className)}
|
||||
value={indeterminate ? null : value}
|
||||
className={cn(
|
||||
'relative h-2 w-full overflow-hidden rounded-full bg-muted',
|
||||
indeterminate && 'indeterminate',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
className="h-full w-full flex-1 bg-primary transition-transform duration-normal ease-tm-standard"
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
data-slot="progress-indicator"
|
||||
className={cn(
|
||||
'h-full w-full flex-1 bg-primary transition-transform duration-normal ease-tm-standard',
|
||||
indeterminate && 'w-1/3 animate-pulse'
|
||||
)}
|
||||
style={{ transform: indeterminate ? undefined : `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
))
|
||||
)
|
||||
)
|
||||
Progress.displayName = ProgressPrimitive.Root.displayName
|
||||
|
||||
export { Progress }
|
||||
|
||||
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
|
||||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface data-[state=active]:text-foreground data-[state=active]:shadow-surface',
|
||||
'inline-flex items-center justify-center rounded-sm border-0 bg-transparent px-3 py-1.5 text-xs font-medium text-muted-foreground transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface data-[state=active]:text-foreground data-[state=active]:shadow-surface',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -1,4 +1,12 @@
|
||||
import { useMemo, useState, type ReactElement } from 'react'
|
||||
import { useMemo, useRef, useState, type ReactElement } from 'react'
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '../../../components/ui'
|
||||
|
||||
export function SkillPreviewDialog({
|
||||
content,
|
||||
@@ -11,48 +19,71 @@ export function SkillPreviewDialog({
|
||||
}): ReactElement {
|
||||
const [raw, setRaw] = useState(false)
|
||||
const lines = useMemo(() => content.split('\n'), [content])
|
||||
const restoreFocusRef = useRef<HTMLElement | null>(null)
|
||||
const closingRef = useRef(false)
|
||||
|
||||
const closeDialog = (): void => {
|
||||
if (closingRef.current) return
|
||||
closingRef.current = true
|
||||
const restoreFocus = restoreFocusRef.current
|
||||
restoreFocusRef.current = null
|
||||
onClose()
|
||||
queueMicrotask(() => restoreFocus?.focus())
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="api-markdown-overlay"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="TraceMemo Reader Skill 预览"
|
||||
<Dialog open onOpenChange={(open) => !open && closeDialog()}>
|
||||
<DialogContent
|
||||
className="h-[min(720px,calc(100vh-2rem))] max-w-[820px] grid-rows-[auto_minmax(0,1fr)] gap-0 overflow-hidden p-0"
|
||||
onOpenAutoFocus={() => {
|
||||
restoreFocusRef.current =
|
||||
document.activeElement instanceof HTMLElement ? document.activeElement : null
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<header>
|
||||
<div>
|
||||
<strong>TraceMemo Reader</strong>
|
||||
<span>{version || 'v1.0'}</span>
|
||||
<DialogHeader className="flex-row items-center justify-between space-y-0 border-b border-border px-6 py-4 pr-14">
|
||||
<div className="flex min-w-0 items-baseline gap-2">
|
||||
<DialogTitle className="truncate tracking-normal">
|
||||
TraceMemo Reader Skill 预览
|
||||
</DialogTitle>
|
||||
<span className="shrink-0 text-xs text-muted-foreground">{version || 'v1.0'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" onClick={() => setRaw((current) => !current)}>
|
||||
<DialogDescription className="sr-only">
|
||||
查看 TraceMemo Reader Skill 的渲染预览或原始文本。
|
||||
</DialogDescription>
|
||||
<Button variant="outline" size="sm" onClick={() => setRaw((current) => !current)}>
|
||||
{raw ? '渲染预览' : '原始文本'}
|
||||
</button>
|
||||
<button type="button" onClick={onClose}>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
</Button>
|
||||
</DialogHeader>
|
||||
{raw ? (
|
||||
<pre>{content}</pre>
|
||||
<pre className="m-0 min-h-0 overflow-auto whitespace-pre-wrap break-words bg-muted/40 px-6 py-5 font-mono text-xs leading-5 text-foreground">
|
||||
{content}
|
||||
</pre>
|
||||
) : (
|
||||
<article className="skill-markdown-preview">
|
||||
<article className="min-h-0 overflow-auto px-6 py-5 text-sm leading-6 text-foreground [overflow-wrap:anywhere]">
|
||||
{lines.map((line, index) =>
|
||||
line.startsWith('# ') ? (
|
||||
<h1 key={index}>{line.slice(2)}</h1>
|
||||
<h1 className="mb-4 text-xl font-semibold tracking-normal" key={index}>
|
||||
{line.slice(2)}
|
||||
</h1>
|
||||
) : line.startsWith('## ') ? (
|
||||
<h2 key={index}>{line.slice(3)}</h2>
|
||||
<h2 className="mb-2 mt-5 text-base font-semibold tracking-normal" key={index}>
|
||||
{line.slice(3)}
|
||||
</h2>
|
||||
) : line.startsWith('- ') ? (
|
||||
<li key={index}>{line.slice(2)}</li>
|
||||
<li className="ml-5 list-disc" key={index}>
|
||||
{line.slice(2)}
|
||||
</li>
|
||||
) : line.startsWith('```') ? null : line ? (
|
||||
<p key={index}>{line}</p>
|
||||
<p className="my-1.5" key={index}>
|
||||
{line}
|
||||
</p>
|
||||
) : (
|
||||
<br key={index} />
|
||||
)
|
||||
)}
|
||||
</article>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,6 +5,14 @@ import type {
|
||||
TextToSpeechVoice
|
||||
} from '../../../../../shared/text-to-speech'
|
||||
import type { PersonalWechatRuntimeStatus } from '../../../../../shared/personal-wechat-runtime'
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '../../../components/ui'
|
||||
import { isMac, isWindows } from '../../../utils/runtime-environment'
|
||||
|
||||
const VOICE_PAGE_SIZE = 24
|
||||
@@ -198,6 +206,7 @@ export function TextToSpeechPage({
|
||||
const [showWechatVersions, setShowWechatVersions] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null)
|
||||
const wechatVersionsTriggerRef = useRef<HTMLButtonElement | null>(null)
|
||||
const personalWechatRuntimeSupported = isMac && Boolean(runtimeStatus?.supported)
|
||||
|
||||
const loadVoices = useCallback(
|
||||
@@ -488,6 +497,7 @@ export function TextToSpeechPage({
|
||||
: '当前系统安全存储不可用，请从应用环境中提供 API Key'
|
||||
|
||||
return (
|
||||
<Dialog open={showWechatVersions} onOpenChange={setShowWechatVersions}>
|
||||
<div className="settings-page text-to-speech-page">
|
||||
<header className="settings-page-header">
|
||||
<div>
|
||||
@@ -552,13 +562,17 @@ export function TextToSpeechPage({
|
||||
<li>微信重新登录或 PID 改变后，需要在测试发送弹窗中点击“尝试重新绑定”。</li>
|
||||
</ul>
|
||||
{personalWechatRuntimeSupported ? (
|
||||
<button
|
||||
type="button"
|
||||
className="tts-supported-versions-button"
|
||||
onClick={() => setShowWechatVersions(true)}
|
||||
<Button
|
||||
className="mt-2"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={(event) => {
|
||||
wechatVersionsTriggerRef.current = event.currentTarget
|
||||
setShowWechatVersions(true)
|
||||
}}
|
||||
>
|
||||
查看支持版本
|
||||
</button>
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
@@ -634,7 +648,13 @@ export function TextToSpeechPage({
|
||||
重新检测
|
||||
</button>
|
||||
{personalWechatRuntimeSupported ? (
|
||||
<button type="button" onClick={() => setShowWechatVersions(true)}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(event) => {
|
||||
wechatVersionsTriggerRef.current = event.currentTarget
|
||||
setShowWechatVersions(true)
|
||||
}}
|
||||
>
|
||||
支持版本
|
||||
</button>
|
||||
) : null}
|
||||
@@ -883,49 +903,40 @@ export function TextToSpeechPage({
|
||||
{error ? <p className="tts-settings-error">{error}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showWechatVersions ? (
|
||||
<div
|
||||
className="tts-version-modal-backdrop"
|
||||
role="presentation"
|
||||
onMouseDown={() => setShowWechatVersions(false)}
|
||||
>
|
||||
<section
|
||||
className="tts-version-modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="tts-version-modal-title"
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
>
|
||||
<header>
|
||||
<div>
|
||||
<h2 id="tts-version-modal-title">支持的微信版本</h2>
|
||||
</div>
|
||||
<div className="tts-version-modal-actions">
|
||||
<a href={WECHAT_VERSION_DOWNLOAD_URL} target="_blank" rel="noreferrer">
|
||||
<DialogContent
|
||||
className="max-h-[calc(100vh-3rem)] max-w-[620px] overflow-y-auto"
|
||||
onCloseAutoFocus={(event) => {
|
||||
const trigger = wechatVersionsTriggerRef.current
|
||||
if (!trigger) return
|
||||
event.preventDefault()
|
||||
trigger.focus()
|
||||
wechatVersionsTriggerRef.current = null
|
||||
}}
|
||||
>
|
||||
<DialogHeader className="pr-8">
|
||||
<DialogTitle className="text-lg">支持的微信版本</DialogTitle>
|
||||
<DialogDescription>请安装下列完整版本之一。</DialogDescription>
|
||||
</DialogHeader>
|
||||
<a
|
||||
className="w-fit rounded-md border border-primary/30 bg-primary/10 px-3 py-2 text-xs font-semibold text-primary hover:border-primary"
|
||||
href={WECHAT_VERSION_DOWNLOAD_URL}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
下载微信历史版本 ↗
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
className="tts-version-modal-close"
|
||||
onClick={() => setShowWechatVersions(false)}
|
||||
aria-label="关闭"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p className="tts-version-modal-intro">请安装下列完整版本之一。</p>
|
||||
|
||||
<div className="tts-version-grid">
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
{BUNDLED_WECHAT_VERSIONS.map((version) => (
|
||||
<span key={version}>{version}</span>
|
||||
<span
|
||||
className="rounded-md border border-border bg-background px-2 py-2 text-center text-xs text-muted-foreground"
|
||||
key={version}
|
||||
>
|
||||
{version}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -717,70 +717,3 @@
|
||||
color: var(--wxex-text-secondary);
|
||||
font: 12px/18px var(--wxex-font);
|
||||
}
|
||||
.api-markdown-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
background: rgba(32, 39, 36, 0.24);
|
||||
}
|
||||
.api-markdown-overlay > div {
|
||||
display: flex;
|
||||
width: min(820px, 100%);
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-lg);
|
||||
background: #fff;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
.api-markdown-overlay header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.api-markdown-overlay header > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.api-markdown-overlay header span {
|
||||
color: var(--wxex-text-muted);
|
||||
font: 12px/18px var(--wxex-font);
|
||||
}
|
||||
.api-markdown-overlay button {
|
||||
min-height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-sm);
|
||||
background: #fff;
|
||||
color: var(--wxex-text-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.api-markdown-overlay pre,
|
||||
.skill-markdown-preview {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
margin: 14px 0 0;
|
||||
white-space: pre-wrap;
|
||||
color: var(--wxex-text-primary);
|
||||
font: 12px/19px var(--wxex-font);
|
||||
}
|
||||
.skill-markdown-preview h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.skill-markdown-preview h2 {
|
||||
margin-top: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.skill-markdown-preview p {
|
||||
margin: 6px 0;
|
||||
}
|
||||
.skill-markdown-preview li {
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
@@ -193,32 +193,7 @@
|
||||
background: #5a60c6;
|
||||
}
|
||||
|
||||
.personal-wechat-send-backdrop {
|
||||
position: fixed;
|
||||
z-index: 90;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background: rgba(18, 29, 25, 0.42);
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.personal-wechat-send-dialog {
|
||||
box-sizing: border-box;
|
||||
width: min(100%, 620px);
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: 16px;
|
||||
background: var(--wxex-bg-elevated);
|
||||
box-shadow: 0 24px 70px rgba(18, 31, 26, 0.24);
|
||||
padding: 22px;
|
||||
|
||||
> header,
|
||||
> footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -226,13 +201,6 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 2px 0 0;
|
||||
color: var(--wxex-text-primary);
|
||||
font-size: 19px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
> footer {
|
||||
justify-content: flex-end;
|
||||
|
||||
@@ -264,30 +232,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.personal-wechat-send-kicker {
|
||||
color: var(--wxex-brand);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.personal-wechat-send-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: var(--wxex-text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
|
||||
&:hover {
|
||||
background: var(--wxex-brand-soft);
|
||||
color: var(--wxex-brand);
|
||||
}
|
||||
}
|
||||
|
||||
.personal-wechat-send-device-note {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
@@ -872,49 +816,6 @@
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.chat-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chat-dropdown-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
z-index: 40;
|
||||
min-width: 150px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-md);
|
||||
background: var(--wxex-bg-elevated);
|
||||
box-shadow: var(--wxex-shadow-popover);
|
||||
padding: 4px;
|
||||
|
||||
&.right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border: 0;
|
||||
border-radius: var(--wxex-radius-sm);
|
||||
background: transparent;
|
||||
color: var(--wxex-text-primary);
|
||||
cursor: pointer;
|
||||
font: 13px/18px var(--wxex-font);
|
||||
padding: 7px 9px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: var(--wxex-brand-soft);
|
||||
color: var(--wxex-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-content-search {
|
||||
box-sizing: border-box;
|
||||
width: 280px;
|
||||
@@ -2654,105 +2555,6 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.image-viewer-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(16, 24, 28, 0.28);
|
||||
backdrop-filter: blur(1px);
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.image-viewer-window {
|
||||
width: min(1280px, 96vw);
|
||||
height: min(900px, 92vh);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0, 0, 0, 0.14);
|
||||
border-radius: 8px;
|
||||
background: #eaf0f1;
|
||||
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.image-viewer-titlebar {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px 0 16px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
|
||||
button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-viewer-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.image-viewer-title {
|
||||
margin-right: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.image-viewer-zoom {
|
||||
min-width: 44px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-viewer-divider {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.image-viewer-stage {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 28px;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: contain;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
|
||||
img {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
box-shadow: 0 3px 16px rgba(0, 0, 0, 0.12);
|
||||
transform-origin: center center;
|
||||
transition: transform 0.08s ease-out;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.database-account-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
|
||||
@@ -258,10 +258,6 @@
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.export-config-scroll > .export-section:not(.export-format-top):has(.export-format-grid) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.conversation-section-virtual-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -171,65 +171,6 @@
|
||||
border-top: 1px solid var(--wxex-border);
|
||||
}
|
||||
|
||||
.report-delete-confirm {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 30;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(32, 39, 36, 0.28);
|
||||
}
|
||||
|
||||
.report-delete-confirm-card {
|
||||
display: grid;
|
||||
width: min(360px, calc(100vw - 48px));
|
||||
gap: 12px;
|
||||
padding: 18px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-lg);
|
||||
background: var(--wxex-bg-main);
|
||||
box-shadow: var(--wxex-shadow-popover);
|
||||
}
|
||||
|
||||
.report-delete-confirm-card h2 {
|
||||
margin: 0;
|
||||
color: var(--wxex-text-primary);
|
||||
font: 700 18px/24px var(--wxex-font);
|
||||
}
|
||||
|
||||
.report-delete-confirm-card p {
|
||||
margin: 0;
|
||||
color: var(--wxex-text-secondary);
|
||||
font: 13px/20px var(--wxex-font);
|
||||
}
|
||||
|
||||
.report-delete-confirm-card > div {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.report-delete-confirm-card button {
|
||||
min-height: 32px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-md);
|
||||
background: var(--wxex-bg-elevated);
|
||||
color: var(--wxex-text-primary);
|
||||
cursor: pointer;
|
||||
font: 600 13px/18px var(--wxex-font);
|
||||
}
|
||||
|
||||
.report-delete-confirm-card button.danger {
|
||||
border-color: #a64242;
|
||||
background: #a64242;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.report-delete-error {
|
||||
color: #a64242 !important;
|
||||
}
|
||||
|
||||
.report-viewer {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
@@ -274,7 +215,6 @@
|
||||
|
||||
.report-viewer-toolbar button,
|
||||
.report-zoom-bar button,
|
||||
.report-more-popover button,
|
||||
.report-settings-section button {
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
@@ -338,86 +278,6 @@
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.report-more-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.report-template-switch-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.report-template-switch-popover {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
width: 260px;
|
||||
padding: 8px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-md);
|
||||
background: var(--wxex-bg-elevated);
|
||||
box-shadow: var(--wxex-shadow-popover);
|
||||
}
|
||||
|
||||
.report-template-switch-popover p {
|
||||
margin: 0 4px 6px;
|
||||
color: var(--wxex-text-muted);
|
||||
font: 12px/18px var(--wxex-font);
|
||||
}
|
||||
|
||||
.report-template-switch-popover button {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
grid-template-columns: 62px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.report-template-switch-popover button:hover,
|
||||
.report-template-switch-popover button.active {
|
||||
background: var(--wxex-ai-soft);
|
||||
}
|
||||
|
||||
.report-template-switch-popover button span,
|
||||
.report-template-switch-popover button i {
|
||||
color: var(--wxex-text-muted);
|
||||
font: 11px/16px var(--wxex-font);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.report-template-switch-popover button b {
|
||||
overflow: hidden;
|
||||
color: var(--wxex-text-primary);
|
||||
font: 600 13px/18px var(--wxex-font);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.report-more-popover {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
right: 0;
|
||||
z-index: 8;
|
||||
min-width: 128px;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-md);
|
||||
background: var(--wxex-bg-elevated);
|
||||
box-shadow: var(--wxex-shadow-popover);
|
||||
}
|
||||
|
||||
.report-more-popover button {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.report-viewer-status {
|
||||
flex: 0 0 auto;
|
||||
padding: 8px 22px;
|
||||
@@ -1226,198 +1086,3 @@
|
||||
color: var(--wxex-text-muted);
|
||||
font: 11px/17px var(--wxex-font);
|
||||
}
|
||||
.wechat-share-dialog-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background: rgba(20, 31, 27, 0.46);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.wechat-share-dialog {
|
||||
width: min(540px, calc(100vw - 48px));
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow: auto;
|
||||
border: 1px solid rgba(95, 129, 116, 0.2);
|
||||
border-radius: 22px;
|
||||
background: #fff;
|
||||
box-shadow: 0 28px 90px rgba(14, 32, 25, 0.24);
|
||||
color: #17241f;
|
||||
font-family: var(--wxex-font);
|
||||
}
|
||||
.wechat-share-dialog,
|
||||
.wechat-share-dialog * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wechat-share-dialog > header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 24px 26px 18px;
|
||||
border-bottom: 1px solid #e8eeeb;
|
||||
}
|
||||
.wechat-share-dialog h2,
|
||||
.wechat-share-dialog h3,
|
||||
.wechat-share-dialog p {
|
||||
margin: 0;
|
||||
}
|
||||
.wechat-share-dialog header h2 {
|
||||
color: #17241f;
|
||||
font-size: 20px;
|
||||
}
|
||||
.wechat-share-dialog header p {
|
||||
margin-top: 6px;
|
||||
color: #718078;
|
||||
font-size: 13px;
|
||||
}
|
||||
.wechat-share-dialog-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: #f1f5f3;
|
||||
color: #5f6d67;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
.wechat-share-form {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 24px 26px 26px;
|
||||
}
|
||||
.wechat-share-form label {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
.wechat-share-form label > span {
|
||||
color: #33463e;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
.wechat-share-form input,
|
||||
.wechat-share-form textarea {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid #cfdbd6;
|
||||
border-radius: 11px;
|
||||
background: #fbfdfc;
|
||||
padding: 11px 13px;
|
||||
color: #1f2c27;
|
||||
font: inherit;
|
||||
outline: none;
|
||||
}
|
||||
.wechat-share-form input:focus,
|
||||
.wechat-share-form textarea:focus {
|
||||
border-color: #32a978;
|
||||
box-shadow: 0 0 0 3px rgba(50, 169, 120, 0.12);
|
||||
}
|
||||
.wechat-share-service-config {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
border: 1px solid #d6e8df;
|
||||
border-radius: 14px;
|
||||
background: #f2faf6;
|
||||
}
|
||||
.wechat-share-service-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
padding: 13px 15px;
|
||||
border: 1px solid #dce6e1;
|
||||
border-radius: 12px;
|
||||
background: #f7faf8;
|
||||
}
|
||||
.wechat-share-service-summary > div {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 3px;
|
||||
}
|
||||
.wechat-share-service-summary span {
|
||||
color: #728078;
|
||||
font-size: 11px;
|
||||
}
|
||||
.wechat-share-service-summary b {
|
||||
overflow: hidden;
|
||||
color: #2c4138;
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wechat-share-service-summary button {
|
||||
flex: 0 0 auto;
|
||||
min-height: 30px;
|
||||
padding: 0 11px;
|
||||
}
|
||||
.wechat-share-service-config h3 {
|
||||
color: #23523f;
|
||||
font-size: 14px;
|
||||
}
|
||||
.wechat-share-service-config p,
|
||||
.wechat-share-privacy {
|
||||
color: #68776f;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.wechat-share-privacy {
|
||||
padding: 12px 14px;
|
||||
border-radius: 10px;
|
||||
background: #f5f7f6;
|
||||
}
|
||||
.wechat-share-form > footer,
|
||||
.wechat-share-success > div {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
.wechat-share-form button,
|
||||
.wechat-share-success button {
|
||||
min-height: 38px;
|
||||
padding: 0 17px;
|
||||
border: 1px solid #ced9d4;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
color: #34463f;
|
||||
}
|
||||
.wechat-share-form button.primary,
|
||||
.wechat-share-success button.primary {
|
||||
border-color: #15945e;
|
||||
background: #15945e;
|
||||
color: #fff;
|
||||
}
|
||||
.wechat-share-form button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.wechat-share-success {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 11px;
|
||||
padding: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.wechat-share-success > img {
|
||||
width: 260px;
|
||||
max-width: 80%;
|
||||
border: 10px solid #fff;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 10px 35px rgba(27, 59, 46, 0.12);
|
||||
}
|
||||
.wechat-share-success h3 {
|
||||
color: #203029;
|
||||
font-size: 18px;
|
||||
}
|
||||
.wechat-share-success p,
|
||||
.wechat-share-success small {
|
||||
color: #6c7b74;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.wechat-share-success > div {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@@ -88,7 +88,6 @@
|
||||
|
||||
.ai-search-model-status button,
|
||||
.ai-search-result-actions button,
|
||||
.ai-search-composer button,
|
||||
.ai-search-insufficient button {
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-sm);
|
||||
@@ -109,8 +108,7 @@
|
||||
);
|
||||
}
|
||||
|
||||
.ai-search-scope-panel,
|
||||
.ai-search-evidence-panel {
|
||||
.ai-search-scope-panel {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
@@ -125,38 +123,6 @@
|
||||
border-right: 1px solid var(--wxex-border);
|
||||
}
|
||||
|
||||
.ai-search-evidence-panel {
|
||||
padding: 16px 14px;
|
||||
border-left: 1px solid var(--wxex-border);
|
||||
}
|
||||
|
||||
.ai-search-panel-heading {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
span:first-child {
|
||||
color: var(--wxex-text-muted);
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--wxex-text-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ai-search-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -403,8 +369,7 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ai-search-local-badge,
|
||||
.ai-search-count-badge {
|
||||
.ai-search-local-badge {
|
||||
border-radius: var(--wxex-radius-sm);
|
||||
background: var(--wxex-ai-soft);
|
||||
color: var(--wxex-ai);
|
||||
@@ -629,61 +594,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ai-search-history {
|
||||
margin-top: 18px;
|
||||
|
||||
button {
|
||||
min-width: 0;
|
||||
padding: 5px 0;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: var(--wxex-radius-sm);
|
||||
background: transparent;
|
||||
color: var(--wxex-text-secondary);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 10px;
|
||||
|
||||
&:hover {
|
||||
color: var(--wxex-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ai-search-history-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
|
||||
> button:first-child {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ai-search-history-delete {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 !important;
|
||||
border: 0;
|
||||
border-radius: var(--wxex-radius-sm);
|
||||
background: transparent;
|
||||
color: var(--wxex-text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 16px !important;
|
||||
line-height: 18px;
|
||||
text-align: center !important;
|
||||
|
||||
&:hover {
|
||||
background: var(--wxex-brand-soft);
|
||||
color: var(--wxex-danger, #b34d46) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ai-search-main {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
@@ -1274,226 +1184,7 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ai-search-composer {
|
||||
position: relative;
|
||||
padding: 12px 18px 14px;
|
||||
border-top: 1px solid var(--wxex-border);
|
||||
background: var(--wxex-bg-elevated);
|
||||
}
|
||||
|
||||
.ai-search-composer-meta,
|
||||
.ai-search-composer-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
color: var(--wxex-text-muted);
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.ai-search-composer-meta {
|
||||
strong {
|
||||
color: var(--wxex-brand);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: var(--wxex-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.ai-search-history-trigger {
|
||||
margin-left: auto;
|
||||
padding: 3px 7px !important;
|
||||
border: 1px solid var(--wxex-border) !important;
|
||||
border-radius: 999px !important;
|
||||
background: var(--wxex-bg-main) !important;
|
||||
color: var(--wxex-brand) !important;
|
||||
cursor: pointer;
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.ai-search-history-popover {
|
||||
z-index: 30;
|
||||
width: min(420px, calc(100% - 36px));
|
||||
max-height: 236px;
|
||||
overflow: auto;
|
||||
padding: 9px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-md);
|
||||
background: var(--wxex-bg-elevated);
|
||||
box-shadow: 0 10px 28px rgba(31, 52, 45, 0.16);
|
||||
transform-origin: var(--radix-popover-content-transform-origin);
|
||||
animation: ai-search-history-popover-in 150ms ease-out both;
|
||||
}
|
||||
|
||||
@keyframes ai-search-history-popover-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(5px) scale(0.985);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.ai-search-history-popover-heading,
|
||||
.ai-search-history-popover-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.ai-search-history-popover-heading {
|
||||
justify-content: space-between;
|
||||
padding: 2px 3px 7px;
|
||||
color: var(--wxex-text-primary);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.ai-search-history-popover-heading button,
|
||||
.ai-search-history-popover-item > button:last-child {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
color: var(--wxex-text-muted) !important;
|
||||
cursor: pointer;
|
||||
font-size: 16px !important;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.ai-search-history-popover-item > button:first-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 7px 6px !important;
|
||||
overflow: hidden;
|
||||
border: 0 !important;
|
||||
border-radius: var(--wxex-radius-sm) !important;
|
||||
background: transparent !important;
|
||||
color: var(--wxex-text-secondary) !important;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ai-search-history-popover-item > button:hover {
|
||||
background: var(--wxex-brand-soft) !important;
|
||||
color: var(--wxex-brand) !important;
|
||||
}
|
||||
|
||||
.ai-search-history-empty {
|
||||
display: block;
|
||||
padding: 8px 4px 3px;
|
||||
color: var(--wxex-text-muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.ai-search-composer-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 7px;
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
resize: none;
|
||||
padding: 9px 10px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-sm);
|
||||
outline: 0;
|
||||
background: var(--wxex-bg-main);
|
||||
color: var(--wxex-text-primary);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--wxex-brand);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 9px 13px;
|
||||
white-space: nowrap;
|
||||
font-size: 11px;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
border-color: var(--wxex-brand);
|
||||
background: var(--wxex-brand);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.cancel {
|
||||
border-color: color-mix(in srgb, var(--wxex-danger) 48%, var(--wxex-border));
|
||||
background: color-mix(in srgb, var(--wxex-danger) 9%, var(--wxex-bg-elevated));
|
||||
color: var(--wxex-danger);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.cancel:hover {
|
||||
background: color-mix(in srgb, var(--wxex-danger) 15%, var(--wxex-bg-elevated));
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ai-search-composer-foot {
|
||||
justify-content: space-between;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.ai-search-evidence-card {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
padding: 11px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-md);
|
||||
background: var(--wxex-bg-elevated);
|
||||
color: var(--wxex-text-primary);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
animation: ai-search-evidence-in 240ms ease-out both;
|
||||
}
|
||||
|
||||
@keyframes ai-search-evidence-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(7px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.ai-search-evidence-card:hover,
|
||||
.ai-search-evidence-card.active {
|
||||
border-color: var(--wxex-brand);
|
||||
background: #f4fbf8;
|
||||
}
|
||||
|
||||
.ai-search-evidence-card.focus-flash {
|
||||
.ai-search-evidence-focus-flash {
|
||||
animation: ai-search-evidence-flash 0.72s ease-in-out 2;
|
||||
}
|
||||
|
||||
@@ -1509,76 +1200,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ai-search-consent-backdrop {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background: rgba(24, 35, 30, 0.26);
|
||||
}
|
||||
|
||||
.ai-search-consent-dialog {
|
||||
width: min(460px, 100%);
|
||||
padding: 20px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-md);
|
||||
background: var(--wxex-bg-elevated);
|
||||
box-shadow: 0 14px 38px rgba(24, 35, 30, 0.2);
|
||||
|
||||
h2 {
|
||||
margin: 5px 0 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--wxex-text-secondary);
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
.ai-search-consent-note {
|
||||
margin-top: 10px !important;
|
||||
padding: 10px;
|
||||
border-radius: var(--wxex-radius-sm);
|
||||
background: var(--wxex-brand-soft);
|
||||
color: var(--wxex-text-primary) !important;
|
||||
}
|
||||
|
||||
.ai-search-consent-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 18px;
|
||||
|
||||
button {
|
||||
min-height: 34px;
|
||||
padding: 0 13px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-sm);
|
||||
background: var(--wxex-bg-elevated);
|
||||
color: var(--wxex-text-primary);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.primary {
|
||||
border-color: var(--wxex-brand);
|
||||
background: var(--wxex-brand);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ai-search-spinner,
|
||||
.ai-search-result,
|
||||
.ai-search-summary-block,
|
||||
.ai-search-answer > *,
|
||||
.ai-search-evidence-card,
|
||||
.ai-search-history-popover,
|
||||
.ai-search-evidence-focus-flash,
|
||||
.ai-search-pipeline-step.active .ai-search-pipeline-mark,
|
||||
.ai-search-sync-progress-track span {
|
||||
animation: none !important;
|
||||
@@ -1586,106 +1213,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ai-search-evidence-card-top,
|
||||
.ai-search-evidence-conversation,
|
||||
.ai-search-evidence-source-kind,
|
||||
.ai-search-evidence-text,
|
||||
.ai-search-evidence-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ai-search-evidence-source-kind,
|
||||
.ai-search-voice-coverage-warning {
|
||||
color: var(--wxex-brand);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ai-search-evidence-card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
.ai-search-evidence-card-top strong {
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ai-search-evidence-card time {
|
||||
flex: 0 0 auto;
|
||||
color: var(--wxex-text-muted);
|
||||
font-size: 9px;
|
||||
}
|
||||
.ai-search-evidence-conversation {
|
||||
margin-top: 2px;
|
||||
color: var(--wxex-brand);
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
}
|
||||
.ai-search-evidence-text {
|
||||
display: -webkit-box;
|
||||
margin-top: 7px;
|
||||
overflow: hidden;
|
||||
color: var(--wxex-text-secondary);
|
||||
font-size: 11px;
|
||||
line-height: 17px;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
.ai-search-evidence-link {
|
||||
margin-top: 7px;
|
||||
color: var(--wxex-ai);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ai-search-evidence-load-more {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 4px 0 12px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-sm);
|
||||
background: var(--wxex-bg-elevated);
|
||||
color: var(--wxex-ai);
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ai-search-evidence-load-more:hover {
|
||||
border-color: var(--wxex-brand);
|
||||
background: #f4fbf8;
|
||||
}
|
||||
|
||||
.ai-search-evidence-empty {
|
||||
display: flex;
|
||||
min-height: 260px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
flex-direction: column;
|
||||
color: var(--wxex-text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ai-search-evidence-empty div {
|
||||
margin-bottom: 10px;
|
||||
font-size: 34px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.ai-search-evidence-empty strong {
|
||||
color: var(--wxex-text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
.ai-search-evidence-empty span {
|
||||
max-width: 190px;
|
||||
margin-top: 6px;
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.ai-search-muted {
|
||||
color: var(--wxex-text-muted);
|
||||
font-size: 10px;
|
||||
@@ -1714,8 +1246,7 @@
|
||||
}
|
||||
|
||||
@media (max-height: 820px) {
|
||||
.ai-search-scope-panel,
|
||||
.ai-search-evidence-panel {
|
||||
.ai-search-scope-panel {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
@@ -1734,11 +1265,6 @@
|
||||
padding-top: 20px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.ai-search-composer {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.ai-search-header-actions {
|
||||
|
||||
@@ -133,130 +133,6 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tts-supported-versions-button {
|
||||
margin-top: 10px;
|
||||
border: 1px solid rgba(190, 96, 60, 0.3);
|
||||
border-radius: 999px;
|
||||
background: var(--wxex-bg-elevated);
|
||||
color: #9c4a32;
|
||||
cursor: pointer;
|
||||
padding: 6px 11px;
|
||||
font: 11px/17px var(--wxex-font);
|
||||
}
|
||||
|
||||
.tts-version-modal-backdrop {
|
||||
position: fixed;
|
||||
z-index: 110;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background: rgba(18, 29, 25, 0.46);
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.tts-version-modal {
|
||||
box-sizing: border-box;
|
||||
width: min(100%, 620px);
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: 16px;
|
||||
background: var(--wxex-bg-elevated);
|
||||
box-shadow: 0 24px 70px rgba(18, 31, 26, 0.24);
|
||||
padding: 22px;
|
||||
|
||||
> header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: var(--wxex-text-primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tts-version-modal-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
> a {
|
||||
border: 1px solid rgba(36, 122, 99, 0.28);
|
||||
border-radius: 999px;
|
||||
background: var(--wxex-brand-soft);
|
||||
color: var(--wxex-brand);
|
||||
padding: 6px 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--wxex-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tts-version-modal-close {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
flex: 0 0 auto;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--wxex-bg-main);
|
||||
color: var(--wxex-text-secondary);
|
||||
cursor: pointer;
|
||||
font: 22px/28px var(--wxex-font);
|
||||
}
|
||||
|
||||
.tts-version-modal-intro {
|
||||
margin: 0;
|
||||
color: var(--wxex-text-secondary);
|
||||
font-size: 11px;
|
||||
line-height: 19px;
|
||||
|
||||
code {
|
||||
display: inline;
|
||||
margin: 0 4px;
|
||||
border-radius: 4px;
|
||||
background: var(--wxex-bg-main);
|
||||
color: var(--wxex-brand);
|
||||
padding: 2px 5px;
|
||||
font-size: 10px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.tts-version-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 7px;
|
||||
|
||||
span {
|
||||
border: 1px solid var(--wxex-border);
|
||||
border-radius: var(--wxex-radius-sm);
|
||||
background: var(--wxex-bg-main);
|
||||
color: var(--wxex-text-secondary);
|
||||
padding: 8px 9px;
|
||||
font: 11px/17px var(--wxex-font);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tts-runtime-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
@@ -340,26 +216,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tts-version-modal-warning {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
border-radius: var(--wxex-radius-md);
|
||||
background: rgba(190, 96, 60, 0.08);
|
||||
padding: 12px 13px;
|
||||
|
||||
strong {
|
||||
color: #9c4a32;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--wxex-text-secondary);
|
||||
font-size: 10px;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.tts-api-card {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
@@ -880,10 +736,6 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.tts-version-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.tts-runtime-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -891,13 +743,4 @@
|
||||
.tts-runtime-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.tts-version-modal > header {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tts-version-modal-actions {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
background: var(--wxex-bg-main);
|
||||
}
|
||||
|
||||
/* SETTINGS-01: formal settings workspace. The legacy SettingsPanel remains only as a fallback source. */
|
||||
/* SETTINGS-01: formal settings workspace. */
|
||||
.settings-workspace {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
@@ -137,537 +137,6 @@
|
||||
transition: width 0.18s ease-out;
|
||||
}
|
||||
|
||||
/* 首次连接成功后的下一步引导 */
|
||||
.first-use-welcome-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1200;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background: rgba(16, 27, 23, 0.42);
|
||||
backdrop-filter: blur(4px);
|
||||
animation: settings-fade-in 0.16s ease-out;
|
||||
}
|
||||
|
||||
.first-use-welcome {
|
||||
position: relative;
|
||||
width: min(520px, 100%);
|
||||
padding: 34px;
|
||||
border: 1px solid rgba(203, 222, 214, 0.9);
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
box-shadow: 0 24px 70px rgba(16, 35, 28, 0.24);
|
||||
animation: settings-pop-in 0.18s ease-out;
|
||||
}
|
||||
|
||||
.first-use-welcome-close {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 16px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: #7c8882;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 23px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.first-use-welcome-close:hover {
|
||||
color: #26342d;
|
||||
background: #f0f4f1;
|
||||
}
|
||||
|
||||
.first-use-welcome-mark {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-bottom: 18px;
|
||||
border-radius: 13px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #176b57, #42a27f);
|
||||
box-shadow: 0 7px 16px rgba(23, 107, 87, 0.22);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.first-use-welcome-eyebrow {
|
||||
margin: 0 0 5px;
|
||||
color: #247a63;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.first-use-welcome h2 {
|
||||
margin: 0;
|
||||
color: #1f2c26;
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.first-use-welcome-lead {
|
||||
margin: 8px 0 24px;
|
||||
color: #66756d;
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.first-use-welcome-actions {
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.first-use-welcome-feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
width: 100%;
|
||||
padding: 17px 16px;
|
||||
border: 1px solid #247a63;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #247a63, #176b57);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
background 0.15s ease,
|
||||
transform 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #00604c;
|
||||
background: linear-gradient(135deg, #176b57, #00604c);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.first-use-welcome-feature-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex: 0 0 34px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 10px;
|
||||
color: #176b57;
|
||||
background: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.first-use-welcome-feature-copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.first-use-welcome-feature-arrow {
|
||||
flex: 0 0 auto;
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.first-use-welcome-feature-copy strong,
|
||||
.first-use-welcome-feature-copy small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.first-use-welcome-feature-copy strong {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.first-use-welcome-feature-copy small {
|
||||
margin-top: 2px;
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.first-use-welcome-secondary-actions {
|
||||
display: flex;
|
||||
gap: 22px;
|
||||
margin: 16px 0 22px;
|
||||
}
|
||||
|
||||
.first-use-welcome-secondary-actions button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: #53645b;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.first-use-welcome-secondary-actions button:hover {
|
||||
color: #247a63;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.first-use-welcome-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-top: 23px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #edf1ef;
|
||||
|
||||
span,
|
||||
button,
|
||||
a {
|
||||
color: #68766f;
|
||||
background: transparent;
|
||||
font-size: 11px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
a:hover {
|
||||
color: #247a63;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px), (max-height: 560px) {
|
||||
.first-use-welcome-overlay {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.first-use-welcome {
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
padding: 26px 22px 22px;
|
||||
}
|
||||
|
||||
.first-use-welcome h2 {
|
||||
font-size: 22px;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
.first-use-welcome-feature {
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.first-use-welcome-feature-arrow {
|
||||
width: 100%;
|
||||
margin-left: 44px;
|
||||
}
|
||||
|
||||
.first-use-welcome-footer {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 设置面板 */
|
||||
.settings-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 21, 26, 0.45);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 1100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: settings-fade-in 0.16s ease-out;
|
||||
}
|
||||
|
||||
@keyframes settings-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-modal {
|
||||
width: min(560px, 92vw);
|
||||
max-height: 84vh;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 24px 60px rgba(15, 21, 26, 0.28);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: settings-pop-in 0.18s ease-out;
|
||||
}
|
||||
|
||||
@keyframes settings-pop-in {
|
||||
from {
|
||||
transform: translateY(8px) scale(0.98);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 22px;
|
||||
border-bottom: 1px solid #ececec;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #1f2429;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-close {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: #7d858a;
|
||||
font-size: 26px;
|
||||
line-height: 1;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: #f0f2f4;
|
||||
color: #1f2429;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-body {
|
||||
padding: 12px 22px 22px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-top: 14px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 10px;
|
||||
background: #fafbfc;
|
||||
border: 1px solid #ececec;
|
||||
}
|
||||
|
||||
.settings-section:first-child {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.settings-section-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #6f767c;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.settings-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.settings-row:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.settings-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 8px 11px;
|
||||
border: 1px solid #d4d9dc;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
font-size: 13px;
|
||||
color: #1f2429;
|
||||
font-family: 'SF Mono', Menlo, Consolas, monospace;
|
||||
outline: none;
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.settings-input:focus {
|
||||
border-color: #07c160;
|
||||
box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.12);
|
||||
}
|
||||
|
||||
.settings-input-half {
|
||||
flex: 0 1 140px;
|
||||
}
|
||||
|
||||
.settings-input-quarter {
|
||||
flex: 0 1 90px;
|
||||
}
|
||||
|
||||
.settings-btn {
|
||||
padding: 7px 14px;
|
||||
border: 1px solid #d4d9dc;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: #30383d;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: #07c160;
|
||||
color: #078f49;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-btn-primary {
|
||||
background: #07c160;
|
||||
color: #fff;
|
||||
border-color: #07c160;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #06ad56;
|
||||
color: #fff;
|
||||
border-color: #06ad56;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-hint {
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
color: #8a9298;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.settings-hint code {
|
||||
background: #eef0f2;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
.settings-status {
|
||||
font-size: 12px;
|
||||
color: #59636a;
|
||||
}
|
||||
|
||||
.settings-status.ok {
|
||||
color: #078f49;
|
||||
}
|
||||
|
||||
.settings-status.fail {
|
||||
color: #c73737;
|
||||
}
|
||||
|
||||
.settings-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #30383d;
|
||||
|
||||
input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: #07c160;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-self {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.settings-self-avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 10px;
|
||||
background: #07c160;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-self-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.settings-self-nickname {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1f2429;
|
||||
}
|
||||
|
||||
.settings-self-wxid {
|
||||
font-size: 12px;
|
||||
color: #6f767c;
|
||||
margin-top: 2px;
|
||||
font-family: 'SF Mono', Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
.settings-self-account {
|
||||
font-size: 11px;
|
||||
color: #8a9298;
|
||||
margin-top: 2px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.settings-self-empty {
|
||||
font-size: 13px;
|
||||
color: #8a9298;
|
||||
}
|
||||
|
||||
.settings-path {
|
||||
display: inline-block;
|
||||
font-family: 'SF Mono', Menlo, Consolas, monospace;
|
||||
font-size: 11px;
|
||||
background: #eef0f2;
|
||||
padding: 3px 7px;
|
||||
border-radius: 4px;
|
||||
color: #30383d;
|
||||
word-break: break-all;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.app-toast {
|
||||
position: fixed;
|
||||
top: 18px;
|
||||
|
||||
@@ -230,9 +230,7 @@
|
||||
.search-workspace,
|
||||
.ai-search-scope-panel,
|
||||
.ai-search-main,
|
||||
.ai-search-evidence-panel,
|
||||
.export-config-panel,
|
||||
.export-preview-panel,
|
||||
.api-main,
|
||||
.api-runtime-panel {
|
||||
background: var(--wxex-bg-main);
|
||||
@@ -240,9 +238,7 @@
|
||||
}
|
||||
|
||||
.ai-search-scope-panel,
|
||||
.ai-search-evidence-panel,
|
||||
.export-config-panel,
|
||||
.export-preview-panel,
|
||||
.api-runtime-panel {
|
||||
border-color: var(--wxex-border);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import { fireEvent, render, screen } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import {
|
||||
AISearchComposer,
|
||||
type AISearchComposerProps
|
||||
} from '../../src/renderer/src/components/search/AISearchComposer'
|
||||
|
||||
const renderComposer = (
|
||||
overrides: Partial<AISearchComposerProps> = {}
|
||||
): { props: AISearchComposerProps } => {
|
||||
const props: AISearchComposerProps = {
|
||||
query: '当前问题',
|
||||
sourceLabel: '所有聊天记录',
|
||||
rangeLabel: '近 30 天',
|
||||
history: ['历史问题一'],
|
||||
historyOpen: false,
|
||||
loading: false,
|
||||
knowledgeSyncing: false,
|
||||
onQueryChange: vi.fn(),
|
||||
onHistoryOpenChange: vi.fn(),
|
||||
onRestoreHistory: vi.fn(),
|
||||
onRemoveHistory: vi.fn(),
|
||||
onSubmit: vi.fn(),
|
||||
onCancel: vi.fn(),
|
||||
...overrides
|
||||
}
|
||||
render(<AISearchComposer {...props} />)
|
||||
return { props }
|
||||
}
|
||||
|
||||
describe('AISearchComposer', () => {
|
||||
it('submits with the form or Enter while preserving Shift+Enter and IME composition', async () => {
|
||||
const user = userEvent.setup()
|
||||
const { props } = renderComposer()
|
||||
const textbox = screen.getByRole('textbox')
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /开始分析/ }))
|
||||
expect(props.onSubmit).toHaveBeenCalledOnce()
|
||||
|
||||
fireEvent.keyDown(textbox, { key: 'Enter' })
|
||||
expect(props.onSubmit).toHaveBeenCalledTimes(2)
|
||||
|
||||
fireEvent.keyDown(textbox, { key: 'Enter', shiftKey: true })
|
||||
fireEvent.keyDown(textbox, { key: 'Enter', isComposing: true })
|
||||
expect(props.onSubmit).toHaveBeenCalledTimes(2)
|
||||
})
|
||||
|
||||
it('updates the controlled query and routes loading cancellation', async () => {
|
||||
const user = userEvent.setup()
|
||||
const { props } = renderComposer({ loading: true })
|
||||
|
||||
await user.type(screen.getByRole('textbox'), '新')
|
||||
expect(props.onQueryChange).toHaveBeenCalled()
|
||||
await user.click(screen.getByRole('button', { name: /取消分析/ }))
|
||||
expect(props.onCancel).toHaveBeenCalledOnce()
|
||||
expect(props.onSubmit).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('routes history restore, delete, and close interactions', async () => {
|
||||
const user = userEvent.setup()
|
||||
const { props } = renderComposer({ historyOpen: true })
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '历史问题一' }))
|
||||
expect(props.onRestoreHistory).toHaveBeenCalledWith('历史问题一')
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '删除历史问题：历史问题一' }))
|
||||
expect(props.onRemoveHistory).toHaveBeenCalledWith('历史问题一')
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '关闭历史提问' }))
|
||||
expect(props.onHistoryOpenChange).toHaveBeenCalledWith(false)
|
||||
})
|
||||
|
||||
it('disables submission while Knowledge is syncing', () => {
|
||||
renderComposer({ knowledgeSyncing: true })
|
||||
expect(screen.getByRole('button', { name: /同步中，暂不可分析/ })).toBeDisabled()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,70 @@
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { AISearchEvidencePanel } from '../../src/renderer/src/components/search/AISearchEvidencePanel'
|
||||
import type { EvidenceItem } from '../../src/renderer/src/components/search/searchTypes'
|
||||
import { makeCacheRecord, makePipelineEvidence } from './support/ai-search-fixtures'
|
||||
|
||||
const evidence = makeCacheRecord({
|
||||
query: '证据测试',
|
||||
evidence: [makePipelineEvidence(1)]
|
||||
}).evidence as EvidenceItem[]
|
||||
|
||||
const renderPanel = (
|
||||
overrides: Partial<React.ComponentProps<typeof AISearchEvidencePanel>> = {}
|
||||
): React.ComponentProps<typeof AISearchEvidencePanel> => {
|
||||
const props: React.ComponentProps<typeof AISearchEvidencePanel> = {
|
||||
evidence,
|
||||
collectionCount: 2,
|
||||
selectedEvidence: 0,
|
||||
evidenceFlash: { index: -1, nonce: 0 },
|
||||
senderNames: { 'sender-1': '发送者 1' },
|
||||
hasMoreEvidence: true,
|
||||
onFocusEvidence: vi.fn(),
|
||||
onJumpToEvidence: vi.fn(),
|
||||
onLoadMoreEvidence: vi.fn(),
|
||||
setEvidenceCardRef: vi.fn(),
|
||||
...overrides
|
||||
}
|
||||
render(<AISearchEvidencePanel {...props} />)
|
||||
return props
|
||||
}
|
||||
|
||||
describe('AISearchEvidencePanel', () => {
|
||||
it('renders stable Evidence labels and routes focus, jump, and load-more callbacks', async () => {
|
||||
const user = userEvent.setup()
|
||||
const props = renderPanel()
|
||||
|
||||
expect(screen.getByText('1/2 条样本')).toBeVisible()
|
||||
expect(screen.getByText(/E1 · 发送者 1/)).toBeVisible()
|
||||
expect(screen.getByText('证据 1')).toBeVisible()
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '选择证据 E1，发送者 1' }))
|
||||
expect(props.onFocusEvidence).toHaveBeenCalledWith(0)
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '跳转到原聊天 ↗' }))
|
||||
expect(props.onJumpToEvidence).toHaveBeenCalledWith(0)
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '加载更多证据' }))
|
||||
expect(props.onLoadMoreEvidence).toHaveBeenCalledOnce()
|
||||
})
|
||||
|
||||
it('supports keyboard focus selection and the focus-flash state', async () => {
|
||||
const user = userEvent.setup()
|
||||
const props = renderPanel({ evidenceFlash: { index: 0, nonce: 1 } })
|
||||
const card = screen.getByText(/E1 · 发送者 1/).closest('article')
|
||||
const selection = screen.getByRole('button', { name: '选择证据 E1，发送者 1' })
|
||||
|
||||
expect(card).toHaveClass('ai-search-evidence-focus-flash')
|
||||
selection.focus()
|
||||
await user.keyboard('{Enter}')
|
||||
expect(props.onFocusEvidence).toHaveBeenCalledWith(0)
|
||||
})
|
||||
|
||||
it('uses the shared EmptyState when no Evidence is visible', () => {
|
||||
renderPanel({ evidence: [], collectionCount: 0, hasMoreEvidence: false })
|
||||
|
||||
expect(screen.getByText('等待检索结果')).toBeVisible()
|
||||
expect(screen.queryByRole('button', { name: '加载更多证据' })).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@@ -132,4 +132,26 @@ describe('useExternalProviderConsent', () => {
|
||||
expect(resolved).toHaveBeenCalledOnce()
|
||||
expect(resolved).toHaveBeenCalledWith(true)
|
||||
})
|
||||
|
||||
it.each([true, false])(
|
||||
'settles the previous pending request when a new request replaces it, then resolves %s',
|
||||
async (secondDecision) => {
|
||||
const { result } = renderHook(() => useExternalProviderConsent())
|
||||
let first!: Promise<boolean>
|
||||
let second!: Promise<boolean>
|
||||
act(() => {
|
||||
first = result.current.requestExternalProviderConsent('First', 'first-recipient')
|
||||
second = result.current.requestExternalProviderConsent('Second', 'second-recipient')
|
||||
})
|
||||
|
||||
await expect(first).resolves.toBe(false)
|
||||
expect(result.current.externalProviderConsent).toEqual({
|
||||
providerName: 'Second',
|
||||
recipient: 'second-recipient'
|
||||
})
|
||||
|
||||
act(() => result.current.settleExternalProviderConsent(secondDecision))
|
||||
await expect(second).resolves.toBe(secondDecision)
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
@@ -4,8 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { AISearchWorkspace } from '../../src/renderer/src/components/search/AISearchWorkspace'
|
||||
import {
|
||||
SEARCH_CACHE_KEY,
|
||||
SEARCH_HISTORY_KEY,
|
||||
buildSearchCacheKey
|
||||
SEARCH_HISTORY_KEY
|
||||
} from '../../src/renderer/src/components/search/searchUtils'
|
||||
import {
|
||||
aiSearchContact,
|
||||
@@ -45,12 +44,11 @@ const readyKnowledgeStatus = {
|
||||
shmBytes: 32
|
||||
}
|
||||
|
||||
let knowledgeListener: ((status: typeof readyKnowledgeStatus) => void) | undefined
|
||||
let progressListener: ((progress: Record<string, unknown>) => void) | undefined
|
||||
let knowledgeUnsubscribe: ReturnType<typeof vi.fn>
|
||||
let progressUnsubscribe: ReturnType<typeof vi.fn>
|
||||
|
||||
const makeProps = (overrides: Record<string, unknown> = {}) => ({
|
||||
const makeProps = (overrides: Record<string, unknown> = {}): Record<string, unknown> => ({
|
||||
contacts: [aiSearchContact, aiSearchGroup],
|
||||
selectedContact: aiSearchContact,
|
||||
dbReady: true,
|
||||
@@ -68,17 +66,17 @@ const makeProps = (overrides: Record<string, unknown> = {}) => ({
|
||||
...overrides
|
||||
})
|
||||
|
||||
const renderWorkspace = (overrides: Record<string, unknown> = {}) =>
|
||||
const renderWorkspace = (overrides: Record<string, unknown> = {}): ReturnType<typeof render> =>
|
||||
render(<AISearchWorkspace {...(makeProps(overrides) as never)} />)
|
||||
|
||||
const submitQuery = async (query = '测试搜索问题') => {
|
||||
const submitQuery = async (query = '测试搜索问题'): Promise<ReturnType<typeof userEvent.setup>> => {
|
||||
const user = userEvent.setup()
|
||||
await user.type(screen.getByRole('textbox'), query)
|
||||
await user.click(screen.getByRole('button', { name: /开始分析/ }))
|
||||
return user
|
||||
}
|
||||
|
||||
const emitProgress = async (progress: Record<string, unknown>) => {
|
||||
const emitProgress = async (progress: Record<string, unknown>): Promise<void> => {
|
||||
await act(async () => {
|
||||
progressListener?.(progress)
|
||||
})
|
||||
@@ -88,7 +86,6 @@ beforeEach(() => {
|
||||
localStorage.clear()
|
||||
sessionStorage.clear()
|
||||
vi.clearAllMocks()
|
||||
knowledgeListener = undefined
|
||||
progressListener = undefined
|
||||
knowledgeUnsubscribe = vi.fn()
|
||||
progressUnsubscribe = vi.fn()
|
||||
@@ -97,10 +94,7 @@ beforeEach(() => {
|
||||
api.getSettings.mockResolvedValue({ settings: { debugEnabled: false } })
|
||||
api.getAppLogPath.mockResolvedValue('')
|
||||
api.getKnowledgeStatus.mockResolvedValue(readyKnowledgeStatus)
|
||||
api.onKnowledgeStatus.mockImplementation((listener: typeof knowledgeListener) => {
|
||||
knowledgeListener = listener
|
||||
return knowledgeUnsubscribe
|
||||
})
|
||||
api.onKnowledgeStatus.mockImplementation(() => knowledgeUnsubscribe)
|
||||
api.onAiSearchProgress.mockImplementation((listener: typeof progressListener) => {
|
||||
progressListener = listener
|
||||
return progressUnsubscribe
|
||||
@@ -193,6 +187,55 @@ describe('AISearchWorkspace regression coverage before decomposition', () => {
|
||||
expect(screen.queryByText('测试搜索答案')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it.each([
|
||||
['no_evidence', '近 30 天内没有找到与问题相关的聊天消息。'],
|
||||
['retrieval_incomplete', '证据已就绪'],
|
||||
['failed', '本地检索失败'],
|
||||
['ai_failed', '证据已找到，但 AI 暂时无法生成回答']
|
||||
] as const)('does not persist History or Cache for %s', async (status, expectedText) => {
|
||||
api.runAiSearch.mockResolvedValue(
|
||||
makeSearchResult({
|
||||
status,
|
||||
error: status === 'no_evidence' ? '应被忽略' : expectedText,
|
||||
evidence: [makePipelineEvidence(1)]
|
||||
})
|
||||
)
|
||||
renderWorkspace()
|
||||
await submitQuery(`${status} 问题`)
|
||||
|
||||
expect(await screen.findByText(expectedText)).toBeInTheDocument()
|
||||
expect(localStorage.getItem(SEARCH_HISTORY_KEY)).toBeNull()
|
||||
expect(localStorage.getItem(SEARCH_CACHE_KEY)).toBeNull()
|
||||
expect(sessionStorage.length).toBe(0)
|
||||
})
|
||||
|
||||
it('applies common Evidence state before rejecting a completed result without an answer', async () => {
|
||||
api.runAiSearch.mockResolvedValue({
|
||||
...makeSearchResult({ evidence: [makePipelineEvidence(1)] }),
|
||||
answer: undefined
|
||||
})
|
||||
renderWorkspace()
|
||||
await submitQuery('缺少回答')
|
||||
|
||||
expect(await screen.findByText('搜索任务未返回回答')).toBeInTheDocument()
|
||||
expect(screen.getByText('E1 · 发送者 1')).toBeInTheDocument()
|
||||
expect(localStorage.getItem(SEARCH_HISTORY_KEY)).toBeNull()
|
||||
expect(localStorage.getItem(SEARCH_CACHE_KEY)).toBeNull()
|
||||
})
|
||||
|
||||
it('keeps an explicitly empty Evidence Collection separate from Final Evidence', async () => {
|
||||
api.runAiSearch.mockResolvedValue(
|
||||
makeSearchResult({ evidence: [makePipelineEvidence(1)], evidenceCollection: [] })
|
||||
)
|
||||
renderWorkspace()
|
||||
await submitQuery('空浏览集合')
|
||||
|
||||
expect(await screen.findByText('测试搜索答案')).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: 'E1' })).toBeInTheDocument()
|
||||
expect(screen.queryByText('E1 · 发送者 1')).not.toBeInTheDocument()
|
||||
expect(screen.getByText('等待检索结果')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('handles an IPC rejection from the Search Worker as an insufficient result', async () => {
|
||||
api.runAiSearch.mockRejectedValue(new Error('Worker IPC 连接断开'))
|
||||
renderWorkspace()
|
||||
@@ -218,7 +261,9 @@ describe('AISearchWorkspace regression coverage before decomposition', () => {
|
||||
})
|
||||
|
||||
it('loads more Evidence from the current collection without calling runAiSearch again', async () => {
|
||||
const evidenceCollection = Array.from({ length: 9 }, (_, index) => makePipelineEvidence(index + 1))
|
||||
const evidenceCollection = Array.from({ length: 9 }, (_, index) =>
|
||||
makePipelineEvidence(index + 1)
|
||||
)
|
||||
api.runAiSearch.mockResolvedValue(
|
||||
makeSearchResult({ evidence: evidenceCollection.slice(0, 8), evidenceCollection })
|
||||
)
|
||||
@@ -263,7 +308,12 @@ describe('AISearchWorkspace regression coverage before decomposition', () => {
|
||||
|
||||
await waitFor(() => expect(api.runAiSearch).toHaveBeenCalledTimes(2))
|
||||
expect(screen.queryByText('E1 · 发送者 1')).not.toBeInTheDocument()
|
||||
resolveSecond?.(makeSearchResult({ requestId: api.runAiSearch.mock.calls[1][0].requestId, evidence: [secondEvidence] }))
|
||||
resolveSecond?.(
|
||||
makeSearchResult({
|
||||
requestId: api.runAiSearch.mock.calls[1][0].requestId,
|
||||
evidence: [secondEvidence]
|
||||
})
|
||||
)
|
||||
expect(await screen.findByText('E2 · 发送者 2')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
@@ -352,6 +402,32 @@ describe('AISearchWorkspace regression coverage before decomposition', () => {
|
||||
expect(screen.queryByRole('dialog', { name: '确认发送本次搜索资料' })).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('settles duplicate consent submissions without starting duplicate provider flows', async () => {
|
||||
api.getAiSearchProviderStatus.mockResolvedValue({
|
||||
configured: true,
|
||||
requiresConsent: true,
|
||||
providerId: 'remote-provider',
|
||||
providerName: 'Remote Provider',
|
||||
recipient: 'remote@example.test'
|
||||
})
|
||||
api.runAiSearch.mockResolvedValue(makeSearchResult())
|
||||
renderWorkspace()
|
||||
const user = userEvent.setup()
|
||||
await user.type(screen.getByRole('textbox'), '重复授权问题')
|
||||
const form = screen.getByRole('textbox').closest('form') as HTMLFormElement
|
||||
|
||||
fireEvent.submit(form)
|
||||
await screen.findByRole('dialog', { name: '确认发送本次搜索资料' })
|
||||
fireEvent.submit(form)
|
||||
await waitFor(() => expect(api.getAiSearchProviderStatus).toHaveBeenCalledTimes(2))
|
||||
await screen.findByRole('dialog', { name: '确认发送本次搜索资料' })
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '继续并发送' }))
|
||||
await screen.findByText('测试搜索答案')
|
||||
expect(api.authorizeAiSearchExternalProvider).toHaveBeenCalledOnce()
|
||||
expect(api.runAiSearch).toHaveBeenCalledOnce()
|
||||
})
|
||||
|
||||
it('does not start Search when the user rejects consent', async () => {
|
||||
api.getAiSearchProviderStatus.mockResolvedValue({
|
||||
configured: true,
|
||||
@@ -429,9 +505,7 @@ describe('AISearchWorkspace regression coverage before decomposition', () => {
|
||||
const query = '没有证据的缓存'
|
||||
localStorage.setItem(
|
||||
SEARCH_CACHE_KEY,
|
||||
JSON.stringify([
|
||||
makeCacheRecord({ query, answer: '只有摘要的缓存', evidence: [] })
|
||||
])
|
||||
JSON.stringify([makeCacheRecord({ query, answer: '只有摘要的缓存', evidence: [] })])
|
||||
)
|
||||
renderWorkspace()
|
||||
await submitQuery(query)
|
||||
@@ -443,8 +517,12 @@ describe('AISearchWorkspace regression coverage before decomposition', () => {
|
||||
|
||||
it('does not reuse the previous successful result for a new query', async () => {
|
||||
api.runAiSearch
|
||||
.mockResolvedValueOnce(makeSearchResult({ answer: '第一轮答案', evidence: [makePipelineEvidence(1)] }))
|
||||
.mockResolvedValueOnce(makeSearchResult({ answer: '第二轮答案', evidence: [makePipelineEvidence(2)] }))
|
||||
.mockResolvedValueOnce(
|
||||
makeSearchResult({ answer: '第一轮答案', evidence: [makePipelineEvidence(1)] })
|
||||
)
|
||||
.mockResolvedValueOnce(
|
||||
makeSearchResult({ answer: '第二轮答案', evidence: [makePipelineEvidence(2)] })
|
||||
)
|
||||
renderWorkspace()
|
||||
const user = await submitQuery('第一轮问题')
|
||||
await screen.findByText('第一轮答案')
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
import { useState } from 'react'
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { ChatImageViewer } from '../../src/renderer/src/components/chat/ChatImageViewer'
|
||||
import { TooltipProvider } from '../../src/renderer/src/components/ui'
|
||||
|
||||
const imageUrl =
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Y9ZQmcAAAAASUVORK5CYII='
|
||||
|
||||
function Harness({ onClose = vi.fn() }: { onClose?: () => void }): React.ReactElement {
|
||||
const [open, setOpen] = useState(false)
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<button type="button" onClick={() => setOpen(true)}>
|
||||
查看图片
|
||||
</button>
|
||||
{open && (
|
||||
<ChatImageViewer
|
||||
imageUrl={imageUrl}
|
||||
onClose={() => {
|
||||
onClose()
|
||||
setOpen(false)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
|
||||
describe('ChatImageViewer', () => {
|
||||
it('zooms, rotates, drags, and resets the image', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(<Harness />)
|
||||
await user.click(screen.getByRole('button', { name: '查看图片' }))
|
||||
const image = screen.getByAltText('图片预览')
|
||||
const stage = screen.getByLabelText('图片查看区域')
|
||||
|
||||
expect(screen.getByText('100%')).toBeVisible()
|
||||
await user.click(screen.getByRole('button', { name: '放大' }))
|
||||
expect(screen.getByText('110%')).toBeVisible()
|
||||
await user.click(screen.getByRole('button', { name: '右旋转' }))
|
||||
expect(image).toHaveStyle({ transform: 'translate(0px, 0px) scale(1.1) rotate(90deg)' })
|
||||
|
||||
fireEvent.mouseDown(stage, { clientX: 10, clientY: 15 })
|
||||
fireEvent.mouseMove(stage, { clientX: 35, clientY: 45 })
|
||||
fireEvent.mouseUp(stage)
|
||||
expect(image).toHaveStyle({ transform: 'translate(25px, 30px) scale(1.1) rotate(90deg)' })
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '重置图片' }))
|
||||
expect(screen.getByText('100%')).toBeVisible()
|
||||
expect(image).toHaveStyle({ transform: 'translate(0px, 0px) scale(1) rotate(0deg)' })
|
||||
})
|
||||
|
||||
it('closes with Escape or the overlay and restores focus', async () => {
|
||||
const user = userEvent.setup()
|
||||
const onClose = vi.fn()
|
||||
render(<Harness onClose={onClose} />)
|
||||
const opener = screen.getByRole('button', { name: '查看图片' })
|
||||
|
||||
await user.click(opener)
|
||||
await user.keyboard('{Escape}')
|
||||
expect(screen.queryByRole('dialog', { name: '图片查看' })).not.toBeInTheDocument()
|
||||
await waitFor(() => expect(opener).toHaveFocus())
|
||||
|
||||
await user.click(opener)
|
||||
const dialog = screen.getByRole('dialog', { name: '图片查看' })
|
||||
await user.click(dialog.previousElementSibling as HTMLElement)
|
||||
expect(screen.queryByRole('dialog', { name: '图片查看' })).not.toBeInTheDocument()
|
||||
await waitFor(() => expect(opener).toHaveFocus())
|
||||
expect(onClose).toHaveBeenCalledTimes(2)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,60 @@
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { ChatHeader } from '../../src/renderer/src/components/chat/ChatHeader'
|
||||
import { ExportMenu } from '../../src/renderer/src/components/chat/ExportMenu'
|
||||
import type { Contact } from '../../src/shared/types'
|
||||
|
||||
const contact: Contact = {
|
||||
md5: 'group-md5',
|
||||
m_nsUsrName: 'group@chatroom',
|
||||
m_nsNickName: '测试群',
|
||||
type: 'group'
|
||||
}
|
||||
|
||||
describe('chat menus', () => {
|
||||
it('runs the selected export range and closes the menu', async () => {
|
||||
const user = userEvent.setup()
|
||||
const onExport = vi.fn()
|
||||
render(<ExportMenu disabled={false} onExport={onExport} />)
|
||||
|
||||
const trigger = screen.getByRole('button', { name: '导出' })
|
||||
await user.click(trigger)
|
||||
await user.click(screen.getByRole('menuitem', { name: '导出近 7 天' }))
|
||||
|
||||
expect(onExport).toHaveBeenCalledWith(7)
|
||||
expect(screen.queryByRole('menuitem', { name: '导出近 7 天' })).not.toBeInTheDocument()
|
||||
expect(trigger).toHaveFocus()
|
||||
})
|
||||
|
||||
it('closes the chat More menu with Escape and invokes refresh data once', async () => {
|
||||
const user = userEvent.setup()
|
||||
const onRefreshData = vi.fn()
|
||||
render(
|
||||
<ChatHeader
|
||||
contact={contact}
|
||||
isGroupChat
|
||||
loadedCount={3}
|
||||
filteredCount={3}
|
||||
contentFilter=""
|
||||
isAiLoading={false}
|
||||
onContentFilterChange={vi.fn()}
|
||||
onRefresh={vi.fn()}
|
||||
onRefreshData={onRefreshData}
|
||||
onTestSend={vi.fn()}
|
||||
onOpenAiSettings={vi.fn()}
|
||||
/>
|
||||
)
|
||||
|
||||
const trigger = screen.getByRole('button', { name: '更多' })
|
||||
await user.click(trigger)
|
||||
expect(screen.getByRole('menuitem', { name: '刷新数据' })).toBeVisible()
|
||||
await user.keyboard('{Escape}')
|
||||
expect(screen.queryByRole('menuitem', { name: '刷新数据' })).not.toBeInTheDocument()
|
||||
expect(trigger).toHaveFocus()
|
||||
|
||||
await user.click(trigger)
|
||||
await user.click(screen.getByRole('menuitem', { name: '刷新数据' }))
|
||||
expect(onRefreshData).toHaveBeenCalledOnce()
|
||||
})
|
||||
})
|
||||
@@ -69,7 +69,9 @@ describe('export progress panel', () => {
|
||||
|
||||
const progressbar = screen.getByRole('progressbar', { name: '导出进度' })
|
||||
expect(progressbar).toHaveAttribute('aria-valuenow', '31')
|
||||
expect(progressbar.querySelector('span')).toHaveStyle({ width: '31%' })
|
||||
expect(progressbar.querySelector('[data-slot="progress-indicator"]')).toHaveStyle({
|
||||
transform: 'translateX(-69%)'
|
||||
})
|
||||
})
|
||||
|
||||
it('shows the current conversation and overall position for all export', () => {
|
||||
|
||||
@@ -31,6 +31,7 @@ describe('ExportWorkspace multi-chat selection', () => {
|
||||
onExportProgress: vi.fn(() => vi.fn()),
|
||||
getVoiceModelStatus: vi.fn().mockRejectedValue(new Error('fixture model unavailable')),
|
||||
getGroupSnapshot: vi.fn(async () => ({ members: [] })),
|
||||
selectExportDirectory: vi.fn(async () => ({ canceled: false, path: '/fixture/export' })),
|
||||
cancelExport: vi.fn(async () => ({ success: true })),
|
||||
revealExport: vi.fn(async () => ({ success: true }))
|
||||
}
|
||||
@@ -197,6 +198,25 @@ describe('ExportWorkspace multi-chat selection', () => {
|
||||
expect(document.querySelector('.export-all-chat-avatar.user')).not.toBeInTheDocument()
|
||||
expect(loadPreviewMessages).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('keeps custom dates and output directory selection in the workspace request', async () => {
|
||||
const onStartExport = vi.fn(async () => ({ success: false }))
|
||||
renderWorkspace(onStartExport)
|
||||
|
||||
await userEvent.click(screen.getByRole('button', { name: '自定义时间' }))
|
||||
await userEvent.type(screen.getByLabelText('开始时间'), '2026-08-01T09:30')
|
||||
await userEvent.type(screen.getByLabelText('结束时间'), '2026-08-02T18:45')
|
||||
await userEvent.click(screen.getByRole('button', { name: '选择位置' }))
|
||||
|
||||
expect(await screen.findByText('/fixture/export/聊天 A_聊天档案.csv')).toBeVisible()
|
||||
await userEvent.click(screen.getByRole('button', { name: '开始导出' }))
|
||||
await waitFor(() => expect(onStartExport).toHaveBeenCalledOnce())
|
||||
expect(onStartExport.mock.calls[0][0]).toMatchObject({
|
||||
outputDirectory: '/fixture/export',
|
||||
startTime: Math.floor(new Date('2026-08-01T09:30').getTime() / 1000),
|
||||
endTime: Math.floor(new Date('2026-08-02T18:45').getTime() / 1000)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('ExportTaskCenter details', () => {
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
import { useState } from 'react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import {
|
||||
ExternalProviderConsentDialog,
|
||||
type ExternalProviderConsent
|
||||
} from '../../src/renderer/src/components/search/ExternalProviderConsentDialog'
|
||||
|
||||
const consent: ExternalProviderConsent = {
|
||||
providerName: 'Remote Provider',
|
||||
recipient: 'remote@example.test'
|
||||
}
|
||||
|
||||
describe('ExternalProviderConsentDialog', () => {
|
||||
it('renders provider details and confirms the controlled action', async () => {
|
||||
const user = userEvent.setup()
|
||||
const onConfirm = vi.fn()
|
||||
|
||||
render(
|
||||
<ExternalProviderConsentDialog consent={consent} onConfirm={onConfirm} onCancel={vi.fn()} />
|
||||
)
|
||||
|
||||
expect(screen.getByRole('dialog', { name: '确认发送本次搜索资料' })).toBeVisible()
|
||||
expect(screen.getByText('Remote Provider')).toBeVisible()
|
||||
expect(screen.getByRole('dialog')).toHaveTextContent('remote@example.test')
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '继续并发送' }))
|
||||
expect(onConfirm).toHaveBeenCalledOnce()
|
||||
})
|
||||
|
||||
it('treats the cancel button, Escape, and outside interaction as cancellation', async () => {
|
||||
const user = userEvent.setup()
|
||||
const onCancel = vi.fn()
|
||||
const { rerender } = render(
|
||||
<ExternalProviderConsentDialog consent={consent} onConfirm={vi.fn()} onCancel={onCancel} />
|
||||
)
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '取消' }))
|
||||
expect(onCancel).toHaveBeenCalledOnce()
|
||||
|
||||
rerender(
|
||||
<ExternalProviderConsentDialog consent={consent} onConfirm={vi.fn()} onCancel={onCancel} />
|
||||
)
|
||||
await user.keyboard('{Escape}')
|
||||
expect(onCancel).toHaveBeenCalledTimes(2)
|
||||
|
||||
rerender(
|
||||
<ExternalProviderConsentDialog consent={consent} onConfirm={vi.fn()} onCancel={onCancel} />
|
||||
)
|
||||
const overlay = screen.getByRole('dialog').previousElementSibling as HTMLElement
|
||||
await user.click(overlay)
|
||||
expect(onCancel).toHaveBeenCalledTimes(3)
|
||||
})
|
||||
|
||||
it('restores focus to the opener after the dialog is cancelled', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
function Harness(): React.ReactElement {
|
||||
const [open, setOpen] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<button type="button" onClick={() => setOpen(true)}>
|
||||
打开授权确认
|
||||
</button>
|
||||
<ExternalProviderConsentDialog
|
||||
consent={open ? consent : null}
|
||||
onConfirm={() => setOpen(false)}
|
||||
onCancel={() => setOpen(false)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
render(<Harness />)
|
||||
const opener = screen.getByRole('button', { name: '打开授权确认' })
|
||||
await user.click(opener)
|
||||
expect(screen.getByRole('dialog', { name: '确认发送本次搜索资料' })).toBeVisible()
|
||||
|
||||
await user.keyboard('{Escape}')
|
||||
expect(screen.queryByRole('dialog', { name: '确认发送本次搜索资料' })).not.toBeInTheDocument()
|
||||
expect(opener).toHaveFocus()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,70 @@
|
||||
import { useState } from 'react'
|
||||
import { render, screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { FirstUseWelcome } from '../../src/renderer/src/components/FirstUseWelcome'
|
||||
|
||||
describe('FirstUseWelcome', () => {
|
||||
it('closes with Escape or the overlay and restores focus to the opener', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
function Harness(): React.ReactElement {
|
||||
const [open, setOpen] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<button type="button" onClick={() => setOpen(true)}>
|
||||
打开新手引导
|
||||
</button>
|
||||
{open && (
|
||||
<FirstUseWelcome
|
||||
onDismiss={() => setOpen(false)}
|
||||
onOpenSearch={vi.fn()}
|
||||
onOpenReport={vi.fn()}
|
||||
onOpenAISettings={vi.fn()}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
render(<Harness />)
|
||||
const opener = screen.getByRole('button', { name: '打开新手引导' })
|
||||
await user.click(opener)
|
||||
expect(screen.getByRole('dialog', { name: '开始探索你的微信' })).toBeVisible()
|
||||
await user.keyboard('{Escape}')
|
||||
expect(screen.queryByRole('dialog', { name: '开始探索你的微信' })).not.toBeInTheDocument()
|
||||
await waitFor(() => expect(opener).toHaveFocus())
|
||||
|
||||
await user.click(opener)
|
||||
const dialog = screen.getByRole('dialog', { name: '开始探索你的微信' })
|
||||
await user.click(dialog.previousElementSibling as HTMLElement)
|
||||
expect(screen.queryByRole('dialog', { name: '开始探索你的微信' })).not.toBeInTheDocument()
|
||||
await waitFor(() => expect(opener).toHaveFocus())
|
||||
})
|
||||
|
||||
it('keeps the feature callbacks and guide link intact', async () => {
|
||||
const user = userEvent.setup()
|
||||
const onOpenSearch = vi.fn()
|
||||
const onOpenReport = vi.fn()
|
||||
const onOpenAISettings = vi.fn()
|
||||
render(
|
||||
<FirstUseWelcome
|
||||
onDismiss={vi.fn()}
|
||||
onOpenSearch={onOpenSearch}
|
||||
onOpenReport={onOpenReport}
|
||||
onOpenAISettings={onOpenAISettings}
|
||||
/>
|
||||
)
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /试试 AI 群聊日报/ }))
|
||||
expect(onOpenReport).toHaveBeenCalledOnce()
|
||||
await user.click(screen.getByRole('button', { name: '问问你的微信' }))
|
||||
expect(onOpenSearch).toHaveBeenCalledOnce()
|
||||
await user.click(screen.getByRole('button', { name: '配置 AI 模型' }))
|
||||
expect(onOpenAISettings).toHaveBeenCalledOnce()
|
||||
expect(screen.getByRole('link', { name: '查看完整使用教程' })).toHaveAttribute(
|
||||
'href',
|
||||
'https://github.com/Wxw-Gu/WechatExplorer/blob/main/docs/user-guide/getting-started.md'
|
||||
)
|
||||
})
|
||||
})
|
||||
@@ -40,6 +40,13 @@ describe('ImageBubble', () => {
|
||||
await userEvent.click(image)
|
||||
await waitFor(() => expect(onImageClick).toHaveBeenCalledWith(original))
|
||||
expect(requestImage.mock.calls[1][3]).toMatchObject({ force: true })
|
||||
|
||||
onImageClick.mockClear()
|
||||
requestImage.mockResolvedValueOnce({ data: original, isThumbnail: false })
|
||||
const trigger = screen.getByRole('button', { name: '查看图片' })
|
||||
trigger.focus()
|
||||
await userEvent.keyboard('{Enter}')
|
||||
await waitFor(() => expect(onImageClick).toHaveBeenCalledWith(original))
|
||||
})
|
||||
|
||||
it('shows an explicit error and allows retry', async () => {
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { useState } from 'react'
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { PersonalWechatSendDialog } from '../../src/renderer/src/components/chat/PersonalWechatSendDialog'
|
||||
|
||||
@@ -47,6 +49,27 @@ const readyStatus = {
|
||||
message: '个人微信已绑定'
|
||||
}
|
||||
|
||||
function Harness({ onClose = vi.fn() }: { onClose?: () => void }): React.ReactElement {
|
||||
const [open, setOpen] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<button type="button" onClick={() => setOpen(true)}>
|
||||
打开测试发送
|
||||
</button>
|
||||
{open && (
|
||||
<PersonalWechatSendDialog
|
||||
contact={contact}
|
||||
isGroupChat
|
||||
onClose={() => {
|
||||
onClose()
|
||||
setOpen(false)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
describe('PersonalWechatSendDialog', () => {
|
||||
beforeEach(() => {
|
||||
getStatus.mockReset().mockResolvedValue(readyStatus)
|
||||
@@ -208,4 +231,43 @@ describe('PersonalWechatSendDialog', () => {
|
||||
expect(await screen.findByText('已绑定，等待消息初始化')).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: '测试发送图片到群聊' })).toBeDisabled()
|
||||
})
|
||||
|
||||
it('closes with Escape or the overlay and restores focus to the opener', async () => {
|
||||
const user = userEvent.setup()
|
||||
const onClose = vi.fn()
|
||||
render(<Harness onClose={onClose} />)
|
||||
const opener = screen.getByRole('button', { name: '打开测试发送' })
|
||||
|
||||
await user.click(opener)
|
||||
await screen.findByText('技术交流群')
|
||||
await user.keyboard('{Escape}')
|
||||
expect(screen.queryByRole('dialog', { name: '个人微信测试发送' })).not.toBeInTheDocument()
|
||||
await waitFor(() => expect(opener).toHaveFocus())
|
||||
|
||||
await user.click(opener)
|
||||
const dialog = await screen.findByRole('dialog', { name: '个人微信测试发送' })
|
||||
await user.click(dialog.previousElementSibling as HTMLElement)
|
||||
expect(screen.queryByRole('dialog', { name: '个人微信测试发送' })).not.toBeInTheDocument()
|
||||
await waitFor(() => expect(opener).toHaveFocus())
|
||||
expect(onClose).toHaveBeenCalledTimes(2)
|
||||
})
|
||||
|
||||
it('keeps the dialog open while a message is being sent', async () => {
|
||||
const user = userEvent.setup()
|
||||
sendMessage.mockImplementation(() => new Promise(() => undefined))
|
||||
render(<Harness />)
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '打开测试发送' }))
|
||||
await screen.findByText('技术交流群')
|
||||
await user.click(screen.getByRole('button', { name: '选择图片' }))
|
||||
await user.click(screen.getByRole('button', { name: '测试发送图片到群聊' }))
|
||||
expect(screen.getByRole('button', { name: '正在发送…' })).toBeDisabled()
|
||||
|
||||
await user.keyboard('{Escape}')
|
||||
expect(screen.getByRole('dialog', { name: '个人微信测试发送' })).toBeVisible()
|
||||
await user.click(
|
||||
screen.getByRole('dialog', { name: '个人微信测试发送' }).previousElementSibling as HTMLElement
|
||||
)
|
||||
expect(screen.getByRole('dialog', { name: '个人微信测试发送' })).toBeVisible()
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { ReportGroupMemberSelector } from '../../src/renderer/src/components/reports/ReportGroupMemberSelector'
|
||||
import { ReportTaskStatusPanel } from '../../src/renderer/src/components/reports/ReportTaskStatusPanel'
|
||||
@@ -6,6 +7,7 @@ import { ReportTemplateSelector } from '../../src/renderer/src/components/report
|
||||
import { ReportViewer } from '../../src/renderer/src/components/reports/ReportViewer'
|
||||
import { ReportInfoPanel } from '../../src/renderer/src/components/reports/ReportInfoPanel'
|
||||
import { ReportToolbar } from '../../src/renderer/src/components/reports/ReportToolbar'
|
||||
import { ReportHistorySidebar } from '../../src/renderer/src/components/reports/ReportHistorySidebar'
|
||||
import { ModelSummary } from '../../src/renderer/src/components/reports/ModelSummary'
|
||||
import type { Contact } from '../../src/shared/types'
|
||||
import type { GeneratedReportRecord } from '../../src/shared/report-history'
|
||||
@@ -434,7 +436,8 @@ describe('daily report controls', () => {
|
||||
globalThis.ResizeObserver = originalResizeObserver
|
||||
})
|
||||
|
||||
it('keeps the file action inside More and labels both AI model roles', () => {
|
||||
it('keeps the file action inside More and labels both AI model roles', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(
|
||||
<>
|
||||
<ReportToolbar
|
||||
@@ -469,13 +472,53 @@ describe('daily report controls', () => {
|
||||
</>
|
||||
)
|
||||
|
||||
expect(screen.getByRole('button', { name: '生成微信卡片' })).toBeVisible()
|
||||
fireEvent.click(screen.getByRole('button', { name: '更多' }))
|
||||
expect(screen.getByRole('button', { name: '打开文件夹' })).toBeVisible()
|
||||
expect(screen.queryByRole('menuitem', { name: '生成微信卡片' })).not.toBeInTheDocument()
|
||||
await user.click(screen.getByRole('button', { name: '更多' }))
|
||||
expect(screen.getByRole('menuitem', { name: '生成微信卡片' })).toBeVisible()
|
||||
expect(screen.getByRole('menuitem', { name: '打开文件夹' })).toBeVisible()
|
||||
expect(screen.getByText('文字模型')).toBeVisible()
|
||||
expect(screen.getByText('DeepSeek Chat')).toBeVisible()
|
||||
expect(screen.getByText('图片模型')).toBeVisible()
|
||||
expect(screen.getByText('gpt-5.6-sol')).toBeVisible()
|
||||
|
||||
await user.keyboard('{Escape}')
|
||||
expect(screen.queryByRole('menuitem', { name: '生成微信卡片' })).not.toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: '更多' })).toHaveFocus()
|
||||
})
|
||||
|
||||
it('keeps unavailable toolbar actions disabled inside More', async () => {
|
||||
const user = userEvent.setup()
|
||||
const onReveal = vi.fn()
|
||||
const onShare = vi.fn()
|
||||
|
||||
render(
|
||||
<ReportToolbar
|
||||
canCopyImage={false}
|
||||
canReveal={false}
|
||||
canShare={false}
|
||||
canSwitchTemplate={false}
|
||||
isSwitchingTemplate={false}
|
||||
onSwitchTemplate={vi.fn()}
|
||||
onRegenerate={vi.fn()}
|
||||
onCopyImage={vi.fn()}
|
||||
onReveal={onReveal}
|
||||
onShare={onShare}
|
||||
/>
|
||||
)
|
||||
|
||||
expect(screen.getByRole('button', { name: '切换模板' })).toBeDisabled()
|
||||
expect(screen.getByRole('button', { name: '复制图片' })).toBeDisabled()
|
||||
expect(screen.getByRole('button', { name: '打开报告' })).toBeDisabled()
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '更多' }))
|
||||
const shareItem = screen.getByRole('menuitem', { name: '生成微信卡片' })
|
||||
const revealItem = screen.getByRole('menuitem', { name: '打开文件夹' })
|
||||
expect(shareItem).toHaveAttribute('data-disabled')
|
||||
expect(revealItem).toHaveAttribute('data-disabled')
|
||||
await user.click(shareItem)
|
||||
await user.click(revealItem)
|
||||
expect(onShare).not.toHaveBeenCalled()
|
||||
expect(onReveal).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('opens the current group send dialog with the report PNG preselected', async () => {
|
||||
@@ -550,6 +593,7 @@ describe('daily report controls', () => {
|
||||
})
|
||||
|
||||
it('switches templates from the top toolbar using the saved report snapshot', async () => {
|
||||
const user = userEvent.setup()
|
||||
const onSwitchTemplate = vi.fn(async () => ({ success: true }))
|
||||
const report: GeneratedReportRecord = {
|
||||
id: 'report-switch',
|
||||
@@ -579,10 +623,10 @@ describe('daily report controls', () => {
|
||||
/>
|
||||
)
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '切换模板' }))
|
||||
await user.click(screen.getByRole('button', { name: '切换模板' }))
|
||||
expect(screen.getByText('仅重新排版，不调用 AI')).toBeVisible()
|
||||
expect(screen.getByRole('menuitem', { name: /默认模板经典日报/ })).toBeVisible()
|
||||
fireEvent.click(screen.getByRole('menuitem', { name: /Mobile 03AI Command Center/ }))
|
||||
await user.click(screen.getByRole('menuitem', { name: /Mobile 03AI Command Center/ }))
|
||||
await waitFor(() => expect(onSwitchTemplate).toHaveBeenCalledWith(report, 'mobile-dashboard'))
|
||||
|
||||
rerender(
|
||||
@@ -640,6 +684,96 @@ describe('daily report controls', () => {
|
||||
expect(screen.getByText('wxid-one')).toBeVisible()
|
||||
})
|
||||
|
||||
it('cancels report deletion and restores focus to the delete trigger', async () => {
|
||||
const user = userEvent.setup()
|
||||
const report: GeneratedReportRecord = {
|
||||
id: 'report-delete-cancel',
|
||||
contactId: 'group-md5',
|
||||
contactName: '测试群',
|
||||
dateRange: '今天',
|
||||
messageCount: 10,
|
||||
generatedAt: '2026-08-17T10:00:00.000Z',
|
||||
reportDate: '2026-08-17',
|
||||
htmlStatus: 'ready',
|
||||
pngStatus: 'ready'
|
||||
}
|
||||
|
||||
render(
|
||||
<ReportHistorySidebar
|
||||
reports={[report]}
|
||||
selectedReportId={report.id}
|
||||
selfInfo={null}
|
||||
dbReady
|
||||
onSelectReport={vi.fn()}
|
||||
onCreateReport={vi.fn()}
|
||||
onDeleteReport={vi.fn(async () => ({ success: true }))}
|
||||
onOpenSettings={vi.fn()}
|
||||
/>
|
||||
)
|
||||
|
||||
const deleteTrigger = screen.getByRole('button', { name: '删除日报' })
|
||||
await user.click(deleteTrigger)
|
||||
expect(screen.getByRole('alertdialog', { name: '删除日报？' })).toBeVisible()
|
||||
await user.click(screen.getByRole('button', { name: '取消' }))
|
||||
expect(screen.queryByRole('alertdialog', { name: '删除日报？' })).not.toBeInTheDocument()
|
||||
expect(deleteTrigger).toHaveFocus()
|
||||
})
|
||||
|
||||
it('prevents duplicate report deletion, keeps failures open, and closes after success', async () => {
|
||||
const user = userEvent.setup()
|
||||
const report: GeneratedReportRecord = {
|
||||
id: 'report-delete-result',
|
||||
contactId: 'group-md5',
|
||||
contactName: '测试群',
|
||||
dateRange: '今天',
|
||||
messageCount: 10,
|
||||
generatedAt: '2026-08-17T10:00:00.000Z',
|
||||
reportDate: '2026-08-17',
|
||||
htmlStatus: 'ready',
|
||||
pngStatus: 'ready'
|
||||
}
|
||||
let settleDelete: ((result: { success: boolean; error?: string }) => void) | undefined
|
||||
const onDeleteReport = vi
|
||||
.fn()
|
||||
.mockImplementationOnce(
|
||||
() =>
|
||||
new Promise<{ success: boolean; error?: string }>((resolve) => {
|
||||
settleDelete = resolve
|
||||
})
|
||||
)
|
||||
.mockResolvedValueOnce({ success: true })
|
||||
|
||||
render(
|
||||
<ReportHistorySidebar
|
||||
reports={[report]}
|
||||
selectedReportId={report.id}
|
||||
selfInfo={null}
|
||||
dbReady
|
||||
onSelectReport={vi.fn()}
|
||||
onCreateReport={vi.fn()}
|
||||
onDeleteReport={onDeleteReport}
|
||||
onOpenSettings={vi.fn()}
|
||||
/>
|
||||
)
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '删除日报' }))
|
||||
await user.click(screen.getByRole('button', { name: '删除', exact: true }))
|
||||
const pendingButton = screen.getByRole('button', { name: '删除中…' })
|
||||
expect(pendingButton).toBeDisabled()
|
||||
await user.click(pendingButton)
|
||||
expect(onDeleteReport).toHaveBeenCalledTimes(1)
|
||||
|
||||
settleDelete?.({ success: false, error: '文件正在使用' })
|
||||
expect(await screen.findByText('文件正在使用')).toBeVisible()
|
||||
expect(screen.getByRole('alertdialog', { name: '删除日报？' })).toBeVisible()
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '删除', exact: true }))
|
||||
await waitFor(() => expect(onDeleteReport).toHaveBeenCalledTimes(2))
|
||||
await waitFor(() =>
|
||||
expect(screen.queryByRole('alertdialog', { name: '删除日报？' })).not.toBeInTheDocument()
|
||||
)
|
||||
})
|
||||
|
||||
it('offers the classic default plus three mobile and two desktop report templates', () => {
|
||||
const onChange = vi.fn()
|
||||
render(<ReportTemplateSelector value="v1" onChange={onChange} />)
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import { useState } from 'react'
|
||||
import { render, screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { SkillPreviewDialog } from '../../src/renderer/src/features/api-center/components/SkillPreviewDialog'
|
||||
|
||||
const content = `# TraceMemo Reader
|
||||
|
||||
## 能力
|
||||
- 读取本地聊天记录
|
||||
|
||||
仅在用户授权后访问。`
|
||||
|
||||
function Harness({ onClose = vi.fn() }: { onClose?: () => void }): React.ReactElement {
|
||||
const [open, setOpen] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<button type="button" onClick={() => setOpen(true)}>
|
||||
预览 Skill
|
||||
</button>
|
||||
{open && (
|
||||
<SkillPreviewDialog
|
||||
content={content}
|
||||
version="v1.2"
|
||||
onClose={() => {
|
||||
onClose()
|
||||
setOpen(false)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
describe('SkillPreviewDialog', () => {
|
||||
it('renders the line-based preview and switches between rendered and raw content', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(<Harness />)
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '预览 Skill' }))
|
||||
const dialog = screen.getByRole('dialog', { name: 'TraceMemo Reader Skill 预览' })
|
||||
expect(dialog).toBeVisible()
|
||||
expect(screen.getByText('v1.2')).toBeVisible()
|
||||
expect(screen.getByRole('heading', { name: '能力' })).toBeVisible()
|
||||
expect(screen.getByText('读取本地聊天记录')).toBeVisible()
|
||||
expect(screen.queryByText(content)).not.toBeInTheDocument()
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '原始文本' }))
|
||||
expect(dialog.querySelector('pre')?.textContent).toBe(content)
|
||||
await user.click(screen.getByRole('button', { name: '渲染预览' }))
|
||||
expect(screen.getByRole('heading', { name: '能力' })).toBeVisible()
|
||||
})
|
||||
|
||||
it('closes with Escape or the overlay and restores focus to the opener', async () => {
|
||||
const user = userEvent.setup()
|
||||
const onClose = vi.fn()
|
||||
render(<Harness onClose={onClose} />)
|
||||
const opener = screen.getByRole('button', { name: '预览 Skill' })
|
||||
|
||||
await user.click(opener)
|
||||
await user.keyboard('{Escape}')
|
||||
expect(
|
||||
screen.queryByRole('dialog', { name: 'TraceMemo Reader Skill 预览' })
|
||||
).not.toBeInTheDocument()
|
||||
await waitFor(() => expect(opener).toHaveFocus())
|
||||
|
||||
await user.click(opener)
|
||||
const dialog = screen.getByRole('dialog', { name: 'TraceMemo Reader Skill 预览' })
|
||||
await user.click(dialog.previousElementSibling as HTMLElement)
|
||||
expect(
|
||||
screen.queryByRole('dialog', { name: 'TraceMemo Reader Skill 预览' })
|
||||
).not.toBeInTheDocument()
|
||||
await waitFor(() => expect(opener).toHaveFocus())
|
||||
expect(onClose).toHaveBeenCalledTimes(2)
|
||||
})
|
||||
})
|
||||
@@ -1,7 +1,15 @@
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { TextToSpeechPage } from '../../src/renderer/src/features/settings/pages/TextToSpeechPage'
|
||||
|
||||
vi.mock('../../src/renderer/src/utils/runtime-environment', () => ({
|
||||
isMac: true,
|
||||
isWindows: false,
|
||||
runtimePlatform: 'darwin',
|
||||
supportsPersonalWechatSend: true
|
||||
}))
|
||||
|
||||
const getSettings = vi.fn()
|
||||
const saveSettings = vi.fn()
|
||||
const listVoices = vi.fn()
|
||||
@@ -45,6 +53,7 @@ const response = {
|
||||
|
||||
describe('TextToSpeechPage', () => {
|
||||
beforeEach(() => {
|
||||
sessionStorage.clear()
|
||||
getSettings.mockReset().mockResolvedValue(response)
|
||||
listVoices.mockReset().mockResolvedValue({
|
||||
success: true,
|
||||
@@ -126,4 +135,40 @@ describe('TextToSpeechPage', () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: '前往 api.fish.audio 获取 Key' }))
|
||||
await waitFor(() => expect(openApiKeys).toHaveBeenCalledTimes(1))
|
||||
})
|
||||
|
||||
it('opens supported versions from both triggers and restores focus after closing', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(<TextToSpeechPage onNotice={vi.fn()} />)
|
||||
|
||||
const guideTrigger = await screen.findByRole('button', { name: '查看支持版本' })
|
||||
await user.click(guideTrigger)
|
||||
expect(screen.getByRole('dialog', { name: '支持的微信版本' })).toBeVisible()
|
||||
expect(screen.getByText('请安装下列完整版本之一。')).toBeVisible()
|
||||
expect(screen.getByRole('link', { name: /下载微信历史版本/ })).toHaveAttribute(
|
||||
'href',
|
||||
'https://github.com/zsbai/wechat-versions/releases'
|
||||
)
|
||||
expect(screen.getByText('4.1.6.12')).toBeVisible()
|
||||
expect(screen.getByText('4.1.11.53')).toBeVisible()
|
||||
|
||||
await user.keyboard('{Escape}')
|
||||
expect(screen.queryByRole('dialog', { name: '支持的微信版本' })).not.toBeInTheDocument()
|
||||
expect(guideTrigger).toHaveFocus()
|
||||
|
||||
const runtimeTrigger = screen.getByRole('button', { name: '支持版本' })
|
||||
await user.click(runtimeTrigger)
|
||||
const dialog = screen.getByRole('dialog', { name: '支持的微信版本' })
|
||||
expect(dialog).toBeVisible()
|
||||
await user.click(dialog.previousElementSibling as HTMLElement)
|
||||
expect(screen.queryByRole('dialog', { name: '支持的微信版本' })).not.toBeInTheDocument()
|
||||
expect(runtimeTrigger).toHaveFocus()
|
||||
})
|
||||
|
||||
it('keeps the session handoff that opens supported versions automatically', async () => {
|
||||
sessionStorage.setItem('wxe:show-supported-wechat-versions', '1')
|
||||
render(<TextToSpeechPage onNotice={vi.fn()} />)
|
||||
|
||||
expect(await screen.findByRole('dialog', { name: '支持的微信版本' })).toBeVisible()
|
||||
expect(sessionStorage.getItem('wxe:show-supported-wechat-versions')).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
import { useState } from 'react'
|
||||
import { render, screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { WechatShareCardDialog } from '../../src/renderer/src/components/reports/WechatShareCardDialog'
|
||||
|
||||
const getConfig = vi.fn()
|
||||
const saveConfig = vi.fn()
|
||||
const publishCard = vi.fn()
|
||||
|
||||
function Harness(): React.ReactElement {
|
||||
const [open, setOpen] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<button type="button" onClick={() => setOpen(true)}>
|
||||
打开分享卡片
|
||||
</button>
|
||||
{open && (
|
||||
<WechatShareCardDialog
|
||||
pngPath="/tmp/report.png"
|
||||
initialTitle="测试群日报"
|
||||
initialDescription="日报摘要"
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
describe('WechatShareCardDialog', () => {
|
||||
beforeEach(() => {
|
||||
getConfig.mockReset().mockResolvedValue({
|
||||
success: true,
|
||||
configured: true,
|
||||
serviceUrl: 'https://share.example.test'
|
||||
})
|
||||
saveConfig.mockReset().mockResolvedValue({ success: true })
|
||||
publishCard.mockReset()
|
||||
Object.defineProperty(window, 'api', {
|
||||
configurable: true,
|
||||
value: {
|
||||
getWechatShareConfig: getConfig,
|
||||
saveWechatShareConfig: saveConfig,
|
||||
publishWechatShareCard: publishCard
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
it('closes with Escape or the overlay and restores focus to the opener', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(<Harness />)
|
||||
const opener = screen.getByRole('button', { name: '打开分享卡片' })
|
||||
|
||||
await user.click(opener)
|
||||
expect(screen.getByRole('dialog', { name: '生成微信分享卡片' })).toBeVisible()
|
||||
await user.keyboard('{Escape}')
|
||||
expect(screen.queryByRole('dialog', { name: '生成微信分享卡片' })).not.toBeInTheDocument()
|
||||
await waitFor(() => expect(opener).toHaveFocus())
|
||||
|
||||
await user.click(opener)
|
||||
const dialog = screen.getByRole('dialog', { name: '生成微信分享卡片' })
|
||||
await user.click(dialog.previousElementSibling as HTMLElement)
|
||||
expect(screen.queryByRole('dialog', { name: '生成微信分享卡片' })).not.toBeInTheDocument()
|
||||
await waitFor(() => expect(opener).toHaveFocus())
|
||||
})
|
||||
|
||||
it('keeps the dialog open when Escape is pressed while publishing', async () => {
|
||||
const user = userEvent.setup()
|
||||
publishCard.mockImplementation(() => new Promise(() => undefined))
|
||||
render(<Harness />)
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '打开分享卡片' }))
|
||||
await waitFor(() => expect(getConfig).toHaveBeenCalledOnce())
|
||||
await user.click(screen.getByRole('button', { name: '生成二维码' }))
|
||||
expect(screen.getByRole('button', { name: '正在生成卡片…' })).toBeDisabled()
|
||||
await user.keyboard('{Escape}')
|
||||
expect(screen.getByRole('dialog', { name: '生成微信分享卡片' })).toBeVisible()
|
||||
})
|
||||
|
||||
it('saves first-time configuration, publishes the card, and copies its link', async () => {
|
||||
const user = userEvent.setup()
|
||||
const writeText = vi.spyOn(navigator.clipboard, 'writeText')
|
||||
getConfig.mockResolvedValue({ success: true, configured: false })
|
||||
publishCard.mockResolvedValue({
|
||||
success: true,
|
||||
shareUrl: 'https://share.example.test/card-1',
|
||||
qrCodeDataUrl: 'data:image/png;base64,fixture',
|
||||
expiresAt: '2026-08-26T08:00:00.000Z'
|
||||
})
|
||||
render(<Harness />)
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '打开分享卡片' }))
|
||||
const uploadToken = await screen.findByPlaceholderText('Cloudflare Worker 的 UPLOAD_TOKEN')
|
||||
await user.clear(uploadToken)
|
||||
await user.type(uploadToken, 'a'.repeat(24))
|
||||
await user.click(screen.getByRole('button', { name: '生成二维码' }))
|
||||
|
||||
await waitFor(() =>
|
||||
expect(saveConfig).toHaveBeenCalledWith({
|
||||
serviceUrl: 'https://share.example.com',
|
||||
uploadToken: 'a'.repeat(24)
|
||||
})
|
||||
)
|
||||
expect(publishCard).toHaveBeenCalledWith({
|
||||
pngPath: '/tmp/report.png',
|
||||
title: '测试群日报',
|
||||
description: '日报摘要',
|
||||
expiresInDays: 7
|
||||
})
|
||||
expect(await screen.findByAltText('微信分享二维码')).toBeVisible()
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '复制分享链接' }))
|
||||
await waitFor(() => expect(writeText).toHaveBeenCalledWith('https://share.example.test/card-1'))
|
||||
expect(await screen.findByRole('button', { name: '链接已复制' })).toBeVisible()
|
||||
})
|
||||
})
|
||||
+215
-10
@@ -4,6 +4,13 @@ import { tmpdir } from 'os'
|
||||
import { resolve } from 'path'
|
||||
import { launchTestApp } from './support/electron'
|
||||
|
||||
async function dismissFirstUseWelcome(page: import('@playwright/test').Page): Promise<void> {
|
||||
const welcome = page.getByRole('dialog', { name: '开始探索你的微信' })
|
||||
await expect(welcome).toBeVisible()
|
||||
await welcome.getByRole('button', { name: '关闭' }).click()
|
||||
await expect(welcome).toHaveCount(0)
|
||||
}
|
||||
|
||||
test('APP-01 first launch renders a usable connection screen without uncaught errors', async () => {
|
||||
const fixture = await launchTestApp({ mode: 'disconnected' })
|
||||
const pageErrors: Error[] = []
|
||||
@@ -29,6 +36,7 @@ test('KEY-01 KEY-02 invalid key remains recoverable and valid key enters the app
|
||||
await expect(keyInput).toBeVisible()
|
||||
await keyInput.fill('a'.repeat(64))
|
||||
await fixture.page.getByRole('button', { name: '连接数据库' }).click()
|
||||
await dismissFirstUseWelcome(fixture.page)
|
||||
await expect(fixture.page.getByRole('navigation', { name: '一级导航' })).toBeVisible()
|
||||
} finally {
|
||||
await fixture.close()
|
||||
@@ -67,8 +75,13 @@ test('P2-01 P2-02 guided connection exposes safe diagnostics and completes all s
|
||||
await fixture.page.getByRole('button', { name: '检查完成，继续' }).click()
|
||||
await fixture.page.getByRole('button', { name: '我已准备好' }).click()
|
||||
await fixture.page.getByRole('button', { name: '开始准备连接组件' }).click()
|
||||
await expect(fixture.page.getByRole('button', { name: '微信已登录，验证连接' })).toBeEnabled()
|
||||
await fixture.page.getByRole('button', { name: '微信已登录，验证连接' }).click()
|
||||
const verifyConnection = fixture.page.getByRole('button', {
|
||||
name: '验证连接',
|
||||
exact: true
|
||||
})
|
||||
await expect(verifyConnection).toBeEnabled()
|
||||
await verifyConnection.click()
|
||||
await dismissFirstUseWelcome(fixture.page)
|
||||
await expect(fixture.page.getByRole('navigation', { name: '一级导航' })).toBeVisible()
|
||||
} finally {
|
||||
await fixture.close()
|
||||
@@ -114,9 +127,130 @@ test('NAV-01 NAV-02 every top-level page is unique and switchable', async () =>
|
||||
}
|
||||
})
|
||||
|
||||
test('API-01 masks, reveals, and confirms rotation of the local API token', async () => {
|
||||
test('CHAT-01 archive More menu is keyboard-safe and keeps the page usable', async () => {
|
||||
const fixture = await launchTestApp()
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize({ width: 1000, height: 650 })
|
||||
await fixture.page.getByText('产品测试群', { exact: true }).click()
|
||||
const moreButton = fixture.page.getByRole('button', { name: '更多' })
|
||||
await moreButton.click()
|
||||
await expect(fixture.page.getByRole('menuitem', { name: '刷新数据' })).toBeVisible()
|
||||
await fixture.page.keyboard.press('Escape')
|
||||
await expect(fixture.page.getByRole('menuitem', { name: '刷新数据' })).toHaveCount(0)
|
||||
await expect(moreButton).toBeFocused()
|
||||
|
||||
await moreButton.click()
|
||||
await fixture.page.getByRole('menuitem', { name: '刷新数据' }).click()
|
||||
await expect(fixture.page.getByRole('heading', { name: '产品测试群' })).toBeVisible()
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(pageErrors).toEqual([])
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
test('CHAT-02 personal WeChat send dialog is keyboard-safe and fits the viewport', async () => {
|
||||
test.skip(process.platform !== 'darwin', 'Personal WeChat sending is currently macOS-only')
|
||||
const fixture = await launchTestApp()
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize({ width: 1000, height: 650 })
|
||||
await fixture.page.getByText('产品测试群', { exact: true }).click()
|
||||
const trigger = fixture.page.getByRole('button', { name: '发送消息' })
|
||||
await trigger.click()
|
||||
const dialog = fixture.page.getByRole('dialog', { name: '个人微信测试发送' })
|
||||
await expect(dialog).toBeVisible()
|
||||
await expect(
|
||||
dialog.locator('.personal-wechat-send-status strong').filter({ hasText: '个人微信已绑定' })
|
||||
).toBeVisible()
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(await dialog.evaluate((element) => element.scrollWidth <= element.clientWidth)).toBe(
|
||||
true
|
||||
)
|
||||
const bounds = await dialog.boundingBox()
|
||||
expect(bounds).not.toBeNull()
|
||||
expect(bounds!.y).toBeGreaterThanOrEqual(0)
|
||||
expect(bounds!.y + bounds!.height).toBeLessThanOrEqual(650)
|
||||
expect(pageErrors).toEqual([])
|
||||
|
||||
await fixture.page.keyboard.press('Escape')
|
||||
await expect(dialog).toHaveCount(0)
|
||||
await expect(trigger).toBeFocused()
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
test('GUIDE-01 first-use welcome is keyboard-safe and fits the viewport', async () => {
|
||||
const fixture = await launchTestApp()
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize({ width: 1000, height: 650 })
|
||||
const guideButton = fixture.page.getByRole('button', { name: '新手引导' })
|
||||
await guideButton.click()
|
||||
const dialog = fixture.page.getByRole('dialog', { name: '开始探索你的微信' })
|
||||
await expect(dialog).toBeVisible()
|
||||
await expect(dialog.getByRole('button', { name: /试试 AI 群聊日报/ })).toBeVisible()
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(pageErrors).toEqual([])
|
||||
|
||||
await fixture.page.keyboard.press('Escape')
|
||||
await expect(dialog).toHaveCount(0)
|
||||
await expect(guideButton).toBeFocused()
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
test('SETTINGS-01 supported WeChat versions dialog is keyboard-safe and fits the viewport', async () => {
|
||||
test.skip(process.platform !== 'darwin', 'The personal WeChat runtime is currently macOS-only')
|
||||
const fixture = await launchTestApp()
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize({ width: 1000, height: 650 })
|
||||
await fixture.page
|
||||
.getByRole('navigation', { name: '一级导航' })
|
||||
.getByRole('button', { name: '设置' })
|
||||
.click()
|
||||
await fixture.page.getByRole('button', { name: '文字转语音' }).click()
|
||||
|
||||
const trigger = fixture.page.getByRole('button', { name: '查看支持版本' })
|
||||
await expect(trigger).toBeVisible()
|
||||
await trigger.click()
|
||||
const dialog = fixture.page.getByRole('dialog', { name: '支持的微信版本' })
|
||||
await expect(dialog).toBeVisible()
|
||||
await expect(dialog.getByText('4.1.6.12')).toBeVisible()
|
||||
await expect(dialog.getByText('4.1.11.53')).toBeVisible()
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(pageErrors).toEqual([])
|
||||
|
||||
await fixture.page.keyboard.press('Escape')
|
||||
await expect(dialog).toHaveCount(0)
|
||||
await expect(trigger).toBeFocused()
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
test('API-01 manages the local API token and previews the Reader Skill safely', async () => {
|
||||
const fixture = await launchTestApp()
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize({ width: 1000, height: 650 })
|
||||
await fixture.page.getByRole('button', { name: 'API' }).click()
|
||||
await expect(fixture.page.getByText('API Token', { exact: true })).toBeVisible()
|
||||
await expect(fixture.page.getByText('••••••••••••••••')).toBeVisible()
|
||||
@@ -128,6 +262,30 @@ test('API-01 masks, reveals, and confirms rotation of the local API token', asyn
|
||||
fixture.page.once('dialog', (dialog) => dialog.accept())
|
||||
await fixture.page.getByRole('button', { name: '重新生成 Token' }).click()
|
||||
await expect(fixture.page.getByText('Token 已生成')).toBeVisible()
|
||||
|
||||
const previewTrigger = fixture.page
|
||||
.locator('#api-reader-skill')
|
||||
.getByRole('button', { name: '预览 Skill' })
|
||||
await expect(previewTrigger).toBeEnabled()
|
||||
await previewTrigger.click()
|
||||
const previewDialog = fixture.page.getByRole('dialog', {
|
||||
name: 'TraceMemo Reader Skill 预览'
|
||||
})
|
||||
await expect(previewDialog).toBeVisible()
|
||||
await expect(previewDialog.getByRole('heading', { name: '能力' })).toBeVisible()
|
||||
await previewDialog.getByRole('button', { name: '原始文本' }).click()
|
||||
await expect(previewDialog.getByText(/# TraceMemo Reader/)).toBeVisible()
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(
|
||||
await previewDialog.evaluate((element) => element.scrollWidth <= element.clientWidth)
|
||||
).toBe(true)
|
||||
expect(pageErrors).toEqual([])
|
||||
|
||||
await fixture.page.keyboard.press('Escape')
|
||||
await expect(previewDialog).toHaveCount(0)
|
||||
await expect(previewTrigger).toBeFocused()
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
@@ -135,7 +293,10 @@ test('API-01 masks, reveals, and confirms rotation of the local API token', asyn
|
||||
|
||||
test('EXPORT-01 multi-chat selection stays local to export and forces HTML', async () => {
|
||||
const fixture = await launchTestApp()
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize({ width: 1000, height: 650 })
|
||||
const navigation = fixture.page.getByRole('navigation', { name: '一级导航' })
|
||||
await fixture.page.getByRole('button', { name: '联系人 (1)' }).click()
|
||||
await fixture.page.getByText('文件传输助手', { exact: true }).click()
|
||||
@@ -157,6 +318,10 @@ test('EXPORT-01 multi-chat selection stays local to export and forces HTML', asy
|
||||
await expect(
|
||||
fixture.page.locator('.export-preview-bubble').filter({ hasText: '这是一条脱敏测试消息' })
|
||||
).toHaveCount(1)
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(pageErrors).toEqual([])
|
||||
|
||||
await navigation.getByRole('button', { name: '档案' }).click()
|
||||
await expect(fixture.page.getByText('转发多条内容', { exact: true })).toBeVisible()
|
||||
@@ -165,6 +330,26 @@ test('EXPORT-01 multi-chat selection stays local to export and forces HTML', asy
|
||||
}
|
||||
})
|
||||
|
||||
test('LAYOUT-01 core workspaces fit a narrow desktop viewport without page errors', async () => {
|
||||
const fixture = await launchTestApp()
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize({ width: 820, height: 600 })
|
||||
const navigation = fixture.page.getByRole('navigation', { name: '一级导航' })
|
||||
for (const pageName of ['档案', '问问微信', '日报', '导出', '设置']) {
|
||||
await navigation.getByRole('button', { name: pageName }).click()
|
||||
await expect(fixture.page.locator('main.app-shell-main')).not.toBeEmpty()
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
}
|
||||
expect(pageErrors).toEqual([])
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
test('ARCH-01 ARCH-02 folded chats and supported message types are represented explicitly', async () => {
|
||||
const fixture = await launchTestApp()
|
||||
try {
|
||||
@@ -173,9 +358,19 @@ test('ARCH-01 ARCH-02 folded chats and supported message types are represented e
|
||||
await expect(fixture.page.getByText('这是一条脱敏测试消息', { exact: true })).toBeVisible()
|
||||
await expect(fixture.page.getByText('暂不支持此消息', { exact: true })).toBeVisible()
|
||||
await expect(fixture.page.getByAltText('图片')).toBeVisible()
|
||||
await fixture.page.locator('.image-bubble.image-loaded').click()
|
||||
await expect(fixture.page.getByText('图片查看', { exact: true })).toBeVisible()
|
||||
await fixture.page.locator('.image-viewer-overlay').click({ position: { x: 5, y: 5 } })
|
||||
const imageTrigger = fixture.page.getByRole('button', { name: '查看图片' })
|
||||
await imageTrigger.click()
|
||||
const imageDialog = fixture.page.getByRole('dialog', { name: '图片查看' })
|
||||
await expect(imageDialog).toBeVisible()
|
||||
await imageDialog.getByRole('button', { name: '放大' }).click()
|
||||
await expect(imageDialog.getByText('110%')).toBeVisible()
|
||||
await imageDialog.getByRole('button', { name: '右旋转' }).click()
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
await fixture.page.keyboard.press('Escape')
|
||||
await expect(imageDialog).toHaveCount(0)
|
||||
await expect(imageTrigger).toBeFocused()
|
||||
|
||||
await fixture.page.getByRole('button', { name: '折叠群聊 (1)' }).click()
|
||||
await expect(fixture.page.getByText('折叠群聊样本', { exact: true })).toBeVisible()
|
||||
@@ -291,11 +486,21 @@ test('REPORT-01 REPORT-02 generates a fixed report with non-empty local assets',
|
||||
await expect(fixture.page.getByText('固定响应模型')).toBeVisible()
|
||||
await expect(fixture.page.getByText('图片模型')).toBeVisible()
|
||||
await expect(fixture.page.getByText('固定图片识别模型')).toBeVisible()
|
||||
await expect(fixture.page.getByRole('button', { name: '生成微信卡片' })).toHaveCount(0)
|
||||
await fixture.page.getByRole('button', { name: '更多' }).click()
|
||||
await expect(fixture.page.getByRole('button', { name: '生成微信卡片' })).toBeVisible()
|
||||
await expect(fixture.page.getByRole('menuitem', { name: '生成微信卡片' })).toHaveCount(0)
|
||||
const moreButton = fixture.page.getByRole('button', { name: '更多' })
|
||||
await moreButton.click()
|
||||
await fixture.page.getByRole('menuitem', { name: '生成微信卡片' }).click()
|
||||
const shareDialog = fixture.page.getByRole('dialog', { name: '生成微信分享卡片' })
|
||||
await expect(shareDialog).toBeVisible()
|
||||
await expect(shareDialog.locator('input').first()).toHaveValue(/产品测试群日报/)
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
await fixture.page.keyboard.press('Escape')
|
||||
await expect(shareDialog).toHaveCount(0)
|
||||
await expect(moreButton).toBeFocused()
|
||||
|
||||
await fixture.page.setViewportSize({ width: 1024, height: 760 })
|
||||
await fixture.setWindowContentSize({ width: 1024, height: 760 })
|
||||
const reportTitle = fixture.page.getByRole('heading', { name: '产品测试群 群聊日报' })
|
||||
await expect(reportTitle).toBeVisible()
|
||||
expect((await reportTitle.boundingBox())?.width || 0).toBeGreaterThan(170)
|
||||
|
||||
@@ -12,9 +12,11 @@ app.setPath('logs', path.join(userData, 'logs'))
|
||||
app.commandLine.appendSwitch('disable-gpu')
|
||||
|
||||
const VALID_KEY = 'a'.repeat(64)
|
||||
const imageData =
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Y9ZQmcAAAAASUVORK5CYII='
|
||||
const imageData = `data:image/png;base64,${fs.readFileSync(path.join(root, 'resources/icon.png')).toString('base64')}`
|
||||
const voiceData = 'UklGRiQAAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQAAAAA='
|
||||
const configuredNow = Number(process.env.WXE_E2E_NOW_MS)
|
||||
const fixtureNowMs =
|
||||
Number.isFinite(configuredNow) && configuredNow > 0 ? configuredNow : Date.now()
|
||||
|
||||
const formatFixtureDateTime = (timestampSeconds) => {
|
||||
const date = new Date(timestampSeconds * 1000)
|
||||
@@ -24,7 +26,7 @@ const formatFixtureDateTime = (timestampSeconds) => {
|
||||
|
||||
const allFixtureMessages = Object.values(fixture.messages).flat()
|
||||
const latestFixtureTime = Math.max(...allFixtureMessages.map((message) => message.createTime || 0))
|
||||
const fixtureTimeOffset = Math.floor(Date.now() / 1000) - 3600 - latestFixtureTime
|
||||
const fixtureTimeOffset = Math.floor(fixtureNowMs / 1000) - 3600 - latestFixtureTime
|
||||
for (const message of allFixtureMessages) {
|
||||
message.createTime = (message.createTime || latestFixtureTime) + fixtureTimeOffset
|
||||
message.datetime = formatFixtureDateTime(message.createTime)
|
||||
@@ -206,7 +208,7 @@ let settings = {
|
||||
debugEnabled: false,
|
||||
autoLogin: connected,
|
||||
autoLoginPreferenceSet: true,
|
||||
appearanceTheme: 'light',
|
||||
appearanceTheme: process.env.WXE_E2E_APPEARANCE_THEME === 'dark' ? 'dark' : 'light',
|
||||
compactMode: false,
|
||||
showStartupProgress: false,
|
||||
imageXorKey: '0x40',
|
||||
@@ -241,6 +243,65 @@ handle('settings:set', (patch) => {
|
||||
settings = { ...settings, ...patch }
|
||||
return { settings, settingsPath: path.join(userData, 'settings.json') }
|
||||
})
|
||||
handle('tts:getSettings', () => ({
|
||||
success: true,
|
||||
settings: {
|
||||
provider: 'fish-audio',
|
||||
hasApiKey: false,
|
||||
hasStoredApiKey: false,
|
||||
hasEnvironmentApiKey: false,
|
||||
keySource: 'missing',
|
||||
encryptionAvailable: true,
|
||||
selectedVoiceId: '',
|
||||
outputFormat: 'mp3',
|
||||
model: 's2.1-pro-free',
|
||||
phase: 'ready'
|
||||
},
|
||||
voices: []
|
||||
}))
|
||||
handle('wechat-personal:getRuntimeStatus', () => ({
|
||||
version: 'v0.0.18',
|
||||
state: 'ready',
|
||||
downloadedBytes: 100,
|
||||
totalBytes: 100,
|
||||
progress: 1,
|
||||
platform: 'darwin',
|
||||
architecture: 'arm64',
|
||||
supported: true,
|
||||
removable: true
|
||||
}))
|
||||
handle('wechat-personal:getStatus', () => ({
|
||||
state: 'online',
|
||||
platform: 'darwin',
|
||||
arch: 'arm64',
|
||||
sipDisabled: true,
|
||||
wechatRunning: true,
|
||||
wechatPid: 4668,
|
||||
boundWechatPid: 4668,
|
||||
oneBotPid: 5401,
|
||||
endpoint: '127.0.0.1:58080',
|
||||
endpointReady: true,
|
||||
wechatVersion: '4.1.11.53',
|
||||
runtimeReady: true,
|
||||
attachReady: true,
|
||||
baseAddress: '0x114ef8000',
|
||||
baseAddressReady: true,
|
||||
textHookInstalled: true,
|
||||
textHookReady: true,
|
||||
imageHookInstalled: true,
|
||||
imageHookReady: true,
|
||||
messageListenerReady: true,
|
||||
canSend: true,
|
||||
canSendText: true,
|
||||
canSendImage: true,
|
||||
canSendVoice: true,
|
||||
message: '个人微信已绑定'
|
||||
}))
|
||||
handle('wechat-share:getConfig', () => ({
|
||||
success: true,
|
||||
configured: true,
|
||||
serviceUrl: 'https://share.example.test'
|
||||
}))
|
||||
handle('key:getSavedDbKey', () => ({
|
||||
success: true,
|
||||
key: savedKey || undefined,
|
||||
@@ -579,6 +640,19 @@ handle('api:rotateToken', () => ({
|
||||
maskedToken: '••••••••••••••••'
|
||||
}))
|
||||
handle('api:copyCurl', () => ({ success: true }))
|
||||
handle('api:skillStatus', () => ({
|
||||
available: true,
|
||||
version: 'v1.2',
|
||||
filePath: '/fixture/tracememo-reader/SKILL.md',
|
||||
directoryPath: '/fixture/tracememo-reader',
|
||||
source: 'development',
|
||||
githubUrl: 'https://example.test/tracememo-reader'
|
||||
}))
|
||||
handle('api:readSkill', () => ({
|
||||
success: true,
|
||||
content:
|
||||
'# TraceMemo Reader\n\n## 能力\n- 读取本地聊天记录\n- 导出群聊日报\n\n仅在用户授权后访问。'
|
||||
}))
|
||||
handle('api:start', () => ({ running: true, host: settings.apiHost, port: settings.apiPort }))
|
||||
handle('api:stop', () => ({ running: false, host: settings.apiHost, port: settings.apiPort }))
|
||||
handle('api:toggle', (enabled) => ({
|
||||
|
||||
@@ -10,6 +10,7 @@ export interface TestApplication {
|
||||
app: ElectronApplication
|
||||
page: Page
|
||||
userData: string
|
||||
setWindowContentSize: (size: { width: number; height: number }) => Promise<void>
|
||||
close: () => Promise<void>
|
||||
}
|
||||
|
||||
@@ -20,6 +21,8 @@ export async function launchTestApp(
|
||||
largeContacts?: number
|
||||
corruptCache?: boolean
|
||||
aiFailure?: string
|
||||
now?: number
|
||||
appearanceTheme?: 'light' | 'dark'
|
||||
} = {}
|
||||
): Promise<TestApplication> {
|
||||
const ownsDirectory = !options.userData
|
||||
@@ -39,15 +42,29 @@ export async function launchTestApp(
|
||||
WXE_E2E_MODE: options.mode || 'connected',
|
||||
WXE_E2E_LARGE_CONTACTS: String(options.largeContacts || 0),
|
||||
WXE_E2E_CORRUPT_CACHE: options.corruptCache ? '1' : '0',
|
||||
WXE_E2E_AI_FAILURE: options.aiFailure || ''
|
||||
WXE_E2E_AI_FAILURE: options.aiFailure || '',
|
||||
WXE_E2E_NOW_MS: options.now ? String(options.now) : '',
|
||||
WXE_E2E_APPEARANCE_THEME: options.appearanceTheme || 'light'
|
||||
}
|
||||
})
|
||||
const page = await app.firstWindow()
|
||||
await page.waitForLoadState('domcontentloaded')
|
||||
const setWindowContentSize = async (size: { width: number; height: number }): Promise<void> => {
|
||||
await app.evaluate(({ BrowserWindow }, nextSize) => {
|
||||
const [window] = BrowserWindow.getAllWindows()
|
||||
if (!window) throw new Error('E2E BrowserWindow is unavailable')
|
||||
window.setContentSize(nextSize.width, nextSize.height)
|
||||
}, size)
|
||||
await page.waitForFunction(
|
||||
(nextSize) => window.innerWidth === nextSize.width && window.innerHeight === nextSize.height,
|
||||
size
|
||||
)
|
||||
}
|
||||
return {
|
||||
app,
|
||||
page,
|
||||
userData,
|
||||
setWindowContentSize,
|
||||
close: async () => {
|
||||
if (!page.isClosed() && closeDelayMs > 0) await page.waitForTimeout(closeDelayMs)
|
||||
await app.close().catch(() => undefined)
|
||||
|
||||
+208
-3
@@ -5,6 +5,14 @@ import { launchTestApp } from './support/electron'
|
||||
|
||||
const baselineDirectory = resolve(`tests/e2e/__screenshots__/${process.platform}/visual.spec.ts`)
|
||||
const visualViewport = { width: 1000, height: 650 }
|
||||
const visualNow = Date.parse('2026-08-19T14:46:40+08:00')
|
||||
|
||||
async function clearScreenshotFocus(page: import('@playwright/test').Page): Promise<void> {
|
||||
await page.evaluate(() => {
|
||||
if (document.activeElement instanceof HTMLElement) document.activeElement.blur()
|
||||
})
|
||||
}
|
||||
|
||||
test.skip(
|
||||
!existsSync(baselineDirectory) && process.env.WXE_UPDATE_VISUAL_BASELINES !== '1',
|
||||
`No reviewed ${process.platform} visual baseline is committed yet`
|
||||
@@ -13,8 +21,9 @@ test.skip(
|
||||
test('NAV-01 login page visual @visual', async () => {
|
||||
const fixture = await launchTestApp({ mode: 'disconnected' })
|
||||
try {
|
||||
await fixture.page.setViewportSize(visualViewport)
|
||||
await fixture.setWindowContentSize(visualViewport)
|
||||
await expect(fixture.page.getByRole('heading', { name: 'TraceMemo（迹忆）' })).toBeVisible()
|
||||
await clearScreenshotFocus(fixture.page)
|
||||
await expect(fixture.page).toHaveScreenshot('login-page.png', {
|
||||
animations: 'disabled',
|
||||
caret: 'hide'
|
||||
@@ -25,11 +34,12 @@ test('NAV-01 login page visual @visual', async () => {
|
||||
})
|
||||
|
||||
test('ARCH-01 archive page visual @visual', async () => {
|
||||
const fixture = await launchTestApp()
|
||||
const fixture = await launchTestApp({ now: visualNow })
|
||||
try {
|
||||
await fixture.page.setViewportSize(visualViewport)
|
||||
await fixture.setWindowContentSize(visualViewport)
|
||||
await fixture.page.getByText('产品测试群', { exact: true }).click()
|
||||
await expect(fixture.page.getByText('这是一条脱敏测试消息', { exact: true })).toBeVisible()
|
||||
await clearScreenshotFocus(fixture.page)
|
||||
await expect(fixture.page).toHaveScreenshot('archive-page.png', {
|
||||
animations: 'disabled',
|
||||
caret: 'hide'
|
||||
@@ -38,3 +48,198 @@ test('ARCH-01 archive page visual @visual', async () => {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
test('ASK-01 AI Search idle page visual @visual', async () => {
|
||||
const fixture = await launchTestApp({ now: visualNow })
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize(visualViewport)
|
||||
await fixture.page.getByRole('button', { name: '问问微信' }).click()
|
||||
await expect(fixture.page.getByRole('heading', { name: '问问你的微信' })).toBeVisible()
|
||||
await expect(fixture.page.getByPlaceholder(/例如：技术交流群/)).toBeVisible()
|
||||
await expect(fixture.page.getByRole('main', { name: '问问微信' })).not.toBeEmpty()
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(pageErrors).toEqual([])
|
||||
await clearScreenshotFocus(fixture.page)
|
||||
await expect(fixture.page).toHaveScreenshot('ai-search-idle-page.png', {
|
||||
animations: 'disabled',
|
||||
caret: 'hide'
|
||||
})
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
test('ASK-03 AI Search result page visual @visual', async () => {
|
||||
const fixture = await launchTestApp({ now: visualNow })
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize(visualViewport)
|
||||
await fixture.page.getByRole('button', { name: '问问微信' }).click()
|
||||
await fixture.page.getByPlaceholder(/例如：技术交流群/).fill('测试群讨论了什么？')
|
||||
await fixture.page.getByRole('button', { name: '开始分析' }).click()
|
||||
await expect(fixture.page.getByText(/固定假回答：测试数据中的核心流程正常/)).toBeVisible({
|
||||
timeout: 15_000
|
||||
})
|
||||
await expect(fixture.page.getByRole('button', { name: /选择证据 E1/ })).toBeVisible()
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(pageErrors).toEqual([])
|
||||
await clearScreenshotFocus(fixture.page)
|
||||
await expect(fixture.page).toHaveScreenshot('ai-search-result-page.png', {
|
||||
animations: 'disabled',
|
||||
caret: 'hide'
|
||||
})
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
test('API-01 Reader Skill preview visual @visual', async () => {
|
||||
const fixture = await launchTestApp({ now: visualNow })
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize(visualViewport)
|
||||
await fixture.page.getByRole('button', { name: 'API' }).click()
|
||||
await fixture.page
|
||||
.locator('#api-reader-skill')
|
||||
.getByRole('button', { name: '预览 Skill' })
|
||||
.click()
|
||||
await expect(
|
||||
fixture.page.getByRole('dialog', { name: 'TraceMemo Reader Skill 预览' })
|
||||
).toBeVisible()
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(pageErrors).toEqual([])
|
||||
await clearScreenshotFocus(fixture.page)
|
||||
await expect(fixture.page).toHaveScreenshot('api-skill-preview.png', {
|
||||
animations: 'disabled',
|
||||
caret: 'hide'
|
||||
})
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
test('CHAT-02 personal WeChat send dialog visual @visual', async () => {
|
||||
test.skip(process.platform !== 'darwin', 'Personal WeChat sending is currently macOS-only')
|
||||
const fixture = await launchTestApp({ now: visualNow })
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize(visualViewport)
|
||||
await fixture.page.getByText('产品测试群', { exact: true }).click()
|
||||
await fixture.page.getByRole('button', { name: '发送消息' }).click()
|
||||
await expect(fixture.page.getByRole('dialog', { name: '个人微信测试发送' })).toBeVisible()
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(pageErrors).toEqual([])
|
||||
await clearScreenshotFocus(fixture.page)
|
||||
await expect(fixture.page).toHaveScreenshot('personal-wechat-send-dialog.png', {
|
||||
animations: 'disabled',
|
||||
caret: 'hide'
|
||||
})
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
test('CHAT-03 image viewer visual @visual', async () => {
|
||||
const fixture = await launchTestApp({ now: visualNow })
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize(visualViewport)
|
||||
await fixture.page.getByText('产品测试群', { exact: true }).click()
|
||||
await fixture.page.getByRole('button', { name: '查看图片' }).click()
|
||||
await expect(fixture.page.getByRole('dialog', { name: '图片查看' })).toBeVisible()
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(pageErrors).toEqual([])
|
||||
await clearScreenshotFocus(fixture.page)
|
||||
await expect(fixture.page).toHaveScreenshot('chat-image-viewer.png', {
|
||||
animations: 'disabled',
|
||||
caret: 'hide'
|
||||
})
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
test('EXPORT-01 export workspace idle visual @visual', async () => {
|
||||
const fixture = await launchTestApp({ now: visualNow })
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize(visualViewport)
|
||||
await fixture.page.getByRole('button', { name: '导出' }).click()
|
||||
await expect(fixture.page.getByRole('heading', { name: '导出设置' })).toBeVisible()
|
||||
await expect(fixture.page.getByRole('button', { name: '开始导出' })).toBeEnabled()
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(pageErrors).toEqual([])
|
||||
await clearScreenshotFocus(fixture.page)
|
||||
await expect(fixture.page).toHaveScreenshot('export-workspace-idle.png', {
|
||||
animations: 'disabled',
|
||||
caret: 'hide'
|
||||
})
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
test('THEME-01 archive page dark visual @visual', async () => {
|
||||
const fixture = await launchTestApp({ now: visualNow, appearanceTheme: 'dark' })
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize(visualViewport)
|
||||
await fixture.page.getByText('产品测试群', { exact: true }).click()
|
||||
await expect(fixture.page.getByText('这是一条脱敏测试消息', { exact: true })).toBeVisible()
|
||||
await expect(fixture.page.locator('html')).toHaveAttribute('data-theme', 'dark')
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(pageErrors).toEqual([])
|
||||
await clearScreenshotFocus(fixture.page)
|
||||
await expect(fixture.page).toHaveScreenshot('archive-page-dark.png', {
|
||||
animations: 'disabled',
|
||||
caret: 'hide'
|
||||
})
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
test('THEME-02 export workspace dark visual @visual', async () => {
|
||||
const fixture = await launchTestApp({ now: visualNow, appearanceTheme: 'dark' })
|
||||
const pageErrors: Error[] = []
|
||||
fixture.page.on('pageerror', (error) => pageErrors.push(error))
|
||||
try {
|
||||
await fixture.setWindowContentSize(visualViewport)
|
||||
await fixture.page.getByRole('button', { name: '导出' }).click()
|
||||
await expect(fixture.page.getByRole('heading', { name: '导出设置' })).toBeVisible()
|
||||
await expect(fixture.page.locator('html')).toHaveAttribute('data-theme', 'dark')
|
||||
expect(
|
||||
await fixture.page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
|
||||
).toBe(true)
|
||||
expect(pageErrors).toEqual([])
|
||||
await clearScreenshotFocus(fixture.page)
|
||||
await expect(fixture.page).toHaveScreenshot('export-workspace-dark.png', {
|
||||
animations: 'disabled',
|
||||
caret: 'hide'
|
||||
})
|
||||
} finally {
|
||||
await fixture.close()
|
||||
}
|
||||
})
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { ensureAiSearchDataConsent } from '../../src/renderer/src/components/search/services/aiSearchProviderConsent'
|
||||
|
||||
const makeApi = (): {
|
||||
getAiSearchProviderStatus: ReturnType<typeof vi.fn>
|
||||
authorizeAiSearchExternalProvider: ReturnType<typeof vi.fn>
|
||||
} => ({
|
||||
getAiSearchProviderStatus: vi.fn(),
|
||||
authorizeAiSearchExternalProvider: vi.fn()
|
||||
})
|
||||
|
||||
describe('ensureAiSearchDataConsent', () => {
|
||||
it('bypasses consent when the configured provider does not require it', async () => {
|
||||
const api = makeApi()
|
||||
api.getAiSearchProviderStatus.mockResolvedValue({ configured: true, requiresConsent: false })
|
||||
const requestConsent = vi.fn()
|
||||
|
||||
await expect(
|
||||
ensureAiSearchDataConsent({
|
||||
requestId: 'req-1',
|
||||
api,
|
||||
requestExternalProviderConsent: requestConsent
|
||||
})
|
||||
).resolves.toBe(true)
|
||||
expect(requestConsent).not.toHaveBeenCalled()
|
||||
expect(api.authorizeAiSearchExternalProvider).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('preserves provider fields through consent and authorization', async () => {
|
||||
const api = makeApi()
|
||||
api.getAiSearchProviderStatus.mockResolvedValue({
|
||||
configured: true,
|
||||
requiresConsent: true,
|
||||
providerId: 'provider-1',
|
||||
providerName: 'Remote Provider',
|
||||
recipient: 'remote@example.test'
|
||||
})
|
||||
api.authorizeAiSearchExternalProvider.mockResolvedValue({ success: true })
|
||||
const requestConsent = vi.fn().mockResolvedValue(true)
|
||||
|
||||
await expect(
|
||||
ensureAiSearchDataConsent({
|
||||
requestId: 'req-1',
|
||||
api,
|
||||
requestExternalProviderConsent: requestConsent
|
||||
})
|
||||
).resolves.toBe(true)
|
||||
expect(requestConsent).toHaveBeenCalledWith('Remote Provider', 'remote@example.test')
|
||||
expect(api.authorizeAiSearchExternalProvider).toHaveBeenCalledWith({
|
||||
requestId: 'req-1',
|
||||
providerId: 'provider-1',
|
||||
recipient: 'remote@example.test'
|
||||
})
|
||||
})
|
||||
|
||||
it('does not authorize when the user rejects consent', async () => {
|
||||
const api = makeApi()
|
||||
api.getAiSearchProviderStatus.mockResolvedValue({
|
||||
configured: true,
|
||||
requiresConsent: true,
|
||||
providerId: 'provider-1',
|
||||
recipient: 'remote@example.test'
|
||||
})
|
||||
const requestConsent = vi.fn().mockResolvedValue(false)
|
||||
|
||||
await expect(
|
||||
ensureAiSearchDataConsent({
|
||||
requestId: 'req-1',
|
||||
api,
|
||||
requestExternalProviderConsent: requestConsent
|
||||
})
|
||||
).resolves.toBe(false)
|
||||
expect(api.authorizeAiSearchExternalProvider).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('preserves incomplete-status and authorization errors', async () => {
|
||||
const api = makeApi()
|
||||
api.getAiSearchProviderStatus.mockResolvedValue({ configured: true, requiresConsent: true })
|
||||
await expect(
|
||||
ensureAiSearchDataConsent({
|
||||
requestId: 'req-1',
|
||||
api,
|
||||
requestExternalProviderConsent: vi.fn()
|
||||
})
|
||||
).rejects.toThrow('当前 AI 服务信息不完整')
|
||||
|
||||
api.getAiSearchProviderStatus.mockResolvedValue({
|
||||
configured: true,
|
||||
requiresConsent: true,
|
||||
providerId: 'provider-1',
|
||||
recipient: 'remote@example.test'
|
||||
})
|
||||
api.authorizeAiSearchExternalProvider.mockResolvedValue({ success: false, error: '授权失败' })
|
||||
await expect(
|
||||
ensureAiSearchDataConsent({
|
||||
requestId: 'req-1',
|
||||
api,
|
||||
requestExternalProviderConsent: vi.fn().mockResolvedValue(true)
|
||||
})
|
||||
).rejects.toThrow('授权失败')
|
||||
})
|
||||
})
|
||||
@@ -1,5 +1,9 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import type { AiSearchFinalEvidence, AiSearchPipelineResult } from '../../src/shared/ai-search'
|
||||
import type {
|
||||
AiSearchFinalEvidence,
|
||||
AiSearchPipelineResult,
|
||||
AiSearchTimeRange
|
||||
} from '../../src/shared/ai-search'
|
||||
import type { KnowledgeRuntimeStatus } from '../../src/shared/knowledge'
|
||||
import type { Contact } from '../../src/shared/types'
|
||||
import {
|
||||
@@ -17,9 +21,14 @@ import {
|
||||
mapEvidenceSenderNames,
|
||||
mapPipelineEvidence,
|
||||
mapPipelineEvidenceItem,
|
||||
mapPipelineResultToRendererResult,
|
||||
mapSearchResultToTrace
|
||||
} from '../../src/renderer/src/components/search/searchMappers'
|
||||
import { createSearchResultResetState } from '../../src/renderer/src/components/search/searchState'
|
||||
import {
|
||||
createSearchResultResetState,
|
||||
resolveSearchResultViewTransition
|
||||
} from '../../src/renderer/src/components/search/searchState'
|
||||
import { createSearchRequestContext } from '../../src/renderer/src/components/search/searchUtils'
|
||||
import type {
|
||||
AISearchCacheRecord,
|
||||
EvidenceItem,
|
||||
@@ -89,6 +98,113 @@ const makeTrace = (overrides: Partial<SearchTrace> = {}): SearchTrace => ({
|
||||
...overrides
|
||||
})
|
||||
|
||||
describe('AI Search request context', () => {
|
||||
it('trims only the submitted query while keeping cache query normalization unchanged', () => {
|
||||
const context = createSearchRequestContext({
|
||||
query: ' Mixed Case 问题 ',
|
||||
scope: 'global',
|
||||
range: '30d'
|
||||
})
|
||||
|
||||
expect(context.normalizedQuery).toBe('Mixed Case 问题')
|
||||
expect(context.cacheKey).toBe(JSON.stringify(['global', '', '30d', 'mixed case 问题']))
|
||||
})
|
||||
|
||||
it.each(['global', 'groups', 'contacts'] as const)(
|
||||
'does not attach a conversation to %s scope',
|
||||
(scope) => {
|
||||
const context = createSearchRequestContext({
|
||||
query: '范围问题',
|
||||
scope,
|
||||
range: '7d',
|
||||
activeContactMd5: 'ignored-contact'
|
||||
})
|
||||
|
||||
expect(context.conversationId).toBeUndefined()
|
||||
expect(context.cacheKey).toBe(JSON.stringify([scope, '', '7d', '范围问题']))
|
||||
}
|
||||
)
|
||||
|
||||
it('uses the active contact for conversation request and cache identity', () => {
|
||||
const context = createSearchRequestContext({
|
||||
query: '会话问题',
|
||||
scope: 'conversation',
|
||||
range: 'today',
|
||||
activeContactMd5: aiSearchContact.md5
|
||||
})
|
||||
|
||||
expect(context.conversationId).toBe(aiSearchContact.md5)
|
||||
expect(context.cacheKey).toBe(
|
||||
JSON.stringify(['conversation', aiSearchContact.md5, 'today', '会话问题'])
|
||||
)
|
||||
})
|
||||
|
||||
it('keeps a missing conversation undefined while using the empty cache slot', () => {
|
||||
const context = createSearchRequestContext({
|
||||
query: '未选择会话',
|
||||
scope: 'conversation',
|
||||
range: 'all'
|
||||
})
|
||||
|
||||
expect(context.conversationId).toBeUndefined()
|
||||
expect(context.cacheKey).toBe(JSON.stringify(['conversation', '', 'all', '未选择会话']))
|
||||
})
|
||||
|
||||
it('uses retry range and retry time override when both are provided', () => {
|
||||
const currentOverride: AiSearchTimeRange = {
|
||||
label: '近 30 天',
|
||||
reason: '当前选择',
|
||||
source: 'user_selected'
|
||||
}
|
||||
const retryOverride: AiSearchTimeRange = {
|
||||
label: '全部历史',
|
||||
reason: '用户主动扩大到全部历史',
|
||||
source: 'user_retry'
|
||||
}
|
||||
const context = createSearchRequestContext({
|
||||
query: '重试问题',
|
||||
scope: 'global',
|
||||
range: '30d',
|
||||
timeRangeOverride: currentOverride,
|
||||
retry: { range: 'all', timeRangeOverride: retryOverride }
|
||||
})
|
||||
|
||||
expect(context.effectiveRange).toBe('all')
|
||||
expect(context.effectiveTimeRangeOverride).toBe(retryOverride)
|
||||
expect(context.cacheKey).toBe(JSON.stringify(['global', '', 'all', '重试问题']))
|
||||
})
|
||||
|
||||
it('falls back to the current time override when retry does not provide one', () => {
|
||||
const currentOverride: AiSearchTimeRange = {
|
||||
startTime: 123,
|
||||
label: '近 30 天',
|
||||
reason: '用户在界面选择的时间范围',
|
||||
source: 'user_selected'
|
||||
}
|
||||
const context = createSearchRequestContext({
|
||||
query: '保留当前时间范围',
|
||||
scope: 'global',
|
||||
range: '7d',
|
||||
timeRangeOverride: currentOverride,
|
||||
retry: { range: '30d', timeRangeOverride: undefined }
|
||||
})
|
||||
|
||||
expect(context.effectiveRange).toBe('30d')
|
||||
expect(context.effectiveTimeRangeOverride).toBe(currentOverride)
|
||||
})
|
||||
|
||||
it('keeps the current range and undefined override when no retry exists', () => {
|
||||
const context = createSearchRequestContext({
|
||||
query: '普通问题',
|
||||
scope: 'global',
|
||||
range: '7d'
|
||||
})
|
||||
|
||||
expect(context.effectiveRange).toBe('7d')
|
||||
expect(context.effectiveTimeRangeOverride).toBeUndefined()
|
||||
})
|
||||
})
|
||||
|
||||
describe('AI Search workspace pure formatters', () => {
|
||||
it('formats byte counts exactly as the workspace did', () => {
|
||||
expect(formatBytes(0)).toBe('0 B')
|
||||
@@ -211,6 +327,47 @@ describe('AI Search pipeline evidence mapping', () => {
|
||||
})
|
||||
|
||||
describe('AI Search trace and cache mapping', () => {
|
||||
it('maps a pipeline result into the common Renderer state without mixing collection senders', () => {
|
||||
const finalEvidence = makeFinalEvidence(1, { senderId: 'final-sender', sender: '总结发送者' })
|
||||
const collectionEvidence = makeFinalEvidence(2, {
|
||||
senderId: 'collection-sender',
|
||||
sender: '浏览发送者'
|
||||
})
|
||||
const result = makeSearchResult({
|
||||
evidence: [finalEvidence],
|
||||
evidenceCollection: [finalEvidence, collectionEvidence]
|
||||
})
|
||||
|
||||
const mapped = mapPipelineResultToRendererResult(result, [aiSearchContact])
|
||||
|
||||
expect(mapped.evidence.map((item) => item.evidenceId)).toEqual(['E1'])
|
||||
expect(mapped.evidenceCollection.map((item) => item.evidenceId)).toEqual(['E1', 'E2'])
|
||||
expect(mapped.senderNames).toEqual({ 'final-sender': '总结发送者' })
|
||||
expect(mapped.messageCount).toBe(result.knowledge.totalMessages)
|
||||
expect(mapped.searchTrace).toEqual(mapSearchResultToTrace(result, 1))
|
||||
})
|
||||
|
||||
it('falls back to Final Evidence only when the runtime collection is missing', () => {
|
||||
const evidence = [makeFinalEvidence(1)]
|
||||
const result = makeSearchResult({ evidence })
|
||||
;(
|
||||
result as AiSearchPipelineResult & { evidenceCollection?: AiSearchFinalEvidence[] }
|
||||
).evidenceCollection = undefined
|
||||
|
||||
const mapped = mapPipelineResultToRendererResult(result, [aiSearchContact])
|
||||
|
||||
expect(mapped.evidenceCollection).toEqual(mapped.evidence)
|
||||
})
|
||||
|
||||
it('preserves an explicitly empty Evidence Collection without falling back', () => {
|
||||
const result = makeSearchResult({ evidence: [makeFinalEvidence(1)], evidenceCollection: [] })
|
||||
|
||||
const mapped = mapPipelineResultToRendererResult(result, [aiSearchContact])
|
||||
|
||||
expect(mapped.evidence).toHaveLength(1)
|
||||
expect(mapped.evidenceCollection).toEqual([])
|
||||
})
|
||||
|
||||
it('maps pipeline trace fields and preserves the original default values', () => {
|
||||
const result: AiSearchPipelineResult = makeSearchResult()
|
||||
|
||||
@@ -392,6 +549,64 @@ describe('AI Search trace and cache mapping', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe('AI Search result view transition', () => {
|
||||
it('maps no Evidence to the range-specific insufficient message and ignores pipeline error', () => {
|
||||
const result = makeSearchResult({ status: 'no_evidence', error: '不应使用的错误' })
|
||||
|
||||
expect(resolveSearchResultViewTransition(result, '7d')).toEqual({
|
||||
stage: 'insufficient',
|
||||
analysisError: '近 7 天内没有找到与问题相关的聊天消息。'
|
||||
})
|
||||
})
|
||||
|
||||
it.each([
|
||||
['retrieval_incomplete', 'partial', '当前检索未完整覆盖聊天记录，未生成总结。'],
|
||||
['failed', 'insufficient', '本地搜索暂时无法完成'],
|
||||
['ai_failed', 'partial', '证据已找到，但 AI 暂时无法生成回答']
|
||||
] as const)('maps %s to its existing fallback presentation', (status, stage, analysisError) => {
|
||||
expect(resolveSearchResultViewTransition(makeSearchResult({ status }), '30d')).toEqual({
|
||||
stage,
|
||||
analysisError
|
||||
})
|
||||
})
|
||||
|
||||
it.each([
|
||||
['retrieval_incomplete', 'partial'],
|
||||
['failed', 'insufficient'],
|
||||
['ai_failed', 'partial']
|
||||
] as const)('preserves the pipeline error for %s', (status, stage) => {
|
||||
expect(
|
||||
resolveSearchResultViewTransition(
|
||||
makeSearchResult({ status, error: '主进程返回的错误' }),
|
||||
'30d'
|
||||
)
|
||||
).toEqual({
|
||||
stage,
|
||||
analysisError: '主进程返回的错误'
|
||||
})
|
||||
})
|
||||
|
||||
it('keeps a completed answer for the Workspace success path', () => {
|
||||
expect(
|
||||
resolveSearchResultViewTransition(makeSearchResult({ answer: '完整回答' }), '30d')
|
||||
).toEqual({
|
||||
stage: 'result',
|
||||
analysisError: '',
|
||||
answer: '完整回答'
|
||||
})
|
||||
})
|
||||
|
||||
it('leaves a missing completed answer for the existing Workspace guard', () => {
|
||||
const result = { ...makeSearchResult(), answer: undefined }
|
||||
|
||||
expect(resolveSearchResultViewTransition(result, '30d')).toEqual({
|
||||
stage: 'result',
|
||||
analysisError: '',
|
||||
answer: undefined
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('AI Search result reset state', () => {
|
||||
it('returns every existing search result reset value', () => {
|
||||
expect(createSearchResultResetState()).toEqual({
|
||||
|
||||
Reference in New Issue
Block a user