From 36b03843191004fc29b8e7276b9bd8e7ca478d09 Mon Sep 17 00:00:00 2001
From: Sense T <me@sense-t.eu.org>
Date: Mon, 8 Apr 2024 15:02:55 +0800
Subject: [PATCH] delete domain modal done

---
 TODO                                          |   5 +-
 web/src/components/domains/DomainOps.vue      |  22 ++-
 .../components/domains/DomainRemoveModal.vue  |  83 ++++++++-
 web/src/components/icons/IconCommunity.vue    |   7 -
 .../components/icons/IconDocumentation.vue    |   7 -
 web/src/components/icons/IconEcosystem.vue    |   7 -
 web/src/components/icons/IconSupport.vue      |   7 -
 web/src/components/icons/IconTooling.vue      |  19 --
 web/src/locale/en-US.ts                       |   8 +-
 web/src/locale/zh-CN.ts                       |   8 +-
 web/src/views/DomainsView.vue                 |  48 +++--
 web/src/views/HomeView.vue                    |   2 +
 web/src/views/RecordsView.vue                 | 164 +++++++++---------
 13 files changed, 229 insertions(+), 158 deletions(-)
 delete mode 100644 web/src/components/icons/IconCommunity.vue
 delete mode 100644 web/src/components/icons/IconDocumentation.vue
 delete mode 100644 web/src/components/icons/IconEcosystem.vue
 delete mode 100644 web/src/components/icons/IconSupport.vue
 delete mode 100644 web/src/components/icons/IconTooling.vue

diff --git a/TODO b/TODO
index ce82031..57fe64a 100644
--- a/TODO
+++ b/TODO
@@ -1,9 +1,8 @@
 - [x] metrics
 - [] Web UI
-  - [] i18n
+  - [x] i18n
+  - [] modals
 - [] swagger
 - [] Nix Module
 - [] RBAC
 - [] Audit
-
-
diff --git a/web/src/components/domains/DomainOps.vue b/web/src/components/domains/DomainOps.vue
index 9c33d40..bac8022 100644
--- a/web/src/components/domains/DomainOps.vue
+++ b/web/src/components/domains/DomainOps.vue
@@ -9,27 +9,27 @@
                         </template>
                     </NButton>
                 </template>
-                查看/修改记录
+                {{ t('domains.dnsRecord') }}
             </NTooltip>
             <NTooltip trigger="hover">
                 <template #trigger>
                     <NButton size="tiny">
                         <template #icon>
-                            <NIcon :component="EditRegular" />
+                            <NIcon :component="EditRegular" @click="editDomain" />
                         </template>
                     </NButton>
                 </template>
-                修改
+                {{ t('common.edit') }}
             </NTooltip>
             <NTooltip trigger="hover">
                 <template #trigger>
                     <NButton type="error" size="tiny">
                         <template #icon>
-                            <NIcon :component="TrashAlt" />
+                            <NIcon :component="TrashAlt" @click="removeDomain"/>
                         </template>
                     </NButton>
                 </template>
-                删除
+                {{ t('common.delete') }}
             </NTooltip>
         </NFlex>
     </div>
@@ -40,12 +40,24 @@ import { NSpace, NButton, NIcon, NTooltip, NFlex } from 'naive-ui'
 import { TrashAlt, EditRegular, Book } from '@vicons/fa'
 import { type Domain } from "../../stores/domains"
 import router from '@/router';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n()
 
 const props = defineProps<{
     domain: Domain
 }>()
 
+const emit = defineEmits(['remove-domain', 'edit-domain'])
+
 function loadRecord() {
     router.push(`/records/${props.domain.domain_name}`)
 }
