From 3646d5ec937725a482cb0d3c9e5eba130886c2a3 Mon Sep 17 00:00:00 2001 From: Shu Guang <61069967+shuguangnet@users.noreply.github.com> Date: Thu, 17 Apr 2025 21:17:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0API=E5=AF=86=E9=92=A5?= =?UTF-8?q?=E5=BC=80=E6=94=BE=E5=B9=B3=E5=8F=B0&=E4=B8=BB=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/routes.ts | 6 +- src/pages/HomePage/index.tsx | 131 ++++++++++++++++++++++ src/pages/OpenPlatform/index.tsx | 182 +++++++++++++++++++++++++++++++ 3 files changed, 317 insertions(+), 2 deletions(-) create mode 100644 src/pages/HomePage/index.tsx create mode 100644 src/pages/OpenPlatform/index.tsx diff --git a/config/routes.ts b/config/routes.ts index 972beff..d9249fb 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -3,11 +3,13 @@ export default [ { name: '登录', path: '/user/login', component: './User/Login' }, { name: '注册', path: '/user/register', component: './User/Register' } ]}, - {path:"/", redirect: "/add_chart"}, + {path:"/", redirect: "/home"}, + { path: '/home', name :"首页", icon: "PieChartOutlined", component: './HomePage' }, { path: '/add_chart', name :"智能分析", icon: "barChart", component: './AddChart' }, { path: '/add_async', name :"智能分析(异步)", icon: "DotChartOutlined", component: './AddChartAsync' }, - { path: '/my_chart', name :"我的图表", icon: "PictureOutlined", component: './MyChart' }, + { path: '/my_chart', name: "我的图表", icon: "PictureOutlined", component: './MyChart' }, + { path: '/open_platform', name :"开放中心", icon: "ApiOutlined", component: './OpenPlatform' }, { path: '/forum', name :"交流论坛", icon: "CrownOutlined", component: './Forum' }, { path: '/admin', diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx new file mode 100644 index 0000000..f58a5d2 --- /dev/null +++ b/src/pages/HomePage/index.tsx @@ -0,0 +1,131 @@ +import { PageContainer, ProCard } from '@ant-design/pro-components'; +import { Card, Col, Row, Statistic } from 'antd'; +import React, { useEffect, useState } from 'react'; +import ReactECharts from 'echarts-for-react'; +import { useModel } from '@@/exports'; + +const HomePage: React.FC = () => { + const { initialState } = useModel('@@initialState'); + const { currentUser } = initialState ?? {}; + const [loading, setLoading] = useState(true); + + // TODO : 获取统计数据 + const [statisticsData] = useState({ + totalCharts: 126, + successRate: 95, + todayGenerated: 28, + totalUsers: 1580, + }); + + const chartOptions = { + title: { + text: '近期图表生成趋势', + show: false, + }, + tooltip: { + trigger: 'axis', + }, + xAxis: { + type: 'category', + data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], + }, + yAxis: { + type: 'value', + }, + series: [ + { + name: '生成数量', + type: 'line', + smooth: true, + data: [15, 22, 18, 25, 20, 30, 28], + areaStyle: { + opacity: 0.1, + }, + }, + ], + }; + + const pieOptions = { + tooltip: { + trigger: 'item', + }, + legend: { + orient: 'vertical', + left: 'left', + }, + series: [ + { + name: '图表类型分布', + type: 'pie', + radius: '50%', + data: [ + { value: 35, name: '折线图' }, + { value: 30, name: '柱状图' }, + { value: 20, name: '饼图' }, + { value: 15, name: '散点图' }, + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)', + }, + }, + }, + ], + }; + + useEffect(() => { + // 模拟数据加载 + setTimeout(() => { + setLoading(false); + }, 1000); + }, []); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default HomePage; \ No newline at end of file diff --git a/src/pages/OpenPlatform/index.tsx b/src/pages/OpenPlatform/index.tsx new file mode 100644 index 0000000..f8015f6 --- /dev/null +++ b/src/pages/OpenPlatform/index.tsx @@ -0,0 +1,182 @@ +import { PageContainer, ProCard } from '@ant-design/pro-components'; +import { Button, Card, Col, Descriptions, Input, message, Modal, Row, Space, Table, Tag } from 'antd'; +import React, { useEffect, useState } from 'react'; +import { CopyOutlined, KeyOutlined, ReloadOutlined } from '@ant-design/icons'; + +const OpenPlatform: React.FC = () => { + const [loading, setLoading] = useState(false); + const [visible, setVisible] = useState(false); + const [apiKey, setApiKey] = useState(''); + + // TODO:API密钥数据 + const [keyList, setKeyList] = useState([ + { + id: 1, + accessKey: 'ak_xxxxxxxxxxxx', + secretKey: 'sk_xxxxxxxxxxxx', + status: 'active', + createTime: '2024-01-01 12:00:00', + expiryTime: '2025-01-01 12:00:00', + calls: 1234, + }, + ]); + + const columns = [ + { + title: 'Access Key', + dataIndex: 'accessKey', + key: 'accessKey', + }, + { + title: 'Secret Key', + dataIndex: 'secretKey', + key: 'secretKey', + render: (text: string) => ( + + {'*'.repeat(20)} + + + + ), + }, + ]; + + const handleCreateKey = () => { + setLoading(true); + // 这里应该调用后端API创建密钥 + setTimeout(() => { + const newKey = { + id: keyList.length + 1, + accessKey: `ak_${Math.random().toString(36).substring(2)}`, + secretKey: `sk_${Math.random().toString(36).substring(2)}`, + status: 'active', + createTime: new Date().toLocaleString(), + expiryTime: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toLocaleString(), + calls: 0, + }; + setKeyList([...keyList, newKey]); + setLoading(false); + message.success('创建成功'); + }, 1000); + }; + + const handleDisableKey = (id: number) => { + setKeyList( + keyList.map((key) => + key.id === id ? { ...key, status: key.status === 'active' ? 'inactive' : 'active' } : key, + ), + ); + }; + + const handleDeleteKey = (id: number) => { + Modal.confirm({ + title: '确认删除', + content: '删除后无法恢复，是否继续？', + onOk: () => { + setKeyList(keyList.filter((key) => key.id !== id)); + message.success('删除成功'); + }, + }); + }; + + return ( + + + + + + + 正常 + + 按调用次数 + 0.01元/次 + 1234次 + + + + + + } onClick={handleCreateKey} loading={loading}> + 创建密钥 + + } + > + + + + + + + 
+              {`import requests
+
+url = "https://api.yourdomain.com/v1/generate"
+headers = {
+    "Content-Type": "application/json",
+    "X-API-KEY": "your_api_key"
+}
+data = {
+    "prompt": "你的提示词",
+    "model": "gpt-3.5-turbo"
+}
+
+response = requests.post(url, json=data, headers=headers)
+print(response.json())`}
+
+ + + + + ); +}; + +export default OpenPlatform; \ No newline at end of file