init

README.md

@@ -1,12 +1,30 @@
----
-title: test1
-emoji: 🐳
-colorFrom: blue
-colorTo: gray
-sdk: static
-pinned: false
-tags:
-  - deepsite
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

app/agents/AgentFilters.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function AgentFilters() {
+  const [activeFilter, setActiveFilter] = useState('all');
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filters = [
+    { key: 'all', label: '全部', count: 24 },
+    { key: 'active', label: '运行中', count: 18 },
+    { key: 'paused', label: '暂停', count: 4 },
+    { key: 'draft', label: '草稿', count: 2 }
+  ];
+
+  const types = [
+    { key: 'all', label: '全部类型' },
+    { key: 'chat', label: '对话型' },
+    { key: 'analysis', label: '分析型' },
+    { key: 'generation', label: '生成型' },
+    { key: 'workflow', label: '工作流型' }
+  ];
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+        <div className="flex items-center space-x-4">
+          {filters.map((filter) => (
+            <button
+              key={filter.key}
+              onClick={() => setActiveFilter(filter.key)}
+              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors cursor-pointer whitespace-nowrap ${
+                activeFilter === filter.key
+                  ? 'bg-blue-100 text-blue-700'
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              {filter.label} ({filter.count})
+            </button>
+          ))}
+        </div>
+        
+        <div className="flex items-center space-x-4">
+          <div className="relative">
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <div className="w-4 h-4 flex items-center justify-center">
+                <i className="ri-search-line text-gray-400"></i>
+              </div>
+            </div>
+            <input
+              type="text"
+              placeholder="搜索Agent..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+            />
+          </div>
+          
+          <div className="relative">
+            <button className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap">
+              类型筛选
+              <div className="w-4 h-4 flex items-center justify-center inline-block ml-2">
+                <i className="ri-arrow-down-s-line"></i>
+              </div>
+            </button>
+          </div>
+          
+          <div className="relative">
+            <button className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap">
+              排序
+              <div className="w-4 h-4 flex items-center justify-center inline-block ml-2">
+                <i className="ri-arrow-down-s-line"></i>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/agents/AgentList.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+
+export default function AgentList() {
+  const [selectedAgents, setSelectedAgents] = useState<number[]>([]);
+
+  const agents = [
+    {
+      id: 1,
+      name: '智能客服助手',
+      description: '处理客户咨询和问题解答的智能助手',
+      type: '对话型',
+      status: '运行中',
+      version: 'v2.1',
+      created: '2024-01-15',
+      lastUsed: '2分钟前',
+      calls: 2845,
+      avatar: '🤖',
+      tags: ['客服', '问答', '多轮对话']
+    },
+    {
+      id: 2,
+      name: '文档分析器',
+      description: '自动分析和提取文档关键信息',
+      type: '分析型',
+      status: '运行中',
+      version: 'v1.8',
+      created: '2024-01-10',
+      lastUsed: '15分钟前',
+      calls: 1256,
+      avatar: '📄',
+      tags: ['文档', '分析', 'OCR']
+    },
+    {
+      id: 3,
+      name: '代码生成器',
+      description: '根据需求自动生成代码片段',
+      type: '生成型',
+      status: '暂停',
+      version: 'v1.5',
+      created: '2024-01-08',
+      lastUsed: '1小时前',
+      calls: 892,
+      avatar: '💻',
+      tags: ['编程', '代码', '自动化']
+    },
+    {
+      id: 4,
+      name: '数据可视化',
+      description: '将数据转换为图表和可视化报告',
+      type: '图表型',
+      status: '运行中',
+      version: 'v2.0',
+      created: '2024-01-05',
+      lastUsed: '30分钟前',
+      calls: 674,
+      avatar: '📊',
+      tags: ['数据', '图表', '报告']
+    },
+    {
+      id: 5,
+      name: '邮件智能助手',
+      description: '自动分类和回复邮件',
+      type: '对话型',
+      status: '运行中',
+      version: 'v1.3',
+      created: '2024-01-03',
+      lastUsed: '45分钟前',
+      calls: 458,
+      avatar: '📧',
+      tags: ['邮件', '自动回复', '分类']
+    },
+    {
+      id: 6,
+      name: '语音转文字',
+      description: '实时语音识别和转录',
+      type: '转换型',
+      status: '运行中',
+      version: 'v1.7',
+      created: '2024-01-01',
+      lastUsed: '1小时前',
+      calls: 325,
+      avatar: '🎤',
+      tags: ['语音', '转录', '实时']
+    }
+  ];
+
+  const handleSelectAgent = (agentId: number) => {
+    setSelectedAgents(prev => 
+      prev.includes(agentId) 
+        ? prev.filter(id => id !== agentId)
+        : [...prev, agentId]
+    );
+  };
+
+  const handleSelectAll = () => {
+    setSelectedAgents(selectedAgents.length === agents.length ? [] : agents.map(a => a.id));
+  };
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200">
+      <div className="p-6 border-b border-gray-200">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-4">
+            <input
+              type="checkbox"
+              checked={selectedAgents.length === agents.length}
+              onChange={handleSelectAll}
+              className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
+            />
+            <span className="text-sm text-gray-600">
+              {selectedAgents.length > 0 ? `已选择 ${selectedAgents.length} 个Agent` : '全选'}
+            </span>
+          </div>
+          
+          {selectedAgents.length > 0 && (
+            <div className="flex items-center space-x-3">
+              <button className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer whitespace-nowrap">
+                批量启动
+              </button>
+              <button className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer whitespace-nowrap">
+                批量暂停
+              </button>
+              <button className="px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-lg transition-colors cursor-pointer whitespace-nowrap">
+                批量删除
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+      
+      <div className="divide-y divide-gray-200">
+        {agents.map((agent) => (
+          <div key={agent.id} className="p-6 hover:bg-gray-50 transition-colors">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-4">
+                <input
+                  type="checkbox"
+                  checked={selectedAgents.includes(agent.id)}
+                  onChange={() => handleSelectAgent(agent.id)}
+                  className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
+                />
+                <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
+                  <span className="text-xl">{agent.avatar}</span>
+                </div>
+                <div className="flex-1">
+                  <div className="flex items-center space-x-3">
+                    <h3 className="text-lg font-semibold text-gray-900">{agent.name}</h3>
+                    <span className="text-sm text-gray-500">{agent.version}</span>
+                    <span className={`px-2 py-1 text-xs rounded-full ${
+                      agent.status === '运行中' 
+                        ? 'bg-green-100 text-green-800' 
+                        : 'bg-yellow-100 text-yellow-800'
+                    }`}>
+                      {agent.status}
+                    </span>
+                  </div>
+                  <p className="text-gray-600 mt-1">{agent.description}</p>
+                  <div className="flex items-center space-x-4 mt-3">
+                    <span className="text-sm text-gray-500">类型: {agent.type}</span>
+                    <span className="text-sm text-gray-500">调用: {agent.calls.toLocaleString()}</span>
+                    <span className="text-sm text-gray-500">最后使用: {agent.lastUsed}</span>
+                  </div>
+                  <div className="flex items-center space-x-2 mt-3">
+                    {agent.tags.map((tag, index) => (
+                      <span key={index} className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              
+              <div className="flex items-center space-x-3">
+                <Link href={`/agents/${agent.id}/analytics`} className="p-2 text-gray-400 hover:text-blue-600 transition-colors cursor-pointer">
+                  <div className="w-5 h-5 flex items-center justify-center">
+                    <i className="ri-bar-chart-line"></i>
+                  </div>
+                </Link>
+                <Link href={`/agents/${agent.id}/edit`} className="p-2 text-gray-400 hover:text-blue-600 transition-colors cursor-pointer">
+                  <div className="w-5 h-5 flex items-center justify-center">
+                    <i className="ri-edit-line"></i>
+                  </div>
+                </Link>
+                <button className="p-2 text-gray-400 hover:text-blue-600 transition-colors cursor-pointer">
+                  <div className="w-5 h-5 flex items-center justify-center">
+                    <i className="ri-settings-line"></i>
+                  </div>
+                </button>
+                <button className="p-2 text-gray-400 hover:text-red-600 transition-colors cursor-pointer">
+                  <div className="w-5 h-5 flex items-center justify-center">
+                    <i className="ri-delete-bin-line"></i>
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/agents/create/AgentBuilder.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import BasicSettings from './BasicSettings';
+import ModelConfig from './ModelConfig';
+import WorkflowConfig from './WorkflowConfig';
+import KnowledgeBase from './KnowledgeBase';
+import TestPanel from './TestPanel';
+
+export default function AgentBuilder() {
+  const router = useRouter();
+  const [currentStep, setCurrentStep] = useState(0);
+  const [agentData, setAgentData] = useState({
+    name: '',
+    description: '',
+    type: 'chat',
+    avatar: '🤖',
+    model: 'gpt-4',
+    temperature: 0.7,
+    maxTokens: 2000,
+    systemPrompt: '',
+    workflows: [],
+    knowledgeBase: [],
+    tags: []
+  });
+
+  const steps = [
+    { id: 0, name: '基本设置', icon: 'ri-settings-line' },
+    { id: 1, name: '模型配置', icon: 'ri-cpu-line' },
+    { id: 2, name: '工作流配置', icon: 'ri-flow-chart' },
+    { id: 3, name: '知识库', icon: 'ri-book-line' },
+    { id: 4, name: '测试调试', icon: 'ri-play-line' }
+  ];
+
+  const handleNext = () => {
+    if (currentStep < steps.length - 1) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const handlePrev = () => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const handleSave = () => {
+    console.log('保存Agent:', agentData);
+    router.push('/agents');
+  };
+
+  const handleDeploy = () => {
+    console.log('部署Agent:', agentData);
+    router.push('/agents');
+  };
+
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 0:
+        return <BasicSettings data={agentData} onChange={setAgentData} />;
+      case 1:
+        return <ModelConfig data={agentData} onChange={setAgentData} />;
+      case 2:
+        return <WorkflowConfig data={agentData} onChange={setAgentData} />;
+      case 3:
+        return <KnowledgeBase data={agentData} onChange={setAgentData} />;
+      case 4:
+        return <TestPanel data={agentData} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200">
+      {/* 步骤导航 */}
+      <div className="p-6 border-b border-gray-200">
+        <div className="flex items-center justify-between">
+          {steps.map((step, index) => (
+            <div key={step.id} className="flex items-center">
+              <div className={`flex items-center space-x-3 px-4 py-2 rounded-lg cursor-pointer transition-colors ${
+                currentStep === index 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : currentStep > index 
+                    ? 'bg-green-100 text-green-700'
+                    : 'text-gray-500'
+              }`} onClick={() => setCurrentStep(index)}>
+                <div className="w-6 h-6 flex items-center justify-center">
+                  <i className={step.icon}></i>
+                </div>
+                <span className="font-medium">{step.name}</span>
+              </div>
+              {index < steps.length - 1 && (
+                <div className="mx-4 w-8 h-px bg-gray-300"></div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* 步骤内容 */}
+      <div className="p-8">
+        {renderStepContent()}
+      </div>
+
+      {/* 底部操作按钮 */}
+      <div className="p-6 border-t border-gray-200 flex items-center justify-between">
+        <div className="flex space-x-3">
+          {currentStep > 0 && (
+            <button
+              onClick={handlePrev}
+              className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap"
+            >
+              上一步
+            </button>
+          )}
+        </div>
+        
+        <div className="flex space-x-3">
+          <button
+            onClick={handleSave}
+            className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap"
+          >
+            保存草稿
+          </button>
+          
+          {currentStep < steps.length - 1 ? (
+            <button
+              onClick={handleNext}
+              className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap"
+            >
+              下一步
+            </button>
+          ) : (
+            <button
+              onClick={handleDeploy}
+              className="bg-green-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-700 transition-colors cursor-pointer whitespace-nowrap"
+            >
+              <div className="w-5 h-5 flex items-center justify-center inline-block mr-2">
+                <i className="ri-rocket-line"></i>
+              </div>
+              立即部署
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

app/agents/create/BasicSettings.tsx

@@ -0,0 +1,168 @@
+
+'use client';
+
+import { useState } from 'react';
+
+interface BasicSettingsProps {
+  data: any;
+  onChange: (data: any) => void;
+}
+
+export default function BasicSettings({ data, onChange }: BasicSettingsProps) {
+  const [tags, setTags] = useState(data.tags || []);
+  const [newTag, setNewTag] = useState('');
+
+  const agentTypes = [
+    { value: 'chat', label: '对话型Agent', desc: '专注于多轮对话和问答' },
+    { value: 'analysis', label: '分析型Agent', desc: '数据分析和报告生成' },
+    { value: 'generation', label: '生成型Agent', desc: '内容创作和代码生成' },
+    { value: 'workflow', label: '工作流型Agent', desc: '复杂任务自动化处理' }
+  ];
+
+  const avatars = ['🤖', '🎯', '📊', '💻', '📝', '🔍', '⚡', '🚀', '💡', '🎨'];
+
+  const handleInputChange = (field: string, value: any) => {
+    onChange({ ...data, [field]: value });
+  };
+
+  const addTag = () => {
+    if (newTag && !tags.includes(newTag)) {
+      const updatedTags = [...tags, newTag];
+      setTags(updatedTags);
+      onChange({ ...data, tags: updatedTags });
+      setNewTag('');
+    }
+  };
+
+  const removeTag = (tagToRemove: string) => {
+    const updatedTags = tags.filter(tag => tag !== tagToRemove);
+    setTags(updatedTags);
+    onChange({ ...data, tags: updatedTags });
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900 mb-6">基本信息</h3>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div className="space-y-6">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Agent名称</label>
+              <input
+                type="text"
+                placeholder="输入Agent名称"
+                value={data.name}
+                onChange={(e) => handleInputChange('name', e.target.value)}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+              />
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">描述</label>
+              <textarea
+                placeholder="描述Agent的功能和用途"
+                rows={4}
+                maxLength={500}
+                value={data.description}
+                onChange={(e) => handleInputChange('description', e.target.value)}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm resize-none"
+              />
+              <div className="text-xs text-gray-500 mt-1">{data.description.length}/500</div>
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">标签</label>
+              <div className="flex flex-wrap gap-2 mb-3">
+                {tags.map((tag, index) => (
+                  <span
+                    key={index}
+                    className="inline-flex items-center px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full"
+                  >
+                    {tag}
+                    <button
+                      onClick={() => removeTag(tag)}
+                      className="ml-2 w-4 h-4 flex items-center justify-center hover:bg-blue-200 rounded-full cursor-pointer"
+                    >
+                      <i className="ri-close-line text-xs"></i>
+                    </button>
+                  </span>
+                ))}
+              </div>
+              <div className="flex space-x-2">
+                <input
+                  type="text"
+                  placeholder="添加标签"
+                  value={newTag}
+                  onChange={(e) => setNewTag(e.target.value)}
+                  onKeyPress={(e) => e.key === 'Enter' && addTag()}
+                  className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                />
+                <button
+                  onClick={addTag}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap text-sm"
+                >
+                  添加
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <div className="space-y-6">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">选择头像</label>
+              <div className="grid grid-cols-5 gap-3">
+                {avatars.map((avatar) => (
+                  <button
+                    key={avatar}
+                    onClick={() => handleInputChange('avatar', avatar)}
+                    className={`w-12 h-12 rounded-xl flex items-center justify-center text-xl cursor-pointer transition-colors ${
+                      data.avatar === avatar 
+                        ? 'bg-blue-100 border-2 border-blue-500' 
+                        : 'bg-gray-100 hover:bg-gray-200 border-2 border-transparent'
+                    }`}
+                  >
+                    {avatar}
+                  </button>
+                ))}
+              </div>
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Agent类型</label>
+              <div className="space-y-3">
+                {agentTypes.map((type) => (
+                  <div
+                    key={type.value}
+                    onClick={() => handleInputChange('type', type.value)}
+                    className={`p-4 border rounded-lg cursor-pointer transition-colors ${
+                      data.type === type.value
+                        ? 'border-blue-500 bg-blue-50'
+                        : 'border-gray-300 hover:border-gray-400'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <h4 className="font-medium text-gray-900">{type.label}</h4>
+                        <p className="text-sm text-gray-600 mt-1">{type.desc}</p>
+                      </div>
+                      <div className={`w-4 h-4 rounded-full border-2 ${
+                        data.type === type.value
+                          ? 'border-blue-500 bg-blue-500'
+                          : 'border-gray-300'
+                      }`}>
+                        {data.type === type.value && (
+                          <div className="w-2 h-2 bg-white rounded-full mx-auto mt-0.5"></div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/agents/create/KnowledgeBase.tsx

@@ -0,0 +1,511 @@
+
+'use client';
+
+import { useState } from 'react';
+
+interface KnowledgeBaseProps {
+  data: any;
+  onChange: (data: any) => void;
+}
+
+export default function KnowledgeBase({ data, onChange }: KnowledgeBaseProps) {
+  const [uploadedFiles, setUploadedFiles] = useState([
+    { id: 1, name: '产品手册.pdf', size: '2.4 MB', status: 'uploaded', type: 'pdf', chunks: 45, lastModified: '2024-01-15' },
+    { id: 2, name: '常见问题FAQ.docx', size: '856 KB', status: 'uploaded', type: 'docx', chunks: 23, lastModified: '2024-01-14' },
+    { id: 3, name: '技术文档.md', size: '1.2 MB', status: 'uploaded', type: 'md', chunks: 67, lastModified: '2024-01-13' },
+  ]);
+
+  const [webSources, setWebSources] = useState([
+    { id: 1, url: 'https://docs.example.com', title: '官方文档', status: 'crawled', pages: 15, lastUpdate: '2024-01-15' },
+    { id: 2, url: 'https://help.example.com', title: '帮助中心', status: 'crawling', pages: 8, lastUpdate: '2024-01-14' }
+  ]);
+
+  const [manualContent, setManualContent] = useState('');
+  const [newUrl, setNewUrl] = useState('');
+  const [activeTab, setActiveTab] = useState('files');
+  const [processingSettings, setProcessingSettings] = useState({
+    autoChunk: true,
+    smartDedup: true,
+    generateSummary: false,
+    chunkSize: 1000,
+    overlap: 200
+  });
+
+  const knowledgeBases = [
+    { id: 'kb-001', name: '通用知识库', description: '包含基础常识和通用信息', items: 1240, isDefault: true },
+    { id: 'kb-002', name: '技术文档库', description: '技术相关的文档和资料', items: 567, isDefault: false },
+    { id: 'kb-003', name: '产品说明库', description: '产品相关的说明和手册', items: 892, isDefault: false },
+    { id: 'kb-004', name: '客服问答库', description: '客服常见问题和解答', items: 345, isDefault: false }
+  ];
+
+  const [selectedKnowledgeBases, setSelectedKnowledgeBases] = useState(['kb-001']);
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files || []);
+    const newFiles = files.map((file, index) => ({
+      id: uploadedFiles.length + index + 1,
+      name: file.name,
+      size: `${(file.size / 1024 / 1024).toFixed(1)} MB`,
+      status: 'uploading',
+      type: file.name.split('.').pop() || 'unknown',
+      chunks: 0,
+      lastModified: new Date().toISOString().split('T')[0]
+    }));
+    
+    setUploadedFiles([...uploadedFiles, ...newFiles]);
+    
+    setTimeout(() => {
+      setUploadedFiles(prev => prev.map(file => 
+        newFiles.some(nf => nf.id === file.id) 
+          ? { ...file, status: 'uploaded', chunks: Math.floor(Math.random() * 50) + 10 }
+          : file
+      ));
+    }, 2000);
+  };
+
+  const removeFile = (fileId: number) => {
+    setUploadedFiles(prev => prev.filter(file => file.id !== fileId));
+  };
+
+  const addWebSource = () => {
+    if (newUrl) {
+      const newSource = {
+        id: webSources.length + 1,
+        url: newUrl,
+        title: '正在获取标题...',
+        status: 'crawling',
+        pages: 0,
+        lastUpdate: new Date().toISOString().split('T')[0]
+      };
+      setWebSources([...webSources, newSource]);
+      setNewUrl('');
+      
+      setTimeout(() => {
+        setWebSources(prev => prev.map(source => 
+          source.id === newSource.id 
+            ? { ...source, status: 'crawled', title: `${newUrl.split('/')[2]} - 文档`, pages: Math.floor(Math.random() * 20) + 5 }
+            : source
+        ));
+      }, 3000);
+    }
+  };
+
+  const removeWebSource = (sourceId: number) => {
+    setWebSources(prev => prev.filter(source => source.id !== sourceId));
+  };
+
+  const toggleKnowledgeBase = (kbId: string) => {
+    setSelectedKnowledgeBases(prev => 
+      prev.includes(kbId) 
+        ? prev.filter(id => id !== kbId)
+        : [...prev, kbId]
+    );
+  };
+
+  const addManualContent = () => {
+    if (manualContent.trim()) {
+      const newFile = {
+        id: uploadedFiles.length + 1,
+        name: `手动内容_${new Date().toLocaleTimeString()}`,
+        size: `${Math.ceil(manualContent.length / 1024)} KB`,
+        status: 'uploaded',
+        type: 'text',
+        chunks: Math.ceil(manualContent.length / processingSettings.chunkSize),
+        lastModified: new Date().toISOString().split('T')[0]
+      };
+      setUploadedFiles([...uploadedFiles, newFile]);
+      setManualContent('');
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900 mb-2">知识库配置</h3>
+        <p className="text-gray-600 mb-6">为Agent配置知识来源，提升回答的准确性和专业性</p>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2 space-y-6">
+            {/* 选择现有知识库 */}
+            <div className="bg-white border border-gray-200 rounded-lg p-6">
+              <h4 className="font-medium text-gray-900 mb-4">选择现有知识库</h4>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {knowledgeBases.map((kb) => (
+                  <div
+                    key={kb.id}
+                    onClick={() => toggleKnowledgeBase(kb.id)}
+                    className={`p-4 border rounded-lg cursor-pointer transition-all ${
+                      selectedKnowledgeBases.includes(kb.id)
+                        ? 'border-blue-500 bg-blue-50'
+                        : 'border-gray-200 hover:border-gray-300'
+                    }`}
+                  >
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1">
+                        <div className="flex items-center space-x-2">
+                          <h5 className="font-medium text-gray-900">{kb.name}</h5>
+                          {kb.isDefault && (
+                            <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">默认</span>
+                          )}
+                        </div>
+                        <p className="text-sm text-gray-600 mt-1">{kb.description}</p>
+                        <p className="text-xs text-gray-500 mt-2">{kb.items.toLocaleString()} 条记录</p>
+                      </div>
+                      <div className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
+                        selectedKnowledgeBases.includes(kb.id)
+                          ? 'border-blue-500 bg-blue-500'
+                          : 'border-gray-300'
+                      }`}>
+                        {selectedKnowledgeBases.includes(kb.id) && (
+                          <i className="ri-check-line text-white text-xs"></i>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* 添加新内容 */}
+            <div className="bg-white border border-gray-200 rounded-lg">
+              <div className="border-b border-gray-200">
+                <div className="flex space-x-0">
+                  {[
+                    { key: 'files', label: '文件上传', icon: 'ri-file-line' },
+                    { key: 'web', label: '网页抓取', icon: 'ri-global-line' },
+                    { key: 'manual', label: '手动输入', icon: 'ri-edit-line' }
+                  ].map((tab) => (
+                    <button
+                      key={tab.key}
+                      onClick={() => setActiveTab(tab.key)}
+                      className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
+                        activeTab === tab.key
+                          ? 'border-blue-500 text-blue-600 bg-blue-50'
+                          : 'border-transparent text-gray-500 hover:text-gray-700'
+                      }`}
+                    >
+                      <div className="w-4 h-4 flex items-center justify-center inline-block mr-2">
+                        <i className={tab.icon}></i>
+                      </div>
+                      {tab.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              
+              <div className="p-6">
+                {activeTab === 'files' && (
+                  <div className="space-y-4">
+                    <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors">
+                      <div className="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-4">
+                        <i className="ri-upload-cloud-line text-xl text-gray-400"></i>
+                      </div>
+                      <p className="text-gray-600 mb-2">拖拽文件到此处，或者</p>
+                      <label className="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg cursor-pointer hover:bg-blue-700 transition-colors text-sm">
+                        选择文件
+                        <input
+                          type="file"
+                          multiple
+                          accept=".pdf,.doc,.docx,.txt,.md,.csv,.xlsx"
+                          onChange={handleFileUpload}
+                          className="hidden"
+                        />
+                      </label>
+                      <p className="text-xs text-gray-500 mt-2">支持 PDF, DOC, DOCX, TXT, MD, CSV, XLSX 格式，最大 50MB</p>
+                    </div>
+                  </div>
+                )}
+                
+                {activeTab === 'web' && (
+                  <div className="space-y-4">
+                    <div className="flex space-x-2">
+                      <input
+                        type="url"
+                        placeholder="输入要抓取的网址（如：https://docs.example.com）"
+                        value={newUrl}
+                        onChange={(e) => setNewUrl(e.target.value)}
+                        className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                      />
+                      <button 
+                        onClick={addWebSource}
+                        className="px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap text-sm"
+                      >
+                        开始抓取
+                      </button>
+                    </div>
+                    <div className="text-xs text-gray-500">
+                      支持抓取文档站点、博客文章、产品页面等，自动提取文本内容
+                    </div>
+                  </div>
+                )}
+                
+                {activeTab === 'manual' && (
+                  <div className="space-y-4">
+                    <textarea
+                      placeholder="直接输入要添加到知识库的内容...&#10;&#10;例如：&#10;• 产品使用说明&#10;• 常见问题解答&#10;• 操作步骤指南&#10;• 专业知识条目"
+                      rows={8}
+                      maxLength={500}
+                      value={manualContent}
+                      onChange={(e) => setManualContent(e.target.value)}
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm resize-none"
+                    />
+                    <div className="flex items-center justify-between">
+                      <div className="text-xs text-gray-500">{manualContent.length}/500 字符</div>
+                      <button
+                        onClick={addManualContent}
+                        disabled={!manualContent.trim()}
+                        className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 transition-colors cursor-pointer whitespace-nowrap text-sm"
+                      >
+                        添加内容
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          
+          <div className="space-y-6">
+            {/* 已添加内容统计 */}
+            <div className="bg-white border border-gray-200 rounded-lg p-4">
+              <h4 className="font-medium text-gray-900 mb-3">内容统计</h4>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-600">文档数量</span>
+                  <span className="font-medium text-gray-900">{uploadedFiles.length}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-600">网页来源</span>
+                  <span className="font-medium text-gray-900">{webSources.length}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-600">总分块数</span>
+                  <span className="font-medium text-gray-900">{uploadedFiles.reduce((sum, file) => sum + file.chunks, 0)}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-600">知识库</span>
+                  <span className="font-medium text-gray-900">{selectedKnowledgeBases.length} 个</span>
+                </div>
+              </div>
+            </div>
+
+            {/* 处理设置 */}
+            <div className="bg-white border border-gray-200 rounded-lg p-4">
+              <h4 className="font-medium text-gray-900 mb-3">处理设置</h4>
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-700">自动分块处理</span>
+                  <div 
+                    onClick={() => setProcessingSettings(prev => ({...prev, autoChunk: !prev.autoChunk}))}
+                    className={`w-10 h-6 rounded-full relative cursor-pointer transition-colors ${
+                      processingSettings.autoChunk ? 'bg-blue-600' : 'bg-gray-300'
+                    }`}
+                  >
+                    <div className={`w-4 h-4 bg-white rounded-full absolute top-1 transition-transform ${
+                      processingSettings.autoChunk ? 'right-1' : 'left-1'
+                    }`}></div>
+                  </div>
+                </div>
+                
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-700">智能去重</span>
+                  <div 
+                    onClick={() => setProcessingSettings(prev => ({...prev, smartDedup: !prev.smartDedup}))}
+                    className={`w-10 h-6 rounded-full relative cursor-pointer transition-colors ${
+                      processingSettings.smartDedup ? 'bg-blue-600' : 'bg-gray-300'
+                    }`}
+                  >
+                    <div className={`w-4 h-4 bg-white rounded-full absolute top-1 transition-transform ${
+                      processingSettings.smartDedup ? 'right-1' : 'left-1'
+                    }`}></div>
+                  </div>
+                </div>
+                
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-700">生成摘要</span>
+                  <div 
+                    onClick={() => setProcessingSettings(prev => ({...prev, generateSummary: !prev.generateSummary}))}
+                    className={`w-10 h-6 rounded-full relative cursor-pointer transition-colors ${
+                      processingSettings.generateSummary ? 'bg-blue-600' : 'bg-gray-300'
+                    }`}
+                  >
+                    <div className={`w-4 h-4 bg-white rounded-full absolute top-1 transition-transform ${
+                      processingSettings.generateSummary ? 'right-1' : 'left-1'
+                    }`}></div>
+                  </div>
+                </div>
+
+                <div className="pt-2 border-t border-gray-200">
+                  <div className="mb-3">
+                    <label className="block text-sm text-gray-700 mb-1">
+                      分块大小: {processingSettings.chunkSize} 字符
+                    </label>
+                    <input
+                      type="range"
+                      min="500"
+                      max="2000"
+                      step="100"
+                      value={processingSettings.chunkSize}
+                      onChange={(e) => setProcessingSettings(prev => ({...prev, chunkSize: parseInt(e.target.value)}))}
+                      className="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+                    />
+                  </div>
+                  
+                  <div>
+                    <label className="block text-sm text-gray-700 mb-1">
+                      重叠字符: {processingSettings.overlap}
+                    </label>
+                    <input
+                      type="range"
+                      min="0"
+                      max="500"
+                      step="50"
+                      value={processingSettings.overlap}
+                      onChange={(e) => setProcessingSettings(prev => ({...prev, overlap: parseInt(e.target.value)}))}
+                      className="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            {/* 使用提示 */}
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+              <div className="flex items-start space-x-3">
+                <div className="w-5 h-5 flex items-center justify-center mt-0.5">
+                  <i className="ri-lightbulb-line text-blue-600"></i>
+                </div>
+                <div>
+                  <h4 className="font-medium text-blue-900 mb-2">优化建议</h4>
+                  <ul className="text-sm text-blue-800 space-y-1">
+                    <li>• 上传结构化的文档获得更好效果</li>
+                    <li>• 定期更新知识库内容</li>
+                    <li>• 避免重复和冗余信息</li>
+                    <li>• 使用标准的文档格式</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 已上传文件列表 */}
+        {uploadedFiles.length > 0 && (
+          <div className="mt-8">
+            <h4 className="font-medium text-gray-900 mb-4">已添加的文件</h4>
+            <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
+              <div className="divide-y divide-gray-200">
+                {uploadedFiles.map((file) => (
+                  <div key={file.id} className="p-4 hover:bg-gray-50 transition-colors">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center space-x-4">
+                        <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+                          <i className={`${
+                            file.type === 'pdf' ? 'ri-file-pdf-line text-red-600' :
+                            file.type === 'docx' ? 'ri-file-word-line text-blue-600' :
+                            file.type === 'md' ? 'ri-markdown-line text-purple-600' :
+                            'ri-file-text-line text-gray-600'
+                          }`}></i>
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-center space-x-2">
+                            <p className="font-medium text-gray-900">{file.name}</p>
+                            {file.status === 'uploading' ? (
+                              <span className="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">处理中</span>
+                            ) : (
+                              <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">已完成</span>
+                            )}
+                          </div>
+                          <div className="flex items-center space-x-4 mt-1 text-sm text-gray-500">
+                            <span>{file.size}</span>
+                            <span>{file.chunks} 个分块</span>
+                            <span>修改于 {file.lastModified}</span>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        {file.status === 'uploading' ? (
+                          <div className="w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+                        ) : (
+                          <button className="p-1 text-gray-400 hover:text-blue-600 transition-colors cursor-pointer">
+                            <div className="w-4 h-4 flex items-center justify-center">
+                              <i className="ri-eye-line"></i>
+                            </div>
+                          </button>
+                        )}
+                        <button
+                          onClick={() => removeFile(file.id)}
+                          className="p-1 text-gray-400 hover:text-red-600 transition-colors cursor-pointer"
+                        >
+                          <div className="w-4 h-4 flex items-center justify-center">
+                            <i className="ri-delete-bin-line"></i>
+                          </div>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 网页来源列表 */}
+        {webSources.length > 0 && (
+          <div className="mt-8">
+            <h4 className="font-medium text-gray-900 mb-4">网页来源</h4>
+            <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
+              <div className="divide-y divide-gray-200">
+                {webSources.map((source) => (
+                  <div key={source.id} className="p-4 hover:bg-gray-50 transition-colors">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center space-x-4">
+                        <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
+                          <i className="ri-global-line text-green-600"></i>
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-center space-x-2">
+                            <p className="font-medium text-gray-900">{source.title}</p>
+                            {source.status === 'crawling' ? (
+                              <span className="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">抓取中</span>
+                            ) : (
+                              <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">已完成</span>
+                            )}
+                          </div>
+                          <div className="flex items-center space-x-4 mt-1 text-sm text-gray-500">
+                            <span>{source.url}</span>
+                            <span>{source.pages} 个页面</span>
+                            <span>更新于 {source.lastUpdate}</span>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        {source.status === 'crawling' ? (
+                          <div className="w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
+                        ) : (
+                          <button className="p-1 text-gray-400 hover:text-blue-600 transition-colors cursor-pointer">
+                            <div className="w-4 h-4 flex items-center justify-center">
+                              <i className="ri-refresh-line"></i>
+                            </div>
+                          </button>
+                        )}
+                        <button
+                          onClick={() => removeWebSource(source.id)}
+                          className="p-1 text-gray-400 hover:text-red-600 transition-colors cursor-pointer"
+                        >
+                          <div className="w-4 h-4 flex items-center justify-center">
+                            <i className="ri-delete-bin-line"></i>
+                          </div>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/agents/create/ModelConfig.tsx

@@ -0,0 +1,111 @@
+
+'use client';
+
+interface ModelConfigProps {
+  data: any;
+  onChange: (data: any) => void;
+}
+
+export default function ModelConfig({ data, onChange }: ModelConfigProps) {
+  const models = [
+    { id: 'gpt-4', name: 'GPT-4', desc: '最先进的语言模型，适合复杂任务', cost: '高' },
+    { id: 'gpt-3.5-turbo', name: 'GPT-3.5 Turbo', desc: '性价比最优，响应快速', cost: '中' },
+    { id: 'claude-3', name: 'Claude-3', desc: '擅长分析和推理任务', cost: '中' },
+    { id: 'gemini-pro', name: 'Gemini Pro', desc: '多模态能力强', cost: '中' }
+  ];
+
+  const handleInputChange = (field: string, value: any) => {
+    onChange({ ...data, [field]: value });
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900 mb-6">模型配置</h3>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div className="space-y-6">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-3">选择基础模型</label>
+              <div className="space-y-3">
+                {models.map((model) => (
+                  <div
+                    key={model.id}
+                    onClick={() => handleInputChange('model', model.id)}
+                    className={`p-4 border rounded-lg cursor-pointer transition-colors ${
+                      data.model === model.id
+                        ? 'border-blue-500 bg-blue-50'
+                        : 'border-gray-300 hover:border-gray-400'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <h4 className="font-medium text-gray-900">{model.name}</h4>
+                        <p className="text-sm text-gray-600 mt-1">{model.desc}</p>
+                      </div>
+                      <div className="text-right">
+                        <span className={`px-2 py-1 text-xs rounded-full ${
+                          model.cost === '高' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'
+                        }`}>
+                          成本{model.cost}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          
+          <div className="space-y-6">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                创造性 (Temperature): {data.temperature}
+              </label>
+              <input
+                type="range"
+                min="0"
+                max="2"
+                step="0.1"
+                value={data.temperature}
+                onChange={(e) => handleInputChange('temperature', parseFloat(e.target.value))}
+                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+              />
+              <div className="flex justify-between text-xs text-gray-500 mt-1">
+                <span>保守</span>
+                <span>创新</span>
+              </div>
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">最大输出长度</label>
+              <input
+                type="number"
+                min="100"
+                max="4000"
+                step="100"
+                value={data.maxTokens}
+                onChange={(e) => handleInputChange('maxTokens', parseInt(e.target.value))}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+              />
+              <p className="text-xs text-gray-500 mt-1">建议范围: 100-4000 tokens</p>
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">系统提示词</label>
+              <textarea
+                placeholder="定义Agent的角色、行为和回答风格..."
+                rows={8}
+                maxLength={500}
+                value={data.systemPrompt}
+                onChange={(e) => handleInputChange('systemPrompt', e.target.value)}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm resize-none"
+              />
+              <div className="text-xs text-gray-500 mt-1">{data.systemPrompt.length}/500</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/agents/create/TestPanel.tsx

@@ -0,0 +1,194 @@
+
+'use client';
+
+import { useState } from 'react';
+
+interface TestPanelProps {
+  data: any;
+}
+
+export default function TestPanel({ data }: TestPanelProps) {
+  const [messages, setMessages] = useState([
+    {
+      id: 1,
+      role: 'assistant',
+      content: `你好！我是${data.name || 'AI Assistant'}。我已经准备好为您提供帮助了。请告诉我您需要什么协助？`,
+      timestamp: new Date()
+    }
+  ]);
+  const [inputMessage, setInputMessage] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const sendMessage = async () => {
+    if (!inputMessage.trim()) return;
+
+    const userMessage = {
+      id: messages.length + 1,
+      role: 'user',
+      content: inputMessage,
+      timestamp: new Date()
+    };
+
+    setMessages(prev => [...prev, userMessage]);
+    setInputMessage('');
+    setIsLoading(true);
+
+    setTimeout(() => {
+      const aiResponse = {
+        id: messages.length + 2,
+        role: 'assistant',
+        content: `这是一个测试响应。在实际部署后，我将根据您配置的模型和知识库来回答问题。当前配置：模型 ${data.model}，温度 ${data.temperature}。`,
+        timestamp: new Date()
+      };
+      
+      setMessages(prev => [...prev, aiResponse]);
+      setIsLoading(false);
+    }, 1500);
+  };
+
+  const clearChat = () => {
+    setMessages([{
+      id: 1,
+      role: 'assistant',
+      content: `你好！我是${data.name || 'AI Assistant'}。我已经准备好为您提供帮助了。请告诉我您需要什么协助？`,
+      timestamp: new Date()
+    }]);
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900 mb-6">测试对话</h3>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2">
+            <div className="bg-gray-50 rounded-xl border border-gray-200 h-96 flex flex-col">
+              <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
+                    <span className="text-sm">{data.avatar}</span>
+                  </div>
+                  <div>
+                    <h4 className="font-medium text-gray-900">{data.name || '未命名Agent'}</h4>
+                    <p className="text-xs text-gray-500">测试模式</p>
+                  </div>
+                </div>
+                <button
+                  onClick={clearChat}
+                  className="px-3 py-2 text-sm text-gray-600 hover:bg-gray-200 rounded-lg transition-colors cursor-pointer"
+                >
+                  清空对话
+                </button>
+              </div>
+              
+              <div className="flex-1 p-4 overflow-y-auto space-y-4">
+                {messages.map((message) => (
+                  <div key={message.id} className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                    <div className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
+                      message.role === 'user' 
+                        ? 'bg-blue-600 text-white' 
+                        : 'bg-white border border-gray-200 text-gray-900'
+                    }`}>
+                      <p className="text-sm">{message.content}</p>
+                      <p className={`text-xs mt-1 ${
+                        message.role === 'user' ? 'text-blue-100' : 'text-gray-500'
+                      }`}>
+                        {message.timestamp.toLocaleTimeString()}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+                
+                {isLoading && (
+                  <div className="flex justify-start">
+                    <div className="bg-white border border-gray-200 rounded-lg px-4 py-2">
+                      <div className="flex items-center space-x-2">
+                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
+                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+              
+              <div className="p-4 border-t border-gray-200">
+                <div className="flex space-x-2">
+                  <input
+                    type="text"
+                    placeholder="输入测试消息..."
+                    value={inputMessage}
+                    onChange={(e) => setInputMessage(e.target.value)}
+                    onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
+                    className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                  />
+                  <button
+                    onClick={sendMessage}
+                    disabled={isLoading || !inputMessage.trim()}
+                    className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer whitespace-nowrap"
+                  >
+                    <div className="w-5 h-5 flex items-center justify-center">
+                      <i className="ri-send-plane-line"></i>
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div className="space-y-6">
+            <div className="bg-white border border-gray-200 rounded-lg p-4">
+              <h4 className="font-medium text-gray-900 mb-3">配置预览</h4>
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-gray-600">名称:</span>
+                  <span className="text-gray-900">{data.name || '未设置'}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">类型:</span>
+                  <span className="text-gray-900">{data.type}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">模型:</span>
+                  <span className="text-gray-900">{data.model}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">创造性:</span>
+                  <span className="text-gray-900">{data.temperature}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">最大长度:</span>
+                  <span className="text-gray-900">{data.maxTokens}</span>
+                </div>
+              </div>
+            </div>
+            
+            <div className="bg-white border border-gray-200 rounded-lg p-4">
+              <h4 className="font-medium text-gray-900 mb-3">测试建议</h4>
+              <div className="space-y-2">
+                <button
+                  onClick={() => setInputMessage('你好，请介绍一下自己')}
+                  className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded cursor-pointer"
+                >
+                  基础问候测试
+                </button>
+                <button
+                  onClick={() => setInputMessage('请帮我分析一下这个问题')}
+                  className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded cursor-pointer"
+                >
+                  功能测试
+                </button>
+                <button
+                  onClick={() => setInputMessage('你能做什么？有什么限制吗？')}
+                  className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded cursor-pointer"
+                >
+                  能力边界测试
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/agents/create/WorkflowConfig.tsx

@@ -0,0 +1,313 @@
+'use client';
+
+import { useState } from 'react';
+
+interface WorkflowConfigProps {
+  data: any;
+  onChange: (data: any) => void;
+}
+
+export default function WorkflowConfig({ data, onChange }: WorkflowConfigProps) {
+  const [selectedWorkflows, setSelectedWorkflows] = useState(data.workflows || []);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterCategory, setFilterCategory] = useState('all');
+
+  const availableWorkflows = [
+    {
+      id: 'wf-001',
+      name: '数据分析流程',
+      description: '自动化数据收集、清洗和分析',
+      category: 'data-processing',
+      icon: '📊',
+      status: 'active',
+      lastUsed: '2024-01-15',
+      executions: 156
+    },
+    {
+      id: 'wf-002',
+      name: '内容审核工作流',
+      description: '文本内容智能审核和分类',
+      category: 'content-moderation',
+      icon: '🔍',
+      status: 'active',
+      lastUsed: '2024-01-14',
+      executions: 89
+    },
+    {
+      id: 'wf-003',
+      name: '客服自动回复',
+      description: '基于知识库的智能客服响应',
+      category: 'customer-service',
+      icon: '💬',
+      status: 'active',
+      lastUsed: '2024-01-13',
+      executions: 234
+    },
+    {
+      id: 'wf-004',
+      name: '报告生成器',
+      description: '自动生成业务分析报告',
+      category: 'report-generation',
+      icon: '📄',
+      status: 'active',
+      lastUsed: '2024-01-12',
+      executions: 67
+    },
+    {
+      id: 'wf-005',
+      name: '邮件处理流程',
+      description: '邮件分类和自动回复',
+      category: 'email-automation',
+      icon: '📧',
+      status: 'active',
+      lastUsed: '2024-01-11',
+      executions: 145
+    },
+    {
+      id: 'wf-006',
+      name: '社交媒体监控',
+      description: '社交媒体内容监控和分析',
+      category: 'social-media',
+      icon: '📱',
+      status: 'active',
+      lastUsed: '2024-01-10',
+      executions: 78
+    }
+  ];
+
+  const categories = [
+    { key: 'all', label: '全部分类', count: availableWorkflows.length },
+    { key: 'data-processing', label: '数据处理', count: 1 },
+    { key: 'content-moderation', label: '内容审核', count: 1 },
+    { key: 'customer-service', label: '客服服务', count: 1 },
+    { key: 'report-generation', label: '报告生成', count: 1 },
+    { key: 'email-automation', label: '邮件自动化', count: 1 },
+    { key: 'social-media', label: '社交媒体', count: 1 }
+  ];
+
+  const filteredWorkflows = availableWorkflows.filter(workflow => {
+    const matchesSearch = workflow.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         workflow.description.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesCategory = filterCategory === 'all' || workflow.category === filterCategory;
+    return matchesSearch && matchesCategory;
+  });
+
+  const handleWorkflowToggle = (workflowId: string) => {
+    const isSelected = selectedWorkflows.includes(workflowId);
+    const updatedWorkflows = isSelected
+      ? selectedWorkflows.filter(id => id !== workflowId)
+      : [...selectedWorkflows, workflowId];
+    
+    setSelectedWorkflows(updatedWorkflows);
+    onChange({ ...data, workflows: updatedWorkflows });
+  };
+
+  const handleSelectAll = () => {
+    const allIds = filteredWorkflows.map(wf => wf.id);
+    setSelectedWorkflows(allIds);
+    onChange({ ...data, workflows: allIds });
+  };
+
+  const handleDeselectAll = () => {
+    setSelectedWorkflows([]);
+    onChange({ ...data, workflows: [] });
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900 mb-2">工作流配置</h3>
+        <p className="text-gray-600 mb-6">选择Agent可以调用的工作流程，增强自动化处理能力</p>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
+          <div className="lg:col-span-3 space-y-6">
+            {/* 搜索和筛选 */}
+            <div className="bg-white border border-gray-200 rounded-lg p-4">
+              <div className="flex flex-col sm:flex-row gap-4">
+                <div className="flex-1 relative">
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <div className="w-4 h-4 flex items-center justify-center">
+                      <i className="ri-search-line text-gray-400"></i>
+                    </div>
+                  </div>
+                  <input
+                    type="text"
+                    placeholder="搜索工作流..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+                  />
+                </div>
+                <select
+                  value={filterCategory}
+                  onChange={(e) => setFilterCategory(e.target.value)}
+                  className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm pr-8"
+                >
+                  {categories.map(category => (
+                    <option key={category.key} value={category.key}>
+                      {category.label} ({category.count})
+                    </option>
+                  ))}
+                </select>
+              </div>
+              
+              <div className="flex items-center justify-between mt-4">
+                <div className="text-sm text-gray-600">
+                  已选择 {selectedWorkflows.length} 个工作流
+                </div>
+                <div className="flex space-x-2">
+                  <button
+                    onClick={handleSelectAll}
+                    className="px-3 py-1 text-sm text-blue-600 hover:bg-blue-50 rounded cursor-pointer"
+                  >
+                    全选
+                  </button>
+                  <button
+                    onClick={handleDeselectAll}
+                    className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-50 rounded cursor-pointer"
+                  >
+                    清空
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* 工作流列表 */}
+            <div className="space-y-4">
+              {filteredWorkflows.map((workflow) => (
+                <div
+                  key={workflow.id}
+                  className={`bg-white border rounded-lg p-4 cursor-pointer transition-all ${
+                    selectedWorkflows.includes(workflow.id)
+                      ? 'border-blue-500 bg-blue-50'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                  onClick={() => handleWorkflowToggle(workflow.id)}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-4">
+                      <div className="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center text-xl">
+                        {workflow.icon}
+                      </div>
+                      <div className="flex-1">
+                        <div className="flex items-center space-x-2">
+                          <h4 className="font-medium text-gray-900">{workflow.name}</h4>
+                          <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
+                            {workflow.status === 'active' ? '活跃' : '暂停'}
+                          </span>
+                        </div>
+                        <p className="text-sm text-gray-600 mt-1">{workflow.description}</p>
+                        <div className="flex items-center space-x-4 mt-2 text-xs text-gray-500">
+                          <span>执行次数: {workflow.executions}</span>
+                          <span>最后使用: {workflow.lastUsed}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-3">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          alert('工作流详情功能开发中...');
+                        }}
+                        className="p-2 text-gray-400 hover:text-gray-600 rounded-lg transition-colors cursor-pointer"
+                      >
+                        <div className="w-4 h-4 flex items-center justify-center">
+                          <i className="ri-eye-line"></i>
+                        </div>
+                      </button>
+                      <div className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
+                        selectedWorkflows.includes(workflow.id)
+                          ? 'border-blue-500 bg-blue-500'
+                          : 'border-gray-300'
+                      }`}>
+                        {selectedWorkflows.includes(workflow.id) && (
+                          <i className="ri-check-line text-white text-xs"></i>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {filteredWorkflows.length === 0 && (
+              <div className="text-center py-12">
+                <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <i className="ri-search-line text-2xl text-gray-400"></i>
+                </div>
+                <p className="text-gray-500">没有找到匹配的工作流</p>
+              </div>
+            )}
+          </div>
+          
+          <div className="space-y-6">
+            <div className="bg-white border border-gray-200 rounded-lg p-4">
+              <h4 className="font-medium text-gray-900 mb-3">已选择的工作流</h4>
+              {selectedWorkflows.length === 0 ? (
+                <p className="text-sm text-gray-500">还未选择任何工作流</p>
+              ) : (
+                <div className="space-y-2">
+                  {selectedWorkflows.map((workflowId) => {
+                    const workflow = availableWorkflows.find(w => w.id === workflowId);
+                    return workflow ? (
+                      <div key={workflowId} className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded">
+                        <div className="flex items-center space-x-2">
+                          <span className="text-sm">{workflow.icon}</span>
+                          <span className="text-sm font-medium text-gray-900">{workflow.name}</span>
+                        </div>
+                        <button
+                          onClick={() => handleWorkflowToggle(workflowId)}
+                          className="w-4 h-4 flex items-center justify-center text-gray-400 hover:text-red-600 cursor-pointer"
+                        >
+                          <i className="ri-close-line text-xs"></i>
+                        </button>
+                      </div>
+                    ) : null;
+                  })}
+                </div>
+              )}
+            </div>
+            
+            <div className="bg-white border border-gray-200 rounded-lg p-4">
+              <h4 className="font-medium text-gray-900 mb-3">工作流配置</h4>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-700">自动触发</span>
+                  <div className="w-10 h-6 bg-blue-600 rounded-full relative cursor-pointer">
+                    <div className="w-4 h-4 bg-white rounded-full absolute right-1 top-1"></div>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-700">并行执行</span>
+                  <div className="w-10 h-6 bg-gray-300 rounded-full relative cursor-pointer">
+                    <div className="w-4 h-4 bg-white rounded-full absolute left-1 top-1"></div>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-700">错误重试</span>
+                  <div className="w-10 h-6 bg-blue-600 rounded-full relative cursor-pointer">
+                    <div className="w-4 h-4 bg-white rounded-full absolute right-1 top-1"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+              <div className="flex items-start space-x-3">
+                <div className="w-5 h-5 flex items-center justify-center mt-0.5">
+                  <i className="ri-information-line text-blue-600"></i>
+                </div>
+                <div>
+                  <h4 className="font-medium text-blue-900 mb-1">使用提示</h4>
+                  <p className="text-sm text-blue-800">
+                    选择的工作流将与Agent集成，用户可以通过对话触发相应的自动化流程。建议选择与Agent功能相关的工作流。
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/agents/create/page.tsx

@@ -0,0 +1,27 @@
+
+'use client';
+
+import Header from '@/components/Header';
+import Sidebar from '@/components/Sidebar';
+import AgentBuilder from './AgentBuilder';
+
+export default function CreateAgentPage() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <div className="flex">
+        <Sidebar />
+        <main className="flex-1 p-8">
+          <div className="max-w-7xl mx-auto">
+            <div className="mb-8">
+              <h1 className="text-3xl font-bold text-gray-900 mb-2">创建新Agent</h1>
+              <p className="text-gray-600">配置和定制您的AI Agent功能</p>
+            </div>
+            
+            <AgentBuilder />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

app/agents/page.tsx

@@ -0,0 +1,40 @@
+
+'use client';
+
+import Header from '@/components/Header';
+import Sidebar from '@/components/Sidebar';
+import AgentList from './AgentList';
+import AgentFilters from './AgentFilters';
+import Link from 'next/link';
+
+export default function AgentsPage() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <div className="flex">
+        <Sidebar />
+        <main className="flex-1 p-8">
+          <div className="max-w-7xl mx-auto">
+            <div className="mb-8">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h1 className="text-3xl font-bold text-gray-900 mb-2">Agent管理</h1>
+                  <p className="text-gray-600">创建、管理和部署您的AI Agent</p>
+                </div>
+                <Link href="/agents/create" className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap">
+                  <div className="w-5 h-5 flex items-center justify-center inline-block mr-2">
+                    <i className="ri-add-line"></i>
+                  </div>
+                  创建Agent
+                </Link>
+              </div>
+            </div>
+            
+            <AgentFilters />
+            <AgentList />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

app/dashboard/ActivityFeed.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+export default function ActivityFeed() {
+  const activities = [
+    {
+      id: 1,
+      type: 'create',
+      title: '创建了新的Agent',
+      description: '智能客服助手 v2.0',
+      time: '2小时前',
+      icon: 'ri-add-circle-line',
+      color: 'blue'
+    },
+    {
+      id: 2,
+      type: 'update',
+      title: '更新了工作流',
+      description: '文档处理流程优化',
+      time: '4小时前',
+      icon: 'ri-edit-line',
+      color: 'green'
+    },
+    {
+      id: 3,
+      type: 'deploy',
+      title: '部署了Agent',
+      description: '代码生成器已上线',
+      time: '6小时前',
+      icon: 'ri-rocket-line',
+      color: 'purple'
+    },
+    {
+      id: 4,
+      type: 'upload',
+      title: '上传了知识库',
+      description: '产品文档已更新',
+      time: '8小时前',
+      icon: 'ri-upload-line',
+      color: 'orange'
+    }
+  ];
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200">
+      <div className="p-6 border-b border-gray-200">
+        <h2 className="text-lg font-semibold text-gray-900">最新动态</h2>
+      </div>
+      
+      <div className="p-6">
+        <div className="space-y-4">
+          {activities.map((activity) => (
+            <div key={activity.id} className="flex items-start space-x-4">
+              <div className={`w-8 h-8 rounded-full flex items-center justify-center bg-${activity.color}-100 mt-1`}>
+                <i className={`${activity.icon} text-sm text-${activity.color}-600`}></i>
+              </div>
+              <div className="flex-1">
+                <h4 className="font-medium text-gray-900">{activity.title}</h4>
+                <p className="text-sm text-gray-600 mt-1">{activity.description}</p>
+                <p className="text-xs text-gray-500 mt-2">{activity.time}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/dashboard/DashboardStats.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+export default function DashboardStats() {
+  const stats = [
+    {
+      title: '活跃Agent',
+      value: '12',
+      change: '+2.5%',
+      trend: 'up',
+      icon: 'ri-robot-line',
+      color: 'blue'
+    },
+    {
+      title: '今日调用',
+      value: '2,845',
+      change: '+12.3%',
+      trend: 'up',
+      icon: 'ri-rocket-line',
+      color: 'green'
+    },
+    {
+      title: '工作流运行',
+      value: '156',
+      change: '+8.7%',
+      trend: 'up',
+      icon: 'ri-flow-chart',
+      color: 'purple'
+    },
+    {
+      title: '知识库文档',
+      value: '234',
+      change: '+5.2%',
+      trend: 'up',
+      icon: 'ri-database-line',
+      color: 'orange'
+    }
+  ];
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      {stats.map((stat, index) => (
+        <div key={index} className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-gray-600">{stat.title}</p>
+              <p className="text-2xl font-bold text-gray-900 mt-1">{stat.value}</p>
+            </div>
+            <div className={`w-12 h-12 rounded-lg flex items-center justify-center bg-${stat.color}-100`}>
+              <i className={`${stat.icon} text-xl text-${stat.color}-600`}></i>
+            </div>
+          </div>
+          <div className="mt-4 flex items-center">
+            <div className="w-4 h-4 flex items-center justify-center">
+              <i className="ri-arrow-up-line text-green-500 text-sm"></i>
+            </div>
+            <span className="text-sm text-green-600 ml-1">{stat.change}</span>
+            <span className="text-sm text-gray-500 ml-2">较上周</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

app/dashboard/QuickActions.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import Link from 'next/link';
+
+export default function QuickActions() {
+  const actions = [
+    {
+      title: '创建Agent',
+      description: '从零开始构建新的AI Agent',
+      icon: 'ri-add-circle-line',
+      href: '/agents/create',
+      color: 'blue'
+    },
+    {
+      title: '导入模板',
+      description: '使用预设模板快速开始',
+      icon: 'ri-download-line',
+      href: '/templates',
+      color: 'green'
+    },
+    {
+      title: '创建工作流',
+      description: '设计复杂的自动化流程',
+      icon: 'ri-flow-chart',
+      href: '/workflows/create',
+      color: 'purple'
+    },
+    {
+      title: '上传知识库',
+      description: '添加文档和数据源',
+      icon: 'ri-upload-line',
+      href: '/knowledge/upload',
+      color: 'orange'
+    }
+  ];
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200">
+      <div className="p-6 border-b border-gray-200">
+        <h2 className="text-lg font-semibold text-gray-900">快速操作</h2>
+      </div>
+      
+      <div className="p-6">
+        <div className="space-y-4">
+          {actions.map((action, index) => (
+            <Link
+              key={index}
+              href={action.href}
+              className="flex items-center space-x-4 p-4 hover:bg-gray-50 rounded-lg cursor-pointer transition-colors"
+            >
+              <div className={`w-10 h-10 rounded-lg flex items-center justify-center bg-${action.color}-100`}>
+                <i className={`${action.icon} text-lg text-${action.color}-600`}></i>
+              </div>
+              <div>
+                <h3 className="font-medium text-gray-900">{action.title}</h3>
+                <p className="text-sm text-gray-500">{action.description}</p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/dashboard/RecentAgents.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import Link from 'next/link';
+
+export default function RecentAgents() {
+  const agents = [
+    {
+      id: 1,
+      name: '智能客服助手',
+      type: '对话型',
+      status: '运行中',
+      lastUsed: '2分钟前',
+      calls: 245,
+      avatar: '🤖'
+    },
+    {
+      id: 2,
+      name: '文档分析器',
+      type: '分析型',
+      status: '运行中',
+      lastUsed: '15分钟前',
+      calls: 128,
+      avatar: '📄'
+    },
+    {
+      id: 3,
+      name: '代码生成器',
+      type: '生成型',
+      status: '暂停',
+      lastUsed: '1小时前',
+      calls: 89,
+      avatar: '💻'
+    },
+    {
+      id: 4,
+      name: '数据可视化',
+      type: '图表型',
+      status: '运行中',
+      lastUsed: '30分钟前',
+      calls: 67,
+      avatar: '📊'
+    }
+  ];
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200">
+      <div className="p-6 border-b border-gray-200">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-gray-900">最近使用的Agent</h2>
+          <Link href="/agents" className="text-blue-600 hover:text-blue-700 text-sm font-medium cursor-pointer">
+            查看全部
+          </Link>
+        </div>
+      </div>
+      
+      <div className="p-6">
+        <div className="space-y-4">
+          {agents.map((agent) => (
+            <div key={agent.id} className="flex items-center justify-between p-4 hover:bg-gray-50 rounded-lg cursor-pointer">
+              <div className="flex items-center space-x-4">
+                <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+                  <span className="text-lg">{agent.avatar}</span>
+                </div>
+                <div>
+                  <h3 className="font-medium text-gray-900">{agent.name}</h3>
+                  <div className="flex items-center space-x-4 mt-1">
+                    <span className="text-sm text-gray-500">{agent.type}</span>
+                    <span className={`px-2 py-1 text-xs rounded-full ${
+                      agent.status === '运行中' 
+                        ? 'bg-green-100 text-green-800' 
+                        : 'bg-yellow-100 text-yellow-800'
+                    }`}>
+                      {agent.status}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="text-right">
+                <p className="text-sm font-medium text-gray-900">{agent.calls} 次调用</p>
+                <p className="text-xs text-gray-500">{agent.lastUsed}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/dashboard/page.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import Header from '@/components/Header';
+import Sidebar from '@/components/Sidebar';
+import DashboardStats from './DashboardStats';
+import RecentAgents from './RecentAgents';
+import ActivityFeed from './ActivityFeed';
+import QuickActions from './QuickActions';
+
+export default function DashboardPage() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <div className="flex">
+        <Sidebar />
+        <main className="flex-1 p-8">
+          <div className="max-w-7xl mx-auto">
+            <div className="mb-8">
+              <h1 className="text-3xl font-bold text-gray-900 mb-2">工作台</h1>
+              <p className="text-gray-600">管理您的AI Agent应用和工作流</p>
+            </div>
+            
+            <DashboardStats />
+            
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
+              <div className="lg:col-span-2">
+                <RecentAgents />
+              </div>
+              <div>
+                <QuickActions />
+                <div className="mt-8">
+                  <ActivityFeed />
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -0,0 +1,4 @@
+@import url('https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.5.0/remixicon.min.css');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/knowledge/KnowledgeFilters.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function KnowledgeFilters() {
+  const [activeCategory, setActiveCategory] = useState('all');
+  const [activeStatus, setActiveStatus] = useState('all');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortBy, setSortBy] = useState('lastUpdated');
+
+  const categories = [
+    { key: 'all', label: '全部分类', count: 6 },
+    { key: 'general', label: '通用', count: 1 },
+    { key: 'tech', label: '技术', count: 1 },
+    { key: 'product', label: '产品', count: 1 },
+    { key: 'service', label: '客服', count: 1 },
+    { key: 'legal', label: '法务', count: 1 },
+    { key: 'sales', label: '销售', count: 1 }
+  ];
+
+  const statuses = [
+    { key: 'all', label: '全部状态' },
+    { key: 'active', label: '运行中' },
+    { key: 'inactive', label: '已停用' },
+    { key: 'updating', label: '更新中' }
+  ];
+
+  const sortOptions = [
+    { key: 'lastUpdated', label: '最后更新' },
+    { key: 'name', label: '名称' },
+    { key: 'items', label: '内容数量' },
+    { key: 'usage', label: '使用次数' },
+    { key: 'size', label: '文件大小' }
+  ];
+
+  return (
+    <div className="bg-white border border-gray-200 rounded-lg p-6 mb-6">
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        {/* 搜索 */}
+        <div className="lg:col-span-1">
+          <div className="relative">
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <div className="w-4 h-4 flex items-center justify-center">
+                <i className="ri-search-line text-gray-400"></i>
+              </div>
+            </div>
+            <input
+              type="text"
+              placeholder="搜索知识库..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+            />
+          </div>
+        </div>
+
+        {/* 分类筛选 */}
+        <div className="lg:col-span-1">
+          <select
+            value={activeCategory}
+            onChange={(e) => setActiveCategory(e.target.value)}
+            className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white pr-8"
+          >
+            {categories.map((category) => (
+              <option key={category.key} value={category.key}>
+                {category.label} ({category.count})
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* 状态筛选 */}
+        <div className="lg:col-span-1">
+          <select
+            value={activeStatus}
+            onChange={(e) => setActiveStatus(e.target.value)}
+            className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white pr-8"
+          >
+            {statuses.map((status) => (
+              <option key={status.key} value={status.key}>
+                {status.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* 排序 */}
+        <div className="lg:col-span-1">
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value)}
+            className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white pr-8"
+          >
+            {sortOptions.map((option) => (
+              <option key={option.key} value={option.key}>
+                按{option.label}排序
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* 快速标签 */}
+      <div className="mt-4 pt-4 border-t border-gray-200">
+        <div className="flex items-center space-x-2">
+          <span className="text-sm text-gray-600">快速筛选：</span>
+          <div className="flex flex-wrap gap-2">
+            {['默认知识库', '高使用率', '最近更新', '大容量', '技术相关'].map((tag) => (
+              <button
+                key={tag}
+                className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full hover:bg-gray-200 transition-colors cursor-pointer whitespace-nowrap"
+              >
+                {tag}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/knowledge/KnowledgeLibrary.tsx

@@ -0,0 +1,383 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+
+export default function KnowledgeLibrary() {
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [selectedKnowledgeBases, setSelectedKnowledgeBases] = useState<string[]>([]);
+
+  const knowledgeBases = [
+    {
+      id: 'kb-001',
+      name: '通用知识库',
+      description: '包含基础常识和通用信息，适用于大多数场景的问答需求',
+      category: '通用',
+      items: 1240,
+      size: '15.6 MB',
+      status: 'active',
+      lastUpdated: '2024-01-15',
+      creator: '系统默认',
+      isDefault: true,
+      usage: 856,
+      tags: ['通用', '基础', '默认']
+    },
+    {
+      id: 'kb-002',
+      name: '技术文档库',
+      description: '收录了各种技术文档、API说明和开发指南，为技术问题提供专业解答',
+      category: '技术',
+      items: 567,
+      size: '8.3 MB',
+      status: 'active',
+      lastUpdated: '2024-01-14',
+      creator: '张工程师',
+      isDefault: false,
+      usage: 423,
+      tags: ['技术', 'API', '开发']
+    },
+    {
+      id: 'kb-003',
+      name: '产品说明库',
+      description: '产品功能介绍、使用手册和操作指南，帮助用户更好地了解产品特性',
+      category: '产品',
+      items: 892,
+      size: '12.1 MB',
+      status: 'active',
+      lastUpdated: '2024-01-13',
+      creator: '李产品经理',
+      isDefault: false,
+      usage: 678,
+      tags: ['产品', '手册', '功能']
+    },
+    {
+      id: 'kb-004',
+      name: '客服问答库',
+      description: '客服常见问题和标准解答，提升客户服务效率和质量',
+      category: '客服',
+      items: 345,
+      size: '4.2 MB',
+      status: 'active',
+      lastUpdated: '2024-01-12',
+      creator: '王客服主管',
+      isDefault: false,
+      usage: 234,
+      tags: ['客服', '问答', 'FAQ']
+    },
+    {
+      id: 'kb-005',
+      name: '法律法规库',
+      description: '相关法律条文、政策解读和合规要求，确保业务合规运营',
+      category: '法务',
+      items: 178,
+      size: '6.8 MB',
+      status: 'active',
+      lastUpdated: '2024-01-11',
+      creator: '赵法务',
+      isDefault: false,
+      usage: 89,
+      tags: ['法律', '合规', '政策']
+    },
+    {
+      id: 'kb-006',
+      name: '销售话术库',
+      description: '销售技巧、话术模板和客户案例，提升销售团队的专业水平',
+      category: '销售',
+      items: 456,
+      size: '5.9 MB',
+      status: 'inactive',
+      lastUpdated: '2024-01-10',
+      creator: '陈销售总监',
+      isDefault: false,
+      usage: 156,
+      tags: ['销售', '话术', '案例']
+    }
+  ];
+
+  const toggleSelection = (id: string) => {
+    setSelectedKnowledgeBases(prev => 
+      prev.includes(id) 
+        ? prev.filter(kbId => kbId !== id)
+        : [...prev, id]
+    );
+  };
+
+  const selectAll = () => {
+    setSelectedKnowledgeBases(knowledgeBases.map(kb => kb.id));
+  };
+
+  const clearSelection = () => {
+    setSelectedKnowledgeBases([]);
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'active':
+        return 'bg-green-100 text-green-800';
+      case 'inactive':
+        return 'bg-red-100 text-red-800';
+      case 'updating':
+        return 'bg-yellow-100 text-yellow-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'active':
+        return '运行中';
+      case 'inactive':
+        return '已停用';
+      case 'updating':
+        return '更新中';
+      default:
+        return '未知';
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 操作栏 */}
+      <div className="bg-white border border-gray-200 rounded-lg p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-4">
+            <div className="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                checked={selectedKnowledgeBases.length === knowledgeBases.length}
+                onChange={(e) => e.target.checked ? selectAll() : clearSelection()}
+                className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+              />
+              <span className="text-sm text-gray-600">
+                {selectedKnowledgeBases.length > 0 
+                  ? `已选择 ${selectedKnowledgeBases.length} 个知识库`
+                  : '全选'
+                }
+              </span>
+            </div>
+            
+            {selectedKnowledgeBases.length > 0 && (
+              <div className="flex items-center space-x-2">
+                <button className="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors cursor-pointer whitespace-nowrap">
+                  批量启用
+                </button>
+                <button className="px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors cursor-pointer whitespace-nowrap">
+                  批量停用
+                </button>
+                <button className="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors cursor-pointer whitespace-nowrap">
+                  批量删除
+                </button>
+              </div>
+            )}
+          </div>
+          
+          <div className="flex items-center space-x-2">
+            <button
+              onClick={() => setViewMode('grid')}
+              className={`p-2 rounded ${viewMode === 'grid' ? 'bg-blue-100 text-blue-600' : 'text-gray-400 hover:text-gray-600'} transition-colors cursor-pointer`}
+            >
+              <div className="w-4 h-4 flex items-center justify-center">
+                <i className="ri-layout-grid-line"></i>
+              </div>
+            </button>
+            <button
+              onClick={() => setViewMode('list')}
+              className={`p-2 rounded ${viewMode === 'list' ? 'bg-blue-100 text-blue-600' : 'text-gray-400 hover:text-gray-600'} transition-colors cursor-pointer`}
+            >
+              <div className="w-4 h-4 flex items-center justify-center">
+                <i className="ri-list-unordered"></i>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 知识库列表 */}
+      {viewMode === 'grid' ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {knowledgeBases.map((kb) => (
+            <div key={kb.id} className="bg-white border border-gray-200 rounded-lg hover:shadow-md transition-all duration-200">
+              <div className="p-6">
+                <div className="flex items-start justify-between mb-4">
+                  <div className="flex items-center space-x-3">
+                    <input
+                      type="checkbox"
+                      checked={selectedKnowledgeBases.includes(kb.id)}
+                      onChange={() => toggleSelection(kb.id)}
+                      className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                    />
+                    <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                      <i className="ri-book-line text-xl text-white"></i>
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center space-x-2">
+                        <h3 className="font-semibold text-gray-900">{kb.name}</h3>
+                        {kb.isDefault && (
+                          <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">默认</span>
+                        )}
+                      </div>
+                      <span className={`inline-block px-2 py-1 text-xs rounded-full mt-1 ${getStatusColor(kb.status)}`}>
+                        {getStatusText(kb.status)}
+                      </span>
+                    </div>
+                  </div>
+                  
+                  <div className="relative">
+                    <button className="p-2 text-gray-400 hover:text-gray-600 transition-colors cursor-pointer">
+                      <div className="w-4 h-4 flex items-center justify-center">
+                        <i className="ri-more-line"></i>
+                      </div>
+                    </button>
+                  </div>
+                </div>
+                
+                <p className="text-gray-600 text-sm mb-4 line-clamp-3">{kb.description}</p>
+                
+                <div className="space-y-3 mb-4">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-gray-500">内容条目</span>
+                    <span className="font-medium text-gray-900">{kb.items.toLocaleString()}</span>
+                  </div>
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-gray-500">存储大小</span>
+                    <span className="font-medium text-gray-900">{kb.size}</span>
+                  </div>
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-gray-500">使用次数</span>
+                    <span className="font-medium text-gray-900">{kb.usage.toLocaleString()}</span>
+                  </div>
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-gray-500">最后更新</span>
+                    <span className="font-medium text-gray-900">{kb.lastUpdated}</span>
+                  </div>
+                </div>
+                
+                <div className="flex flex-wrap gap-1 mb-4">
+                  {kb.tags.map((tag, index) => (
+                    <span key={index} className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+                
+                <div className="flex items-center justify-between pt-4 border-t border-gray-200">
+                  <div className="flex items-center space-x-2">
+                    <div className="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center">
+                      <i className="ri-user-line text-xs text-gray-600"></i>
+                    </div>
+                    <span className="text-xs text-gray-500">{kb.creator}</span>
+                  </div>
+                  
+                  <div className="flex items-center space-x-2">
+                    <Link 
+                      href={`/knowledge/${kb.id}`}
+                      className="px-3 py-1 bg-blue-100 text-blue-700 text-xs rounded hover:bg-blue-200 transition-colors cursor-pointer whitespace-nowrap"
+                    >
+                      查看详情
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-gray-50 border-b border-gray-200">
+                <tr>
+                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    <input
+                      type="checkbox"
+                      checked={selectedKnowledgeBases.length === knowledgeBases.length}
+                      onChange={(e) => e.target.checked ? selectAll() : clearSelection()}
+                      className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                    />
+                  </th>
+                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
+                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分类</th>
+                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">条目数</th>
+                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">大小</th>
+                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">使用次数</th>
+                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
+                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最后更新</th>
+                  <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {knowledgeBases.map((kb) => (
+                  <tr key={kb.id} className="hover:bg-gray-50 transition-colors">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <input
+                        type="checkbox"
+                        checked={selectedKnowledgeBases.includes(kb.id)}
+                        onChange={() => toggleSelection(kb.id)}
+                        className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                      />
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center">
+                        <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mr-3">
+                          <i className="ri-book-line text-white"></i>
+                        </div>
+                        <div>
+                          <div className="flex items-center space-x-2">
+                            <div className="text-sm font-medium text-gray-900">{kb.name}</div>
+                            {kb.isDefault && (
+                              <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">默认</span>
+                            )}
+                          </div>
+                          <div className="text-sm text-gray-500 max-w-xs truncate">{kb.description}</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{kb.category}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{kb.items.toLocaleString()}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{kb.size}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{kb.usage.toLocaleString()}</td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(kb.status)}`}>
+                        {getStatusText(kb.status)}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{kb.lastUpdated}</td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                      <div className="flex items-center space-x-3">
+                        <Link 
+                          href={`/knowledge/${kb.id}`}
+                          className="text-blue-600 hover:text-blue-900 cursor-pointer"
+                        >
+                          查看
+                        </Link>
+                        <button className="text-gray-600 hover:text-gray-900 cursor-pointer">编辑</button>
+                        <button className="text-red-600 hover:text-red-900 cursor-pointer">删除</button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* 分页 */}
+      <div className="flex items-center justify-between">
+        <div className="text-sm text-gray-500">
+          共 {knowledgeBases.length} 个知识库
+        </div>
+        <div className="flex items-center space-x-2">
+          <button className="px-3 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap text-sm">
+            上一页
+          </button>
+          <span className="px-3 py-2 bg-blue-600 text-white rounded-lg text-sm">1</span>
+          <button className="px-3 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap text-sm">
+            下一页
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/knowledge/create/KnowledgeBuilder.tsx

@@ -0,0 +1,549 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function KnowledgeBuilder() {
+  const router = useRouter();
+  const [currentStep, setCurrentStep] = useState(0);
+  const [knowledgeData, setKnowledgeData] = useState({
+    name: '',
+    description: '',
+    category: 'general',
+    isPublic: false,
+    tags: [],
+    files: [],
+    webSources: [],
+    manualContent: '',
+    processingSettings: {
+      autoChunk: true,
+      smartDedup: true,
+      generateSummary: false,
+      chunkSize: 1000,
+      overlap: 200
+    }
+  });
+
+  const [uploadedFiles, setUploadedFiles] = useState([]);
+  const [webSources, setWebSources] = useState([]);
+  const [newUrl, setNewUrl] = useState('');
+  const [activeTab, setActiveTab] = useState('files');
+
+  const steps = [
+    { id: 0, name: '基本信息', icon: 'ri-information-line' },
+    { id: 1, name: '内容添加', icon: 'ri-file-add-line' },
+    { id: 2, name: '处理配置', icon: 'ri-settings-3-line' },
+    { id: 3, name: '预览测试', icon: 'ri-eye-line' }
+  ];
+
+  const categories = [
+    { key: 'general', label: '通用知识', icon: 'ri-book-line' },
+    { key: 'tech', label: '技术文档', icon: 'ri-code-line' },
+    { key: 'product', label: '产品说明', icon: 'ri-product-hunt-line' },
+    { key: 'service', label: '客服问答', icon: 'ri-customer-service-line' },
+    { key: 'legal', label: '法务合规', icon: 'ri-scales-line' },
+    { key: 'sales', label: '销售材料', icon: 'ri-line-chart-line' }
+  ];
+
+  const handleNext = () => {
+    if (currentStep < steps.length - 1) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const handlePrev = () => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const handleSave = () => {
+    console.log('保存知识库:', knowledgeData);
+    router.push('/knowledge');
+  };
+
+  const handlePublish = () => {
+    console.log('发布知识库:', knowledgeData);
+    router.push('/knowledge');
+  };
+
+  const handleFileUpload = (event) => {
+    const files = Array.from(event.target.files || []);
+    const newFiles = files.map((file, index) => ({
+      id: uploadedFiles.length + index + 1,
+      name: file.name,
+      size: `${(file.size / 1024 / 1024).toFixed(1)} MB`,
+      status: 'uploading',
+      type: file.name.split('.').pop() || 'unknown',
+      chunks: 0,
+      lastModified: new Date().toISOString().split('T')[0]
+    }));
+    
+    setUploadedFiles([...uploadedFiles, ...newFiles]);
+    
+    setTimeout(() => {
+      setUploadedFiles(prev => prev.map(file => 
+        newFiles.some(nf => nf.id === file.id) 
+          ? { ...file, status: 'uploaded', chunks: Math.floor(Math.random() * 50) + 10 }
+          : file
+      ));
+    }, 2000);
+  };
+
+  const addWebSource = () => {
+    if (newUrl) {
+      const newSource = {
+        id: webSources.length + 1,
+        url: newUrl,
+        title: '正在获取标题...',
+        status: 'crawling',
+        pages: 0,
+        lastUpdate: new Date().toISOString().split('T')[0]
+      };
+      setWebSources([...webSources, newSource]);
+      setNewUrl('');
+      
+      setTimeout(() => {
+        setWebSources(prev => prev.map(source => 
+          source.id === newSource.id 
+            ? { ...source, status: 'crawled', title: `${newUrl.split('/')[2]} - 文档`, pages: Math.floor(Math.random() * 20) + 5 }
+            : source
+        ));
+      }, 3000);
+    }
+  };
+
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 0:
+        return (
+          <div className="space-y-6">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <div className="space-y-6">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">知识库名称</label>
+                  <input
+                    type="text"
+                    placeholder="输入知识库名称..."
+                    value={knowledgeData.name}
+                    onChange={(e) => setKnowledgeData({...knowledgeData, name: e.target.value})}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">描述说明</label>
+                  <textarea
+                    placeholder="描述知识库的用途和内容范围..."
+                    rows={4}
+                    maxLength={500}
+                    value={knowledgeData.description}
+                    onChange={(e) => setKnowledgeData({...knowledgeData, description: e.target.value})}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
+                  />
+                  <div className="text-xs text-gray-500 mt-1">{knowledgeData.description.length}/500 字符</div>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-3">知识库分类</label>
+                  <div className="grid grid-cols-2 gap-3">
+                    {categories.map((category) => (
+                      <div
+                        key={category.key}
+                        onClick={() => setKnowledgeData({...knowledgeData, category: category.key})}
+                        className={`p-4 border rounded-lg cursor-pointer transition-all ${
+                          knowledgeData.category === category.key
+                            ? 'border-blue-500 bg-blue-50'
+                            : 'border-gray-200 hover:border-gray-300'
+                        }`}
+                      >
+                        <div className="flex items-center space-x-3">
+                          <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
+                            <i className={`${category.icon} text-blue-600`}></i>
+                          </div>
+                          <span className="font-medium text-gray-900">{category.label}</span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-6">
+                <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
+                  <div className="flex items-start space-x-3">
+                    <div className="w-6 h-6 flex items-center justify-center mt-0.5">
+                      <i className="ri-lightbulb-line text-blue-600"></i>
+                    </div>
+                    <div>
+                      <h4 className="font-medium text-blue-900 mb-2">创建建议</h4>
+                      <ul className="text-sm text-blue-800 space-y-1">
+                        <li>• 选择描述性强的名称，便于后续查找</li>
+                        <li>• 详细描述知识库的应用场景</li>
+                        <li>• 根据内容类型选择合适的分类</li>
+                        <li>• 考虑知识库的长期维护和更新</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="border border-gray-200 rounded-lg p-6">
+                  <h4 className="font-medium text-gray-900 mb-4">权限设置</h4>
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className="font-medium text-gray-900">公开知识库</div>
+                        <div className="text-sm text-gray-500">其他用户可以查看和使用此知识库</div>
+                      </div>
+                      <div 
+                        onClick={() => setKnowledgeData({...knowledgeData, isPublic: !knowledgeData.isPublic})}
+                        className={`w-10 h-6 rounded-full relative cursor-pointer transition-colors ${
+                          knowledgeData.isPublic ? 'bg-blue-600' : 'bg-gray-300'
+                        }`}
+                      >
+                        <div className={`w-4 h-4 bg-white rounded-full absolute top-1 transition-transform ${
+                          knowledgeData.isPublic ? 'right-1' : 'left-1'
+                        }`}></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 1:
+        return (
+          <div className="space-y-6">
+            <div className="bg-white border border-gray-200 rounded-lg">
+              <div className="border-b border-gray-200">
+                <div className="flex space-x-0">
+                  {[
+                    { key: 'files', label: '文件上传', icon: 'ri-file-line' },
+                    { key: 'web', label: '网页抓取', icon: 'ri-global-line' },
+                    { key: 'manual', label: '手动输入', icon: 'ri-edit-line' }
+                  ].map((tab) => (
+                    <button
+                      key={tab.key}
+                      onClick={() => setActiveTab(tab.key)}
+                      className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
+                        activeTab === tab.key
+                          ? 'border-blue-500 text-blue-600 bg-blue-50'
+                          : 'border-transparent text-gray-500 hover:text-gray-700'
+                      }`}
+                    >
+                      <div className="w-4 h-4 flex items-center justify-center inline-block mr-2">
+                        <i className={tab.icon}></i>
+                      </div>
+                      {tab.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              
+              <div className="p-6">
+                {activeTab === 'files' && (
+                  <div className="space-y-4">
+                    <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors">
+                      <div className="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-4">
+                        <i className="ri-upload-cloud-line text-2xl text-gray-400"></i>
+                      </div>
+                      <p className="text-lg text-gray-600 mb-2">拖拽文件到此处，或者</p>
+                      <label className="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg cursor-pointer hover:bg-blue-700 transition-colors">
+                        选择文件
+                        <input
+                          type="file"
+                          multiple
+                          accept=".pdf,.doc,.docx,.txt,.md,.csv,.xlsx"
+                          onChange={handleFileUpload}
+                          className="hidden"
+                        />
+                      </label>
+                      <p className="text-sm text-gray-500 mt-4">支持 PDF、DOC、DOCX、TXT、MD、CSV、XLSX 格式，单文件最大 50MB</p>
+                    </div>
+                  </div>
+                )}
+                
+                {activeTab === 'web' && (
+                  <div className="space-y-6">
+                    <div className="flex space-x-3">
+                      <input
+                        type="url"
+                        placeholder="输入要抓取的网址（如：https://docs.example.com）"
+                        value={newUrl}
+                        onChange={(e) => setNewUrl(e.target.value)}
+                        className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      />
+                      <button 
+                        onClick={addWebSource}
+                        className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap"
+                      >
+                        开始抓取
+                      </button>
+                    </div>
+                    <div className="text-sm text-gray-500 space-y-1">
+                      <p>• 支持抓取文档站点、博客文章、产品页面等</p>
+                      <p>• 自动识别并提取页面文本内容</p>
+                      <p>• 支持批量抓取同站点多个页面</p>
+                    </div>
+                  </div>
+                )}
+                
+                {activeTab === 'manual' && (
+                  <div className="space-y-4">
+                    <textarea
+                      placeholder="直接输入要添加到知识库的内容...&#10;&#10;您可以添加：&#10;• 产品使用说明和操作指南&#10;• 常见问题及详细解答&#10;• 专业术语和概念解释&#10;• 业务流程和规范文档"
+                      rows={12}
+                      maxLength={500}
+                      value={knowledgeData.manualContent}
+                      onChange={(e) => setKnowledgeData({...knowledgeData, manualContent: e.target.value})}
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
+                    />
+                    <div className="flex items-center justify-between">
+                      <div className="text-sm text-gray-500">{knowledgeData.manualContent.length}/500 字符</div>
+                      <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap">
+                        添加内容
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+
+      case 2:
+        return (
+          <div className="space-y-6">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+              <div className="bg-white border border-gray-200 rounded-lg p-6">
+                <h4 className="font-medium text-gray-900 mb-4">处理选项</h4>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <span className="font-medium text-gray-900">自动分块处理</span>
+                      <p className="text-sm text-gray-500">将长文档自动分割为合适大小的片段</p>
+                    </div>
+                    <div 
+                      onClick={() => setKnowledgeData(prev => ({
+                        ...prev, 
+                        processingSettings: {...prev.processingSettings, autoChunk: !prev.processingSettings.autoChunk}
+                      }))}
+                      className={`w-10 h-6 rounded-full relative cursor-pointer transition-colors ${
+                        knowledgeData.processingSettings.autoChunk ? 'bg-blue-600' : 'bg-gray-300'
+                      }`}
+                    >
+                      <div className={`w-4 h-4 bg-white rounded-full absolute top-1 transition-transform ${
+                        knowledgeData.processingSettings.autoChunk ? 'right-1' : 'left-1'
+                      }`}></div>
+                    </div>
+                  </div>
+                  
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <span className="font-medium text-gray-900">智能去重</span>
+                      <p className="text-sm text-gray-500">自动识别并合并重复或相似内容</p>
+                    </div>
+                    <div 
+                      onClick={() => setKnowledgeData(prev => ({
+                        ...prev, 
+                        processingSettings: {...prev.processingSettings, smartDedup: !prev.processingSettings.smartDedup}
+                      }))}
+                      className={`w-10 h-6 rounded-full relative cursor-pointer transition-colors ${
+                        knowledgeData.processingSettings.smartDedup ? 'bg-blue-600' : 'bg-gray-300'
+                      }`}
+                    >
+                      <div className={`w-4 h-4 bg-white rounded-full absolute top-1 transition-transform ${
+                        knowledgeData.processingSettings.smartDedup ? 'right-1' : 'left-1'
+                      }`}></div>
+                    </div>
+                  </div>
+                  
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <span className="font-medium text-gray-900">生成摘要</span>
+                      <p className="text-sm text-gray-500">为每个内容片段生成简要摘要</p>
+                    </div>
+                    <div 
+                      onClick={() => setKnowledgeData(prev => ({
+                        ...prev, 
+                        processingSettings: {...prev.processingSettings, generateSummary: !prev.processingSettings.generateSummary}
+                      }))}
+                      className={`w-10 h-6 rounded-full relative cursor-pointer transition-colors ${
+                        knowledgeData.processingSettings.generateSummary ? 'bg-blue-600' : 'bg-gray-300'
+                      }`}
+                    >
+                      <div className={`w-4 h-4 bg-white rounded-full absolute top-1 transition-transform ${
+                        knowledgeData.processingSettings.generateSummary ? 'right-1' : 'left-1'
+                      }`}></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-white border border-gray-200 rounded-lg p-6">
+                <h4 className="font-medium text-gray-900 mb-4">参数设置</h4>
+                <div className="space-y-6">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      分块大小: {knowledgeData.processingSettings.chunkSize} 字符
+                    </label>
+                    <input
+                      type="range"
+                      min="500"
+                      max="2000"
+                      step="100"
+                      value={knowledgeData.processingSettings.chunkSize}
+                      onChange={(e) => setKnowledgeData(prev => ({
+                        ...prev, 
+                        processingSettings: {...prev.processingSettings, chunkSize: parseInt(e.target.value)}
+                      }))}
+                      className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+                    />
+                    <div className="flex justify-between text-xs text-gray-500 mt-1">
+                      <span>500</span>
+                      <span>2000</span>
+                    </div>
+                  </div>
+                  
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      重叠字符: {knowledgeData.processingSettings.overlap}
+                    </label>
+                    <input
+                      type="range"
+                      min="0"
+                      max="500"
+                      step="50"
+                      value={knowledgeData.processingSettings.overlap}
+                      onChange={(e) => setKnowledgeData(prev => ({
+                        ...prev, 
+                        processingSettings: {...prev.processingSettings, overlap: parseInt(e.target.value)}
+                      }))}
+                      className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+                    />
+                    <div className="flex justify-between text-xs text-gray-500 mt-1">
+                      <span>0</span>
+                      <span>500</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 3:
+        return (
+          <div className="space-y-6">
+            <div className="bg-white border border-gray-200 rounded-lg p-6">
+              <h4 className="font-medium text-gray-900 mb-4">知识库预览</h4>
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div className="space-y-4">
+                  <div className="p-4 bg-gray-50 rounded-lg">
+                    <div className="text-sm text-gray-600 mb-2">基本信息</div>
+                    <div className="space-y-2">
+                      <div><span className="font-medium">名称：</span>{knowledgeData.name || '未设置'}</div>
+                      <div><span className="font-medium">分类：</span>{categories.find(c => c.key === knowledgeData.category)?.label}</div>
+                      <div><span className="font-medium">描述：</span>{knowledgeData.description || '无描述'}</div>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="space-y-4">
+                  <div className="p-4 bg-gray-50 rounded-lg">
+                    <div className="text-sm text-gray-600 mb-2">内容统计</div>
+                    <div className="space-y-2">
+                      <div><span className="font-medium">文档数量：</span>{uploadedFiles.length} 个</div>
+                      <div><span className="font-medium">网页来源：</span>{webSources.length} 个</div>
+                      <div><span className="font-medium">总分块数：</span>{uploadedFiles.reduce((sum, file) => sum + file.chunks, 0)} 个</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200">
+      {/* 步骤导航 */}
+      <div className="p-6 border-b border-gray-200">
+        <div className="flex items-center justify-between">
+          {steps.map((step, index) => (
+            <div key={step.id} className="flex items-center">
+              <div className={`flex items-center space-x-3 px-4 py-2 rounded-lg cursor-pointer transition-colors ${
+                currentStep === index 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : currentStep > index 
+                    ? 'bg-green-100 text-green-700'
+                    : 'text-gray-500'
+              }`} onClick={() => setCurrentStep(index)}>
+                <div className="w-6 h-6 flex items-center justify-center">
+                  <i className={step.icon}></i>
+                </div>
+                <span className="font-medium">{step.name}</span>
+              </div>
+              {index < steps.length - 1 && (
+                <div className="mx-4 w-8 h-px bg-gray-300"></div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* 步骤内容 */}
+      <div className="p-8">
+        {renderStepContent()}
+      </div>
+
+      {/* 底部操作按钮 */}
+      <div className="p-6 border-t border-gray-200 flex items-center justify-between">
+        <div className="flex space-x-3">
+          {currentStep > 0 && (
+            <button
+              onClick={handlePrev}
+              className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap"
+            >
+              上一步
+            </button>
+          )}
+        </div>
+        
+        <div className="flex space-x-3">
+          <button
+            onClick={handleSave}
+            className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap"
+          >
+            保存草稿
+          </button>
+          
+          {currentStep < steps.length - 1 ? (
+            <button
+              onClick={handleNext}
+              className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap"
+            >
+              下一步
+            </button>
+          ) : (
+            <button
+              onClick={handlePublish}
+              className="bg-green-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-700 transition-colors cursor-pointer whitespace-nowrap"
+            >
+              <div className="w-5 h-5 flex items-center justify-center inline-block mr-2">
+                <i className="ri-check-line"></i>
+              </div>
+              创建知识库
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

app/knowledge/create/page.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import Header from '@/components/Header';
+import Sidebar from '@/components/Sidebar';
+import KnowledgeBuilder from './KnowledgeBuilder';
+
+export default function CreateKnowledgePage() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <div className="flex">
+        <Sidebar />
+        <main className="flex-1 p-8">
+          <div className="max-w-7xl mx-auto">
+            <div className="mb-8">
+              <h1 className="text-3xl font-bold text-gray-900 mb-2">创建知识库</h1>
+              <p className="text-gray-600">构建专业的知识体系，为AI提供准确的信息支持</p>
+            </div>
+            
+            <KnowledgeBuilder />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

app/knowledge/page.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import Header from '@/components/Header';
+import Sidebar from '@/components/Sidebar';
+import KnowledgeLibrary from './KnowledgeLibrary';
+import KnowledgeFilters from './KnowledgeFilters';
+import Link from 'next/link';
+
+export default function KnowledgePage() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <div className="flex">
+        <Sidebar />
+        <main className="flex-1 p-8">
+          <div className="max-w-7xl mx-auto">
+            <div className="mb-8">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h1 className="text-3xl font-bold text-gray-900 mb-2">知识库管理</h1>
+                  <p className="text-gray-600">管理和组织您的知识内容，为AI提供专业知识支持</p>
+                </div>
+                <div className="flex space-x-3">
+                  <Link href="/knowledge/create" className="border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap">
+                    <div className="w-5 h-5 flex items-center justify-center inline-block mr-2">
+                      <i className="ri-upload-line"></i>
+                    </div>
+                    批量导入
+                  </Link>
+                  <Link href="/knowledge/create" className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap">
+                    <div className="w-5 h-5 flex items-center justify-center inline-block mr-2">
+                      <i className="ri-add-line"></i>
+                    </div>
+                    新建知识库
+                  </Link>
+                </div>
+              </div>
+            </div>
+            
+            <KnowledgeFilters />
+            <KnowledgeLibrary />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

app/layout.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono, Pacifico } from "next/font/google";
+import "./globals.css";
+
+const pacifico = Pacifico({
+  weight: '400',
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-pacifico',
+})
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Readdy Site",
+  description: "Generated by Readdy",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning={true}>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} ${pacifico.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

app/not-found.tsx

@@ -0,0 +1,9 @@
+export default function NotFound() {
+    return (
+      <div className="flex flex-col items-center justify-center h-screen text-center px-4">
+        <h1 className="text-5xl md:text-5xl font-semibold text-gray-100">404</h1>
+        <h1 className="text-2xl md:text-3xl font-semibold mt-6">This page has not been generated</h1>
+        <p className="mt-4 text-xl md:text-2xl text-gray-500">Tell me what you would like on this page</p>
+      </div>
+    );
+  }

app/page.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import Link from 'next/link';
+
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+      <div className="relative">
+        <div 
+          className="absolute inset-0 bg-cover bg-center opacity-10"
+          style={{
+            backgroundImage: `url('https://readdy.ai/api/search-image?query=Modern%20AI%20technology%20workspace%20with%20holographic%20displays%2C%20futuristic%20interface%20elements%2C%20clean%20minimalist%20design%2C%20soft%20blue%20and%20purple%20lighting%2C%20high-tech%20environment%2C%20digital%20screens%20showing%20data%20visualizations%2C%20sleek%20modern%20architecture%2C%20professional%20technology%20atmosphere%2C%20ultra-modern%20setting&width=1920&height=1080&seq=hero-bg&orientation=landscape')`
+          }}
+        />
+        
+        <div className="relative z-10">
+          <header className="px-6 py-8">
+            <div className="max-w-7xl mx-auto">
+              <div className="flex items-center justify-between">
+                <div className="text-3xl font-bold text-blue-600" style={{ fontFamily: 'Pacifico, serif' }}>
+                  AI Agent Studio
+                </div>
+                <div className="flex items-center space-x-6">
+                  <Link href="/dashboard" className="text-gray-700 hover:text-blue-600 transition-colors">
+                    产品介绍
+                  </Link>
+                  <Link href="/templates" className="text-gray-700 hover:text-blue-600 transition-colors">
+                    模板市场
+                  </Link>
+                  <Link href="/dashboard" className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap">
+                    立即体验
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </header>
+          
+          <section className="px-6 py-20">
+            <div className="max-w-7xl mx-auto">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                <div>
+                  <h1 className="text-5xl font-bold text-gray-900 mb-6">
+                    构建智能Agent
+                    <br />
+                    <span className="text-blue-600">无需编程</span>
+                  </h1>
+                  <p className="text-xl text-gray-600 mb-8 leading-relaxed">
+                    通过可视化界面快速创建、部署和管理AI Agent应用。支持多种Agent类型，丰富的模板库，让人工智能触手可及。
+                  </p>
+                  <div className="flex items-center space-x-4">
+                    <Link href="/dashboard" className="bg-blue-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap">
+                      开始创建
+                    </Link>
+                    <Link href="/templates" className="border border-gray-300 text-gray-700 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap">
+                      浏览模板
+                    </Link>
+                  </div>
+                </div>
+                
+                <div className="relative">
+                  <img 
+                    src="https://readdy.ai/api/search-image?query=Professional%20AI%20dashboard%20interface%20mockup%20showing%20agent%20management%20panels%2C%20workflow%20diagrams%2C%20data%20analytics%20charts%2C%20modern%20UI%20design%20with%20blue%20accent%20colors%2C%20clean%20interface%20elements%2C%20desktop%20application%20screenshot%2C%20sophisticated%20technology%20platform%2C%20user-friendly%20design%2C%20comprehensive%20control%20panel%20layout&width=600&height=400&seq=hero-image&orientation=landscape"
+                    alt="AI Agent Studio Platform"
+                    className="rounded-xl shadow-2xl object-cover w-full h-96"
+                  />
+                </div>
+              </div>
+            </div>
+          </section>
+          
+          <section className="px-6 py-20 bg-white/80 backdrop-blur-sm">
+            <div className="max-w-7xl mx-auto">
+              <div className="text-center mb-16">
+                <h2 className="text-3xl font-bold text-gray-900 mb-4">强大的功能特性</h2>
+                <p className="text-xl text-gray-600">一站式AI Agent开发平台</p>
+              </div>
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
+                  <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
+                    <i className="ri-robot-line text-2xl text-blue-600"></i>
+                  </div>
+                  <h3 className="text-xl font-semibold text-gray-900 mb-4">可视化Agent构建</h3>
+                  <p className="text-gray-600">拖拽式界面设计，无需编程知识即可创建复杂的AI Agent应用</p>
+                </div>
+                
+                <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
+                  <div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-6">
+                    <i className="ri-flow-chart text-2xl text-green-600"></i>
+                  </div>
+                  <h3 className="text-xl font-semibold text-gray-900 mb-4">智能工作流</h3>
+                  <p className="text-gray-600">设计复杂的自动化工作流，实现多Agent协同工作</p>
+                </div>
+                
+                <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
+                  <div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-6">
+                    <i className="ri-database-line text-2xl text-purple-600"></i>
+                  </div>
+                  <h3 className="text-xl font-semibold text-gray-900 mb-4">知识库管理</h3>
+                  <p className="text-gray-600">上传文档、数据源，构建专业的知识库为Agent提供支持</p>
+                </div>
+                
+                <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
+                  <div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center mb-6">
+                    <i className="ri-store-line text-2xl text-orange-600"></i>
+                  </div>
+                  <h3 className="text-xl font-semibold text-gray-900 mb-4">模板市场</h3>
+                  <p className="text-gray-600">丰富的预设模板库，快速启动各种场景的Agent应用</p>
+                </div>
+                
+                <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
+                  <div className="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center mb-6">
+                    <i className="ri-bar-chart-line text-2xl text-red-600"></i>
+                  </div>
+                  <h3 className="text-xl font-semibold text-gray-900 mb-4">数据分析</h3>
+                  <p className="text-gray-600">实时监控Agent性能，深入分析使用数据和效果指标</p>
+                </div>
+                
+                <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
+                  <div className="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mb-6">
+                    <i className="ri-cloud-line text-2xl text-indigo-600"></i>
+                  </div>
+                  <h3 className="text-xl font-semibold text-gray-900 mb-4">云端部署</h3>
+                  <p className="text-gray-600">一键部署到云端，支持高并发访问和弹性扩展</p>
+                </div>
+              </div>
+            </div>
+          </section>
+          
+          <section className="px-6 py-20">
+            <div className="max-w-4xl mx-auto text-center">
+              <h2 className="text-3xl font-bold text-gray-900 mb-8">准备开始您的AI之旅？</h2>
+              <p className="text-xl text-gray-600 mb-8">
+                立即体验AI Agent Studio，无需编程经验即可构建强大的智能应用
+              </p>
+              <Link href="/dashboard" className="bg-blue-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap">
+                免费开始使用
+              </Link>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

app/workflows/WorkflowFilters.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function WorkflowFilters() {
+  const [activeFilter, setActiveFilter] = useState('all');
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filters = [
+    { key: 'all', label: '全部', count: 32 },
+    { key: 'active', label: '运行中', count: 24 },
+    { key: 'paused', label: '暂停', count: 5 },
+    { key: 'draft', label: '草稿', count: 3 }
+  ];
+
+  const categories = [
+    { key: 'all', label: '全部类型' },
+    { key: 'data-processing', label: '数据处理' },
+    { key: 'content-creation', label: '内容创作' },
+    { key: 'automation', label: '任务自动化' },
+    { key: 'integration', label: '系统集成' }
+  ];
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+        <div className="flex items-center space-x-4">
+          {filters.map((filter) => (
+            <button
+              key={filter.key}
+              onClick={() => setActiveFilter(filter.key)}
+              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors cursor-pointer whitespace-nowrap ${
+                activeFilter === filter.key
+                  ? 'bg-blue-100 text-blue-700'
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              {filter.label} ({filter.count})
+            </button>
+          ))}
+        </div>
+        
+        <div className="flex items-center space-x-4">
+          <div className="relative">
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <div className="w-4 h-4 flex items-center justify-center">
+                <i className="ri-search-line text-gray-400"></i>
+              </div>
+            </div>
+            <input
+              type="text"
+              placeholder="搜索工作流..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+            />
+          </div>
+          
+          <div className="relative">
+            <button className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap">
+              类型筛选
+              <div className="w-4 h-4 flex items-center justify-center inline-block ml-2">
+                <i className="ri-arrow-down-s-line"></i>
+              </div>
+            </button>
+          </div>
+          
+          <div className="relative">
+            <button className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap">
+              执行状态
+              <div className="w-4 h-4 flex items-center justify-center inline-block ml-2">
+                <i className="ri-arrow-down-s-line"></i>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/workflows/WorkflowList.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+
+export default function WorkflowList() {
+  const [selectedWorkflows, setSelectedWorkflows] = useState<number[]>([]);
+
+  const workflows = [
+    {
+      id: 1,
+      name: '客户数据处理流程',
+      description: '自动处理客户数据，包括清洗、分类和分析',
+      category: '数据处理',
+      status: '运行中',
+      version: 'v3.2',
+      created: '2024-01-20',
+      lastRun: '2分钟前',
+      executions: 1245,
+      successRate: 98.5,
+      avgRuntime: '3.2分钟',
+      icon: '📊',
+      tags: ['数据清洗', 'ETL', '自动化'],
+      nodes: 8,
+      triggers: ['定时触发', 'API调用']
+    },
+    {
+      id: 2,
+      name: '内容生成与发布',
+      description: '根据关键词自动生成文章并发布到多个平台',
+      category: '内容创作',
+      status: '运行中',
+      version: 'v2.1',
+      created: '2024-01-18',
+      lastRun: '15分钟前',
+      executions: 892,
+      successRate: 96.2,
+      avgRuntime: '5.8分钟',
+      icon: '✍️',
+      tags: ['内容生成', 'SEO', '多平台'],
+      nodes: 12,
+      triggers: ['手动触发', '定时触发']
+    },
+    {
+      id: 3,
+      name: '邮件智能分类回复',
+      description: '自动分类邮件并生成智能回复',
+      category: '任务自动化',
+      status: '暂停',
+      version: 'v1.8',
+      created: '2024-01-15',
+      lastRun: '2小时前',
+      executions: 2156,
+      successRate: 94.8,
+      avgRuntime: '1.5分钟',
+      icon: '📧',
+      tags: ['邮件处理', 'NLP', '自动回复'],
+      nodes: 6,
+      triggers: ['邮件触发', '定时检查']
+    },
+    {
+      id: 4,
+      name: '订单处理自动化',
+      description: '从下单到发货的完整自动化处理流程',
+      category: '系统集成',
+      status: '运行中',
+      version: 'v4.0',
+      created: '2024-01-12',
+      lastRun: '30分钟前',
+      executions: 3245,
+      successRate: 99.1,
+      avgRuntime: '2.1分钟',
+      icon: '📦',
+      tags: ['订单处理', 'ERP集成', '库存管理'],
+      nodes: 15,
+      triggers: ['订单事件', 'Webhook']
+    },
+    {
+      id: 5,
+      name: '社交媒体监控',
+      description: '监控品牌提及并自动生成报告',
+      category: '数据处理',
+      status: '运行中',
+      version: 'v2.5',
+      created: '2024-01-10',
+      lastRun: '1小时前',
+      executions: 678,
+      successRate: 97.3,
+      avgRuntime: '4.2分钟',
+      icon: '📱',
+      tags: ['社媒监控', '情感分析', '报告生成'],
+      nodes: 10,
+      triggers: ['定时触发', '关键词匹配']
+    },
+    {
+      id: 6,
+      name: '财务报表生成',
+      description: '自动收集财务数据并生成可视化报表',
+      category: '数据处理',
+      status: '运行中',
+      version: 'v1.9',
+      created: '2024-01-08',
+      lastRun: '45分钟前',
+      executions: 456,
+      successRate: 99.8,
+      avgRuntime: '6.5分钟',
+      icon: '💰',
+      tags: ['财务分析', '数据可视化', 'BI'],
+      nodes: 11,
+      triggers: ['定时触发', '手动执行']
+    }
+  ];
+
+  const handleSelectWorkflow = (workflowId: number) => {
+    setSelectedWorkflows(prev => 
+      prev.includes(workflowId) 
+        ? prev.filter(id => id !== workflowId)
+        : [...prev, workflowId]
+    );
+  };
+
+  const handleSelectAll = () => {
+    setSelectedWorkflows(selectedWorkflows.length === workflows.length ? [] : workflows.map(w => w.id));
+  };
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200">
+      <div className="p-6 border-b border-gray-200">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-4">
+            <input
+              type="checkbox"
+              checked={selectedWorkflows.length === workflows.length}
+              onChange={handleSelectAll}
+              className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
+            />
+            <span className="text-sm text-gray-600">
+              {selectedWorkflows.length > 0 ? `已选择 ${selectedWorkflows.length} 个工作流` : '全选'}
+            </span>
+          </div>
+          
+          {selectedWorkflows.length > 0 && (
+            <div className="flex items-center space-x-3">
+              <button className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer whitespace-nowrap">
+                批量启动
+              </button>
+              <button className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer whitespace-nowrap">
+                批量暂停
+              </button>
+              <button className="px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-lg transition-colors cursor-pointer whitespace-nowrap">
+                批量删除
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+      
+      <div className="divide-y divide-gray-200">
+        {workflows.map((workflow) => (
+          <div key={workflow.id} className="p-6 hover:bg-gray-50 transition-colors">
+            <div className="flex items-start justify-between">
+              <div className="flex items-start space-x-4 flex-1">
+                <input
+                  type="checkbox"
+                  checked={selectedWorkflows.includes(workflow.id)}
+                  onChange={() => handleSelectWorkflow(workflow.id)}
+                  className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 mt-1"
+                />
+                
+                <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
+                  <span className="text-xl">{workflow.icon}</span>
+                </div>
+                
+                <div className="flex-1">
+                  <div className="flex items-center space-x-3 mb-2">
+                    <h3 className="text-lg font-semibold text-gray-900">{workflow.name}</h3>
+                    <span className="text-sm text-gray-500">{workflow.version}</span>
+                    <span className={`px-2 py-1 text-xs rounded-full ${
+                      workflow.status === '运行中' 
+                        ? 'bg-green-100 text-green-800' 
+                        : 'bg-yellow-100 text-yellow-800'
+                    }`}>
+                      {workflow.status}
+                    </span>
+                  </div>
+                  
+                  <p className="text-gray-600 mb-3">{workflow.description}</p>
+                  
+                  <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-3">
+                    <div>
+                      <span className="text-sm text-gray-500">类型</span>
+                      <p className="text-sm font-medium text-gray-900">{workflow.category}</p>
+                    </div>
+                    <div>
+                      <span className="text-sm text-gray-500">节点数</span>
+                      <p className="text-sm font-medium text-gray-900">{workflow.nodes} 个</p>
+                    </div>
+                    <div>
+                      <span className="text-sm text-gray-500">成功率</span>
+                      <p className="text-sm font-medium text-green-600">{workflow.successRate}%</p>
+                    </div>
+                    <div>
+                      <span className="text-sm text-gray-500">平均运行时间</span>
+                      <p className="text-sm font-medium text-gray-900">{workflow.avgRuntime}</p>
+                    </div>
+                  </div>
+                  
+                  <div className="flex items-center space-x-4 mb-3">
+                    <span className="text-sm text-gray-500">执行次数: {workflow.executions.toLocaleString()}</span>
+                    <span className="text-sm text-gray-500">最后运行: {workflow.lastRun}</span>
+                  </div>
+                  
+                  <div className="flex items-center space-x-2 mb-3">
+                    <span className="text-sm text-gray-500">触发方式:</span>
+                    {workflow.triggers.map((trigger, index) => (
+                      <span key={index} className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">
+                        {trigger}
+                      </span>
+                    ))}
+                  </div>
+                  
+                  <div className="flex items-center space-x-2">
+                    {workflow.tags.map((tag, index) => (
+                      <span key={index} className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              
+              <div className="flex items-center space-x-3">
+                <Link href={`/workflows/${workflow.id}/analytics`} className="p-2 text-gray-400 hover:text-blue-600 transition-colors cursor-pointer">
+                  <div className="w-5 h-5 flex items-center justify-center">
+                    <i className="ri-bar-chart-line"></i>
+                  </div>
+                </Link>
+                <button className="p-2 text-gray-400 hover:text-green-600 transition-colors cursor-pointer">
+                  <div className="w-5 h-5 flex items-center justify-center">
+                    <i className="ri-play-line"></i>
+                  </div>
+                </button>
+                <Link href={`/workflows/${workflow.id}/edit`} className="p-2 text-gray-400 hover:text-blue-600 transition-colors cursor-pointer">
+                  <div className="w-5 h-5 flex items-center justify-center">
+                    <i className="ri-edit-line"></i>
+                  </div>
+                </Link>
+                <button className="p-2 text-gray-400 hover:text-blue-600 transition-colors cursor-pointer">
+                  <div className="w-5 h-5 flex items-center justify-center">
+                    <i className="ri-settings-line"></i>
+                  </div>
+                </button>
+                <button className="p-2 text-gray-400 hover:text-red-600 transition-colors cursor-pointer">
+                  <div className="w-5 h-5 flex items-center justify-center">
+                    <i className="ri-delete-bin-line"></i>
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/workflows/[id]/analytics/ExecutionHistory.tsx

@@ -0,0 +1,230 @@
+'use client';
+
+interface ExecutionHistoryProps {
+  workflowId: string;
+}
+
+export default function ExecutionHistory({ workflowId }: ExecutionHistoryProps) {
+  const executions = [
+    {
+      id: 1,
+      startTime: '2024-01-20 14:32:15',
+      endTime: '2024-01-20 14:35:28',
+      duration: '3分13秒',
+      status: 'success',
+      trigger: '定时触发',
+      processedRecords: 156,
+      errors: 0
+    },
+    {
+      id: 2,
+      startTime: '2024-01-20 14:02:45',
+      endTime: '2024-01-20 14:05:52',
+      duration: '3分7秒',
+      status: 'success',
+      trigger: 'API调用',
+      processedRecords: 142,
+      errors: 0
+    },
+    {
+      id: 3,
+      startTime: '2024-01-20 13:32:10',
+      endTime: '2024-01-20 13:35:45',
+      duration: '3分35秒',
+      status: 'warning',
+      trigger: '定时触发',
+      processedRecords: 134,
+      errors: 2
+    },
+    {
+      id: 4,
+      startTime: '2024-01-20 13:02:38',
+      endTime: '2024-01-20 13:05:12',
+      duration: '2分34秒',
+      status: 'success',
+      trigger: '手动执行',
+      processedRecords: 98,
+      errors: 0
+    },
+    {
+      id: 5,
+      startTime: '2024-01-20 12:32:22',
+      endTime: '2024-01-20 12:38:15',
+      duration: '5分53秒',
+      status: 'error',
+      trigger: '定时触发',
+      processedRecords: 0,
+      errors: 1
+    },
+    {
+      id: 6,
+      startTime: '2024-01-20 12:02:01',
+      endTime: '2024-01-20 12:04:58',
+      duration: '2分57秒',
+      status: 'success',
+      trigger: 'API调用',
+      processedRecords: 189,
+      errors: 0
+    }
+  ];
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'success':
+        return 'bg-green-100 text-green-800';
+      case 'warning':
+        return 'bg-yellow-100 text-yellow-800';
+      case 'error':
+        return 'bg-red-100 text-red-800';
+      case 'running':
+        return 'bg-blue-100 text-blue-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'success':
+        return '成功';
+      case 'warning':
+        return '警告';
+      case 'error':
+        return '失败';
+      case 'running':
+        return '运行中';
+      default:
+        return '未知';
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'success':
+        return 'ri-check-line';
+      case 'warning':
+        return 'ri-alert-line';
+      case 'error':
+        return 'ri-close-line';
+      case 'running':
+        return 'ri-loader-line';
+      default:
+        return 'ri-question-line';
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200">
+      <div className="p-6 border-b border-gray-200">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-gray-900">执行历史</h3>
+          <div className="flex items-center space-x-3">
+            <button className="text-sm text-gray-600 hover:text-gray-900 cursor-pointer">
+              导出日志
+            </button>
+            <button className="text-sm text-blue-600 hover:text-blue-800 cursor-pointer">
+              刷新
+            </button>
+          </div>
+        </div>
+      </div>
+      
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="text-left py-3 px-6 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                执行时间
+              </th>
+              <th className="text-left py-3 px-6 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                状态
+              </th>
+              <th className="text-left py-3 px-6 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                触发方式
+              </th>
+              <th className="text-left py-3 px-6 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                执行时长
+              </th>
+              <th className="text-left py-3 px-6 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                处理记录
+              </th>
+              <th className="text-left py-3 px-6 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                错误数
+              </th>
+              <th className="text-left py-3 px-6 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                操作
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {executions.map((execution) => (
+              <tr key={execution.id} className="hover:bg-gray-50">
+                <td className="py-4 px-6">
+                  <div>
+                    <p className="text-sm font-medium text-gray-900">{execution.startTime}</p>
+                    <p className="text-xs text-gray-500">至 {execution.endTime.split(' ')[1]}</p>
+                  </div>
+                </td>
+                <td className="py-4 px-6">
+                  <div className="flex items-center space-x-2">
+                    <div className={`flex items-center space-x-1 px-2 py-1 text-xs rounded-full ${getStatusColor(execution.status)}`}>
+                      <i className={`${getStatusIcon(execution.status)} text-xs`}></i>
+                      <span>{getStatusText(execution.status)}</span>
+                    </div>
+                  </div>
+                </td>
+                <td className="py-4 px-6">
+                  <span className="text-sm text-gray-900">{execution.trigger}</span>
+                </td>
+                <td className="py-4 px-6">
+                  <span className="text-sm text-gray-900">{execution.duration}</span>
+                </td>
+                <td className="py-4 px-6">
+                  <span className="text-sm text-gray-900">{execution.processedRecords.toLocaleString()}</span>
+                </td>
+                <td className="py-4 px-6">
+                  <span className={`text-sm ${execution.errors > 0 ? 'text-red-600' : 'text-gray-900'}`}>
+                    {execution.errors}
+                  </span>
+                </td>
+                <td className="py-4 px-6">
+                  <div className="flex items-center space-x-2">
+                    <button className="text-blue-600 hover:text-blue-800 text-sm cursor-pointer">
+                      查看详情
+                    </button>
+                    {execution.status === 'error' && (
+                      <button className="text-orange-600 hover:text-orange-800 text-sm cursor-pointer">
+                        重试
+                      </button>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      
+      <div className="p-6 border-t border-gray-200 flex items-center justify-between">
+        <span className="text-sm text-gray-700">显示 1-6 条，共 156 条记录</span>
+        <div className="flex items-center space-x-2">
+          <button className="px-3 py-1 border border-gray-300 rounded text-sm text-gray-600 hover:bg-gray-50 cursor-pointer">
+            上一页
+          </button>
+          <button className="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 cursor-pointer">
+            1
+          </button>
+          <button className="px-3 py-1 border border-gray-300 rounded text-sm text-gray-600 hover:bg-gray-50 cursor-pointer">
+            2
+          </button>
+          <button className="px-3 py-1 border border-gray-300 rounded text-sm text-gray-600 hover:bg-gray-50 cursor-pointer">
+            3
+          </button>
+          <button className="px-3 py-1 border border-gray-300 rounded text-sm text-gray-600 hover:bg-gray-50 cursor-pointer">
+            下一页
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/workflows/[id]/analytics/NodeAnalytics.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+interface NodeAnalyticsProps {
+  workflowId: string;
+}
+
+export default function NodeAnalytics({ workflowId }: NodeAnalyticsProps) {
+  const nodeData = [
+    { 
+      id: 1, 
+      name: '数据接收', 
+      type: '触发器', 
+      executions: 1245, 
+      avgTime: '0.2s', 
+      successRate: 100,
+      status: 'healthy'
+    },
+    { 
+      id: 2, 
+      name: '数据验证', 
+      type: '条件判断', 
+      executions: 1245, 
+      avgTime: '0.8s', 
+      successRate: 98.9,
+      status: 'healthy'
+    },
+    { 
+      id: 3, 
+      name: '数据清洗', 
+      type: '数据处理', 
+      executions: 1231, 
+      avgTime: '1.5s', 
+      successRate: 97.2,
+      status: 'warning'
+    },
+    { 
+      id: 4, 
+      name: 'AI分析', 
+      type: 'AI节点', 
+      executions: 1196, 
+      avgTime: '2.1s', 
+      successRate: 96.8,
+      status: 'warning'
+    },
+    { 
+      id: 5, 
+      name: '结果存储', 
+      type: '数据库', 
+      executions: 1158, 
+      avgTime: '0.6s', 
+      successRate: 99.5,
+      status: 'healthy'
+    }
+  ];
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'healthy':
+        return 'text-green-600 bg-green-100';
+      case 'warning':
+        return 'text-yellow-600 bg-yellow-100';
+      case 'error':
+        return 'text-red-600 bg-red-100';
+      default:
+        return 'text-gray-600 bg-gray-100';
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h3 className="text-lg font-semibold text-gray-900">节点性能分析</h3>
+        <button className="text-sm text-blue-600 hover:text-blue-800 cursor-pointer">
+          查看详情
+        </button>
+      </div>
+      
+      <div className="space-y-4">
+        {nodeData.map((node) => (
+          <div key={node.id} className="border border-gray-200 rounded-lg p-4">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center space-x-3">
+                <div className="w-2 h-2 rounded-full bg-blue-500"></div>
+                <span className="font-medium text-gray-900">{node.name}</span>
+                <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
+                  {node.type}
+                </span>
+              </div>
+              <span className={`px-2 py-1 text-xs rounded-full ${getStatusColor(node.status)}`}>
+                {node.status === 'healthy' ? '正常' : '警告'}
+              </span>
+            </div>
+            
+            <div className="grid grid-cols-3 gap-4">
+              <div>
+                <span className="text-xs text-gray-500">执行次数</span>
+                <p className="text-sm font-medium text-gray-900">{node.executions.toLocaleString()}</p>
+              </div>
+              <div>
+                <span className="text-xs text-gray-500">平均耗时</span>
+                <p className="text-sm font-medium text-gray-900">{node.avgTime}</p>
+              </div>
+              <div>
+                <span className="text-xs text-gray-500">成功率</span>
+                <p className="text-sm font-medium text-green-600">{node.successRate}%</p>
+              </div>
+            </div>
+            
+            {/* 性能条 */}
+            <div className="mt-3">
+              <div className="w-full bg-gray-200 rounded-full h-1.5">
+                <div 
+                  className={`h-1.5 rounded-full ${
+                    node.successRate >= 99 ? 'bg-green-500' :
+                    node.successRate >= 95 ? 'bg-yellow-500' : 'bg-red-500'
+                  }`}
+                  style={{ width: `${node.successRate}%` }}
+                ></div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/workflows/[id]/analytics/PerformanceChart.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line } from 'recharts';
+
+interface PerformanceChartProps {
+  workflowId: string;
+  timeRange: string;
+}
+
+export default function PerformanceChart({ workflowId, timeRange }: PerformanceChartProps) {
+  const performanceData = [
+    { date: '01-01', executions: 45, successRate: 98.2, avgRuntime: 3.1 },
+    { date: '01-02', executions: 52, successRate: 97.8, avgRuntime: 3.3 },
+    { date: '01-03', executions: 48, successRate: 98.9, avgRuntime: 2.9 },
+    { date: '01-04', executions: 61, successRate: 98.1, avgRuntime: 3.4 },
+    { date: '01-05', executions: 55, successRate: 99.1, avgRuntime: 3.0 },
+    { date: '01-06', executions: 49, successRate: 97.5, avgRuntime: 3.6 },
+    { date: '01-07', executions: 58, successRate: 98.7, avgRuntime: 3.2 }
+  ];
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h3 className="text-lg font-semibold text-gray-900">执行趋势</h3>
+        <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-2">
+            <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
+            <span className="text-sm text-gray-600">执行次数</span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+            <span className="text-sm text-gray-600">成功率</span>
+          </div>
+        </div>
+      </div>
+      
+      <div className="h-80">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart data={performanceData}>
+            <defs>
+              <linearGradient id="colorExecutions" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="#3B82F6" stopOpacity={0.8}/>
+                <stop offset="95%" stopColor="#3B82F6" stopOpacity={0.1}/>
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke="#E5E7EB" />
+            <XAxis 
+              dataKey="date" 
+              stroke="#6B7280" 
+              fontSize={12}
+              tick={{ fill: '#6B7280' }}
+            />
+            <YAxis 
+              stroke="#6B7280" 
+              fontSize={12}
+              tick={{ fill: '#6B7280' }}
+            />
+            <Tooltip 
+              contentStyle={{ 
+                backgroundColor: '#1F2937', 
+                border: 'none', 
+                borderRadius: '8px',
+                color: 'white'
+              }}
+              labelStyle={{ color: '#F3F4F6' }}
+            />
+            <Area
+              type="monotone"
+              dataKey="executions"
+              stroke="#3B82F6"
+              strokeWidth={2}
+              fillOpacity={1}
+              fill="url(#colorExecutions)"
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}

app/workflows/[id]/analytics/WorkflowAnalytics.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import PerformanceChart from './PerformanceChart';
+import ExecutionHistory from './ExecutionHistory';
+import NodeAnalytics from './NodeAnalytics';
+
+interface WorkflowAnalyticsProps {
+  workflowId: string;
+}
+
+export default function WorkflowAnalytics({ workflowId }: WorkflowAnalyticsProps) {
+  const [timeRange, setTimeRange] = useState('7d');
+
+  const workflowData = {
+    '1': {
+      name: '客户数据处理流程',
+      description: '自动处理客户数据，包括清洗、分类和分析',
+      icon: '📊',
+      status: '运行中',
+      totalExecutions: 1245,
+      successRate: 98.5,
+      avgRuntime: 3.2,
+      totalRuntime: 4392,
+      errorCount: 19
+    },
+    '2': {
+      name: '内容生成与发布',
+      description: '根据关键词自动生成文章并发布到多个平台',
+      icon: '✍️',
+      status: '运行中',
+      totalExecutions: 892,
+      successRate: 96.2,
+      avgRuntime: 5.8,
+      totalRuntime: 5174,
+      errorCount: 34
+    },
+    '3': {
+      name: '邮件智能分类回复',
+      description: '自动分类邮件并生成智能回复',
+      icon: '📧',
+      status: '暂停',
+      totalExecutions: 2156,
+      successRate: 94.8,
+      avgRuntime: 1.5,
+      totalRuntime: 3234,
+      errorCount: 112
+    },
+    '4': {
+      name: '订单处理自动化',
+      description: '从下单到发货的完整自动化处理流程',
+      icon: '📦',
+      status: '运行中',
+      totalExecutions: 3245,
+      successRate: 99.1,
+      avgRuntime: 2.1,
+      totalRuntime: 6815,
+      errorCount: 29
+    },
+    '5': {
+      name: '社交媒体监控',
+      description: '监控品牌提及并自动生成报告',
+      icon: '📱',
+      status: '运行中',
+      totalExecutions: 678,
+      successRate: 97.3,
+      avgRuntime: 4.2,
+      totalRuntime: 2848,
+      errorCount: 18
+    },
+    '6': {
+      name: '财务报表生成',
+      description: '自动收集财务数据并生成可视化报表',
+      icon: '💰',
+      status: '运行中',
+      totalExecutions: 456,
+      successRate: 99.8,
+      avgRuntime: 6.5,
+      totalRuntime: 2964,
+      errorCount: 1
+    }
+  };
+
+  const workflow = workflowData[workflowId as keyof typeof workflowData] || workflowData['1'];
+
+  const timeRanges = [
+    { value: '1d', label: '最近1天' },
+    { value: '7d', label: '最近7天' },
+    { value: '30d', label: '最近30天' },
+    { value: '90d', label: '最近90天' }
+  ];
+
+  return (
+    <div className="space-y-8">
+      {/* 页面头部 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          <Link href="/workflows" className="p-2 text-gray-400 hover:text-blue-600 transition-colors cursor-pointer">
+            <div className="w-5 h-5 flex items-center justify-center">
+              <i className="ri-arrow-left-line"></i>
+            </div>
+          </Link>
+          <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
+            <span className="text-xl">{workflow.icon}</span>
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">{workflow.name}</h1>
+            <p className="text-gray-600 mt-1">{workflow.description}</p>
+          </div>
+        </div>
+        
+        <div className="flex items-center space-x-4">
+          <div className="flex bg-white rounded-lg border border-gray-200 p-1">
+            {timeRanges.map((range) => (
+              <button
+                key={range.value}
+                onClick={() => setTimeRange(range.value)}
+                className={`px-4 py-2 text-sm font-medium rounded-md transition-colors cursor-pointer whitespace-nowrap \${
+                  timeRange === range.value
+                    ? 'bg-blue-100 text-blue-700'
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                {range.label}
+              </button>
+            ))}
+          </div>
+          
+          <Link href={`/workflows/${workflowId}/edit`} className="bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap">
+            <div className="w-4 h-4 flex items-center justify-center inline-block mr-2">
+              <i className="ri-edit-line"></i>
+            </div>
+            编辑工作流
+          </Link>
+        </div>
+      </div>
+
+      {/* 核心指标卡片 */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-gray-600">总执行次数</p>
+              <p className="text-2xl font-bold text-gray-900 mt-2">{workflow.totalExecutions.toLocaleString()}</p>
+            </div>
+            <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
+              <i className="ri-play-line text-blue-600 text-xl"></i>
+            </div>
+          </div>
+          <div className="flex items-center mt-4">
+            <span className="text-sm text-green-600">+12.5%</span>
+            <span className="text-sm text-gray-500 ml-2">较上期</span>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-gray-600">成功率</p>
+              <p className="text-2xl font-bold text-green-600 mt-2">{workflow.successRate}%</p>
+            </div>
+            <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
+              <i className="ri-check-line text-green-600 text-xl"></i>
+            </div>
+          </div>
+          <div className="flex items-center mt-4">
+            <span className="text-sm text-green-600">+2.1%</span>
+            <span className="text-sm text-gray-500 ml-2">较上期</span>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-gray-600">平均运行时间</p>
+              <p className="text-2xl font-bold text-gray-900 mt-2">{workflow.avgRuntime}分</p>
+            </div>
+            <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
+              <i className="ri-time-line text-orange-600 text-xl"></i>
+            </div>
+          </div>
+          <div className="flex items-center mt-4">
+            <span className="text-sm text-red-600">+0.3分</span>
+            <span className="text-sm text-gray-500 ml-2">较上期</span>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-gray-600">总运行时间</p>
+              <p className="text-2xl font-bold text-gray-900 mt-2">{workflow.totalRuntime}分</p>
+            </div>
+            <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
+              <i className="ri-timer-line text-purple-600 text-xl"></i>
+            </div>
+          </div>
+          <div className="flex items-center mt-4">
+            <span className="text-sm text-green-600">-5.2%</span>
+            <span className="text-sm text-gray-500 ml-2">较上期</span>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-gray-600">错误次数</p>
+              <p className="text-2xl font-bold text-red-600 mt-2">{workflow.errorCount}</p>
+            </div>
+            <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
+              <i className="ri-error-warning-line text-red-600 text-xl"></i>
+            </div>
+          </div>
+          <div className="flex items-center mt-4">
+            <span className="text-sm text-green-600">-18.3%</span>
+            <span className="text-sm text-gray-500 ml-2">较上期</span>
+          </div>
+        </div>
+      </div>
+
+      {/* 性能趋势图表 */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <PerformanceChart workflowId={workflowId} timeRange={timeRange} />
+        <NodeAnalytics workflowId={workflowId} />
+      </div>
+
+      {/* 执行历史 */}
+      <ExecutionHistory workflowId={workflowId} />
+    </div>
+  );
+}

app/workflows/[id]/analytics/page.tsx

@@ -0,0 +1,34 @@
+
+import { Suspense } from 'react';
+import Header from '@/components/Header';
+import Sidebar from '@/components/Sidebar';
+import WorkflowAnalytics from './WorkflowAnalytics';
+
+export async function generateStaticParams() {
+  return [
+    { id: '1' },
+    { id: '2' },
+    { id: '3' },
+    { id: '4' },
+    { id: '5' },
+    { id: '6' },
+  ];
+}
+
+export default function WorkflowAnalyticsPage({ params }: { params: { id: string } }) {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <div className="flex">
+        <Sidebar />
+        <main className="flex-1 p-8">
+          <div className="max-w-7xl mx-auto">
+            <Suspense fallback={<div className="text-center py-8">Loading...</div>}>
+              <WorkflowAnalytics workflowId={params.id} />
+            </Suspense>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

app/workflows/create/NodeLibrary.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function NodeLibrary() {
+  const [activeCategory, setActiveCategory] = useState('trigger');
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const nodeCategories = [
+    { id: 'trigger', name: '触发器', icon: 'ri-play-line' },
+    { id: 'action', name: '动作', icon: 'ri-tools-line' },
+    { id: 'condition', name: '条件', icon: 'ri-question-line' },
+    { id: 'data', name: '数据', icon: 'ri-database-line' },
+    { id: 'ai', name: 'AI', icon: 'ri-brain-line' },
+    { id: 'integration', name: '集成', icon: 'ri-links-line' }
+  ];
+
+  const nodes = {
+    trigger: [
+      { id: 'schedule', name: '定时触发', icon: '⏰', desc: '按时间表执行' },
+      { id: 'webhook', name: 'Webhook', icon: '🔗', desc: 'HTTP请求触发' },
+      { id: 'file-upload', name: '文件上传', icon: '📁', desc: '文件上传时触发' },
+      { id: 'email', name: '邮件触发', icon: '📧', desc: '收到邮件时触发' },
+      { id: 'database', name: '数据库变更', icon: '🗄️', desc: '数据变更时触发' }
+    ],
+    action: [
+      { id: 'http-request', name: 'HTTP请求', icon: '🌐', desc: '发送HTTP请求' },
+      { id: 'send-email', name: '发送邮件', icon: '📮', desc: '发送电子邮件' },
+      { id: 'file-operation', name: '文件操作', icon: '📄', desc: '文件增删改查' },
+      { id: 'notification', name: '消息通知', icon: '🔔', desc: '发送通知消息' },
+      { id: 'data-transform', name: '数据转换', icon: '🔄', desc: '转换数据格式' }
+    ],
+    condition: [
+      { id: 'if-else', name: '条件判断', icon: '🤔', desc: '根据条件分支' },
+      { id: 'filter', name: '数据过滤', icon: '🔍', desc: '过滤数据项' },
+      { id: 'loop', name: '循环处理', icon: '🔁', desc: '循环执行操作' },
+      { id: 'delay', name: '延时等待', icon: '⏱️', desc: '延时一段时间' },
+      { id: 'merge', name: '数据合并', icon: '🔀', desc: '合并多个数据源' }
+    ],
+    data: [
+      { id: 'mysql', name: 'MySQL', icon: '🐬', desc: 'MySQL数据库' },
+      { id: 'mongodb', name: 'MongoDB', icon: '🍃', desc: 'MongoDB数据库' },
+      { id: 'redis', name: 'Redis', icon: '📦', desc: 'Redis缓存' },
+      { id: 'csv', name: 'CSV文件', icon: '📊', desc: 'CSV格式数据' },
+      { id: 'json', name: 'JSON数据', icon: '📋', desc: 'JSON格式数据' }
+    ],
+    ai: [
+      { id: 'text-generation', name: '文本生成', icon: '✍️', desc: 'AI文本生成' },
+      { id: 'text-analysis', name: '文本分析', icon: '🔎', desc: '文本内容分析' },
+      { id: 'translation', name: '文本翻译', icon: '🌍', desc: '多语言翻译' },
+      { id: 'sentiment', name: '情感分析', icon: '😊', desc: '情感倾向分析' },
+      { id: 'ocr', name: '图片识别', icon: '👁️', desc: 'OCR文字识别' }
+    ],
+    integration: [
+      { id: 'slack', name: 'Slack', icon: '💬', desc: 'Slack消息推送' },
+      { id: 'wechat', name: '微信', icon: '💚', desc: '微信消息推送' },
+      { id: 'dingtalk', name: '钉钉', icon: '📱', desc: '钉钉消息推送' },
+      { id: 'github', name: 'GitHub', icon: '🐙', desc: 'GitHub集成' },
+      { id: 'google-sheets', name: 'Google Sheets', icon: '📈', desc: 'Google表格' }
+    ]
+  };
+
+  const handleDragStart = (e: React.DragEvent, node: any) => {
+    e.dataTransfer.setData('application/json', JSON.stringify({
+      type: 'node',
+      nodeType: node.id,
+      ...node
+    }));
+  };
+
+  const filteredNodes = searchTerm 
+    ? nodes[activeCategory as keyof typeof nodes]?.filter(node => 
+        node.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        node.desc.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    : nodes[activeCategory as keyof typeof nodes];
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* 搜索框 */}
+      <div className="p-4 border-b border-gray-200">
+        <div className="relative">
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <div className="w-4 h-4 flex items-center justify-center">
+              <i className="ri-search-line text-gray-400"></i>
+            </div>
+          </div>
+          <input
+            type="text"
+            placeholder="搜索节点..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+          />
+        </div>
+      </div>
+
+      {/* 分类标签 */}
+      <div className="p-4 border-b border-gray-200">
+        <div className="grid grid-cols-2 gap-2">
+          {nodeCategories.map((category) => (
+            <button
+              key={category.id}
+              onClick={() => setActiveCategory(category.id)}
+              className={`p-2 rounded-lg text-sm font-medium transition-colors cursor-pointer ${
+                activeCategory === category.id
+                  ? 'bg-blue-100 text-blue-700'
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              <div className="flex items-center space-x-2">
+                <div className="w-4 h-4 flex items-center justify-center">
+                  <i className={category.icon}></i>
+                </div>
+                <span>{category.name}</span>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 节点列表 */}
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="space-y-2">
+          {filteredNodes?.map((node) => (
+            <div
+              key={node.id}
+              draggable
+              onDragStart={(e) => handleDragStart(e, node)}
+              className="p-3 bg-white border border-gray-200 rounded-lg hover:shadow-md transition-all cursor-move"
+            >
+              <div className="flex items-start space-x-3">
+                <div className="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                  <span className="text-sm">{node.icon}</span>
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h4 className="font-medium text-gray-900 text-sm">{node.name}</h4>
+                  <p className="text-xs text-gray-500 mt-1 line-clamp-2">{node.desc}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* 模板快捷入口 */}
+      <div className="p-4 border-t border-gray-200">
+        <button className="w-full p-3 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors cursor-pointer">
+          <div className="flex items-center justify-center space-x-2">
+            <div className="w-4 h-4 flex items-center justify-center">
+              <i className="ri-template-line"></i>
+            </div>
+            <span className="text-sm font-medium">使用模板</span>
+          </div>
+        </button>
+      </div>
+    </div>
+  );
+}

app/workflows/create/WorkflowBuilder.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useState } from 'react';
+import WorkflowCanvas from './WorkflowCanvas';
+import NodeLibrary from './NodeLibrary';
+import WorkflowSettings from './WorkflowSettings';
+
+export default function WorkflowBuilder() {
+  const [workflowData, setWorkflowData] = useState({
+    name: '',
+    description: '',
+    category: 'data-processing',
+    triggers: [],
+    nodes: [],
+    connections: []
+  });
+  
+  const [selectedNode, setSelectedNode] = useState(null);
+  const [showSettings, setShowSettings] = useState(false);
+
+  const handleSave = () => {
+    console.log('保存工作流:', workflowData);
+    alert('工作流保存成功！');
+  };
+
+  const handleDeploy = () => {
+    console.log('部署工作流:', workflowData);
+    alert('工作流部署成功！');
+  };
+
+  const handleTest = () => {
+    console.log('测试工作流:', workflowData);
+    alert('开始测试工作流...');
+  };
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200">
+      {/* 顶部工具栏 */}
+      <div className="p-6 border-b border-gray-200">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-6">
+            <div>
+              <input
+                type="text"
+                placeholder="输入工作流名称"
+                value={workflowData.name}
+                onChange={(e) => setWorkflowData({...workflowData, name: e.target.value})}
+                className="text-xl font-semibold bg-transparent border-none focus:outline-none focus:ring-0 p-0 text-gray-900 placeholder-gray-500"
+              />
+              <p className="text-sm text-gray-500 mt-1">设计您的自动化流程</p>
+            </div>
+            
+            <div className="flex items-center space-x-3">
+              <button
+                onClick={() => setShowSettings(!showSettings)}
+                className={`p-2 rounded-lg transition-colors cursor-pointer ${
+                  showSettings ? 'bg-blue-100 text-blue-600' : 'text-gray-500 hover:bg-gray-100'
+                }`}
+              >
+                <div className="w-5 h-5 flex items-center justify-center">
+                  <i className="ri-settings-line"></i>
+                </div>
+              </button>
+              <button className="p-2 text-gray-500 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+                <div className="w-5 h-5 flex items-center justify-center">
+                  <i className="ri-zoom-in-line"></i>
+                </div>
+              </button>
+              <button className="p-2 text-gray-500 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+                <div className="w-5 h-5 flex items-center justify-center">
+                  <i className="ri-zoom-out-line"></i>
+                </div>
+              </button>
+              <button className="p-2 text-gray-500 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+                <div className="w-5 h-5 flex items-center justify-center">
+                  <i className="ri-fullscreen-line"></i>
+                </div>
+              </button>
+            </div>
+          </div>
+          
+          <div className="flex items-center space-x-3">
+            <button
+              onClick={handleTest}
+              className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap"
+            >
+              <div className="w-4 h-4 flex items-center justify-center inline-block mr-2">
+                <i className="ri-play-line"></i>
+              </div>
+              测试运行
+            </button>
+            <button
+              onClick={handleSave}
+              className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap"
+            >
+              保存草稿
+            </button>
+            <button
+              onClick={handleDeploy}
+              className="bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap"
+            >
+              <div className="w-4 h-4 flex items-center justify-center inline-block mr-2">
+                <i className="ri-rocket-line"></i>
+              </div>
+              部署
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 主内容区域 */}
+      <div className="flex h-screen">
+        {/* 左侧节点库 */}
+        <div className="w-80 border-r border-gray-200 bg-gray-50">
+          <NodeLibrary />
+        </div>
+        
+        {/* 中间画布区域 */}
+        <div className="flex-1">
+          <WorkflowCanvas 
+            nodes={workflowData.nodes}
+            connections={workflowData.connections}
+            onNodeSelect={setSelectedNode}
+            onUpdateWorkflow={setWorkflowData}
+          />
+        </div>
+        
+        {/* 右侧设置面板 */}
+        {showSettings && (
+          <div className="w-80 border-l border-gray-200 bg-gray-50">
+            <WorkflowSettings
+              workflowData={workflowData}
+              selectedNode={selectedNode}
+              onUpdateWorkflow={setWorkflowData}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/workflows/create/WorkflowCanvas.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import { useState, useRef } from 'react';
+
+interface WorkflowCanvasProps {
+  nodes: any[];
+  connections: any[];
+  onNodeSelect: (node: any) => void;
+  onUpdateWorkflow: (data: any) => void;
+}
+
+export default function WorkflowCanvas({ nodes, connections, onNodeSelect, onUpdateWorkflow }: WorkflowCanvasProps) {
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const [draggedNode, setDraggedNode] = useState(null);
+  const [selectedNode, setSelectedNode] = useState(null);
+  const [canvasNodes, setCanvasNodes] = useState([
+    {
+      id: 'start',
+      type: 'trigger',
+      name: '开始',
+      icon: '🚀',
+      x: 100,
+      y: 100,
+      isFixed: true
+    }
+  ]);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    
+    const nodeData = JSON.parse(e.dataTransfer.getData('application/json'));
+    const rect = canvasRef.current?.getBoundingClientRect();
+    
+    if (rect) {
+      const newNode = {
+        id: `node_${Date.now()}`,
+        type: nodeData.type,
+        name: nodeData.name,
+        icon: nodeData.icon,
+        nodeType: nodeData.nodeType,
+        x: e.clientX - rect.left - 50,
+        y: e.clientY - rect.top - 25,
+        config: {}
+      };
+      
+      setCanvasNodes(prev => [...prev, newNode]);
+    }
+  };
+
+  const handleNodeClick = (node: any) => {
+    setSelectedNode(node);
+    onNodeSelect(node);
+  };
+
+  const handleNodeDrag = (nodeId: string, newX: number, newY: number) => {
+    setCanvasNodes(prev => 
+      prev.map(node => 
+        node.id === nodeId ? { ...node, x: newX, y: newY } : node
+      )
+    );
+  };
+
+  const deleteNode = (nodeId: string) => {
+    setCanvasNodes(prev => prev.filter(node => node.id !== nodeId && !node.isFixed));
+    if (selectedNode && selectedNode.id === nodeId) {
+      setSelectedNode(null);
+      onNodeSelect(null);
+    }
+  };
+
+  return (
+    <div 
+      ref={canvasRef}
+      className="relative w-full h-full bg-gray-50 overflow-auto"
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      style={{
+        backgroundImage: 'radial-gradient(circle, #d1d5db 1px, transparent 1px)',
+        backgroundSize: '20px 20px'
+      }}
+    >
+      {/* 画布提示 */}
+      {canvasNodes.length <= 1 && (
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+          <div className="text-center text-gray-500">
+            <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
+              <div className="w-8 h-8 flex items-center justify-center">
+                <i className="ri-drag-drop-line text-2xl"></i>
+              </div>
+            </div>
+            <p className="text-lg font-medium mb-2">开始构建您的工作流</p>
+            <p className="text-sm">从左侧拖拽节点到画布上</p>
+          </div>
+        </div>
+      )}
+
+      {/* 渲染节点 */}
+      {canvasNodes.map((node) => (
+        <WorkflowNode
+          key={node.id}
+          node={node}
+          isSelected={selectedNode?.id === node.id}
+          onClick={() => handleNodeClick(node)}
+          onDrag={handleNodeDrag}
+          onDelete={deleteNode}
+        />
+      ))}
+
+      {/* 连接线 */}
+      <svg className="absolute inset-0 pointer-events-none">
+        {connections.map((connection, index) => {
+          const startNode = canvasNodes.find(n => n.id === connection.from);
+          const endNode = canvasNodes.find(n => n.id === connection.to);
+          
+          if (startNode && endNode) {
+            return (
+              <line
+                key={index}
+                x1={startNode.x + 50}
+                y1={startNode.y + 25}
+                x2={endNode.x}
+                y2={endNode.y + 25}
+                stroke="#6b7280"
+                strokeWidth="2"
+                markerEnd="url(#arrowhead)"
+              />
+            );
+          }
+          return null;
+        })}
+        
+        {/* 箭头定义 */}
+        <defs>
+          <marker
+            id="arrowhead"
+            markerWidth="10"
+            markerHeight="7"
+            refX="9"
+            refY="3.5"
+            orient="auto"
+          >
+            <polygon
+              points="0 0, 10 3.5, 0 7"
+              fill="#6b7280"
+            />
+          </marker>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+// 工作流节点组件
+function WorkflowNode({ node, isSelected, onClick, onDrag, onDelete }: any) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (node.isFixed) return;
+    
+    setIsDragging(true);
+    setDragStart({
+      x: e.clientX - node.x,
+      y: e.clientY - node.y
+    });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (!isDragging || node.isFixed) return;
+    
+    onDrag(node.id, e.clientX - dragStart.x, e.clientY - dragStart.y);
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  return (
+    <div
+      className={`absolute bg-white border-2 rounded-lg shadow-md cursor-pointer transition-all ${
+        isSelected ? 'border-blue-500 shadow-lg' : 'border-gray-200 hover:shadow-lg'
+      } ${isDragging ? 'cursor-move' : ''}`}
+      style={{
+        left: node.x,
+        top: node.y,
+        width: 100,
+        height: 50,
+        zIndex: isSelected ? 10 : 1
+      }}
+      onClick={onClick}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+    >
+      <div className="p-2 h-full flex flex-col items-center justify-center">
+        <div className="text-lg mb-1">{node.icon}</div>
+        <div className="text-xs font-medium text-gray-700 text-center line-clamp-1">
+          {node.name}
+        </div>
+      </div>
+      
+      {/* 连接点 */}
+      {!node.isFixed && (
+        <>
+          <div className="absolute -left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 bg-blue-500 rounded-full border-2 border-white cursor-pointer"></div>
+          <div className="absolute -right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 bg-blue-500 rounded-full border-2 border-white cursor-pointer"></div>
+        </>
+      )}
+      
+      {node.isFixed && (
+        <div className="absolute -right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 bg-blue-500 rounded-full border-2 border-white cursor-pointer"></div>
+      )}
+
+      {/* 删除按钮 */}
+      {!node.isFixed && isSelected && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete(node.id);
+          }}
+          className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors cursor-pointer"
+        >
+          <i className="ri-close-line text-xs"></i>
+        </button>
+      )}
+    </div>
+  );
+}

app/workflows/create/WorkflowSettings.tsx

@@ -0,0 +1,338 @@
+'use client';
+
+import { useState } from 'react';
+
+interface WorkflowSettingsProps {
+  workflowData: any;
+  selectedNode: any;
+  onUpdateWorkflow: (data: any) => void;
+}
+
+export default function WorkflowSettings({ workflowData, selectedNode, onUpdateWorkflow }: WorkflowSettingsProps) {
+  const [activeTab, setActiveTab] = useState('general');
+
+  const tabs = [
+    { id: 'general', name: '基本设置', icon: 'ri-settings-line' },
+    { id: 'triggers', name: '触发器', icon: 'ri-play-line' },
+    { id: 'variables', name: '变量', icon: 'ri-code-line' },
+    { id: 'security', name: '权限', icon: 'ri-shield-line' }
+  ];
+
+  const categories = [
+    { value: 'data-processing', label: '数据处理' },
+    { value: 'content-creation', label: '内容创作' },
+    { value: 'automation', label: '任务自动化' },
+    { value: 'integration', label: '系统集成' }
+  ];
+
+  const handleInputChange = (field: string, value: any) => {
+    onUpdateWorkflow({ ...workflowData, [field]: value });
+  };
+
+  const renderGeneralSettings = () => (
+    <div className="space-y-6">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">工作流名称</label>
+        <input
+          type="text"
+          placeholder="输入工作流名称"
+          value={workflowData.name}
+          onChange={(e) => handleInputChange('name', e.target.value)}
+          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+        />
+      </div>
+      
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">描述</label>
+        <textarea
+          placeholder="描述工作流的功能和用途"
+          rows={3}
+          maxLength={500}
+          value={workflowData.description}
+          onChange={(e) => handleInputChange('description', e.target.value)}
+          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm resize-none"
+        />
+        <div className="text-xs text-gray-500 mt-1">{workflowData.description.length}/500</div>
+      </div>
+      
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">分类</label>
+        <select
+          value={workflowData.category}
+          onChange={(e) => handleInputChange('category', e.target.value)}
+          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm pr-8"
+        >
+          {categories.map((category) => (
+            <option key={category.value} value={category.value}>
+              {category.label}
+            </option>
+          ))}
+        </select>
+      </div>
+      
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-3">执行设置</label>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-700">并行执行</span>
+            <div className="w-10 h-6 bg-gray-300 rounded-full relative cursor-pointer">
+              <div className="w-4 h-4 bg-white rounded-full absolute left-1 top-1"></div>
+            </div>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-700">错误时停止</span>
+            <div className="w-10 h-6 bg-blue-600 rounded-full relative cursor-pointer">
+              <div className="w-4 h-4 bg-white rounded-full absolute right-1 top-1"></div>
+            </div>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-700">保存执行日志</span>
+            <div className="w-10 h-6 bg-blue-600 rounded-full relative cursor-pointer">
+              <div className="w-4 h-4 bg-white rounded-full absolute right-1 top-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderTriggerSettings = () => (
+    <div className="space-y-6">
+      <div>
+        <h4 className="font-medium text-gray-900 mb-3">触发条件</h4>
+        <div className="space-y-3">
+          <div className="p-3 border border-gray-200 rounded-lg">
+            <div className="flex items-center justify-between mb-2">
+              <span className="font-medium text-sm">定时触发</span>
+              <div className="w-8 h-5 bg-blue-600 rounded-full relative cursor-pointer">
+                <div className="w-3 h-3 bg-white rounded-full absolute right-1 top-1"></div>
+              </div>
+            </div>
+            <input
+              type="text"
+              placeholder="0 0 * * *"
+              className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+            />
+            <p className="text-xs text-gray-500 mt-1">Cron表达式格式</p>
+          </div>
+          
+          <div className="p-3 border border-gray-200 rounded-lg">
+            <div className="flex items-center justify-between mb-2">
+              <span className="font-medium text-sm">Webhook触发</span>
+              <div className="w-8 h-5 bg-gray-300 rounded-full relative cursor-pointer">
+                <div className="w-3 h-3 bg-white rounded-full absolute left-1 top-1"></div>
+              </div>
+            </div>
+            <div className="text-xs text-gray-500">
+              URL: https://api.example.com/webhook/abc123
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderVariableSettings = () => (
+    <div className="space-y-6">
+      <div>
+        <div className="flex items-center justify-between mb-3">
+          <h4 className="font-medium text-gray-900">环境变量</h4>
+          <button className="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap">
+            添加变量
+          </button>
+        </div>
+        <div className="space-y-2">
+          <div className="flex items-center space-x-2">
+            <input
+              type="text"
+              placeholder="变量名"
+              className="flex-1 px-3 py-2 border border-gray-300 rounded text-sm"
+            />
+            <input
+              type="text"
+              placeholder="变量值"
+              className="flex-1 px-3 py-2 border border-gray-300 rounded text-sm"
+            />
+            <button className="p-2 text-red-600 hover:bg-red-50 rounded cursor-pointer">
+              <div className="w-4 h-4 flex items-center justify-center">
+                <i className="ri-delete-bin-line"></i>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+      
+      <div>
+        <h4 className="font-medium text-gray-900 mb-3">全局配置</h4>
+        <div className="space-y-3">
+          <div>
+            <label className="block text-sm text-gray-700 mb-1">超时时间(秒)</label>
+            <input
+              type="number"
+              defaultValue="300"
+              className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-sm text-gray-700 mb-1">重试次数</label>
+            <input
+              type="number"
+              defaultValue="3"
+              className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderSecuritySettings = () => (
+    <div className="space-y-6">
+      <div>
+        <h4 className="font-medium text-gray-900 mb-3">访问权限</h4>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-700">公开工作流</span>
+            <div className="w-10 h-6 bg-gray-300 rounded-full relative cursor-pointer">
+              <div className="w-4 h-4 bg-white rounded-full absolute left-1 top-1"></div>
+            </div>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-700">需要API密钥</span>
+            <div className="w-10 h-6 bg-blue-600 rounded-full relative cursor-pointer">
+              <div className="w-4 h-4 bg-white rounded-full absolute right-1 top-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div>
+        <h4 className="font-medium text-gray-900 mb-3">数据安全</h4>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-700">加密存储</span>
+            <div className="w-10 h-6 bg-blue-600 rounded-full relative cursor-pointer">
+              <div className="w-4 h-4 bg-white rounded-full absolute right-1 top-1"></div>
+            </div>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-700">审计日志</span>
+            <div className="w-10 h-6 bg-blue-600 rounded-full relative cursor-pointer">
+              <div className="w-4 h-4 bg-white rounded-full absolute right-1 top-1"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderNodeSettings = () => {
+    if (!selectedNode) {
+      return (
+        <div className="flex items-center justify-center h-64 text-gray-500">
+          <div className="text-center">
+            <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
+              <div className="w-8 h-8 flex items-center justify-center">
+                <i className="ri-cursor-line text-2xl"></i>
+              </div>
+            </div>
+            <p className="font-medium">选择一个节点</p>
+            <p className="text-sm mt-1">点击画布上的节点来配置参数</p>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center space-x-3">
+          <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+            <span className="text-lg">{selectedNode.icon}</span>
+          </div>
+          <div>
+            <h3 className="font-semibold text-gray-900">{selectedNode.name}</h3>
+            <p className="text-sm text-gray-500">节点配置</p>
+          </div>
+        </div>
+        
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">节点名称</label>
+          <input
+            type="text"
+            defaultValue={selectedNode.name}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+          />
+        </div>
+        
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">描述</label>
+          <textarea
+            placeholder="节点功能描述"
+            rows={3}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm resize-none"
+          />
+        </div>
+        
+        {/* 根据节点类型显示不同的配置选项 */}
+        <div>
+          <h4 className="font-medium text-gray-900 mb-3">参数配置</h4>
+          <div className="space-y-3">
+            <div>
+              <label className="block text-sm text-gray-700 mb-1">输入参数</label>
+              <input
+                type="text"
+                placeholder="参数值"
+                className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm text-gray-700 mb-1">输出格式</label>
+              <select className="w-full px-3 py-2 border border-gray-300 rounded text-sm pr-8">
+                <option>JSON</option>
+                <option>XML</option>
+                <option>TEXT</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* 标签页 */}
+      <div className="p-4 border-b border-gray-200">
+        <div className="grid grid-cols-2 gap-1">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`p-2 rounded-lg text-xs font-medium transition-colors cursor-pointer ${
+                activeTab === tab.id
+                  ? 'bg-blue-100 text-blue-700'
+                  : 'text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              <div className="flex flex-col items-center space-y-1">
+                <div className="w-4 h-4 flex items-center justify-center">
+                  <i className={tab.icon}></i>
+                </div>
+                <span>{tab.name}</span>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 内容区域 */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {selectedNode && activeTab === 'general' ? renderNodeSettings() : 
+         activeTab === 'general' ? renderGeneralSettings() :
+         activeTab === 'triggers' ? renderTriggerSettings() :
+         activeTab === 'variables' ? renderVariableSettings() :
+         activeTab === 'security' ? renderSecuritySettings() : null}
+      </div>
+    </div>
+  );
+}

app/workflows/create/page.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import Header from '@/components/Header';
+import Sidebar from '@/components/Sidebar';
+import WorkflowBuilder from './WorkflowBuilder';
+
+export default function CreateWorkflowPage() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <div className="flex">
+        <Sidebar />
+        <main className="flex-1 p-8">
+          <div className="max-w-7xl mx-auto">
+            <div className="mb-8">
+              <h1 className="text-3xl font-bold text-gray-900 mb-2">创建新工作流</h1>
+              <p className="text-gray-600">设计和配置您的自动化工作流程</p>
+            </div>
+            
+            <WorkflowBuilder />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

app/workflows/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import Header from '@/components/Header';
+import Sidebar from '@/components/Sidebar';
+import WorkflowList from './WorkflowList';
+import WorkflowFilters from './WorkflowFilters';
+import Link from 'next/link';
+
+export default function WorkflowsPage() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <div className="flex">
+        <Sidebar />
+        <main className="flex-1 p-8">
+          <div className="max-w-7xl mx-auto">
+            <div className="flex items-center justify-between mb-8">
+              <div>
+                <h1 className="text-3xl font-bold text-gray-900 mb-2">工作流管理</h1>
+                <p className="text-gray-600">创建和管理自动化工作流程</p>
+              </div>
+              
+              <div className="flex items-center space-x-4">
+                <Link
+                  href="/workflows/templates"
+                  className="bg-white text-gray-700 border border-gray-300 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap"
+                >
+                  <div className="w-5 h-5 flex items-center justify-center inline-block mr-2">
+                    <i className="ri-template-line"></i>
+                  </div>
+                  模板库
+                </Link>
+                <Link
+                  href="/workflows/create"
+                  className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap"
+                >
+                  <div className="w-5 h-5 flex items-center justify-center inline-block mr-2">
+                    <i className="ri-add-line"></i>
+                  </div>
+                  创建工作流
+                </Link>
+              </div>
+            </div>
+            
+            <WorkflowFilters />
+            <WorkflowList />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

app/workflows/templates/TemplateFilters.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function TemplateFilters() {
+  const [activeCategory, setActiveCategory] = useState('all');
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const categories = [
+    { key: 'all', label: '全部模板', count: 48 },
+    { key: 'data-processing', label: '数据处理', count: 16 },
+    { key: 'content-creation', label: '内容创作', count: 12 },
+    { key: 'automation', label: '任务自动化', count: 10 },
+    { key: 'integration', label: '系统集成', count: 8 },
+    { key: 'ai-workflow', label: 'AI工作流', count: 6 }
+  ];
+
+  const popularTags = [
+    'API集成', '数据清洗', '内容生成', '邮件自动化', '报告生成', 
+    '社交媒体', '客户服务', '电商运营', '财务管理', '项目管理'
+  ];
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
+      <div className="flex flex-col gap-6">
+        {/* 分类筛选 */}
+        <div>
+          <h3 className="text-sm font-medium text-gray-900 mb-3">模板分类</h3>
+          <div className="flex flex-wrap gap-2">
+            {categories.map((category) => (
+              <button
+                key={category.key}
+                onClick={() => setActiveCategory(category.key)}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors cursor-pointer whitespace-nowrap ${
+                  activeCategory === category.key
+                    ? 'bg-blue-100 text-blue-700'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                }`}
+              >
+                {category.label} ({category.count})
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* 搜索和排序 */}
+        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+          <div className="relative flex-1 max-w-md">
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <div className="w-4 h-4 flex items-center justify-center">
+                <i className="ri-search-line text-gray-400"></i>
+              </div>
+            </div>
+            <input
+              type="text"
+              placeholder="搜索模板..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+            />
+          </div>
+          
+          <div className="flex items-center space-x-3">
+            <div className="relative">
+              <button className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap">
+                热门程度
+                <div className="w-4 h-4 flex items-center justify-center inline-block ml-2">
+                  <i className="ri-arrow-down-s-line"></i>
+                </div>
+              </button>
+            </div>
+            
+            <div className="relative">
+              <button className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap">
+                创建时间
+                <div className="w-4 h-4 flex items-center justify-center inline-block ml-2">
+                  <i className="ri-arrow-down-s-line"></i>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* 热门标签 */}
+        <div>
+          <h3 className="text-sm font-medium text-gray-900 mb-3">热门标签</h3>
+          <div className="flex flex-wrap gap-2">
+            {popularTags.map((tag, index) => (
+              <button
+                key={index}
+                className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full hover:bg-gray-200 transition-colors cursor-pointer whitespace-nowrap"
+              >
+                {tag}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/workflows/templates/TemplateLibrary.tsx

@@ -0,0 +1,290 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+
+export default function TemplateLibrary() {
+  const [selectedTemplate, setSelectedTemplate] = useState<number | null>(null);
+
+  const templates = [
+    {
+      id: 1,
+      name: '客户数据自动化处理',
+      description: '自动收集、清洗和分析客户数据，生成洞察报告',
+      category: '数据处理',
+      difficulty: '中级',
+      estimatedTime: '10-15分钟',
+      usageCount: 2156,
+      rating: 4.8,
+      tags: ['数据清洗', 'ETL', '客户分析', '报告生成'],
+      icon: '📊',
+      features: ['自动数据收集', '智能数据清洗', '实时分析', '可视化报表'],
+      preview: 'https://readdy.ai/api/search-image?query=modern%20data%20processing%20dashboard%20with%20clean%20charts%20and%20analytics%20visualization%2C%20blue%20and%20white%20interface%2C%20professional%20business%20intelligence%20design&width=400&height=240&seq=template_1&orientation=landscape'
+    },
+    {
+      id: 2,
+      name: 'AI内容创作助手',
+      description: '基于关键词自动生成高质量文章并发布到多个平台',
+      category: '内容创作',
+      difficulty: '简单',
+      estimatedTime: '5-10分钟',
+      usageCount: 1892,
+      rating: 4.9,
+      tags: ['内容生成', 'SEO优化', '多平台发布', 'AI写作'],
+      icon: '✍️',
+      features: ['AI智能写作', 'SEO优化', '一键发布', '内容调度'],
+      preview: 'https://readdy.ai/api/search-image?query=AI%20content%20creation%20interface%20with%20writing%20tools%20and%20publishing%20options%2C%20modern%20minimalist%20design%20with%20purple%20and%20blue%20accents&width=400&height=240&seq=template_2&orientation=landscape'
+    },
+    {
+      id: 3,
+      name: '邮件智能管理系统',
+      description: '自动分类邮件、生成智能回复并跟踪邮件状态',
+      category: '任务自动化',
+      difficulty: '中级',
+      estimatedTime: '8-12分钟',
+      usageCount: 1456,
+      rating: 4.7,
+      tags: ['邮件自动化', 'NLP处理', '智能回复', '状态跟踪'],
+      icon: '📧',
+      features: ['智能分类', '自动回复', '状态跟踪', '优先级管理'],
+      preview: 'https://readdy.ai/api/search-image?query=email%20management%20dashboard%20with%20organized%20inbox%2C%20smart%20filtering%20and%20automated%20responses%2C%20clean%20modern%20interface%20design&width=400&height=240&seq=template_3&orientation=landscape'
+    },
+    {
+      id: 4,
+      name: '电商订单自动化',
+      description: '从订单接收到发货的完整自动化处理流程',
+      category: '系统集成',
+      difficulty: '高级',
+      estimatedTime: '15-20分钟',
+      usageCount: 1234,
+      rating: 4.8,
+      tags: ['订单处理', 'ERP集成', '库存管理', '物流跟踪'],
+      icon: '📦',
+      features: ['订单自动处理', '库存同步', '物流跟踪', '异常处理'],
+      preview: 'https://readdy.ai/api/search-image?query=e-commerce%20order%20processing%20dashboard%20with%20inventory%20management%20and%20shipping%20tracking%2C%20professional%20blue%20and%20orange%20design&width=400&height=240&seq=template_4&orientation=landscape'
+    },
+    {
+      id: 5,
+      name: '社交媒体监控',
+      description: '监控品牌提及、分析情感倾向并生成营销洞察',
+      category: '数据处理',
+      difficulty: '中级',
+      estimatedTime: '12-18分钟',
+      usageCount: 987,
+      rating: 4.6,
+      tags: ['社媒监控', '情感分析', '品牌监测', '营销洞察'],
+      icon: '📱',
+      features: ['实时监控', '情感分析', '趋势预测', '竞品分析'],
+      preview: 'https://readdy.ai/api/search-image?query=social%20media%20monitoring%20dashboard%20with%20sentiment%20analysis%20charts%20and%20brand%20mention%20tracking%2C%20modern%20colorful%20interface&width=400&height=240&seq=template_5&orientation=landscape'
+    },
+    {
+      id: 6,
+      name: '财务报表自动化',
+      description: '自动收集财务数据，生成专业的财务报表和分析',
+      category: '数据处理',
+      difficulty: '高级',
+      estimatedTime: '20-25分钟',
+      usageCount: 756,
+      rating: 4.9,
+      tags: ['财务分析', '报表生成', '数据可视化', 'BI集成'],
+      icon: '💰',
+      features: ['多源数据整合', '自动报表', '财务分析', '预算跟踪'],
+      preview: 'https://readdy.ai/api/search-image?query=financial%20reporting%20dashboard%20with%20charts%20graphs%20and%20financial%20analytics%2C%20professional%20green%20and%20blue%20business%20interface&width=400&height=240&seq=template_6&orientation=landscape'
+    },
+    {
+      id: 7,
+      name: '客户服务自动化',
+      description: '智能客服机器人，自动回复客户询问并转接人工',
+      category: 'AI工作流',
+      difficulty: '中级',
+      estimatedTime: '10-15分钟',
+      usageCount: 1678,
+      rating: 4.7,
+      tags: ['智能客服', '自动回复', '工单管理', '人工转接'],
+      icon: '🤖',
+      features: ['智能对话', '多渠道支持', '工单管理', '知识库'],
+      preview: 'https://readdy.ai/api/search-image?query=customer%20service%20chatbot%20interface%20with%20conversation%20flow%20and%20automated%20responses%2C%20friendly%20blue%20and%20white%20design&width=400&height=240&seq=template_7&orientation=landscape'
+    },
+    {
+      id: 8,
+      name: '数据备份与同步',
+      description: '定期备份重要数据并同步到多个云存储平台',
+      category: '系统集成',
+      difficulty: '简单',
+      estimatedTime: '5-8分钟',
+      usageCount: 1345,
+      rating: 4.8,
+      tags: ['数据备份', '云同步', '定时任务', '安全存储'],
+      icon: '☁️',
+      features: ['定时备份', '多云同步', '数据加密', '恢复管理'],
+      preview: 'https://readdy.ai/api/search-image?query=cloud%20backup%20and%20sync%20dashboard%20with%20progress%20indicators%20and%20storage%20management%2C%20clean%20modern%20tech%20interface&width=400&height=240&seq=template_8&orientation=landscape'
+    },
+    {
+      id: 9,
+      name: '项目进度跟踪',
+      description: '自动跟踪项目进度，生成进度报告并发送提醒',
+      category: '任务自动化',
+      difficulty: '中级',
+      estimatedTime: '12-15分钟',
+      usageCount: 892,
+      rating: 4.6,
+      tags: ['项目管理', '进度跟踪', '报告生成', '提醒通知'],
+      icon: '📋',
+      features: ['进度监控', '里程碑跟踪', '团队协作', '风险预警'],
+      preview: 'https://readdy.ai/api/search-image?query=project%20management%20dashboard%20with%20progress%20tracking%20and%20milestone%20indicators%2C%20professional%20purple%20and%20blue%20interface&width=400&height=240&seq=template_9&orientation=landscape'
+    }
+  ];
+
+  const getDifficultyColor = (difficulty: string) => {
+    switch (difficulty) {
+      case '简单': return 'text-green-600 bg-green-100';
+      case '中级': return 'text-yellow-600 bg-yellow-100';
+      case '高级': return 'text-red-600 bg-red-100';
+      default: return 'text-gray-600 bg-gray-100';
+    }
+  };
+
+  const handleUseTemplate = (templateId: number) => {
+    console.log('使用模板:', templateId);
+    // 这里可以跳转到创建页面并预填充模板数据
+  };
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+      {templates.map((template) => (
+        <div
+          key={template.id}
+          className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
+          onClick={() => setSelectedTemplate(selectedTemplate === template.id ? null : template.id)}
+        >
+          {/* 模板预览图 */}
+          <div className="relative h-48 bg-gray-100">
+            <img
+              src={template.preview}
+              alt={template.name}
+              className="w-full h-full object-cover object-top"
+            />
+            <div className="absolute top-3 right-3 bg-white rounded-full p-2 shadow-md">
+              <span className="text-xl">{template.icon}</span>
+            </div>
+            <div className="absolute bottom-3 left-3 flex items-center space-x-2">
+              <span className={`px-2 py-1 text-xs rounded-full ${getDifficultyColor(template.difficulty)}`}>
+                {template.difficulty}
+              </span>
+              <span className="px-2 py-1 text-xs bg-gray-900 text-white rounded-full">
+                {template.estimatedTime}
+              </span>
+            </div>
+          </div>
+
+          {/* 模板信息 */}
+          <div className="p-6">
+            <div className="flex items-start justify-between mb-3">
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-1">{template.name}</h3>
+                <span className="text-sm text-blue-600 font-medium">{template.category}</span>
+              </div>
+              <div className="flex items-center space-x-1">
+                <div className="w-4 h-4 flex items-center justify-center">
+                  <i className="ri-star-fill text-yellow-400"></i>
+                </div>
+                <span className="text-sm font-medium text-gray-700">{template.rating}</span>
+              </div>
+            </div>
+
+            <p className="text-gray-600 text-sm mb-4 leading-relaxed">
+              {template.description}
+            </p>
+
+            {/* 使用统计 */}
+            <div className="flex items-center text-sm text-gray-500 mb-4">
+              <div className="w-4 h-4 flex items-center justify-center mr-1">
+                <i className="ri-user-line"></i>
+              </div>
+              <span>{template.usageCount.toLocaleString()} 次使用</span>
+            </div>
+
+            {/* 标签 */}
+            <div className="flex flex-wrap gap-1 mb-4">
+              {template.tags.slice(0, 3).map((tag, index) => (
+                <span
+                  key={index}
+                  className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full"
+                >
+                  {tag}
+                </span>
+              ))}
+              {template.tags.length > 3 && (
+                <span className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">
+                  +{template.tags.length - 3}
+                </span>
+              )}
+            </div>
+
+            {/* 展开的详细信息 */}
+            {selectedTemplate === template.id && (
+              <div className="border-t border-gray-200 pt-4 mt-4">
+                <div className="mb-4">
+                  <h4 className="text-sm font-medium text-gray-900 mb-2">主要功能</h4>
+                  <ul className="space-y-1">
+                    {template.features.map((feature, index) => (
+                      <li key={index} className="text-sm text-gray-600 flex items-center">
+                        <div className="w-4 h-4 flex items-center justify-center mr-2">
+                          <i className="ri-check-line text-green-500"></i>
+                        </div>
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div className="mb-4">
+                  <h4 className="text-sm font-medium text-gray-900 mb-2">所有标签</h4>
+                  <div className="flex flex-wrap gap-1">
+                    {template.tags.map((tag, index) => (
+                      <span
+                        key={index}
+                        className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 操作按钮 */}
+            <div className="flex items-center space-x-3">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleUseTemplate(template.id);
+                }}
+                className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700 transition-colors whitespace-nowrap"
+              >
+                使用模板
+              </button>
+              <button
+                onClick={(e) => e.stopPropagation()}
+                className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
+              >
+                <div className="w-5 h-5 flex items-center justify-center">
+                  <i className="ri-eye-line"></i>
+                </div>
+              </button>
+              <button
+                onClick={(e) => e.stopPropagation()}
+                className="p-2 text-gray-400 hover:text-red-600 transition-colors"
+              >
+                <div className="w-5 h-5 flex items-center justify-center">
+                  <i className="ri-heart-line"></i>
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

app/workflows/templates/page.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import Header from '@/components/Header';
+import Sidebar from '@/components/Sidebar';
+import TemplateLibrary from './TemplateLibrary';
+import TemplateFilters from './TemplateFilters';
+import Link from 'next/link';
+
+export default function WorkflowTemplatesPage() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <div className="flex">
+        <Sidebar />
+        <main className="flex-1 p-8">
+          <div className="max-w-7xl mx-auto">
+            <div className="flex items-center justify-between mb-8">
+              <div>
+                <div className="flex items-center space-x-3 mb-2">
+                  <Link
+                    href="/workflows"
+                    className="text-gray-500 hover:text-gray-700 transition-colors cursor-pointer"
+                  >
+                    <div className="w-5 h-5 flex items-center justify-center">
+                      <i className="ri-arrow-left-line"></i>
+                    </div>
+                  </Link>
+                  <h1 className="text-3xl font-bold text-gray-900">工作流模板库</h1>
+                </div>
+                <p className="text-gray-600">选择预设模板快速创建工作流</p>
+              </div>
+              
+              <div className="flex items-center space-x-4">
+                <Link
+                  href="/workflows/create"
+                  className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap"
+                >
+                  <div className="w-5 h-5 flex items-center justify-center inline-block mr-2">
+                    <i className="ri-add-line"></i>
+                  </div>
+                  自定义创建
+                </Link>
+              </div>
+            </div>
+            
+            <TemplateFilters />
+            <TemplateLibrary />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

components/Header.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+
+export default function Header() {
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+
+  return (
+    <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
+      <div className="flex items-center justify-between px-6 py-4">
+        <div className="flex items-center space-x-8">
+          <Link href="/" className="text-2xl font-bold text-blue-600" style={{ fontFamily: 'Pacifico, serif' }}>
+            AI Agent Studio
+          </Link>
+          <nav className="hidden md:flex items-center space-x-6">
+            <Link href="/dashboard" className="text-gray-700 hover:text-blue-600 transition-colors">
+              工作台
+            </Link>
+            <Link href="/agents" className="text-gray-700 hover:text-blue-600 transition-colors">
+              Agent管理
+            </Link>
+            <Link href="/workflows" className="text-gray-700 hover:text-blue-600 transition-colors">
+              工作流
+            </Link>
+            <Link href="/knowledge" className="text-gray-700 hover:text-blue-600 transition-colors">
+              知识库
+            </Link>
+            <Link href="/templates" className="text-gray-700 hover:text-blue-600 transition-colors">
+              模板市场
+            </Link>
+          </nav>
+        </div>
+        
+        <div className="flex items-center space-x-4">
+          <div className="relative">
+            <div className="w-8 h-8 flex items-center justify-center">
+              <i className="ri-notification-line text-gray-600 text-xl"></i>
+            </div>
+            <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
+          </div>
+          
+          <div className="relative">
+            <button 
+              onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
+              className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
+            >
+              <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
+                <span className="text-white text-sm font-medium">张</span>
+              </div>
+              <div className="w-4 h-4 flex items-center justify-center">
+                <i className="ri-arrow-down-s-line text-gray-600"></i>
+              </div>
+            </button>
+            
+            {isUserMenuOpen && (
+              <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2">
+                <div className="px-4 py-2 border-b border-gray-100">
+                  <p className="text-sm font-medium text-gray-900">张三</p>
+                  <p className="text-xs text-gray-500">zhang@example.com</p>
+                </div>
+                <Link href="/profile" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
+                  个人设置
+                </Link>
+                <Link href="/billing" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
+                  账单管理
+                </Link>
+                <div className="border-t border-gray-100 mt-2">
+                  <button className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
+                    退出登录
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

components/Sidebar.tsx

@@ -0,0 +1,49 @@
+
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export default function Sidebar() {
+  const pathname = usePathname();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const menuItems = [
+    { name: '工作台', href: '/dashboard', icon: 'ri-dashboard-line' },
+    { name: 'Agent管理', href: '/agents', icon: 'ri-robot-line' },
+    { name: '工作流', href: '/workflows', icon: 'ri-flow-chart' },
+    { name: '知识库', href: '/knowledge', icon: 'ri-book-line' },
+    { name: '模板市场', href: '/templates', icon: 'ri-store-line' },
+    { name: '数据分析', href: '/analytics', icon: 'ri-bar-chart-line' },
+    { name: '设置', href: '/settings', icon: 'ri-settings-line' }
+  ];
+
+  return (
+    <div className={`bg-white border-r border-gray-200 flex-shrink-0 transition-all duration-300 ${
+      isCollapsed ? 'w-16' : 'w-64'
+    }`}>
+      <div className="p-6">
+        <h2 className="text-lg font-semibold text-gray-900 mb-6">导航菜单</h2>
+        <nav className="space-y-2">
+          {menuItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors cursor-pointer ${
+                pathname === item.href
+                  ? 'bg-blue-50 text-blue-600 border-l-4 border-blue-600'
+                  : 'text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              <div className="w-5 h-5 flex items-center justify-center">
+                <i className={`${item.icon} text-lg`}></i>
+              </div>
+              <span className="font-medium">{item.name}</span>
+            </Link>
+          ))}
+        </nav>
+      </div>
+    </div>
+  );
+}

eslint.config.mjs

@@ -0,0 +1,21 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off"
+    }
+  }
+];
+
+export default eslintConfig;

index.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8">
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
-    <div class="w-full">
-      <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
-      <h1 class="text-4xl lg:text-6xl font-bold font-sans">
-        <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
-        Ask me anything.
-      </h1>
-    </div>
-      <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
-    <script></script>
-  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=daios007/test1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>

next.config.ts

@@ -0,0 +1,13 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "export",
+  images: {
+    unoptimized: true,
+  },
+  typescript: {
+    // ignoreBuildErrors: true,
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development next dev -H 0.0.0.0 -p 3000",
+    "build": "next build",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@react-google-maps/api": "^2.19.3",
+    "next": "15.3.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "recharts": "^3.0.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.21",
+    "cross-env": "^7.0.3",
+    "postcss": "^8.5.5",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
+
+export default config;

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}