398 lines
13 KiB
TypeScript
398 lines
13 KiB
TypeScript
/**
|
|
* SnippetPanel — 命令片段库侧边面板
|
|
*
|
|
* 功能：搜索、新建、编辑、删除命令片段，并插入到活跃终端
|
|
*/
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import { Code2, Plus, Search, Trash2, Copy, Pencil, X } from 'lucide-react'
|
|
import { useSnippetStore, type Snippet } from '../../stores/snippetStore'
|
|
import { useTabStore } from '../../stores/tabStore'
|
|
import Button from '../common/Button'
|
|
import Modal from '../common/Modal'
|
|
import EmptyState from '../common/EmptyState'
|
|
|
|
// ─── Snippet 编辑对话框 ─────────────────────────────────────────
|
|
|
|
interface SnippetFormData {
|
|
name: string
|
|
content: string
|
|
tags: string
|
|
}
|
|
|
|
interface SnippetFormProps {
|
|
isOpen: boolean
|
|
initial: SnippetFormData
|
|
title: string
|
|
confirmText: string
|
|
onConfirm: (data: SnippetFormData) => void
|
|
onClose: () => void
|
|
}
|
|
|
|
function SnippetFormModal({ isOpen, initial, title, confirmText, onConfirm, onClose }: SnippetFormProps) {
|
|
const [form, setForm] = useState<SnippetFormData>(initial)
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setForm(initial)
|
|
}
|
|
}, [isOpen, initial])
|
|
|
|
const handleConfirm = () => {
|
|
if (!form.name.trim() || !form.content.trim()) return
|
|
onConfirm(form)
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
title={title}
|
|
confirmText={confirmText}
|
|
onClose={onClose}
|
|
onConfirm={handleConfirm}
|
|
>
|
|
<div className="space-y-4">
|
|
{/* 名称 */}
|
|
<div>
|
|
<label className="block text-sm text-gray-400 mb-1">名称</label>
|
|
<input
|
|
type="text"
|
|
value={form.name}
|
|
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
|
|
placeholder="例如：重启 Nginx"
|
|
className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue text-sm"
|
|
/>
|
|
</div>
|
|
|
|
{/* 命令内容 */}
|
|
<div>
|
|
<label className="block text-sm text-gray-400 mb-1">命令</label>
|
|
<textarea
|
|
value={form.content}
|
|
onChange={(e) => setForm((f) => ({ ...f, content: e.target.value }))}
|
|
placeholder="sudo systemctl restart nginx"
|
|
rows={4}
|
|
className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue text-sm font-mono resize-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* 标签 */}
|
|
<div>
|
|
<label className="block text-sm text-gray-400 mb-1">标签 <span className="text-gray-600">(逗号分隔)</span></label>
|
|
<input
|
|
type="text"
|
|
value={form.tags}
|
|
onChange={(e) => setForm((f) => ({ ...f, tags: e.target.value }))}
|
|
placeholder="linux, nginx, ops"
|
|
className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const EMPTY_FORM: SnippetFormData = { name: '', content: '', tags: '' }
|
|
|
|
// ─── 主面板组件 ─────────────────────────────────────────────────
|
|
|
|
export default function SnippetPanel() {
|
|
const { snippets, isLoaded, loadSnippets, addSnippet, updateSnippet, deleteSnippet, searchSnippets } = useSnippetStore()
|
|
const { tabs, activeTabId } = useTabStore()
|
|
|
|
const [query, setQuery] = useState('')
|
|
const [copiedId, setCopiedId] = useState<string | null>(null)
|
|
|
|
// 编辑对话框状态
|
|
const [formOpen, setFormOpen] = useState(false)
|
|
const [editingSnippet, setEditingSnippet] = useState<Snippet | null>(null)
|
|
const [formData, setFormData] = useState<SnippetFormData>(EMPTY_FORM)
|
|
const [formTitle, setFormTitle] = useState('新建片段')
|
|
const [formConfirmText, setFormConfirmText] = useState('创建')
|
|
|
|
// 初始化加载
|
|
useEffect(() => {
|
|
loadSnippets()
|
|
}, [loadSnippets])
|
|
|
|
// 复制反馈计时器
|
|
useEffect(() => {
|
|
if (!copiedId) return
|
|
const timer = setTimeout(() => setCopiedId(null), 1500)
|
|
return () => clearTimeout(timer)
|
|
}, [copiedId])
|
|
|
|
// 获取当前活跃终端的 shellId
|
|
const getActiveShellId = useCallback((): string | null => {
|
|
const activeTab = tabs.find((t) => t.id === activeTabId)
|
|
return activeTab?.connectionInstance?.shellId ?? null
|
|
}, [tabs, activeTabId])
|
|
|
|
// 插入命令到终端
|
|
const handleInsert = useCallback(async (content: string) => {
|
|
const shellId = getActiveShellId()
|
|
if (!shellId) return
|
|
|
|
try {
|
|
await window.electronAPI?.sshShellWrite(shellId, content + '\n')
|
|
} catch (err) {
|
|
console.error('Failed to insert snippet:', err)
|
|
}
|
|
}, [getActiveShellId])
|
|
|
|
// 复制到剪贴板
|
|
const handleCopy = useCallback(async (snippet: Snippet) => {
|
|
try {
|
|
await navigator.clipboard.writeText(snippet.content)
|
|
setCopiedId(snippet.id)
|
|
} catch {
|
|
// fallback
|
|
console.error('Clipboard write failed')
|
|
}
|
|
}, [])
|
|
|
|
// 新建片段
|
|
const handleCreate = () => {
|
|
setEditingSnippet(null)
|
|
setFormData(EMPTY_FORM)
|
|
setFormTitle('新建片段')
|
|
setFormConfirmText('创建')
|
|
setFormOpen(true)
|
|
}
|
|
|
|
// 编辑片段
|
|
const handleEdit = (snippet: Snippet) => {
|
|
setEditingSnippet(snippet)
|
|
setFormData({
|
|
name: snippet.name,
|
|
content: snippet.content,
|
|
tags: snippet.tags.join(', '),
|
|
})
|
|
setFormTitle('编辑片段')
|
|
setFormConfirmText('保存')
|
|
setFormOpen(true)
|
|
}
|
|
|
|
// 表单提交
|
|
const handleFormSubmit = async (data: SnippetFormData) => {
|
|
const tags = data.tags
|
|
.split(',')
|
|
.map((t) => t.trim())
|
|
.filter(Boolean)
|
|
|
|
if (editingSnippet) {
|
|
await updateSnippet(editingSnippet.id, {
|
|
name: data.name.trim(),
|
|
content: data.content.trim(),
|
|
tags,
|
|
})
|
|
} else {
|
|
await addSnippet(data.name.trim(), data.content.trim(), tags)
|
|
}
|
|
setFormOpen(false)
|
|
}
|
|
|
|
// 搜索结果
|
|
const filteredSnippets = query.trim() ? searchSnippets(query) : snippets
|
|
|
|
// 是否有活跃终端
|
|
const hasActiveTerminal = !!getActiveShellId()
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-dark-800">
|
|
{/* 头部 */}
|
|
<div className="flex items-center gap-2 px-4 py-3 border-b border-dark-700">
|
|
<Code2 className="w-5 h-5 text-accent-blue flex-shrink-0" />
|
|
<h2 className="text-sm font-semibold text-gray-200">命令片段</h2>
|
|
</div>
|
|
|
|
{/* 搜索框 */}
|
|
<div className="p-3 border-b border-dark-700">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
|
<input
|
|
type="text"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="搜索片段..."
|
|
className="w-full pl-9 pr-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue"
|
|
/>
|
|
{query && (
|
|
<button
|
|
onClick={() => setQuery('')}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 hover:bg-dark-600 rounded"
|
|
>
|
|
<X className="w-3.5 h-3.5 text-gray-500" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 片段列表 */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
{isLoaded && filteredSnippets.length === 0 ? (
|
|
<EmptyState
|
|
icon={Code2}
|
|
title={query ? '没有匹配的片段' : '暂无片段'}
|
|
description={query ? '尝试其他关键词搜索' : '保存常用命令，快速插入到终端'}
|
|
action={
|
|
!query
|
|
? { label: '新建片段', onClick: handleCreate }
|
|
: undefined
|
|
}
|
|
/>
|
|
) : (
|
|
<div className="p-2 space-y-1">
|
|
{filteredSnippets.map((snippet) => (
|
|
<SnippetItem
|
|
key={snippet.id}
|
|
snippet={snippet}
|
|
copied={copiedId === snippet.id}
|
|
canInsert={hasActiveTerminal}
|
|
onInsert={handleInsert}
|
|
onCopy={handleCopy}
|
|
onEdit={handleEdit}
|
|
onDelete={deleteSnippet}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 底部新建按钮 */}
|
|
<div className="p-3 border-t border-dark-700">
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
className="w-full"
|
|
icon={<Plus className="w-4 h-4" />}
|
|
onClick={handleCreate}
|
|
>
|
|
新建片段
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 编辑/新建对话框 */}
|
|
<SnippetFormModal
|
|
isOpen={formOpen}
|
|
initial={formData}
|
|
title={formTitle}
|
|
confirmText={formConfirmText}
|
|
onConfirm={handleFormSubmit}
|
|
onClose={() => setFormOpen(false)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── 单个片段项 ─────────────────────────────────────────────────
|
|
|
|
interface SnippetItemProps {
|
|
snippet: Snippet
|
|
copied: boolean
|
|
canInsert: boolean
|
|
onInsert: (content: string) => void
|
|
onCopy: (snippet: Snippet) => void
|
|
onEdit: (snippet: Snippet) => void
|
|
onDelete: (id: string) => Promise<void>
|
|
}
|
|
|
|
function SnippetItem({ snippet, copied, canInsert, onInsert, onCopy, onEdit, onDelete }: SnippetItemProps) {
|
|
const [confirmDelete, setConfirmDelete] = useState(false)
|
|
|
|
// 命令预览：显示第一行，截断到 60 字符
|
|
const preview = snippet.content.split('\n')[0].slice(0, 60) + (snippet.content.length > 60 ? '…' : '')
|
|
|
|
return (
|
|
<div className="group rounded-lg border border-dark-700 hover:border-dark-600 bg-dark-800 p-2.5 transition-colors duration-150">
|
|
{/* 名称行 */}
|
|
<div className="flex items-start justify-between gap-2 mb-1">
|
|
<span className="text-sm font-medium text-gray-200 truncate flex-1" title={snippet.name}>
|
|
{snippet.name}
|
|
</span>
|
|
<div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity duration-150 flex-shrink-0">
|
|
{/* 插入 */}
|
|
<button
|
|
onClick={() => onInsert(snippet.content)}
|
|
disabled={!canInsert}
|
|
title={canInsert ? '插入到终端' : '无活跃终端'}
|
|
className="p-1 rounded hover:bg-accent-blue/20 text-accent-blue disabled:text-gray-600 disabled:hover:bg-transparent transition-colors"
|
|
>
|
|
<Code2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
{/* 复制 */}
|
|
<button
|
|
onClick={() => onCopy(snippet)}
|
|
title="复制"
|
|
className="p-1 rounded hover:bg-dark-600 text-gray-400 transition-colors"
|
|
>
|
|
{copied ? (
|
|
<span className="text-xs text-green-400 px-1 animate-scale-in">✓</span>
|
|
) : (
|
|
<Copy className="w-3.5 h-3.5" />
|
|
)}
|
|
</button>
|
|
{/* 编辑 */}
|
|
<button
|
|
onClick={() => onEdit(snippet)}
|
|
title="编辑"
|
|
className="p-1 rounded hover:bg-dark-600 text-gray-400 transition-colors"
|
|
>
|
|
<Pencil className="w-3.5 h-3.5" />
|
|
</button>
|
|
{/* 删除 */}
|
|
{confirmDelete ? (
|
|
<div className="flex items-center gap-0.5">
|
|
<button
|
|
onClick={async () => {
|
|
await onDelete(snippet.id)
|
|
setConfirmDelete(false)
|
|
}}
|
|
className="px-1.5 py-0.5 text-xs bg-red-600 hover:bg-red-500 text-white rounded transition-colors"
|
|
>
|
|
确认
|
|
</button>
|
|
<button
|
|
onClick={() => setConfirmDelete(false)}
|
|
className="px-1.5 py-0.5 text-xs text-gray-400 hover:text-gray-200 transition-colors"
|
|
>
|
|
取消
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<button
|
|
onClick={() => setConfirmDelete(true)}
|
|
title="删除"
|
|
className="p-1 rounded hover:bg-red-500/20 text-gray-400 hover:text-red-400 transition-colors"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 命令预览 */}
|
|
<p
|
|
className="text-xs font-mono text-gray-500 truncate mb-1.5"
|
|
title={snippet.content}
|
|
>
|
|
{preview}
|
|
</p>
|
|
|
|
{/* 标签 */}
|
|
{snippet.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-1">
|
|
{snippet.tags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="px-1.5 py-0.5 text-[10px] bg-dark-700 text-gray-400 rounded"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|