Skip to content

Commit 5f63ef4

Browse files
AparenciaAparencia
committed
refactor: captureManager 558→261 拆 5 管线文件，InspirationPage 463→288 拆 6 子组件
1 parent f9f9a09 commit 5f63ef4

13 files changed

Lines changed: 1474 additions & 1021 deletions

‎client/src/features/inspiration/components/BatchControls.tsx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/**
2+
* 批量整理控件（入口按钮 + 操作条 + 进度条）
3+
* Batch sort controls (entry button, action bar and progress bar).
4+
*
5+
* @ai-context: 从 InspirationPage 拆出的批量模式 UI：进入/退出批量、全选/取消全选、
6+
* 一键分析（AIThinkingIndicator 分析中状态）、分析进度文案与进度条。选中数量与
7+
* 进度经 props 由页面状态驱动，渲染结构与原内联 JSX 完全一致。
8+
* @ai-context: Extracted from InspirationPage; selection count and progress are
9+
* driven by page state via props, markup identical to the original inline JSX.
10+
*/
11+
12+
import { motion, AnimatePresence } from 'framer-motion';
13+
import { Layers, Wand2 } from 'lucide-react';
14+
import { AIThinkingIndicator } from '@/components/ui/AIThinkingIndicator';
15+
import { cn } from '@/lib/utils';
16+
17+
interface BatchControlsProps {
18+
batchMode: boolean;
19+
onToggleBatchMode: () => void;
20+
selectedCount: number;
21+
onSelectAll: () => void;
22+
onDeselectAll: () => void;
23+
onBatchSort: () => void;
24+
batchProcessing: boolean;
25+
progress: number;
26+
total: number;
27+
}
28+
29+
export default function BatchControls({
30+
batchMode,
31+
onToggleBatchMode,
32+
selectedCount,
33+
onSelectAll,
34+
onDeselectAll,
35+
onBatchSort,
36+
batchProcessing,
37+
progress,
38+
total,
39+
}: BatchControlsProps) {
40+
return (
41+
<>
42+
{/* ── 批量模式入口 ── */}
43+
<div className="flex items-center justify-between mt-1">
44+
<motion.button
45+
whileTap={{ scale: 0.95 }}
46+
onClick={onToggleBatchMode}
47+
className={cn(
48+
'flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium border transition-colors',
49+
batchMode
50+
? 'bg-accent-500/10 border-accent-400/40 text-accent-600 dark:text-accent-400'
51+
: 'bg-bg-secondary border-border/40 text-text-tertiary hover:text-text-secondary',
52+
)}
53+
>
54+
<Layers className="w-3.5 h-3.5" />
55+
{batchMode ? '退出批量' : '批量整理'}
56+
</motion.button>
57+
{batchMode && selectedCount > 0 && (
58+
<span className="text-c1 text-text-tertiary">已选中 {selectedCount} 条</span>
59+
)}
60+
</div>
61+
{/* ── 批量操作条 ── */}
62+
<AnimatePresence>
63+
{batchMode && (
64+
<motion.div
65+
initial={{ opacity: 0, height: 0 }}
66+
animate={{ opacity: 1, height: 'auto' }}
67+
exit={{ opacity: 0, height: 0 }}
68+
className="flex items-center gap-2 flex-wrap pt-1"
69+
>
70+
<motion.button whileTap={{ scale: 0.95 }} onClick={onSelectAll}
71+
className="px-2 py-0.5 rounded-full text-xs font-medium text-text-secondary bg-bg-secondary border border-border/40 hover:text-text-primary transition-colors">
72+
全选
73+
</motion.button>
74+
<motion.button whileTap={{ scale: 0.95 }} onClick={onDeselectAll}
75+
className="px-2 py-0.5 rounded-full text-xs font-medium text-text-tertiary bg-bg-secondary border border-border/40 hover:text-text-secondary transition-colors">
76+
取消全选
77+
</motion.button>
78+
<motion.button
79+
whileTap={{ scale: 0.95 }}
80+
onClick={onBatchSort}
81+
disabled={selectedCount === 0 || batchProcessing}
82+
className={cn(
83+
'flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium',
84+
'bg-gradient-to-r from-cyber to-brand-500 text-text-inverse',
85+
'hover:from-cyber/90 hover:to-brand-600 shadow-sm shadow-cyber/20',
86+
'disabled:opacity-50 disabled:cursor-not-allowed',
87+
)}
88+
>
89+
{batchProcessing ? (<><AIThinkingIndicator size={3} gap={2} />分析中...</>) : (<><Wand2 className="w-3 h-3" />一键分析</>)}
90+
</motion.button>
91+
{batchProcessing && (
92+
<span className="text-c1 text-text-tertiary">正在分析 {progress}/{total}...</span>
93+
)}
94+
</motion.div>
95+
)}
96+
</AnimatePresence>
97+
{/* ── 批量进度条 ── */}
98+
{batchProcessing && total > 0 && (
99+
<div className="w-full h-1.5 rounded-full bg-bg-secondary overflow-hidden mt-1">
100+
<motion.div
101+
className="h-full rounded-full bg-gradient-to-r from-cyber to-brand-500"
102+
initial={{ width: 0 }}
103+
animate={{ width: `${(progress / total) * 100}%` }}
104+
transition={{ duration: 0.3 }}
105+
/>
106+
</div>
107+
)}
108+
</>
109+
);
110+
}

