HaHafeng
96290d2f76
Sprint 1-3 Completed (Backend + Frontend): Backend (Sprint 1-2): - Implement 5-layer Agent framework (Query->Planner->Executor->Tools->Reflection) - Create agent_schema with 6 tables (agent_definitions, stages, prompts, sessions, traces, reflexion_rules) - Create protocol_schema with 2 tables (protocol_contexts, protocol_generations) - Implement Protocol Agent core services (Orchestrator, ContextService, PromptBuilder) - Integrate LLM service adapter (DeepSeek/Qwen/GPT-5/Claude) - 6 API endpoints with full authentication - 10/10 API tests passed Frontend (Sprint 3): - Add Protocol Agent entry in AgentHub (indigo theme card) - Implement ProtocolAgentPage with 3-column layout - Collapsible sidebar (Gemini style, 48px <-> 280px) - StatePanel with 5 stage cards (scientific_question, pico, study_design, sample_size, endpoints) - ChatArea with sync button and action cards integration - 100% prototype design restoration (608 lines CSS) - Detailed endpoints structure: baseline, exposure, outcomes, confounders Features: - 5-stage dialogue flow for research protocol design - Conversation-driven interaction with sync-to-protocol button - Real-time context state management - One-click protocol generation button (UI ready, backend pending) Database: - agent_schema: 6 tables for reusable Agent framework - protocol_schema: 2 tables for Protocol Agent - Seed data: 1 agent + 5 stages + 9 prompts + 4 reflexion rules Code Stats: - Backend: 13 files, 4338 lines - Frontend: 14 files, 2071 lines - Total: 27 files, 6409 lines Status: MVP core functionality completed, pending frontend-backend integration testing Next: Sprint 4 - One-click protocol generation + Word export
67 lines
1.8 KiB
TypeScript
67 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>
|
||
);
|
||
};
|
||
|
||
|