---

---

項目地址

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

• 代碼倉庫地址：

• 所用到的框架和插件：

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的詳情頁