调整首页内容
This commit is contained in:
175
src/App.tsx
175
src/App.tsx
@@ -1,6 +1,6 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Plus, Loader2, Bot, FolderCode } from "lucide-react";
|
||||
import { Plus, Loader2, Bot, FolderCode, BarChart3, Network, FileText, Settings as SettingsIcon } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { api, type Project, type Session, type ClaudeMdFile } from "@/lib/api";
|
||||
import { OutputCacheProvider } from "@/lib/outputCache";
|
||||
@@ -159,7 +159,7 @@ function App() {
|
||||
switch (view) {
|
||||
case "welcome":
|
||||
return (
|
||||
<div className="flex items-center justify-center p-4" style={{ height: "100%" }}>
|
||||
<div className="flex items-center justify-center p-8 min-h-full">
|
||||
<div className="w-full max-w-4xl">
|
||||
{/* Welcome Header */}
|
||||
<motion.div
|
||||
@@ -168,49 +168,148 @@ function App() {
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-12 text-center"
|
||||
>
|
||||
<h1 className="text-4xl font-bold tracking-tight">
|
||||
<span className="rotating-symbol"></span>
|
||||
{t('welcome.title')}
|
||||
</h1>
|
||||
<div className="flex items-center justify-center mb-4">
|
||||
<span className="rotating-symbol text-orange-500 mr-3"></span>
|
||||
<h1 className="text-4xl font-bold tracking-tight">
|
||||
{t('welcome.title')}
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-lg text-muted-foreground">{t('welcome.subtitle')}</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Navigation Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
|
||||
{/* CC Agents Card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
>
|
||||
<Card
|
||||
className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover"
|
||||
onClick={() => handleViewChange("agents")}
|
||||
{/* Module Cards */}
|
||||
<div className="space-y-6 mb-8">
|
||||
{/* Top Row - Agent Management and Project Management */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Agent Management */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
>
|
||||
<div className="h-full flex flex-col items-center justify-center p-8">
|
||||
<Bot className="h-16 w-16 mb-4 text-primary" />
|
||||
<h2 className="text-xl font-semibold">{t('welcome.ccAgents')}</h2>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card
|
||||
className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 bg-card/50 backdrop-blur-sm"
|
||||
onClick={() => handleViewChange("agents")}
|
||||
>
|
||||
<div className="h-full flex flex-col items-center justify-center p-8">
|
||||
<Bot className="h-16 w-16 mb-4 text-orange-500" />
|
||||
<h3 className="text-xl font-semibold mb-3">{t('welcome.modules.agentManagement')}</h3>
|
||||
<p className="text-sm text-muted-foreground text-center">{t('welcome.modules.agentManagementDesc')}</p>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* CC Projects Card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<Card
|
||||
className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover"
|
||||
onClick={() => handleViewChange("projects")}
|
||||
{/* Project Management */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<div className="h-full flex flex-col items-center justify-center p-8">
|
||||
<FolderCode className="h-16 w-16 mb-4 text-primary" />
|
||||
<h2 className="text-xl font-semibold">{t('welcome.ccProjects')}</h2>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Card
|
||||
className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 bg-card/50 backdrop-blur-sm"
|
||||
onClick={() => handleViewChange("projects")}
|
||||
>
|
||||
<div className="h-full flex flex-col items-center justify-center p-8">
|
||||
<FolderCode className="h-16 w-16 mb-4 text-orange-500" />
|
||||
<h3 className="text-xl font-semibold mb-3">{t('welcome.modules.projectManagement')}</h3>
|
||||
<p className="text-sm text-muted-foreground text-center">{t('welcome.modules.projectManagementDesc')}</p>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Row - Usage Statistics, MCP Management, CLAUDE.md, and Settings */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{/* Usage Statistics */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
>
|
||||
<Card
|
||||
className="h-40 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 bg-card/50 backdrop-blur-sm"
|
||||
onClick={() => handleViewChange("usage-dashboard")}
|
||||
>
|
||||
<div className="h-full flex flex-col items-center justify-center p-4">
|
||||
<BarChart3 className="h-10 w-10 mb-2 text-orange-500" />
|
||||
<h3 className="text-sm font-semibold mb-1 text-center">{t('welcome.modules.usageStats')}</h3>
|
||||
<p className="text-xs text-muted-foreground text-center line-clamp-2">{t('welcome.modules.usageStatsDesc')}</p>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* MCP Management */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
>
|
||||
<Card
|
||||
className="h-40 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 bg-card/50 backdrop-blur-sm"
|
||||
onClick={() => handleViewChange("mcp")}
|
||||
>
|
||||
<div className="h-full flex flex-col items-center justify-center p-4">
|
||||
<Network className="h-10 w-10 mb-2 text-orange-500" />
|
||||
<h3 className="text-sm font-semibold mb-1 text-center">{t('welcome.modules.mcpManagement')}</h3>
|
||||
<p className="text-xs text-muted-foreground text-center line-clamp-2">{t('welcome.modules.mcpManagementDesc')}</p>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* CLAUDE.md */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.5 }}
|
||||
>
|
||||
<Card
|
||||
className="h-40 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 bg-card/50 backdrop-blur-sm"
|
||||
onClick={() => handleViewChange("editor")}
|
||||
>
|
||||
<div className="h-full flex flex-col items-center justify-center p-4">
|
||||
<FileText className="h-10 w-10 mb-2 text-orange-500" />
|
||||
<h3 className="text-sm font-semibold mb-1 text-center">{t('welcome.modules.claudeMd')}</h3>
|
||||
<p className="text-xs text-muted-foreground text-center line-clamp-2">{t('welcome.modules.claudeMdDesc')}</p>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Settings */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.6 }}
|
||||
>
|
||||
<Card
|
||||
className="h-40 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 bg-card/50 backdrop-blur-sm"
|
||||
onClick={() => handleViewChange("settings")}
|
||||
>
|
||||
<div className="h-full flex flex-col items-center justify-center p-4">
|
||||
<SettingsIcon className="h-10 w-10 mb-2 text-orange-500" />
|
||||
<h3 className="text-sm font-semibold mb-1 text-center">{t('welcome.modules.settings')}</h3>
|
||||
<p className="text-xs text-muted-foreground text-center line-clamp-2">{t('welcome.modules.settingsDesc')}</p>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Start Button */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.7 }}
|
||||
className="flex justify-center"
|
||||
>
|
||||
<Button
|
||||
onClick={handleNewSession}
|
||||
size="lg"
|
||||
className="bg-orange-500 hover:bg-orange-600 text-white px-8 py-3 text-lg font-medium min-w-[300px]"
|
||||
>
|
||||
<Plus className="mr-2 h-5 w-5" />
|
||||
{t('welcome.quickStart')}
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -36,10 +36,26 @@
|
||||
},
|
||||
"welcome": {
|
||||
"title": "Welcome to Claudia",
|
||||
"subtitle": "Powerful Claude Code Session Management Tool",
|
||||
"ccAgents": "CC Agents",
|
||||
"ccProjects": "CC Projects",
|
||||
"browseProjects": "Browse your Claude Code sessions",
|
||||
"newSession": "New Claude Code session"
|
||||
"newSession": "New Claude Code session",
|
||||
"modules": {
|
||||
"agentManagement": "Agent Management",
|
||||
"agentManagementDesc": "Create and manage intelligent agents",
|
||||
"projectManagement": "Project Management",
|
||||
"projectManagementDesc": "Browse and manage project sessions",
|
||||
"usageStats": "Usage Statistics",
|
||||
"usageStatsDesc": "View usage and statistics",
|
||||
"mcpManagement": "MCP Management",
|
||||
"mcpManagementDesc": "Manage MCP servers",
|
||||
"claudeMd": "CLAUDE.md",
|
||||
"claudeMdDesc": "Edit Claude configuration files",
|
||||
"settings": "Settings",
|
||||
"settingsDesc": "Application settings and configuration"
|
||||
},
|
||||
"quickStart": "Quick Start New Conversation"
|
||||
},
|
||||
"agents": {
|
||||
"title": "CC Agents",
|
||||
|
||||
@@ -36,10 +36,26 @@
|
||||
},
|
||||
"welcome": {
|
||||
"title": "欢迎使用 Claudia",
|
||||
"subtitle": "强大的 Claude Code 会话管理工具",
|
||||
"ccAgents": "CC 智能体",
|
||||
"ccProjects": "CC 项目",
|
||||
"browseProjects": "浏览您的 Claude Code 会话",
|
||||
"newSession": "新建 Claude Code 会话"
|
||||
"newSession": "新建 Claude Code 会话",
|
||||
"modules": {
|
||||
"agentManagement": "Agent 管理",
|
||||
"agentManagementDesc": "创建和管理智能 Agent",
|
||||
"projectManagement": "项目管理",
|
||||
"projectManagementDesc": "浏览和管理项目会话",
|
||||
"usageStats": "使用统计",
|
||||
"usageStatsDesc": "查看使用情况和统计",
|
||||
"mcpManagement": "MCP 管理",
|
||||
"mcpManagementDesc": "管理 MCP 服务器",
|
||||
"claudeMd": "CLAUDE.md",
|
||||
"claudeMdDesc": "编辑 Claude 配置文件",
|
||||
"settings": "设置",
|
||||
"settingsDesc": "应用设置和配置"
|
||||
},
|
||||
"quickStart": "快速开始新会话"
|
||||
},
|
||||
"agents": {
|
||||
"title": "CC 智能体",
|
||||
|
||||
Reference in New Issue
Block a user