目錄

1.運行項目

2. 項目結構

①項目頂部導航欄

②項目左側導航欄

③主頁面-路由切換區

---

本項目使用的是 react+ts+scss 技術棧。

1.運行項目

在當前頁面頂部下載本項目，解壓后使用編輯器打開，然后再終端輸入命令：

npm i

下載依賴后，運行項目：

npm run start

此時項目運行起來了，可以再瀏覽器看到運行效果：

2. 項目結構

在做自己的項目時，對于這個項目目錄我們只需要更改以下幾個文件：

src目錄下的文件和App.tsx，可以根據自己項目需要進行更改。

①項目頂部導航欄

header.tsx:

import logo from '../../assets/images/logo.svg';
import './header.scss';function Header() {return (<div className="headerAll"><header className="headerBox"><img src={logo} alt="logo" className='headerImg' /><div className="headerText">后臺管理系統</div><div className="circle">zh</div></header><header className="headerBoxPlaceholder"></header></div>);
}export default Header;

header.scss:

.headerBox {width: 100vw;height: 56px;background-color: #FFF;position: fixed;top: 0;left: 0;z-index: 9;min-width: 1140px;overflow: auto;.headerImg {width: 30px;height: 30px;position: absolute;top: 13px;left: 17px;}.headerText {font-size: 20px;position: absolute;top: 14px;left: 57px;font-weight: bold;}.navText {font-size: 16px;position: absolute;top: 16px;left: 218px;}.circle {width: 28px;height: 28px;line-height: 28px;border-radius: 50%;background-color: #19edcd;position: absolute;top: 14px;right: 14px;font-size: 12px;color: #FFF;text-align: center;}
}.headerBoxPlaceholder {width: 100vw;height: 56px;box-shadow: 0px 4px 10px 0px rgba(78, 89, 105, 0.06);
}

②項目左側導航欄

leftNavigation.tsx：

使用左側導航圖標使用svg，方便切換狀態時換色，以及后期更改主題色。

import { ReactComponent as IconEducationGroup } from '../../assets/images/icon-education-group.svg';
import { ReactComponent as IconEduGroup } from '../../assets/images/icon-edu-group.svg';
import { ReactComponent as IconSet } from '../../assets/images/icon-set.svg';
import Arrow from "../../assets/images/icon-arrow.png";
import './leftNavigation.scss';
import { useState } from 'react';function LeftNavigation() {// 左側導航，一級按鈕let navText = ['企業信息', '組織管理', '系統設置'];// 二級導航按鈕，比如企業信息沒有子級則二級導航為空數組let navTextChild = [[], ['組織架構', '部門設置'], ["日志設置", '通知設置']];// 當前選中的是哪個按鈕，0是一級按鈕，-1代表它沒有子級選中的就是它本身const [currentBtn, setCurrentBtn] = useState([0, -1]);// 如果存在子層級，子層級展開還是合并，0合并，1展開const [childShow, setChildShow] = useState([1, 1, 1, 1]);/*** 判斷按鈕背景顏色* @param index 索引* @param flag 標志* @param indexChild 二級索引* @returns 返回className*/function changeBGColor(index: number, flag: string, indexChild?: number): string {if (flag === 'one') {if (navTextChild[index].length === 0) {if (currentBtn[0] === index && navTextChild[index].length === 0) return 'first-order-tag bg-color'}} else {if (navTextChild[index].length !== 0 && currentBtn[0] === index && currentBtn[1] === indexChild) return 'first-order-tag bg-color'}return 'first-order-tag';}/*** 點擊導航按鈕進行頁面切換* @param indexOne 一級索引* @param indexTwo 二級索引*/function changeNavClick(indexOne: number, indexTwo?: number): void {if (navTextChild[indexOne].length === 0) { setCurrentBtn([indexOne, -1]) }if (indexTwo !== undefined && navTextChild[indexOne].length !== 0) {setCurrentBtn([indexOne, indexTwo])}if (indexTwo === undefined && navTextChild[indexOne].length !== 0) {updateItem(indexOne, childShow[indexOne] === 1 ? 0 : 1)}}/*** 只更新數組中的一個數值，數組[1]的值* @param indexFlag 一級索引* @param newValue 新的數值*/function updateItem(indexFlag: number, newValue: number) {setChildShow(prevItems =>prevItems.map((item, index) => {if (index === indexFlag) {return newValue;}return item;}));}return (<div className="leftNavigationAll"><div className="leftNavigationBox">{navText.map((item, index) => (<div key={index}>{/* 第一層級 */}<div key={index} className={changeBGColor(index, 'one')} onClick={() => changeNavClick(index)}><div className={currentBtn[0] === index ? 'navTextStyle-selected' : 'navTextStyle'}> {item}</div>{index === 0 && <IconEducationGroup className="icon-svg" stroke={currentBtn[0] === index ? '#00B498' : '#505553'} />}{index === 1 && <IconEduGroup className="icon-svg" stroke={currentBtn[0] === index ? '#00B498' : '#505553'} />}{index === 2 && <IconSet className="icon-svg" stroke={currentBtn[0] === index ? '#00B498' : '#505553'} fill={currentBtn[0] === index ? '#00B498' : '#505553'} />}{navTextChild[index].length !== 0 && <img alt="箭頭" src={Arrow} className={childShow[index] === 1 ? 'arrow' : 'arrowHidden'}></img>}</div>{/* 第二層級 */}<div className={childShow[index] === 1 ? 'showDiv' : 'hiddenDiv'}>{navTextChild[index].length !== 0 && navTextChild[index].map((itemChild, indexChild) => (<div key={indexChild} className={changeBGColor(index, 'two', indexChild)} onClick={() => changeNavClick(index, indexChild)}><div className={(currentBtn[1] === indexChild && currentBtn[0] === index) ? 'navTextStyle-selected' : 'navTextStyle'}> {itemChild}</div></div>))}</div></div>))}</div></div>);
}export default LeftNavigation;

