修复UI展示
This commit is contained in:
@@ -42,9 +42,10 @@ export const AgentRunsList: React.FC<AgentRunsListProps> = ({
|
|||||||
onRunClick,
|
onRunClick,
|
||||||
className,
|
className,
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation();
|
const { t, i18n } = useTranslation();
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const { createAgentTab } = useTabState();
|
const { createAgentTab } = useTabState();
|
||||||
|
const currentLocale = i18n.language;
|
||||||
|
|
||||||
// Calculate pagination
|
// Calculate pagination
|
||||||
const totalPages = Math.ceil(runs.length / ITEMS_PER_PAGE);
|
const totalPages = Math.ceil(runs.length / ITEMS_PER_PAGE);
|
||||||
@@ -65,9 +66,16 @@ export const AgentRunsList: React.FC<AgentRunsListProps> = ({
|
|||||||
const formatDuration = (ms?: number) => {
|
const formatDuration = (ms?: number) => {
|
||||||
if (!ms) return "N/A";
|
if (!ms) return "N/A";
|
||||||
const seconds = Math.floor(ms / 1000);
|
const seconds = Math.floor(ms / 1000);
|
||||||
if (seconds < 60) return `${seconds}s`;
|
const isZhCN = currentLocale.startsWith('zh');
|
||||||
|
|
||||||
|
if (seconds < 60) {
|
||||||
|
return isZhCN ? `${seconds}秒` : `${seconds}s`;
|
||||||
|
}
|
||||||
const minutes = Math.floor(seconds / 60);
|
const minutes = Math.floor(seconds / 60);
|
||||||
const remainingSeconds = seconds % 60;
|
const remainingSeconds = seconds % 60;
|
||||||
|
if (isZhCN) {
|
||||||
|
return `${minutes}分${remainingSeconds}秒`;
|
||||||
|
}
|
||||||
return `${minutes}m ${remainingSeconds}s`;
|
return `${minutes}m ${remainingSeconds}s`;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -79,6 +87,16 @@ export const AgentRunsList: React.FC<AgentRunsListProps> = ({
|
|||||||
return tokens.toString();
|
return tokens.toString();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getStatusLabel = (status: string) => {
|
||||||
|
const statusLabels: Record<string, string> = {
|
||||||
|
completed: t('agents.statusCompleted', 'Completed'),
|
||||||
|
running: t('agents.statusRunning', 'Running'),
|
||||||
|
failed: t('agents.statusFailed', 'Failed'),
|
||||||
|
pending: t('agents.statusPending', 'Pending')
|
||||||
|
};
|
||||||
|
return statusLabels[status] || status;
|
||||||
|
};
|
||||||
|
|
||||||
const handleRunClick = (run: AgentRunWithMetrics) => {
|
const handleRunClick = (run: AgentRunWithMetrics) => {
|
||||||
// If there's a callback, use it (for full-page navigation)
|
// If there's a callback, use it (for full-page navigation)
|
||||||
if (onRunClick) {
|
if (onRunClick) {
|
||||||
@@ -135,7 +153,7 @@ export const AgentRunsList: React.FC<AgentRunsListProps> = ({
|
|||||||
{run.status === "running" && (
|
{run.status === "running" && (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
||||||
<span className="text-xs text-green-600 font-medium">Running</span>
|
<span className="text-xs text-green-600 font-medium">{getStatusLabel('running')}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -147,7 +165,7 @@ export const AgentRunsList: React.FC<AgentRunsListProps> = ({
|
|||||||
<div className="flex items-center gap-3 text-xs text-muted-foreground">
|
<div className="flex items-center gap-3 text-xs text-muted-foreground">
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<Clock className="h-3 w-3" />
|
<Clock className="h-3 w-3" />
|
||||||
<span>{formatISOTimestamp(run.created_at)}</span>
|
<span>{formatISOTimestamp(run.created_at, currentLocale)}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{run.metrics?.duration_ms && (
|
{run.metrics?.duration_ms && (
|
||||||
@@ -173,10 +191,7 @@ export const AgentRunsList: React.FC<AgentRunsListProps> = ({
|
|||||||
}
|
}
|
||||||
className="text-xs"
|
className="text-xs"
|
||||||
>
|
>
|
||||||
{run.status === "completed" ? "Completed" :
|
{getStatusLabel(run.status || 'pending')}
|
||||||
run.status === "running" ? "Running" :
|
|
||||||
run.status === "failed" ? "Failed" :
|
|
||||||
"Pending"}
|
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@@ -65,7 +65,7 @@ export type AgentIconName = keyof typeof AGENT_ICONS;
|
|||||||
* <CCAgents onBack={() => setView('home')} />
|
* <CCAgents onBack={() => setView('home')} />
|
||||||
*/
|
*/
|
||||||
export const CCAgents: React.FC<CCAgentsProps> = ({ onBack, className }) => {
|
export const CCAgents: React.FC<CCAgentsProps> = ({ onBack, className }) => {
|
||||||
const { t } = useTranslation();
|
const { t, i18n } = useTranslation();
|
||||||
const [agents, setAgents] = useState<Agent[]>([]);
|
const [agents, setAgents] = useState<Agent[]>([]);
|
||||||
const [runs, setRuns] = useState<AgentRunWithMetrics[]>([]);
|
const [runs, setRuns] = useState<AgentRunWithMetrics[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
@@ -413,7 +413,7 @@ export const CCAgents: React.FC<CCAgentsProps> = ({ onBack, className }) => {
|
|||||||
{agent.name}
|
{agent.name}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
{t('agents.created')}: {new Date(agent.created_at).toLocaleDateString()}
|
{t('agents.created')}: {new Date(agent.created_at).toLocaleDateString(i18n.language)}
|
||||||
</p>
|
</p>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<CardFooter className="p-4 pt-0 flex justify-center gap-1 flex-wrap">
|
<CardFooter className="p-4 pt-0 flex justify-center gap-1 flex-wrap">
|
||||||
|
@@ -229,6 +229,16 @@
|
|||||||
"deleteConfirmation": "Are you sure you want to delete the agent \"{{name}}\"? This action cannot be undone and will permanently remove the agent and all its associated data.",
|
"deleteConfirmation": "Are you sure you want to delete the agent \"{{name}}\"? This action cannot be undone and will permanently remove the agent and all its associated data.",
|
||||||
"deleting": "Deleting...",
|
"deleting": "Deleting...",
|
||||||
"deleteAgentButton": "Delete Agent",
|
"deleteAgentButton": "Delete Agent",
|
||||||
|
"statusCompleted": "Completed",
|
||||||
|
"statusRunning": "Running",
|
||||||
|
"statusFailed": "Failed",
|
||||||
|
"statusPending": "Pending",
|
||||||
|
"loadAgentsFailed": "Failed to load agents",
|
||||||
|
"deleteFailed": "Failed to delete agent",
|
||||||
|
"created": "Created",
|
||||||
|
"noAgentsYet": "No agents yet",
|
||||||
|
"createFirstAgent": "Create your first agent to get started",
|
||||||
|
"manageAgents": "Create and manage your AI agents",
|
||||||
"agentManagement": "Agent Management",
|
"agentManagement": "Agent Management",
|
||||||
"createNewOrManageAgents": "Create new agents or manage running agent executions",
|
"createNewOrManageAgents": "Create new agents or manage running agent executions",
|
||||||
"noAgentsAvailable": "No agents available",
|
"noAgentsAvailable": "No agents available",
|
||||||
|
@@ -218,6 +218,16 @@
|
|||||||
"deleteConfirmation": "确定要删除智能体 \"{{name}}\" 吗?此操作无法撤销,将永久删除智能体及其所有相关数据。",
|
"deleteConfirmation": "确定要删除智能体 \"{{name}}\" 吗?此操作无法撤销,将永久删除智能体及其所有相关数据。",
|
||||||
"deleting": "删除中...",
|
"deleting": "删除中...",
|
||||||
"deleteAgentButton": "删除智能体",
|
"deleteAgentButton": "删除智能体",
|
||||||
|
"statusCompleted": "已完成",
|
||||||
|
"statusRunning": "运行中",
|
||||||
|
"statusFailed": "失败",
|
||||||
|
"statusPending": "待处理",
|
||||||
|
"loadAgentsFailed": "加载智能体失败",
|
||||||
|
"deleteFailed": "删除智能体失败",
|
||||||
|
"created": "创建时间",
|
||||||
|
"noAgentsYet": "暂无智能体",
|
||||||
|
"createFirstAgent": "创建第一个智能体开始使用",
|
||||||
|
"manageAgents": "创建和管理您的AI智能体",
|
||||||
"agentManagement": "代理管理",
|
"agentManagement": "代理管理",
|
||||||
"createNewOrManageAgents": "创建新代理或管理运行中的代理执行",
|
"createNewOrManageAgents": "创建新代理或管理运行中的代理执行",
|
||||||
"noAgentsAvailable": "无可用代理",
|
"noAgentsAvailable": "无可用代理",
|
||||||
|
Reference in New Issue
Block a user