增加AI功能

src/components/ai/AiHelper.tsx

@@ -1,7 +1,7 @@
 import {useContext, useEffect, useRef, useState} from "react";
 import {GlobalContext} from "../../context/GlobalContext.ts";
 import {put, WebSocketBaseUrl} from "../../util/AjaxUtils.ts";
-import {Button, Divider, Empty, Space, Spin} from "antd";
+import {Button, Divider, Empty, Space, Spin, Table, TableProps} from "antd";
 import {CheckOutlined, ReloadOutlined} from "@ant-design/icons";
 import useMessage from "antd/es/message/useMessage";
 
@@ -11,6 +11,11 @@ type PropsType = {
     projDesc?: string;
 }
 
+type ProjModType = {
+    name: string,
+    desc: string
+}
+
 export default function AiHelper(props: PropsType) {
     const globalContext = useContext(GlobalContext);
     const pingTimeout = useRef(-1);
@@ -22,6 +27,9 @@ export default function AiHelper(props: PropsType) {
     const [projDesc, setProjDesc] = useState<string>(props.projDesc ? props.projDesc : '');
     const [newProjDesc, setNewProjDesc] = useState<string>('');
     const [isProjDescLoading, setIsProjDescLoading] = useState(false);
+    const [projModArray, setProjModArray] = useState<ProjModType[]>([]);
+    const [newProjModArray, setNewProjModArray] = useState<ProjModType[]>([]);
+    const [isProjModArrayLoading, setIsProjModArrayLoading] = useState(false);
 
     const ping = () => {
         clearTimeout(pingTimeout.current);
@@ -45,21 +53,19 @@ export default function AiHelper(props: PropsType) {
                 return;
             }
             const data = JSON.parse(event.data);
-            if (data.type == 'REFRESH_PROJ_INTRODUCTION') {
+            if (data.projId != props.projId) {
-                if (data.projId != props.projId) {
-                    return;
-                }
-                setIsProjIntroductionLoading(false);
-                setNewProjIntroduction(data.content);
                 return;
             }
-            if (data.type == 'REFRESH_PROJ_DESC') {
+            if (data.type == 'REFRESH_PROJ_INTRODUCTION') {
-                if (data.projId != props.projId) {
+                setIsProjIntroductionLoading(false);
-                    return;
+                setNewProjIntroduction(data.content);
-                }
+            } else if (data.type == 'REFRESH_PROJ_DESC') {
                 setIsProjDescLoading(false);
                 setNewProjDesc(data.content);
-                return;
+            } else if (data.type == 'REFRESH_PROJ_MODS') {
+                setIsProjModArrayLoading(false);
+                const projMods = JSON.parse(data.content) as ProjModType[];
+                setNewProjModArray(projMods);
             }
         }
         ws.current.onerror = (event) => {
@@ -71,6 +77,11 @@ export default function AiHelper(props: PropsType) {
         }
     }
 
+    const projModColumnArray: TableProps<ProjModType>['columns'] = [
+        {title: '模块名称', dataIndex: 'name', key: 'name', width: 150, align: 'center'},
+        {title: '模块描述', dataIndex: 'desc', key: 'desc', align: 'center'},
+    ];
+
     const generateProjIntroduction = () => {
         ws.current?.send(JSON.stringify({
             type: 'REFRESH_PROJ_INTRODUCTION',
@@ -89,6 +100,15 @@ export default function AiHelper(props: PropsType) {
         setIsProjDescLoading(true);
     }
 
+    const generateProjModArray = () => {
+        ws.current?.send(JSON.stringify({
+            type: 'REFRESH_PROJ_MODS',
+            projId: props.projId
+        }));
+        ping();
+        setIsProjModArrayLoading(true);
+    }
+
     /**
      * 保存简介
      */
@@ -191,19 +211,46 @@ export default function AiHelper(props: PropsType) {
                     }
                 </div>
                 <div style={{padding: '5px 0 0 0', textAlign: 'center'}}>
-                    <div style={{padding: '5px 0 0 0', textAlign: 'center'}}>
+                    {
-                        {
+                        newProjDesc ? (
-                            newProjDesc ? (
+                            <Space>
-                                <Space>
+                                <Button type="link" style={{cursor: 'pointer'}}
-                                    <Button type="link" style={{cursor: 'pointer'}}
+                                        onClick={updateProjDesc}><CheckOutlined/> 保存结果</Button>
-                                            onClick={updateProjDesc}><CheckOutlined/> 保存结果</Button>
+                                <Button type="link" style={{cursor: 'pointer'}}
-                                    <Button type="link" style={{cursor: 'pointer'}}
+                                        onClick={generateProjDesc}><ReloadOutlined/> 重新生成</Button>
-                                            onClick={generateProjDesc}><ReloadOutlined/> 重新生成</Button>
+                            </Space>
-                                </Space>
+                        ) : <Button type="link" style={{cursor: 'pointer'}}
-                            ) : <Button type="link" style={{cursor: 'pointer'}}
+                                    onClick={generateProjDesc}>AI生成</Button>
-                                        onClick={generateProjDesc}>AI生成</Button>
+                    }
-                        }
+                </div>
-                    </div>
+            </Spin>
+            <Divider dashed/>
+            <div style={{padding: '5px 0 0 0', fontWeight: 'bold'}}>项目模块</div>
+            <Spin tip="正在处理，请稍后..." size="small" spinning={isProjModArrayLoading}>
+                <div style={{padding: '5px 0 0 0'}}>
+                    {newProjModArray.length > 0 ? <Divider orientation="right" plain>原模块</Divider> : <></>}
+                    <Table columns={projModColumnArray} dataSource={projModArray} size="middle" bordered={true}/>
+                    {
+                        newProjModArray.length > 0 ? (
+                            <>
+                                <Divider orientation="right" plain>新模块</Divider>
+                                <Table columns={projModColumnArray} dataSource={newProjModArray} size="middle" bordered={true}/>
+                            </>
+                        ) : <></>
+                    }
+                </div>
+                <div style={{padding: '5px 0 0 0', textAlign: 'center'}}>
+                    {
+                        newProjModArray.length > 0 ? (
+                            <Space>
+                                <Button type="link" style={{cursor: 'pointer'}}
+                                        onClick={generateProjModArray}><CheckOutlined/> 保存结果</Button>
+                                <Button type="link" style={{cursor: 'pointer'}}
+                                        onClick={generateProjModArray}><ReloadOutlined/> 重新生成</Button>
+                            </Space>
+                        ) : <Button type="link" style={{cursor: 'pointer'}}
+                                    onClick={generateProjModArray}>AI生成</Button>
+                    }
                 </div>
             </Spin>
         </>