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
+8
View File
@@ -0,0 +1,8 @@
{
"recommendations": [
"ms-python.vscode-pylance",
"1yib.rust-bundle",
"rust-lang.rust-analyzer",
"vue.volar"
]
}
+4
View File
@@ -1,6 +1,10 @@
<!-- markdownlint-disable-file MD004 MD024 MD034 MD036 --> <!-- markdownlint-disable-file MD004 MD024 MD034 MD036 -->
# CHANGE LOG # CHANGE LOG
## main(v0.7.4)
- feat: UI 列表页面增加最小宽度
## v0.7.3 ## v0.7.3
- feat: worker 增加 `ADDRESS_CHECK_REGEX`, address name 的正则表达式, 只用于检查,符合条件将通过检查 - feat: worker 增加 `ADDRESS_CHECK_REGEX`, address name 的正则表达式, 只用于检查,符合条件将通过检查
-3
View File
@@ -1,3 +0,0 @@
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "cloudflare_temp_email", "name": "cloudflare_temp_email",
"version": "0.7.3", "version": "0.7.4",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
+5 -5
View File
@@ -117,7 +117,7 @@ onMounted(async () => {
</n-modal> </n-modal>
<n-tabs v-if="showAdminPage" type="card" v-model:value="adminTab" :placement="globalTabplacement"> <n-tabs v-if="showAdminPage" type="card" v-model:value="adminTab" :placement="globalTabplacement">
<n-tab-pane name="qucickSetup" :tab="t('qucickSetup')"> <n-tab-pane name="qucickSetup" :tab="t('qucickSetup')">
<n-tabs type="bar" animated> <n-tabs type="bar" justify-content="center" animated>
<n-tab-pane name="account_settings" :tab="t('account_settings')"> <n-tab-pane name="account_settings" :tab="t('account_settings')">
<AccountSettings /> <AccountSettings />
</n-tab-pane> </n-tab-pane>
@@ -130,7 +130,7 @@ onMounted(async () => {
</n-tabs> </n-tabs>
</n-tab-pane> </n-tab-pane>
<n-tab-pane name="account" :tab="t('account')"> <n-tab-pane name="account" :tab="t('account')">
<n-tabs type="bar" animated> <n-tabs type="bar" justify-content="center" animated>
<n-tab-pane name="account" :tab="t('account')"> <n-tab-pane name="account" :tab="t('account')">
<Account /> <Account />
</n-tab-pane> </n-tab-pane>
@@ -149,7 +149,7 @@ onMounted(async () => {
</n-tabs> </n-tabs>
</n-tab-pane> </n-tab-pane>
<n-tab-pane name="user" :tab="t('user')"> <n-tab-pane name="user" :tab="t('user')">
<n-tabs type="bar" animated> <n-tabs type="bar" justify-content="center" animated>
<n-tab-pane name="user_management" :tab="t('user_management')"> <n-tab-pane name="user_management" :tab="t('user_management')">
<UserManagement /> <UserManagement />
</n-tab-pane> </n-tab-pane>
@@ -162,7 +162,7 @@ onMounted(async () => {
</n-tabs> </n-tabs>
</n-tab-pane> </n-tab-pane>
<n-tab-pane name="mails" :tab="t('mails')"> <n-tab-pane name="mails" :tab="t('mails')">
<n-tabs type="bar" animated> <n-tabs type="bar" justify-content="center" animated>
<n-tab-pane name="mails" :tab="t('mails')"> <n-tab-pane name="mails" :tab="t('mails')">
<Mails /> <Mails />
</n-tab-pane> </n-tab-pane>
@@ -184,7 +184,7 @@ onMounted(async () => {
<Statistics /> <Statistics />
</n-tab-pane> </n-tab-pane>
<n-tab-pane name="maintenance" :tab="t('maintenance')"> <n-tab-pane name="maintenance" :tab="t('maintenance')">
<n-tabs type="bar" animated> <n-tabs type="bar" justify-content="center" animated>
<n-tab-pane name="workerconfig" :tab="t('workerconfig')"> <n-tab-pane name="workerconfig" :tab="t('workerconfig')">
<WorkerConfig /> <WorkerConfig />
</n-tab-pane> </n-tab-pane>
+14 -8
View File
@@ -286,15 +286,17 @@ onMounted(async () => {
{{ t('query') }} {{ t('query') }}
</n-button> </n-button>
</n-input-group> </n-input-group>
<div style="display: inline-block;"> <div style="overflow: auto;">
<n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" <div style="display: inline-block;">
:page-sizes="[20, 50, 100]" show-size-picker> <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
<template #prefix="{ itemCount }"> :page-sizes="[20, 50, 100]" show-size-picker>
{{ t('itemCount') }}: {{ itemCount }} <template #prefix="{ itemCount }">
</template> {{ t('itemCount') }}: {{ itemCount }}
</n-pagination> </template>
</n-pagination>
</div>
<n-data-table :columns="columns" :data="data" :bordered="false" embedded />
</div> </div>
<n-data-table :columns="columns" :data="data" :bordered="false" embedded />
</div> </div>
</template> </template>
@@ -303,4 +305,8 @@ onMounted(async () => {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.n-data-table {
min-width: 1000px;
}
</style> </style>
+14 -8
View File
@@ -198,15 +198,17 @@ onMounted(async () => {
{{ t('query') }} {{ t('query') }}
</n-button> </n-button>
</n-input-group> </n-input-group>
<div style="display: inline-block;"> <div style="overflow: auto;">
<n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" :page-sizes="[20, 50, 100]" <div style="display: inline-block;">
show-size-picker> <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" :page-sizes="[20, 50, 100]"
<template #prefix="{ itemCount }"> show-size-picker>
{{ t('itemCount') }}: {{ itemCount }} <template #prefix="{ itemCount }">
</template> {{ t('itemCount') }}: {{ itemCount }}
</n-pagination> </template>
</n-pagination>
</div>
<n-data-table :columns="columns" :data="data" :bordered="false" embedded />
</div> </div>
<n-data-table :columns="columns" :data="data" :bordered="false" embedded />
</div> </div>
</template> </template>
@@ -215,4 +217,8 @@ onMounted(async () => {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.n-data-table {
min-width: 700px;
}
</style> </style>
+20 -14
View File
@@ -368,21 +368,23 @@ onMounted(async () => {
{{ t('query') }} {{ t('query') }}
</n-button> </n-button>
</n-input-group> </n-input-group>
<div style="display: inline-block;"> <div style="overflow: auto;">
<n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" <div style="display: inline-block;">
:page-sizes="[20, 50, 100]" show-size-picker> <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
<template #prefix="{ itemCount }"> :page-sizes="[20, 50, 100]" show-size-picker>
{{ t('itemCount') }}: {{ itemCount }} <template #prefix="{ itemCount }">
</template> {{ t('itemCount') }}: {{ itemCount }}
<template #suffix> </template>
<n-button @click="showCreateUser = true" size="small" tertiary type="primary" <template #suffix>
style="margin-left: 10px"> <n-button @click="showCreateUser = true" size="small" tertiary type="primary"
{{ t('createUser') }} style="margin-left: 10px">
</n-button> {{ t('createUser') }}
</template> </n-button>
</n-pagination> </template>
</n-pagination>
</div>
<n-data-table :columns="columns" :data="data" :bordered="false" embedded />
</div> </div>
<n-data-table :columns="columns" :data="data" :bordered="false" embedded />
</div> </div>
</template> </template>
@@ -391,4 +393,8 @@ onMounted(async () => {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.n-data-table {
min-width: 800px;
}
</style> </style>
+3 -2
View File
@@ -36,6 +36,7 @@ class WebhookSettings {
const webhookSettings = ref(new WebhookSettings([])) const webhookSettings = ref(new WebhookSettings([]))
const webhookEnabled = ref(false) const webhookEnabled = ref(false)
const errorInfo = ref('')
const getSettings = async () => { const getSettings = async () => {
try { try {
@@ -43,7 +44,7 @@ const getSettings = async () => {
Object.assign(webhookSettings.value, res) Object.assign(webhookSettings.value, res)
webhookEnabled.value = true webhookEnabled.value = true
} catch (error) { } catch (error) {
message.error((error as Error).message || "error"); errorInfo.value = (error as Error).message || "error";
} }
} }
@@ -75,7 +76,7 @@ onMounted(async () => {
{{ t('save') }} {{ t('save') }}
</n-button> </n-button>
</n-card> </n-card>
<n-result v-else status="404" :title="t('notEnabled')" /> <n-result v-else status="404" :title="t('notEnabled')" :description="errorInfo" />
</div> </div>
</template> </template>
@@ -164,7 +164,13 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div> <div style="overflow: auto;">
<n-data-table :columns="columns" :data="data" :bordered="false" embedded /> <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
</div> </div>
</template> </template>
<style scoped>
.n-data-table {
min-width: 700px;
}
</style>
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "temp-email-pages", "name": "temp-email-pages",
"version": "0.7.3", "version": "0.7.4",
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"name": "temp-mail-docs", "name": "temp-mail-docs",
"private": true, "private": true,
"version": "0.7.3", "version": "0.7.4",
"type": "module", "type": "module",
"devDependencies": { "devDependencies": {
"@types/node": "^22.3.0", "@types/node": "^22.3.0",
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "cloudflare_temp_email", "name": "cloudflare_temp_email",
"version": "0.7.3", "version": "0.7.4",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
+1 -1
View File
@@ -1,5 +1,5 @@
export const CONSTANTS = { export const CONSTANTS = {
VERSION: 'v0.7.3', VERSION: 'v0.7.4',
// DB settings // DB settings
ADDRESS_BLOCK_LIST_KEY: 'address_block_list', ADDRESS_BLOCK_LIST_KEY: 'address_block_list',