feat(快捷短语): 添加快捷短语UI组件
QuickPhraseItem: - 快捷短语列表项组件 - 支持图标显示和内容预览 - 提供悬停时的编辑和删除操作 QuickPhrasesPopover: - 快捷短语弹出层组件 - 包含触发按钮和数量徽章 - 支持快速插入、编辑和删除短语 QuickPhrasesModal: - 快捷短语管理模态框 - 左侧列表右侧编辑的双栏布局 - 支持图标选择器和分类设置
This commit is contained in:
gaoziman
parent
4499f7befd
commit
caf19f4c09
123
src/components/features/QuickPhraseItem.tsx
Normal file
123
src/components/features/QuickPhraseItem.tsx
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import * as LucideIcons from 'lucide-react';
|
||||||
|
import type { QuickPhrase } from '@/types';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Tooltip } from '@/components/ui/Tooltip';
|
||||||
|
|
||||||
|
interface QuickPhraseItemProps {
|
||||||
|
phrase: QuickPhrase;
|
||||||
|
onSelect: (phrase: QuickPhrase) => void;
|
||||||
|
onEdit?: (phrase: QuickPhrase) => void;
|
||||||
|
onDelete?: (id: string) => void;
|
||||||
|
showActions?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 快捷短语列表项组件
|
||||||
|
*/
|
||||||
|
export function QuickPhraseItem({
|
||||||
|
phrase,
|
||||||
|
onSelect,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
showActions = true,
|
||||||
|
}: QuickPhraseItemProps) {
|
||||||
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
|
|
||||||
|
// 获取图标组件
|
||||||
|
const IconComponent = phrase.icon
|
||||||
|
? (LucideIcons[phrase.icon as keyof typeof LucideIcons] as React.ComponentType<{ size?: number; className?: string }>)
|
||||||
|
: LucideIcons.MessageSquare;
|
||||||
|
|
||||||
|
// 截断内容预览（最多显示 50 个字符）
|
||||||
|
const contentPreview = phrase.content.length > 50
|
||||||
|
? phrase.content.substring(0, 50) + '...'
|
||||||
|
: phrase.content;
|
||||||
|
|
||||||
|
const handleSelect = () => {
|
||||||
|
onSelect(phrase);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onEdit?.(phrase);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onDelete?.(phrase.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'group relative flex items-start gap-2 px-2.5 py-1.5 rounded-md cursor-pointer transition-all duration-150',
|
||||||
|
'hover:bg-[var(--color-bg-hover)]',
|
||||||
|
'border border-transparent hover:border-[var(--color-border)]'
|
||||||
|
)}
|
||||||
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
|
onClick={handleSelect}
|
||||||
|
>
|
||||||
|
{/* 图标 */}
|
||||||
|
{IconComponent && (
|
||||||
|
<div className="flex-shrink-0 mt-0.5">
|
||||||
|
<IconComponent
|
||||||
|
size={16}
|
||||||
|
className="text-[var(--color-text-tertiary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 内容区域 */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
{/* 标题 */}
|
||||||
|
<div className="text-xs font-medium text-[var(--color-text-primary)] mb-0.5 truncate">
|
||||||
|
{phrase.title}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 内容预览 */}
|
||||||
|
<div className="text-[11px] text-[var(--color-text-tertiary)] line-clamp-2 leading-tight">
|
||||||
|
{contentPreview}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 操作按钮 */}
|
||||||
|
{showActions && (isHovered || false) && (
|
||||||
|
<div className="flex items-center gap-1 flex-shrink-0">
|
||||||
|
{onEdit && (
|
||||||
|
<Tooltip content="编辑">
|
||||||
|
<button
|
||||||
|
onClick={handleEdit}
|
||||||
|
className={cn(
|
||||||
|
'w-6 h-6 flex items-center justify-center rounded transition-colors',
|
||||||
|
'text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]',
|
||||||
|
'hover:bg-[var(--color-bg-secondary)]'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<LucideIcons.Pencil size={14} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{onDelete && (
|
||||||
|
<Tooltip content="删除">
|
||||||
|
<button
|
||||||
|
onClick={handleDelete}
|
||||||
|
className={cn(
|
||||||
|
'w-6 h-6 flex items-center justify-center rounded transition-colors',
|
||||||
|
'text-[var(--color-text-tertiary)] hover:text-red-500',
|
||||||
|
'hover:bg-red-50 dark:hover:bg-red-500/10'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<LucideIcons.Trash2 size={14} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
327
src/components/features/QuickPhrasesModal.tsx
Normal file
327
src/components/features/QuickPhrasesModal.tsx
Normal file
@ -0,0 +1,327 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Plus, Trash2, Check } from 'lucide-react';
|
||||||
|
import { Modal } from '@/components/ui/Modal';
|
||||||
|
import { IconPicker } from '@/components/ui/IconPicker';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import type { QuickPhrase } from '@/types';
|
||||||
|
|
||||||
|
interface QuickPhrasesModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
phrases: QuickPhrase[];
|
||||||
|
onAdd: (phrase: Omit<QuickPhrase, 'id' | 'createdAt' | 'updatedAt' | 'sortOrder'>) => void;
|
||||||
|
onUpdate: (id: string, updates: Partial<Omit<QuickPhrase, 'id' | 'createdAt'>>) => void;
|
||||||
|
onDelete: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 快捷短语管理模态框
|
||||||
|
*/
|
||||||
|
export function QuickPhrasesModal({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
phrases,
|
||||||
|
onAdd,
|
||||||
|
onUpdate,
|
||||||
|
onDelete,
|
||||||
|
}: QuickPhrasesModalProps) {
|
||||||
|
const [selectedPhraseId, setSelectedPhraseId] = useState<string | null>(null);
|
||||||
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
|
|
||||||
|
// 表单状态
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
icon: 'MessageSquare' as string,
|
||||||
|
category: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 当选中短语变化时，更新表单数据
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedPhraseId) {
|
||||||
|
const phrase = phrases.find((p) => p.id === selectedPhraseId);
|
||||||
|
if (phrase) {
|
||||||
|
setFormData({
|
||||||
|
title: phrase.title,
|
||||||
|
content: phrase.content,
|
||||||
|
icon: phrase.icon || 'MessageSquare',
|
||||||
|
category: phrase.category || '',
|
||||||
|
});
|
||||||
|
setIsEditing(true);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 重置表单
|
||||||
|
setFormData({
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
icon: 'MessageSquare',
|
||||||
|
category: '',
|
||||||
|
});
|
||||||
|
setIsEditing(false);
|
||||||
|
}
|
||||||
|
}, [selectedPhraseId, phrases]);
|
||||||
|
|
||||||
|
const handleSelectPhrase = (id: string) => {
|
||||||
|
setSelectedPhraseId(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNewPhrase = () => {
|
||||||
|
setSelectedPhraseId(null);
|
||||||
|
setFormData({
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
icon: 'MessageSquare',
|
||||||
|
category: '',
|
||||||
|
});
|
||||||
|
setIsEditing(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
// 验证表单
|
||||||
|
if (!formData.title.trim() || !formData.content.trim()) {
|
||||||
|
alert('请填写标题和内容');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isEditing && selectedPhraseId) {
|
||||||
|
// 更新现有短语
|
||||||
|
onUpdate(selectedPhraseId, {
|
||||||
|
title: formData.title.trim(),
|
||||||
|
content: formData.content.trim(),
|
||||||
|
icon: formData.icon,
|
||||||
|
category: formData.category.trim() || undefined,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 添加新短语
|
||||||
|
onAdd({
|
||||||
|
title: formData.title.trim(),
|
||||||
|
content: formData.content.trim(),
|
||||||
|
icon: formData.icon,
|
||||||
|
category: formData.category.trim() || undefined,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
handleNewPhrase();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (id: string) => {
|
||||||
|
if (confirm('确定要删除这个快捷短语吗？')) {
|
||||||
|
onDelete(id);
|
||||||
|
if (selectedPhraseId === id) {
|
||||||
|
handleNewPhrase();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
isOpen={isOpen}
|
||||||
|
onClose={onClose}
|
||||||
|
maxWidth="1000px"
|
||||||
|
className="overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* 标题 */}
|
||||||
|
<div className="px-6 py-4 border-b border-[var(--color-border)] bg-gradient-to-b from-[var(--color-bg-secondary)] to-[var(--color-bg-primary)]">
|
||||||
|
<h2 className="text-xl font-bold text-[var(--color-text-primary)]">
|
||||||
|
管理快捷短语
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 内容区域 */}
|
||||||
|
<div className="flex h-[600px]">
|
||||||
|
{/* 左侧：短语列表 - 固定300px宽度 */}
|
||||||
|
<div className="w-[300px] border-r border-[var(--color-border)] flex flex-col bg-[var(--color-bg-secondary)]">
|
||||||
|
{/* 新建按钮 */}
|
||||||
|
<div className="p-4">
|
||||||
|
<button
|
||||||
|
onClick={handleNewPhrase}
|
||||||
|
className={cn(
|
||||||
|
'w-full flex items-center justify-center gap-2 px-3 py-2.5 rounded-md transition-all duration-200',
|
||||||
|
'text-sm font-semibold',
|
||||||
|
!isEditing && !selectedPhraseId
|
||||||
|
? 'bg-[var(--color-primary)] text-white hover:shadow-md'
|
||||||
|
: 'text-[var(--color-text-secondary)] bg-[var(--color-bg-primary)] hover:bg-[var(--color-bg-hover)] border border-[var(--color-border)]'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Plus size={16} />
|
||||||
|
<span>新建短语</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 短语列表 */}
|
||||||
|
<div className="flex-1 overflow-y-auto px-3 pb-3">
|
||||||
|
{phrases.length === 0 ? (
|
||||||
|
<div className="text-center py-8 text-[var(--color-text-tertiary)]">
|
||||||
|
<p className="text-sm">暂无快捷短语</p>
|
||||||
|
<p className="text-xs mt-1">点击上方按钮添加</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
phrases.map((phrase) => (
|
||||||
|
<div
|
||||||
|
key={phrase.id}
|
||||||
|
className={cn(
|
||||||
|
'group relative flex items-start gap-2.5 px-3 py-2.5 rounded-md cursor-pointer transition-all duration-200 mb-2',
|
||||||
|
'bg-[var(--color-bg-primary)]',
|
||||||
|
selectedPhraseId === phrase.id
|
||||||
|
? 'border-2 border-[var(--color-primary)] shadow-sm'
|
||||||
|
: 'border-2 border-transparent hover:border-[var(--color-border)]'
|
||||||
|
)}
|
||||||
|
onClick={() => handleSelectPhrase(phrase.id)}
|
||||||
|
>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className={cn(
|
||||||
|
"text-sm font-semibold truncate mb-0.5",
|
||||||
|
selectedPhraseId === phrase.id
|
||||||
|
? 'text-[var(--color-primary)]'
|
||||||
|
: 'text-[var(--color-text-primary)]'
|
||||||
|
)}>
|
||||||
|
{phrase.title}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-[var(--color-text-tertiary)] truncate">
|
||||||
|
{phrase.content.substring(0, 30)}...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
handleDelete(phrase.id);
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
'opacity-0 group-hover:opacity-100 transition-opacity',
|
||||||
|
'w-6 h-6 flex items-center justify-center rounded',
|
||||||
|
'text-[var(--color-text-tertiary)] hover:text-red-500',
|
||||||
|
'hover:bg-red-50 dark:hover:bg-red-500/10'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Trash2 size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧：编辑表单 - flex-1占据剩余空间 */}
|
||||||
|
<div className="flex-1 flex flex-col">
|
||||||
|
<div className="flex-1 overflow-y-auto p-6">
|
||||||
|
<div className="max-w-2xl">
|
||||||
|
{/* 标题输入 */}
|
||||||
|
<div className="mb-5">
|
||||||
|
<label className="block text-sm font-semibold text-[var(--color-text-primary)] mb-2">
|
||||||
|
标题 <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.title}
|
||||||
|
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
||||||
|
placeholder="输入短语标题"
|
||||||
|
className={cn(
|
||||||
|
'w-full px-3 py-2.5 rounded border-2 border-[var(--color-border)]',
|
||||||
|
'bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]',
|
||||||
|
'placeholder:text-[var(--color-text-placeholder)]',
|
||||||
|
'focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/10',
|
||||||
|
'transition-all text-sm'
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 内容输入 */}
|
||||||
|
<div className="mb-5">
|
||||||
|
<label className="block text-sm font-semibold text-[var(--color-text-primary)] mb-2">
|
||||||
|
内容 <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.content}
|
||||||
|
onChange={(e) => setFormData({ ...formData, content: e.target.value })}
|
||||||
|
placeholder="输入短语内容，将插入到输入框中"
|
||||||
|
rows={5}
|
||||||
|
className={cn(
|
||||||
|
'w-full px-3 py-2.5 rounded border-2 border-[var(--color-border)]',
|
||||||
|
'bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]',
|
||||||
|
'placeholder:text-[var(--color-text-placeholder)]',
|
||||||
|
'focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/10',
|
||||||
|
'transition-all resize-none text-sm leading-relaxed'
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 图标选择 */}
|
||||||
|
<div className="mb-5">
|
||||||
|
<label className="block text-sm font-semibold text-[var(--color-text-primary)] mb-2">
|
||||||
|
图标
|
||||||
|
</label>
|
||||||
|
<IconPicker
|
||||||
|
value={formData.icon}
|
||||||
|
onChange={(icon) => setFormData({ ...formData, icon })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 分类输入（可选）*/}
|
||||||
|
<div className="mb-6">
|
||||||
|
<label className="block text-sm font-semibold text-[var(--color-text-primary)] mb-2">
|
||||||
|
分类（可选）
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.category}
|
||||||
|
onChange={(e) => setFormData({ ...formData, category: e.target.value })}
|
||||||
|
placeholder="输入分类名称"
|
||||||
|
className={cn(
|
||||||
|
'w-full px-3 py-2.5 rounded border-2 border-[var(--color-border)]',
|
||||||
|
'bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]',
|
||||||
|
'placeholder:text-[var(--color-text-placeholder)]',
|
||||||
|
'focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/10',
|
||||||
|
'transition-all text-sm'
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 提示信息 */}
|
||||||
|
<div className="mt-6 p-4 bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 rounded">
|
||||||
|
<div className="text-sm font-semibold text-[var(--color-primary)] mb-1">
|
||||||
|
💡 使用提示
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-[var(--color-text-secondary)] leading-relaxed">
|
||||||
|
快捷短语可以帮助你快速插入常用的提示词模板，提高工作效率。支持自定义图标和分类，让管理更加井然有序。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 底部操作按钮 */}
|
||||||
|
<div className="px-6 py-4 border-t border-[var(--color-border)] flex items-center justify-end gap-3 bg-[var(--color-bg-secondary)]">
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className={cn(
|
||||||
|
'px-5 py-2.5 rounded-md transition-all',
|
||||||
|
'text-sm font-semibold text-[var(--color-text-secondary)]',
|
||||||
|
'bg-[var(--color-bg-primary)] border-2 border-[var(--color-border)]',
|
||||||
|
'hover:bg-[var(--color-bg-hover)]'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={!formData.title.trim() || !formData.content.trim()}
|
||||||
|
className={cn(
|
||||||
|
'px-5 py-2.5 rounded-md transition-all duration-200',
|
||||||
|
'text-sm font-semibold text-white',
|
||||||
|
'flex items-center gap-2',
|
||||||
|
formData.title.trim() && formData.content.trim()
|
||||||
|
? 'bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)]'
|
||||||
|
: 'bg-gray-300 cursor-not-allowed opacity-50'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Check size={16} />
|
||||||
|
<span>{isEditing ? '保存修改' : '添加短语'}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
144
src/components/features/QuickPhrasesPopover.tsx
Normal file
144
src/components/features/QuickPhrasesPopover.tsx
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { MessageSquareQuote, Plus, Settings2 } from 'lucide-react';
|
||||||
|
import { Tooltip } from '@/components/ui/Tooltip';
|
||||||
|
import { QuickPhraseItem } from './QuickPhraseItem';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import type { QuickPhrase } from '@/types';
|
||||||
|
|
||||||
|
// 触发按钮组件
|
||||||
|
interface QuickPhrasesTriggerProps {
|
||||||
|
phrasesCount: number;
|
||||||
|
onClick: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function QuickPhrasesTrigger({ phrasesCount, onClick }: QuickPhrasesTriggerProps) {
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<Tooltip content="快捷短语" position="top">
|
||||||
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
className="w-8 h-8 flex items-center justify-center rounded-md transition-colors cursor-pointer text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)]"
|
||||||
|
>
|
||||||
|
<MessageSquareQuote size={20} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
{/* 数量徽章 */}
|
||||||
|
{phrasesCount > 0 && (
|
||||||
|
<span className="absolute -top-0.5 -right-0.5 min-w-4 h-4 bg-[var(--color-primary)] text-white text-[10px] font-semibold rounded-full flex items-center justify-center px-1 pointer-events-none">
|
||||||
|
{phrasesCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 弹出层内容组件
|
||||||
|
interface QuickPhrasesPopoverProps {
|
||||||
|
phrases: QuickPhrase[];
|
||||||
|
isOpen: boolean;
|
||||||
|
onInsert: (content: string) => void;
|
||||||
|
onEdit: (phrase: QuickPhrase) => void;
|
||||||
|
onDelete: (id: string) => void;
|
||||||
|
onManage: () => void;
|
||||||
|
onAdd: () => void;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 快捷短语弹出层内容
|
||||||
|
*/
|
||||||
|
export function QuickPhrasesPopover({
|
||||||
|
phrases,
|
||||||
|
isOpen,
|
||||||
|
onInsert,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
onManage,
|
||||||
|
onAdd,
|
||||||
|
onClose,
|
||||||
|
}: QuickPhrasesPopoverProps) {
|
||||||
|
const handleSelect = (phrase: QuickPhrase) => {
|
||||||
|
onInsert(phrase.content);
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleManage = () => {
|
||||||
|
onManage();
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'absolute bottom-full left-0 right-0 mb-2 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-md shadow-lg z-50',
|
||||||
|
'transition-all duration-150',
|
||||||
|
isOpen
|
||||||
|
? 'opacity-100 visible translate-y-0'
|
||||||
|
: 'opacity-0 invisible translate-y-2 pointer-events-none'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{/* 顶部操作栏 */}
|
||||||
|
<div className="flex items-center justify-between px-3 py-2 border-b border-[var(--color-border-light)]">
|
||||||
|
<span className="text-xs font-medium text-[var(--color-text-primary)]">
|
||||||
|
快捷短语
|
||||||
|
</span>
|
||||||
|
<Tooltip content="添加短语">
|
||||||
|
<button
|
||||||
|
onClick={onAdd}
|
||||||
|
className={cn(
|
||||||
|
'w-6 h-6 flex items-center justify-center rounded-md transition-colors',
|
||||||
|
'text-[var(--color-text-tertiary)] hover:text-[var(--color-primary)]',
|
||||||
|
'hover:bg-[var(--color-bg-hover)]'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Plus size={16} />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 短语列表 */}
|
||||||
|
<div className="max-h-[320px] overflow-y-auto p-1.5">
|
||||||
|
{phrases.length === 0 ? (
|
||||||
|
<div className="text-center py-8 text-[var(--color-text-tertiary)]">
|
||||||
|
<MessageSquareQuote
|
||||||
|
size={32}
|
||||||
|
className="mx-auto mb-2 opacity-50"
|
||||||
|
/>
|
||||||
|
<p className="text-sm">暂无快捷短语</p>
|
||||||
|
<p className="text-xs mt-1">点击上方 + 添加</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
phrases.map((phrase) => (
|
||||||
|
<QuickPhraseItem
|
||||||
|
key={phrase.id}
|
||||||
|
phrase={phrase}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
onEdit={onEdit}
|
||||||
|
onDelete={onDelete}
|
||||||
|
showActions={true}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 底部操作栏 */}
|
||||||
|
{phrases.length > 0 && (
|
||||||
|
<div className="border-t border-[var(--color-border-light)] p-1.5">
|
||||||
|
<button
|
||||||
|
onClick={handleManage}
|
||||||
|
className={cn(
|
||||||
|
'w-full flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-md transition-colors',
|
||||||
|
'text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]',
|
||||||
|
'hover:bg-[var(--color-bg-hover)]'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Settings2 size={14} />
|
||||||
|
<span>管理快捷短语</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user