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(
) + } + return blockArray; + } + + return ( +
+
{renderLineBlock()}
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/arrow/arrow.css b/src/components/arrow/arrow.css new file mode 100644 index 0000000..1f275ab --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/balance/balance-head.css b/src/components/balance/balance-head.css index 0a636eb..49eedae 100644 --- a/src/components/balance/balance-head.css +++ b/src/components/balance/balance-head.css @@ -6,6 +6,5 @@ } .balance-head .balance { - font-weight: bold; - font-size: 40px; + font-size: 20px; } \ No newline at end of file diff --git a/src/components/card/CardProjDownload.tsx b/src/components/card/CardProjDownload.tsx new file mode 100644 index 0000000..c38f6a7 --- /dev/null +++ b/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 ( +
+
{props.title}
+
请完善软件的介绍,详细介绍等基本信息
+
+ { + e.preventDefault(); + props.handleDownload(); + }}>下载 +
+
+ ) +} \ No newline at end of file diff --git a/src/components/card/CardProjEdit.tsx b/src/components/card/CardProjEdit.tsx index 48cc5fe..1f28fa5 100644 --- a/src/components/card/CardProjEdit.tsx +++ b/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 (
-
软件基本信息
-
请完善软件的介绍,详细介绍等基本信息
+
{props.title}
+
{props.desc}
{ e.preventDefault(); + props.handleEdit(); }}>编辑
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 ? ( +
+ { + e.preventDefault(); + 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()}
-
+
{props.children}
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;