leftNavigation.scss：

.bg-color {background-color: #E8FAF8;
}.showDiv {display: block;
}.hiddenDiv {display: none;
}.leftNavigationBox {z-index: 8;width: 200px;height: 100vh;min-height: 400px;background-color: #FFF;position: fixed;top: 0;left: 0;padding-top: 72px;padding-left: 8px;padding-right: 8px;box-sizing: border-box;.first-order-tag {width: 184px;height: 40px;// background-color: #E8FAF8;margin-bottom: 4px;border-radius: 6px;position: relative;cursor: pointer;&:hover {background-color: #F2F5F4;}.arrow {width: 12px;height: 12px;position: absolute;right: 16px;top: 14px;transform: rotateZ(180deg);}.arrowHidden {width: 12px;height: 12px;position: absolute;right: 16px;top: 14px;// transform: rotateZ(180deg);}.icon-svg {width: 18px;height: 18px;position: absolute;left: 12px;top: 11px;}.navTextStyle {font-size: 14px;color: #505553;position: absolute;left: 42px;top: 9px;}.navTextStyle-selected {font-size: 14px;color: #00B498;position: absolute;left: 42px;top: 9px;}}
}

③主頁面-路由切換區

App.tsx:

所有路由寫在這里，然后再左側導航欄進行切換。

import './App.scss';
import Header from './pages/navigation/header';
import LeftNavigation from './pages/navigation/leftNavigation';
import Home from './pages/home';
import { Route, Routes } from 'react-router-dom'function App() {return (<div className="App"><Header /><LeftNavigation />{/* 2. 使用路由組件,渲染路由,并且傳入路由配置 */}<Routes>{/* comopnent替換為 element */}<Route path='/' element={<Home />}></Route></Routes></div>);
}export default App;

home / index.tsx:

import './index.scss';
function Home() {return (<div className='homeBox'><div className='homeBoxText'>應用主頁</div></div>);
}export default Home;

以上就是項目的主要內容，可以將此項目當作基礎框架進行二次開發。