首页结构调整

src/components/balance/BalanceHead.tsx

@@ -1,16 +1,20 @@
 import './balance-head.css'
 import {useContext} from "react";
 import {GlobalContext} from "../../context/GlobalContext.ts";
-
+import moneyImg from '../../static/head/money.png'
 export default function BalanceHead() {
     const globalContext = useContext(GlobalContext);
 
     return ( 
         <div className="head-item balance-head"> 
-            <span className="label">余额￥：</span>
+            <div className="label">
-            <span className="balance" onClick={() => {
+                <img src={moneyImg} alt="" />
+                <div>余额</div>
+                
+            </div>
+            <div className="balance" onClick={() => {
                 console.log('查看余额')
-            }}>{globalContext.user.balance}</span>
+            }}>￥{globalContext.user.balance}</div>
         </div>
     )
 }

src/components/balance/balance-head.css

@@ -1,10 +1,20 @@
 .balance-head {
+    /* background-color: #edf063; */
 }
 
 .balance-head .label {
+    font-size: 14px;
+    display: flex;
 
 }
+.balance-head .label img{
+    width: 17px;
+    height: 19px;
+    margin-right: 5px;
+}
 
 .balance-head .balance {
-    font-size: 20px;
+    font-size: 18px;
+    color: #f78e4c;
+    margin-top: 8px;
 }

src/components/card/CardProj.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import './card-proj.css';
 import {
     CheckOutlined,
@@ -19,6 +20,9 @@ import {Axios, put} from "../../util/AjaxUtils.ts";
 import { useContext, useEffect, useState } from "react";
 import { IndexListContext } from "../../context/IndexListContext.ts";
 import useMessage from "antd/es/message/useMessage";
+import setImg from '../../static/right/set.png'
+import orderImg from '../../static/right/order.png'
+import menuImg from '../../static/right/menu.png'
 
 export default function CardProj(props: { item: IProj }) {
     const nav = useNavigate();
@@ -142,23 +146,107 @@ export default function CardProj(props: { item: IProj }) {
         <>
             <div className="card-proj">
                 <div className="title">
+                    <div className='titleLift'>
+
+
                         <div className="left">
+                            <div className='boxline'></div>
                             <span className="text-btn" onClick={goEdit}>{data.projName}</span>
                         </div>
                         <div className="right">
-                        <span className="context">上下文：{data.projContext}</span>
+                            <span className="context">编号：{data.projContext}</span>
+                            <span className='line'></span>
                             <span className="date">{data.gmtCreate}</span>
-                        <span className="status">{renderGenerateStatus()}</span>
+                            {/* 状态标签 */}
+                            {/* <span className="status">{renderGenerateStatus()}</span> */}
                         </div>
                     </div>
-                <hr/>
+                    <div className="titleRight">
+                        {
+                            data.generate.generateStatus == GenerateStatus.SUCCESS ? (
+                                <span>
+                                    <SearchOutlined />
+                                    <span className="text-btn" onClick={goEdit}>查看</span>
+                                </span>
+                            ) : (
+                                <span>
+                                    <EditOutlined />
+                                    <span className="text-btn" onClick={goEdit}>编辑</span>
+                                </span>
+                            )
+                        }
+                        <span className='orignLine'>|</span>
+                        <span>
+                            <EyeOutlined />
+                            <span className="text-btn" onClick={() => {
+                                window.open(`${Axios.defaults?.baseURL}/${data.previewUrl}`, '_blank')
+                            }}>预览</span>
+                        </span>
+                    </div>
+                </div>
+                {/* <hr/> */}
                 <div className="body">
                     <div className="line">
                         <div className="left">
-                            <Tag color="magenta">{payCharge}</Tag>
+                            {/* <Tag color="magenta">{payCharge}</Tag> */}
-                            <Tag color="gold">￥{data.pay.payment / 100}</Tag>
+                            {/* 金额 */}
+                            {/* <Tag color="gold">￥{data.pay.payment / 100}</Tag> */}
                         </div>
-                        <div className="right">
+                        <div className='centerl'>
+                            <div className='c-top'>
+                                <span className='money'>金额(￥) : </span>
+                                <span className='num'>{data.pay.payment / 100}</span>
+                            </div>
+                            <div className='c-bot'>
+                                <div className='set' onClick={() => {
+                                    if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
+                                        nav(`/proj-edit/config-loginpage-show/${data.projId}`)
+                                    } else {
+                                        nav(`/proj-edit/config-loginpage/${data.projId}`)
+                                    }
+                                }}>
+                                    <img src={setImg} alt="" />
+                                    <div>登录界面设置</div>
+                                </div>
+                                <div className='set' onClick={() => {
+                                    if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
+                                        nav(`/proj-edit/config-mod-list-show/${data.projId}`)
+                                    } else {
+                                        nav(`/proj-edit/config-mod-list/${data.projId}`)
+                                    }
+                                }}>
+                                    <img src={menuImg} alt="" />
+                                    <div>系统菜单管理({data.projModCount})</div>
+                                </div>
+                                <div className='set' onClick={() => {
+                                    if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
+                                        nav(`/proj-edit/config-menu-list-show/${data.projId}`)
+                                    } else {
+                                        nav(`/proj-edit/config-menu-list/${data.projId}`)
+
+                                    }
+                                }}>
+                                    <img src={orderImg} alt="" />
+                                    <div>菜单排序({data.projModCount})</div>
+                                </div>
+                            </div>
+                        </div>
+                        {/* 目录层级结构*/}
+                        <div className='centerr'>
+
+                        </div>
+                        <div className='right'>
+                            <div className='rigth-t'>
+                                - 当前状态 -
+                            </div>
+                            <div className="status">{renderGenerateStatus()}</div>
+                        </div>
+
+
+
+
+
+                        {/* <div className="right">
                         {
                                 data.generate.generateStatus == GenerateStatus.SUCCESS ? (
                                     <span>
@@ -178,9 +266,9 @@ export default function CardProj(props: { item: IProj }) {
                                     window.open(`${Axios.defaults?.baseURL}/${data.previewUrl}`, '_blank')
                                 }}>预览</span>
                             </span>
+                        </div> */}
                     </div>
