Skip to content

Commit 03f1d74

Browse files
committed
style(layout): adjust the Tree style and Tab style
1 parent 0b73068 commit 03f1d74

File tree

7 files changed

+114
-16
lines changed

7 files changed

+114
-16
lines changed

src/ThemeOverrides.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,7 @@ export const initialThemeOverrides = (): GlobalThemeOverrides => ({
1111
Dropdown: {},
1212
InternalSelection: {},
1313
InternalSelectMenu: {},
14-
Layout: {}
14+
Layout: {},
15+
Collapse: {},
16+
Tree: {}
1517
});

src/hooks/useTheme.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,20 @@ export const useTheme = () => {
185185
darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
186186
).optionColorActivePending = getCssVariableValue('--el-color-primary-light-2');
187187

188+
// 折叠面板
189+
(darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleTextColor =
190+
'#CCCCCC';
191+
(darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontSize =
192+
'11px';
193+
(darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontWeight =
194+
'700';
195+
(darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).arrowColor =
196+
'#C5C5C5';
197+
198+
// Tree
199+
(darkOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).fontSize = '13px';
200+
(darkOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).nodeTextColor = '#cccccc';
201+
188202
return darkOverrides;
189203
};
190204

src/layouts/components/FileManagement/index.vue

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<n-descriptions label-placement="top" class="tree-wrapper" :title="t('List of Assets')">
44
<n-descriptions-item>
55
<n-collapse arrow-placement="left" :default-expanded-names="['asset-tree']">
6-
<n-collapse-item title="资产树" name="asset-tree">
6+
<n-collapse-item title="资产树" class="collapse-item" name="asset-tree">
77
<template #header-extra>
8-
<n-icon size="16px" :component="CheckboxOutline" />
8+
<!-- <n-icon :size="16" :component="CheckboxOutline" />-->
99
</template>
1010
<n-tree
1111
block-line
@@ -14,18 +14,20 @@
1414
draggable
1515
check-on-click
1616
checkbox-placement="left"
17+
class="tree-item"
1718
:show-line="true"
1819
:pattern="pattern"
1920
:data="testData"
2021
:node-props="nodeProps"
2122
:on-update:expanded-keys="updatePrefixWithExpaned"
2223
/>
2324
</n-collapse-item>
24-
<n-collapse-item title="类型树" name="asset-type">
25+
<n-collapse-item title="类型树" class="collapse-item" name="asset-type">
2526
<n-tree
2627
block-line
2728
:pattern="pattern"
2829
expand-on-click
30+
class="tree-item"
2931
:data="data2"
3032
:node-props="nodeProps"
3133
:on-update:expanded-keys="updatePrefixWithExpaned"
@@ -57,7 +59,7 @@ import { reactive, ref, h, onUnmounted, onMounted } from 'vue';
5759
import { getTreeSource, getTreeDetailById } from '@/API/modules/tree';
5860
import ConnectionDialog from '@/components/ConnectionDialog/index.vue';
5961
import { NIcon, TreeOption, DropdownOption, useDialog, NPopover } from 'naive-ui';
60-
import { Folder, FolderOpenOutline, FileTrayFullOutline, CheckboxOutline } from '@vicons/ionicons5';
62+
import { Folder, FolderOpenOutline, FileTrayFullOutline } from '@vicons/ionicons5';
6163
6264
import type { Tree } from '@/API/interface';
6365
@@ -263,6 +265,36 @@ onUnmounted(() => {
263265

264266
<style scoped lang="scss">
265267
.tree-wrapper {
268+
height: 100%;
266269
overflow: hidden;
270+
:deep(.n-descriptions-header) {
271+
height: 35px;
272+
margin-bottom: unset;
273+
margin-left: 21px;
274+
font-size: 11px;
275+
line-height: 40px;
276+
color: var(--el-aside-tree-text-color);
277+
}
278+
.collapse-item {
279+
margin: 0;
280+
&.n-collapse-item--active {
281+
height: calc(100vh - 94px);
282+
}
283+
:deep(.n-collapse-item__header) {
284+
padding-top: 0;
285+
.n-collapse-item__header-main {
286+
height: 22px;
287+
}
288+
}
289+
:deep(.n-collapse-item__content-wrapper) {
290+
.n-collapse-item__content-inner {
291+
padding-top: 0;
292+
.tree-item .n-tree-node-wrapper {
293+
padding: unset;
294+
line-height: 22px;
295+
}
296+
}
297+
}
298+
}
267299
}
268300
</style>

src/layouts/components/Main/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const systemTips = reactive([
5252
display: flex;
5353
align-items: center;
5454
justify-content: center;
55-
height: calc(100% - 40px);
55+
height: calc(100% - 35px);
5656
min-height: 385px;
5757
background-color: var(--el-main-bg-color);
5858
:deep(.n-layout-scroll-container) {

src/layouts/components/Tab/index.vue

Lines changed: 52 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
<template>
22
<n-layout-header class="header-tab">
33
<n-flex justify="space-between" align="center">
4-
<n-flex ref="el">
4+
<n-flex ref="el" style="gap: 0">
55
<n-flex
66
justify="center"
77
align="center"
88
v-for="item in list"
9-
:key="item.id"
109
class="tab-item"
10+
:key="item.id"
11+
style="padding: 0 5px"
12+
:class="{
13+
'active-tab': item.isActive,
14+
'first-click': item.clickCount === 1,
15+
'second-click': item.clickCount === 2
16+
}"
17+
@click="handleTabClick(item)"
1118
>
1219
{{ item.name }}
1320
</n-flex>
@@ -41,22 +48,29 @@ const el = ref();
4148
const list = reactive([
4249
{
4350
name: 'Joao',
44-
id: 1
51+
id: 1,
52+
clickCount: 0,
53+
isActive: false
4554
},
4655
{
4756
name: 'Jean',
48-
id: 2
57+
id: 2,
58+
clickCount: 0,
59+
isActive: false
4960
},
5061
{
5162
name: 'Johanna',
52-
id: 3
63+
id: 3,
64+
clickCount: 0,
65+
isActive: false
5366
},
5467
{
5568
name: 'Juan',
56-
id: 4
69+
id: 4,
70+
clickCount: 0,
71+
isActive: false
5772
}
5873
]);
59-
6074
// eslint-disable-next-line @typescript-eslint/no-unused-vars
6175
const draggable = useDraggable<UseDraggableReturn>(el, list, {
6276
animation: 150,
@@ -67,17 +81,46 @@ const draggable = useDraggable<UseDraggableReturn>(el, list, {
6781
console.log('update');
6882
}
6983
});
84+
85+
const handleTabClick = (item: { id: number }) => {
86+
list.forEach(tab => {
87+
if (tab.id === item.id) {
88+
tab.clickCount = tab.clickCount < 2 ? tab.clickCount + 1 : 1; // 重置为1时保证重新点击
89+
tab.isActive = true;
90+
} else {
91+
tab.clickCount = 0;
92+
tab.isActive = false;
93+
}
94+
});
95+
};
7096
</script>
7197

7298
<style scoped lang="scss">
7399
.header-tab {
74100
position: relative;
75101
width: 100% !important;
76-
height: 40px;
102+
height: 35px;
77103
background-color: var(--el-main-header-bg-color);
78104
.tab-item {
105+
display: flex;
106+
align-items: center;
107+
justify-content: center;
79108
width: 60px;
80-
height: 40px;
109+
height: 35px;
110+
cursor: pointer;
111+
transition: all 0.3s ease-in-out;
112+
&.first-click {
113+
font-style: italic;
114+
color: #ffffff;
115+
}
116+
&.second-click {
117+
font-style: normal;
118+
color: rgb(255 255 255 / 50%);
119+
}
120+
&.active-tab {
121+
color: #ffffff;
122+
background-color: var(--el-main-bg-color);
123+
}
81124
}
82125
.operation-item {
83126
margin-right: 15px;

src/layouts/index.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@
1414
.n-layout-sider {
1515
background-color: var(--el-aside-tree-bg-color);
1616
border-left: 1px solid var(--el-aside-border-color);
17+
.n-scrollbar .n-scrollbar-container .n-scrollbar-content {
18+
padding: 0 !important;
19+
.file-management {
20+
height: calc(100vh - 35px);
21+
}
22+
}
1723

1824
// 设置折叠状态下 padding 为零,否则侧边 item 图标无法点击
1925
&.n-layout-sider--collapsed .n-layout-sider-scroll-container {

src/styles/theme/aside.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const asideTheme: Record<Theme.ThemeType, { [key: string]: string }> = {
1212
'--el-aside-tree-bg-color': '#252526',
1313
'--el-aside-logo-text-color': '#dadada',
1414
'--el-aside-text-color': '#CCCCCC',
15-
'--el-aside-border-color': '#414243'
15+
'--el-aside-border-color': '#414243',
16+
'--el-aside-tree-text-color': '#bbbbbb'
1617
}
1718
};

0 commit comments

Comments
 (0)