Skip to content

Commit 4ee2327

Browse files
BlankllBlankll
authored
refactor: use fullscreen for table (#200)
refactor: use fullscreen for table Refs: #185 --------- Signed-off-by: seven <[email protected]>
1 parent 70539b6 commit 4ee2327

File tree

2 files changed

+280
-135
lines changed

2 files changed

+280
-135
lines changed

‎src/views/manage/components/index-manage.vue‎

Lines changed: 112 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,72 @@
11
<template>
2-
<main>
3-
<n-tabs type="segment" animated @update:value="refresh">
4-
<n-tab-pane name="indices" tab="INDICES">
5-
<n-data-table
6-
:columns="indexTable.columns as any"
7-
:data="indexTable.data"
8-
:bordered="false"
9-
max-height="400"
10-
/>
11-
</n-tab-pane>
12-
<n-tab-pane name="templates" tab="TEMPLATES">
13-
<n-data-table
14-
:columns="templateTable.columns as any"
15-
:data="templateTable.data"
16-
:bordered="false"
17-
max-height="400"
18-
/>
19-
</n-tab-pane>
20-
<template #suffix>
21-
<div class="tab-action-group">
22-
<n-button type="default" tertiary @click="handleRefresh">
23-
<template #icon>
24-
<n-icon>
25-
<Renew />
26-
</n-icon>
27-
</template>
28-
Refresh
29-
</n-button>
30-
<n-button secondary type="success" @click="toggleModal('index')">
31-
<template #icon>
32-
<n-icon>
33-
<Add />
34-
</n-icon>
35-
</template>
36-
New Index
37-
</n-button>
38-
<n-button secondary type="success" @click="toggleModal('alias')">
39-
<template #icon>
40-
<n-icon>
41-
<Add />
42-
</n-icon>
43-
</template>
44-
New Alias
45-
</n-button>
46-
<n-button secondary type="success" @click="toggleModal('template')">
47-
<template #icon>
48-
<n-icon>
49-
<Add />
50-
</n-icon>
51-
</template>
52-
New Template
53-
</n-button>
2+
<n-tabs type="segment" animated @update:value="refresh" class="tabs-container">
3+
<n-tab-pane name="indices" tab="INDICES" class="tabs-tab-pane-container">
4+
<div class="table-container">
5+
<div class="table-scroll-container">
6+
<n-infinite-scroll style="height: 100%">
7+
<n-data-table
8+
:columns="indexTable.columns as any"
9+
:data="indexTable.data"
10+
:bordered="false"
11+
/>
12+
</n-infinite-scroll>
5413
</div>
55-
</template>
56-
</n-tabs>
57-
<index-dialog ref="indexDialogRef" />
58-
<alias-dialog ref="aliasDialogRef" />
59-
<template-dialog ref="templateDialogRef" />
60-
<switch-alias-dialog ref="switchAliasDialogRef" />
61-
</main>
14+
</div>
15+
</n-tab-pane>
16+
<n-tab-pane name="templates" tab="TEMPLATES" class="tabs-tab-pane-container">
17+
<div class="table-container">
18+
<div class="table-scroll-container">
19+
<n-infinite-scroll style="height: 100%">
20+
<n-data-table
21+
:columns="templateTable.columns as any"
22+
:data="templateTable.data"
23+
:bordered="false"
24+
/>
25+
</n-infinite-scroll>
26+
</div>
27+
</div>
28+
</n-tab-pane>
29+
<template #suffix>
30+
<div class="tab-action-group">
31+
<n-button type="default" tertiary @click="handleRefresh">
32+
<template #icon>
33+
<n-icon>
34+
<Renew />
35+
</n-icon>
36+
</template>
37+
Refresh
38+
</n-button>
39+
<n-button secondary type="success" @click="toggleModal('index')">
40+
<template #icon>
41+
<n-icon>
42+
<Add />
43+
</n-icon>
44+
</template>
45+
New Index
46+
</n-button>
47+
<n-button secondary type="success" @click="toggleModal('alias')">
48+
<template #icon>
49+
<n-icon>
50+
<Add />
51+
</n-icon>
52+
</template>
53+
New Alias
54+
</n-button>
55+
<n-button secondary type="success" @click="toggleModal('template')">
56+
<template #icon>
57+
<n-icon>
58+
<Add />
59+
</n-icon>
60+
</template>
61+
New Template
62+
</n-button>
63+
</div>
64+
</template>
65+
</n-tabs>
66+
<index-dialog ref="indexDialogRef" />
67+
<alias-dialog ref="aliasDialogRef" />
68+
<template-dialog ref="templateDialogRef" />
69+
<switch-alias-dialog ref="switchAliasDialogRef" />
6270
</template>
6371

6472
<script setup lang="ts">
@@ -459,9 +467,50 @@ onMounted(async () => {
459467
</script>
460468

461469
<style lang="scss" scoped>
462-
.tab-action-group {
463-
display: flex;
464-
justify-content: space-around;
465-
width: 500px;
470+
.tabs-container {
471+
width: 100%;
472+
height: 100%;
473+
474+
.tabs-tab-pane-container {
475+
width: 100%;
476+
height: 100%;
477+
478+
.table-container {
479+
width: 100%;
480+
height: 100%;
481+
display: flex;
482+
flex-direction: column;
483+
484+
.table-scroll-container {
485+
flex: 1;
486+
height: 0;
487+
}
488+
}
489+
}
490+
491+
.tab-action-group {
492+
display: flex;
493+
justify-content: space-around;
494+
width: 500px;
495+
}
496+
497+
:deep(.n-tabs-wrapper) {
498+
.n-tabs-tab-wrapper {
499+
background-color: var(--bg-color);
500+
501+
.n-tabs-tab--active {
502+
background-color: var(--bg-color-secondary);
503+
}
504+
}
505+
}
506+
507+
:deep(.n-tabs-pane-wrapper) {
508+
width: 100%;
509+
height: 100%;
510+
}
511+
512+
:deep(.n-tab-pane) {
513+
padding: 0;
514+
}
466515
}
467516
</style>

0 commit comments

Comments
 (0)