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

---

---

项目地址

• 教程作者：
• 教程地址：

• 代码仓库地址：

• 所用到的框架和插件：

dbt 
airflow

一、侧边栏

实现功能：
1.根据权限动态加载sideBar，内容和图标
2. 高亮当前路由的侧边栏

项目地址：SideBar

1.1 具体实现

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

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

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

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;
};

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

//1.获取当前的路由地址
const { pathname } = useLocation();//2.添加样式
{allNav.map((n, i) => (<li key={i}><Linkto={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>
))}            

二、Header

1. 响应式按钮：

2.1 实现

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

//存储sidebar状态
const [showSidebar, setShowSidebar] = useState(false);//给两个组件里传递初始值和设置方法<Header showSidebar={showSidebar} setShowSidebar={setShowSidebar} /><SideBar showSidebar={showSidebar} setShowSidebar={setShowSidebar} />

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

<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"><divonClick={() => setShowSidebar(!showSidebar)}className="w-[35px] flex lg:hidden"><span><FaList /></span></div></div>
</div>

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

<divonClick={() => setShowSidebar(false)}className={`flex duration-200 ${!showSidebar ? "invisible" : "visible"} w-screen h-screen bg-[#8cbce780] top-0 left-0 z-10`}
></div>
<divclassName={`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"} `}
>

三、Orders页面

• 项目地址：
  Orders页码按钮添加 前端完成

3.1 分页和搜索

• 实现：5页，10页，20页分页
  

3.2 点击箭头显示商家所有订单

• 实现：
  1. 点击下箭头，实现商家Id下的所有订单
  2. 订单状态显示

3.3 页码按钮以及分页

四、Category页面

• 原始网页
  
• 响应式网页：
  -

4.1 左侧商品添加栏目

• 分析：左侧添加栏只是一个小的Orders页面，所以可以将Orders的主结构复制
  

4.2 右侧商品上传栏

五、Sellers页面

• 和Orders页面基本一样
  

六、Payment Request 页面（百万数据加载）

• 使用React Window 对超大数据加载
  

七、Deactive Sellers/Seller Request页面

7.1 Deactive

7.2 Seller

7.3 点击绿色小眼睛可以看到seller的详情页