优化

.env

@@ -0,0 +1,3 @@
+SILICONFLOW_API_KEY=sk-uuejewptzohwsbbutfnrkbcloaqxydjmxbeqptwphnhiuopl
+SILICONFLOW_MODEL=deepseek-ai/DeepSeek-V3
+PORT=3001

api/app.ts

@@ -33,6 +33,12 @@ app.use(express.urlencoded({ extended: true, limit: '10mb' }))
 app.use('/api/auth', authRoutes)
 app.use('/api/ai', aiRoutes)
 
+/**
+ * 静态文件服务 - 用于生产环境
+ */
+const distPath = path.join(__dirname, '../dist')
+app.use(express.static(distPath))
+
 /**
  * 健康检查接口
  */
@@ -58,13 +64,17 @@ app.use((error: Error, req: Request, res: Response, next: NextFunction) => {
 })
 
 /**
- * 404 未找到处理
+ * 404 未找到处理 - 重定向到前端首页以支持 SPA 路由
  */
 app.use((req: Request, res: Response) => {
-  res.status(404).json({
-    success: false,
-    error: '接口不存在',
-  })
+  if (req.path.startsWith('/api/')) {
+    res.status(404).json({
+      success: false,
+      error: '接口不存在',
+    })
+  } else {
+    res.sendFile(path.join(distPath, 'index.html'))
+  }
 })
 
 export default app

api/routes/ai.ts

