feat(info): 信息面板 UI 重做 + 双向批量关联 + 代码块内全选复制
1. 信息面板 UI 重做：设计 token 统一、lucide 图标、分区小节、星标/标签/关联 chip 化
2. 关联文档升级：新增 doc:link-batch IPC，A↔B 双向写入 links；面板支持快速双向关联 + 批量勾选关联/解除
3. 代码块内全选复制：Ctrl+A 在代码块内仅全选该代码块（TyporaKeys selectInsideCodeBlock），Ctrl+C 复制纯代码；代码块内 Ctrl+V 按纯文本粘贴
4. 修复 React error #62：btn 改为函数后遗漏 style={btn} 裸用，导致 render 期间更新
This commit is contained in:
hunter-dev
@@ -1,9 +1,8 @@
|
||||
import { useState } from 'react';
|
||||
import { useStore } from '../../store';
|
||||
import { invoke } from '../../ipc-client';
|
||||
import { IPC } from '@hunter/shared';
|
||||
import type { TreeNode } from '@hunter/shared';
|
||||
import { Star, Tag, Link2, FileText, Clock, Plus, X, Check, ListChecks, ArrowLeftRight, Folder, ChevronDown } from 'lucide-react';
|
||||
|
||||
// 信息面板：路径/标签/关联文档（双向+批量）/时间。样式统一走设计 token
|
||||
export function DocInfoPanel() {
|
||||
const currentPath = useStore(s => s.currentPath);
|
||||
const title = useStore(s => s.title);
|
||||
@@ -12,76 +11,142 @@ export function DocInfoPanel() {
|
||||
const toggleStar = useStore(s => s.toggleStar);
|
||||
const addTag = useStore(s => s.addTag);
|
||||
const removeTag = useStore(s => s.removeTag);
|
||||
const addLink = useStore(s => s.addLink);
|
||||
const removeLink = useStore(s => s.removeLink);
|
||||
const linkBatch = useStore(s => s.linkBatch);
|
||||
const openDoc = useStore(s => s.openDoc);
|
||||
const [tagInput, setTagInput] = useState('');
|
||||
const [linkInput, setLinkInput] = useState('');
|
||||
const [quickSel, setQuickSel] = useState('');
|
||||
const [batchOpen, setBatchOpen] = useState(false);
|
||||
const [checked, setChecked] = useState<Set<string>>(new Set());
|
||||
|
||||
if (!currentPath) {
|
||||
return <div style={{ padding: 16, opacity: 0.5, fontSize: 13 }}>未打开文档</div>;
|
||||
}
|
||||
|
||||
// 库内 .md 文件供关联链接选择
|
||||
// 库内 .md 文件供关联选择（排除当前文档与已关联项）
|
||||
const docs = tree.filter(n => n.type === 'doc');
|
||||
const mtime = tree.find(n => n.path === currentPath)?.mtime;
|
||||
const links = meta.links ?? [];
|
||||
const linkNames = new Map<string, string>();
|
||||
for (const d of docs) linkNames.set(d.path, d.name);
|
||||
const quickCandidates = docs.filter(d => d.path !== currentPath && !links.includes(d.path));
|
||||
|
||||
const toggleCheck = (p: string) => {
|
||||
const n = new Set(checked); if (n.has(p)) n.delete(p); else n.add(p); setChecked(n);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: 16, overflow: 'auto', fontSize: 13 }}>
|
||||
<div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<strong>{title}</strong>
|
||||
<button onClick={() => toggleStar()} title="星标" style={{ cursor: 'pointer', background: 'none', border: 'none', fontSize: 16, color: meta.star ? 'var(--accent)' : 'var(--text-tertiary)' }}>
|
||||
{meta.star ? '★' : '☆'}
|
||||
<div style={{ padding: 14, overflow: 'auto', fontSize: 13, display: 'flex', flexDirection: 'column', gap: 18 }}>
|
||||
{/* 标题 + 星标 */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingBottom: 12, borderBottom: '1px solid var(--control-border)' }}>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
|
||||
</div>
|
||||
<button onClick={toggleStar} title={meta.star ? '取消星标' : '星标'} style={iconBtn} aria-pressed={!!meta.star}>
|
||||
<Star size={16} fill={meta.star ? 'currentColor' : 'none'} color={meta.star ? 'var(--accent)' : 'var(--text-tertiary)'} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Section title="路径">
|
||||
<div style={{ opacity: 0.6, wordBreak: 'break-all' }}>{currentPath}</div>
|
||||
{/* 路径 */}
|
||||
<Section icon={<FileText size={13} />} title="路径">
|
||||
<div style={{ color: 'var(--text-tertiary)', wordBreak: 'break-all', lineHeight: 1.5 }}>{currentPath}</div>
|
||||
</Section>
|
||||
|
||||
<Section title="标签">
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 6 }}>
|
||||
{/* 标签 */}
|
||||
<Section icon={<Tag size={13} />} title="标签">
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 8 }}>
|
||||
{(meta.tags ?? []).map(t => (
|
||||
<span key={t} style={{ background: 'var(--control-border)', borderRadius: 4, padding: '2px 8px', display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
{t}<span style={{ cursor: 'pointer', opacity: 0.6 }} onClick={() => removeTag(t)}>×</span>
|
||||
<span key={t} style={chip}>
|
||||
{t}
|
||||
<button style={chipX} onClick={() => removeTag(t)} title="移除标签"><X size={12} /></button>
|
||||
</span>
|
||||
))}
|
||||
{(meta.tags ?? []).length === 0 && <span style={{ opacity: 0.4 }}>无标签</span>}
|
||||
{(meta.tags ?? []).length === 0 && <span style={{ color: 'var(--text-tertiary)', opacity: 0.6 }}>暂无标签</span>}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 4 }}>
|
||||
<input value={tagInput} onChange={e => setTagInput(e.target.value)} onKeyDown={e => { if (e.key === 'Enter' && tagInput.trim()) { addTag(tagInput.trim()); setTagInput(''); } }} placeholder="添加标签" style={inp} />
|
||||
<button style={btn} onClick={() => { if (tagInput.trim()) { addTag(tagInput.trim()); setTagInput(''); } }}>＋</button>
|
||||
<div style={{ display: 'flex', gap: 6 }}>
|
||||
<input value={tagInput} onChange={e => setTagInput(e.target.value)} onKeyDown={e => { if (e.key === 'Enter' && tagInput.trim()) { addTag(tagInput.trim()); setTagInput(''); } }} placeholder="添加标签，回车确认" style={inp} />
|
||||
<button style={btn()} title="添加标签" onClick={() => { if (tagInput.trim()) { addTag(tagInput.trim()); setTagInput(''); } }}><Plus size={14} /></button>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="关联文档">
|
||||
<div style={{ marginBottom: 6 }}>
|
||||
{(meta.links ?? []).map(l => (
|
||||
<div key={l} style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }}>
|
||||
<span style={{ opacity: 0.8 }}>{l}</span>
|
||||
<span style={{ cursor: 'pointer', opacity: 0.6 }} onClick={() => removeLink(l)}>×</span>
|
||||
{/* 关联文档：双向 + 批量 */}
|
||||
<Section icon={<Link2 size={13} />} title={"关联文档" + (links.length ? '（' + links.length + '）' : '')}>
|
||||
{links.length === 0 ? (
|
||||
<div style={{ color: 'var(--text-tertiary)', opacity: 0.6, marginBottom: 8 }}>暂无关联，可在下方快速关联或批量关联</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 10 }}>
|
||||
{links.map(l => (
|
||||
<div key={l} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px', background: 'var(--bg-secondary)', borderRadius: 6, border: '1px solid var(--control-border)' }}>
|
||||
<span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--text-secondary)' }} title={l}>{linkNames.get(l) ?? l}</span>
|
||||
<button style={iconSmall} title="打开" onClick={() => openDoc(l)}><FileText size={13} /></button>
|
||||
<button style={iconSmall} title="解除关联（双向）" onClick={() => void linkBatch([l], true)}><X size={13} /></button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 快速双向关联 */}
|
||||
<div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 10 }}>
|
||||
<ArrowLeftRight size={14} style={{ color: 'var(--text-tertiary)', flexShrink: 0 }} title="快速双向关联" />
|
||||
<select value={quickSel} onChange={e => setQuickSel(e.target.value)} style={{ ...inp, flex: 1 }}>
|
||||
<option value="">选择文档，双向关联…</option>
|
||||
{quickCandidates.map(d => (<option key={d.path} value={d.path}>{d.name}</option>))}
|
||||
</select>
|
||||
<button style={btnPrimary(!quickSel)} title="建立双向关联" onClick={() => { if (quickSel) { void linkBatch([quickSel], false); setQuickSel(''); } }} disabled={!quickSel}>关联</button>
|
||||
</div>
|
||||
|
||||
{/* 批量关联 */}
|
||||
<div style={{ border: '1px solid var(--control-border)', borderRadius: 6, overflow: 'hidden' }}>
|
||||
<button style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 6, padding: '6px 8px', background: 'transparent', border: 'none', color: 'var(--text-secondary)', cursor: 'pointer' }} onClick={() => setBatchOpen(o => !o)}>
|
||||
<ListChecks size={14} />批量关联
|
||||
<ChevronDown size={14} style={{ marginLeft: 'auto', transform: batchOpen ? 'rotate(180deg)' : 'none', transition: 'transform .15s' }} />
|
||||
</button>
|
||||
{batchOpen && (
|
||||
<div style={{ borderTop: '1px solid var(--control-border)', maxHeight: 180, overflow: 'auto' }}>
|
||||
<div style={{ padding: 4, display: 'flex', flexDirection: 'column' }}>
|
||||
{quickCandidates.length === 0 ? (
|
||||
<div style={{ padding: '6px 8px', color: 'var(--text-tertiary)', opacity: 0.6 }}>没有可关联的文档</div>
|
||||
) : quickCandidates.map(d => (
|
||||
<label key={d.path} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 8px', borderRadius: 4, cursor: 'pointer' }} onMouseEnter={e => e.currentTarget.style.background = 'var(--control-border)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'} >
|
||||
<input type="checkbox" checked={checked.has(d.path)} onChange={() => toggleCheck(d.path)} style={{ accentColor: 'var(--accent)' }} />
|
||||
<span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{d.name}</span>
|
||||
{checked.has(d.path) && <Check size={13} style={{ color: 'var(--accent)' }} />}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{(meta.links ?? []).length === 0 && <span style={{ opacity: 0.4 }}>无关联</span>}
|
||||
)}
|
||||
{batchOpen && (
|
||||
<div style={{ display: 'flex', gap: 6, padding: '6px 8px', borderTop: '1px solid var(--control-border)', alignItems: 'center' }}>
|
||||
<button style={btn(quickCandidates.length === 0)} title="全部选中" onClick={() => { const n = new Set(checked); quickCandidates.forEach(d => n.add(d.path)); setChecked(n); }} disabled={quickCandidates.length === 0}><Folder size={13} />全选</button>
|
||||
<button style={btnPrimary(checked.size === 0)} title="为勾选文档建立双向关联" disabled={checked.size === 0} onClick={() => { const arr = [...checked]; void linkBatch(arr, false); setChecked(new Set()); setBatchOpen(false); }}>关联选中（{checked.size}）</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<select value={linkInput} onChange={e => setLinkInput(e.target.value)} style={inp}>
|
||||
<option value="">选择库内文档…</option>
|
||||
{docs.filter(d => d.path !== currentPath && !(meta.links ?? []).includes(d.path + '')).map(d => (
|
||||
<option key={d.path} value={d.path}>{d.name}（{d.path}）</option>
|
||||
))}
|
||||
</select>
|
||||
<button style={{ ...btn, marginLeft: 4 }} onClick={() => { if (linkInput) { addLink(linkInput); setLinkInput(''); } }}>关联</button>
|
||||
</Section>
|
||||
|
||||
<Section title="修改时间">
|
||||
<div style={{ opacity: 0.6 }}>{mtime ? new Date(mtime).toLocaleString('zh-CN') : '—'}</div>
|
||||
<div style={{ opacity: 0.4, fontSize: 12, marginTop: 4 }}>创建时间：{meta.createdAt ? new Date(meta.createdAt).toLocaleString('zh-CN') : '—'}</div>
|
||||
{/* 时间 */}
|
||||
<Section icon={<Clock size={13} />} title="时间">
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, color: 'var(--text-tertiary)' }}>
|
||||
<div>修改：{mtime ? new Date(mtime).toLocaleString('zh-CN') : '—'}</div>
|
||||
<div>创建：{meta.createdAt ? new Date(meta.createdAt).toLocaleString('zh-CN') : '—'}</div>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (<div style={{ marginBottom: 16 }}><div style={{ opacity: 0.5, marginBottom: 6 }}>{title}</div>{children}</div>);
|
||||
function Section({ icon, title, children }: { icon: React.ReactNode; title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--text-tertiary)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>{icon}{title}</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const inp: React.CSSProperties = { background: 'var(--bg-secondary)', border: '1px solid var(--control-border)', color: 'var(--text-primary)', borderRadius: 4, padding: '3px 8px', fontSize: 13, flex: 1 };
|
||||
const btn: React.CSSProperties = { minWidth: 28, height: 26, border: '1px solid var(--control-border)', background: 'transparent', color: 'var(--text-primary)', cursor: 'pointer', borderRadius: 4 };
|
||||
const chip: React.CSSProperties = { display: 'inline-flex', alignItems: 'center', gap: 4, background: 'var(--control-border)', color: 'var(--text-secondary)', borderRadius: 999, padding: '2px 8px', fontSize: 12 };
|
||||
const chipX: React.CSSProperties = { border: 'none', background: 'transparent', color: 'var(--text-tertiary)', cursor: 'pointer', display: 'inline-flex', padding: 0, borderRadius: 4 };
|
||||
const inp: React.CSSProperties = { background: 'var(--bg-secondary)', border: '1px solid var(--control-border)', color: 'var(--text-primary)', borderRadius: 6, padding: '5px 8px', fontSize: 13, flex: 1, outline: 'none' };
|
||||
const btn = (disabled?: boolean): React.CSSProperties => ({ minWidth: 30, height: 28, border: '1px solid var(--control-border)', background: 'transparent', color: 'var(--text-secondary)', cursor: disabled ? 'not-allowed' : 'pointer', borderRadius: 6, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 4, padding: '0 8px', fontSize: 12, opacity: disabled ? 0.4 : 1 });
|
||||
const btnPrimary = (disabled?: boolean): React.CSSProperties => ({ minWidth: 52, height: 28, border: 'none', background: 'var(--accent)', color: '#fff', cursor: disabled ? 'not-allowed' : 'pointer', borderRadius: 6, padding: '0 10px', fontSize: 12, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', opacity: disabled ? 0.4 : 1 });
|
||||
const iconBtn: React.CSSProperties = { border: 'none', background: 'transparent', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: 4, borderRadius: 6 };
|
||||
const iconSmall: React.CSSProperties = { border: 'none', background: 'transparent', color: 'var(--text-tertiary)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: 2, borderRadius: 4 };
|
||||
Reference in New Issue
Block a user