完善页面

src/components/arrow/Arrow.tsx

@@ -0,0 +1,23 @@
+import './arrow.css';
+import {IArrow} from "../../interfaces/arrow/IArrow.ts";
+import {ReactNode} from "react";
+
+
+export default function Arrow(props: IArrow) {
+
+    const renderLineBlock = () => {
+        const blockArray: ReactNode[] = [];
+        const size:number = parseInt(((props.width - 20) / 20).toFixed(0));
+        for(let i = 0; i < size; i++) {
+            blockArray.push(<div className="arrow-line-block" style={{backgroundColor: props.color}}></div>)
+        }
+        return blockArray;
+    }
+
+    return (
+        <div className="arrow" style={{width: props.width}}>
+            <div className="arrow-line">{renderLineBlock()}</div>
+            <div className="arrow-head" style={{borderLeftColor: props.color}}></div>
+        </div>
+    )
+}

src/components/arrow/arrow.css

@@ -0,0 +1,30 @@
+.arrow {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.arrow .arrow-line {
+    position: absolute;
+    top: 10px;
+    height: 10px;
+    display: flex;
+}
+.arrow .arrow-line .arrow-line-block {
+    width: 15px;
+    height: 10px;
+    margin-right: 5px;
+}
+.arrow .arrow-head {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    box-sizing: border-box;
+    border-style: solid;
+    border-top-width: 15px;
+    border-top-color: transparent;
+    border-left-width: 20px;
+    border-right-width: 0;
+    border-bottom-width: 15px;
+    border-bottom-color: transparent;
+}

src/components/balance/balance-head.css

@@ -6,6 +6,5 @@
 }
 
 .balance-head .balance {
-    font-weight: bold;
-    font-size: 40px;
+    font-size: 20px;
 }

src/components/card/CardProjDownload.tsx

@@ -0,0 +1,17 @@
+import './card-proj-download.css';
+import {IProjDownload} from "../../interfaces/card/ICardProj.ts";
+
+export default function CardProjDownload(props: IProjDownload) {
+    return (
+        <div className="card-proj-download">
+            <div className="title">{props.title}</div>
+            <div className="desc">请完善软件的介绍，详细介绍等基本信息</div>
+            <div className="option">
+                <a href="/#" className="edit" onClick={(e) => {
+                    e.preventDefault();
+                    props.handleDownload();
+                }}>下载</a>
+            </div>
+        </div>
+    )
+}

src/components/card/CardProjEdit.tsx

@@ -1,13 +1,15 @@
 import './card-proj-edit.css';
+import {IProjEdit} from "../../interfaces/card/ICardProj.ts";
 
