新建子路由及页面的修改

package-lock.json

@@ -16,7 +16,9 @@
         "pinyin-pro": "^3.19.6",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-redux": "^9.1.2",
         "react-router-dom": "^6.22.3",
+        "redux": "^5.0.1",
         "sort-by": "^1.2.0"
       },
       "devDependencies": {
@@ -1446,13 +1448,13 @@
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.2.64",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.64.tgz",
       "integrity": "sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -1472,7 +1474,7 @@
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/semver": {
       "version": "7.5.8",
@@ -1480,6 +1482,11 @@
       "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmmirror.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.1.1.tgz",
@@ -3872,6 +3879,28 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/react-redux": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-9.1.2.tgz",
+      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -3911,6 +3940,11 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -4328,6 +4362,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz",

package.json

@@ -18,7 +18,9 @@
     "pinyin-pro": "^3.19.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.22.3",
+    "redux": "^5.0.1",
     "sort-by": "^1.2.0"
   },
   "devDependencies": {

src/App.tsx

@@ -1,6 +1,6 @@
 import Head from './layout/head/Head.tsx';
 import Body from './layout/body/Body.tsx';
-import Foot from './layout/foot/Foot.tsx';
+// import Foot from './layout/foot/Foot.tsx';
 import {
     GlobalContext,
     GlobalData,
@@ -42,7 +42,7 @@ const App: React.FC = () => {
                 <GlobalDispatchContext.Provider value={dispatch}>
                     <Head/>
                     <Body/>
-                    <Foot/>
+                    {/* <Foot/> */}
                 </GlobalDispatchContext.Provider>
             </GlobalContext.Provider>
         </>

src/components/card/CardProj.tsx

@@ -11,7 +11,8 @@ import {
     LoadingOutlined,
     SearchOutlined,
     SettingOutlined,
-    WarningOutlined
+    WarningOutlined,
+    FolderOutlined
 } from '@ant-design/icons';
 import { Button, ConfigProvider, Dropdown, Tag } from 'antd';
 import { GenerateStatus, IProj, PayStatus, ProjChargeType } from "../../interfaces/proj/IProj.ts";
@@ -23,7 +24,7 @@ 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'
-
+import testImg from '../../static/test.jpg'
 export default function CardProj(props: { item: IProj }) {
     const nav = useNavigate();
     const data = props.item;
@@ -145,7 +146,168 @@ export default function CardProj(props: { item: IProj }) {
     return (
         <>
             <div className="card-proj">
-                <div className="title">
+                <div className='cp-top'>
+                    <div className='cpt-left'>
+                        <div className='dottedLine'></div>
+                        <div className='cpt-title' onClick={goEdit}>{data.projName}</div>
+                        <div className='cp-tag'>
+                            {payCharge}
+                        </div>
+                        <div className='cp-num'>
+                            编号：{data.projContext}
+                        </div>
+                        <div className='cp-smallLine'>
+                        </div>
+                        <div className='cp-time'>
+                            {data.gmtCreate}
+                        </div>
+                    </div>
+                    <div className='cpt-right'>
+                        {
+                            data.generate.generateStatus == GenerateStatus.SUCCESS ? (
+                                <span className="cpt-text-btn">
+                                    <SearchOutlined />
+                                    <span className='text-btn' onClick={goEdit}>查看</span>
+                                </span>
+                            ) : (
+                                <span className="cpt-text-btn">
+                                    <EditOutlined />
+                                    <span className='text-btn' onClick={goEdit}>编辑</span>
+                                </span>
+                            )
+                        }
+                        <span className='orignLine'>|</span>
+                        <span className="cpt-text-btn">
+                            <EyeOutlined />
+                            <span className='text-btn' onClick={() => {
+                                window.open(`${Axios.defaults?.baseURL}/${data.previewUrl}`, '_blank')
+                            }}>预览</span>
+                        </span>
+
+                    </div>
+                </div>
+                <div className='cp-bot'>
+                    <div className='cpb-left'>
+                        <img src={testImg} className='cpb-left-img' alt="" />
+                        <div className='cpbl-right'>
+                            <div className='cpbl-money'>
+                                <span className='money'>金额(￥) : </span>
+                                <span className='num'>{data.pay.payment / 100}</span>
+                            </div>
+                            <div className='cpbl-btn'>
+                                <div className='threeBtn' 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='threeBtn' 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='threeBtn rightBit' 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>
+                    <div className='cline'></div>
+                    <div className='cpb-center'>
+                        <div className='cpbc-top'>
+                            {
+                                data.generate.generateStatus == GenerateStatus.SUCCESS ? (
+                                    <div className="option">
+                                        <Button size="small" type="text" onClick={() => {
+                                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/apply/${data.projId}`)
+                                        }}><DownloadOutlined /> 申请表</Button>
+                                        <Button size="small" type="text" onClick={() => {
+                                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/${data.projId}`)
+                                        }}><DownloadOutlined /> 操作手册</Button>
+                                        <Button size="small" type="text" onClick={() => {
+                                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/code-zip/${data.projId}`)
+                                        }}><DownloadOutlined /> 代码压缩包</Button>
+                                        <Button size="small" type="text" onClick={() => {
+                                            window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/${data.projId}`)
+                                        }}><DownloadOutlined /> 代码文档</Button>
+                                    </div>
+                                ) : <></>
+                            }
+
+                        </div>
+                        <div className='cpbc-bot'>
+                            <div>
+                                <FolderOutlined />
+                            </div>
+                            {/* 层级 */}
+                            <Dropdown menu={{
+                                items: indexListContext.categorys,
+                                onClick: (e) => {
+                                    const span = e.domEvent.target as HTMLSpanElement;
+                                    put<any>({
+                                        messageApi,
+                                        url: `/api/proj/update-category/${data.projId}/${e.key}`,
+                                        onSuccess() {
+                                            messageApi.success('修改成功');
+                                            setProjCategoryId(e.key);
+                                            setProjCategoryName(span.innerText);
+                                        }
+                                    });
+                                }
+                            }}>
+                                <span>
+                                    <span className="text-btn">{projCategoryId ? projCategoryName : '无目录'}</span>
+                                    <DownOutlined />
+                                </span>
+                            </Dropdown>
+                            {
+                                projCategoryId ? (
+                                    <DeleteOutlined title="移除目录" onClick={() => {
+                                        put<any>({
+                                            messageApi,
+                                            url: `/api/proj/cancel-category/${data.projId}`,
+                                            onSuccess() {
+                                                messageApi.success('取消成功');
+                                                setProjCategoryId('');
+                                                setProjCategoryName('');
+                                            }
+                                        });
+                                    }} />
+                                ) : <></>
+                            }
+                        </div>
+                    </div>
+                    {/* <div className='cline'></div> */}
+                    <div className='cpb-right'>
+                        <div className='cpbr-top'>
+                            -当前状态-
+                        </div>
+                        <div className='cpbr-bot'>
+                            {renderGenerateStatus()}
+                        </div>
+                    </div>
+                </div>
+
+
+                {/* <div className="card-proj-title">
                     <div className='titleLift'>
 
 
@@ -156,10 +318,10 @@ export default function CardProj(props: { item: IProj }) {
                         <div className="right">
                             <span className="context">编号：{data.projContext}</span>
                             <span className='line'></span>
-                            <span className="date">{data.gmtCreate}</span>
+                            <span className="date">{data.gmtCreate}</span> */}
-                            {/* 状态标签 */}
+                {/* 状态标签 */}
-                            {/* <span className="status">{renderGenerateStatus()}</span> */}
+                {/* <span className="status">{renderGenerateStatus()}</span> */}
-                        </div>
+                {/* </div>
                     </div>
                     <div className="titleRight">
                         {
@@ -183,16 +345,16 @@ export default function CardProj(props: { item: IProj }) {
                             }}>预览</span>
                         </span>
                     </div>
-                </div>
+                </div> */}
                 {/* <hr/> */}
-                <div className="body">
+                {/* <div className="body">
                     <div className="line">
-                        <div className="left">
+                        <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> */}
-                        <div className='centerl'>
+                {/* <div className='centerl'>
                             <div className='c-top'>
                                 <span className='money'>金额(￥) : </span>
                                 <span className='num'>{data.pay.payment / 100}</span>
@@ -230,9 +392,9 @@ export default function CardProj(props: { item: IProj }) {
                                     <div>菜单排序({data.projModCount})</div>
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
-                        {/* 目录层级结构*/}
+                {/* 目录层级结构*/}
-                        <div className='centerr'>
+                {/* <div className='centerr'>
 
                         </div>
                         <div className='right'>
@@ -240,13 +402,13 @@ export default function CardProj(props: { item: IProj }) {
                                 - 当前状态 -
                             </div>
                             <div className="status">{renderGenerateStatus()}</div>
-                        </div>
+                        </div> */}
 
 
 
 
 
-                        {/* <div className="right">
+                {/* <div className="right">
                         {
                                 data.generate.generateStatus == GenerateStatus.SUCCESS ? (
                                     <span>
@@ -267,8 +429,8 @@ export default function CardProj(props: { item: IProj }) {
                                 }}>预览</span>
                             </span>
                         </div> */}
-                    </div>
+                {/* </div> */}
-                    {/* <div className="line">
+                {/* <div className="line">
                         <div className="left">
                             {
                                 data.generate.generateStatus == GenerateStatus.SUCCESS ? (
@@ -320,7 +482,7 @@ export default function CardProj(props: { item: IProj }) {
                             }
                         </div>
                     </div> */}
-                </div>
+                {/* </div> */}
                 {/* <hr/> */}
                 {/* <div className="foot">
                     <ConfigProvider theme={{

src/components/card/CardProjType.tsx

@@ -1,8 +1,8 @@
 import './card-proj-type.css';
-import {ICardProj, ICardProjChargeLine} from "../../interfaces/proj/ICardProj.ts";
+import { ICardProj, ICardProjChargeLine } from "../../interfaces/proj/ICardProj.ts";
-import {Checkbox} from 'antd';
+import { Checkbox } from 'antd';
-import {useState} from "react";
+import { useState } from "react";
-import {ProjAdditionalType} from "../../interfaces/proj/IProj.ts";
+import { ProjAdditionalType } from "../../interfaces/proj/IProj.ts";
 import ProjCardHeadBg from '../../assets/proj-card-head-bg.png';
 
 export default function CardProjType(props: ICardProj) {
@@ -75,7 +75,7 @@ export default function CardProjType(props: ICardProj) {
             return (
                 <div className="buy-btn" key={`buy_${index}`}>
                     <div className="price">{buy.label}{(buy.price + chargeAmount) / 100} 元</div>
-                    <hr/>
+                    <hr />
                     <div className="buy">
                         <button onClick={() => {
                             buy.handleClick(props.head, {
@@ -91,12 +91,14 @@ export default function CardProjType(props: ICardProj) {
 
     return (
         <div className="proj">
-            <div className="proj-head" style={{backgroundImage: `url(${ProjCardHeadBg})`}}>
+            <div className='projTop'>
-                <div>{props.head}</div>
+                <div className="proj-head" style={{ backgroundImage: `url(${ProjCardHeadBg})` }}>
-            </div>
+                    <div>{props.head}</div>
-            <div className="proj-body">
+                </div>
-                <div>{renderLines()}</div>
+                <div className="proj-body">
-                {renderCharge()}
+                    <div>{renderLines()}</div>
+                    {renderCharge()}
+                </div>
             </div>
             <div className="proj-foot">{renderBuyBtn()}</div>
         </div>

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

@@ -1,8 +1,12 @@
 .proj {
-    width: 250px;
+    width: 375px;
-    position: relative;
+    height: 842px;
+    position: relative;  
+    background-color: pink; 
+}
+.projTop{
+    height: 725px;
 }
-
 .proj .proj-head {
     font-size: 20px;
     text-align: center;
@@ -93,10 +97,14 @@
 }
 
 .proj .proj-foot {
+    /* margin-top: 749px; */
     padding: 0 10px;
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-top: 23px;
+    height: 94px;
+    background-color: aqua;
 }
 
 .proj .proj-foot .buy-btn {

src/components/card/card-proj.css

@@ -2,11 +2,260 @@
     border-radius: 6px;
     background-color: var(--color-light);
     /* padding: 5px 15px; */
-    height: 240px;
+    height: 230px;
+    width: calc(100vw - 330px);
+    /* margin-bottom: 20px; */
+    border-radius: 13px;
 }
+
+.card-proj .cp-top {
+    height: 56px;
+    /* background-color: pink; */
+    border-bottom: 1px solid #C4C4C4;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 21px;
+    padding-right: 29px;
+}
+
+.cpt-left {
+    display: flex;
+    /* align-items: center; */
+}
+
+.dottedLine {
+    width: 2px;
+    height: 18px;
+    border: 2px dotted #707070;
+    margin-top: 2px;
+
+}
+
+.cpt-title {
+    /* font-family: Microsoft YaHei UI; */
+    font-weight: 700;
+    font-size: 19px;
+    color: #292929;
+    margin-left: 18px;
+    cursor: pointer;
+}
+
+.cp-tag {
+    /* width: 75px; */
+    height: 29px;
+    background: #e4e4e4;
+    border-radius: 5px;
+    /* font-family: Microsoft YaHei UI; */
+    font-weight: 400;
+    font-size: 14px;
+    color: #696969;
+    text-align: center;
+    line-height: 29px;
+    padding-left: 9px;
+    padding-right: 9px;
+    margin-left: 19px;
+}
+
+.cp-num {
+    /* background-color: pink; */
+    display: flex;
+    align-items: center;
+    font-weight: 400;
+    font-size: 14px;
+    color: #888888;
+    margin-left: 23px;
+
+}
+
+.cp-smallLine {
+    width: 1px;
+    height: 16px;
+    border-left: 1px solid #888888;
+    margin-top: 6px;
+    margin-left: 11px;
+    margin-right: 11px;
+
+}
+
+.cp-time {
+    display: flex;
+    align-items: center;
+    font-weight: 400;
+    font-size: 14px;
+    color: #888888;
+}
+
+.cpt-right {
+    font-size: 14px;
+    color: #FFA415;
+
+}
+
+.orignLine {
+    margin-left: 27px;
+    margin-right: 27px;
+}
+
+.cpt-text-btn {
+    cursor: pointer;
+
+}
+
+.text-btn {
+    margin-left: 11px;
+}
+
+.cp-bot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 175px;
+    padding-left: 18px;
+}
+
+.cpb-left {
+    display: flex;
+    width: 768px;
+}
+
+.cpb-left-img {
+    width: 249px;
+    height: 143px;
+    background: #F5F5F5;
+    border-radius: 6px;
+}
+
+.cpbl-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.cpbl-money {
+    width: 210px;
+    height: 47px;
+    /* padding-left: 27px;
+    padding-right: 37px; */
+    background: #f7edce;
+    border-radius: 19px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 26px;
+}
+
+.cpbl-money .money {
+    font-weight: 500;
+    font-size: 17px;
+    color: #FF5D15;
+}
+
+.cpbl-money .num {
+    font-weight: bold;
+    font-size: 24px;
+    color: #FF5D15;
+    margin-left: 15px;
+
+}
+
+.cpbl-btn {
+    display: flex;
+
+    margin-left: 18px;
+}
+
+.threeBtn {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    margin-right: 24px;
+    color: #707070;
+}
+
+.threeBtn:hover {
+    background-color: #e7e7e7;
+    /* border-radius: 10px; */
+}
+
+.threeBtn img {
+    width: 30px;
+    height: 30px;
+    margin-right: 15px;
+}
+
+.rightBit {
+    margin-right: 0;
+}
+
+.cline {
+    width: 1px;
+    height: 110px;
+    /* border-lift: 0px solid #737373; */
+    border-left: 1px dotted #c2c2c2;
+}
+
+.cpb-center {
+    width: 532px;
+    height: 110px;
+    /* background-color: ; */
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.cpbc-bot {
+    display: flex;
+    color: #2088F3;
+}
+
+.cpb-right {
+    /* background-color: pink; */
+    width: 190px;
+    height: 110px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    border-left: 1px dotted #c2c2c2;
+}
+
+.cpbr-top {
+    font-size: 12px;
+    color: #707070;
+}
+.cpbr-bot{
+    margin-left: 10px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 .card-proj .left {
-    position: unset;
+    /* position: unset; */
 }
 
 .card-proj .title {
@@ -15,7 +264,7 @@
 }
 
 .card-proj .titleLift {
-    display: flex;
+    /* display: flex; */
 }
 
 .card-proj .right {

src/components/list/ListProj.tsx

@@ -1,20 +1,31 @@
 import './list-proj.css'
 import CardProj from "../card/CardProj.tsx";
 import { useRef, MutableRefObject, useState, useEffect, useContext } from "react";
-import { Input, Pagination, message, Spin, Image } from 'antd';
+import {  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 { useLocation } from 'react-router-dom';
-import { Link } from "react-router-dom";
+
-import { Breadcrumb } from 'antd';
+// import gpsImg from '../../static/right/gps.png'
-import backImg from '../../static/right/back.png'
+// import { Link } from "react-router-dom";
-const { Search } = Input;
+// import { Breadcrumb } from 'antd';
+// import backImg from '../../static/right/back.png'
+// const { Search } = Input;
 
 export default function ListProj() {
     const indexListContext = useContext(IndexListContext);
+    const {state} = useLocation()
+    // console.log('传递过来的参数',state.keyword);
+    // if(state){
+    //     console.log('传递过来的参数',state.keyword);
+    //     // setKeywords(state.keyword)
+    // }
+    const keywords = state?state.keyword:''
+    // console.log(keywords);
+    
     const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
     const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
 
@@ -23,10 +34,9 @@ export default function ListProj() {
     const [total, setTotal] = useState(0);
     const [projs, setProjs] = useState<IProj[]>([]);
     const [isLoading, setIsLoading] = useState(false);
-    const [keywords, setKeywords] = useState('');
+    // const [keywords, setKeywords] = useState('');
-
     const domHeight = window.innerHeight - 280;
-
+    
     const reqData = (currentPage: number) => {
         get<IListPage<IProj>>({
             messageApi: messageApi,
@@ -35,7 +45,7 @@ export default function ListProj() {
                 params: {
                     page: currentPage,
                     rows: 20,
-                    keywords: keywords,
+                    keywords:  keywords,
                     projCategoryId: indexListContext.category,
                     status: indexListContext.status ? indexListContext.status : ''
                 }
@@ -101,38 +111,13 @@ export default function ListProj() {
         <>
             {contextHolder}
             <div className="list-proj" ref={listProjRef}>
-                <div className="top">
+
-                    {/* 标签 */}
-                    {/* {renderStatus()} */}
-                    <div className='gps'>
-                        <img src={gpsImg} alt="" />
-                        <div>当前位置:首页</div>
-                    </div>
-                    <div className='line'></div>
-                    <Search placeholder="输入项目名称" onSearch={(value) => {
-                        setKeywords(value)
-                    }} 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}>
-                        <div className="list" ref={listRef} style={{ height: `${domHeight}px` }}>
+                        <div className="list" ref={listRef} style={{ height: `${domHeight}px`}}>
                             {renderList()}
                         </div>
-                        <div className="page">
+                        <div className="page" >
                             <Pagination defaultCurrent={page} total={total} onChange={(page) => {
                                 setPage(page);
                             }} />

src/components/list/ListProjAgent.tsx

@@ -13,6 +13,7 @@ const {Search} = Input;
 
 export default function ListProjAgent() {
     const indexListContext = useContext(IndexListContext);
+    console.log(indexListContext.status);
 
     const [messageApi, messageApiHolder] = useMessage();
     const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);

src/components/list/list-proj.css

@@ -1,8 +1,8 @@
 .list-proj {
     width: 100%;
-    padding-top: 26px;
+    /* padding-top: 26px; */
-    padding-right: 33px;
+    /* padding-right: 33px; */
-    box-sizing: border-box;
+    margin-top: 10px;
 }
 
 .list-proj .top {

src/components/menu/MenuWithBottomButton.tsx

@@ -1,17 +1,21 @@
 import './menu-with-bottom-button.css'
 import { IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
 import serveImg from '../../static/left/serves.png'
+import { useNavigate } from 'react-router-dom';
+
 // import newImg from '../../static/left/new.png'
 // import {
 //     RightOutlined
 // } from '@ant-design/icons';
 export default function MenuWithTopButton(props: IMenuWithTopButton) {
-
+    const navugate = useNavigate()
 
     const list = props.list.map((item, index) => (
         // 创建项目下三个选项
         <li className={item.active ? 'active' : ''} key={item.id} onClick={(e) => {
             props.handleListItem(e, index, item);
+            navugate('/home')
+
         }}>
 
             {item.icon ? (<img src={item.icon} className="menu-icon" alt="加载失败" />) : <></>}

src/components/menu/MenuWithTopButton.tsx

@@ -2,16 +2,18 @@ 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 { useNavigate } from 'react-router-dom';
 import {
     RightOutlined
 } from '@ant-design/icons';
 export default function MenuWithTopButton(props: IMenuWithTopButton) {
-
+    const navugate = useNavigate()
 
     const list = props.list.map((item, index) => (
         // 创建项目下三个选项
         <li className={item.active ? 'active' : ''} key={item.id} onClick={(e) => {
             props.handleListItem(e, index, item);
+            navugate('/home')
         }}>
 
             {item.icon ? (<img src={item.icon} className="menu-icon" alt="加载失败" />) : <></>}
@@ -30,6 +32,9 @@ export default function MenuWithTopButton(props: IMenuWithTopButton) {
                 </div>
                 <div className='top-right' onClick={(e) => {
                     props.button.handle(e);
+                    // 当点击创建时其他按钮默认为不被选中
+                    // props.list.forEach(item => item.active = false);
+                    // console.log(props.list);
 
                 }}>
                     <img src={newImg} alt="" />

src/context/IndexListContext.ts

@@ -25,7 +25,7 @@ export interface ListAction {
 
 export const IndexListContext = createContext<ListData>({
     type: IndexListDataType.PROJ,
-    categoryChangeCount: 0
+    categoryChangeCount: 0,
 })
 
 export const IndexListDispatchContext = createContext<Dispatch<ListAction>>(() => {

src/layout/body/body.css

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

src/layout/foot/foot.css

@@ -9,4 +9,6 @@
     align-items: center;
     background-color: var(--color-dark);
     color: var(--color-light);
+    /* margin-top: 20px; */
+
 }

src/route/Home/Home.tsx

@@ -0,0 +1,36 @@
+import { useContext } from "react";
+import { IndexListContext } from "../../context/IndexListContext.ts";
+import ListProj from "../../components/list/ListProj.tsx";
+import ListProjAgent from "../../components/list/ListProjAgent.tsx";
+import { useLocation } from "react-router-dom";
+// import { useLocation } from 'react-router-dom';
+
+export default function Home() {
+    const indexListContext = useContext(IndexListContext);
+    // const [listData, dispatch] = useReducer<Reducer<ListData, ListAction>>(listReducer, {
+    //     type: IndexListDataType.PROJ,
+    //     categoryChangeCount: 0
+    // });
+    // console.log(listType);
+    // const {state} = useLocation()
+    // const [listType,setListType] = useState('0')
+    // console.log('路由传递',state.listType);
+    // if(state.listType){
+    //     setListType(state.listType)
+    // }
+    // console.log('传递过来的',listType);
+    console.log(indexListContext); 
+    
+    
+    return (
+        
+        <div>
+            {
+                String(indexListContext.type) == '0' ? <ListProj /> : (
+                    String(indexListContext.type) == '1' ? <ListProjAgent /> : <></>
+                )
+            }
+            
+        </div>
+    )
+}

src/route/SearchList/SearchList.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import { useLocation } from 'react-router-dom';
+import './searchList.css'
+import { Pagination, Spin, Image, message } from 'antd';
+import { get } from "../../util/AjaxUtils.ts";
+import { IListPage } from "../../interfaces/listpage/IListPage.ts";
+import { useRef, MutableRefObject, useState, useEffect, useContext } from "react";
+import { IProj } from "../../interfaces/proj/IProj.ts";
+import NoData from "../../assets/no-data.png";
+import CardProj from '../../components/card/CardProj.tsx';
+import { IndexListContext } from "../../context/IndexListContext.ts";
+export default function SearchList() {
+    const indexListContext = useContext(IndexListContext);
+    const [isLoading, setIsLoading] = useState(false);
+    const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
+    const domHeight = window.innerHeight - 280;
+    const [projs, setProjs] = useState<IProj[]>([]);
+    const [page, setPage] = useState(1);
+    const [total, setTotal] = useState(0);
+    // const [keywords, setKeywords] = useState('');
+    const [messageApi, contextHolder] = message.useMessage();
+    const {state} = useLocation()
+    console.log(state);
+    
+    const reqData = (currentPage: number) => {
+        get<IListPage<IProj>>({
+            messageApi: messageApi,
+            url: '/api/proj/listpage/self',
+            config: {
+                params: {
+                    page: currentPage,
+                    rows: 20,
+                    keywords: state.keywords,
+                    projCategoryId: indexListContext.category,
+                    status: indexListContext.status ? indexListContext.status : ''
+                }
+            },
+            onBefore() {
+                setIsLoading(true);
+            },
+            onSuccess({ data }) {
+                setPage(data.page);
+                setTotal(data.total);
+                setProjs(data.rows);
+            },
+            onFinally() {
+                setIsLoading(false);
+            }
+        })
+    }
+
+    const renderCategory = () => {
+    }
+    const renderList = () => {
+        if (projs.length == 0) {
+            return (
+                <div className="no-data" style={{
+                    width: '100%',
+                    height: '100%',
+                    backgroundColor: 'var(--color-light)',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                }}>
+                    <Image src={NoData} preview={false} />
+                    <span>暂无数据</span>
+                </div>
+            )
+        }
+        return projs.map((item) => {
+            return <CardProj item={item} key={new Date().getTime() + ':' + item.projId} />;
+        });
+    }
+    useEffect(() => {
+        if (indexListContext.categorys) {
+            reqData(page);
+            renderCategory();
+        }
+    }, [indexListContext.status, indexListContext.categoryChangeCount, indexListContext.category, state.keywords, page])
+    return (
+        <div className='searchIndex'>
+            {contextHolder}
+            <Spin tip="加载中..." spinning={isLoading}>
+                <div className="searchlist" ref={listRef} style={{ height: `${domHeight}px` }}>
+                    {renderList()}
+                </div>
+                <div className="SearchListPage">
+                    <Pagination defaultCurrent={page} total={total} onChange={(page) => {
+                        setPage(page);
+                    }} />
+                </div>
+            </Spin>
+        </div>
+    )
+}

src/route/SearchList/searchList.css

@@ -0,0 +1,27 @@
+.searchIndex{
+    /* margin-top: 26px; */
+    /* position: fixed; */
+    /* top: 26px; */
+}
+.searchlist{
+    padding: 15px 0;
+    overflow: auto;
+}
+.SearchListPage{
+    border-top: 1px solid var(--color-border);
+    padding: 10px 15px;
+    display: flex;
+    justify-content: right;
+    background-color: var(--color-light);
+}
+.SearchListPage .ant-pagination-item {
+    border-color: var(--color-border);
+    color: var(--color-dark);
+}
+.SearchListPage .ant-pagination-item-active {
+    border-color: var(--color-primary);
+    background-color: var(--color-primary);
+}
+.SearchListPage .ant-pagination-item-active a {
+    color: var(--color-light);
+}

src/route/index/Index.tsx

@@ -1,13 +1,14 @@
 import './index.css';
-import {MouseEvent, Reducer, useEffect, useReducer, useState} from "react";
+// import { MouseEvent, Reducer, useEffect, useReducer, useState, useContext } from "react";
-import { useNavigate, useSearchParams} from "react-router-dom";
+import { MouseEvent, Reducer, useEffect, useReducer, useState } from "react";
-import {IMenuListItem, IMenuWithTopButton} from "../../interfaces/menu/IMenuWithTopButton.ts";
+import { useNavigate, useSearchParams, Outlet } 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 ListProj from "../../components/list/ListProj.tsx";
-import ListProjAgent from "../../components/list/ListProjAgent.tsx";
+// import ListProjAgent from "../../components/list/ListProjAgent.tsx";
-import { MenuProps} from 'antd';
+import { MenuProps } from 'antd';
 import {
     IndexListContext,
     IndexListDataType,
@@ -16,7 +17,24 @@ import {
     ListData,
 } from "../../context/IndexListContext.ts";
 
+
+import { useLocation } from 'react-router-dom';
+
+import gpsImg from '../../static/right/gps.png'
+import backImg from '../../static/right/back.png'
+import { Link } from "react-router-dom";
+import { Input, Breadcrumb } from 'antd';
+const { Search } = Input;
+
+
+
 export default function Index() {
+
+    // const [keywords, setKeywords] = useState('');
+    // const indexListContext = useContext(IndexListContext);
+ 
+
+
     const nav = useNavigate();
     const [searchParams] = useSearchParams();
 
@@ -56,9 +74,9 @@ export default function Index() {
             }
         },
         list: [
-            {id: 'ALL', name: '全部项目',active:true},
+            { id: 'ALL', name: '全部项目', active: true },
-            {id: 'PROCESSING', name: '进行中的'},
+            { id: 'PROCESSING', name: '进行中的' },
-            {id: 'COMPLETE', name: '已完成的'}
+            { id: 'COMPLETE', name: '已完成的' }
         ],
         handleListItem(_e, _index, item: IMenuListItem) {
             projMenu.list.forEach(item => item.active = false);
@@ -69,26 +87,39 @@ export default function Index() {
             })
             dispatch({
                 type: IndexListDataType.PROJ,
-                value: item.id
+                value: item.id,
-            })
+                // keywords: ''
-        },
-        
-    });
 
+            })
+            // sessionStorage.setItem('listType', String(IndexListDataType.PROJ));
+            // sessionStorage.setItem('listType', String(IndexListDataType.AGENT));
+            // console.log(IndexListDataType.PROJ);
+            // console.log(sessionStorage.getItem('listType'));
+
+
+            // nav('/home', {
+            //     state: {
+            //         listType: '0',
+            //     }
+
+            // })
+        },
+
+    });
     const [agentMenu, setAgentMenu] = useState<IMenuWithTopButton>({
         button: {
             name: '代理服务',
             handle() {
                 dispatch({
                     type: IndexListDataType.PROJ,
-                    value: 'COMPLETE'
+                    value: 'COMPLETE',
                 })
             }
         },
         list: [
-            {id: 'ALL', name: '全部项目'},
+            { id: 'ALL', name: '全部项目' },
-            {id: 'PROCESSING', name: '进行中的'},
+            { id: 'PROCESSING', name: '进行中的' },
-            {id: 'COMPLETE', name: '已完成的'},
+            { id: 'COMPLETE', name: '已完成的' },
         ],
         handleListItem(_e: MouseEvent<HTMLLIElement>, _index: number, item: IMenuListItem) {
             projMenu.list.forEach(item => item.active = false);
@@ -99,18 +130,52 @@ export default function Index() {
             })
             dispatch({
                 type: IndexListDataType.AGENT,
-                value: item.id
+                value: item.id,
+                
             })
         }
     })
+    const location = useLocation()
+    const [now,setNow] = useState<string>('首页')
+    const [pathArray,setPathArray] = useState([ { title: <Link to={'/home'}>首页</Link> }])
+    useEffect(()=>{
+        // const nowname = sessionStorage.getItem('now')
+        console.log( '路由名字', location.pathname);
+        if(location.pathname == '/home'){
+            setNow('首页')
+            setPathArray([ { title: <Link to={'/home'}>首页</Link> }])
+        }else if(location.pathname == '/proj-create'){
+            setNow('创建项目')
+            setPathArray([ { title: <Link to={'/home'}>首页</Link> },{title: <Link to={'/proj-create'}>创建</Link>}])
+        }
+       
+    },[location.pathname])
     useEffect(() => {
+       
+        sessionStorage.setItem('pathArray', JSON.stringify([ { title: <Link to={'/home'}>首页</Link> }]));
+        sessionStorage.setItem('now', '首页');
         if (searchParams.get('type') == 'agent') {
             dispatch({
                 type: IndexListDataType.AGENT,
-                value: 'ALL'
+                value: 'ALL',
+
             })
+
         }
+
+
     }, []);
+
+    // useEffect(() => {
+    //     console.log('监听',keywords);
+    // }, [keywords]);
+
+    const handleSearch = (value: string) => {
+        console.log(value);
+       nav('/home',{state:{
+        keyword:value
+       }})
+    }
     return (
         <>
             {/* <Breadcrumb
@@ -118,7 +183,7 @@ export default function Index() {
                     {title: <Link to={'/'}>首页</Link>}
                 ]}
             /> */}
-            <IndexListContext.Provider value={listData}>
+            <IndexListContext.Provider value={listData} >
                 <IndexListDispatchContext.Provider value={dispatch}>
                     <div className="index">
                         <div className="left">
@@ -135,11 +200,39 @@ export default function Index() {
                             />
                         </div>
                         <div className="right">
-                            {
+                            <div>
+                                <div className="top">
+                                    {/* 标签 */}
+                                    {/* {renderStatus()} */}
+                                    <div className='gps'>
+                                        <img src={gpsImg} alt="" />
+                                        <div>当前位置:{ now}</div>
+                                    </div>
+                                    <div className='line'></div>
+                                    <Search placeholder="输入项目名称" onSearch={handleSearch} style={{
+                                        width: '253px',
+                                        height: '31px',
+                                    }} />
+                                    <div className='nowPosition'>
+                                        <img src={backImg} alt="" />
+                                        <div>
+                                            <Breadcrumb
+                                                separator="|"
+                                                // items={[
+                                                //     { title: <Link to={'/home'}>首页</Link> },
+                                                // ]}
+                                                items={pathArray}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* {
                                 listData.type === IndexListDataType.PROJ ? <ListProj/> : (
                                     listData.type == IndexListDataType.AGENT ? <ListProjAgent/> : <></>
                                 )
-                            }
+                            } */}
+                            <Outlet></Outlet>
                         </div>
                     </div>
                 </IndexListDispatchContext.Provider>

src/route/index/index.css

@@ -18,4 +18,58 @@
     margin-left: 300px;
     box-sizing: border-box;
     height: 100%;
+    position: fixed;
+    width:calc(100vw - 330px);
+}
+.index .right .top{
+    margin-top: 26px;
+    box-sizing: border-box;
+    height: 62px;
+    display: flex;
+    /* justify-content: space-between; */
+    align-items: center;
+    border-bottom: 1px solid var(--color-border);
+    background-color: var(--color-light);
+}
+.index .right .top .gps {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+.index .right .top .gps img {
+    width: 18px;
+    height: 21px;
+    margin-left: 22px;
+    margin-right: 16px;
+}
+.index .right .top .line {
+    width: 1px;
+    height: 23px;
+    border-left: 1px solid #d8d8d8;
+    margin-left: 33px;
+    margin-right: 31px;
+}
+.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;
 }

src/route/proj/ProjCreate.tsx

@@ -1,10 +1,11 @@
 import './proj-create.css'
-import {Link, useNavigate} from "react-router-dom";
+import {  useNavigate } from "react-router-dom";
-import {Breadcrumb, message} from "antd";
+import {  message } from "antd";
 import CardProjType from "../../components/card/CardProjType.tsx";
-import {IProjCharge, ProjAdditionalType, ProjChargeType} from "../../interfaces/proj/IProj.ts";
+import { IProjCharge, ProjAdditionalType, ProjChargeType } from "../../interfaces/proj/IProj.ts";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
-import {get} from "../../util/AjaxUtils.ts";
+import { get } from "../../util/AjaxUtils.ts";
+import { Link } from "react-router-dom";
 
 export default function ProjCreate() {
     const [messageApi, contextHolder] = message.useMessage();
@@ -28,22 +29,24 @@ export default function ProjCreate() {
         get<any>({
             messageApi: messageApi,
             url: '/api/proj/charge/get',
-            onSuccess({data}) {
+            onSuccess({ data }) {
                 setCharge(data);
             }
         })
+        // sessionStorage.setItem('pathArray', JSON.stringify([ { title: <Link to={'/home'}>首页</Link> },{ title: '创建项目' }]));
+        // sessionStorage.setItem('now', '创建');
     }, [])
 
     return (
         <>
             {contextHolder}
-            <Breadcrumb
+            {/* <Breadcrumb
                 items={[
-                    {title: <Link to={'/'}>首页</Link>},
+                    { title: <Link to={'/'}>首页</Link> },
-                    {title: '创建项目'},
+                    { title: '创建项目' },
                 ]}
-            />
+            /> */}
-            <div style={{height: `${height}px`, overflow: 'auto'}}>
+            <div style={{ height: `${height}px`, overflow: 'auto' }}>
                 <div className="proj-create">
                     {/*<CardProjType*/}
                     {/*    head={'全托管'}*/}
@@ -177,33 +180,33 @@ export default function ProjCreate() {
                             }
                         ]}
                     />
-                    {/*<CardProjType*/}
+                    <CardProjType
-                    {/*    head={'免费试用'}*/}
+                       head={'免费试用'}
-                    {/*    bodyLineArray={[*/}
+                       bodyLineArray={[
-                    {/*        {*/}
+                           {
-                    {/*            title: '提供的服务：',*/}
+                               title: '提供的服务：',
-                    {/*            contents: [*/}
+                               contents: [
-                    {/*                '提供系统搭建平台与客服指导',*/}
+                                   '提供系统搭建平台与客服指导',
-                    {/*                '系统可在线存储三天',*/}
+                                   '系统可在线存储三天',
-                    {/*            ]*/}
+                               ]
-                    {/*        },*/}
+                           },
-                    {/*        {*/}
+                           {
-                    {/*            title: '使用流程：',*/}
+                               title: '使用流程：',
-                    {/*            contents: [*/}
+                               contents: [
-                    {/*                '按系统操作手册执行',*/}
+                                   '按系统操作手册执行',
-                    {/*            ]*/}
+                               ]
-                    {/*        }*/}
+                           }
-                    {/*    ]}*/}
+                       ]}
-                    {/*    buyArray={[*/}
+                       buyArray={[
-                    {/*        {*/}
+                           {
-                    {/*            id: ProjChargeType.FREE,*/}
+                               id: ProjChargeType.FREE,
-                    {/*            price: charge.proj.free,*/}
+                               price: charge.proj.free,
-                    {/*            handleClick: (_title, additional) => {*/}
+                               handleClick: (_title, additional) => {
-                    {/*                nav(`/proj-new/${ProjChargeType.FREE}?${additional.pkg ? 'pkg=true' : 'pkg='}&${additional.videoDemo ? 'videoDemo=true' : 'videoDemo='}`)*/}
+                                   nav(`/proj-new/${ProjChargeType.FREE}?${additional.pkg ? 'pkg=true' : 'pkg='}&${additional.videoDemo ? 'videoDemo=true' : 'videoDemo='}`)
-                    {/*            }*/}
+                               }
-                    {/*        }*/}
+                           }
-                    {/*    ]}*/}
+                       ]}
-                    {/*/>*/}
+                    />
                 </div>
             </div>
         </>

src/route/proj/proj-create.css

@@ -1,11 +1,19 @@
 .proj-create {
-    min-height: 100%;
+    /* min-height: 100%; */
-    background-color: var(--color-light);
+    /* background-color: var(--color-light); */
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
+    padding-bottom: 50px;
+    
+}
+::-webkit-scrollbar {
+    display: none;
 }
-
 .proj-create .proj {
-    margin: 15px;
+    margin-top: 23px;
+    padding-bottom: 15px;
+}
+.proj-create .test{
+    /* height: 30p; */
 }

src/route/router.tsx

@@ -1,5 +1,8 @@
-import {createHashRouter} from "react-router-dom";
+import { createHashRouter } from "react-router-dom";
+import Home from '../route/Home/Home.tsx'
+
 import Index from "../route/index/Index.tsx";
+// import Search from "../route/SearchList/SearchList.tsx";
 import ProjCreate from "./proj/ProjCreate.tsx";
 import ProjNew from "./proj/ProjNew.tsx";
 import ProjEdit from "./proj/ProjEdit.tsx";
@@ -31,149 +34,310 @@ import AgentAgreement from "./agent/AgentAgreement.tsx";
 import AgentCorrection from "./agent/AgentCorrection.tsx";
 import AgentResult from "./agent/AgentResult.tsx";
 
-export const router = createHashRouter([
+export const router = createHashRouter(
-    {
+    // [
+    //     {
+    //         path: '/',
+    //         element: <Index />
+    //     },
+    //     {
+    //         path: '/proj-create',
+    //         element: <ProjCreate />
+    //     },
+    //     {
+    //         path: '/proj-new/:projChargeType',
+    //         element: <ProjNew />
+    //     },
+    //     {
+    //         path: '/proj-edit/:projId',
+    //         element: <ProjEdit />
+    //     },
+    //     {
+    //         path: '/proj-eall/:projId',
+    //         element: <ProjEditAll />
+    //     },
+    //     {
+    //         path: '/proj-efree/:projId',
+    //         element: <ProjEditFree />
+    //     },
+    //     {
+    //         path: '/proj-edit/step1/:projId',
+    //         element: <ProjEditStep1 />
+    //     },
+    //     {
+    //         path: '/proj-edit/step1-show/:projId',
+    //         element: <ProjEditStep1Show />
+    //     },
+    //     {
+    //         path: '/proj-edit/step2/:projId',
+    //         element: <ProjEditStep2 />
+    //     },
+    //     {
+    //         path: '/proj-edit/step2-show/:projId',
+    //         element: <ProjEditStep2Show />
+    //     },
+    //     {
+    //         path: '/proj-edit/step3/:projId',
+    //         element: <ProjEditStep3 />
+    //     },
+    //     {
+    //         path: '/proj-edit/step3-show/:projId',
+    //         element: <ProjEditStep3Show />
+    //     },
+    //     {
+    //         path: '/proj-edit/step4/:projId',
+    //         element: <ProjEditStep4 />
+    //     },
+    //     {
+    //         path: '/proj-edit/step4-show/:projId',
+    //         element: <ProjEditStep4Show />
+    //     },
+    //     {
+    //         path: '/proj-edit/step5/:projId',
+    //         element: <ProjEditStep5 />
+    //     },
+    //     {
+    //         path: '/proj-edit/step5-show/:projId',
+    //         element: <ProjEditStep5Show />
+    //     },
+    //     {
+    //         path: '/proj-edit/step6/:projId',
+    //         element: <ProjEditStep6 />
+    //     },
+    //     {
+    //         path: '/proj-edit/step6-show/:projId',
+    //         element: <ProjEditStep6Show />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-loginpage/:projId',
+    //         element: <ProjConfigLoginpage />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-loginpage-show/:projId',
+    //         element: <ProjConfigLoginpageShow />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-mod-list/:projId',
+    //         element: <ProjConfigModList />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-mod-list-show/:projId',
+    //         element: <ProjConfigModListShow />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-mod-flist/:projId',
+    //         element: <ProjConfigModList isFree={true} />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-mod-flist-show/:projId',
+    //         element: <ProjConfigModListShow />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-mod-save/:projId',
+    //         element: <ProjConfigModSave />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-mod-fsave/:projId',
+    //         element: <ProjConfigModSave isFree={true} />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-mod-edit/:projId/:projModId',
+    //         element: <ProjConfigModEdit />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-mod-fedit/:projId/:projModId',
+    //         element: <ProjConfigModEdit isFree={true} />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-mod-show/:projId/:projModId',
+    //         element: <ProjConfigModShow />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-mod-fshow/:projId/:projModId',
+    //         element: <ProjConfigModShow isFree={true} />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-menu-list/:projId',
+    //         element: <ProjConfigMenuList />
+    //     },
+    //     {
+    //         path: '/proj-edit/config-menu-list-show/:projId',
+    //         element: <ProjConfigMenuListShow />
+    //     },
+    //     {
+    //         path: '/agent-select/:projId',
+    //         element: <AgentSelect />
+    //     },
+    //     {
+    //         path: '/agent-agreement/:orderId',
+    //         element: <AgentAgreement />
+    //     },
+    //     {
+    //         path: '/agent-correction/:orderId',
+    //         element: <AgentCorrection />
+    //     },
+    //     {
+    //         path: '/agent-result/:orderId',
+    //         element: <AgentResult />
+    //     },
+    // ]
+    [{
         path: '/',
-        element: <Index />
+        element: <Index />,
-    },
+        children: [
-    {
+            {
-        path: '/proj-create',
+                path: '/',
-        element: <ProjCreate />
+                element: <Home/>
-    },
+            },
-    {
+            {
-        path: '/proj-new/:projChargeType',
+                path:'/home',
-        element: <ProjNew/>
+                element:<Home/>
-    },
+            },
-    {
+            // {
-        path: '/proj-edit/:projId',
+            //     path:'/search',
-        element: <ProjEdit/>
+            //     element:<Search/>
-    },
+            // },
-    {
+
-        path: '/proj-eall/:projId',
+            {
-        element: <ProjEditAll/>
+                path: '/proj-create',
-    },
+                element: <ProjCreate />
-    {
+            },
-        path: '/proj-efree/:projId',
+            {
-        element: <ProjEditFree/>
+                path: '/proj-new/:projChargeType',
-    },
+                element: <ProjNew />
-    {
+            },
-        path: '/proj-edit/step1/:projId',
+            {
-        element: <ProjEditStep1/>
+                path: '/proj-edit/:projId',
-    },
+                element: <ProjEdit />
-    {
+            },
-        path: '/proj-edit/step1-show/:projId',
+            {
-        element: <ProjEditStep1Show/>
+                path: '/proj-eall/:projId',
-    },
+                element: <ProjEditAll />
-    {
+            },
-        path: '/proj-edit/step2/:projId',
+            {
-        element: <ProjEditStep2/>
+                path: '/proj-efree/:projId',
-    },
+                element: <ProjEditFree />
-    {
+            },
-        path: '/proj-edit/step2-show/:projId',
+            {
-        element: <ProjEditStep2Show/>
+                path: '/proj-edit/step1/:projId',
-    },
+                element: <ProjEditStep1 />
-    {
+            },
-        path: '/proj-edit/step3/:projId',
+            {
-        element: <ProjEditStep3/>
+                path: '/proj-edit/step1-show/:projId',
-    },
+                element: <ProjEditStep1Show />
-    {
+            },
-        path: '/proj-edit/step3-show/:projId',
+            {
-        element: <ProjEditStep3Show/>
+                path: '/proj-edit/step2/:projId',
-    },
+                element: <ProjEditStep2 />
-    {
+            },
-        path: '/proj-edit/step4/:projId',
+            {
-        element: <ProjEditStep4/>
+                path: '/proj-edit/step2-show/:projId',
-    },
+                element: <ProjEditStep2Show />
-    {
+            },
-        path: '/proj-edit/step4-show/:projId',
+            {
-        element: <ProjEditStep4Show/>
+                path: '/proj-edit/step3/:projId',
-    },
+                element: <ProjEditStep3 />
-    {
+            },
-        path: '/proj-edit/step5/:projId',
+            {
-        element: <ProjEditStep5/>
+                path: '/proj-edit/step3-show/:projId',
-    },
+                element: <ProjEditStep3Show />
-    {
+            },
-        path: '/proj-edit/step5-show/:projId',
+            {
-        element: <ProjEditStep5Show/>
+                path: '/proj-edit/step4/:projId',
-    },
+                element: <ProjEditStep4 />
-    {
+            },
-        path: '/proj-edit/step6/:projId',
+            {
-        element: <ProjEditStep6/>
+                path: '/proj-edit/step4-show/:projId',
-    },
+                element: <ProjEditStep4Show />
-    {
+            },
-        path: '/proj-edit/step6-show/:projId',
+            {
-        element: <ProjEditStep6Show/>
+                path: '/proj-edit/step5/:projId',
-    },
+                element: <ProjEditStep5 />
-    {
+            },
-        path: '/proj-edit/config-loginpage/:projId',
+            {
-        element: <ProjConfigLoginpage/>
+                path: '/proj-edit/step5-show/:projId',
-    },
+                element: <ProjEditStep5Show />
-    {
+            },
-        path: '/proj-edit/config-loginpage-show/:projId',
+            {
-        element: <ProjConfigLoginpageShow/>
+                path: '/proj-edit/step6/:projId',
-    },
+                element: <ProjEditStep6 />
-    {
+            },
-        path: '/proj-edit/config-mod-list/:projId',
+            {
-        element: <ProjConfigModList/>
+                path: '/proj-edit/step6-show/:projId',
-    },
+                element: <ProjEditStep6Show />
-    {
+            },
-        path: '/proj-edit/config-mod-list-show/:projId',
+            {
-        element: <ProjConfigModListShow/>
+                path: '/proj-edit/config-loginpage/:projId',
-    },
+                element: <ProjConfigLoginpage />
-    {
+            },
-        path: '/proj-edit/config-mod-flist/:projId',
+            {
-        element: <ProjConfigModList isFree={true}/>
+                path: '/proj-edit/config-loginpage-show/:projId',
-    },
+                element: <ProjConfigLoginpageShow />
-    {
+            },
-        path: '/proj-edit/config-mod-flist-show/:projId',
+            {
-        element: <ProjConfigModListShow/>
+                path: '/proj-edit/config-mod-list/:projId',
-    },
+                element: <ProjConfigModList />
-    {
+            },
-        path: '/proj-edit/config-mod-save/:projId',
+            {
-        element: <ProjConfigModSave/>
+                path: '/proj-edit/config-mod-list-show/:projId',
-    },
+                element: <ProjConfigModListShow />
-    {
+            },
-        path: '/proj-edit/config-mod-fsave/:projId',
+            {
-        element: <ProjConfigModSave isFree={true}/>
+                path: '/proj-edit/config-mod-flist/:projId',
-    },
+                element: <ProjConfigModList isFree={true} />
-    {
+            },
-        path: '/proj-edit/config-mod-edit/:projId/:projModId',
+            {
-        element: <ProjConfigModEdit/>
+                path: '/proj-edit/config-mod-flist-show/:projId',
-    },
+                element: <ProjConfigModListShow />
-    {
+            },
-        path: '/proj-edit/config-mod-fedit/:projId/:projModId',
+            {
-        element: <ProjConfigModEdit isFree={true}/>
+                path: '/proj-edit/config-mod-save/:projId',
-    },
+                element: <ProjConfigModSave />
-    {
+            },
-        path: '/proj-edit/config-mod-show/:projId/:projModId',
+            {
-        element: <ProjConfigModShow/>
+                path: '/proj-edit/config-mod-fsave/:projId',
-    },
+                element: <ProjConfigModSave isFree={true} />
-    {
+            },
-        path: '/proj-edit/config-mod-fshow/:projId/:projModId',
+            {
-        element: <ProjConfigModShow isFree={true}/>
+                path: '/proj-edit/config-mod-edit/:projId/:projModId',
-    },
+                element: <ProjConfigModEdit />
-    {
+            },
-        path: '/proj-edit/config-menu-list/:projId',
+            {
-        element: <ProjConfigMenuList/>
+                path: '/proj-edit/config-mod-fedit/:projId/:projModId',
-    },
+                element: <ProjConfigModEdit isFree={true} />
-    {
+            },
-        path: '/proj-edit/config-menu-list-show/:projId',
+            {
-        element: <ProjConfigMenuListShow/>
+                path: '/proj-edit/config-mod-show/:projId/:projModId',
-    },
+                element: <ProjConfigModShow />
-    {
+            },
-        path: '/agent-select/:projId',
+            {
-        element: <AgentSelect/>
+                path: '/proj-edit/config-mod-fshow/:projId/:projModId',
-    },
+                element: <ProjConfigModShow isFree={true} />
-    {
+            },
-        path: '/agent-agreement/:orderId',
+            {
-        element: <AgentAgreement/>
+                path: '/proj-edit/config-menu-list/:projId',
-    },
+                element: <ProjConfigMenuList />
-    {
+            },
-        path: '/agent-correction/:orderId',
+            {
-        element: <AgentCorrection />
+                path: '/proj-edit/config-menu-list-show/:projId',
-    },
+                element: <ProjConfigMenuListShow />
-    {
+            },
-        path: '/agent-result/:orderId',
+            {
-        element: <AgentResult />
+                path: '/agent-select/:projId',
-    },
+                element: <AgentSelect />
-])
+            },
+            {
+                path: '/agent-agreement/:orderId',
+                element: <AgentAgreement />
+            },
+            {
+                path: '/agent-correction/:orderId',
+                element: <AgentCorrection />
+            },
+            {
+                path: '/agent-result/:orderId',
+                element: <AgentResult />
+            },
+        ]
+    }]
+)