attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 树

Browse Source
This commit is contained in:
wf 2024-07-02 18:55:30 +08:00
parent a640afb6c9
commit 63987a9441
7 changed files with 70 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/svgs/folder-menu.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719849026635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5677" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0m372.363636 0l279.272728 0q372.363636 0 372.363636 372.363636l0 279.272728q0 372.363636-372.363636 372.363636l-279.272728 0q-372.363636 0-372.363636-372.363636l0-279.272728q0-372.363636 372.363636-372.363636Z" fill="#F7A647" p-id="5678"></path><path d="M232.727273 303.872C232.727273 290.327273 243.781818 279.272727 257.326545 279.272727h148.631273c5.620364 0 10.984727 2.292364 14.848 6.283637l50.897455 52.805818c1.186909 1.233455 2.210909 2.594909 3.037091 4.049454h259.874909c31.138909 0 56.657455 25.460364 56.657454 56.610909V688.058182c0 31.150545-25.518545 56.669091-56.657454 56.669091H289.396364C258.245818 744.727273 232.727273 719.208727 232.727273 688.058182V303.872zM726.702545 556.218182h-239.825454a10.216727 10.216727 0 0 0-10.205091 10.205091v25.390545c0 5.620364 4.584727 10.205091 10.205091 10.205091h239.825454a10.216727 10.216727 0 0 0 10.205091-10.205091v-25.390545a10.216727 10.216727 0 0 0-10.205091-10.205091z m-0.058181-87.691637h-239.825455a10.216727 10.216727 0 0 0-10.205091 10.205091h-0.069818v25.390546c0 5.632 4.573091 10.216727 10.205091 10.216727h239.895273a10.216727 10.216727 0 0 0 10.205091-10.216727V478.72a10.216727 10.216727 0 0 0-10.205091-10.205091z" fill="#FFFFFF" p-id="5679"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
src/assets/svgs/folder-open.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719917310599" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13113" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M841.6 238.4c-9.6-9.6-21.6-14.4-33.6-14.4H432L326.4 118.4c-4-4-9.6-8-15.2-10.4-6.4-2.4-12-4-18.4-4H80c-12 0-24.8 4.8-33.6 14.4S32 140 32 152v712c0 12 4.8 24.8 14.4 33.6S68 912 80 912h728c12 0 24.8-4.8 33.6-14.4 9.6-9.6 14.4-21.6 14.4-33.6V272c0-12-4.8-24.8-14.4-33.6z" fill="#FFD766" p-id="13114"></path><path d="M858.4 877.6c-3.2 9.6-8.8 18.4-17.6 24.8-8.8 6.4-18.4 9.6-28.8 9.6H88.8c-14.4 0-28.8-6.4-38.4-19.2s-12-28.8-7.2-42.4l139.2-464c3.2-9.6 8.8-18.4 17.6-24.8 8.8-6.4 18.4-9.6 28.8-9.6h724c14.4 0 28.8 6.4 38.4 19.2 9.6 12.8 12 28.8 7.2 42.4l-140 464z" fill="#FFAC33" p-id="13115"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 935 B

2
src/assets/svgs/folder.svg
View File

@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719849026635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5677" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0m372.363636 0l279.272728 0q372.363636 0 372.363636 372.363636l0 279.272728q0 372.363636-372.363636 372.363636l-279.272728 0q-372.363636 0-372.363636-372.363636l0-279.272728q0-372.363636 372.363636-372.363636Z" fill="#F7A647" p-id="5678"></path><path d="M232.727273 303.872C232.727273 290.327273 243.781818 279.272727 257.326545 279.272727h148.631273c5.620364 0 10.984727 2.292364 14.848 6.283637l50.897455 52.805818c1.186909 1.233455 2.210909 2.594909 3.037091 4.049454h259.874909c31.138909 0 56.657455 25.460364 56.657454 56.610909V688.058182c0 31.150545-25.518545 56.669091-56.657454 56.669091H289.396364C258.245818 744.727273 232.727273 719.208727 232.727273 688.058182V303.872zM726.702545 556.218182h-239.825454a10.216727 10.216727 0 0 0-10.205091 10.205091v25.390545c0 5.620364 4.584727 10.205091 10.205091 10.205091h239.825454a10.216727 10.216727 0 0 0 10.205091-10.205091v-25.390545a10.216727 10.216727 0 0 0-10.205091-10.205091z m-0.058181-87.691637h-239.825455a10.216727 10.216727 0 0 0-10.205091 10.205091h-0.069818v25.390546c0 5.632 4.573091 10.216727 10.205091 10.216727h239.895273a10.216727 10.216727 0 0 0 10.205091-10.216727V478.72a10.216727 10.216727 0 0 0-10.205091-10.205091z" fill="#FFFFFF" p-id="5679"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719917303539" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12770" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M977.6 238.4c-9.6-9.6-21.6-14.4-33.6-14.4H472L366.4 118.4c-4-4-9.6-8-15.2-10.4-6.4-2.4-12-4-18.4-4H80c-12 0-24.8 4.8-33.6 14.4S32 140 32 152v280h960V272c0-12-4.8-24.8-14.4-33.6z" fill="#FFD766" p-id="12771"></path><path d="M944 912H80c-26.4 0-48-21.6-48-48V352h960v512c0 26.4-21.6 48-48 48z" fill="#FFAC33" p-id="12772"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 667 B