‎client/src/features/inspiration/components/EmptyState.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* 灵感列表空状态（无匹配 / 冷启动）
3+
* Empty states for the inspiration list (no match / cold start).
4+
*
5+
* @ai-context: 从 InspirationPage 拆出的两种空状态：有筛选但无匹配时展示"没有匹配的
6+
* 萤火海沟记录 + 清除筛选"；无任何记录时展示冷启动仪式文案"海沟尚暗，等待第一只萤火"。
7+
* 渲染结构与原内联 JSX 完全一致。
8+
* @ai-context: Extracted from InspirationPage; renders the "no match" state when
9+
* a filter is active, otherwise the cold-start ritual copy, markup identical.
10+
*/
11+
12+
import { motion } from 'framer-motion';
13+
14+
interface EmptyStateProps {
15+
/** 是否有筛选在生效（items 非空但 filteredItems 为空） */
16+
hasActiveFilter: boolean;
17+
onClearFilters: () => void;
18+
}
19+
20+
export default function EmptyState({ hasActiveFilter, onClearFilters }: EmptyStateProps) {
21+
if (hasActiveFilter) {
22+
return (
23+
<motion.div className="text-center py-12 relative z-10"
24+
initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }}>
25+
<p className="text-b2 text-text-tertiary">没有匹配的萤火海沟记录</p>
26+
<motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}
27+
onClick={onClearFilters}
28+
className="mt-2 text-sm text-brand-600 hover:underline">
29+
清除筛选
30+
</motion.button>
31+
</motion.div>
32+
);
33+
}
34+
return (
35+
<motion.div className="relative z-10"
36+
initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.5 }}>
37+
{/* 冷启动仪式空状态：海沟尚暗，等待第一只萤火 */}
38+
<div className="kb-ritual-empty py-kb-xl">
39+
<p className="kb-ritual-empty-title">海沟尚暗</p>
40+
<p className="kb-ritual-empty-note">等待第一只萤火</p>
41+
</div>
42+
</motion.div>
43+
);
44+
}

