Commit d35c66c4 authored by wuyongsheng's avatar wuyongsheng

feat: 菜单添加Icon

parent d7cbfccd
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 12</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-12">
<rect id="背景" x="0" y="0" width="16" height="16"></rect>
<g id="项目管理" transform="translate(1.000000, 0.500000)" stroke="#8A9099" stroke-width="1.60714286">
<path d="M9.40680569,0.803571429 L13.1232896,4.61571277 L13.1964286,13.9285714 L1.07142857,14.1964286 L0.803571429,1.07142857 L9.40680569,0.803571429 Z" id="矩形"></path>
<line x1="3.69384615" y1="5.25" x2="8.00153846" y2="5.25" id="路径-2"></line>
<line x1="3.69384615" y1="9.53571429" x2="10.1553846" y2="9.53571429" id="路径-2备份"></line>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 12备份 8</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-12备份-8">
<rect id="背景" x="0" y="0" width="16" height="16"></rect>
<g id="项目管理" transform="translate(1.000000, 0.500000)" stroke="#1370FF" stroke-width="1.60714286">
<path d="M9.40680569,0.803571429 L13.1232896,4.61571277 L13.1964286,13.9285714 L1.07142857,14.1964286 L0.803571429,1.07142857 L9.40680569,0.803571429 Z" id="矩形"></path>
<line x1="3.69384615" y1="5.25" x2="8.00153846" y2="5.25" id="路径-2"></line>
<line x1="3.69384615" y1="9.53571429" x2="10.1553846" y2="9.53571429" id="路径-2备份"></line>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组">
<rect id="矩形备份-4" x="0" y="0.242640687" width="16" height="16"></rect>
<g id="编组-4备份" transform="translate(1.000000, 0.000000)" stroke="#8A9099" stroke-width="1.5">
<rect id="矩形" x="0.75" y="1.99264069" width="4.5" height="4.5" rx="1"></rect>
<rect id="矩形备份-2" x="0.75" y="9.99264069" width="4.5" height="4.5" rx="1"></rect>
<rect id="矩形备份" transform="translate(10.892641, 4.242641) rotate(-45.000000) translate(-10.892641, -4.242641) " x="8.64264069" y="1.99264069" width="4.5" height="4.5" rx="1"></rect>
<rect id="矩形备份-3" x="8.5" y="9.99264069" width="4.5" height="4.5" rx="1"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组备份 3</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组备份-3">
<rect id="矩形备份-4" x="0" y="0.242640687" width="16" height="16"></rect>
<g id="编组-4备份" transform="translate(1.000000, 0.000000)" stroke="#1370FF" stroke-width="1.5">
<rect id="矩形" x="0.75" y="1.99264069" width="4.5" height="4.5" rx="1"></rect>
<rect id="矩形备份-2" x="0.75" y="9.99264069" width="4.5" height="4.5" rx="1"></rect>
<rect id="矩形备份" transform="translate(10.892641, 4.242641) rotate(-45.000000) translate(-10.892641, -4.242641) " x="8.64264069" y="1.99264069" width="4.5" height="4.5" rx="1"></rect>
<rect id="矩形备份-3" x="8.5" y="9.99264069" width="4.5" height="4.5" rx="1"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 58</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-56">
<rect id="背景" x="0" y="0" width="16" height="16"></rect>
<g id="项目设置" stroke="#8A9099" stroke-width="1.5">
<path d="M5.58808928,0.759546858 C6.24087167,1.18742985 7.27894484,2.03357391 8.0410091,2.03357391 C8.79391996,2.03357391 9.82900874,1.20312298 10.1257116,0.879260616 L10.1257116,0.879260616 L12.4223498,1.92673302 C12.4838159,2.4170648 12.2821914,2.95405099 12.2821914,3.4239819 C12.2821914,4.19023092 12.5792307,4.88335657 13.0540612,5.3859324 C13.5439168,5.90441126 14.2215221,6.22104975 14.9662484,6.22104975 C15.1008851,6.51473263 15.25,7.34188133 15.25,8.00533082 C15.25,8.66737979 15.1010676,9.49361375 15.0943199,9.53058939 C14.2354924,9.80169918 13.5671599,10.1121377 13.083231,10.6039797 C12.5858984,11.1094446 12.2822113,11.8099862 12.2822113,12.5854135 C12.2822113,13.0633674 12.4859773,13.5981268 12.5031644,13.6416351 L12.5031644,13.6416351 L10.5347562,15.1859987 C9.8023742,14.7872629 8.74070743,13.8890234 7.95899092,13.8890234 C7.23777174,13.8890234 6.20467319,14.6831976 5.82852375,15.113358 L5.82852375,15.113358 L3.57620168,14.0817426 C3.50474061,13.6209845 3.71780868,13.0708966 3.71780868,12.5853924 C3.71780868,11.8193033 3.42075488,11.1262121 2.94586849,10.6236497 C2.45602443,10.1052579 1.77845122,9.7886411 1.03377167,9.7886411 C0.897650311,9.48798028 0.75,8.66482749 0.75,8.0053097 C0.75,7.34441337 0.897848614,6.52032512 0.905715983,6.47853298 C1.76432975,6.20788019 2.43260143,5.89750044 2.91648052,5.40589587 C3.4140514,4.90038092 3.71780868,4.19971123 3.71780868,3.42400299 C3.71780868,2.94206588 3.51060559,2.40259827 3.49603335,2.36594194 L3.49603335,2.36594194 Z" id="路径" fill-rule="nonzero"></path>
<circle id="椭圆形备份" cx="8" cy="8" r="2.45"></circle>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 56备份 2</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-56备份">
<rect id="背景" x="0" y="0" width="16" height="16"></rect>
<g id="项目设置" stroke="#1370FF" stroke-width="1.5">
<path d="M5.58808928,0.759546858 C6.24087167,1.18742985 7.27894484,2.03357391 8.0410091,2.03357391 C8.79391996,2.03357391 9.82900874,1.20312298 10.1257116,0.879260616 L10.1257116,0.879260616 L12.4223498,1.92673302 C12.4838159,2.4170648 12.2821914,2.95405099 12.2821914,3.4239819 C12.2821914,4.19023092 12.5792307,4.88335657 13.0540612,5.3859324 C13.5439168,5.90441126 14.2215221,6.22104975 14.9662484,6.22104975 C15.1008851,6.51473263 15.25,7.34188133 15.25,8.00533082 C15.25,8.66737979 15.1010676,9.49361375 15.0943199,9.53058939 C14.2354924,9.80169918 13.5671599,10.1121377 13.083231,10.6039797 C12.5858984,11.1094446 12.2822113,11.8099862 12.2822113,12.5854135 C12.2822113,13.0633674 12.4859773,13.5981268 12.5031644,13.6416351 L12.5031644,13.6416351 L10.5347562,15.1859987 C9.8023742,14.7872629 8.74070743,13.8890234 7.95899092,13.8890234 C7.23777174,13.8890234 6.20467319,14.6831976 5.82852375,15.113358 L5.82852375,15.113358 L3.57620168,14.0817426 C3.50474061,13.6209845 3.71780868,13.0708966 3.71780868,12.5853924 C3.71780868,11.8193033 3.42075488,11.1262121 2.94586849,10.6236497 C2.45602443,10.1052579 1.77845122,9.7886411 1.03377167,9.7886411 C0.897650311,9.48798028 0.75,8.66482749 0.75,8.0053097 C0.75,7.34441337 0.897848614,6.52032512 0.905715983,6.47853298 C1.76432975,6.20788019 2.43260143,5.89750044 2.91648052,5.40589587 C3.4140514,4.90038092 3.71780868,4.19971123 3.71780868,3.42400299 C3.71780868,2.94206588 3.51060559,2.40259827 3.49603335,2.36594194 L3.49603335,2.36594194 Z" id="路径" fill-rule="nonzero"></path>
<circle id="椭圆形备份" cx="8" cy="8" r="2.45"></circle>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 57</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-57">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="工作台" transform="translate(0.500000, 1.500000)" stroke="#8A9099" stroke-width="1.5">
<rect id="矩形" x="0.75" y="0.75" width="13.5" height="8.5" rx="1"></rect>
<line x1="2.5" y1="12" x2="12.5" y2="12" id="路径-3"></line>
<line x1="11.5" y1="6" x2="6.5" y2="6" id="路径-4备份"></line>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 62</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-62">
<rect id="矩形备份-22" x="0" y="0" width="16" height="16"></rect>
<g id="工作台备份" transform="translate(0.500000, 1.500000)" stroke="#1370FF" stroke-width="1.5">
<rect id="矩形" x="0.75" y="0.75" width="13.5" height="8.5" rx="1"></rect>
<line x1="2.5" y1="12" x2="12.5" y2="12" id="路径-3"></line>
<line x1="11.5" y1="6" x2="6.5" y2="6" id="路径-4备份"></line>
</g>
</g>
</g>
</svg>
\ No newline at end of file
...@@ -84,13 +84,13 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => { ...@@ -84,13 +84,13 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
return footerRender ? ( return footerRender ? (
footerRender() footerRender()
) : ( ) : (
<DialogActions style={{ padding: "0 24px 24px 24px" }}> <DialogActions style={{ padding: "0 24px 16px 24px" }}>
{showCancel ? ( {showCancel ? (
<MyButton <MyButton
text={cancelText || "取消"} text={cancelText || "取消"}
onClick={onClose} onClick={onClose}
variant="outlined" variant="outlined"
size="small" // size="small"
color="secondary" color="secondary"
/> />
) : null} ) : null}
...@@ -99,7 +99,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => { ...@@ -99,7 +99,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
text={okText || "确定"} text={okText || "确定"}
onClick={onConfirm} onClick={onConfirm}
variant="contained" variant="contained"
size="small" // size="small"
disabled={disabledConfirm} disabled={disabledConfirm}
isLoadingButton={true} isLoadingButton={true}
loading={loading} loading={loading}
...@@ -136,10 +136,10 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => { ...@@ -136,10 +136,10 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
fontWeight: 600, fontWeight: 600,
}} }}
> >
<span>{title}</span> <span style={{fontSize: 16, lineHeight: '24px', color: '#1E2633'}}>{title}</span>
<CloseIcon <CloseIcon
onClick={onClose} onClick={onClose}
style={{ color: "#C2C6CC", cursor: "pointer" }} sx={{ color: "#C2C6CC", cursor: "pointer", ":hover": { background: "#f0f2f5", borderRadius:'2px' } }}
/> />
</div> </div>
</DialogTitle> </DialogTitle>
......
...@@ -91,13 +91,12 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => { ...@@ -91,13 +91,12 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
<MyButton <MyButton
text={cancelText} text={cancelText}
variant="outlined" variant="outlined"
size="small"
color="inherit" color="inherit"
onClick={handleCancel} onClick={handleCancel}
style={{ marginRight: "12px" }} style={{ marginRight: "12px" }}
/> />
)} )}
<MyButton text={okText} size="small" onClick={handleOk} /> <MyButton text={okText} onClick={handleOk} />
</Box> </Box>
</Popper> </Popper>
); );
......
...@@ -27,6 +27,12 @@ ...@@ -27,6 +27,12 @@
.listItem:hover { .listItem:hover {
background-color: #EEF1F5; background-color: #EEF1F5;
} }
.routerIcon{
vertical-align: middle;
margin-right: 12px;
line-height: 22px;
}
.active { .active {
border-left: 3px solid #1370ff; border-left: 3px solid #1370ff;
color: #1370ff; color: #1370ff;
......
/*
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-08-02 11:43:28
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-03 19:05:48
* @FilePath: /bkunyun/src/views/MenuLayout/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { Box, List } from "@mui/material"; import { Box, List } from "@mui/material";
import CurrentProject from "../Project/components/CurrentProject"; import CurrentProject from "../Project/components/CurrentProject";
import React from "react"; import React from "react";
...@@ -21,6 +29,15 @@ const MenuLayout = observer(() => { ...@@ -21,6 +29,15 @@ const MenuLayout = observer(() => {
navigate("/home"); navigate("/home");
} }
const routerIcon = (id: string, isSelect: boolean)=>{
try {
const result = require(`../../assets/project/${id}${isSelect ? '_BLUE': ''}.svg`)
return result || ''
} catch (error) {
console.log(error)
}
}
return ( return (
<Box className={style.container}> <Box className={style.container}>
<Box className={style.aside}> <Box className={style.aside}>
...@@ -37,7 +54,8 @@ const MenuLayout = observer(() => { ...@@ -37,7 +54,8 @@ const MenuLayout = observer(() => {
})} })}
onClick={() => item.type === "page" && navigate(item.path)} onClick={() => item.type === "page" && navigate(item.path)}
> >
{item.name} <img className={style.routerIcon} src={routerIcon(item.id || '', `/v3${item.path}` === pathname) || undefined} alt=''/>
<span style={{verticalAlign: 'middle'}}>{item.name}</span>
</li> </li>
); );
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment