senset/reCoreD-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
Sense T 2024-04-09 00:18:18 +08:00
parent e72de14797
commit 1a7bf83cb9
5 changed files with 154 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/App.vue
View File

@ -13,14 +13,9 @@ import { RouterView } from "vue-router";
import { onMounted } from "vue";
const osThemeRef = useOsTheme()
const theme = defineModel<GlobalTheme>('theme')
theme.value = osThemeRef.value === 'dark' ? darkTheme : lightTheme
const locale = defineModel<NLocale>('locale')
locale.value = navigator.language === "zh-CN" ? zhCN : enUS
const dateLocale = defineModel<NDateLocale>('dateLocale')
dateLocale.value = navigator.language === "zh-CN" ? dateZhCN : dateEnUS
const theme = osThemeRef.value === 'dark' ? darkTheme : lightTheme
const locale = navigator.language === "zh-CN" ? zhCN : enUS
const dateLocale = navigator.language === "zh-CN" ? dateZhCN : dateEnUS
onMounted(() => {
document.title = 'reCoreD-UI'

225
web/src/components/domains/DomainEditModal.vue
View File

@ -1,89 +1,103 @@
<template>
<NModal :mask-closable="false" preset="card" style="width: 600px" role="dialog" aria-modal="true" :show="show">
<template #header>
<span v-if="!domain || domain.id < 1">{{ t('common.new') }}</span><span v-else>{{ t('common.edit') }}</span><span>{{
t('domains._') }}</span>
</template>
<NModal :mask-closable="false" :show="show">
<NCard style="width: 640px" role="dialog" aria-modal="true">
<template #header>
<span v-if="!domain || !domain.id || domain.id < 1">{{ t('common.new') }}</span><span v-else>{{
t('common.edit')
}}</span><span>{{
t('domains._') }}</span>
</template>
<template #header-extra></template>
<NForm :model="domain" :rules="rules">
<NFormItem :label="t('domains._')" path="domain_name">
<NInput placeholder="example.com" v-model:value="domain?.domain_name" @update:value="easyInput" />
</NFormItem>
<NFormItem :label="t('domains.form.mainDNS')" path="main_dns">
<NInput placeholder="ns1.example.com" v-model:value="domain?.main_dns" />
</NFormItem>
<NFormItem :label="t('domains.form.adminMail')" path="admin_email">
<NInput placeholder="admin@example.com" v-model:value="domain?.admin_email" />
</NFormItem>
<NFormItem :label="t('records.refesh')" path="refresh_interval">
<NInputNumber v-model:value="domain?.refresh_interval">
<template #suffix>
{{ t('domains.form.unitForSecond') }}
</template>
</NInputNumber>
</NFormItem>
<NFormItem :label="t('records.retry')" path="retry_interval">
<NInputNumber v-model:value="domain?.retry_interval">
<template #suffix>
{{ t('domains.form.unitForSecond') }}
</template>
</NInputNumber>
</NFormItem>
<NFormItem :label="t('records.expire')" path="expiry_period">
<NInputNumber v-model:value="domain?.expiry_period">
<template #suffix>
{{ t('domains.form.unitForSecond') }}
</template>
</NInputNumber>
</NFormItem>
<NFormItem :label="t('records.ttl')" path="negative_ttl">
<NInputNumber v-model:value="domain?.negative_ttl">
<template #suffix>
{{ t('domains.form.unitForSecond') }}
</template>
</NInputNumber>
</NFormItem>
</NForm>
<NForm :model="domain" :rules="rules">
<NFormItem :label="t('domains._')" path="domain_name">
<NInput placeholder="example.com" v-model:value="domain.domain_name" @input="easyInput"
@keydown.enter.prevent />
</NFormItem>
<NFormItem :label="t('domains.form.mainDNS')" path="main_dns">
<NInput placeholder="ns1.example.com" v-model:value="domain.main_dns" @keydown.enter.prevent />
</NFormItem>
<NFormItem :label="t('domains.form.adminMail')" path="admin_email">
<NInput placeholder="admin@example.com" v-model:value="domain.admin_email" @keydown.enter.prevent />
</NFormItem>
</NForm>
<NForm :model="domain" :rules="rules" inline>
<NFormItem :label="t('records.refresh')" path="refresh_interval">
<NInputNumber v-model:value="domain.refresh_interval" :show-button="false">
<template #suffix>
{{ t('domains.form.unitForSecond') }}
</template>
</NInputNumber>
</NFormItem>
<NFormItem :label="t('records.retry')" path="retry_interval">
<NInputNumber v-model:value="domain.retry_interval" :show-button="false">
<template #suffix>
{{ t('domains.form.unitForSecond') }}
</template>
</NInputNumber>
</NFormItem>
<NFormItem :label="t('records.expire')" path="expiry_period">
<NInputNumber v-model:value="domain.expiry_period" :show-button="false">
<template #suffix>
{{ t('domains.form.unitForSecond') }}
</template>
</NInputNumber>
</NFormItem>
<NFormItem :label="t('records.ttl')" path="negative_ttl">
<NInputNumber v-model:value="domain.negative_ttl" :show-button="false">
<template #suffix>
{{ t('domains.form.unitForSecond') }}
</template>
</NInputNumber>
</NFormItem>
</NForm>
<template #action>
<NFlex justify="end">
<NButton size="small" @click="show = false">
<template #icon>
<NIcon>
<Times />
</NIcon>
</template>
{{ t('common.cancel') }}
</NButton>
<NSpin :show="loading">
<NButton size="small" type="primary" :disabled="loading || invalidData" @click="confirm">
<template #action>
<NFlex justify="end">
<NButton size="small" @click="show = false">
<template #icon>
<NIcon>
<Check />
<Times />
</NIcon>
</template>
{{ t('common.confirm') }}
{{ t('common.cancel') }}
</NButton>
</NSpin>
</NFlex>
</template>
<NSpin :show="loading">
<NButton size="small" type="primary" :disabled="loading || invalidData" @click="confirm">
<template #icon>
<NIcon>
<Check />
</NIcon>
</template>
{{ t('common.confirm') }}
</NButton>
</NSpin>
</NFlex>
</template>
</NCard>
</NModal>
</template>
<script setup lang="ts">
import { getErrorInfo } from '@/apis/api';
import { useDomainStore, type Domain } from '@/stores/domains';
import { Check, Times } from '@vicons/fa';
import {
NModal,
NCard,
NForm,
NFormItem,
NFlex,
NIcon,
NButton,
NInput,
NInputNumber,
NSpin,
useNotification,
type FormRules,
type FormItemRule
} from 'naive-ui'
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n()
@ -92,85 +106,102 @@ const props = defineProps<{
}>()
const show = defineModel<boolean>('show', { default: false })
const loading = defineModel<boolean>('loading', { default: false })
const invalidData = defineModel<boolean>('invalidData', { default: false })
const rules = defineModel<FormRules>('rules')
rules.value = {
domain_name: {
const loading = ref(false)
const invalidData = ref(false)
const rules = {
domain_name: [{
required: true,
trigger: 'blur',
validator(_rule: FormItemRule, value: string) {
validator: (_rule: FormItemRule, value: string) => {
return validate(
value,
/([\w-]+\.)+[\w-]+/,
'domains.errors.domainName'
)
}
},
main_dns: {
}],
main_dns: [{
required: true,
trigger: 'blur',
validator(_rule: FormItemRule, value: string) {
validator: (_rule: FormItemRule, value: string) => {
return validate(
value,
/([\w-]+\.)+[\w-]+/,
'domains.errors.domainName'
)
}
},
admin_email: {
}],
admin_email: [{
required: true,
trigger: 'blur',
validator(_rule: FormItemRule, value: string) {
validator: (_rule: FormItemRule, value: string) => {
return validate(
value,
/[\w-.]+@([\w-]+\.)+[\w-]+/,
'domains.errors.mail'
)
}
},
refresh_interval: {
}],
refresh_interval: [{
required: true,
trigger: 'blur',
type: 'number'
},
retry_interval: {
type: 'number',
}],
retry_interval: [{
required: true,
trigger: 'blur',
type: 'number'
},
expiry_period: {
type: 'number',
}],
expiry_period: [{
required: true,
trigger: 'blur',
type: 'number'
},
negative_ttl: {
type: 'number',
}],
negative_ttl: [{
required: true,
trigger: 'blur',
type: 'number'
}
}
}]
} as FormRules
const domainStore = useDomainStore()
const notification = useNotification()
async function confirm() {
loading.value = true;
try {
if (!props.domain.id || props.domain.id < 1) {
await domainStore.addDomain(props.domain)
} else {
await domainStore.updateDomain(props.domain)
}
show.value = false
} catch (e) {
const msg = getErrorInfo(e)
notification.error(msg)
}
loading.value = false
}
function validate(value: string, reg: RegExp, msg: string) {
invalidData.value = true
if (!value) {
return new Error(t('common.mandatory'))
} else if (!reg.test(value)) {
return new Error(t(msg))
}
invalidData.value = false
return true
function validate(value: string, reg: RegExp, msg: string): Promise<void> {
return new Promise<void>((resolve, reject) => {
invalidData.value = true
if (!value) {
reject(Error(t('common.mandatory')))
} else if (!reg.test(value)) {
reject(Error(t(msg)))
} else {
invalidData.value = false
resolve()
}
})
}
function easyInput(domain: string) {
props.domain.admin_email = `admin@${domain}`
props.domain.main_dns = `ns1.${domain}`
console.log(props.domain)
}
</script>

7
web/src/components/domains/DomainRemoveModal.vue
View File

@ -1,6 +1,6 @@
<template>
<NModal :mask-closable="false" :show="show">
<NCard size="huge" role="dialog" aria-modal="true" style="width: 600px">
<NCard role="dialog" aria-modal="true" style="width: 600px">
<template #header>
<NIcon class="icon-down" color="red">
<QuestionCircle />
@ -48,11 +48,12 @@ import { Times, TrashAlt, QuestionCircle } from '@vicons/fa';
import { useI18n } from 'vue-i18n';
import { getErrorInfo } from '@/apis/api';
import { ref } from 'vue';
const { t } = useI18n()
const show = defineModel<boolean>('show', { default: false })
const domain_name = defineModel<string>('domain_name')
const loading = defineModel<boolean>('loading', { default: false })
const domain_name = ref<string>('')
const loading = ref<boolean>(false)
const domainStore = useDomainStore()
const notification = useNotification()

18
web/src/views/DomainsView.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { NSpin, NFlex, NCard, NButton, NIcon, useNotification, NModalProvider } from 'naive-ui'
import { PlusSquare } from "@vicons/fa"
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { type Domain, useDomainStore } from '@/stores/domains'
import { getErrorInfo } from '@/apis/api'
import DomainInfo from '@/components/domains/DomainInfo.vue'
@ -12,10 +12,10 @@ import DomainEditModal from '@/components/domains/DomainEditModal.vue'
const domainStore = useDomainStore()
const notification = useNotification()
const loading = defineModel<boolean>('loading', { default: true });
const removeModalShow = defineModel<boolean>('removeModalShow', { default: false })
const editModalShow = defineModel<boolean>('editModalShow', { default: false })
const operationDomain = defineModel<Domain>('operationDomain', { default: {} as Domain })
const loading = ref(true);
const removeModalShow = ref(false);
const editModalShow = ref(false);
const operationDomain = ref({} as Domain)
onMounted(() => {
try {
@ -38,7 +38,13 @@ function showEditModal(domain: Domain) {
}
function addDomain() {
const domain = {} as Domain
const domain = {
refresh_interval: 86400,
retry_interval: 7200,
expiry_period: 3600000,
negative_ttl: 86400,
serial_number: 1,
} as Domain
showEditModal(domain)
}
</script>

14
web/src/views/RecordsView.vue
View File

@ -1,7 +1,7 @@
<script setup lang="tsx">
import {
NSpin, NPageHeader, useNotification,
NFlex, NButton, NIcon, NGrid, NGi,
NFlex, NButton, NIcon, NGrid, NGi,
NStatistic, NDataTable, NInput,
NModalProvider
} from 'naive-ui'
@ -18,12 +18,8 @@ const { t } = useI18n()
const props = defineProps<{
domain: string
}>()
const loading = defineModel<boolean>('loading', { default: true });
const records = defineModel<Record[]>('records');
const soa = defineModel<SOARecord | undefined>('soa')
const columns = defineModel<DataTableColumns<Record>>('columns')
columns.value = [
const columns = [
{
key: 'no',
title: '#',
@ -56,10 +52,14 @@ columns.value = [
return <RecordOps record={row} />
}
}
]
] as DataTableColumns<Record>
const recordStore = useRecordStore()
const notification = useNotification()
const records = ref<Record[] | undefined>([]);
const soa = ref<SOARecord>({} as SOARecord)
const loading = ref(true);
onMounted(() => {
try {
refreshRecords()