84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
import { useRef } from 'react';
|
|
import type { AIMaterial } from '../../types/ai-writing';
|
|
|
|
interface MaterialsToolbarProps {
|
|
materials: AIMaterial[];
|
|
selectedIds: Set<string>;
|
|
onSelectAll: () => void;
|
|
onDeselectAll: () => void;
|
|
/** 单输入框文本：可以是技能名、检索来源、补充检索意图 */
|
|
userQuery: string;
|
|
onUserQueryChange: (text: string) => void;
|
|
/** 回车键提交（默认重新搜索；详细按钮交给父组件渲染） */
|
|
onSubmitQuery?: () => void;
|
|
placeholder?: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function MaterialsToolbar({
|
|
materials,
|
|
selectedIds,
|
|
onSelectAll,
|
|
onDeselectAll,
|
|
userQuery,
|
|
onUserQueryChange,
|
|
onSubmitQuery,
|
|
placeholder,
|
|
disabled,
|
|
}: MaterialsToolbarProps) {
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
const allSelected = materials.length > 0 && selectedIds.size === materials.length;
|
|
|
|
function handleInput(e: React.ChangeEvent<HTMLTextAreaElement>) {
|
|
onUserQueryChange(e.target.value);
|
|
const el = e.target;
|
|
el.style.height = 'auto';
|
|
el.style.height = `${Math.min(el.scrollHeight, 96)}px`;
|
|
}
|
|
|
|
function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
|
|
if (e.key === 'Enter' && !e.shiftKey && onSubmitQuery) {
|
|
e.preventDefault();
|
|
onSubmitQuery();
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{/* 全选/取消（无素材时隐藏） */}
|
|
{materials.length > 0 && (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-muted-foreground">
|
|
已选 {selectedIds.size} / {materials.length} 条素材
|
|
</span>
|
|
<div className="flex-1" />
|
|
<button
|
|
type="button"
|
|
onClick={allSelected ? onDeselectAll : onSelectAll}
|
|
className="text-xs text-primary hover:underline"
|
|
>
|
|
{allSelected ? '取消全选' : '全选'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* 单输入框 */}
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs text-muted-foreground">
|
|
补充检索（可选）— 写下你想检索的内容，然后点"重新搜索"或"技能检索"
|
|
</label>
|
|
<textarea
|
|
ref={textareaRef}
|
|
rows={1}
|
|
value={userQuery}
|
|
onChange={handleInput}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder={placeholder ?? '输入文字后点击“重新搜索”或“技能检索”按钮…'}
|
|
disabled={disabled}
|
|
className="w-full resize-none rounded-md border border-input bg-background px-2.5 py-1.5 text-xs leading-5 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 min-h-[28px] max-h-24"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|