+
+function removeDomain() {
+    emit('remove-domain', props.domain)
+}
+
+function editDomain() {
+    emit('edit-domain', 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 b435d7e..54ec209 100644
--- a/web/src/components/domains/DomainRemoveModal.vue
+++ b/web/src/components/domains/DomainRemoveModal.vue
@@ -1,13 +1,88 @@
 <template>
     <NModal :mask-closable="false" :show="show">
-
+        <NCard size="huge" role="dialog" aria-modal="true" style="width: 600px">
+            <template #header>
+                <NIcon class="icon-down" color="red">
+                    <QuestionCircle />
+                </NIcon>
+                {{ t('domains.delete') }} - {{ domain?.domain_name }}
+            </template>
+            <p>{{ t('common.deleteConfirm') }}</p>
+            <p>{{ t('domains.deleteHint') }}</p>
+            <p>{{ t('domains.confirm1') }} <b id="boldit">{{ domain?.domain_name }}</b> {{ t('domains.confirm2') }}</p>
+            <br />
+            <p>
+                <NInput v-model:value="domain_name" :placeholder="domain?.domain_name" />
+            </p>
+            <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="error" :disabled="domain_name !== domain?.domain_name"
+                            @click="confirm">
+                            <template #icon>
+                                <NIcon>
+                                    <TrashAlt />
+                                </NIcon>
+                            </template>
+                            {{ t('common.confirm') }}
+                        </NButton>
+                    </NSpin>
+                </NFlex>
+            </template>
+        </NCard>
     </NModal>
 </template>
 
 <script setup lang="ts">
-import { NModal } from 'naive-ui'
+import { useDomainStore, type Domain } from '@/stores/domains';
+import { NModal, NCard, NFlex, NButton, NIcon, NInput, NSpin, useNotification } from 'naive-ui'
+import { Times, TrashAlt, QuestionCircle } from '@vicons/fa';
+
+import { useI18n } from 'vue-i18n';
+import { getErrorInfo } from '@/apis/api';
+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 domainStore = useDomainStore()
+const notification = useNotification()
 
 const props = defineProps<{
-    show: boolean
+    domain: Domain | undefined
 }>()
-</script>
\ No newline at end of file
+
+async function confirm() {
+    domain_name.value = '';
+    loading.value = true;
+
+    if (props.domain) {
+        try {
+            await domainStore.removeDomain(props.domain)
+            show.value = false;
+        } catch (e) {
+            const msg = getErrorInfo(e)
+            notification.error(msg)
+        }
+    }
+    loading.value = false;
+}
+</script>
+
+<style scoped>
+.icon-down {
+    transform: translateY(2px);
+}
+
+b#boldit {
+    font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/components/icons/IconCommunity.vue b/web/src/components/icons/IconCommunity.vue
deleted file mode 100644
index 2dc8b05..0000000
--- a/web/src/components/icons/IconCommunity.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-    />
-  </svg>
-</template>
diff --git a/web/src/components/icons/IconDocumentation.vue b/web/src/components/icons/IconDocumentation.vue
deleted file mode 100644
index 6d4791c..0000000
--- a/web/src/components/icons/IconDocumentation.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
-    <path
-      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-    />
-  </svg>
-</template>
diff --git a/web/src/components/icons/IconEcosystem.vue b/web/src/components/icons/IconEcosystem.vue
deleted file mode 100644
index c3a4f07..0000000
--- a/web/src/components/icons/IconEcosystem.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
-    <path
-      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-    />
-  </svg>
-</template>
diff --git a/web/src/components/icons/IconSupport.vue b/web/src/components/icons/IconSupport.vue
deleted file mode 100644
index 7452834..0000000
--- a/web/src/components/icons/IconSupport.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-    />
-  </svg>
-</template>
diff --git a/web/src/components/icons/IconTooling.vue b/web/src/components/icons/IconTooling.vue
deleted file mode 100644
index 660598d..0000000
--- a/web/src/components/icons/IconTooling.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--mdi"
-    width="24"
-    height="24"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>
diff --git a/web/src/locale/en-US.ts b/web/src/locale/en-US.ts
index 1eb19b4..4db4748 100644
--- a/web/src/locale/en-US.ts
+++ b/web/src/locale/en-US.ts
@@ -7,6 +7,8 @@ export default {
         edit: 'Edit',
         add: 'New',
         new: 'New',
+        cancel: 'Cancel',
+        confirm: 'OK',
     },
     api: {
         error400: {
@@ -35,7 +37,11 @@ export default {
         }
     },
     domains: {
-        dnsRecord: 'DNS Record'
+        dnsRecord: 'DNS Record',
+        delete: 'Remove Domain',
+        deleteHint: 'All records of this domain will be WIPED!',
+        confirm1: 'Please input',
+        confirm2: 'for comfirmation'
     },
     records: {
         name: 'Record Name',
diff --git a/web/src/locale/zh-CN.ts b/web/src/locale/zh-CN.ts
index 0d27725..ee4b651 100644
--- a/web/src/locale/zh-CN.ts
+++ b/web/src/locale/zh-CN.ts
@@ -7,6 +7,8 @@ export default {
         edit: '修改',
         add: '新增',
         new: '新增',
+        cancel: '取消',
+        confirm: '确定',
     },
     api: {
         error400: {
@@ -35,7 +37,11 @@ export default {
         }
     },
     domains: {
-        dnsRecord: 'DNS 记录'
+        dnsRecord: 'DNS 记录',
+        delete: '删除域名',
+        deleteHint: '该域名所有记录将被删除！',
+        confirm1: '请输入',
+        confirm2: '以确认要删除的域名'
     },
     records: {
         name: '记录名',
diff --git a/web/src/views/DomainsView.vue b/web/src/views/DomainsView.vue
index 527806e..778813a 100644
--- a/web/src/views/DomainsView.vue
+++ b/web/src/views/DomainsView.vue
@@ -1,16 +1,20 @@
 <script setup lang="ts">
-import { NSpin, NFlex, NCard, NButton, NIcon, useNotification } from 'naive-ui'
+import { NSpin, NFlex, NCard, NButton, NIcon, useNotification, NModalProvider } from 'naive-ui'
 import { PlusSquare } from "@vicons/fa"
 import { onMounted } from 'vue'
-import { useDomainStore } from '@/stores/domains'
+import { type Domain, useDomainStore } from '@/stores/domains'
 import { getErrorInfo } from '@/apis/api'
 import DomainInfo from '@/components/domains/DomainInfo.vue'
 import DomainOps from '@/components/domains/DomainOps.vue'
+import DomainRemoveModal from '@/components/domains/DomainRemoveModal.vue'
 
-const loading = defineModel<boolean>({ default: true });
 const domainStore = useDomainStore()
 const notification = useNotification()
 
+const loading = defineModel<boolean>('loading', { default: true });
+const removeModalShow = defineModel<boolean>('removeModalShow', { default: false })
+const operationDomain = defineModel<Domain|undefined>('operationDomain')
+
 onMounted(() => {
     try {
         domainStore.loadDomains()
@@ -20,27 +24,35 @@ onMounted(() => {
         notification.error(msg)
     }
 })
+
+function showRemoveModal(domain: Domain) {
+    operationDomain.value = domain
+    removeModalShow.value = true
+}
 </script>
 
 <template>
     <div>
         <NSpin size="large" v-if="loading" />
-        <NFlex v-else id="domains" vertical>
-            <NCard v-for="domain in domainStore.domains" :title="domain.domain_name" v-bind:key="domain.id" size="large"
-                hoverable>
-                <DomainInfo :domain="domain" />
-                <template #action>
-                    <DomainOps :domain="domain" />
-                </template>
-            </NCard>
-            <NCard hoverable>
-                <NButton block quaternary size="large">
-                    <template #icon>
-                        <NIcon :component="PlusSquare" :depth="5" />
+        <NModalProvider v-else>
+            <NFlex id="domains" vertical>
+                <NCard v-for="domain in domainStore.domains" :title="domain.domain_name" v-bind:key="domain.id"
+                    size="large" hoverable>
+                    <DomainInfo :domain="domain" />
+                    <template #action>
+                        <DomainOps :domain="domain" @remove-domain="showRemoveModal"/>
                     </template>
-                </NButton>
-            </NCard>
-        </NFlex>
+                </NCard>
+                <NCard hoverable>
+                    <NButton block quaternary size="large">
+                        <template #icon>
+                            <NIcon :component="PlusSquare" :depth="5" />
+                        </template>
+                    </NButton>
+                </NCard>
+            </NFlex>
+            <DomainRemoveModal v-model:show="removeModalShow" :domain="operationDomain"/>
+        </NModalProvider>
     </div>
 </template>
 
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index 0b4b0f9..ce5bed3 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -2,3 +2,5 @@
 import router from '@/router';
 router.push("/domains")
 </script>
+
+<template></template>
\ No newline at end of file
diff --git a/web/src/views/RecordsView.vue b/web/src/views/RecordsView.vue
index 9ba6fe7..cda5fab 100644
--- a/web/src/views/RecordsView.vue
+++ b/web/src/views/RecordsView.vue
@@ -1,6 +1,11 @@
 <script setup lang="tsx">
-import { NSpin, NPageHeader, useNotification, NFlex, NButton, NIcon, NGrid, NGi, NStatistic, NDataTable, NInput } from 'naive-ui'
-import type { DataTableColumns, DataTableFilterState } from 'naive-ui'
+import {
+    NSpin, NPageHeader, useNotification,
+    NFlex, NButton, NIcon, NGrid, NGi, 
+    NStatistic, NDataTable, NInput,
+    NModalProvider
+} from 'naive-ui'
+import type { DataTableColumns } from 'naive-ui'
 import { onMounted, ref } from 'vue'
 import { useRecordStore, type Record, type SOARecord, RecordTypes } from '@/stores/records'
 import { getErrorInfo } from '@/apis/api'
@@ -17,7 +22,6 @@ const loading = defineModel<boolean>('loading', { default: true });
 const records = defineModel<Record[]>('records');
 const soa = defineModel<SOARecord | undefined>('soa')
 const columns = defineModel<DataTableColumns<Record>>('columns')
-const table = ref<any>(null)
 
 columns.value = [
     {
@@ -49,7 +53,7 @@ columns.value = [
     {
         key: '',
         render(row: Record) {
-            return <RecordOps record={ row } />
+            return <RecordOps record={row} />
         }
     }
 ]
@@ -92,81 +96,83 @@ function searchRecord(value: string) {
     <div id="records">
         <NSpin size="large" v-if="loading" />
         <div v-else class="content">
-            <NPageHeader :title="t('domains.dnsRecord')" :subtitle="domain" @back="goBack">
-                <template #extra>
-                    <NFlex :wrap="false" justify="end" inline>
-                        <NButton type="primary">
-                            <template #icon>
-                                <NIcon>
-                                    <PlusSquare />
-                                </NIcon>
-                            </template>
-                            {{ t('common.add') }}
-                        </NButton>
-                        <NInput :placeholder="t('records.search')" @update:value="searchRecord" clearable>
-                            <template #prefix>
-                                <NIcon :component="Search" />
-                            </template>
-                        </NInput>
-                    </NFlex>
-                </template>
-                <NGrid :cols="4">
-                    <NGi>
-                        <NStatistic :value="soa?.refresh">
-                            <template #suffix>
-                                s
-                            </template>
-                            <template #label>
-                                <NIcon class="icon">
-                                    <RedoAlt />
-                                </NIcon>
-                                {{ t('records.refresh') }}
-                            </template>
-                        </NStatistic>
-                    </NGi>
-                    <NGi>
-                        <NStatistic :value="soa?.retry">
-                            <template #suffix>
-                                s
-                            </template>
-                            <template #label>
-                                <NIcon class="icon">
-                                    <CheckCircle />
-                                </NIcon>
-                                {{ t('records.retry') }}
-                            </template>
-                        </NStatistic>
-                    </NGi>
-                    <NGi>
-                        <NStatistic :value="soa?.expire">
-                            <template #suffix>
-                                s
-                            </template>
-                            <template #label>
-                                <NIcon class="icon">
-                                    <Clock />
-                                </NIcon>
-                                {{ t('records.expire') }}
-                            </template>
-                        </NStatistic>
-                    </NGi>
-                    <NGi>
-                        <NStatistic :value="soa?.minttl">
-                            <template #suffix>
-                                s
-                            </template>
-                            <template #label>
-                                <NIcon class="icon">
-                                    <Cogs />
-                                </NIcon>
-                                {{ t('records.ttl') }}
-                            </template>
-                        </NStatistic>
-                    </NGi>
-                </NGrid>
-            </NPageHeader>
-            <br />
-            <NDataTable :data="records" :columns="columns" ref="table" :pagination="{ pageSize: 20 }" />
+            <NModalProvider>
+                <NPageHeader :title="t('domains.dnsRecord')" :subtitle="domain" @back="goBack">
+                    <template #extra>
+                        <NFlex :wrap="false" justify="end" inline>
+                            <NButton type="primary">
+                                <template #icon>
+                                    <NIcon>
+                                        <PlusSquare />
+                                    </NIcon>
+                                </template>
+                                {{ t('common.add') }}
+                            </NButton>
+                            <NInput :placeholder="t('records.search')" @update:value="searchRecord" clearable>
+                                <template #prefix>
+                                    <NIcon :component="Search" />
+                                </template>
+                            </NInput>
+                        </NFlex>
+                    </template>
+                    <NGrid :cols="4">
+                        <NGi>
+                            <NStatistic :value="soa?.refresh">
+                                <template #suffix>
+                                    s
+                                </template>
+                                <template #label>
+                                    <NIcon class="icon">
+                                        <RedoAlt />
+                                    </NIcon>
+                                    {{ t('records.refresh') }}
+                                </template>
+                            </NStatistic>
+                        </NGi>
+                        <NGi>
+                            <NStatistic :value="soa?.retry">
+                                <template #suffix>
+                                    s
+                                </template>
+                                <template #label>
+                                    <NIcon class="icon">
+                                        <CheckCircle />
+                                    </NIcon>
+                                    {{ t('records.retry') }}
+                                </template>
+                            </NStatistic>
+                        </NGi>
+                        <NGi>
+                            <NStatistic :value="soa?.expire">
+                                <template #suffix>
+                                    s
+                                </template>
+                                <template #label>
+                                    <NIcon class="icon">
+                                        <Clock />
+                                    </NIcon>
+                                    {{ t('records.expire') }}
+                                </template>
+                            </NStatistic>
+                        </NGi>
+                        <NGi>
+                            <NStatistic :value="soa?.minttl">
+                                <template #suffix>
+                                    s
+                                </template>
+                                <template #label>
+                                    <NIcon class="icon">
+                                        <Cogs />
+                                    </NIcon>
+                                    {{ t('records.ttl') }}
+                                </template>
+                            </NStatistic>
+                        </NGi>
+                    </NGrid>
+                </NPageHeader>
+                <br />
+                <NDataTable :data="records" :columns="columns" :pagination="{ pageSize: 20 }" />
+            </NModalProvider>
         </div>
     </div>
 </template>