yexuejc007/PlayEdu-backend
1
0
Fork 0
mirror of https://github.com/PlayEdu/backend synced 2025-06-19 18:22:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

tree组件初步优化

Browse Source
This commit is contained in:
禺狨 2023-03-21 12:12:36 +08:00
parent 1125159c6c
commit 629973babe
2 changed files with 41 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/compenents/tree-category/index.tsx
View File

@ -31,12 +31,10 @@ export const TreeCategory = (props: PropInterface) => {
new_arr.unshift({ new_arr.unshift({
key: 0, key: 0,
title: ( title: (
<div className="d-flex"> <>
未分类 <span>未分类</span>
<span className="tree-num"> <span className="tree-num">{props.categoryCount[0] || 0}</span>
({props.categoryCount[0] || 0}) </>
</span>
</div>
), ),
}); });
} }
@ -51,12 +49,12 @@ export const TreeCategory = (props: PropInterface) => {
for (let i = 0; i < categories[id].length; i++) { for (let i = 0; i < categories[id].length; i++) {
if (!categories[categories[id][i].id]) { if (!categories[categories[id][i].id]) {
let name = ( let name = (
<div className="d-flex"> <>
{categories[id][i].name} <span className="tree-title-elli">{categories[id][i].name}</span>
<span className="tree-num"> <span className="tree-num">
({props.categoryCount[categories[id][i].id] || 0}) {props.categoryCount[categories[id][i].id] || 0}
</span> </span>
</div> </>
); );
arr.push({ arr.push({
title: name, title: name,
@ -64,12 +62,12 @@ export const TreeCategory = (props: PropInterface) => {
}); });
} else { } else {
let name = ( let name = (
<div className="d-flex"> <>
{categories[id][i].name} <span className="tree-title-elli">{categories[id][i].name}</span>
<span className="tree-num"> <span className="tree-num">
({props.categoryCount[categories[id][i].id] || 0}) {props.categoryCount[categories[id][i].id] || 0}
</span> </span>
</div> </>
); );
const new_arr: Option[] = checkArr(categories, categories[id][i].id); const new_arr: Option[] = checkArr(categories, categories[id][i].id);
arr.push({ arr.push({
@ -112,8 +110,10 @@ export const TreeCategory = (props: PropInterface) => {
onSelect([], ""); onSelect([], "");
}} }}
> >
全部{props.text} <div className="j-b-flex">
<span className="tree-num">({props.resourceTotal})</span> <span>全部{props.text}</span>
<span className="tree-num-total">{props.resourceTotal}</span>
</div>
</div> </div>
<Tree <Tree
onSelect={onSelect} onSelect={onSelect}

39
src/index.less
View File

@ -58,6 +58,10 @@ code {
margin-left: 8px; margin-left: 8px;
} }
.mr-8 {
margin-right: 8px;
}
.mt-10 { .mt-10 {
margin-top: 10px; margin-top: 10px;
} }
@ -450,6 +454,10 @@ textarea.ant-input {
} }
.ant-tree-title { .ant-tree-title {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.iconfont { .iconfont {
color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.2);
cursor: pointer; cursor: pointer;
@ -463,20 +471,6 @@ textarea.ant-input {
padding-left: 4px; padding-left: 4px;
position: relative; position: relative;
} }
.ant-tree-switcher_open::before,
.ant-tree-switcher_close::before {
z-index: 100;
content: "";
position: absolute;
right: -200px;
top: 0;
left: 0;
bottom: 0;
}
.ant-tree-switcher_open::after,
.ant-tree-switcher_close::after {
z-index: 0;
}
.ant-modal-confirm-btns > .ant-btn-default:hover { .ant-modal-confirm-btns > .ant-btn-default:hover {
color: #ff4d4f !important; color: #ff4d4f !important;
@ -504,7 +498,24 @@ textarea.ant-input {
} }
.tree-num { .tree-num {
width: auto;
display: block;
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
margin-right: 4px;
}
.tree-num-total {
width: auto;
display: block;
color: rgba(0, 0, 0, 0.45);
margin-right: 8px;
}
.tree-title-elli {
max-width:100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.ant-tabs { .ant-tabs {