diff --git a/web/src/App.vue b/web/src/App.vue
index 5cc4ce0..e19767f 100644
--- a/web/src/App.vue
+++ b/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')
-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'
diff --git a/web/src/components/domains/DomainEditModal.vue b/web/src/components/domains/DomainEditModal.vue
index eb13a4d..bbf728b 100644
--- a/web/src/components/domains/DomainEditModal.vue
+++ b/web/src/components/domains/DomainEditModal.vue
@@ -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>
\ No newline at end of file
diff --git a/web/src/components/domains/DomainRemoveModal.vue b/web/src/components/domains/DomainRemoveModal.vue
index 7420fd3..03d329e 100644
--- a/web/src/components/domains/DomainRemoveModal.vue
+++ b/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 loading = defineModel<boolean>('loading', { default: false })
+const domain_name = ref<string>('')
+const loading = ref<boolean>(false)
 const domainStore = useDomainStore()
 const notification = useNotification()
 
diff --git a/web/src/views/DomainsView.vue b/web/src/views/DomainsView.vue
index 97ea7a6..ac40dce 100644
--- a/web/src/views/DomainsView.vue
+++ b/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 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>
diff --git a/web/src/views/RecordsView.vue b/web/src/views/RecordsView.vue
index cda5fab..f9561fa 100644
--- a/web/src/views/RecordsView.vue
+++ b/web/src/views/RecordsView.vue
@@ -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()