-export default function CardProjEdit() {
+export default function CardProjEdit(props: IProjEdit) {
     return (
         <div className="card-proj-edit">
-            <div className="title">软件基本信息</div>
-            <div className="desc">请完善软件的介绍，详细介绍等基本信息</div>
+            <div className="title">{props.title}</div>
+            <div className="desc">{props.desc}</div>
             <div className="option">
                 <a href="/#" className="edit" onClick={(e) => {
                     e.preventDefault();
+                    props.handleEdit();
                 }}>编辑</a>
                 <span className="status"></span>
             </div>

src/components/card/CardProjJump.tsx

@@ -0,0 +1,17 @@
+import './card-proj-jump.css';
+import {ExportOutlined} from '@ant-design/icons';
+import {IProjJump} from "../../interfaces/card/ICardProj.ts";
+
+export default function CardProjJump(props: IProjJump) {
+    return (
+        <div className="card-proj-jump" onClick={() => {
+            props.handleJump();
+        }}>
+            <div className="title">
+                <span className="label">{props.title}</span>
+                <ExportOutlined/>
+            </div>
+            <div className="desc">{props.desc}</div>
+        </div>
+    )
+}

src/components/card/CardProjLoading.tsx

@@ -0,0 +1,15 @@
+import './card-proj-loading.css';
+import {Loading3QuartersOutlined} from '@ant-design/icons';
+import {IProjLoading} from "../../interfaces/card/ICardProj.ts";
+
+export default function CardProjLoading(props:IProjLoading) {
+    return (
+        <div className="card-proj-loading">
+            <div className="title">
+                <Loading3QuartersOutlined spin={true} style={{color: '#0052d9'}}/>
+                <span className="label">{props.title}</span>
+            </div>
+            <div className="desc">资料正在排队，预计等待600s</div>
+        </div>
+    )
+}

src/components/card/CardProjResult.tsx

@@ -0,0 +1,23 @@
+import './card-proj-result.css';
+import {IProjResult} from "../../interfaces/card/ICardProj.ts";
+
+export default function CardProjResult(props: IProjResult) {
+    return (
+        <div className="card-proj-result">
+            <div className="title">
+                <span className="label">{props.title}</span>
+                {props.isSuccess ? <span className="success"></span> : <span className="failed"></span>}
+            </div>
+            {
+                props.handleFeedback ? (
+                    <div className="option">
+                        <a href="/#" className="edit" onClick={(e) => {
+                            e.preventDefault();
+                            props.handleFeedback?.();
+                        }}>反馈</a>
+                    </div>
+                ) : <></>
+            }
+        </div>
+    )
+}

src/components/card/card-proj-download.css

@@ -0,0 +1,25 @@
+.card-proj-download {
+    width: 224px;
+    padding: 10px 15px;
+}
+
+.card-proj-download .title {
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.card-proj-download .desc {
+    margin: 5px 0 10px 0;
+    max-height: 36px;
+    line-height: 18px;
+    color: var(--color-note);
+}
+
+.card-proj-download .option {
+    display: flex;
+    justify-content: space-between;
+}
+
+.card-proj-download .option .edit {
+    color: var(--color-blue);
+}

src/components/card/card-proj-edit.css

@@ -1,8 +1,6 @@
 .card-proj-edit {
     width: 224px;
-    padding: 10px;
-    border-radius: 6px;
-    border: 1px solid var(--color-border);
+    padding: 10px 15px;
 }
 
 .card-proj-edit .title {
@@ -12,8 +10,9 @@
 
 .card-proj-edit .desc {
     margin: 5px 0 10px 0;
-    height: 36px;
+    max-height: 36px;
     line-height: 18px;
+    color: var(--color-note);
 }
 
 .card-proj-edit .option {

src/components/card/card-proj-jump.css

@@ -0,0 +1,20 @@
+.card-proj-jump {
+    width: 224px;
+    padding: 10px 15px;
+    cursor: pointer;
+}
+
+.card-proj-jump .title {
+    font-size: 18px;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.card-proj-jump .desc {
+    margin: 5px 0 10px 0;
+    max-height: 36px;
+    line-height: 18px;
+    color: var(--color-note);
+}

src/components/card/card-proj-loading.css

@@ -0,0 +1,25 @@
+.card-proj-loading {
+    width: 224px;
+    padding: 10px 15px;
+}
+
+.card-proj-loading .title {
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.card-proj-loading .title .label {
+    margin-left: 10px;
+}
+
+.card-proj-loading .desc {
+    margin-top: 5px;
+    max-height: 36px;
+    line-height: 18px;
+    color: var(--color-note);
+}
+
+.card-proj-loading .option {
+    display: flex;
+    justify-content: space-between;
+}

src/components/card/card-proj-result.css

@@ -0,0 +1,60 @@
+.card-proj-result {
+    width: 224px;
+    padding: 10px 15px;
+}
+
+.card-proj-result .title {
+    font-size: 18px;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.card-proj-result .title .success {
+    width: 13px;
+    height: 6px;
+    border-style: solid;
+    border-color: var(--color-green);
+    border-width: 4px;
+    transform: rotate(-45deg);
+    border-top: transparent;
+    border-right: transparent;
+}
+
+.card-proj-result .title .failed {
+    width: 20px;
+    height: 20px;
+    position: relative;
+}
+
+.card-proj-result .title .failed:before {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 4px;
+    background-color: var(--color-red);
+    transform: rotate(45deg);
+    position: absolute;
+    top: 9px;
+}
+
+.card-proj-result .title .failed:after {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 4px;
+    background-color: var(--color-red);
+    transform: rotate(-45deg);
+    position: absolute;
+    top: 9px;
+}
+
+.card-proj-result .option {
+    display: flex;
+    justify-content: space-between;
+}
+
+.card-proj-result .option .edit {
+    color: var(--color-blue);
+}

src/components/step/StepProjEdit.tsx

@@ -1,14 +1,63 @@
 import './step-proj-edit.css';
-import {IStepProj} from "../../interfaces/step/IStepProj.ts";
+import {IStepProj, Process} from "../../interfaces/step/IStepProj.ts";
+import {CheckOutlined} from "@ant-design/icons";
 
 export default function StepProjEdit(props: IStepProj) {
+
+    const height = window.innerHeight - 390;
+
+    const renderStepNo = () => {
+        if (props.process == Process.COMPLETE) {
+            return (
+                <div className="no complete">
+                    <CheckOutlined/>
+                </div>
+            )
+        } else if (props.process == Process.PROCESSING) {
+            return <div className="no processing">{props.step}</div>
+        }
+        return (
+            <div className="no pending">
+                {props.step}
+            </div>
+        )
+    }
+
+    const renderStepDesc = () => {
+        if (props.process != Process.PENDING) {
+            return (
+                <div className="desc">
+                    <div className="title">{props.descTitle}</div>
+                    <div className="detail">{props.descDetail}</div>
+                </div>
+            )
+        }
+        return (
+            <div className="desc pending">
+                <div className="title">{props.descTitle}</div>
+                <div className="detail">{props.descDetail}</div>
+            </div>
+        )
+    }
+
+    const renderStepLine = () => {
+        if (!props.hasNext) {
+            return <></>
+        }
+        if (props.process == Process.COMPLETE) {
+            return <div className="step-line step-line-complete"></div>
+        }
+        return <div className="step-line"></div>
+    }
+
     return (
         <div className="step-proj">
             <div className="step">
-                <div className="no">{props.step}</div>
-                <div className="desc">{props.desc}</div>
+                {renderStepNo()}
+                {renderStepDesc()}
+                {renderStepLine()}
             </div>
-            <div className="step-card">
+            <div className="step-card" style={{maxHeight: `${height - 20}px`}}>
                 <div className="step-card-list">{props.children}</div>
             </div>
         </div>

src/components/step/step-proj-edit.css

@@ -1,32 +1,90 @@
 .step-proj {
     width: 300px;
+    position: relative;
 }
 
 .step-proj .step {
+    margin-top: 30px;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: center;
-    align-items: center;
+    align-items: start;
+    position: relative;
 }
 
 .step-proj .step .no {
-    background-color: var(--color-blue);
-    color: var(--color-light);
-    width: 66px;
-    height: 66px;
+    width: 38px;
+    height: 38px;
     border-radius: 50%;
-    font-size: 33px;
+    font-size: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
+.step-proj .step .complete {
+    border: 1px solid var(--color-blue);
+    color: var(--color-blue);
+}
+
+.step-proj .step .processing {
+    border: 1px solid var(--color-blue);
+    background-color: var(--color-blue);
+    color: var(--color-light);
+}
+
+.step-proj .step .pending {
+    border: 1px solid var(--color-disabled);
+    color: var(--color-disabled);
+}
+
 .step-proj .step .desc {
-    margin-top: 5px;
+    margin-left: 15px;
+    width: 150px;
+    border: none;
+}
+
+.step-proj .step .desc .title {
+    margin-top: 8px;
+    font-weight: bold;
+}
+
+.step-proj .step .pending .title {
+    color: var(--color-text-disabled);
+}
+
+.step-proj .step .desc .detail {
+    margin-top: 10px;
+    font-size: 12px;
+    width: 100%;
+    height: 32px;
+    line-height: 16px;
+    color: var(--color-note);
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.step-proj .step-line {
+    position: absolute;
+    top: 18px;
+    left: 190px;
+    width: 150px;
+    border-top: 1px solid var(--color-disabled);
+}
+
+.step-proj .step-line-complete {
+    border-color: var(--color-blue);
 }
 
 .step-proj .step-card {
-    margin-top: 15px;
+    margin-top: 40px;
+    padding: 10px 0;
+    border: 1px solid var(--color-border);
+    overflow: auto;
 }
 
 .step-proj .step-card .step-card-list {
@@ -35,10 +93,18 @@
     align-items: center;
 }
 
-.step-proj .step-card .step-card-list .card-proj-edit {
-    margin-bottom: 15px;
+.step-proj .step-card .step-card-list .card-proj-edit,
+.step-proj .step-card .step-card-list .card-proj-loading,
+.step-proj .step-card .step-card-list .card-proj-result,
+.step-proj .step-card .step-card-list .card-proj-download,
+.step-proj .step-card .step-card-list .card-proj-jump {
+    border-bottom: 1px solid var(--color-border);
 }
 
-.step-proj .step-card .step-card-list .card-proj-edit:last-child {
-    margin-bottom: 0;
+.step-proj .step-card .step-card-list .card-proj-edit:last-child,
+.step-proj .step-card .step-card-list .card-proj-loading:last-child,
+.step-proj .step-card .step-card-list .card-proj-result:last-child,
+.step-proj .step-card .step-card-list .card-proj-download:last-child,
+.step-proj .step-card .step-card-list .card-proj-jump:last-child {
+    border-bottom: none;
 }

src/index.css

@@ -1,15 +1,20 @@
 :root {
-    --color-border: #d9d9d9;
+    --color-border: #BBBBBB;
     --color-box-shadow: rgba(0, 0, 0, 0.3);
     --color-red: #ff5722;
     --color-orange: #ffb800;
-    --color-green: #16baaa;
-    --color-blue: #1e9fff;
+    --color-green: rgba(129,179,55,1);
+    --color-blue: rgba(64,149,229,1);
     --color-purple: #a233c6;
-    --color-dark: #2f363c;
+    --color-dark: rgba(68,72,88,1);
     --color-light: #fafafa;
     --color-hover: #eeeeee;
-    --font-size-head: 16px;
+    --color-text-disabled: rgba(68,72,88,0.5);
+    --color-text-header-left: #FFBF6B;
+    --color-text-header-right: #101010;
+    --color-note: rgba(68,72,88,0.5);
+    --color-disabled: #D9D9D9;
+    --font-size-head: 14px;
     --width-workspace: 1280px;
     --height-head: 60px;
     --height-foot: 30px;

src/interfaces/arrow/IArrow.ts

@@ -0,0 +1,4 @@
+export interface IArrow {
+    width: number;
+    color: string;
+}

src/interfaces/card/ICardProj.ts

@@ -0,0 +1,32 @@
+export interface IProjEdit {
+    title: string;
+    desc?: string;
+
+    handleEdit(): void;
+}
+
+export interface IProjLoading {
+    title: string;
+    desc?: string;
+}
+
+export interface IProjResult {
+    title: string;
+    isSuccess: boolean;
+
+    handleFeedback?(): void;
+}
+
+export interface IProjDownload {
+    title: string;
+    desc: string;
+
+    handleDownload(): void;
+}
+
+export interface IProjJump {
+    title: string;
+    desc: string;
+
+    handleJump(): void;
+}

src/interfaces/step/IStepProj.ts

@@ -1,7 +1,16 @@
 import {ReactNode} from "react";
 
+export enum Process {
+    COMPLETE,
+    PROCESSING,
+    PENDING
+}
+
 export interface IStepProj {
     step: number;
-    desc: string;
+    process: Process;
+    descTitle: string;
+    descDetail?: string;
+    hasNext?: boolean;
     children: ReactNode
 }

src/layout/head/Head.tsx

@@ -3,17 +3,19 @@ import Dropdown from '../../components/dropdown/Dropdown.tsx';
 import BalanceHead from '../../components/balance/BalanceHead.tsx';
 import RechargeHead from '../../components/recharge/RechargeHead.tsx';
 import MessageHead from '../../components/message/MessageHead.tsx';
+import headRightBg from '../../assets/head-right-bg.png'
+import {Divider} from "antd";
 
 export default function Head() {
-    const logo: string = 'vite.svg';
     return (
         <div className="head">
             <div className="center">
                 <div className="left">
-                    <img src={logo} className="logo" alt="加载失败"/>
-                    <span className="sys-title">AI软件著作权管理系统</span>
+                    <span className="sys-title">AI引擎软著</span>
+                    <Divider type="vertical" />
+                    <span className="sys-title-sub">软件著作权一站式服务平台</span>
                 </div>
-                <div className="right">
+                <div className="right" style={{backgroundImage: `url(${headRightBg})`}}>
                     <BalanceHead/>
                     <RechargeHead/>
                     <MessageHead/>

src/layout/head/head.css

@@ -4,10 +4,10 @@
     position: fixed;
     top: 0;
     left: 0;
-    background-color: var(--color-dark);
+    background-color: var(--color-light);
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
     z-index: 0;
-    color: var(--color-light)
+    color: var(--color-dark);
 }
 
 .head .center {
@@ -23,8 +23,9 @@
     height: 100%;
     display: flex;
     align-items: center;
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 800;
+    color: var(--color-text-header-left);
 }
 
 .head .center .left .logo {
@@ -32,12 +33,16 @@
     height: 38px;
 }
 
-.head .center .left .sys-title {
-    margin-left: 5px;
+.head .center .left .sys-title {}
+
+.head .center .left .sys-title-sub {
+    font-size: 14px;
+    font-weight: unset;
 }
 
 .head .center .right {
     height: 100%;
+    padding-left: 60px;
     display: flex;
     justify-content: right;
 }
@@ -47,7 +52,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0 15px;
+    padding: 0 10px;
     font-size: var(--font-size-head);
     cursor: pointer;
     position: relative;

src/route/proj/ProjEdit.tsx

@@ -1,12 +1,18 @@
 import './proj-edit.css';
-import {Link} from "react-router-dom";
-import {Breadcrumb} from "antd";
+import {Link, useNavigate} from "react-router-dom";
+import {Breadcrumb, Button} from "antd";
 import StepProjEdit from "../../components/step/StepProjEdit.tsx";
 import CardProjEdit from "../../components/card/CardProjEdit.tsx";
+import {Process} from "../../interfaces/step/IStepProj.ts";
+import CardProjLoading from "../../components/card/CardProjLoading.tsx";
+import CardProjResult from "../../components/card/CardProjResult.tsx";
+import CardProjDownload from "../../components/card/CardProjDownload.tsx";
+import CardProjJump from "../../components/card/CardProjJump.tsx";
 
 
 export default function ProjEdit() {
-    const height = window.innerHeight - 150;
+    const nav = useNavigate();
+    const height = window.innerHeight - 240;
     return (
         <>
             <Breadcrumb
@@ -16,16 +22,61 @@ export default function ProjEdit() {
                     {title: '编辑项目'},
                 ]}
             />
-            <div style={{height: `${height}px`, overflow: 'auto'}}>
-                <div className="proj-edit">
-                    <StepProjEdit step={1} desc="完善信息">
-                        <CardProjEdit/>
-                        <CardProjEdit/>
-                        <CardProjEdit/>
-                        <CardProjEdit/>
-                        <CardProjEdit/>
-                    </StepProjEdit>
-                </div>
+            <div className="proj-edit" style={{height: `${height}px`}}>
+                <StepProjEdit step={1} process={Process.COMPLETE} descTitle="完善信息"
+                              descDetail="123123123123123123123123123123123123123123123123"
+                              hasNext={true}>
+                    <CardProjEdit title="软件基本信息"
+                                  desc="请完善软件的介绍、详介绍等基本信息"
+                                  handleEdit={() => {
+
+                                  }}
+                    />
+                </StepProjEdit>
+                <StepProjEdit step={2} process={Process.PROCESSING} descTitle="功能设置" hasNext={true}>
+                    <CardProjEdit title="软件基本信息"
+                                  desc="请完善软件的介绍、详介绍等基本信息"
+                                  handleEdit={() => {
+
+                                  }}
+                    />
+                </StepProjEdit>
+                <StepProjEdit step={3} process={Process.PENDING} descTitle="资料生成" hasNext={true}>
+                    <CardProjEdit title="软件基本信息"
+                                  desc="请完善软件的介绍、详介绍等基本信息"
+                                  handleEdit={() => {
+                                      console.log('编辑')
+                                  }}
+                    />
+                    <CardProjLoading title="正在排队"
+                                     desc="资料正在排队，预计等待600秒"
+                    />
+                    <CardProjResult title="生成成功"
+                                    isSuccess={true}
+                                    handleFeedback={() => {
+                                        console.log('反馈')
+                                    }}
+                    />
+                </StepProjEdit>
+                <StepProjEdit step={4} process={Process.PENDING} descTitle="资料下载">
+                    <CardProjDownload title="软件基本信息"
+                                      desc="请完善软件的介绍，详细介绍等基本信息"
+                                      handleDownload={() => {
+                                          console.log('下载')
+                                      }}
+                    />
+                    <CardProjJump title="跳转"
+                                  desc="请完善软件的介绍，详细介绍等基本信息"
+                                  handleJump={() => {
+                                      console.log('跳转');
+                                  }}
+                    />
+                </StepProjEdit>
+            </div>
+            <div className="btn-container">
+                <Button size="large" style={{width: '200px', fontSize: '14px', backgroundColor: 'var(--color-blue)', color: 'var(--color-light)'}} onClick={() => {
+                    nav(-1);
+                }}>返回</Button>
             </div>
         </>
     )

src/route/proj/proj-create.css

@@ -1,4 +1,5 @@
 .proj-create {
+    min-height: 100%;
     background-color: var(--color-light);
     display: flex;
     justify-content: center;

src/route/proj/proj-edit.css

@@ -1,4 +1,13 @@
 .proj-edit {
     background-color: var(--color-light);
     padding: 15px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.btn-container {
+    width: 100%;
+    padding: 5px 0 15px 0;
+    text-align: center;
+    background-color: var(--color-light);
 }

src/route/proj/proj-new.css

@@ -1,5 +1,5 @@
 .proj-new {
-    height: 100%;
+    min-height: 100%;
     background-color: var(--color-light);
     display: flex;
     flex-direction: column;