React（二）——Admin主页/Orders页面/Category页面

文章目录

项目地址
一、侧边栏
- [1.1 具体实现](#1.1 具体实现)
二、Header
- [2.1 实现](#2.1 实现)
三、Orders页面
- [3.1 分页和搜索](#3.1 分页和搜索)
- [3.2 点击箭头显示商家所有订单](#3.2 点击箭头显示商家所有订单)
- [3.3 页码按钮以及分页](#3.3 页码按钮以及分页)
四、Category页面
- [4.1 左侧商品添加栏目](#4.1 左侧商品添加栏目)
- [4.2 右侧商品上传栏](#4.2 右侧商品上传栏)
五、Sellers页面
[六、Payment Request 页面（百万数据加载）](#六、Payment Request 页面（百万数据加载）)
[七、Deactive Sellers/Seller Request页面](#七、Deactive Sellers/Seller Request页面)
- [7.1 Deactive](#7.1 Deactive)
- [7.2 Seller](#7.2 Seller)
- [7.3 点击绿色小眼睛可以看到seller的详情页](#7.3 点击绿色小眼睛可以看到seller的详情页)

项目地址

教程作者：
教程地址：

复制代码

代码仓库地址：

复制代码

所用到的框架和插件：

dbt
airflow

一、侧边栏

实现功能：

1.根据权限动态加载sideBar，内容和图标

高亮当前路由的侧边栏

项目地址：SideBar

1.1 具体实现

src/layout/Sidebar.jsx：通过useSate获取所有导航，并且通过useEffect加载getNav方法，通该方法获取admin的菜单

js 复制代码

const Sidebar = () => {

  //1.获取所有的导航栏
  const [allNav, setAllNav] = useState([]);
  useEffect(() => {
    const navs = getNav("admin");
    setAllNav(navs);
  }, []);
  console.log(allNav);

在src/navigation/index.js 里创建getNav方法

js 复制代码

import { allNav } from "./allNav";

export const getNav = (role) => {
  const finalNavs = [];
  for (let i = 0; i < allNav.length; i++) {
    if (role === allNav[i].role) {
      finalNavs.push(allNav[i]);
    }
  }
  return finalNavs;
};

src/navigation/allNav.js: 创建所有的侧边栏的内容
点击侧边栏高亮显示

js 复制代码

//1.获取当前的路由地址
const { pathname } = useLocation();

//2.添加样式
{allNav.map((n, i) => (
  <li key={i}>
    <Link
      to={n.path} // 路由地址
      className={`${
        pathname === n.path //当前路由和循环出来的路由相同的化，添加高亮，不用则正常
          ? "bg-blue-600 shadow-indigo-500/50 text-white duration-500"
          : "text-[#030811] font-bold duration-200 "
      } px-[12px] py-[9px] rounded-sm flex justify-start items-center gap-[12px] hover:pl-4 transition-all w-full mb-1 `}
    >
      <span>{n.icon}</span>
      <span>{n.title}</span>
    </Link>
  </li>
))}

响应式按钮：

2.1 实现

src/layout/MainLayout.jsx：添加显示和隐藏SideBar的useState存储状态，并且添加样式

js 复制代码

//存储sidebar状态
const [showSidebar, setShowSidebar] = useState(false);

//给两个组件里传递初始值和设置方法
 <Header showSidebar={showSidebar} setShowSidebar={setShowSidebar} />
 <SideBar showSidebar={showSidebar} setShowSidebar={setShowSidebar} />

src/layout/Header.jsx ：小屏幕下出现三个按钮，用来显示和隐藏侧边栏

js 复制代码

<div className="fixed top-0 left-0 w-full py-5 px-2 lg:px-7 z-40">
  <div className="ml-0 lg:ml-[260px] rounded-md h-[65px] flex justify-between items-center justify-center bg-[#b1addf] px-5 transition-all">
    <div
      onClick={() => setShowSidebar(!showSidebar)}
      className="w-[35px] flex lg:hidden"
    >
      <span>
        <FaList />
      </span>
    </div>
  </div>
</div>

src/layout/Sidebar.jsx：添加sidebar样式，显示和隐藏功能

js 复制代码

<div
  onClick={() => setShowSidebar(false)}
  className={`flex duration-200 ${
    !showSidebar ? "invisible" : "visible"
  } w-screen h-screen bg-[#8cbce780] top-0 left-0 z-10`}
></div>
<div
  className={`w-[260px] fixed bg-[#e6e7fb] z-50 top-0 h-screen shadow-[0_0_15px_0_rgb(34_41_47_/_5%)] transition-all ${
    showSidebar ? "left-0" : "-left-[260px] lg:left-0"
  } `}
>