@@ -68,7 +68,18 @@ router.post('/generate', async (req: Request, res: Response): Promise<void> => {
       },
     })
   } catch (error: any) {
-    console.error('AI Generation Error:', error.response?.data || error.message)
+    const errorData = error.response?.data
+    console.error('AI Generation Error:', errorData || error.message)
+    
+    // 针对余额不足提供更明确的提示
+    if (errorData?.code === 30001) {
+      res.status(500).json({
+        success: false,
+        error: '硅基流 API 账户余额不足，请检查您的账户余额。',
+      })
+      return
+    }
+
     res.status(500).json({
       success: false,
       error: 'AI 生成失败，请稍后再试',

api/routes/auth.ts

@@ -1,33 +1,33 @@
 /**
- * This is a user authentication API route demo.
- * Handle user registration, login, token management, etc.
+ * 用户认证 API 路由演示。
+ * 处理用户注册、登录、Token 管理等。
  */
 import { Router, type Request, type Response } from 'express'
 
 const router = Router()
 
 /**
- * User Login
+ * 用户注册
  * POST /api/auth/register
  */
 router.post('/register', async (req: Request, res: Response): Promise<void> => {
-  // TODO: Implement register logic
+  // TODO: 实现注册逻辑
 })
 
 /**
- * User Login
+ * 用户登录
  * POST /api/auth/login
  */
 router.post('/login', async (req: Request, res: Response): Promise<void> => {
-  // TODO: Implement login logic
+  // TODO: 实现登录逻辑
 })
 
 /**
- * User Logout
+ * 用户退出
  * POST /api/auth/logout
  */
 router.post('/logout', async (req: Request, res: Response): Promise<void> => {
-  // TODO: Implement logout logic
+  // TODO: 实现退出逻辑
 })
 
 export default router

api/server.ts

@@ -1,32 +1,32 @@
 /**
- * local server entry file, for local development
+ * 本地服务入口文件，用于本地开发
  */
 import app from './app.js';
 
 /**
- * start server with port
+ * 启动服务器，指定端口
  */
 const PORT = process.env.PORT || 3001;
 
 const server = app.listen(PORT, () => {
-  console.log(`Server ready on port ${PORT}`);
+  console.log(`服务器已在端口 ${PORT} 就绪`);
 });
 
 /**
- * close server
+ * 优雅关闭服务器
  */
 process.on('SIGTERM', () => {
-  console.log('SIGTERM signal received');
+  console.log('收到 SIGTERM 信号');
   server.close(() => {
-    console.log('Server closed');
+    console.log('服务器已关闭');
     process.exit(0);
   });
 });
 
 process.on('SIGINT', () => {
-  console.log('SIGINT signal received');
+  console.log('收到 SIGINT 信号');
   server.close(() => {
-    console.log('Server closed');
+    console.log('服务器已关闭');
     process.exit(0);
   });
 });

src/App.tsx

@@ -6,7 +6,7 @@ export default function App() {
     <Router>
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/other" element={<div className="text-center text-xl">Other Page - Coming Soon</div>} />
+        <Route path="/other" element={<div className="text-center text-xl">其他页面 - 敬请期待</div>} />
       </Routes>
     </Router>
   );

src/hooks/useTheme.ts

@@ -2,21 +2,28 @@ import { useState, useEffect } from 'react';
 
 type Theme = 'light' | 'dark';
 
+/**
+ * 主题切换 Hook
+ */
 export function useTheme() {
   const [theme, setTheme] = useState<Theme>(() => {
+    // 从本地存储读取主题
     const savedTheme = localStorage.getItem('theme') as Theme;
     if (savedTheme) {
       return savedTheme;
     }
+    // 默认跟随系统
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   });
 
   useEffect(() => {
+    // 更新 HTML class 和本地存储
     document.documentElement.classList.remove('light', 'dark');
     document.documentElement.classList.add(theme);
     localStorage.setItem('theme', theme);
   }, [theme]);
 
+  // 切换主题方法
   const toggleTheme = () => {
     setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
   };

src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { Layout, Input, Button, Card, List, Typography, Space, Divider } from 'antd';
-import { SendOutlined, HistoryOutlined, SettingOutlined, ProjectOutlined } from '@ant-design/icons';
+import { Layout, Input, Button, Card, List, Typography, Space, Divider, message, Spin } from 'antd';
+import { SendOutlined, HistoryOutlined, SettingOutlined, ProjectOutlined, CodeOutlined, EyeOutlined } from '@ant-design/icons';
+import axios from 'axios';
 
 const { Header, Content, Sider } = Layout;
 const { TextArea } = Input;
@@ -8,16 +9,43 @@ const { Title, Text } = Typography;
 
 export default function Home() {
   const [input, setInput] = useState('');
-  const [history] = useState([
+  const [loading, setLoading] = useState(false);
+  const [generatedCode, setGeneratedCode] = useState('');
+  const [history, setHistory] = useState([
     '生成一个蓝色风格的登录页面',
     '创建一个电商首页轮播图',
     '设计一个响应式的个人主页',
   ]);
+  const [viewMode, setViewMode] = useState<'preview' | 'code'>('preview');
+
+  const handleGenerate = async () => {
+    if (!input.trim()) {
+      message.warning('请输入您的描述内容');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await axios.post('/api/ai/generate', { prompt: input });
+      if (response.data.success) {
+        setGeneratedCode(response.data.data.code);
+        setHistory([input, ...history.slice(0, 9)]);
+        message.success('生成成功！');
+      } else {
+        message.error(response.data.error || '生成失败');
+      }
+    } catch (error) {
+      console.error('Generation failed:', error);
+      message.error('请求失败，请检查后端服务是否正常运行');
+    } finally {
+      setLoading(false);
+    }
+  };
 
   return (
     <Layout style={{ minHeight: '100vh' }}>
       <Header style={{ background: '#fff', padding: '0 24px', display: 'flex', alignItems: 'center', borderBottom: '1px solid #f0f0f0' }}>
-        <Title level={4} style={{ margin: 0, color: '#1890ff' }}>Generative UI Agent</Title>
+        <Title level={4} style={{ margin: 0, color: '#1890ff' }}>生成式 UI Agent</Title>
         <div style={{ marginLeft: 'auto' }}>
           <Space size="large">
             <Button type="text" icon={<ProjectOutlined />}>项目管理</Button>
@@ -32,7 +60,10 @@ export default function Home() {
             <List
               dataSource={history}
               renderItem={(item) => (
-                <List.Item style={{ cursor: 'pointer', padding: '8px 0' }}>
+                <List.Item 
+                  style={{ cursor: 'pointer', padding: '8px 0' }}
+                  onClick={() => setInput(item)}
+                >
                   <Text ellipsis>{item}</Text>
                 </List.Item>
               )}
@@ -41,30 +72,37 @@ export default function Home() {
         </Sider>
         <Content style={{ padding: '24px', display: 'flex', gap: '24px' }}>
           <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '16px' }}>
-            <Card title="AI 对话输入" bordered={false} style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.06)' }}>
+            <Card title="AI 对话输入" variant="borderless" style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.06)' }}>
               <TextArea
                 rows={4}
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
-                placeholder="描述你想要的 UI 界面..."
+                placeholder="描述你想要的 UI 界面，例如：'生成一个精美的博客主页'..."
                 style={{ marginBottom: '16px' }}
+                disabled={loading}
               />
               <div style={{ textAlign: 'right' }}>
-                <Button type="primary" icon={<SendOutlined />} size="large">
-                  开始生成
+                <Button 
+                  type="primary" 
+                  icon={<SendOutlined />} 
+                  size="large"
+                  onClick={handleGenerate}
+                  loading={loading}
+                >
+                  {loading ? '正在生成...' : '开始生成'}
                 </Button>
               </div>
             </Card>
             
-            <Card title="系统状态" bordered={false} style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.06)' }}>
+            <Card title="系统状态" variant="borderless" style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.06)' }}>
               <Space direction="vertical" style={{ width: '100%' }}>
                 <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                   <Text>API 状态</Text>
-                  <Text type="success">已连接</Text>
+                  <Text type="success">已连接 (SiliconFlow)</Text>
                 </div>
                 <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                  <Text>模型版本</Text>
-                  <Text>GPT-4o</Text>
+                  <Text>当前模型</Text>
+                  <Text>DeepSeek-V3</Text>
                 </div>
               </Space>
             </Card>
@@ -73,13 +111,63 @@ export default function Home() {
           <div style={{ flex: 2 }}>
             <Card 
               title="实时预览" 
-              extra={<Space><Button size="small">桌面端</Button><Button size="small">移动端</Button></Space>}
-              style={{ height: '100%', boxShadow: '0 2px 8px rgba(0,0,0,0.06)' }}
-              bodyStyle={{ height: 'calc(100% - 58px)', display: 'flex', alignItems: 'center', justifyCenter: 'center', background: '#f5f5f5' }}
+              extra={
+                <Space>
+                  <Button 
+                    size="small" 
+                    type={viewMode === 'preview' ? 'primary' : 'default'}
+                    icon={<EyeOutlined />}
+                    onClick={() => setViewMode('preview')}
+                  >
+                    预览
+                  </Button>
+                  <Button 
+                    size="small" 
+                    type={viewMode === 'code' ? 'primary' : 'default'}
+                    icon={<CodeOutlined />}
+                    onClick={() => setViewMode('code')}
+                  >
+                    代码
+                  </Button>
+                </Space>
+              }
+              style={{ height: '100%', minHeight: '600px', boxShadow: '0 2px 8px rgba(0,0,0,0.06)' }}
+              styles={{ body: { height: 'calc(100% - 58px)', padding: 0, overflow: 'auto', background: '#f5f5f5' } }}
             >
-              <div style={{ width: '100%', height: '100%', background: '#fff', border: '1px dashed #d9d9d9', borderRadius: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                <Text type="secondary">生成的 UI 将在这里实时显示</Text>
-              </div>
+              {loading ? (
+                <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                  <Space direction="vertical" align="center">
+                    <Spin size="large" />
+                    <Text type="secondary">AI 正在为您精心设计界面...</Text>
+                  </Space>
+                </div>
+              ) : generatedCode ? (
+                viewMode === 'preview' ? (
+                  <div style={{ padding: '24px', height: '100%', width: '100%' }}>
+                    <div style={{ background: '#fff', padding: '24px', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.08)', minHeight: '100%' }}>
+                      {/* 简单起见，这里显示生成的代码说明，真实预览通常需要 react-live 或类似组件 */}
+                      <Title level={4}>预览说明</Title>
+                      <Text style={{ display: 'block', marginBottom: 16 }}>
+                        AI 已为您生成了完整的 React + Tailwind 代码。
+                      </Text>
+                      <Divider />
+                      <div style={{ background: '#fafafa', padding: '16px', borderRadius: '4px', border: '1px solid #eee' }}>
+                        <Text type="secondary">
+                          由于环境限制，当前预览仅支持静态渲染提示。您可以点击右上角“代码”查看并复制生成的完整源代码。
+                        </Text>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <pre style={{ margin: 0, padding: '24px', background: '#1e1e1e', color: '#d4d4d4', overflow: 'auto', height: '100%' }}>
+                    <code>{generatedCode}</code>
+                  </pre>
+                )
+              ) : (
+                <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                  <Text type="secondary">生成的 UI 将在这里实时显示</Text>
+                </div>
+              )}
             </Card>
           </div>
         </Content>

vite.config.ts

@@ -6,22 +6,16 @@ import { traeBadgePlugin } from 'vite-plugin-trae-solo-badge';
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
-    react({
-      babel: {
-        plugins: [
-          'react-dev-locator',
-        ],
-      },
-    }),
-    traeBadgePlugin({
-      variant: 'dark',
-      position: 'bottom-right',
-      prodOnly: true,
-      clickable: true,
-      clickUrl: 'https://www.trae.ai/solo?showJoin=1',
-      autoTheme: true,
-      autoThemeTarget: '#root'
-    }), 
+    react(),
+    // traeBadgePlugin({
+    //   variant: 'dark',
+    //   position: 'bottom-right',
+    //   prodOnly: true,
+    //   clickable: true,
+    //   clickUrl: 'https://www.trae.ai/solo?showJoin=1',
+    //   autoTheme: true,
+    //   autoThemeTarget: '#root'
+    // }), 
     tsconfigPaths(),
   ],
   server: {