1
src/assets/svgs/txt.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719917331788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13284" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M160 32c-12 0-24.8 4.8-33.6 14.4S112 68 112 80v864c0 12 4.8 24.8 14.4 33.6 9.6 9.6 21.6 14.4 33.6 14.4h704c12 0 24.8-4.8 33.6-14.4 9.6-9.6 14.4-21.6 14.4-33.6V304L640 32H160z" fill="#E5E5E5" p-id="13285"></path><path d="M912 304H688c-12 0-24.8-4.8-33.6-14.4-9.6-8.8-14.4-21.6-14.4-33.6V32l272 272z" fill="#CCCCCC" p-id="13286"></path><path d="M264 376h208c13.6 0 24-10.4 24-24s-10.4-24-24-24H264c-13.6 0-24 10.4-24 24s10.4 24 24 24zM264 536h496c13.6 0 24-10.4 24-24s-10.4-24-24-24H264c-13.6 0-24 10.4-24 24s10.4 24 24 24zM760 648H264c-13.6 0-24 10.4-24 24s10.4 24 24 24h496c13.6 0 24-10.4 24-24s-10.4-24-24-24z" fill="#FFFFFF" p-id="13287"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 987 B

2
src/router/route.ts
View File

@ -77,7 +77,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
link: "",
iframe: false,
roles: ["admin"],
svgIcon: "folder"
svgIcon: "folder-menu"
},
children: [
{

2
src/style/global-theme.scss
View File

@ -46,7 +46,7 @@ $color-text-3: var(--color-text-3); // 次要信息 二级字体色
$color-text-4: var(--color-text-4); // 置灰信息
// 背景色
$color-bg-1: var(--color-bg-1); // 整体背景色-可用于main窗口背景
$color-bg-1: var(--color-bg-1); // 整体背景色-可用于main窗口卡片背景
$color-bg-2: var(--color-bg-2); // 一级容器背景
$color-bg-3: var(--color-bg-3); // 二级容器背景
$color-bg-4: var(--color-bg-4); // 三级容器背景

70
src/views/file-management/document-library/document-library.vue
View File

@ -4,7 +4,9 @@
<div class="container-main">
<div class="left-box">
<a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
<div style="height: 4000px; width: 100%; background-color: var(--color-primary-light-4)">Content</div>
<div class="left-tree-box">
<a-tree :data="treeData" :show-line="true"> </a-tree>
</div>
</a-scrollbar>
</div>
<div class="right-box"></div>
@ -13,7 +15,62 @@
</FillPage>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
const treeData = ref([
{
title: "Trunk 1",
key: "0-0",
children: [
{
title: "Trunk 1-0",
key: "0-0-0",
children: [
{ title: "leaf", key: "0-0-0-0" },
{
title: "leaf",
key: "0-0-0-1",
children: [{ title: "leaf", key: "0-0-0-1-0" }]
},
{ title: "leaf", key: "0-0-0-2" }
]
},
{
title: "Trunk 1-1",
key: "0-0-1"
},
{
title: "Trunk 1-2",
key: "0-0-2",
children: [
{ title: "leaf", key: "0-0-2-0" },
{
title: "leaf",
key: "0-0-2-1"
}
]
}
]
},
{
title: "Trunk 2",
key: "0-1"
},
{
title: "Trunk 3",
key: "0-2",
children: [
{
title: "Trunk 3-0",
key: "0-2-0",
children: [
{ title: "leaf", key: "0-2-0-0" },
{ title: "leaf", key: "0-2-0-1" }
]
}
]
}
]);
</script>
<style lang="scss" scoped>
.container {
@ -21,26 +78,27 @@
padding: $padding;
box-sizing: border-box;
overflow: hidden;
box-shadow: $shadow-border-1;
}
.container-main {
height: 100%;
display: flex;
border: 1px solid gold;
overflow: hidden;
.left-box {
width: 300px;
height: 100%;
border: 1px solid red;
background: $color-bg-1;
.scrollbar {
height: 100%;
}
.left-tree-box {
padding: $padding;
}
}
.right-box {
margin-left: $padding;
width: calc(100% - 220px - $padding);
height: 100%;
border: 1px solid cyan;
background: $color-bg-1;
}
}
</style>