diff --git a/config/routes.ts b/config/routes.ts index d9249fb..9d98e6e 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -7,10 +7,24 @@ export default [ { path: '/home', name :"首页", icon: "PieChartOutlined", component: './HomePage' }, { path: '/add_chart', name :"智能分析", icon: "barChart", component: './AddChart' }, - { path: '/add_async', name :"智能分析(异步)", icon: "DotChartOutlined", component: './AddChartAsync' }, + { path: '/add_async', name: "智能分析(异步)", icon: "DotChartOutlined", component: './AddChartAsync' }, + { path: '/report', name: "报告中心", icon: "commentOutlined", component: './Report' }, + { path: '/code', name: "代码分析", icon: "GithubOutlined", component: './Code' }, + { path: '/Forecast', name :"分析中心", icon: "ApiOutlined", component: './Forecast' }, { path: '/my_chart', name: "我的图表", icon: "PictureOutlined", component: './MyChart' }, - { path: '/open_platform', name :"开放中心", icon: "ApiOutlined", component: './OpenPlatform' }, - { path: '/forum', name :"交流论坛", icon: "CrownOutlined", component: './Forum' }, + { path: '/open_platform', name :"开放中心", icon: "ApiOutlined", component: './OpenPlatform' }, + { path: '/forum', name: "交流论坛", icon: "CrownOutlined", component: './Forum' }, + { path: '/user/center', name: "个人中心", icon: "UserOutlined", component: './User/Info' }, + { + path: '/forum', + component: '@/pages/Forum', + routes: [ + { path: '/forum', redirect: '/forum/list' }, + { path: '/forum/list', component: '@/pages/Forum/List' }, + { path: '/forum/detail/:id', component: '@/pages/Forum/Detail' }, + { path: '/forum/publish', component: '@/pages/Forum/Publish' }, + ], +}, { path: '/admin', name: '管理页', diff --git a/package.json b/package.json index 869456e..8ffcfa3 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "dependencies": { "@ant-design/icons": "^4.8.1", "@ant-design/pro-components": "^2.6.48", + "@monaco-editor/react": "^4.7.0", "@umijs/route-utils": "^2.2.2", "antd": "5.24.5", "antd-style": "^3.6.1", @@ -55,6 +56,7 @@ "echarts": "^5.6.0", "echarts-for-react": "^3.0.2", "lodash": "^4.17.21", + "mermaid": "^11.6.0", "moment": "^2.30.1", "omit.js": "^2.0.2", "querystring": "^0.2.1", diff --git a/src/components/Mermaid/index.tsx b/src/components/Mermaid/index.tsx new file mode 100644 index 0000000..76c2ad0 --- /dev/null +++ b/src/components/Mermaid/index.tsx @@ -0,0 +1,30 @@ +import React, { useEffect, useRef } from 'react'; +import mermaid from 'mermaid'; + +interface MermaidProps { + chart: string; +} + +const Mermaid: React.FC = ({ chart }) => { + const elementRef = useRef(null); + + useEffect(() => { + mermaid.initialize({ + startOnLoad: true, + theme: 'default', + securityLevel: 'loose', + }); + + if (elementRef.current) { + mermaid.render('mermaid-diagram', chart).then((result) => { + if (elementRef.current) { + elementRef.current.innerHTML = result.svg; + } + }); + } + }, [chart]); + + return
; +}; + +export default Mermaid; \ No newline at end of file diff --git a/src/components/MonacoEditor/index.tsx b/src/components/MonacoEditor/index.tsx new file mode 100644 index 0000000..a5b8f71 --- /dev/null +++ b/src/components/MonacoEditor/index.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import Editor from '@monaco-editor/react'; + +interface MonacoEditorProps { + language: string; + value: string; + onChange: (value: string) => void; + height?: string; +} + +const MonacoEditor: React.FC = ({ language, value, onChange, height = '300px' }) => { + return ( + onChange(value || '')} + options={{ + minimap: { enabled: false }, + scrollBeyondLastLine: false, + fontSize: 14, + automaticLayout: true, + }} + /> + ); +}; + +export default MonacoEditor; \ No newline at end of file diff --git a/src/pages/Code/index.tsx b/src/pages/Code/index.tsx new file mode 100644 index 0000000..79a9aaa --- /dev/null +++ b/src/pages/Code/index.tsx @@ -0,0 +1,178 @@ +import React, { useState } from 'react'; +import { PageContainer } from '@ant-design/pro-components'; +import { InboxOutlined, CopyOutlined, DownloadOutlined } from '@ant-design/icons'; +import { Upload, Card, Button, Tabs, message, Input, Spin, Radio, Space, Tooltip } from 'antd'; +import type { UploadFile } from 'antd/es/upload/interface'; +import ReactECharts from 'echarts-for-react'; +import Mermaid from '@/components/Mermaid'; +import MonacoEditor from '@/components/MonacoEditor'; + +const { Dragger } = Upload; +const { TabPane } = Tabs; +const { TextArea } = Input; + +const CodeAnalysisPage: React.FC = () => { + const [fileList, setFileList] = useState([]); + const [loading, setLoading] = useState(false); + const [analysisType, setAnalysisType] = useState<'er' | 'module'>('er'); + const [analysisResult, setAnalysisResult] = useState(''); + const [diagramCode, setDiagramCode] = useState(''); + const [codeContent, setCodeContent] = useState(''); + const [activeTab, setActiveTab] = useState('editor'); + + // 处理代码编辑 + const handleCodeChange = (value: string) => { + setCodeContent(value); + }; + + // 处理代码分析 + const handleAnalyze = async () => { + if (!codeContent.trim()) { + message.warning('请输入或上传代码'); + return; + } + setLoading(true); + try { + // 这里应该调用后端API进行分析 + // const response = await analyzeCode({ content: codeContent, type: analysisType }); + + // 模拟API响应 + setTimeout(() => { + if (analysisType === 'er') { + setDiagramCode(` +erDiagram + USER ||--o{ POST : creates + POST ||--|{ COMMENT : has + USER { + string username + string email + timestamp created_at + } + POST { + string title + text content + timestamp published_at + } + COMMENT { + text content + timestamp created_at + } + `); + } else { + setDiagramCode(` +graph TD + A[用户模块] --> B[认证服务] + A --> C[个人中心] + B --> D[权限管理] + C --> E[设置] + `); + } + setAnalysisResult('分析完成，建议优化数据库索引结构，添加适当的外键约束。'); + setActiveTab('result'); + message.success('分析成功'); + }, 1500); + } catch (error) { + message.error('分析失败'); + } + setLoading(false); + }; + + // 处理文件上传 + const handleUpload = async (file: File) => { + setLoading(true); + try { + // 读取文件内容 + const reader = new FileReader(); + reader.onload = (e) => { + const content = e.target?.result as string; + setCodeContent(content); + setActiveTab('editor'); + }; + reader.readAsText(file); + } catch (error) { + message.error('文件读取失败'); + } + setLoading(false); + }; + + return ( + + + + { + setAnalysisType(e.target.value); + setFileList([]); + setDiagramCode(''); + setAnalysisResult(''); + }} + > + ER图生成 + 功能模块图 + + + + + + +
+ + { + handleUpload(file); + return false; + }} + style={{ display: 'inline-block' }} + > + + + + +
+ + + + {diagramCode && ( + +
+

分析建议

+

{analysisResult}

+
+ + +