-                    </div>
+                    {/* <div className="line">
-                    <div className="line">
                         <div className="left">
                             {
                                 data.generate.generateStatus == GenerateStatus.SUCCESS ? (
@@ -231,10 +319,10 @@ export default function CardProj(props: { item: IProj }) {
                                 ) : <></>
                             }
                         </div>
+                    </div> */}
                 </div>
-                </div>
+                {/* <hr/> */}
-                <hr/>
+                {/* <div className="foot">
-                <div className="foot">
                     <ConfigProvider theme={{
                         components: {
                             Button: {
@@ -244,7 +332,7 @@ export default function CardProj(props: { item: IProj }) {
                     }}>
                         {renderOption()}
                     </ConfigProvider>
-                </div>
+                </div> */}
             </div>
             {messageContext}
         </>

src/components/card/card-proj.css

@@ -1,24 +1,37 @@
 .card-proj {
     border-radius: 6px;
     background-color: var(--color-light);
-    padding: 5px 15px;
+    /* padding: 5px 15px; */
+    height: 240px;
 }
 
 .card-proj .left {
     position: unset;
 }
 
+.card-proj .title {
+    display: flex;
+    justify-content: space-between;
+}
+
+.card-proj .titleLift {
+    display: flex;
+}
+
 .card-proj .right {
     margin: 0;
 }
 
 .card-proj .title {
     display: flex;
-    justify-content: space-between;
+    /* justify-content: space-between; */
     align-items: center;
+    height: 60px;
+    /* background-color: pink; */
+    border-bottom: 1px solid var(--color-border);
 }
 