‎client/src/features/inspiration/components/ImmersiveTagPills.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/**
2+
* 沉浸式视图标签药丸组（性质 / 深度）
3+
* Immersive view tag pills (nature / depth).
4+
*
5+
* @ai-context: 从 InspirationPage 拆出的沉浸式卡片上方标签选择组：内容性质与认知
6+
* 深度两组药丸。选中值经 props 由页面状态驱动，渲染结构与原内联 JSX 完全一致。
7+
* @ai-context: Extracted from InspirationPage; selected nature/depth and change
8+
* callbacks are driven by page state via props, markup identical to the original.
9+
*/
10+
11+
import { cn } from '@/lib/utils';
12+
import { CONTENT_NATURE_OPTIONS, COGNITIVE_DEPTH_OPTIONS } from '../constants';
13+
14+
interface ImmersiveTagPillsProps {
15+
selectedNature: string;
16+
onNatureChange: (value: string) => void;
17+
selectedDepth: string;
18+
onDepthChange: (value: string) => void;
19+
}
20+
21+
export default function ImmersiveTagPills({
22+
selectedNature,
23+
onNatureChange,
24+
selectedDepth,
25+
onDepthChange,
26+
}: ImmersiveTagPillsProps) {
27+
return (
28+
<div className="w-full max-w-md space-y-1.5 mb-2">
29+
<div className="flex items-center gap-1.5">
30+
<span className="text-c1 text-text-tertiary shrink-0">性质:</span>
31+
<div className="flex flex-wrap gap-1">
32+
{CONTENT_NATURE_OPTIONS.map(opt => (
33+
<button key={opt.value}
34+
onClick={() => onNatureChange(opt.value)}
35+
className={cn(
36+
'rounded-full text-xs font-medium px-2.5 py-0.5 cursor-pointer transition-colors border',
37+
selectedNature === opt.value
38+
? cn(opt.color, opt.bg, 'ring-1 ring-brand-300')
39+
: 'text-text-tertiary bg-bg-secondary/50 border-border/30 hover:text-text-secondary',
40+
)}>
41+
{opt.label}
42+
</button>
43+
))}
44+
</div>
45+
</div>
46+
<div className="flex items-center gap-1.5">
47+
<span className="text-c1 text-text-tertiary shrink-0">深度:</span>
48+
<div className="flex flex-wrap gap-1">
49+
{COGNITIVE_DEPTH_OPTIONS.map(opt => (
50+
<button key={opt.value}
51+
onClick={() => onDepthChange(opt.value)}
52+
className={cn(
53+
'rounded-full text-xs font-medium px-2.5 py-0.5 cursor-pointer transition-colors border',
54+
selectedDepth === opt.value
55+
? cn(opt.color, opt.bg, 'ring-1 ring-brand-300')
56+
: 'text-text-tertiary bg-bg-secondary/50 border-border/30 hover:text-text-secondary',
57+
)}>
58+
{opt.label}
59+
</button>
60+
))}
61+
</div>
62+
</div>
63+
</div>
64+
);
65+
}

‎client/src/features/inspiration/components/InspirationOrbList.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* 灵感球群列表（按内容性质分组）
3+
* Inspiration orb list grouped by content nature.
4+
*
5+
* @ai-context: 从 InspirationPage 拆出的列表区：按 groupInspirationsByNature 分组，
6+
* 组间分隔线 + 类别名，组内 InspirationCard 球群（支持批量勾选）。过滤后的条目
7+
* 经 props 注入，渲染结构与原内联 JSX 完全一致。
8+
* @ai-context: Extracted from InspirationPage; filtered items are injected via
9+
* props, markup identical to the original inline JSX.
10+
*/
11+
12+
import { motion, AnimatePresence } from 'framer-motion';
13+
import InspirationCard from './InspirationCard';
14+
import { NATURE_MAP } from '../constants';
15+
import { groupInspirationsByNature } from '../lib/orbLayout';
16+
import { listVariants } from '../constants';
17+
import type { InspirationItem } from '../store/inspirationStore';
18+
19+
interface InspirationOrbListProps {
20+
items: InspirationItem[];
21+
batchMode: boolean;
22+
selectedIds: Set<string>;
23+
onToggleSelect: (id: string) => void;
24+
}
25+
26+
export default function InspirationOrbList({
27+
items,
28+
batchMode,
29+
selectedIds,
30+
onToggleSelect,
31+
}: InspirationOrbListProps) {
32+
return (
33+
<motion.div className="space-y-6 relative z-10" variants={listVariants}>
34+
<AnimatePresence mode="popLayout">
35+
{Object.entries(groupInspirationsByNature(items)).map(([nature, groupItems]) => (
36+
<div key={nature}>
37+
{/* 分组分隔线 + 类别名 */}
38+
<div className="flex items-center gap-2 mb-3">
39+
<div className="h-px bg-border/20 flex-1" />
40+
<span className="text-xs text-text-tertiary opacity-30">
41+
{NATURE_MAP[nature]?.label ?? nature}
42+
</span>
43+
<div className="h-px bg-border/20 flex-1" />
44+
</div>
45+
{/* 球群容器 */}
46+
<div className="flex flex-wrap gap-4 justify-center">
47+
{groupItems.map(item => (
48+
<InspirationCard
49+
key={item.id}
50+
item={item}
51+
batchMode={batchMode}
52+
selected={selectedIds.has(item.id)}
53+
onToggleSelect={() => onToggleSelect(item.id)}
54+
/>
55+
))}
56+
</div>
57+
</div>
58+
))}
59+
</AnimatePresence>
60+
</motion.div>
61+
);
62+
}

