完善页面

src/components/balance/BalanceHead.tsx

@@ -0,0 +1,15 @@
+import './balance-head.css'
+
+export default function BalanceHead() {
+
+    const handleClick = () => {
+        console.log('查看余额')
+    }
+
+    return (
+        <div className="head-item balance-head">
+            <span className="label">余额￥：</span>
+            <span className="balance" onClick={handleClick}>800</span>
+        </div>
+    )
+}

src/components/balance/balance-head.css

@@ -0,0 +1,11 @@
+.balance-head {
+}
+
+.balance-head .label {
+
+}
+
+.balance-head .balance {
+    font-weight: bold;
+    font-size: 40px;
+}

src/components/dropdown/Dropdown.tsx

@@ -1,10 +1,8 @@
 import {useRef} from 'react';
 import './dropdown.css';
+import {IDropdown, IDropdownItem} from '../../interfaces/dropdown/IDropdown.ts';
 
-type  ItemClick = (e: MouseEvent) => void;
+export default function Dropdown({title, list, handle}: IDropdown) {
-
-const Dropdown = (title: string, list: Array<{ title: string, onClick: ItemClick }>) => {
-
     const ulRef = useRef<HTMLUListElement>(null);
 
     const onMouseMove = () => {
@@ -20,7 +18,13 @@ const Dropdown = (title: string, list: Array<{ title: string, onClick: ItemClick
         }
         ulRef.current.style.display = 'none';
     }
-    const items = list.map(item => <li onClick={item.onClick}>{item.title}</li>)
+    const items = list.map((item: IDropdownItem, index: number) =>
+        <li key={item.id}
+            onClick={e => handle(e, index, { id: item.id, name: item.name })}
+        >
+            {item.name}
+        </li>
+    )
 
     return (
         <div className="dropdown"
@@ -31,5 +35,4 @@ const Dropdown = (title: string, list: Array<{ title: string, onClick: ItemClick
             <ul ref={ulRef}>{items}</ul>
         </div>
     );
-}
+}
-export default Dropdown;

src/components/dropdown/dropdown.css

@@ -1,5 +1,5 @@
 .dropdown {
-    width: 160px;
+    min-width: 120px;
     height: 100%;
     padding: 0 10px;
     cursor: pointer;
@@ -11,10 +11,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    font-size: var(--font-size-head);
 }
 
 .dropdown ul {
-    /*display: none;*/
+    display: none;
     margin: 0;
     width: 100%;
     padding: 10px 0;
@@ -29,6 +30,7 @@
     cursor: pointer;
     word-break: break-all;
     border-top: 1px solid var(--color-border);
+    color: var(--color-dark)
 }
 
 .dropdown ul li:last-child {

src/components/message/MessageHead.tsx

@@ -0,0 +1,15 @@
+import './message-header.css'
+
+export default function MessageHead() {
+
+    const handleClick = () => {
+        console.log('查看消息')
+    }
+
+    return (
+        <div className="head-item message-header" onClick={handleClick}>
+            <span className="label">消息</span>
+            <span className="badge">99+</span>
+        </div>
+    )
+}

src/components/message/message-header.css

@@ -0,0 +1,17 @@
+.message-header {
+}
+
+.message-header .label {
+
+}
+
+.message-header .badge {
+    background-color: var(--color-red);
+    width: 26px;
+    height: 26px;
+    line-height: 26px;
+    font-size: 12px;
+    border-radius: 13px;
+    text-align: center;
+    color: #ffffff;
+}

src/components/recharge/RechargeHead.tsx

@@ -0,0 +1,14 @@
+import './recharge-head.css';
+
+export default function RechargeHead() {
+
+    const handleRecharge = () => {
+        console.log('充值');
+    }
+
+    return (
+        <div className="head-item recharge-head">
+            <span onClick={handleRecharge}>充值</span>
+        </div>
+    )
+}

src/components/recharge/recharge-head.css

@@ -0,0 +1,3 @@
+.recharge-head {
+
+}

src/index.css

@@ -1,9 +1,18 @@
 :root {
-    --color-border: #E1E1E1;
+    --color-border: #eeeeee;
     --color-box-shadow: rgba(0, 0, 0, 0.3);
+    --color-red: #ff5722;
+    --color-orange: #ffb800;
+    --color-green: #16baaa;
+    --color-blue: #1e9fff;
+    --color-purple: #a233c6;
+    --color-dark: #2f363c;
+    --color-light: #fafafa;
+    --font-size-head: 16px;
 }
 
 html, body {
     margin: 0;
-    padding: 0
+    padding: 0;
+    font-size: 14px;
 }

src/interfaces/dropdown/IDropdown.ts

@@ -0,0 +1,13 @@
+import {MouseEvent} from "react";
+
+export interface IDropdownItem {
+    id: string;
+    name: string;
+}
+
+export interface IDropdown {
+    title: string;
+    list: Array<IDropdownItem>;
+
+    handle(e: MouseEvent<HTMLLIElement>, index: number, item: IDropdownItem): void;
+}

src/layout/foot/Foot.tsx

@@ -1,16 +1,7 @@
-import React from 'react';
+import './foot.css';
-
-const footStyle: React.CSSProperties = {
-    position: 'fixed',
-    bottom: 0,
-    left: 0,
-    height: '40px',
-    width: '100%',
-    backgroundColor: 'red',
-}
 
 export default function Foot() {
     return (
-        <div style={footStyle}>footer</div>
+        <div className="foot">footer</div>
     )
 }

src/layout/foot/foot.css

@@ -0,0 +1,12 @@
+.foot {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--color-dark);
+    color: var(--color-light);
+}

src/layout/head/Head.tsx

@@ -1,22 +1,44 @@
 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';
 
 export default function Head() {
+    const logo: string = 'vite.svg';
     return (
-        <div className='head'>
+        <div className="head">
-            <div className='center'>
+            <div className="center">
-                <div className='left'>LOGO</div>
+                <div className="left">
-                <div className='right'>
+                    <img src={logo} className="logo" alt="加载失败"/>
+                    <span className="sys-title">AI软件著作权管理系统</span>
+                </div>
+                <div className="right">
+                    <BalanceHead/>
+                    <RechargeHead/>
+                    <MessageHead/>
                     <Dropdown
-                        title={'标题'}
+                        title={'您好：18000000000'}
                         list={[
                             {
-                                title: '修改密码',
+                                id: 'userinfo',
-                                onClick: (e) => {
+                                name: '个人信息',
-                                    console.log(1)
+                            },
-                                }
+                            {
+                                id: 'changePass',
+                                name: '修改密码'
+                            },
+                            {
+                                id: 'logout',
+                                name: '退出系统'
                             }
                         ]}
+                        handle={
+                            (_e, _index, item) => {
+
+                                console.log(item.name)
+                            }
+                        }
                     />
                 </div>
             </div>

src/layout/head/head.css

@@ -1,12 +1,13 @@
 .head {
     width: 100%;
-    height: 70px;
+    height: 60px;
     position: fixed;
     top: 0;
     left: 0;
-    background-color: #E1E1E1;
+    background-color: var(--color-dark);
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
     z-index: 0;
+    color: var(--color-light)
 }
 
 .head .center {
@@ -18,11 +19,36 @@
 }
 
 .head .center .left {
-    width: 200px;
+    min-width: 180px;
     height: 100%;
-    background-color: blue;
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    font-weight: 800;
+}
+
+.head .center .left .logo {
+    width: 38px;
+    height: 38px;
+}
+
+.head .center .left .sys-title {
+    margin-left: 5px;
 }
 
 .head .center .right {
     height: 100%;
+    display: flex;
+    justify-content: right;
+}
+
+.head .center .head-item {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 15px;
+    font-size: var(--font-size-head);
+    cursor: pointer;
+    position: relative;
 }