-.card-proj hr {
+/* .card-proj hr {
     border-color: var(--color-border);
     border-style: dashed;
     border-left: 0;
@@ -26,28 +39,70 @@
     border-right: 0;
     margin-block-start: 5px;
     margin-block-end: 5px;
-}
+} */
 
 .card-proj .title .left {
-    padding: 5px;
+    /* padding: 5px; */
     font-weight: bold;
+    /* background-color: red;  */
+    display: flex;
+    align-items: center;
+    margin-left: 21px;
+    font-weight: 700;
+    font-size: 19px;
+    color: #292929;
+
+}
+
+.card-proj .title .left .boxline {
+    width: 2px;
+    height: 18px;
+    border: 2px dotted #adadad;
+    margin-right: 18px;
 }
 
 .card-proj .title .right {
     padding: 5px;
     width: 380px;
     display: flex;
-    justify-content: space-between;
+    /* justify-content: space-between; */
     align-items: center;
 }
 
 .card-proj .title .right span {
     margin-inline-end: 0;
+    font-size: 14px;
+    color: #888888;
 }
 
-.card-proj .title .right span:first-child {
+.card-proj .title .right .line {
+    width: 1px;
+    height: 16px;
+    border-left: 1px solid #adadad;
+    margin-left: 12px;
+    margin-right: 12px;
 }
 
+/* .card-proj .title .right .date{
+    margin-left: 24px;
+} */
+.card-proj .titleRight {
+    margin-right: 29px;
+    font-size: 14px;
+    color: #FFA415;
+}
+
+.card-proj .titleRight .orignLine {
+    margin-left: 27px;
+    margin-right: 27px;
+}
+
+.card-proj .titleRight .text-btn {
+    margin-left: 11px;
+}
+
+.card-proj .title .right span:first-child {}
+
 .card-proj .body {
     width: unset;
     border: unset !important;
@@ -58,15 +113,106 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 5px 0;
+    padding: 24px 0;
 }
 
 .card-proj .body .line .left {
-    width: unset;
+    /* width: unset;
+    display: flex; */
+    width: 209px;
+    height: 128px;
+    background: #C4C4C4;
+    border-radius: 6px;
+    margin-left: 46px;
+}
+
+.card-proj .body .line .centerl {
+    margin-left: 27px;
+}
+
+.card-proj .body .line .centerl .c-top {
+    width: 175px;
+    height: 39px;
+    background: #FFF9E6;
+    border-radius: 19px;
+    color: #FF5D15;
+    line-height: 39px;
+    text-align: center;
+}
+
+.card-proj .body .line .centerl .c-top .money {
+    font-weight: 300;
+    font-size: 14px;
+}
+
+.card-proj .body .line .centerl .c-top .num {
+    font-weight: bold;
+    font-size: 20px;
+}
+
+.card-proj .body .line .centerl .c-bot {
     display: flex;
 }
 
-.card-proj .body .line .left span {
+.card-proj .body .line .centerl .c-bot .set {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    font-weight: 300;
+    font-size: 15px;
+    color: #707070;
+    cursor: pointer;
+    margin-left: 31px;
+}
+
+.card-proj .body .line .centerl .c-bot img {
+    width: 30px;
+    height: 30px;
+}
+
+.card-proj .body .line .centerr {
+    width: 428px;
+    height: 110px;
+    /* border-left: 1px dotted #737373; */
+    /* border-right: 1px dotted #737373; */
+    margin-left: 174px;
+}
+
+.card-proj .body .line .right {
+    height: 110px;
+    width: 197px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    /* background-color: red; */
+    /* margin-left: 600px; */
+    border-left: 1px dotted #737373;
+}
+
+.card-proj .body .line .right .rigth-t {
+    font-weight: 300;
+    font-size: 12px;
+    color: #707070;
+    text-align: center;
+    /* background-color: pink; */
+}
+
+.card-proj .body .line .right .status {
+    /* background-color: red; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 10px;
+}
+
+
+
+
+
+
+
+/* .card-proj .body .line .left span {
     margin-right: 10px;
 }
 
@@ -84,4 +230,4 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-}
+} */

src/components/list/ListProj.tsx

@@ -1,13 +1,16 @@
 import './list-proj.css'
 import CardProj from "../card/CardProj.tsx";
 import { useRef, MutableRefObject, useState, useEffect, useContext } from "react";
-import {Input, Pagination, message, Spin, Tag, Image} from 'antd';
+import { Input, Pagination, message, Spin, Image } from 'antd';
 import { get } from "../../util/AjaxUtils.ts";
 import { IndexListContext } from "../../context/IndexListContext.ts";
 import { IListPage } from "../../interfaces/listpage/IListPage.ts";
 import { IProj } from "../../interfaces/proj/IProj.ts";
 import NoData from "../../assets/no-data.png";
-
+import gpsImg from '../../static/right/gps.png'
+import { Link } from "react-router-dom";
+import { Breadcrumb } from 'antd';
+import backImg from '../../static/right/back.png'
 const { Search } = Input;
 
 export default function ListProj() {
@@ -83,26 +86,46 @@ export default function ListProj() {
         }
     }, [indexListContext.status, indexListContext.categoryChangeCount, indexListContext.category, keywords, page])
 
-    const renderStatus = () => {
+    // const renderStatus = () => {
-        if (indexListContext.status == 'ALL') {
+    //     if (indexListContext.status == 'ALL') {
-            return <Tag color="blue">项目：全部项目</Tag>
+    //         return <Tag color="blue">项目：全部项目</Tag>
-        } else if (indexListContext.status == 'PROCESSING') {
+    //     } else if (indexListContext.status == 'PROCESSING') {
-            return <Tag color="blue">项目：进行中的</Tag>
+    //         return <Tag color="blue">项目：进行中的</Tag>
-        } else if (indexListContext.status == 'COMPLETE') {
+    //     } else if (indexListContext.status == 'COMPLETE') {
-            return <Tag color="blue">项目：已完成的</Tag>
+    //         return <Tag color="blue">项目：已完成的</Tag> 
-        }
+    //     }
-        return <></>
+    //     return <></>
-    }
+    // }
 
     return (
         <>
             {contextHolder}
             <div className="list-proj" ref={listProjRef}>
                 <div className="top">
-                    {renderStatus()}
+                    {/* 标签 */}
-                    <Search placeholder="按项目名搜索" onSearch={(value) => {
+                    {/* {renderStatus()} */}
+                    <div className='gps'>
+                        <img src={gpsImg} alt="" />
+                        <div>当前位置:首页</div>
+                    </div>
+                    <div className='line'></div>
+                    <Search placeholder="输入项目名称" onSearch={(value) => {
                         setKeywords(value)
-                    }} style={{width: 200}}/>
+                    }} style={{
+                        width: '253px',
+                        height: '31px',
+                    }} />
+                    <div className='nowPosition'>
+                        <img src={backImg} alt="" />
+                        <div>
+                            <Breadcrumb
+                                separator="|"
+                                items={[
+                                    { title: <Link to={'/'}>首页</Link> },
+                                ]}
+                            />
+                        </div>
+                    </div>
                 </div>
                 <div className="body">
                     <Spin tip="加载中..." spinning={isLoading}>

src/components/list/list-proj.css

@@ -1,16 +1,73 @@
 .list-proj {
     width: 100%;
+    padding-top: 26px;
+    padding-right: 33px;
+    box-sizing: border-box;
 }
 
 .list-proj .top {
-    padding: 10px 15px;
+    /* padding: 10px 15px; */
+    box-sizing: border-box;
+    height: 62px;
     display: flex;
-    justify-content: space-between;
+    /* justify-content: space-between; */
     align-items: center;
     border-bottom: 1px solid var(--color-border);
     background-color: var(--color-light);
 }
 
+.list-proj .top .gps {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+
+.list-proj .top .gps img {
+    width: 18px;
+    height: 21px;
+    margin-left: 22px;
+    margin-right: 16px;
+}
+
+.list-proj .top .line {
+    width: 1px;
+    height: 23px;
+    border-left: 1px solid #d8d8d8;
+    margin-left: 33px;
+    margin-right: 31px;
+}
+
+/* .list-proj .top .search {
+    width: 253px;
+    height: 31px;
+    background: #FFF5E6;
+    border-radius: 15px;
+    border: 1px solid #FFD99C
+} */
+.nowPosition {
+    display: flex;
+    align-items: center;
+    /* width: 349px; */
+    height: 100%;
+    margin-left: 98px;
+    font-weight: 300;
+    font-size: 13px;
+    color: #676767;
+    /* background: url(../../static//right/back.png); */
+    /* background-color: rgb(228, 191, 191); */
+    position: relative;
+}
+.nowPosition img{
+    width: 349px;
+    height: 62px;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+.nowPosition div{
+    margin-left: 133px;
+    z-index: 99;
+}
 .list-proj .body {
     width: unset;
     margin: 0;
@@ -24,6 +81,7 @@
 .list-proj .body .card-proj {
     margin-bottom: 10px;
 }
+
 .list-proj .body .card-proj:last-child {
     margin-bottom: 0;
 }

src/components/menu/MenuTree.tsx

@@ -1,6 +1,7 @@
 import './menu-tree.css';
 import {
     CaretRightOutlined,
+    FolderOutlined,
     CaretDownOutlined,
     PlusOutlined,
     CloseOutlined,
@@ -67,7 +68,7 @@ export default function MenuTree(props: IMenuTree) {
         const width = 180 - 50 - (item.level * 10) - (5 + (item.isParent ? 8.75 : 0));
         return (
             <>
-                {item.isParent ? icon : <></>}
+                {item.isParent ? icon : <></>}<FolderOutlined />
                 <span
                     className={item.active ? 'active' : ''}
                     style={{width: width}}

src/components/menu/MenuTreeWithTopButton.tsx

@@ -6,7 +6,8 @@ import {del, get, post, put} from "../../util/AjaxUtils.ts";
 import useMessage from "antd/es/message/useMessage";
 import { IndexListDataType, IndexListDispatchContext, } from "../../context/IndexListContext.ts";
 import { Input, MenuProps, Modal } from "antd";
-
+import srcImg from '../../static/left/src.png'
+import newImg from '../../static/left/new.png'
 
 type ProjCategoryDTO = {
     projCategoryId: string;
@@ -111,11 +112,31 @@ export default function MenuTreeWithTopButton() {
 
     return (
         <>
-            <div className="menu-tree-with-top-button">
+            {/* <div className="center-top">
-                <button type="button" className="btn btn-orange" onClick={() => {
+                <div className="center-top-lift">
+                    <img src={srcImg} alt="" />
+                    <div >目录</div>
+                </div>
+                <div className='center-top-right' onClick={() => {
                     setSaveCategory(new MenuTreeItem('-1', '0', '新目录', 1));
                     setSaveModal(true)
-                }}>添加目录
+                }}>
+                    <img src={newImg} alt="" />
+                    <div>创建</div>
+                </div> */}
+            <div className="menu-tree-with-top-button">
+                <button type="button" className="btn-cennter" >
+                    <div className="center-top-lift">
+                        <img src={srcImg} alt="" />
+                        <div >目录</div>
+                    </div>
+                    <div className='center-top-right' onClick={() => {
+                        setSaveCategory(new MenuTreeItem('-1', '0', '新目录', 1));
+                        setSaveModal(true)
+                    }}>
+                        <img src={newImg} alt="" />
+                        <div>创建</div>
+                    </div>
                 </button>
                 <MenuTree
                     menus={menuTreeArray}

src/components/menu/MenuWithBottomButton.tsx

@@ -0,0 +1,54 @@
+import './menu-with-bottom-button.css'
+import { IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
+import serveImg from '../../static/left/serves.png'
+// import newImg from '../../static/left/new.png'
+// import {
+//     RightOutlined
+// } from '@ant-design/icons';
+export default function MenuWithTopButton(props: IMenuWithTopButton) {
+
+
+    const list = props.list.map((item, index) => (
+        // 创建项目下三个选项
+        <li className={item.active ? 'active' : ''} key={item.id} onClick={(e) => {
+            props.handleListItem(e, index, item);
+        }}>
+
+            {item.icon ? (<img src={item.icon} className="menu-icon" alt="加载失败" />) : <></>}
+            <span className="menu-name">{item.name}</span>
+            {/* <span className='icon'><RightOutlined /></span> */}
+        </li>
+    ));
+
+    return (
+        <div className="menu-with-bot-button">
+            {/* button 是三个黄色按钮 */}
+            <div className='bot'  onClick={(e) => {
+                    props.button.handle(e);
+
+                }}>
+                <div className='bot-lift'>
+                    <img src={serveImg} alt="" />
+                    <div> {props.button.name}</div>
+                </div>
+                {/* <div className='bot-right' onClick={(e) => {
+                    props.button.handle(e);
+
+                }}>
+                    <img src={newImg} alt="" />
+                    <div>创建</div>
+                </div> */}
+            </div>
+            {/* <button className="btn btn-orange top-button"
+                    onClick={(e) => {
+                        props.button.handle(e);
+                        console.log(e);
+                        
+                    }}
+            >
+                {props.button.name}
+            </button> */}
+            <ul>{list}</ul>
+        </div>
+    )
+}

src/components/menu/MenuWithTopButton.tsx

@@ -1,27 +1,50 @@
 import './menu-with-top-button.css'
 import { IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
-
+import objImg from '../../static/left/obj.png'
+import newImg from '../../static/left/new.png'
+import {
+    RightOutlined
+} from '@ant-design/icons';
 export default function MenuWithTopButton(props: IMenuWithTopButton) {
+
+
     const list = props.list.map((item, index) => (
         // 创建项目下三个选项
         <li className={item.active ? 'active' : ''} key={item.id} onClick={(e) => {
             props.handleListItem(e, index, item);
         }}>
+
             {item.icon ? (<img src={item.icon} className="menu-icon" alt="加载失败" />) : <></>}
             <span className="menu-name">{item.name}</span>
+            <span className='topIcon'><RightOutlined /></span>
         </li>
     ));
 
     return (
         <div className="menu-with-top-button">
             {/* button 是三个黄色按钮 */}
-            <button className="btn btn-orange top-button"
+            <div className='top'>
+                <div className='top-lift'>
+                    <img src={objImg} alt="" />
+                    <div> {props.button.name}</div>
+                </div>
+                <div className='top-right' onClick={(e) => {
+                    props.button.handle(e);
+
+                }}>
+                    <img src={newImg} alt="" />
+                    <div>创建</div>
+                </div>
+            </div>
+            {/* <button className="btn btn-orange top-button"
                     onClick={(e) => {
                         props.button.handle(e);
+                        console.log(e);
+                        
                     }}
             >
                 {props.button.name}
-            </button>
+            </button> */}
             <ul>{list}</ul>
         </div>
     )

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

@@ -1,7 +1,45 @@
 .menu-tree-with-top-button {
-    padding: 0 15px;
+    /* padding: 0 15px; */
 }
 
 .menu-tree-with-top-button .btn {
     width: 100%;
 }
+.btn-cennter{
+    width: 268px;
+    height: 56px;
+    font-size: 18px;
+    background: #FFFBEF;
+
+    color: #FFAF22;
+    display: flex;
+    align-items: center;
+    border-top: 1px solid #fde9ab;
+    border-bottom: 1px solid #fde9ab;
+    border-left: 0;
+    border-right: 0;
+}
+.center-top-lift{
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+}
+.center-top-lift img{
+    width: 19px;
+    height: 15px;
+    margin-left: 30px;
+    margin-right: 14px;
+}
+.center-top-right{
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    cursor: pointer;
+    width: 53px;
+    margin-left: 96px;
+}
+.center-top-right img{
+    margin-right: 10px;
+    width: 14px;
+    height: 13px;
+}

src/components/menu/menu-tree.css

@@ -1,10 +1,18 @@
 .menu-tree {
     margin-top: 10px;
 }
+
 .menu-tree ul {
-    margin-left: 10px;
+    /* margin-left: 10px; */
 }
+
 .menu-tree ul li {
+    font-size: 15px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-right: 10px;
+    padding-left: 10px;
+    /* background-color: aquamarine; */
 }
 
 .menu-tree ul li .menu-title {
@@ -14,11 +22,13 @@
     height: 22px;
     line-height: 22px;
 }
+
 .menu-tree ul li .menu-title .label {
     cursor: pointer;
     display: flex;
     align-items: center;
 }
+
 .menu-tree ul li .menu-title .label span {
     margin-left: 5px;
     display: inline-block;
@@ -31,9 +41,12 @@
     user-select: none;
     -webkit-user-select: none;
 }
+
 .menu-tree ul li .menu-title .label span.active {
     text-decoration-line: underline;
     text-underline-offset: 5px;
+    background-color: rgb(221, 221, 221);
+    text-align: center;
 }
 
 .menu-tree ul li .menu-title .label .menu-name-input {
@@ -52,6 +65,7 @@
     display: flex;
     justify-content: right;
 }
+
 .menu-tree ul li .menu-title .icon-group .icon {
     cursor: pointer;
     padding-left: 2px;

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

@@ -0,0 +1,129 @@
+.menu-with-top-button {
+    /* padding: 15px; */
+}
+
+.bot {
+    width: 268px;
+    height: 56px;
+    font-size: 18px;
+    /* color: #FFAF22; */
+    background: #FFFBEF;
+
+    color: #FFAF22;
+    display: flex;
+    align-items: center;
+    border-top: 1px solid #fde9ab;
+    border-bottom: 1px solid #fde9ab;
+}
+
+.bot-lift {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+}
+
+.bot-lift img {
+    width: 15px;
+    height: 15px;
+    margin-left: 39px;
+    margin-right: 9px;
+}
+
+.bot-right {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    cursor: pointer;
+    width: 53px;
+    /* background-color: red; */
+    margin-left: 96px;
+
+}
+
+.bot-right img {
+    /* margin-left: 96px; */
+    margin-right: 10px;
+    width: 14px;
+    height: 13px;
+}
+
+.menu-with-bot-button ul {
+    padding-top: 12px;
+    padding-bottom: 12px;
+}
+
+.menu-with-bot-button ul li {
+    height: 50px;
+    margin-left: 66px;
+    font-weight: 400;
+    font-size: 16px;
+    color: #313131;
+    line-height: 50px;
+    cursor: pointer;
+}
+
+.menu-with-bot-button ul li.active {
+    text-decoration-line: underline;
+
+}
+/* .icon{
+    color: white;
+    margin-left: 101px;
+} */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* 
+.menu-with-top-button .top-button {
+    width: 268px;
+    height: 56px;
+    background: #FFFBEF;
+    font-size: 18px;
+    color: #FFAF22;
+} */
+
+/* .menu-with-top-button ul {
+    padding: 10px;
+} */
+
+/* .menu-with-top-button ul li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    cursor: pointer;
+} */
+
+/* .menu-with-top-button ul li.active {
+    text-decoration-line: underline;
+    text-underline-offset: 5px;
+} */
+
+/* .menu-with-top-button ul li:hover {
+    text-decoration-line: underline;
+    text-underline-offset: 5px;
+} */
+
+/* .menu-with-top-button ul li:last-child {
+    margin-bottom: 0;
+}
+
+.menu-with-top-button ul li .menu-icon {
+    width: 30px;
+    height: 30px;
+}
+
+.menu-with-top-button ul li .menu-name {
+    padding-left: 5px;
+} */

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

@@ -1,33 +1,104 @@
 .menu-with-top-button {
-    padding: 15px;
+    /* padding: 15px; */
 }
 
-.menu-with-top-button .top-button {
+.menu-with-top-button .top {
-    width: 100%;
+    width: 268px;
+    height: 56px;
+    font-size: 18px;
+    /* color: #FFAF22; */
+    background: #FFFBEF;
+
+    color: #FFAF22;
+    display: flex;
+    align-items: center;
+    border-top: 1px solid #fde9ab;
+    border-bottom: 1px solid #fde9ab;
+}
+
+.menu-with-top-button .top .top-lift {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+}
+
+.menu-with-top-button .top .top-lift img {
+    width: 19px;
+    height: 19px;
+    margin-left: 30px;
+    margin-right: 14px;
+}
+
+.menu-with-top-button .top .top-right {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    cursor: pointer;
+    width: 53px;
+    /* background-color: red; */
+    margin-left: 96px;
+
+}
+
+.menu-with-top-button .top .top-right img {
+    /* margin-left: 96px; */
+    margin-right: 10px;
+    width: 14px;
+    height: 13px;
 }
 
 .menu-with-top-button ul {
-    padding: 10px;
+    padding-top: 12px;
+    padding-bottom: 12px;
 }
 
 .menu-with-top-button ul li {
-    display: flex;
+    height: 50px;
-    align-items: center;
+    margin-left: 66px;
-    justify-content: center;
+    font-weight: 400;
-    padding: 5px;
+    font-size: 16px;
+    color: #313131;
+    line-height: 50px;
     cursor: pointer;
 }
 
 .menu-with-top-button ul li.active {
-    text-decoration-line: underline;
+    width: 223px;
-    text-underline-offset: 5px;
+    height: 50px;
+    background: #FF9F08;
+    border-radius: 25px;
+    color: white;
+    text-indent: 26px;
+}
+.topIcon{
+    color: white;
+    margin-left: 101px;
 }
 
-.menu-with-top-button ul li:hover {
+
-    text-decoration-line: underline;
+
-    text-underline-offset: 5px;
+
+
+
+
+
+
+
+
+
+
+
+
+/* .menu-with-top-button .top-button {
+    width: 268px;
+    height: 56px;
+    background: #FFFBEF;
+    font-size: 18px;
+    color: #FFAF22;
 }
 
+
+
 .menu-with-top-button ul li:last-child {
     margin-bottom: 0;
 }
@@ -39,4 +110,4 @@
 
 .menu-with-top-button ul li .menu-name {
     padding-left: 5px;
-}
+} */

src/components/recharge/RechargeHead.tsx

@@ -10,9 +10,9 @@ export default function RechargeHead() {
     return (
         <>
             <div className="head-item recharge-head">
-                <span onClick={() => {
+                <div onClick={() => {
                     setIsPaymentModalOpen(true); 
-                }}>充值</span>
+                }}>充值</div>
             </div>
             <Modal open={isPaymentModalOpen}
                    title="充值"

src/components/recharge/recharge-head.css

@@ -1,3 +1,14 @@
 .recharge-head {
-
+    cursor: pointer;
+    width: 81px;
+    height: 36px;
+    border-radius: 18px;
+    background-color:#FF6508;
+    color: white;
+    text-align: center;
+    line-height: 36px;
+    font-weight: 300;
+    font-size: 16px;
+    color: #FFFFFF;
+    margin-left: 43px;
 }

src/index.css

@@ -15,7 +15,8 @@
     --color-note: rgba(68, 72, 88, 0.5);
     --color-disabled: #D9D9D9;
     --font-size-head: 14px;
-    --width-workspace: 1280px;
+    /* --width-workspace: 1280px; */
+    --width-workspace: 100vw;
     --height-head: 60px;
     --height-foot: 30px;
 }
@@ -25,6 +26,8 @@ html, body {
     padding: 0;
     font-size: 14px;
     background-color: #EEEEEE;
+    /* 禁止书香滚动条占位  隐藏浏览器默认的滚动条样式 */
+    scrollbar-width: none; 
 }
 
 a {

src/interfaces/menu/IMenuWithTopButton.ts

@@ -10,7 +10,7 @@ export interface IMenuListItem {
 export interface IMenuButton {
     name: string;
 
-    handle(e: MouseEvent<HTMLButtonElement>): void;
+    handle(e: MouseEvent<HTMLDivElement>): void;
 }
 
 export interface IMenuWithTopButton {

src/layout/body/body.css

@@ -1,5 +1,5 @@
 .body {
-    margin: 65px auto 10px auto;
+    margin: 80px auto 10px auto;
     width: var(--width-workspace);
 }
 

src/layout/head/Head.tsx

@@ -1,17 +1,16 @@
 import './head.css'
 import BalanceHead from '../../components/balance/BalanceHead.tsx';
 import RechargeHead from '../../components/recharge/RechargeHead.tsx';
-import {Divider, Dropdown, MenuProps, message, Modal, Space, Spin} from "antd";
+import { Dropdown, MenuProps, message, Modal, Space, Spin } from "antd";
 import { DownOutlined, UserOutlined, KeyOutlined, LogoutOutlined, AccountBookOutlined } from "@ant-design/icons";
 import { useContext, useEffect, useState } from "react";
 import { put } from "../../util/AjaxUtils.ts";
 import { GlobalContext, GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
 import UserEdit from "../../components/user/UserEdit.tsx";
 import PasswordChange from "../../components/password/PasswordChange.tsx";
-import headRightBg from '../../assets/head-right-bg.png';
+// import headRightBg from '../../assets/head-right-bg.png';
 import InvoiceList from "../../components/invoice/InvoiceList.tsx";
-
+import logoImg from '../../static/head/logo.png'
-
 export default function Head() {
     const globalContext = useContext(GlobalContext);
     const globalDispatchContext = useContext(GlobalDispatchContext);
@@ -86,20 +85,24 @@ export default function Head() {
             <div className="head">
                 <div className="center">
                     <div className="left">
-                        <span className="sys-title">AI引擎软著</span>
+                        {/* <span className="sys-title">AI引擎软著</span>
                         <Divider type="vertical"/>
-                        <span className="sys-title-sub">软件著作权一站式服务平台</span>
+                        <span className="sys-title-sub">软件著作权一站式服务平台</span> */}
+                        <img src={logoImg} alt="" />
                     </div>
-                    <div className="right" style={{backgroundImage: `url(${headRightBg})`}}>
+                    {/* <div className="right" style={{backgroundImage: `url(${headRightBg})`}}> */}
+                    <div className="right">
                         <BalanceHead />
                         <RechargeHead />
                         {/*<MessageHead/>*/}
                         <div style={{ display: 'flex', alignContent: 'center', padding: '0 10px', cursor: 'pointer' }}>
+                            <div style={{ width: '50px', height: '50px', borderRadius: '25px', backgroundColor: '#c4c1c0', marginLeft: '20px', marginRight: '10px' }} />
                             <Dropdown menu={{
                                 items: items
                             }}>
                                 <Space>
-                                    您好：{globalContext.user.nickname}
+                                    {/* 您好：{globalContext.user.nickname} */}
+                                    个人中心
                                     <DownOutlined />
                                 </Space>
                             </Dropdown>

src/layout/head/head.css

@@ -1,46 +1,61 @@
+
 .head {
-    width: 100%;
+    width: 100vw;
-    height: var(--height-head);
+    height: 84px;
     position: fixed;
     top: 0;
     left: 0;
-    background-color: var(--color-light);
-    box-shadow: 0 2px 6px 0 var(--color-box-shadow);
     z-index: 99;
-    color: var(--color-dark);
+    background: url('../../static/head/background.png');
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* background-color: rgb(248, 211, 211); */
+
 }
 
 .head .center {
-    margin: 0 auto;
+    /* margin: 0 auto; */
-    width: var(--width-workspace);
+    width: 100vw;
     height: 100%;
     display: flex;
     justify-content: space-between;
+    position: relative;
+
 }
 
-.head .center .left {
+.head .center .left img {
-    min-width: 180px;
+    width: 263px;
+    height: 41px;
+    /* background-color: red;
+     */
+    margin-left: 176px;
+    margin-top: 21px;
+}
+
+.head .center .right {
     height: 100%;
+    /* padding-left: 60px; */
+    margin-right: 33px;
     display: flex;
+    justify-content: right;
     align-items: center;
-    font-size: 18px;
-    font-weight: 800;
-    color: var(--color-text-header-left);
 }
 
+/* 
 .head .center .left .logo {
     width: 38px;
     height: 38px;
-}
+} */
 
-.head .center .left .sys-title {}
+/* .head .center .left .sys-title {}
 
 .head .center .left .sys-title-sub {
     font-size: 14px;
     font-weight: unset;
-}
+} */
 
-.head .center .right {
+/* .head .center .right {
     height: 100%;
     padding-left: 60px;
     display: flex;
@@ -66,4 +81,4 @@
 
 .ant-dropdown .dropdown-item .title {
     margin-left: 5px;
-}
+} */

src/route/index/Index.tsx

@@ -1,12 +1,13 @@
 import './index.css';
 import {MouseEvent, Reducer, useEffect, useReducer, useState} from "react";
-import {Link, useNavigate, useSearchParams} from "react-router-dom";
+import { useNavigate, useSearchParams} from "react-router-dom";
 import {IMenuListItem, IMenuWithTopButton} from "../../interfaces/menu/IMenuWithTopButton.ts";
 import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
+import MenuWithBottomButtom from '../../components/menu/MenuWithBottomButton.tsx'
 import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
 import ListProj from "../../components/list/ListProj.tsx";
 import ListProjAgent from "../../components/list/ListProjAgent.tsx";
-import {Breadcrumb, MenuProps} from 'antd';
+import { MenuProps} from 'antd';
 import {
     IndexListContext,
     IndexListDataType,
@@ -49,13 +50,13 @@ export default function Index() {
 
     const [projMenu, setProjMenu] = useState<IMenuWithTopButton>({
         button: {
-            name: '创建项目',
+            name: '项目',
             handle() {
                 nav('/proj-create')
             }
         },
         list: [
-            {id: 'ALL', name: '全部项目'},
+            {id: 'ALL', name: '全部项目',active:true},
             {id: 'PROCESSING', name: '进行中的'},
             {id: 'COMPLETE', name: '已完成的'}
         ],
@@ -70,7 +71,8 @@ export default function Index() {
                 type: IndexListDataType.PROJ,
                 value: item.id
             })
-        }
+        },
+        
     });
 
     const [agentMenu, setAgentMenu] = useState<IMenuWithTopButton>({
@@ -101,7 +103,6 @@ export default function Index() {
             })
         }
     })
-
     useEffect(() => {
         if (searchParams.get('type') == 'agent') {
             dispatch({
@@ -110,14 +111,13 @@ export default function Index() {
             })
         }
     }, []);
-
     return (
         <>
-            <Breadcrumb
+            {/* <Breadcrumb
                 items={[
                     {title: <Link to={'/'}>首页</Link>}
                 ]}
-            />
+            /> */}
             <IndexListContext.Provider value={listData}>
                 <IndexListDispatchContext.Provider value={dispatch}>
                     <div className="index">
@@ -128,7 +128,7 @@ export default function Index() {
                                 handleListItem={projMenu.handleListItem}
                             />
                             <MenuTreeWithTopButton />
-                            <MenuWithTopButton
+                            <MenuWithBottomButtom
                                 button={agentMenu.button}
                                 list={agentMenu.list}
                                 handleListItem={agentMenu.handleListItem}

src/route/index/index.css

@@ -1,20 +1,21 @@
 .index {
-    position: relative;
+    /* position: relative; */
-    height: 100%;
+    height: 100vh;
+    /* margin-top: 74px; */
 }
 
 .index .left {
-    position: absolute;
+    position: fixed;
-    width: 220px;
+    width: 268px;
     height: 100%;
-    overflow: auto;
+    /* overflow: auto; */
-    top: 0;
+    top: 80px;
     left: 0;
     background-color: var(--color-light);
 }
 
 .index .right {
-    margin-left: 235px;
+    margin-left: 300px;
     box-sizing: border-box;
     height: 100%;
 }