system-copyright-react/src/route/index/Index.tsx

import './index.css';
// import { MouseEvent, Reducer, useEffect, useReducer, useState, useContext } from "react";
import { MouseEvent, Reducer, useEffect, useReducer, useState } from "react";
import { useSelector, useDispatch } from 'react-redux'
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 ListProjAgent from "../../components/list/ListProjAgent.tsx";
import {
    MenuProps, Select,
    Button,
    Pagination,
    Empty
} from 'antd';
import {
    IndexListContext,
    IndexListDataType,
    IndexListDispatchContext,
    ListAction,
    ListData,
} from "../../context/IndexListContext.ts";

import {
    MenuFoldOutlined,
    ClearOutlined
} from '@ant-design/icons';
import { useLocation } from 'react-router-dom';
import { get } from '../../util/AjaxUtils.ts'
import gpsImg from '../../static/right/gps.png'
import backImg from '../../static/right/back.png'
// import { Link } from "react-router-dom";
import {
    Input,
    // Breadcrumb,
    message
} from 'antd';
const { Search } = Input;



export default function Index() {
    // 选项数组
    const [tagArray, setTagArray] = useState([])
    // 获取标签
    const getTag = () => {
        get({
            messageApi,
            url: `/api/proj/tag/list-tag`,
            onBefore() {

            },
            onSuccess(data: any) {
                // console.log('标签信息', data);
                const newarrty: any = (data.data).map((item: any) => ({
                    value: item.key,
                    label: item.value
                }));
                setTagArray(newarrty)

            },
            onFinally() {

            }
        })
    }
    const dispath = useDispatch()
    //redux的belongArray
    const redxuState: any = useSelector(state => state)
    const belongArray = redxuState.belongArray
    // 获取所属者表格储存至redux 更新表格
    const getProjOwnerList = () => {
        get({
            messageApi,
            url: `/api/proj-owner/list/self`,
            onBefore() {

            },
            onSuccess(data: any) {
                // console.log('所属者表格', data.data);
                // setBelongPeopleArray(data.data)
                // 存redux的belongArray
                dispath({
                    type: 'uparray',
                    val: data.data
                })
            },
            onFinally() {

            }
        })
    }

    // 更新数据
    // const upBelongArray = () => {
    //     get({
    //         messageApi,
    //         url: `/api/proj-owner/list/self`,
    //         onBefore() {

    //         },
    //         onSuccess(data: any) {
    //             // console.log('所属者表格', data.data);
    //             setBelongPeopleArray(data.data)

    //         },
    //         onFinally() {

    //         }
    //     })
    // }
    // 监听redux的belongArray
    // useEffect(()=>{
    // },[belongArray])

    const [messageApi, contextHolder] = message.useMessage();
    // 临时关键字 (过度)
    const [nowKeyword, setNowKeyWord] = useState('')
    // 关键字
    const [keywords, setKeywords] = useState('');
    const [type, setType] = useState<string | null>(null)
    const [chargeAdditionals, setchargeAdditionals] = useState<string | null>(null)
    const [tagDataId, settagDataId] = useState<string | null>(null)
    const [authorId, setauthorId] = useState('')
    // const indexListContext = useContext(IndexListContext);
    // 所属者信息
    // const [belongPeopleArray, setBelongPeopleArray] = useState<any[]>([])
    const [currentPage, setCurrentPage] = useState(1);
    const itemsPerPage = 5;
    // 计算总页数
    const totalItems = belongArray.length;
    const totalPages = Math.ceil(totalItems / itemsPerPage);

    // 计算当前页数据的起始和结束索引
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = Math.min(startIndex + itemsPerPage, totalItems);

    // 提取当前页的数据
    const currentPageData = belongArray.slice(startIndex, endIndex);

    // 处理页码切换
    const handlePageChange = (page: number) => {
        if (page >= 1 && page <= totalPages) {
            setCurrentPage(page);
        }
    };

    // // 初始化搜索条件
    const init = () => {
        setNowKeyWord('')
        setKeywords('')
        setType(null)
        setchargeAdditionals(null)
        settagDataId(null)
    }

    const nav = useNavigate();
    const [searchParams] = useSearchParams();

    const listReducer = (state: ListData, action: ListAction) => {
        if (action.type == IndexListDataType.PROJ) {
            state.type = IndexListDataType.PROJ;
            state.status = action.value as string;
        } else if (action.type == IndexListDataType.AGENT) {
            state.type = IndexListDataType.AGENT;
            state.status = action.value as string;
        } else if (action.type == IndexListDataType.CATEGORY) {
            state.categorys = action.value as MenuProps['items'];
            state.categoryChangeCount++;
        } else if (action.type == IndexListDataType.CATEGORY_CHANGE) {
            state.category = action.value as string;
            state.categoryChangeCount++;
        } else if (action.type == IndexListDataType.CATEGORY_DELETE) {
            state.categorys = action.value as MenuProps['items'];
            state.category = '';
            state.categoryChangeCount++;
        }
        return {
            ...state
        };
    }

    const [listData, dispatch] = useReducer<Reducer<ListData, ListAction>>(listReducer, {
        type: IndexListDataType.PROJ,
        categoryChangeCount: 0
    });

    const [projMenu, setProjMenu] = useState<IMenuWithTopButton>({
        button: {
            name: '项目',
            handle() {
                nav('/proj-create')
            }
        },
        list: [
            { id: 'ALL', name: '全部项目', active: true },
            { id: 'PROCESSING', name: '进行中的' },
            { id: 'COMPLETE', name: '已完成的' }
        ],
        handleListItem(_e, _index, item: IMenuListItem) {
            projMenu.list.forEach(item => item.active = false);
            sellMenu.list.forEach(item => item.active = false);
            buyMenu.list.forEach(item => item.active = false);

            item.active = true;
            setProjMenu({
                ...projMenu
            })
            dispatch({
                type: IndexListDataType.PROJ,
                value: item.id,
                // keywords: ''

            })
        },

    });
    // const [agentMenu, setAgentMenu] = useState<IMenuWithTopButton>({
    //     button: {
    //         name: '代理服务',
    //         handle() {
    //             dispatch({
    //                 type: IndexListDataType.PROJ,
    //                 value: 'COMPLETE',
    //             })
    //         }
    //     },
    //     list: [
    //         { id: 'ALL', name: '全部项目' },
    //         { id: 'PROCESSING', name: '进行中的' },
    //         { id: 'COMPLETE', name: '已完成的' },
    //     ],
    //     handleListItem(_e: MouseEvent<HTMLLIElement>, _index: number, item: IMenuListItem) {
    //         projMenu.list.forEach(item => item.active = false);
    //         agentMenu.list.forEach(item => item.active = false);
    //         item.active = true;
    //         setAgentMenu({
    //             ...agentMenu
    //         })
    //         dispatch({
    //             type: IndexListDataType.AGENT,
    //             value: item.id,

    //         })
    //     }
    // })
    const [sellMenu, setSellMenu] = useState<IMenuWithTopButton>({
        button: {
            name: '我要卖',
            handle() {
                // dispatch({
                //     type: IndexListDataType.PROJ,
                //     value: 'COMPLETE',
                // })
            }
        },
        list: [
            { id: '1', name: '商品发布', path: '/product-release' },
            { id: '2', name: '交易订单', path: '/transaction-order' },
            // { id: 'COMPLETE', name: '已完成的' },
        ],
        handleListItem(_e: MouseEvent<HTMLLIElement>, _index: number, item: IMenuListItem) {
            projMenu.list.forEach(item => item.active = false);
            sellMenu.list.forEach(item => item.active = false);
            buyMenu.list.forEach(item => item.active = false);

            item.active = true;
            setSellMenu({
                ...sellMenu
            })
            // dispatch({
            //     type: IndexListDataType.AGENT,
            //     value: item.id,

            // })
        }
    })
    const [buyMenu, setBuyMenu] = useState<IMenuWithTopButton>({
        button: {
            name: '我要买',
            handle() {
                // dispatch({
                //     type: IndexListDataType.PROJ,
                //     value: 'COMPLETE',
                // })
            }
        },
        list: [
            { id: '1', name: '著作权商品', path: '/copyright-goods' },
            { id: '2', name: '交易商品', path: '/trading-goods' },
            // { id: 'COMPLETE', name: '已完成的' },
        ],
        handleListItem(_e: MouseEvent<HTMLLIElement>, _index: number, item: IMenuListItem) {
            projMenu.list.forEach(item => item.active = false);
            sellMenu.list.forEach(item => item.active = false);
            buyMenu.list.forEach(item => item.active = false);
            item.active = true;
            setBuyMenu({
                ...buyMenu
            })
            // dispatch({
            //     type: IndexListDataType.AGENT,
            //     value: item.id,

            // })
        }
    })

    const location = useLocation()
    const [now, setNow] = useState<string>('首页')
    // 编辑项目路由名
    // const [editname,setEditname] = useState('')
    // 新建项目路由名字
    // const [newname,setNewname] = useState('')

    // const [pathArray, setPathArray] = useState<any>([])
    const [showSearchBox, setShowSearchBox] = useState(true)


    useEffect(() => {
        // const nowname = sessionStorage.getItem('now')
        if (location.pathname.includes('/home')) {
            setNow('首页')
            // setPathArray([{ title: '首页' }])
            setShowSearchBox(true)

        } else if (location.pathname.includes('/proj-create')) {
            setShowSearchBox(false)
            setNow('创建项目')
            // setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: '创建项目' }])
            // /config-mod-list    /config-menu-list /config-mod-show
        } else if (location.pathname.includes('/proj-edit') && !location.pathname.includes('/config-mod-show') && !location.pathname.includes('/config-mod-edit') && !location.pathname.includes('/step') && !location.pathname.includes('/config-loginpage') && !location.pathname.includes('/config-mod-save') && !location.pathname.includes('/config-mod-list') && !location.pathname.includes('/config-menu-list')) {
            setNow('编辑项目')
            setShowSearchBox(false)

            // setEditname(location.pathname)
            // setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: '编辑项目' }])
        } else if (location.pathname.includes('/proj-new')) {
            setNow('新建项目')
            setShowSearchBox(false)

            // setNewname(location.pathname)
            // setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: '新建项目' }])
        } else if (location.pathname.includes('/proj-efree')) {
            setNow('编辑项目')
            setShowSearchBox(false)

            // setNewname(location.pathname)
            // setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: '编辑项目' }])
        } else if (location.pathname.includes('/proj-eall')) {
            setNow('编辑项目')
            setShowSearchBox(false)

            // setNewname(location.pathname)
            // setPathArray([{ title: <Link to={'/home'}>首页 </Link> }, { title: '编辑项目' }])
        } else if (location.pathname.includes('/proj-edit/step1')) {
            setNow('标题简介')
            setShowSearchBox(false)

            // setNewname(location.pathname)
            // setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '标题简介' }])
        } else if (location.pathname.includes('/proj-edit/step2')) {
            setNow('标题简介')
            setShowSearchBox(false)

            // setNewname(location.pathname)
            // setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '基本信息' }])
        } else if (location.pathname.includes('/proj-edit/config-loginpage')) {
            setNow('登录界面设置')
            setShowSearchBox(false)

            // setNewname(location.pathname)
            // setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '登录界面设置' }])
        } else if (location.pathname.includes('/proj-edit/config-mod-list')) {
            setNow('系统菜单管理')
            setShowSearchBox(false)

            // setNewname(location.pathname)
            // setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '系统菜单管理' }])
        } else if (location.pathname.includes('/proj-edit/config-menu-list')) {
            setNow('系统菜单顺序')
            setShowSearchBox(false)

            // setNewname(location.pathname)
            // setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '系统菜单顺序' }])
        } else if (location.pathname.includes('/step3')) {
            setNow('软件功能特点')
            setShowSearchBox(false)

            // setNewname(location.pathname)
            // setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '软件功能特点' }])
        } else if (location.pathname.includes('/proj-edit/config-mod-save')) {
            setNow('添加菜单')
            setShowSearchBox(false)

            // setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-1) }}>编辑项目</a> }, { title: '添加菜单' }])
        } else if (location.pathname.includes('/proj-edit/config-mod-edit')) {
            setNow('编辑菜单')
            setShowSearchBox(false)

            // setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-2) }}>编辑项目</a> }, { title: <a onClick={() => { nav(-1) }}>系统菜单管理</a> }, { title: '编辑菜单' }])
            //  /config-mod-edit  /config-mod-show
        } else if (location.pathname.includes('/proj-edit/config-mod-show')) {
            setNow('查看菜单')
            setShowSearchBox(false)

            // setPathArray([{ title: <Link to={'/home'}>首页</Link> }, { title: <Link to={'/proj-create'}>创建项目</Link> }, { title: <a onClick={() => { nav(-2) }}>编辑项目</a> }, { title: <a onClick={() => { nav(-1) }}>系统菜单管理</a> }, { title: '查看菜单' }])
            //  /config-mod-edit 
        } else if (location.pathname.includes('/product-release')) {
            setNow('首页')
            setShowSearchBox(false)

            // setPathArray([{ title: '首页' }])
            //  /config-mod-edit  /product-release /transaction-order
        } else if (location.pathname.includes(' /transaction-order')) {
            setNow('首页')
            setShowSearchBox(false)

            // setPathArray([{ title: '首页' }])
            //  /config-mod-edit  /product-release /transaction-order
        } else if (location.pathname.includes(' /copyright-goods')) {
            setNow('首页')
            setShowSearchBox(false)

            // setPathArray([{ title: '首页' }])
            //  /config-mod-edit  /product-release /transaction-order
        } else if (location.pathname.includes(' /trading-goods')) {
            setNow('首页')
            setShowSearchBox(false)

            // setPathArray([{ title: '首页' }])
            //  /config-mod-edit  /product-release /transaction-order
        }
    }, [location.pathname])
    useEffect(() => {
        // nav('/home')
        // sessionStorage.setItem('pathArray', JSON.stringify([{ title: <Link to={'/home'}>首页</Link> }]));
        // sessionStorage.setItem('now', '首页');
        if (searchParams.get('type') == 'agent') {
            dispatch({
                type: IndexListDataType.AGENT,
                value: 'ALL',

            })

        }
        getProjOwnerList()
        getTag()
    }, []);
    useEffect(() => {
        // console.log('监听', '类型:', type, '关键字:', keywords, '额外付费:', chargeAdditionals,'进度:',tagDataId);
        // console.log(Boolean(keywords));

        // if (location.pathname.includes('/home')) {
        // if (!keywords && !type && !chargeAdditionals && !tagDataId) {
        //     setKeywords('')
        //     setType(null)
        //     setchargeAdditionals(null)
        //     settagDataId(null)
        // }
        // if (location.pathname.includes('/home')) {
        //     nav('/home', {
        //         state: {
        //             keyword: keywords,
        //             name: type,
        //             chargeAdditionals: chargeAdditionals,
        //             tagDataId: tagDataId,
        //             authorId: authorId
        //         }
        //     })
        // }
        // console.log('监听',Boolean(authorId));
        if (location.pathname.includes('/home')) {
            // if (!keywords && !type && !chargeAdditionals && !tagDataId && !authorId) {
            //     init()
            //     nav('/home', {
            //         state: {
            //             keyword: '',
            //             name: '',
            //             chargeAdditionals: '',
            //             tagDataId: '',
            //             authorId: ''
            //         }
            //     })

            // } else {
            //     nav('/home', {
            //         state: {
            //             keyword: keywords,
            //             name: type,
            //             chargeAdditionals: chargeAdditionals,
            //             tagDataId: tagDataId,
            //             authorId: authorId
            //         }
            //     })
            // }
            nav('/home', {
                state: {
                    keyword: keywords,
                    type: type,
                    chargeAdditionals: chargeAdditionals,
                    tagDataId: tagDataId,
                    authorId: authorId
                }
            })
        }
        // }
        // console.log('type',type);
        // console.log('chargeAdditionals',chargeAdditionals);

    }, [type, chargeAdditionals, keywords, tagDataId, authorId]);

    const handleSearch = (value: string) => {
        // console.log(value);
        setKeywords(value)
        nav('/home', {
            state: {
                keyword: value,
                type: type,
                chargeAdditionals: chargeAdditionals,
                tagDataId: tagDataId,
                authorId: authorId

            }
        })
    }
    const handleChange = (e: any) => {
        setNowKeyWord(e.target.value)
        // console.log(e.target.value);
        if (e.target.value == '') {
            setKeywords('')
            nav('/home', {
                state: {
                    keyword: '',
                    type: type,
                    chargeAdditionals: chargeAdditionals,
                    tagDataId: tagDataId,
                    authorId: authorId
                }
            })
        }
    }
    return (
        <>
            {/* <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>}
                ]}
            /> */}
            {contextHolder}
            <IndexListContext.Provider value={listData} >
                <IndexListDispatchContext.Provider value={dispatch}>
                    <div className="index">
                        <div className='leftbox'>
                            <div className="left" >
                                <div style={{ height: '15px', width: '230px', background: 'white' }}></div>
                                <MenuWithTopButton
                                    button={projMenu.button}
                                    list={projMenu.list}
                                    handleListItem={projMenu.handleListItem}
                                    keywords={keywords}
                                    type={type ? type : ""}
                                    chargeAdditionals={chargeAdditionals ? chargeAdditionals : ""}
                                    tagDataId={tagDataId ? tagDataId : ""}
                                    authorId={authorId ? authorId : ""}
                                />
                                <div className='belongPeopleMenu'>
                                    <div className='belongPeopleMenu-title'>
                                        <MenuFoldOutlined style={{ marginLeft: 10, marginRight: 10 }} />产权所属者
                                    </div>
                                    <div style={{ display: belongArray.length > 0 ? 'block' : 'none' }}>
                                        <div className='belongPeopleMenu-box'>
                                            {
                                                currentPageData.map((item: any) => {
                                                    return (
                                                        <div className='belongpeopleName' key={item.projOwnerId} onClick={() => {
                                                            if (authorId == item.projOwnerId) {
                                                                setauthorId('')
                                                                nav('/home', {
                                                                    state: {
                                                                        keyword: keywords,
                                                                        type: type,
                                                                        chargeAdditionals: chargeAdditionals,
                                                                        tagDataId: tagDataId,
                                                                        authorId: ''
                                                                    }
                                                                })
                                                            } else {
                                                                setauthorId(item.projOwnerId)
                                                                nav('/home', {
                                                                    state: {
                                                                        keyword: keywords,
                                                                        type: type,
                                                                        chargeAdditionals: chargeAdditionals,
                                                                        tagDataId: tagDataId,
                                                                        authorId: item.projOwnerId
                                                                    }
                                                                })
                                                            }
                                                        }}
                                                            style={{ background: authorId == item.projOwnerId ? '#FF9F08' : '', color: authorId == item.projOwnerId ? '#FFF' : '' }}
                                                            title={item.name} // 添加 title 属性以显示完整文本
                                                        >
                                                            {item.name}
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                        {/* 分页控件 */}
                                        {/* <div className='pagination-controls'>
                                            <Button
                                                type="primary"
                                                onClick={() => handlePageChange(currentPage - 1)}
                                                disabled={currentPage === 1}
                                            >
                                                上一页
                                            </Button>

                                            <Button
                                                type="primary"
                                                onClick={() => handlePageChange(currentPage + 1)}
                                                disabled={currentPage === totalPages}
                                                style={{ marginLeft: 10 }}
                                            >
                                                下一页
                                            </Button>
                                        </div> */}
                                        <div className='belong-pagination'>
                                            <Pagination
                                                showSizeChanger={false}
                                                current={currentPage}
                                                total={totalItems}
                                                pageSize={itemsPerPage}
                                                onChange={handlePageChange} // 页码改变时的回调
                                                className="custom-pagination"
                                            />
                                        </div>
                                    </div>
                                    <div style={{ display: belongArray.length > 0 ? 'none' : 'block', height: 230 }}>
                                        <div style={{ width: 230, height: 230, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                            <Empty
                                                description="暂无数据"
                                            />
                                        </div>
                                    </div>
                                </div>
                                {/* <MenuTreeWithTopButton /> */}
                                {/* <MenuWithBottomButtom
                                button={agentMenu.button}
                                list={agentMenu.list}
                                handleListItem={agentMenu.handleListItem}
                            /> */}
                                {/* <MenuWithBottomButtom
                                    button={sellMenu.button}
                                    list={sellMenu.list}
                                    handleListItem={sellMenu.handleListItem}
                                />
                                <MenuWithBottomButtom
                                    button={buyMenu.button}
                                    list={buyMenu.list}
                                    handleListItem={buyMenu.handleListItem}
                                />  */}
                            </div>
                        </div>
                        <div className="right">
                            <div>
                                <div className="top">
                                    {/* 标签 */}
                                    {/* {renderStatus()} */}
                                    <div className='gps'>
                                        <img src={gpsImg} alt="" />
                                        <div>当前位置:{now}</div>
                                    </div>
                                    <div className='line' style={{
                                        display: showSearchBox ? 'block' : 'none',

                                    }} ></div>
                                    <div
                                        style={{
                                            width: 1,
                                            height: 23,
                                            marginLeft: 33,
                                            marginRight: 31,
                                            display: showSearchBox ? 'none' : 'block'
                                        }}
                                    ></div>
                                    <Search placeholder="输入项目名称"
                                        value={nowKeyword}
                                        onSearch={handleSearch}
                                        onChange={handleChange}
                                        style={{
                                            width: '253px',
                                            height: '31px',
                                            display: showSearchBox ? 'block' : 'none'
                                        }}
                                    />
                                    <Select
                                        value={type}
                                        style={{ height: '31px', width: '183px', marginLeft: 20, display: showSearchBox ? 'block' : 'none' }}
                                        onChange={(value: string) => {
                                            setType(value)
                                            nav('/home', {
                                                state: {
                                                    keyword: keywords,
                                                    type: value,
                                                    chargeAdditionals: chargeAdditionals,
                                                    tagDataId: tagDataId,
                                                    authorId: authorId
                                                }
                                            })

                                        }}
                                        options={[

                                            { value: 'FREE', label: '免费试用' },
                                            { value: 'MATERIAL', label: '写材料' },
                                            { value: 'ALL', label: '全托管' },
                                        ]}

                                        placeholder='选择类型'
                                    />
                                    <Select
                                        value={chargeAdditionals}

                                        style={{ height: '31px', width: '183px', marginLeft: 20, display: showSearchBox ? 'block' : 'none' }}
                                        onChange={(value: string) => {
                                            // console.log(`selected ${value}`);
                                            setchargeAdditionals(value)
                                            // alert(`selected ${value}`)
                                            // lyp

                                            nav('/home', {
                                                state: {
                                                    keyword: keywords,
                                                    type: type,
                                                    chargeAdditionals: value,
                                                    tagDataId: tagDataId,
                                                    authorId: authorId
                                                }
                                            })

                                        }}
                                        options={[
                                            // { value: '', label: '全部项目' },
                                            { value: 'PKG', label: '安装包' },
                                            { value: 'VIDEO_DEMO', label: '演示视频' },
                                            { value: 'URGENT', label: '加急' },
                                        ]}
                                        // defaultValue=""
                                        placeholder={'选择拓展收费'}
                                    />
                                    <Select
                                        value={tagDataId}
                                        style={{ height: '31px', width: '183px', marginLeft: 20, display: showSearchBox ? 'block' : 'none' }}
                                        onChange={(value: string) => {
                                            // console.log(`selected ${value}`);
                                            settagDataId(value)
                                            // alert(`selected ${value}`)
                                            // lyp

                                            nav('/home', {
                                                state: {
                                                    keyword: keywords,
                                                    type: type,
                                                    chargeAdditionals: chargeAdditionals,
                                                    tagDataId: value,
                                                    authorId: authorId
                                                }
                                            })

                                        }}
                                        options={
                                            // [
                                            //     { value: 'PRODUCTION', label: '正在制作中' },
                                            //     { value: 'SUBMIT_FOR_REVIEW', label: '已提交版权中心' },
                                            //     { value: 'DONE', label: '已下证' },
                                            // ]
                                            tagArray
                                        }

                                        placeholder={'选择标签'}


                                    />
                                    <Button onClick={() => {
                                        init()
                                    }} style={{ marginLeft: 10, display: showSearchBox ? 'block' : 'none', height: 31 }}
                                        // type="primary" 
                                        icon={<ClearOutlined />}>
                                        清除
                                    </Button>
                                    <div style={{
                                        width: '253px',
                                        height: '31px',
                                        display: showSearchBox ? 'none' : 'block'
                                    }}></div>
                                    <div className='nowPosition'>
                                        <img src={backImg} alt="" />
                                        <div style={{ display: now == '首页' ? 'block' : 'none' }}>
                                            {/* <Breadcrumb
                                                separator="|"
                                                // items={[
                                                //     { title: <Link to={'/home'}>首页</Link> },
                                                // ]}
                                                items={pathArray}
                                            /> */}
                                            <span>首页</span>
                                        </div>
                                        <div style={{ display: now == '创建项目' ? 'block' : 'none' }}>
                                            {/* <Breadcrumb
                                                separator="|"
                                                // items={[
                                                //     { title: <Link to={'/home'}>首页</Link> },
                                                // ]}
                                                items={pathArray}
                                            /> */}
                                            <span style={{ cursor: 'pointer' }}
                                                onClick={() => {
                                                    nav('/home', {
                                                        state: {
                                                            keyword: keywords,
                                                            type: type,
                                                            chargeAdditionals: chargeAdditionals,
                                                            tagDataId: tagDataId,
                                                            authorId: authorId
                                                        }
                                                    })
                                                }}
                                            >首页</span>
                                            <span style={{ marginLeft: 10, marginRight: 10 }}>|</span>
                                            <span>创建项目</span>
                                        </div>
                                        <div style={{ display: now == '编辑项目' ? 'block' : 'none' }}>
                                            {/* <Breadcrumb
                                                separator="|"
                                                // items={[
                                                //     { title: <Link to={'/home'}>首页</Link> },
                                                // ]}
                                                items={pathArray}
                                            /> */}
                                            <span style={{ cursor: 'pointer' }}
                                                onClick={() => {
                                                    nav('/home', {
                                                        state: {
                                                            keyword: keywords,
                                                            type: type,
                                                            chargeAdditionals: chargeAdditionals,
                                                            tagDataId: tagDataId,
                                                            authorId: authorId
                                                        }
                                                    })
                                                }}
                                            >首页</span>
                                            <span style={{ marginLeft: 10, marginRight: 10 }}>|</span>
                                            <span>编辑项目</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/* {
                                listData.type === IndexListDataType.PROJ ? <ListProj/> : (
                                    listData.type == IndexListDataType.AGENT ? <ListProjAgent/> : <></>
                                )
                            } */}
                            <div>
                                <Outlet></Outlet>
                            </div>
                        </div>
                    </div>
                </IndexListDispatchContext.Provider>
            </IndexListContext.Provider>
        </>
    )
}