diff --git a/src/assets/head-right-bg.png b/src/assets/head-right-bg.png
new file mode 100644
index 0000000..e884634
Binary files /dev/null and b/src/assets/head-right-bg.png differ
diff --git a/src/components/arrow/Arrow.tsx b/src/components/arrow/Arrow.tsx
new file mode 100644
index 0000000..a3f73b5
--- /dev/null
+++ b/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(
-
软件基本信息
-
请完善软件的介绍,详细介绍等基本信息
+
{props.title}
+
{props.desc}
diff --git a/src/components/card/CardProjJump.tsx b/src/components/card/CardProjJump.tsx
new file mode 100644
index 0000000..4a1b73e
--- /dev/null
+++ b/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 (
+
{
+ props.handleJump();
+ }}>
+
+ {props.title}
+
+
+
{props.desc}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/card/CardProjLoading.tsx b/src/components/card/CardProjLoading.tsx
new file mode 100644
index 0000000..9b03f92
--- /dev/null
+++ b/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 (
+
+
+
+ {props.title}
+
+
资料正在排队,预计等待600s
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/card/CardProjResult.tsx b/src/components/card/CardProjResult.tsx
new file mode 100644
index 0000000..4ba0a6d
--- /dev/null
+++ b/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 (
+
+
+ {props.title}
+ {props.isSuccess ? : }
+
+ {
+ props.handleFeedback ? (
+
+ ) : <>>
+ }
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/card/card-proj-download.css b/src/components/card/card-proj-download.css
new file mode 100644
index 0000000..dfd6928
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/components/card/card-proj-edit.css b/src/components/card/card-proj-edit.css
index 8536c4c..0cdf1e7 100644
--- a/src/components/card/card-proj-edit.css
+++ b/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 {
diff --git a/src/components/card/card-proj-jump.css b/src/components/card/card-proj-jump.css
new file mode 100644
index 0000000..a3bea68
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/components/card/card-proj-loading.css b/src/components/card/card-proj-loading.css
new file mode 100644
index 0000000..e5096b7
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/card/card-proj-result.css b/src/components/card/card-proj-result.css
new file mode 100644
index 0000000..c0d4c23
--- /dev/null
+++ b/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);
+}
diff --git a/src/components/step/StepProjEdit.tsx b/src/components/step/StepProjEdit.tsx
index 4dc0703..478eb1e 100644
--- a/src/components/step/StepProjEdit.tsx
+++ b/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 (
+
+
+
+ )
+ } else if (props.process == Process.PROCESSING) {
+ return
{props.step}
+ }
+ return (
+
+ {props.step}
+
+ )
+ }
+
+ const renderStepDesc = () => {
+ if (props.process != Process.PENDING) {
+ return (
+
+
{props.descTitle}
+
{props.descDetail}
+
+ )
+ }
+ return (
+
+
{props.descTitle}
+
{props.descDetail}
+
+ )
+ }
+
+ const renderStepLine = () => {
+ if (!props.hasNext) {
+ return <>>
+ }
+ if (props.process == Process.COMPLETE) {
+ return
+ }
+ return
+ }
+
return (
-
{props.step}
-
{props.desc}
+ {renderStepNo()}
+ {renderStepDesc()}
+ {renderStepLine()}
-
diff --git a/src/components/step/step-proj-edit.css b/src/components/step/step-proj-edit.css
index 60e4fa4..046f3e6 100644
--- a/src/components/step/step-proj-edit.css
+++ b/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;
}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 2134b9f..83df3c2 100644
--- a/src/index.css
+++ b/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;
diff --git a/src/interfaces/arrow/IArrow.ts b/src/interfaces/arrow/IArrow.ts
new file mode 100644
index 0000000..91dc75f
--- /dev/null
+++ b/src/interfaces/arrow/IArrow.ts
@@ -0,0 +1,4 @@
+export interface IArrow {
+ width: number;
+ color: string;
+}
\ No newline at end of file
diff --git a/src/interfaces/card/ICardProj.ts b/src/interfaces/card/ICardProj.ts
new file mode 100644
index 0000000..1be4c5d
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/interfaces/step/IStepProj.ts b/src/interfaces/step/IStepProj.ts
index 08c5451..58396cf 100644
--- a/src/interfaces/step/IStepProj.ts
+++ b/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
}
\ No newline at end of file
diff --git a/src/layout/head/Head.tsx b/src/layout/head/Head.tsx
index 362f5b5..3f0ee23 100644
--- a/src/layout/head/Head.tsx
+++ b/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 (
-

-
AI软件著作权管理系统
+
AI引擎软著
+
+
软件著作权一站式服务平台
-
+
diff --git a/src/layout/head/head.css b/src/layout/head/head.css
index 60fd137..27565c8 100644
--- a/src/layout/head/head.css
+++ b/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;
diff --git a/src/route/proj/ProjEdit.tsx b/src/route/proj/ProjEdit.tsx
index 42c27a6..c777a44 100644
--- a/src/route/proj/ProjEdit.tsx
+++ b/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 (
<>
-
-
-
-
-
-
-
-
-
-
+
+
+ {
+
+ }}
+ />
+
+
+ {
+
+ }}
+ />
+
+
+ {
+ console.log('编辑')
+ }}
+ />
+
+ {
+ console.log('反馈')
+ }}
+ />
+
+
+ {
+ console.log('下载')
+ }}
+ />
+ {
+ console.log('跳转');
+ }}
+ />
+
+
+
+
>
)
diff --git a/src/route/proj/proj-create.css b/src/route/proj/proj-create.css
index b710067..e0c671a 100644
--- a/src/route/proj/proj-create.css
+++ b/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;
diff --git a/src/route/proj/proj-edit.css b/src/route/proj/proj-edit.css
index 8121741..356c730 100644
--- a/src/route/proj/proj-edit.css
+++ b/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);
}
\ No newline at end of file
diff --git a/src/route/proj/proj-new.css b/src/route/proj/proj-new.css
index 73a3d37..3fc8933 100644
--- a/src/route/proj/proj-new.css
+++ b/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;