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"; import { onMounted } from "vue";
const osThemeRef = useOsTheme() const osThemeRef = useOsTheme()
const theme = defineModel<GlobalTheme>('theme') const theme = osThemeRef.value === 'dark' ? darkTheme : lightTheme
theme.value = osThemeRef.value === 'dark' ? darkTheme : lightTheme const locale = navigator.language === "zh-CN" ? zhCN : enUS
const dateLocale = navigator.language === "zh-CN" ? dateZhCN : dateEnUS
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
onMounted(() => { onMounted(() => {
document.title = 'reCoreD-UI' document.title = 'reCoreD-UI'

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

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

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

@ -1,6 +1,6 @@
<template> <template>
<NModal :mask-closable="false" :show="show"> <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> <template #header>
<NIcon class="icon-down" color="red"> <NIcon class="icon-down" color="red">
<QuestionCircle /> <QuestionCircle />
@ -48,11 +48,12 @@ import { Times, TrashAlt, QuestionCircle } from '@vicons/fa';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { getErrorInfo } from '@/apis/api'; import { getErrorInfo } from '@/apis/api';
import { ref } from 'vue';
const { t } = useI18n() const { t } = useI18n()
const show = defineModel<boolean>('show', { default: false }) const show = defineModel<boolean>('show', { default: false })
const domain_name = defineModel<string>('domain_name') const domain_name = ref<string>('')
const loading = defineModel<boolean>('loading', { default: false }) const loading = ref<boolean>(false)
const domainStore = useDomainStore() const domainStore = useDomainStore()
const notification = useNotification() const notification = useNotification()

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

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

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

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