对接接口

src/components/card/CardProj.tsx

@@ -1,25 +1,94 @@
 import './card-proj.css';
-import {EditOutlined, SearchOutlined, EyeOutlined, FolderOutlined, SettingOutlined, DownloadOutlined} from '@ant-design/icons';
+import {
+    DownloadOutlined,
+    EditOutlined,
+    EyeOutlined,
+    FolderOutlined,
+    SearchOutlined,
+    SettingOutlined,
+    ClockCircleOutlined,
+    LoadingOutlined,
+    CheckOutlined,
+    WarningOutlined,
+    CloseCircleOutlined,
+    CreditCardOutlined
+} from '@ant-design/icons';
 import {Button, ConfigProvider, Tag} from 'antd';
+import {GenerateStatus, IProj, PayStatus} from "../../interfaces/proj/IProj.ts";
+
+export default function CardProj(props: { item: IProj }) {
+    const data = props.item;
+
+    /**
+     * 生成状态
+     */
+    const renderGenerateStatus = () => {
+        if (data.generateStatus == GenerateStatus.PENDING) {
+            return <Tag color="cyan"><ClockCircleOutlined/> 等待生成</Tag>
+        }
+        if (data.generateStatus == GenerateStatus.GENERATING) {
+            return <Tag color="magenta"><LoadingOutlined/> 正在生成</Tag>
+        }
+        if (data.generateStatus == GenerateStatus.SUCCESS) {
+            return <Tag color="green"><CheckOutlined/> 生成成功</Tag>
+        }
+        if (data.generateStatus == GenerateStatus.FAILED) {
+            return <Tag color="red"><WarningOutlined/> 生成失败</Tag>
+        }
+        if (data.generateStatus == GenerateStatus.NONE) {
+            return <Tag color="cyan">未生成</Tag>
+        }
+        return <Tag color="red"><CloseCircleOutlined/> 错误</Tag>
+    }
+
+    const renderOption = () => {
+        if(data.payStatus == PayStatus.UNPAID) {
+            return (
+                <>
+                    <div className="option">
+                        <Button size="small" type="text"><CreditCardOutlined /> 待付款</Button>
+                    </div>
+                </>
+            )
+        }
+        return (
+            <>
+                <div className="option">
+                    <Button size="small" type="text"><SettingOutlined/> 登录界面设置</Button>
+                    <Button size="small" type="text"><SettingOutlined/> 系统菜单管理(0)</Button>
+                    <Button size="small" type="text"><SettingOutlined/> 菜单排序(0)</Button>
+                </div>
+                {
+                    data.generateStatus == GenerateStatus.SUCCESS ? (
+                        <div className="option">
+                            <Button size="small" type="text"><DownloadOutlined/> 申请表</Button>
+                            <Button size="small" type="text"><DownloadOutlined/> 操作手册</Button>
+                            <Button size="small" type="text"><DownloadOutlined/> 代码压缩包</Button>
+                            <Button size="small" type="text"><DownloadOutlined/> 代码文档</Button>
+                        </div>
+                    ) : <></>
+                }
+            </>
+        )
+    }
 
-export default function CardProj() {
     return (
         <div className="card-proj">
             <div className="title">
                 <div className="left">
-                    <a href="/#">项目名称</a>
+                    <a href="/#">{data.projName}</a>
                 </div>
                 <div className="right">
-                    <span className="context">上下文：SDFSDF</span>
+                    <span className="context">上下文：{data.projContext}</span>
-                    <span className="status">未生成</span>
+                    <span className="date">{data.gmtCreate}</span>
-                    <span className="date">2024-03-02 11:15:35</span>
+                    <span className="status">{renderGenerateStatus()}</span>
                 </div>
             </div>
             <hr/>
             <div className="body">
                 <div className="line">
                     <div className="left">
-                        <span>金额￥：500</span>
+                        <span>金额￥：{data.payment / 100}</span>
                     </div>
                     <div className="right">
                         <span>
@@ -32,7 +101,10 @@ export default function CardProj() {
                         </span>
                         <span>
                             <EyeOutlined/>
-                            <a href="/#">预览</a>
+                            <a href="/#" onClick={(e) => {
+                                e.stopPropagation();
+                                window.open(data.previewUrl, '_blank')
+                            }}>预览</a>
                         </span>
                     </div>
                 </div>
@@ -55,17 +127,7 @@ export default function CardProj() {
                         }
                     }
                 }}>
-                    <div className="option">
+                    {renderOption()}
-                        <Button size="small" type="text"><SettingOutlined/> 登录界面设置</Button>
-                        <Button size="small" type="text"><SettingOutlined/> 系统菜单管理(0)</Button>
-                        <Button size="small" type="text"><SettingOutlined/> 菜单排序(0)</Button>
-                    </div>
-                    <div className="option">
-                        <Button size="small" type="text"><DownloadOutlined/> 申请表</Button>
-                        <Button size="small" type="text"><DownloadOutlined/> 操作手册</Button>
-                        <Button size="small" type="text"><DownloadOutlined/> 代码压缩包</Button>
-                        <Button size="small" type="text"><DownloadOutlined /> 代码文档</Button>
-                    </div>
                 </ConfigProvider>
             </div>
         </div>

src/components/card/card-proj.css

@@ -35,14 +35,17 @@
 
 .card-proj .title .right {
     padding: 5px;
+    width: 380px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .card-proj .title .right span {
-    margin-left: 10px;
+    margin-inline-end: 0;
 }
 
 .card-proj .title .right span:first-child {
-    margin-left: 0;
 }
 
 .card-proj .body {

src/components/list/ListProj.tsx

@@ -1,8 +1,9 @@
 import './list-proj.css'
 import CardProj from "../card/CardProj.tsx";
-import {useRef, MutableRefObject} from "react";
+import {useRef, MutableRefObject, useState, useEffect} from "react";
 import {Input, Pagination} from 'antd';
 import type {SearchProps} from 'antd/es/input/Search';
+import {Axios} from "../../util/AjaxUtils.ts";
 
 
 const {Search} = Input;
@@ -16,8 +17,36 @@ export default function ListProj() {
     const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
     const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
 
+    const [page, _setPage] = useState(1);
+    const [total, _setTotal] = useState(0);
+    const [projs, _setProjs] = useState([]);
+
     const domHeight = window.innerHeight - 280;
 
+    const renderData = () => {
+        Axios.get('/api/proj/listpage/self', {
+            params: {
+                page: page,
+                rows: 20
+            }
+        }).then(res => {
+            const data = res.data;
+            _setProjs(data.page);
+            _setTotal(data.total);
+            _setProjs(data.rows);
+        }).catch(res => {
+            console.log(res);
+        })
+    }
+
+    const renderList = () => {
+        return projs.map((item, index) => <CardProj item={item} key={`proj${index}`}/>);
+    }
+
+    useEffect(() => {
+        renderData();
+    }, [])
+
     return (
         <div className="list-proj" ref={listProjRef}>
             <div className="top">
@@ -25,15 +54,10 @@ export default function ListProj() {
             </div>
             <div className="body">
                 <div className="list" ref={listRef} style={{height: `${domHeight}px`}}>
-                    <CardProj/>
+                    {renderList()}
-                    <CardProj/>
-                    <CardProj/>
-                    <CardProj/>
-                    <CardProj/>
-                    <CardProj/>
                 </div>
                 <div className="page">
-                    <Pagination defaultCurrent={1} total={50} />
+                    <Pagination defaultCurrent={page} total={total}/>
                 </div>
             </div>
         </div>

src/interfaces/proj/IProj.ts

@@ -0,0 +1,37 @@
+export enum ProjCodeType {
+    CODE1 = 'CODE1'
+}
+
+export enum PayStatus {
+    PAID = 'PAID',
+    UNPAID = 'UNPAID'
+}
+
+export enum ProjStyleType {
+    DEFAULT = 'DEFAULT'
+}
+
+export enum GenerateStatus {
+    PENDING = 'PENDING',
+    GENERATING = 'GENERATING',
+    SUCCESS = 'SUCCESS',
+    FAILED = 'FAILED',
+    NONE = 'NONE',
+    ERROR = 'ERROR'
+}
+
+export interface IProj {
+
+    projId: string,
+    projName: string;
+    projContext: string;
+    projCodeType: ProjCodeType,
+    payStatus: PayStatus,
+    payment: number,
+    projStyleType: ProjStyleType,
+    previewUrl: string,
+    gmtCreate: string,
+    generateStatus: GenerateStatus
+
+
+}

src/main.tsx

@@ -4,7 +4,8 @@ import App from './App.tsx'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode>
+    <App/>
-        <App/>
+    // <React.StrictMode>
-    </React.StrictMode>,
+    //     <App/>
+    // </React.StrictMode>,
 )

src/util/AjaxUtils.ts

@@ -0,0 +1,6 @@
+import axios from "axios";
+
+axios.defaults.baseURL = 'http://127.0.0.1:7025/copyright';
+axios.defaults.headers['X-USER-ID'] = '80d3365e-0597-4988-979e-18ef1c3ec671';
+
+export const Axios = axios;