fix: 统一网站等删除样式 (#2724)

frontend/src/views/host/process/process/index.vue

@@ -11,7 +11,7 @@
                                     <el-col :span="8">
                                         <div class="search-button">
                                             <el-input
-                                                typpe="number"
+                                                type="number"
                                                 v-model.number="processSearch.pid"
                                                 clearable
                                                 @clear="search()"
@@ -118,17 +118,19 @@
                 </ComplexTable>
             </template>
         </LayoutContent>
+
+        <OpDialog ref="opRef" @search="search" />
         <ProcessDetail ref="detailRef" />
     </div>
 </template>
 
 <script setup lang="ts">
 import FireRouter from '@/views/host/process/index.vue';
+import OpDialog from '@/components/del-dialog/index.vue';
 import { ref, onMounted, onUnmounted, nextTick, reactive } from 'vue';
 import ProcessDetail from './detail/index.vue';
 import i18n from '@/lang';
 import { StopProcess } from '@/api/modules/process';
-import { useDeleteData } from '@/hooks/use-delete-data';
 
 interface SortStatus {
     prop: '';
@@ -147,6 +149,7 @@ const processSearch = reactive({
     username: '',
     name: '',
 });
+const opRef = ref();
 
 const buttons = [
     {
@@ -158,7 +161,7 @@ const buttons = [
     {
         label: i18n.global.t('process.stopProcess'),
         click: function (row: any) {
-            stopProcess(row.PID);
+            stopProcess(row);
         },
     },
 ];
@@ -277,10 +280,17 @@ const search = () => {
     }
 };
 
-const stopProcess = async (PID: number) => {
-    try {
-        await useDeleteData(StopProcess, { PID: PID }, i18n.global.t('process.stopProcessWarn', [PID]));
-    } catch (error) {}
+const stopProcess = async (row: any) => {
+    opRef.value.acceptParams({
+        title: i18n.global.t('process.stopProcess'),
+        names: [row.name],
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('menu.process'),
+            i18n.global.t('process.stopProcess'),
+        ]),
+        api: StopProcess,
+        params: { PID: row.PID },
+    });
 };
 
 onMounted(() => {

frontend/src/views/host/tool/supervisor/file/index.vue

@@ -42,13 +42,15 @@
             </span>
         </template>
     </el-drawer>
+
+    <OpDialog ref="opRef" @search="getContent" />
 </template>
 <script lang="ts" setup>
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
+import OpDialog from '@/components/del-dialog/index.vue';
 import { onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import { OperateSupervisorProcessFile } from '@/api/modules/host-tool';
 import i18n from '@/lang';
 import { TabsPaneContext } from 'element-plus';
@@ -66,6 +68,7 @@ const req = reactive({
     content: '',
 });
 const title = ref('');
+const opRef = ref();
 
 const view = shallowRef();
 const handleReady = (payload) => {
@@ -136,17 +139,14 @@ const acceptParams = (name: string, file: string, operate: string) => {
 };
 
 const cleanLog = async () => {
-    const clearReq = {
-        name: req.name,
-        operate: 'clear',
-        file: req.file,
-    };
-    try {
-        await useDeleteData(OperateSupervisorProcessFile, clearReq, 'commons.msg.delete');
-        getContent();
-    } catch (error) {
-    } finally {
-    }
+    let log = req.file === 'out.log' ? i18n.global.t('logs.runLog') : i18n.global.t('logs.errLog');
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.msg.clean'),
+        names: [req.name],
+        msg: i18n.global.t('commons.msg.operatorHelper', [log, i18n.global.t('commons.msg.clean')]),
+        api: OperateSupervisorProcessFile,
+        params: { name: req.name, operate: 'clear', file: req.file },
+    });
 };
 
 const onCloseLog = async () => {

frontend/src/views/website/runtime/php/index.vue

@@ -58,19 +58,21 @@
                 </ComplexTable>
             </template>
         </LayoutContent>
+
         <CreateRuntime ref="createRef" @close="search" />
+        <OpDialog ref="opRef" @search="search" />
     </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import OpDialog from '@/components/del-dialog/index.vue';
 import { Runtime } from '@/api/interface/runtime';
 import { DeleteRuntime, SearchRuntimes } from '@/api/modules/runtime';
 import { dateFormat, toLowerCase } from '@/utils/util';
 import CreateRuntime from '@/views/website/runtime/php/create/index.vue';
 import Status from '@/components/status/index.vue';
 import i18n from '@/lang';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import RouterMenu from '../index.vue';
 
 const paginationConfig = reactive({
@@ -86,6 +88,7 @@ let req = reactive<Runtime.RuntimeReq>({
     type: 'php',
 });
 let timer: NodeJS.Timer | null = null;
+const opRef = ref();
 
 const buttons = [
     {
@@ -131,8 +134,16 @@ const openDetail = (row: Runtime.Runtime) => {
 };
 
 const openDelete = async (row: Runtime.Runtime) => {
-    await useDeleteData(DeleteRuntime, { id: row.id }, 'commons.msg.delete');
-    search();
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.msg.delete'),
+        names: [req.name],
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('website.runtime'),
+            i18n.global.t('commons.msg.delete'),
+        ]),
+        api: DeleteRuntime,
+        params: { id: row.id, forceDelete: true },
+    });
 };
 
 onMounted(() => {

frontend/src/views/website/ssl/acme-account/index.vue

@@ -20,12 +20,15 @@
         </ComplexTable>
         <Create ref="createRef" @close="search()"></Create>
     </el-drawer>
+
+    <OpDialog ref="opRef" @search="search" />
 </template>
+
 <script lang="ts" setup>
+import OpDialog from '@/components/del-dialog/index.vue';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Website } from '@/api/interface/website';
 import { DeleteAcmeAccount, SearchAcmeAccount } from '@/api/modules/website';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import i18n from '@/lang';
 import { reactive, ref } from 'vue';
 import Create from './create/index.vue';
@@ -40,12 +43,13 @@ const paginationConfig = reactive({
     pageSize: 20,
     total: 0,
 });
+const opRef = ref();
 
 const buttons = [
     {
         label: i18n.global.t('commons.button.delete'),
         click: function (row: Website.AcmeAccount) {
-            deleteAccount(row.id);
+            deleteAccount(row);
         },
     },
 ];
@@ -74,9 +78,17 @@ const handleClose = () => {
     open.value = false;
 };
 
-const deleteAccount = async (id: number) => {
-    await useDeleteData(DeleteAcmeAccount, { id: id }, 'commons.msg.delete');
-    search();
+const deleteAccount = async (row: any) => {
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: [row.email],
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('website.acmeAccountManage'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: DeleteAcmeAccount,
+        params: { id: row.id },
+    });
 };
 
 defineExpose({

frontend/src/views/website/ssl/dns-account/index.vue

@@ -26,6 +26,8 @@
         </ComplexTable>
         <Create ref="createRef" @close="search()"></Create>
     </el-drawer>
+
+    <OpDialog ref="opRef" @search="search" />
 </template>
 
 <script lang="ts" setup>
@@ -35,7 +37,6 @@ import { Website } from '@/api/interface/website';
 import { DeleteDnsAccount, SearchDnsAccount } from '@/api/modules/website';
 import { onMounted, reactive, ref } from 'vue';
 import i18n from '@/lang';
-import { useDeleteData } from '@/hooks/use-delete-data';
 
 const paginationConfig = reactive({
     cacheSizeKey: 'dns-account-page-size',
@@ -45,8 +46,8 @@ const paginationConfig = reactive({
 });
 let data = ref<Website.DnsAccount[]>();
 let createRef = ref();
-let loading = ref(false);
 let open = ref(false);
+const opRef = ref();
 
 const buttons = [
     {
@@ -91,11 +92,17 @@ const openEdit = (form: Website.DnsAccount) => {
     createRef.value.acceptParams({ mode: 'edit', form: form });
 };
 
-const deleteAccount = async (id: number) => {
-    loading.value = true;
-    await useDeleteData(DeleteDnsAccount, { id: id }, 'commons.msg.delete');
-    loading.value = false;
-    search();
+const deleteAccount = async (row: any) => {
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: [row.name],
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('website.dnsAccountManage'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: DeleteDnsAccount,
+        params: { id: row.id },
+    });
 };
 
 onMounted(() => {

frontend/src/views/website/ssl/index.vue

@@ -80,11 +80,14 @@
             <Renew ref="renewRef" @close="search()"></Renew>
             <Detail ref="detailRef"></Detail>
         </LayoutContent>
+
+        <OpDialog ref="opRef" @search="search" />
     </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, reactive, ref, computed } from 'vue';
+import OpDialog from '@/components/del-dialog/index.vue';
 import { DeleteSSL, SearchSSL, UpdateSSL } from '@/api/modules/website';
 import DnsAccount from './dns-account/index.vue';
 import AcmeAccount from './acme-account/index.vue';
@@ -94,7 +97,6 @@ import Detail from './detail/index.vue';
 import { dateFormat, getProvider } from '@/utils/util';
 import i18n from '@/lang';
 import { Website } from '@/api/interface/website';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
@@ -112,6 +114,7 @@ const renewRef = ref();
 const detailRef = ref();
 let data = ref();
 let loading = ref(false);
+const opRef = ref();
 
 const routerButton = [
     {
@@ -139,7 +142,7 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.delete'),
         click: function (row: Website.SSL) {
-            deleteSSL(row.id);
+            deleteSSL(row);
         },
     },
 ];
@@ -191,11 +194,17 @@ const openDetail = (id: number) => {
     detailRef.value.acceptParams(id);
 };
 
-const deleteSSL = async (id: number) => {
-    loading.value = true;
-    await useDeleteData(DeleteSSL, { id: id }, 'commons.msg.delete');
-    loading.value = false;
-    search();
+const deleteSSL = async (row: any) => {
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: [row.primaryDomain],
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('website.ssl'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: DeleteSSL,
+        params: { id: row.id },
+    });
 };
 
 onMounted(() => {

frontend/src/views/website/website/config/basic/auth-basic/index.vue

@@ -20,15 +20,17 @@
         />
     </ComplexTable>
     <Create ref="createRef" @close="search()" />
+
+    <OpDialog ref="opRef" @search="search" />
 </template>
 
 <script lang="ts" setup name="proxy">
 import { Website } from '@/api/interface/website';
+import OpDialog from '@/components/del-dialog/index.vue';
 import { OperateAuthConfig, GetAuthConfig } from '@/api/modules/website';
 import { computed, onMounted, ref } from 'vue';
 import i18n from '@/lang';
 import Create from './create/index.vue';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
@@ -49,6 +51,7 @@ const loading = ref(false);
 const data = ref([]);
 const createRef = ref();
 const enable = ref(false);
+const opRef = ref();
 
 const buttons = [
     {
@@ -87,8 +90,16 @@ const openEdit = (authConfig: Website.NginxAuthConfig) => {
 const deleteAuth = async (authConfig: Website.NginxAuthConfig) => {
     authConfig.operate = 'delete';
     authConfig.websiteID = id.value;
-    await useDeleteData(OperateAuthConfig, authConfig, 'commons.msg.delete');
-    search();
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: [authConfig.username],
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('website.basicAuth'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: OperateAuthConfig,
+        params: authConfig,
+    });
 };
 
 const changeEnable = () => {

frontend/src/views/website/website/config/basic/domain/index.vue

@@ -19,15 +19,16 @@
         />
     </ComplexTable>
     <Domain ref="domainRef" @close="search(id)"></Domain>
+    <OpDialog ref="opRef" @search="search(id)" />
 </template>
 
 <script lang="ts" setup>
 import Domain from './create/index.vue';
 import { Website } from '@/api/interface/website';
+import OpDialog from '@/components/del-dialog/index.vue';
 import { DeleteDomain, GetWebsite, ListDomains } from '@/api/modules/website';
 import { computed, onMounted, ref } from 'vue';
 import i18n from '@/lang';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import { Promotion } from '@element-plus/icons-vue';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
@@ -48,12 +49,13 @@ let loading = ref(false);
 const data = ref<Website.Domain[]>([]);
 const domainRef = ref();
 const website = ref<Website.WebsiteDTO>();
+const opRef = ref();
 
 const buttons = [
     {
         label: i18n.global.t('commons.button.delete'),
         click: function (row: Website.Domain) {
-            deleteDoamin(row.id);
+            deleteDomain(row);
         },
         disabled: () => {
             return data.value.length == 1;
@@ -73,9 +75,17 @@ const openUrl = (domain: string, port: string) => {
     window.open(url);
 };
 
-const deleteDoamin = async (domainId: number) => {
-    await useDeleteData(DeleteDomain, { id: domainId }, 'commons.msg.delete');
-    search(id.value);
+const deleteDomain = async (row: Website.Domain) => {
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.msg.delete'),
+        names: [row.domain],
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('website.domain'),
+            i18n.global.t('commons.msg.delete'),
+        ]),
+        api: DeleteDomain,
+        params: { id: row.id },
+    });
 };
 
 const search = (id: number) => {

frontend/src/views/website/website/config/basic/proxy/index.vue

@@ -30,12 +30,15 @@
             fix
         />
     </ComplexTable>
+
     <Create ref="createRef" @close="search()" />
     <File ref="fileRef" @close="search()" />
+    <OpDialog ref="opRef" @search="search()" />
 </template>
 
 <script lang="ts" setup name="proxy">
 import { Website } from '@/api/interface/website';
+import OpDialog from '@/components/del-dialog/index.vue';
 import { OperateProxyConfig, GetProxyConfig } from '@/api/modules/website';
 import { computed, onMounted, ref } from 'vue';
 import Create from './create/index.vue';
@@ -43,7 +46,6 @@ import File from './file/index.vue';
 import { VideoPlay, VideoPause } from '@element-plus/icons-vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import { ElMessageBox } from 'element-plus';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
@@ -65,6 +67,7 @@ const loading = ref(false);
 const data = ref();
 const createRef = ref();
 const fileRef = ref();
+const opRef = ref();
 
 const buttons = [
     {
@@ -127,8 +130,16 @@ const openEditFile = (proxyConfig: Website.ProxyConfig) => {
 
 const deleteProxy = async (proxyConfig: Website.ProxyConfig) => {
     proxyConfig.operate = 'delete';
-    await useDeleteData(OperateProxyConfig, proxyConfig, 'commons.msg.delete');
-    search();
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.msg.delete'),
+        names: [proxyConfig.name],
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('website.proxy'),
+            i18n.global.t('commons.msg.delete'),
+        ]),
+        api: OperateProxyConfig,
+        params: proxyConfig,
+    });
 };
 
 const changeCache = (proxyConfig: Website.ProxyConfig) => {

frontend/src/views/website/website/config/basic/redirect/index.vue

@@ -22,7 +22,9 @@
         <el-table-column :label="$t('website.targetURL')" prop="target" min-width="100px" show-overflow-tooltip />
         <el-table-column :label="$t('website.keepPath')" prop="keepPath" min-width="80px" show-overflow-tooltip>
             <template #default="{ row }">
-                <span v-if="row.type != '404'">{{ row.keepPath ? $t('website.keep') : $t('website.notKeep') }}</span>
+                <span v-if="row.type != '404'">
+                    {{ row.keepPath ? $t('website.keep') : $t('website.notKeep') }}
+                </span>
                 <span v-else></span>
             </template>
         </el-table-column>
@@ -45,12 +47,15 @@
             fix
         />
     </ComplexTable>
+
     <Create ref="createRef" @close="search()" />
     <File ref="fileRef" @close="search()" />
+    <OpDialog ref="opRef" @search="search()" />
 </template>
 
 <script lang="ts" setup name="proxy">
 import { Website } from '@/api/interface/website';
+import OpDialog from '@/components/del-dialog/index.vue';
 import { OperateRedirectConfig, GetRedirectConfig } from '@/api/modules/website';
 import { computed, onMounted, ref } from 'vue';
 import Create from './create/index.vue';
@@ -58,7 +63,6 @@ import File from './file/index.vue';
 import { VideoPlay, VideoPause } from '@element-plus/icons-vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import { ElMessageBox } from 'element-plus';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
@@ -80,6 +84,7 @@ const loading = ref(false);
 const data = ref();
 const createRef = ref();
 const fileRef = ref();
+const opRef = ref();
 
 const buttons = [
     {
@@ -140,8 +145,16 @@ const openEditFile = (proxyConfig: Website.RedirectConfig) => {
 
 const deleteProxy = async (redirectConfig: Website.RedirectConfig) => {
     redirectConfig.operate = 'delete';
-    await useDeleteData(OperateRedirectConfig, redirectConfig, 'commons.msg.delete');
-    search();
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.msg.delete'),
+        names: [redirectConfig.name],
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('website.redirect'),
+            i18n.global.t('commons.msg.delete'),
+        ]),
+        api: OperateRedirectConfig,
+        params: redirectConfig,
+    });
 };
 
 const submit = async (redirectConfig: Website.RedirectConfig) => {

frontend/src/views/website/website/config/log/log-fiile/index.vue

@@ -34,6 +34,7 @@
             @ready="handleReady"
         />
     </div>
+    <OpDialog ref="opRef" @search="getContent()" />
 </template>
 <script lang="ts" setup>
 import { Codemirror } from 'vue-codemirror';
@@ -41,8 +42,8 @@ import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { computed, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue';
 import { OpWebsiteLog } from '@/api/modules/website';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import { downloadFile } from '@/utils/util';
+import i18n from '@/lang';
 
 const extensions = [javascript(), oneDark];
 const props = defineProps({
@@ -69,6 +70,7 @@ const data = ref({
 });
 const tailLog = ref(false);
 let timer: NodeJS.Timer | null = null;
+const opRef = ref();
 
 const view = shallowRef();
 const editorContainer = ref<HTMLDivElement | null>(null);
@@ -147,17 +149,14 @@ const updateEnable = () => {
 };
 
 const cleanLog = async () => {
-    const req = {
-        id: id.value,
-        operate: 'delete',
-        logType: logType.value,
-    };
-    try {
-        await useDeleteData(OpWebsiteLog, req, 'commons.msg.delete');
-        getContent();
-    } catch (error) {
-    } finally {
-    }
+    let log = logType.value === 'access.log' ? i18n.global.t('website.accessLog') : i18n.global.t('website.errLog');
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.msg.clean'),
+        names: [],
+        msg: i18n.global.t('commons.msg.operatorHelper', [log, i18n.global.t('commons.msg.clean')]),
+        api: OpWebsiteLog,
+        params: { id: id.value, operate: 'delete', logType: logType.value },
+    });
 };
 
 const onDownload = async () => {