feat(hands): restructure Hands UI with Chinese localization
Major changes: - Add HandList.tsx component for left sidebar - Add HandTaskPanel.tsx for middle content area - Restructure Sidebar tabs: 分身/HANDS/Workflow - Remove Hands tab from RightPanel - Localize all UI text to Chinese - Archive legacy OpenClaw documentation - Add Hands integration lessons document - Update feature checklist with new components UI improvements: - Left sidebar now shows Hands list with status icons - Middle area shows selected Hand's tasks and results - Consistent styling with Tailwind CSS - Chinese status labels and buttons Documentation: - Create docs/archive/openclaw-legacy/ for old docs - Add docs/knowledge-base/hands-integration-lessons.md - Update docs/knowledge-base/feature-checklist.md - Update docs/knowledge-base/README.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
173
desktop/src/components/TriggersPanel.tsx
Normal file
173
desktop/src/components/TriggersPanel.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
/**
|
||||
* TriggersPanel - OpenFang Triggers Management UI
|
||||
*
|
||||
* Displays available OpenFang Triggers and allows toggling them on/off.
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useGatewayStore } from '../store/gatewayStore';
|
||||
import type { Trigger } from '../store/gatewayStore';
|
||||
|
||||
interface TriggerCardProps {
|
||||
trigger: Trigger;
|
||||
onToggle: (id: string, enabled: boolean) => Promise<void>;
|
||||
isToggling: boolean;
|
||||
}
|
||||
|
||||
function TriggerCard({ trigger, onToggle, isToggling }: TriggerCardProps) {
|
||||
const handleToggle = async () => {
|
||||
await onToggle(trigger.id, !trigger.enabled);
|
||||
};
|
||||
|
||||
const statusColor = trigger.enabled
|
||||
? 'bg-green-500'
|
||||
: 'bg-gray-400';
|
||||
|
||||
const typeLabel: Record<string, string> = {
|
||||
webhook: 'Webhook',
|
||||
schedule: '定时任务',
|
||||
event: '事件触发',
|
||||
manual: '手动触发',
|
||||
file: '文件监听',
|
||||
message: '消息触发',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-medium text-gray-900 dark:text-white">{trigger.id}</h3>
|
||||
<span className={`w-2 h-2 rounded-full ${statusColor}`} title={trigger.enabled ? '已启用' : '已禁用'} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-xs px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
|
||||
{typeLabel[trigger.type] || trigger.type}
|
||||
</span>
|
||||
<span className={`text-xs ${trigger.enabled ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'}`}>
|
||||
{trigger.enabled ? '已启用' : '已禁用'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleToggle}
|
||||
disabled={isToggling}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
|
||||
trigger.enabled ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'
|
||||
} ${isToggling ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
title={trigger.enabled ? '点击禁用' : '点击启用'}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
||||
trigger.enabled ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TriggersPanel() {
|
||||
const { triggers, loadTriggers, isLoading, client } = useGatewayStore();
|
||||
const [togglingTrigger, setTogglingTrigger] = useState<string | null>(null);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadTriggers();
|
||||
}, [loadTriggers]);
|
||||
|
||||
const handleToggle = useCallback(async (id: string, enabled: boolean) => {
|
||||
setTogglingTrigger(id);
|
||||
try {
|
||||
// Call the gateway to toggle the trigger
|
||||
await client.request('triggers.toggle', { id, enabled });
|
||||
// Reload triggers after toggle
|
||||
await loadTriggers();
|
||||
} catch (error) {
|
||||
console.error('Failed to toggle trigger:', error);
|
||||
} finally {
|
||||
setTogglingTrigger(null);
|
||||
}
|
||||
}, [client, loadTriggers]);
|
||||
|
||||
const handleRefresh = useCallback(async () => {
|
||||
setRefreshing(true);
|
||||
try {
|
||||
await loadTriggers();
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, [loadTriggers]);
|
||||
|
||||
if (isLoading && triggers.length === 0) {
|
||||
return (
|
||||
<div className="p-4 text-center text-gray-500 dark:text-gray-400">
|
||||
加载中...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (triggers.length === 0) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
触发器 (Triggers)
|
||||
</h2>
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={refreshing}
|
||||
className="text-sm text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-50"
|
||||
>
|
||||
{refreshing ? '刷新中...' : '刷新'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-4 text-center text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
|
||||
暂无可用的触发器
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Count enabled/disabled triggers
|
||||
const enabledCount = triggers.filter(t => t.enabled).length;
|
||||
const totalCount = triggers.length;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
触发器 (Triggers)
|
||||
</h2>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{enabledCount}/{totalCount} 已启用
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={refreshing}
|
||||
className="text-sm text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-50"
|
||||
>
|
||||
{refreshing ? '刷新中...' : '刷新'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3">
|
||||
{triggers.map((trigger) => (
|
||||
<TriggerCard
|
||||
key={trigger.id}
|
||||
trigger={trigger}
|
||||
onToggle={handleToggle}
|
||||
isToggling={togglingTrigger === trigger.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TriggersPanel;
|
||||
Reference in New Issue
Block a user