‎client/src/features/inspiration/components/QuickInput.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/**
2+
* 灵感快速输入区（磨砂玻璃 + focus 光效）
3+
* Quick inspiration input area (frosted glass + focus glow).
4+
*
5+
* @ai-context: 从 InspirationPage 拆出的快速输入组件。textarea ref 由页面注入，
6+
* 供提交时计算琥珀金光点坠落起点（记录仪式动画）与提交后焦点恢复。
7+
* @ai-context: Extracted from InspirationPage; the page owns the textarea ref
8+
* to compute the ember-drop animation origin and restore focus after submit.
9+
*/
10+
11+
import { motion } from 'framer-motion';
12+
import { Send } from 'lucide-react';
13+
import type { RefObject, KeyboardEvent } from 'react';
14+
import { cn } from '@/lib/utils';
15+
import { inputVariants } from '../constants';
16+
17+
interface QuickInputProps {
18+
value: string;
19+
onChange: (value: string) => void;
20+
onSubmit: () => void;
21+
submitting: boolean;
22+
aiLoading: boolean;
23+
textareaRef: RefObject<HTMLTextAreaElement>;
24+
onKeyDown: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
25+
}
26+
27+
export default function QuickInput({
28+
value,
29+
onChange,
30+
onSubmit,
31+
submitting,
32+
aiLoading,
33+
textareaRef,
34+
onKeyDown,
35+
}: QuickInputProps) {
36+
return (
37+
<motion.div
38+
variants={inputVariants}
39+
className={cn(
40+
'relative bg-bg-secondary/40 backdrop-blur-2xl border border-white/12 dark:border-white/6 rounded-[var(--kb-radius-xl)] p-kb-md',
41+
'focus-within:border-accent-400/50 focus-within:shadow-[0_0_24px_rgba(74,155,217,0.1)]',
42+
'transition-all duration-300',
43+
)}
44+
>
45+
{/* top accent line */}
46+
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-accent-400/30 to-transparent" />
47+
<textarea
48+
ref={textareaRef}
49+
value={value}
50+
onChange={e => onChange(e.target.value)}
51+
onKeyDown={onKeyDown}
52+
placeholder="随手记录萤火海沟、疑问、想法..."
53+
rows={3}
54+
className="w-full resize-none text-b2 text-text-primary placeholder:text-text-tertiary bg-transparent focus:outline-none"
55+
/>
56+
<div className="flex items-center justify-between mt-2">
57+
<span className="text-c1 text-text-tertiary">Ctrl+Enter 提交</span>
58+
<motion.button
59+
whileHover={{ scale: 1.03, outline: '2px solid rgba(91,138,114,0.3)' }}
60+
whileTap={{ scale: 0.95 }}
61+
onClick={onSubmit}
62+
disabled={!value.trim() || submitting}
63+
className={cn(
64+
'flex items-center gap-1.5 px-4 py-1.5 rounded-full text-sm font-medium',
65+
'bg-brand-600 text-text-inverse shadow-md shadow-brand-500/15',
66+
'disabled:opacity-50 disabled:cursor-not-allowed',
67+
'transition-colors duration-200',
68+
)}
69+
>
70+
{submitting || aiLoading ? (
71+
<><div className="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" />打标中...</>
72+
) : (
73+
<><Send className="w-3.5 h-3.5" />记录</>
74+
)}
75+
</motion.button>
76+
</div>
77+
</motion.div>
78+
);
79+
}

0 commit comments

Comments
 (0)