feat: UI add min-width for table page (#428)

This commit is contained in:
Dream Hunter
2024-08-19 22:53:13 +08:00
committed by GitHub
parent 1cf38c1768
commit 4c6fd3c2af
14 changed files with 80 additions and 46 deletions

View File

@@ -286,15 +286,17 @@ onMounted(async () => {
{{ t('query') }}
</n-button>
</n-input-group>
<div style="display: inline-block;">
<n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
:page-sizes="[20, 50, 100]" show-size-picker>
<template #prefix="{ itemCount }">
{{ t('itemCount') }}: {{ itemCount }}
</template>
</n-pagination>
<div style="overflow: auto;">
<div style="display: inline-block;">
<n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
:page-sizes="[20, 50, 100]" show-size-picker>
<template #prefix="{ itemCount }">
{{ t('itemCount') }}: {{ itemCount }}
</template>
</n-pagination>
</div>
<n-data-table :columns="columns" :data="data" :bordered="false" embedded />
</div>
<n-data-table :columns="columns" :data="data" :bordered="false" embedded />
</div>
</template>
@@ -303,4 +305,8 @@ onMounted(async () => {
margin-top: 10px;
margin-bottom: 10px;
}
.n-data-table {
min-width: 1000px;
}
</style>

View File

@@ -198,15 +198,17 @@ onMounted(async () => {
{{ t('query') }}
</n-button>
</n-input-group>
<div style="display: inline-block;">
<n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" :page-sizes="[20, 50, 100]"
show-size-picker>
<template #prefix="{ itemCount }">
{{ t('itemCount') }}: {{ itemCount }}
</template>
</n-pagination>
<div style="overflow: auto;">
<div style="display: inline-block;">
<n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" :page-sizes="[20, 50, 100]"
show-size-picker>
<template #prefix="{ itemCount }">
{{ t('itemCount') }}: {{ itemCount }}
</template>
</n-pagination>
</div>
<n-data-table :columns="columns" :data="data" :bordered="false" embedded />
</div>
<n-data-table :columns="columns" :data="data" :bordered="false" embedded />
</div>
</template>
@@ -215,4 +217,8 @@ onMounted(async () => {
margin-top: 10px;
margin-bottom: 10px;
}
.n-data-table {
min-width: 700px;
}
</style>

View File

@@ -368,21 +368,23 @@ onMounted(async () => {
{{ t('query') }}
</n-button>
</n-input-group>
<div style="display: inline-block;">
<n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
:page-sizes="[20, 50, 100]" show-size-picker>
<template #prefix="{ itemCount }">
{{ t('itemCount') }}: {{ itemCount }}
</template>
<template #suffix>
<n-button @click="showCreateUser = true" size="small" tertiary type="primary"
style="margin-left: 10px">
{{ t('createUser') }}
</n-button>
</template>
</n-pagination>
<div style="overflow: auto;">
<div style="display: inline-block;">
<n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
:page-sizes="[20, 50, 100]" show-size-picker>
<template #prefix="{ itemCount }">
{{ t('itemCount') }}: {{ itemCount }}
</template>
<template #suffix>
<n-button @click="showCreateUser = true" size="small" tertiary type="primary"
style="margin-left: 10px">
{{ t('createUser') }}
</n-button>
</template>
</n-pagination>
</div>
<n-data-table :columns="columns" :data="data" :bordered="false" embedded />
</div>
<n-data-table :columns="columns" :data="data" :bordered="false" embedded />
</div>
</template>
@@ -391,4 +393,8 @@ onMounted(async () => {
margin-top: 10px;
margin-bottom: 10px;
}
.n-data-table {
min-width: 800px;
}
</style>

View File

@@ -36,6 +36,7 @@ class WebhookSettings {
const webhookSettings = ref(new WebhookSettings([]))
const webhookEnabled = ref(false)
const errorInfo = ref('')
const getSettings = async () => {
try {
@@ -43,7 +44,7 @@ const getSettings = async () => {
Object.assign(webhookSettings.value, res)
webhookEnabled.value = true
} catch (error) {
message.error((error as Error).message || "error");
errorInfo.value = (error as Error).message || "error";
}
}
@@ -75,7 +76,7 @@ onMounted(async () => {
{{ t('save') }}
</n-button>
</n-card>
<n-result v-else status="404" :title="t('notEnabled')" />
<n-result v-else status="404" :title="t('notEnabled')" :description="errorInfo" />
</div>
</template>