HaHafeng
303dd78c54
- Add one-click research protocol generation with streaming output - Implement Word document export via Pandoc integration - Add dynamic dual-panel layout with resizable split pane - Implement collapsible content for StatePanel stages - Add conversation history management with title auto-update - Fix scroll behavior, markdown rendering, and UI layout issues - Simplify conversation creation logic for reliability
68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
/**
|
||
* Action Card - Deep Link 动作卡片
|
||
*
|
||
* 100%还原原型图Action Card设计
|
||
*/
|
||
|
||
import React from 'react';
|
||
import { Calculator, ExternalLink, Rocket } from 'lucide-react';
|
||
import type { ActionCard } from '../types';
|
||
|
||
interface ActionCardProps {
|
||
card: ActionCard;
|
||
}
|
||
|
||
const CARD_ICONS: Record<string, React.ComponentType<any>> = {
|
||
sample_size_calculator: Calculator,
|
||
generate_protocol: Rocket,
|
||
};
|
||
|
||
export const ActionCardComponent: React.FC<ActionCardProps> = ({ card }) => {
|
||
const Icon = CARD_ICONS[card.id] || Calculator;
|
||
|
||
const handleClick = () => {
|
||
if (card.type === 'tool') {
|
||
// 打开工具页面（新标签页或模态框）
|
||
window.open(card.actionUrl, '_blank');
|
||
} else if (card.type === 'action') {
|
||
// 触发动作（如一键生成）
|
||
// 这里会被父组件处理
|
||
console.log('Action triggered:', card.id);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className={`action-card ${card.type}`} onClick={handleClick}>
|
||
<div className="action-card-header">
|
||
<div className="action-icon-box">
|
||
<Icon size={20} />
|
||
</div>
|
||
<div className="action-info">
|
||
<h3 className="action-title">{card.title}</h3>
|
||
<p className="action-description">{card.description}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{card.type === 'tool' && (
|
||
<div className="action-footer">
|
||
<button className="action-button">
|
||
<span>🚀 前往工具</span>
|
||
<ExternalLink size={14} />
|
||
</button>
|
||
<p className="action-hint">点击将打开工具面板，参数已自动预填</p>
|
||
</div>
|
||
)}
|
||
|
||
{card.type === 'action' && (
|
||
<button className="action-button primary">
|
||
<span>立即生成</span>
|
||
<Rocket size={14} />
|
||
</button>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
|
||
|