完善页面

src/App.tsx

@@ -2,6 +2,7 @@ import Head from './layout/head/Head.tsx';
 import Body from './layout/body/Body.tsx';
 import Foot from './layout/foot/Foot.tsx';
 
+
 const App: React.FC = () => {
     return (
         <>

src/components/card/CardProjType.tsx

@@ -8,7 +8,10 @@ export default function CardProjType(props: ICardProj) {
     const [chargeAmount, setChargeAmount] = useState(0);
 
     const renderContents = (lineIndex: number, contents: string[]) => {
-        return contents.map((item, index) => <li key={`content_${lineIndex}_${index}`}>{item}</li>);
+        return contents.map((item, index) => <li key={`content_${lineIndex}_${index}`}>
+            <span className="index">{index + 1}</span>
+            <span className="title">{item}</span>
+        </li>);
     }
 
     const renderLines = () => {
@@ -17,7 +20,7 @@ export default function CardProjType(props: ICardProj) {
                 <div className="line" key={`line_${index}`}>
                     <div className="line-title">{line.title}</div>
                     <div className="line-content">
-                        <ol>{renderContents(index, line.contents)}</ol>
+                        <ul>{renderContents(index, line.contents)}</ul>
                     </div>
                 </div>
             )
@@ -38,15 +41,17 @@ export default function CardProjType(props: ICardProj) {
         }
         return (
             <>
-                <div className="proj-charge">{
-                    props.chargeLineArray.map((line, index) => (
-                        <div className="line" key={`charge_${index}`}>
-                            <Checkbox onChange={(e) => {
-                                onChargeChange(e.target.checked, line);
-                            }}>{line.title}</Checkbox>
-                        </div>
-                    ))
-                }</div>
+                <div className="proj-charge">
+                    {
+                        props.chargeLineArray.map((line, index) => (
+                            <div className="line" key={`charge_${index}`}>
+                                <Checkbox onChange={(e) => {
+                                    onChargeChange(e.target.checked, line);
+                                }}>{line.title}</Checkbox>
+                            </div>
+                        ))
+                    }
+                </div>
             </>
         )
     }

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

@@ -1,7 +1,6 @@
 .card-proj-agent {
-    border-radius: 6px;
-    border: 1px solid var(--color-border);
-    padding: 15px;
+    background-color: var(--color-light);
+    padding: 5px 15px;
 }
 
 .card-proj-agent .left {
@@ -24,8 +23,8 @@
     border-left: 0;
     border-bottom: 0;
     border-right: 0;
-    margin-block-start: 10px;
-    margin-block-end: 10px;
+    margin-block-start: 5px;
+    margin-block-end: 5px;
 }
 
 .card-proj-agent .title .left {

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

@@ -1,43 +1,99 @@
 .proj {
     width: 250px;
+    position: relative;
 }
 
 .proj .proj-head {
-    margin-bottom: 15px;
-    padding: 15px;
     font-size: 20px;
-    font-weight: bold;
     text-align: center;
-    border: 1px solid var(--color-border);
+    background-image: url('./proj-card-head-bg.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    width: 175px;
+    height: 40px;
+    line-height: 40px;
+    color: var(--color-light);
+    left: 38px;
+    top: -4px;
 }
 
 .proj .proj-body {
-    min-height: 360px;
+    min-height: 385px;
     margin-bottom: 15px;
-    padding: 15px;
+    padding: 60px 15px 15px 15px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-
-    border: 1px solid var(--color-border);
+    background-color: rgba(244,206,152,0.28);
+    border-radius: 10px;
 }
 
 .proj .proj-body .line .line-title {
     font-size: 16px;
     font-weight: bold;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 30px;
 }
 
-.proj .proj-body .line .line-content ol {
-    padding-left: 15px;
+.proj .proj-body .line:first-child .line-title {
+    margin-top: 0;
+}
 
+.proj .proj-body .line .line-content ul {
+}
+
+.proj .proj-body .line .line-content ul li {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+.proj .proj-body .line .line-content ul li:last-child {
+    margin-bottom: 0;
+}
+
+.proj .proj-body .line .line-content ul li .index {
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    border-radius: 50%;
+    display: inline-block;
+    background-color: rgba(251,176,59,1);
+    text-align: center;
+    color: var(--color-light);
+    font-size: 12px;
+}
+
+.proj .proj-body .line .line-content ul li .title {
+    margin-left: 10px;
+    height: 20px;
+    line-height: 20px;
 }
 
 .proj .proj-body .proj-charge {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px dotted var(--color-light);
+}
+
+.proj .proj-body .proj-charge .ant-checkbox-wrapper .ant-checkbox-inner {
+    background-color: transparent;
+}
+
+.proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-inner {
+    border-color: var(--color-orange);
+}
+
+.proj .proj-body .proj-charge .ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner,
+.proj .proj-body .proj-charge .ant-checkbox-wrapper:hover .ant-checkbox-checked .ant-checkbox-inner {
+    border-color: var(--color-orange);
+    background-color: var(--color-orange);
 }
 
 .proj .proj-foot {
-    padding: 15px;
-    border: 1px solid var(--color-border);
+    padding: 0 10px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -46,9 +102,20 @@
 .proj .proj-foot .buy-btn {
     text-align: center;
     margin: 0 5px;
+    padding: 10px 0;
+    background-color: var(--color-orange);
+    color: var(--color-light);
     flex-basis: 100%;
 }
 
+.proj .proj-foot .buy-btn hr {
+    margin: 5px auto;
+    width: 80%;
+    height: 1px;
+    border: none;
+    background-color: var(--color-light);
+}
+
 .proj .proj-foot .buy-btn .price {
 }
 .proj .proj-foot .buy-btn .buy {
@@ -58,4 +125,5 @@
     border: none;
     cursor: pointer;
     background-color: transparent;
+    color: var(--color-light);
 }

src/components/card/card-proj.css

@@ -1,7 +1,7 @@
 .card-proj {
     border-radius: 6px;
-    border: 1px solid var(--color-border);
-    padding: 15px;
+    background-color: var(--color-light);
+    padding: 5px 15px;
 }
 
 .card-proj .left {
@@ -24,8 +24,8 @@
     border-left: 0;
     border-bottom: 0;
     border-right: 0;
-    margin-block-start: 10px;
-    margin-block-end: 10px;
+    margin-block-start: 5px;
+    margin-block-end: 5px;
 }
 
 .card-proj .title .left {

src/components/list/ListProj.tsx

@@ -4,6 +4,7 @@ import {useRef, MutableRefObject} from "react";
 import {Input, Pagination} from 'antd';
 import type {SearchProps} from 'antd/es/input/Search';
 
+
 const {Search} = Input;
 
 const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
@@ -15,7 +16,7 @@ export default function ListProj() {
     const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
     const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
 
-    const domHeight = window.innerHeight - 301;
+    const domHeight = window.innerHeight - 280;
 
     return (
         <div className="list-proj" ref={listProjRef}>
@@ -32,7 +33,7 @@ export default function ListProj() {
                     <CardProj/>
                 </div>
                 <div className="page">
-                    <Pagination defaultCurrent={1} total={50}/>
+                    <Pagination defaultCurrent={1} total={50} />
                 </div>
             </div>
         </div>

src/components/list/list-proj-agent.css

@@ -1,13 +1,13 @@
 .list-proj-agent {
     width: 100%;
-    padding: 15px 0;
 }
 
 .list-proj-agent .top {
-    padding: 0 15px 15px 15px;
+    padding: 10px 15px;
     display: flex;
     justify-content: right;
     border-bottom: 1px solid var(--color-border);
+    background-color: var(--color-light);
 }
 
 .list-proj-agent .body {
@@ -16,7 +16,7 @@
 }
 
 .list-proj-agent .list {
-    padding: 15px;
+    padding: 15px 0;
     overflow: auto;
 }
 
@@ -29,7 +29,22 @@
 
 .list-proj-agent .body .page {
     border-top: 1px solid var(--color-border);
-    padding-top: 15px;
+    padding: 10px 15px;
     display: flex;
     justify-content: right;
+    background-color: var(--color-light);
+}
+
+.list-proj-agent .body .page .ant-pagination-item {
+    border-color: var(--color-border);
+    color: var(--color-dark);
+}
+
+.list-proj-agent .body .page .ant-pagination-item-active {
+    border-color: var(--color-orange);
+    background-color: var(--color-orange);
+}
+
+.list-proj-agent .body .page .ant-pagination-item-active a {
+    color: var(--color-light);
 }

src/components/list/list-proj.css

@@ -1,13 +1,13 @@
 .list-proj {
     width: 100%;
-    padding: 15px 0;
 }
 
 .list-proj .top {
-    padding: 0 15px 15px 15px;
+    padding: 10px 15px;
     display: flex;
     justify-content: right;
     border-bottom: 1px solid var(--color-border);
+    background-color: var(--color-light);
 }
 
 .list-proj .body {
@@ -16,7 +16,7 @@
 }
 
 .list-proj .list {
-    padding: 15px;
+    padding: 15px 0;
     overflow: auto;
 }
 
@@ -29,7 +29,22 @@
 
 .list-proj .body .page {
     border-top: 1px solid var(--color-border);
-    padding-top: 15px;
+    padding: 10px 15px;
     display: flex;
     justify-content: right;
+    background-color: var(--color-light);
+}
+
+.list-proj .body .page .ant-pagination-item {
+    border-color: var(--color-border);
+    color: var(--color-dark);
+}
+
+.list-proj .body .page .ant-pagination-item-active {
+    border-color: var(--color-orange);
+    background-color: var(--color-orange);
+}
+
+.list-proj .body .page .ant-pagination-item-active a {
+    color: var(--color-light);
 }

src/components/menu/MenuTreeWithTopButton.tsx

@@ -33,7 +33,7 @@ export default function MenuTreeWithTopButton() {
 
     return (
         <div className="menu-tree-with-top-button">
-            <button type="button" className="btn btn-blue" onClick={() => {
+            <button type="button" className="btn btn-orange" onClick={() => {
                 const menuTreeItem = new MenuTreeItem(`${new Date().getTime()}`, '一级目录', 1);
                 menuTreeItem.isParent = true;
                 setMenuTreeArray([

src/components/menu/MenuWithTopButton.tsx

@@ -6,14 +6,14 @@ export default function MenuWithTopButton(props: IMenuWithTopButton) {
         <li key={item.id} onClick={(e) => {
             props.handleListItem(e, index, item);
         }}>
-            <img src={item.icon} className="menu-icon" alt="加载失败"/>
+            {item.icon ? (<img src={item.icon} className="menu-icon" alt="加载失败"/>) : <></>}
             <span className="menu-name">{item.name}</span>
         </li>
     ));
 
     return (
         <div className="menu-with-top-button">
-            <button className="btn btn-blue top-button"
+            <button className="btn btn-orange top-button"
                     onClick={(e) => {
                         props.button.handle(e);
                     }}

src/components/menu/menu-with-top-button.css

@@ -13,6 +13,7 @@
 .menu-with-top-button ul li {
     display: flex;
     align-items: center;
+    justify-content: center;
     padding: 5px;
     cursor: pointer;
 }

src/index.css

@@ -1,18 +1,18 @@
 :root {
-    --color-border: #BBBBBB;
-    --color-box-shadow: rgba(0, 0, 0, 0.3);
+    --color-border: rgba(206, 206, 206, 0.4);
+    --color-box-shadow: rgba(206, 206, 206, 0.4);
     --color-red: #ff5722;
-    --color-orange: #ffb800;
-    --color-green: rgba(129,179,55,1);
-    --color-blue: rgba(64,149,229,1);
+    --color-orange: rgba(252, 189, 0, 1);
+    --color-green: rgba(129, 179, 55, 1);
+    --color-blue: rgba(64, 149, 229, 1);
     --color-purple: #a233c6;
-    --color-dark: rgba(68,72,88,1);
+    --color-dark: rgba(68, 72, 88, 1);
     --color-light: #fafafa;
     --color-hover: #eeeeee;
-    --color-text-disabled: rgba(68,72,88,0.5);
+    --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-note: rgba(68, 72, 88, 0.5);
     --color-disabled: #D9D9D9;
     --font-size-head: 14px;
     --width-workspace: 1280px;

src/interfaces/menu/IMenuWithTopButton.ts

@@ -2,7 +2,7 @@ import {MouseEvent} from "react";
 
 export interface IMenuListItem {
     id: string;
-    icon: string;
+    icon?: string;
     name: string;
 }
 
@@ -13,7 +13,6 @@ export interface IMenuButton {
 }
 
 export interface IMenuWithTopButton {
-
     button: IMenuButton;
     list: Array<IMenuListItem>;
 

src/layout/head/Head.tsx

@@ -1,47 +1,64 @@
 import './head.css'
-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";
+import {Divider, Dropdown, MenuProps, Space} from "antd";
+import {DownOutlined, UserOutlined, KeyOutlined, LogoutOutlined} from "@ant-design/icons";
 
 export default function Head() {
+
+    const items: MenuProps['items'] = [
+        {
+            key: 'userinfo',
+            label: (
+                <div className="dropdown-item">
+                    <UserOutlined />
+                    <span className="title">个人信息</span>
+                </div>
+            ),
+        },
+        {
+            key: 'changePass',
+            label: (
+                <div className="dropdown-item">
+                    <KeyOutlined />
+                    <span className="title">修改密码</span>
+                </div>
+            ),
+        },
+        {
+            key: 'logout',
+            label: (
+                <div className="dropdown-item">
+                    <LogoutOutlined />
+                    <span className="title">退出系统</span>
+                </div>
+            ),
+        },
+    ]
+
     return (
         <div className="head">
             <div className="center">
                 <div className="left">
                     <span className="sys-title">AI引擎软著</span>
-                    <Divider type="vertical" />
+                    <Divider type="vertical"/>
                     <span className="sys-title-sub">软件著作权一站式服务平台</span>
                 </div>
-                <div className="right" style={{backgroundImage: `url(${headRightBg})`}}>
+                <div className="right">
                     <BalanceHead/>
                     <RechargeHead/>
                     <MessageHead/>
-                    <Dropdown
-                        title={'您好：18000000000'}
-                        list={[
-                            {
-                                id: 'userinfo',
-                                name: '个人信息',
-                            },
-                            {
-                                id: 'changePass',
-                                name: '修改密码'
-                            },
-                            {
-                                id: 'logout',
-                                name: '退出系统'
-                            }
-                        ]}
-                        handle={
-                            (_e, _index, item) => {
-
-                                console.log(item.name)
-                            }
-                        }
-                    />
+                    <div style={{display: 'flex', alignContent: 'center', padding: '0 10px', cursor: 'pointer'}}>
+                        <Dropdown menu={{
+                            items: items
+                        }}>
+                            <Space>
+                                您好：18888888
+                                <DownOutlined/>
+                            </Space>
+                        </Dropdown>
+                    </div>
                 </div>
             </div>
         </div>

src/layout/head/head.css

@@ -5,7 +5,7 @@
     top: 0;
     left: 0;
     background-color: var(--color-light);
-    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 2px 6px 0 var(--color-box-shadow);
     z-index: 0;
     color: var(--color-dark);
 }
@@ -45,6 +45,7 @@
     padding-left: 60px;
     display: flex;
     justify-content: right;
+    background-image: url('./head-right-bg.png');
 }
 
 .head .center .head-item {
@@ -56,4 +57,14 @@
     font-size: var(--font-size-head);
     cursor: pointer;
     position: relative;
+}
+
+.ant-dropdown .dropdown-item {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+
+.ant-dropdown .dropdown-item .title {
+    margin-left: 5px;
 }

src/main.tsx

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

src/route/index/index.css

@@ -1,20 +1,20 @@
 .index {
     position: relative;
     height: 100%;
-    background-color: var(--color-light);
 }
 
 .index .left {
     position: absolute;
     width: 220px;
     height: 100%;
+    overflow: auto;
     top: 0;
     left: 0;
+    background-color: var(--color-light);
 }
 
 .index .right {
-    margin-left: 220px;
-    border-left: 1px solid var(--color-border);
+    margin-left: 235px;
     box-sizing: border-box;
     height: 100%;
 }

src/route/index/index.tsx

@@ -19,9 +19,9 @@ export default function Index() {
             }
         },
         list: [
-            {id: 'proj1', icon: './vite.svg', name: '全部项目'},
-            {id: 'proj2', icon: './vite.svg', name: '进行中的'},
-            {id: 'proj3', icon: './vite.svg', name: '已完成的'}
+            {id: 'proj1', name: '全部项目'},
+            {id: 'proj2', name: '进行中的'},
+            {id: 'proj3', name: '已完成的'}
         ],
         handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
             console.log(e);
@@ -39,9 +39,9 @@ export default function Index() {
             }
         },
         list: [
-            {id: 'agent1', icon: './vite.svg', name: '全部项目'},
-            {id: 'agent2', icon: './vite.svg', name: '进行中的'},
-            {id: 'agent3', icon: './vite.svg', name: '已完成的'},
+            {id: 'agent1', name: '全部项目'},
+            {id: 'agent2', name: '进行中的'},
+            {id: 'agent3', name: '已完成的'},
         ],
         handleListItem(e: MouseEvent<HTMLLIElement>, index: number, item: IMenuListItem) {
             console.log(e);

src/route/proj/ProjNew.tsx

@@ -80,7 +80,7 @@ export default function ProjNew() {
 
                             <Form.Item>
                                 <Flex align="center" justify="center" gap="large">
-                                    <Button type="primary" htmlType="submit">
+                                    <Button type="primary" htmlType="submit" style={{backgroundColor: 'var(--color-orange)'}}>
                                         提交并付款
                                     </Button>
                                     <Button type="default" htmlType="button" onClick={onBack}>