1

web/src/App.vue

@@ -13,14 +13,9 @@ import { RouterView } from "vue-router";
 import { onMounted } from "vue";
 
 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(() => {
   document.title = 'reCoreD-UI'

web/src/components/domains/DomainEditModal.vue

@@ -1,43 +1,50 @@
 <template>
-    <NModal :mask-closable="false" preset="card" style="width: 600px" role="dialog" aria-modal="true" :show="show">
+    <NModal :mask-closable="false" :show="show">
+        <NCard style="width: 640px" role="dialog" aria-modal="true">
             <template #header>
-            <span v-if="!domain || domain.id < 1">{{ t('common.new') }}</span><span v-else>{{ t('common.edit') }}</span><span>{{
+                <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" />
+                    <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" />
+                    <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" />
+                    <NInput placeholder="admin@example.com" v-model:value="domain.admin_email" @keydown.enter.prevent />
                 </NFormItem>
-            <NFormItem :label="t('records.refesh')" path="refresh_interval">
+            </NForm>
-                <NInputNumber v-model:value="domain?.refresh_interval">
+            <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">
+                    <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">
+                    <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">
+                    <NInputNumber v-model:value="domain.negative_ttl" :show-button="false">
                         <template #suffix>
                             {{ t('domains.form.unitForSecond') }}
                         </template>
@@ -67,23 +74,30 @@
                     </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 loading = ref(false)
-const rules = defineModel<FormRules>('rules')
+const invalidData = ref(false)
-rules.value = {
+const rules = {
-    domain_name: {
+    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'
+        type: 'number',
-    },
+    }],
-    retry_interval: {
+    retry_interval: [{
         required: true,
         trigger: 'blur',
-        type: 'number'
+        type: 'number',
-    },
+    }],
-    expiry_period: {
+    expiry_period: [{
         required: true,
         trigger: 'blur',
-        type: 'number'
+        type: 'number',
-    },
+    }],
-    negative_ttl: {
+    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) {
+function validate(value: string, reg: RegExp, msg: string): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
         invalidData.value = true
         if (!value) {
-        return new Error(t('common.mandatory'))
+            reject(Error(t('common.mandatory')))
         } else if (!reg.test(value)) {
-        return new Error(t(msg))
+            reject(Error(t(msg)))
-    }
+        } else {
             invalidData.value = false
-    return true
+            resolve()
+        }
+    })
 }
 
 function easyInput(domain: string) {
     props.domain.admin_email = `admin@${domain}`
     props.domain.main_dns = `ns1.${domain}`
+
+    console.log(props.domain)
 }
 </script>

web/src/components/domains/DomainRemoveModal.vue

@@ -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 domain_name = ref<string>('')
-const loading = defineModel<boolean>('loading', { default: false })
+const loading = ref<boolean>(false)
 const domainStore = useDomainStore()
 const notification = useNotification()
 

web/src/views/DomainsView.vue

@@ -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 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(() => {
     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>

web/src/views/RecordsView.vue

@@ -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()