初始化
This commit is contained in:
gozeros committed
1 parent
34474bd5fc
commit
b638b541d0
3008 files changed
+837699
No files matched your search
@@ -0,0 +1,392 @@
|
||||
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import {
|
||||
Sparkles,
|
||||
Wand2,
|
||||
Expand,
|
||||
Shrink,
|
||||
Mic2,
|
||||
BookCopy,
|
||||
AlertCircle,
|
||||
RefreshCw,
|
||||
ChevronRight,
|
||||
X,
|
||||
Square,
|
||||
Send,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { RewriteAction, RewriteTone } from "../../api/rewrite";
|
||||
import type { RewriteStatus } from "../../hooks/useWritingRewrite";
|
||||
|
||||
// ── Types ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface MenuPos {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
// ── Tone options ───────────────────────────────────────────────────────────────
|
||||
|
||||
const TONE_OPTIONS: { value: RewriteTone; label: string }[] = [
|
||||
{ value: "professional", label: "更专业" },
|
||||
{ value: "casual", label: "更口语化" },
|
||||
{ value: "readable", label: "更易读" },
|
||||
{ value: "academic", label: "更学术" },
|
||||
{ value: "expressive", label: "更有文采" },
|
||||
];
|
||||
|
||||
// ── Action rows ────────────────────────────────────────────────────────────────
|
||||
|
||||
const ACTION_ROWS: {
|
||||
action: RewriteAction;
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
}[] = [
|
||||
{ action: "polish", label: "润色", icon: Wand2 },
|
||||
{ action: "expand", label: "扩写", icon: Expand },
|
||||
{ action: "shorten", label: "缩写", icon: Shrink },
|
||||
{ action: "tone", label: "改语气", icon: Mic2 },
|
||||
{ action: "imitate", label: "仿写", icon: BookCopy },
|
||||
];
|
||||
|
||||
// ── Main component ─────────────────────────────────────────────────────────────
|
||||
|
||||
interface WritingAiMenuProps {
|
||||
pos: MenuPos;
|
||||
status: RewriteStatus;
|
||||
error: string | null;
|
||||
onAction: (action: RewriteAction, tone?: RewriteTone, customInstruction?: string, referenceText?: string) => void;
|
||||
onAbort: () => void;
|
||||
onRetry: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function WritingAiMenu({
|
||||
pos,
|
||||
status,
|
||||
error,
|
||||
onAction,
|
||||
onAbort,
|
||||
onRetry,
|
||||
onClose,
|
||||
}: WritingAiMenuProps) {
|
||||
const [toneOpen, setToneOpen] = useState(false);
|
||||
const [imitateDialogOpen, setImitateDialogOpen] = useState(false);
|
||||
const [referenceText, setReferenceText] = useState("");
|
||||
const [instruction, setInstruction] = useState("");
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const imitateTextareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
// autoFocus is unreliable when the menu opens during a mousedown event sequence;
|
||||
// explicit focus via setTimeout(0) runs after the browser finishes that sequence.
|
||||
useEffect(() => {
|
||||
const id = setTimeout(() => inputRef.current?.focus(), 0);
|
||||
return () => clearTimeout(id);
|
||||
}, []);
|
||||
|
||||
// Focus the dialog textarea when the imitate dialog opens.
|
||||
useEffect(() => {
|
||||
if (!imitateDialogOpen) return;
|
||||
const id = setTimeout(() => imitateTextareaRef.current?.focus(), 0);
|
||||
return () => clearTimeout(id);
|
||||
}, [imitateDialogOpen]);
|
||||
|
||||
const isLoading = status === "loading";
|
||||
const isError = status === "error";
|
||||
|
||||
// Measure actual height after render and compute safe position before browser paint
|
||||
const menuWidth = 240;
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [computedPos, setComputedPos] = useState<{ left: number; top: number } | null>(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const el = containerRef.current;
|
||||
if (!el) return;
|
||||
const h = el.getBoundingClientRect().height;
|
||||
const safeX = Math.min(Math.max(pos.x, 8), window.innerWidth - menuWidth - 8);
|
||||
const spaceBelow = window.innerHeight - pos.y - 8;
|
||||
const spaceAbove = pos.y - 8;
|
||||
let safeY: number;
|
||||
if (spaceBelow >= h) {
|
||||
safeY = pos.y + 4;
|
||||
} else if (spaceAbove >= h) {
|
||||
safeY = pos.y - h - 4;
|
||||
} else if (spaceBelow >= spaceAbove) {
|
||||
safeY = Math.max(8, window.innerHeight - h - 8);
|
||||
} else {
|
||||
safeY = 8;
|
||||
}
|
||||
setComputedPos({ left: safeX, top: safeY });
|
||||
}, [pos.x, pos.y]);
|
||||
|
||||
const fireAction = (action: RewriteAction, tone?: RewriteTone) => {
|
||||
onAction(action, tone, instruction.trim() || undefined);
|
||||
};
|
||||
|
||||
const fireImitate = () => {
|
||||
const ref = referenceText.trim();
|
||||
if (!ref) return;
|
||||
setImitateDialogOpen(false);
|
||||
onAction("imitate", undefined, instruction.trim() || undefined, ref);
|
||||
};
|
||||
|
||||
const handleInputEnter = () => {
|
||||
const trimmed = instruction.trim();
|
||||
onAction("polish", undefined, trimmed || undefined);
|
||||
};
|
||||
|
||||
return createPortal(
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div className="fixed inset-0 z-[9990]" onMouseDown={onClose} />
|
||||
|
||||
<div
|
||||
ref={containerRef}
|
||||
style={{
|
||||
position: "fixed",
|
||||
left: computedPos?.left ?? pos.x,
|
||||
top: computedPos?.top ?? (pos.y + 4),
|
||||
width: menuWidth,
|
||||
zIndex: 9999,
|
||||
visibility: computedPos ? "visible" : "hidden",
|
||||
}}
|
||||
className="rounded-xl border bg-popover shadow-lg animate-in fade-in zoom-in-95 duration-100 overflow-hidden"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b bg-muted/30">
|
||||
<span className="flex items-center gap-1.5 text-xs font-semibold text-foreground">
|
||||
<Sparkles className="h-3.5 w-3.5 text-amber-500" />
|
||||
AI 改写
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="rounded p-0.5 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── Loading state ──────────────────────────────────────── */}
|
||||
{isLoading && (
|
||||
<div className="flex flex-col items-center gap-4 px-4 py-6">
|
||||
{/* Bouncing dots */}
|
||||
<div className="flex items-center gap-2">
|
||||
{[0, 160, 320].map((delay) => (
|
||||
<span
|
||||
key={delay}
|
||||
className="h-1.5 w-1.5 rounded-full bg-primary animate-bouncing"
|
||||
style={{ animationDelay: `${delay}ms` }}
|
||||
/>
|
||||
))}
|
||||
<span className="ml-1 text-xs text-muted-foreground">AI 正在生成…</span>
|
||||
</div>
|
||||
|
||||
{/* Stop button — breathing animation */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAbort}
|
||||
className={cn(
|
||||
"animate-breathe-stop",
|
||||
"flex items-center gap-1.5 px-5 py-2 text-xs font-medium rounded-lg",
|
||||
"border border-red-300/70 bg-red-50/60 text-red-600",
|
||||
"dark:border-red-800/50 dark:bg-red-950/20 dark:text-red-400",
|
||||
"hover:bg-red-100/90 dark:hover:bg-red-950/40 transition-colors",
|
||||
)}
|
||||
>
|
||||
<Square className="h-3 w-3 fill-current" />
|
||||
停止生成
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Error state ─────────────────────────────────────────── */}
|
||||
{isError && (
|
||||
<div className="px-3 py-3 space-y-2">
|
||||
<p className="flex items-center gap-1.5 text-xs text-destructive">
|
||||
<AlertCircle className="h-3.5 w-3.5 shrink-0" />
|
||||
{error ?? "改写失败"}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRetry}
|
||||
className="flex items-center gap-1.5 text-xs text-primary hover:underline"
|
||||
>
|
||||
<RefreshCw className="h-3 w-3" />
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Idle state: input + action list ─────────────────────── */}
|
||||
{!isLoading && !isError && (
|
||||
<>
|
||||
{/* Custom instruction input */}
|
||||
<div className="px-2.5 pt-2.5 pb-2">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={instruction}
|
||||
onChange={(e) => setInstruction(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleInputEnter();
|
||||
}
|
||||
}}
|
||||
placeholder="告诉 AI 你想要什么…"
|
||||
className={cn(
|
||||
"w-full text-xs rounded-md px-2.5 py-1.5 outline-none transition-colors",
|
||||
"bg-muted/50 border border-input focus:border-primary/60",
|
||||
"placeholder:text-muted-foreground/50",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-border/50 mx-1" />
|
||||
|
||||
{/* Preset actions */}
|
||||
<div className="p-1 space-y-0.5">
|
||||
{ACTION_ROWS.map(({ action, label, icon: Icon }) => {
|
||||
const isTone = action === "tone";
|
||||
const isImitate = action === "imitate";
|
||||
const hasSub = isTone;
|
||||
const isExpanded = isTone && toneOpen;
|
||||
return (
|
||||
<div key={action}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (isTone) {
|
||||
setToneOpen((v) => !v);
|
||||
} else if (isImitate) {
|
||||
setToneOpen(false);
|
||||
setImitateDialogOpen(true);
|
||||
} else {
|
||||
fireAction(action);
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
"flex w-full items-center gap-2 px-2.5 py-1.5 text-xs rounded-md transition-colors text-left",
|
||||
"hover:bg-accent hover:text-accent-foreground",
|
||||
isExpanded && "bg-accent text-accent-foreground",
|
||||
)}
|
||||
>
|
||||
<Icon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
<span className="flex-1">{label}</span>
|
||||
{hasSub && (
|
||||
<ChevronRight
|
||||
className={cn(
|
||||
"h-3.5 w-3.5 text-muted-foreground transition-transform duration-200",
|
||||
isExpanded && "rotate-90",
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Tone sub-list */}
|
||||
{isTone && toneOpen && (
|
||||
<div className="ml-5 border-l pl-2 my-0.5 space-y-0.5">
|
||||
{TONE_OPTIONS.map(({ value, label: toneLabel }) => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
onClick={() => fireAction("tone", value)}
|
||||
className="flex w-full items-center px-2 py-1.5 text-xs rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
|
||||
>
|
||||
{toneLabel}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Imitate dialog：弹窗内多行输入范文，回车 / 发送即仿写 ───────────── */}
|
||||
{imitateDialogOpen && (
|
||||
<div className="fixed inset-0 z-[10000] flex items-center justify-center p-4">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/40 animate-in fade-in duration-100"
|
||||
onMouseDown={() => setImitateDialogOpen(false)}
|
||||
/>
|
||||
<div
|
||||
className="relative w-full max-w-md rounded-xl border bg-popover shadow-2xl animate-in fade-in zoom-in-95 duration-100 overflow-hidden"
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b bg-muted/30">
|
||||
<span className="flex items-center gap-1.5 text-sm font-semibold text-foreground">
|
||||
<BookCopy className="h-4 w-4 text-amber-500" />
|
||||
仿写
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setImitateDialogOpen(false)}
|
||||
className="rounded p-0.5 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="p-4 space-y-3">
|
||||
<textarea
|
||||
ref={imitateTextareaRef}
|
||||
value={referenceText}
|
||||
onChange={(e) => setReferenceText(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
// Enter 提交，Shift+Enter 换行
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
fireImitate();
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
setImitateDialogOpen(false);
|
||||
}
|
||||
}}
|
||||
rows={8}
|
||||
placeholder="粘贴范文，AI 将模仿其文风、句式与语气改写所选文字…（回车提交，Shift+Enter 换行）"
|
||||
className={cn(
|
||||
"w-full resize-none text-sm rounded-md px-3 py-2 outline-none transition-colors leading-relaxed",
|
||||
"bg-muted/50 border border-input focus:border-primary/60",
|
||||
"placeholder:text-muted-foreground/50",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-end gap-2 px-4 py-3 border-t bg-muted/20">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setImitateDialogOpen(false)}
|
||||
className="px-3 py-1.5 text-xs font-medium rounded-md border border-input hover:bg-accent hover:text-accent-foreground transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={fireImitate}
|
||||
disabled={!referenceText.trim()}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-1.5 px-4 py-1.5 text-xs font-medium rounded-md transition-colors",
|
||||
"bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
"disabled:opacity-40 disabled:cursor-not-allowed",
|
||||
)}
|
||||
>
|
||||
<Send className="h-3.5 w-3.5" />
|
||||
发送
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user