fix: 统一删除提示信息及样式 (#2690)

2025-01-31 14:08:06 +08:00 · 2023-10-26 18:20:16 +08:00 · 2023-10-26 18:20:16 +08:00 · 8857d97dd7
commit 8857d97dd7
parent 3f6ea63d73
31 changed files with 720 additions and 423 deletions
--- a/backend/app/api/v1/container.go
+++ b/backend/app/api/v1/container.go
@ -373,6 +373,32 @@ func (b *BaseApi) LoadContainerLog(c *gin.Context) {
 	helper.SuccessWithData(c, content)
 }

+// @Tags Container
+// @Summary Rename Container
+// @Description 容器重命名
+// @Accept json
+// @Param request body dto.ContainerRename true "request"
+// @Success 200
+// @Security ApiKeyAuth
+// @Router /containers/rename [post]
+// @x-panel-log {"bodyKeys":["name","newName"],"paramKeys":[],"BeforeFunctions":[],"formatZH":"容器重命名 [name] => [newName]","formatEN":"rename container [name] => [newName]"}
+func (b *BaseApi) ContainerRename(c *gin.Context) {
+	var req dto.ContainerRename
+	if err := c.ShouldBindJSON(&req); err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
+		return
+	}
+	if err := global.VALID.Struct(req); err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
+		return
+	}
+	if err := containerService.ContainerRename(req); err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
+		return
+	}
+	helper.SuccessWithData(c, nil)
+}
+
 // @Tags Container
 // @Summary Operate Container
 // @Description 容器操作
@ -381,7 +407,7 @@ func (b *BaseApi) LoadContainerLog(c *gin.Context) {
 // @Success 200
 // @Security ApiKeyAuth
 // @Router /containers/operate [post]
-// @x-panel-log {"bodyKeys":["name","operation","newName"],"paramKeys":[],"BeforeFunctions":[],"formatZH":"容器 [name] 执行 [operation] [newName]","formatEN":"container [operation] [name] [newName]"}
+// @x-panel-log {"bodyKeys":["names","operation"],"paramKeys":[],"BeforeFunctions":[],"formatZH":"容器 [names] 执行 [operation]","formatEN":"container [operation] [names]"}
 func (b *BaseApi) ContainerOperation(c *gin.Context) {
 	var req dto.ContainerOperation
 	if err := c.ShouldBindJSON(&req); err != nil {
--- a/backend/app/dto/container.go
+++ b/backend/app/dto/container.go
@ -104,9 +104,13 @@ type PortHelper struct {
 }

 type ContainerOperation struct {
-	Name      string `json:"name" validate:"required"`
-	Operation string `json:"operation" validate:"required,oneof=start stop restart kill pause unpause rename remove"`
-	NewName   string `json:"newName"`
+	Names     []string `json:"names" validate:"required"`
+	Operation string   `json:"operation" validate:"required,oneof=start stop restart kill pause unpause remove"`
+}
+
+type ContainerRename struct {
+	Name    string `json:"name" validate:"required"`
+	NewName string `json:"newName"`
 }

 type ContainerPrune struct {
--- a/backend/app/service/container.go
+++ b/backend/app/service/container.go
@ -52,6 +52,7 @@ type IContainerService interface {
 	ContainerInfo(req dto.OperationWithName) (*dto.ContainerOperate, error)
 	ContainerListStats() ([]dto.ContainerListStats, error)
 	LoadResourceLimit() (*dto.ResourceLimit, error)
+	ContainerRename(req dto.ContainerRename) error
 	ContainerLogClean(req dto.OperationWithName) error
 	ContainerOperation(req dto.ContainerOperation) error
 	ContainerLogs(wsConn *websocket.Conn, container, since, tail string, follow bool) error
@ -514,6 +515,20 @@ func (u *ContainerService) ContainerUpgrade(req dto.ContainerUpgrade) error {
 	return nil
 }

+func (u *ContainerService) ContainerRename(req dto.ContainerRename) error {
+	ctx := context.Background()
+	client, err := docker.NewDockerClient()
+	if err != nil {
+		return err
+	}
+
+	newContainer, _ := client.ContainerInspect(ctx, req.NewName)
+	if newContainer.ContainerJSONBase != nil {
+		return buserr.New(constant.ErrContainerName)
+	}
+	return client.ContainerRename(ctx, req.Name, req.NewName)
+}
+
 func (u *ContainerService) ContainerOperation(req dto.ContainerOperation) error {
 	var err error
 	ctx := context.Background()
@ -521,28 +536,24 @@ func (u *ContainerService) ContainerOperation(req dto.ContainerOperation) error
 	if err != nil {
 		return err
 	}
-	global.LOG.Infof("start container %s operation %s", req.Name, req.Operation)
-	switch req.Operation {
-	case constant.ContainerOpStart:
-		err = client.ContainerStart(ctx, req.Name, types.ContainerStartOptions{})
-	case constant.ContainerOpStop:
-		err = client.ContainerStop(ctx, req.Name, container.StopOptions{})
-	case constant.ContainerOpRestart:
-		err = client.ContainerRestart(ctx, req.Name, container.StopOptions{})
-	case constant.ContainerOpKill:
-		err = client.ContainerKill(ctx, req.Name, "SIGKILL")
-	case constant.ContainerOpPause:
-		err = client.ContainerPause(ctx, req.Name)
-	case constant.ContainerOpUnpause:
-		err = client.ContainerUnpause(ctx, req.Name)
-	case constant.ContainerOpRename:
-		newContainer, _ := client.ContainerInspect(ctx, req.NewName)
-		if newContainer.ContainerJSONBase != nil {
-			return buserr.New(constant.ErrContainerName)
+	for _, item := range req.Names {
+		global.LOG.Infof("start container %s operation %s", item, req.Operation)
+		switch req.Operation {
+		case constant.ContainerOpStart:
+			err = client.ContainerStart(ctx, item, types.ContainerStartOptions{})
+		case constant.ContainerOpStop:
+			err = client.ContainerStop(ctx, item, container.StopOptions{})
+		case constant.ContainerOpRestart:
+			err = client.ContainerRestart(ctx, item, container.StopOptions{})
+		case constant.ContainerOpKill:
+			err = client.ContainerKill(ctx, item, "SIGKILL")
+		case constant.ContainerOpPause:
+			err = client.ContainerPause(ctx, item)
+		case constant.ContainerOpUnpause:
+			err = client.ContainerUnpause(ctx, item)
+		case constant.ContainerOpRemove:
+			err = client.ContainerRemove(ctx, item, types.ContainerRemoveOptions{RemoveVolumes: true, Force: true})
 		}
-		err = client.ContainerRename(ctx, req.Name, req.NewName)
-	case constant.ContainerOpRemove:
-		err = client.ContainerRemove(ctx, req.Name, types.ContainerRemoveOptions{RemoveVolumes: true, Force: true})
 	}
 	return err
 }
--- a/backend/router/ro_container.go
+++ b/backend/router/ro_container.go
@ -30,6 +30,7 @@ func (s *ContainerRouter) InitContainerRouter(Router *gin.RouterGroup) {
 		baRouter.POST("/clean/log", baseApi.CleanContainerLog)
 		baRouter.POST("/load/log", baseApi.LoadContainerLog)
 		baRouter.POST("/inspect", baseApi.Inspect)
+		baRouter.POST("/rename", baseApi.ContainerRename)
 		baRouter.POST("/operate", baseApi.ContainerOperation)
 		baRouter.POST("/prune", baseApi.ContainerPrune)

--- a/cmd/server/docs/docs.go
+++ b/cmd/server/docs/docs.go
@ -2314,12 +2314,11 @@ const docTemplate = `{
                "x-panel-log": {
                    "BeforeFunctions": [],
                    "bodyKeys": [
-                        "name",
-                        "operation",
-                        "newName"
+                        "names",
+                        "operation"
                    ],
-                    "formatEN": "container [operation] [name] [newName]",
-                    "formatZH": "容器 [name] 执行 [operation] [newName]",
+                    "formatEN": "container [operation] [names]",
+                    "formatZH": "容器 [names] 执行 [operation]",
                    "paramKeys": []
                }
            }
@ -2369,6 +2368,49 @@ const docTemplate = `{
                }
            }
        },
+        "/containers/rename": {
+            "post": {
+                "security": [
+                    {
+                        "ApiKeyAuth": []
+                    }
+                ],
+                "description": "容器重命名",
+                "consumes": [
+                    "application/json"
+                ],
+                "tags": [
+                    "Container"
+                ],
+                "summary": "Rename Container",
+                "parameters": [
+                    {
+                        "description": "request",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/dto.ContainerRename"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK"
+                    }
+                },
+                "x-panel-log": {
+                    "BeforeFunctions": [],
+                    "bodyKeys": [
+                        "name",
+                        "newName"
+                    ],
+                    "formatEN": "rename container [name] =\u003e [newName]",
+                    "formatZH": "容器重命名 [name] =\u003e [newName]",
+                    "paramKeys": []
+                }
+            }
+        },
        "/containers/repo": {
            "get": {
                "security": [
@ -13022,15 +13064,15 @@ const docTemplate = `{
        "dto.ContainerOperation": {
            "type": "object",
            "required": [
-                "name",
+                "names",
                "operation"
            ],
            "properties": {
-                "name": {
-                    "type": "string"
-                },
-                "newName": {
-                    "type": "string"
+                "names": {
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
                },
                "operation": {
                    "type": "string",
@ -13041,7 +13083,6 @@ const docTemplate = `{
                        "kill",
                        "pause",
                        "unpause",
-                        "rename",
                        "remove"
                    ]
                }
@ -13078,6 +13119,20 @@ const docTemplate = `{
                }
            }
        },
+        "dto.ContainerRename": {
+            "type": "object",
+            "required": [
+                "name"
+            ],
+            "properties": {
+                "name": {
+                    "type": "string"
+                },
+                "newName": {
+                    "type": "string"
+                }
+            }
+        },
        "dto.ContainerStats": {
            "type": "object",
            "properties": {
--- a/cmd/server/docs/swagger.json
+++ b/cmd/server/docs/swagger.json
@ -2307,12 +2307,11 @@
                "x-panel-log": {
                    "BeforeFunctions": [],
                    "bodyKeys": [
-                        "name",
-                        "operation",
-                        "newName"
+                        "names",
+                        "operation"
                    ],
-                    "formatEN": "container [operation] [name] [newName]",
-                    "formatZH": "容器 [name] 执行 [operation] [newName]",
+                    "formatEN": "container [operation] [names]",
+                    "formatZH": "容器 [names] 执行 [operation]",
                    "paramKeys": []
                }
            }
@ -2362,6 +2361,49 @@
                }
            }
        },
+        "/containers/rename": {
+            "post": {
+                "security": [
+                    {
+                        "ApiKeyAuth": []
+                    }
+                ],
+                "description": "容器重命名",
+                "consumes": [
+                    "application/json"
+                ],
+                "tags": [
+                    "Container"
+                ],
+                "summary": "Rename Container",
+                "parameters": [
+                    {
+                        "description": "request",
+                        "name": "request",
+                        "in": "body",
+                        "required": true,
+                        "schema": {
+                            "$ref": "#/definitions/dto.ContainerRename"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK"
+                    }
+                },
+                "x-panel-log": {
+                    "BeforeFunctions": [],
+                    "bodyKeys": [
+                        "name",
+                        "newName"
+                    ],
+                    "formatEN": "rename container [name] =\u003e [newName]",
+                    "formatZH": "容器重命名 [name] =\u003e [newName]",
+                    "paramKeys": []
+                }
+            }
+        },
        "/containers/repo": {
            "get": {
                "security": [
@ -13015,15 +13057,15 @@
        "dto.ContainerOperation": {
            "type": "object",
            "required": [
-                "name",
+                "names",
                "operation"
            ],
            "properties": {
-                "name": {
-                    "type": "string"
-                },
-                "newName": {
-                    "type": "string"
+                "names": {
+                    "type": "array",
+                    "items": {
+                        "type": "string"
+                    }
                },
                "operation": {
                    "type": "string",
@ -13034,7 +13076,6 @@
                        "kill",
                        "pause",
                        "unpause",
-                        "rename",
                        "remove"
                    ]
                }
@ -13071,6 +13112,20 @@
                }
            }
        },
+        "dto.ContainerRename": {
+            "type": "object",
+            "required": [
+                "name"
+            ],
+            "properties": {
+                "name": {
+                    "type": "string"
+                },
+                "newName": {
+                    "type": "string"
+                }
+            }
+        },
        "dto.ContainerStats": {
            "type": "object",
            "properties": {
--- a/cmd/server/docs/swagger.yaml
+++ b/cmd/server/docs/swagger.yaml
@ -431,10 +431,10 @@ definitions:
    type: object
  dto.ContainerOperation:
    properties:
-      name:
-        type: string
-      newName:
-        type: string
+      names:
+        items:
+          type: string
+        type: array
      operation:
        enum:
        - start
@ -443,11 +443,10 @@ definitions:
        - kill
        - pause
        - unpause
-        - rename
        - remove
        type: string
    required:
-    - name
+    - names
    - operation
    type: object
  dto.ContainerPrune:
@ -471,6 +470,15 @@ definitions:
      spaceReclaimed:
        type: integer
    type: object
+  dto.ContainerRename:
+    properties:
+      name:
+        type: string
+      newName:
+        type: string
+    required:
+    - name
+    type: object
  dto.ContainerStats:
    properties:
      cache:
@ -5704,11 +5712,10 @@ paths:
      x-panel-log:
        BeforeFunctions: []
        bodyKeys:
-        - name
+        - names
        - operation
-        - newName
-        formatEN: container [operation] [name] [newName]
-        formatZH: 容器 [name] 执行 [operation] [newName]
+        formatEN: container [operation] [names]
+        formatZH: 容器 [names] 执行 [operation]
        paramKeys: []
  /containers/prune:
    post:
@ -5739,6 +5746,34 @@ paths:
        formatEN: clean container [pruneType]
        formatZH: 清理容器 [pruneType]
        paramKeys: []
+  /containers/rename:
+    post:
+      consumes:
+      - application/json
+      description: 容器重命名
+      parameters:
+      - description: request
+        in: body
+        name: request
+        required: true
+        schema:
+          $ref: '#/definitions/dto.ContainerRename'
+      responses:
+        "200":
+          description: OK
+      security:
+      - ApiKeyAuth: []
+      summary: Rename Container
+      tags:
+      - Container
+      x-panel-log:
+        BeforeFunctions: []
+        bodyKeys:
+        - name
+        - newName
+        formatEN: rename container [name] => [newName]
+        formatZH: 容器重命名 [name] => [newName]
+        paramKeys: []
  /containers/repo:
    get:
      description: 获取镜像仓库列表
--- a/frontend/src/api/interface/container.ts
+++ b/frontend/src/api/interface/container.ts
@ -2,8 +2,11 @@ import { ReqPage } from '.';

 export namespace Container {
    export interface ContainerOperate {
-        name: string;
+        names: Array<string>;
        operation: string;
+    }
+    export interface ContainerRename {
+        name: string;
        newName: string;
    }
    export interface ContainerSearch extends ReqPage {
--- a/frontend/src/api/interface/cronjob.ts
+++ b/frontend/src/api/interface/cronjob.ts
@ -66,6 +66,10 @@ export namespace Cronjob {
        targetDirID: number;
        retainCopies: number;
    }
+    export interface CronjobDelete {
+        ids: Array<number>;
+        cleanData: boolean;
+    }
    export interface UpdateStatus {
        id: number;
        status: string;
--- a/frontend/src/api/modules/container.ts
+++ b/frontend/src/api/modules/container.ts
@ -36,6 +36,9 @@ export const containerListStats = () => {
 export const containerStats = (id: string) => {
    return http.get<Container.ContainerStats>(`/containers/stats/${id}`);
 };
+export const containerRename = (params: Container.ContainerRename) => {
+    return http.post(`/containers/rename`, params);
+};
 export const containerOperator = (params: Container.ContainerOperate) => {
    return http.post(`/containers/operate`, params);
 };
--- a/frontend/src/api/modules/cronjob.ts
+++ b/frontend/src/api/modules/cronjob.ts
@ -19,8 +19,8 @@ export const editCronjob = (params: Cronjob.CronjobUpdate) => {
    return http.post(`/cronjobs/update`, params);
 };

-export const deleteCronjob = (ids: number[], cleanData: boolean) => {
-    return http.post(`/cronjobs/del`, { ids: ids, cleanData: cleanData });
+export const deleteCronjob = (params: Cronjob.CronjobDelete) => {
+    return http.post(`/cronjobs/del`, params);
 };

 export const searchRecords = (params: Cronjob.SearchRecord) => {
--- a/frontend/src/components/del-dialog/index.vue
+++ b/frontend/src/components/del-dialog/index.vue
@ -0,0 +1,91 @@
+<template>
+    <div>
+        <el-dialog v-model="open" :title="form.title" width="30%" :close-on-click-modal="false">
+            <div v-loading="loading">
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
+                        <el-alert class="mt-2" :show-icon="true" type="warning" :closable="false">
+                            <div v-for="(item, index) in form.msgs" :key="index">
+                                <div style="line-height: 20px; word-wrap: break-word">
+                                    <span>{{ item }}</span>
+                                </div>
+                            </div>
+                        </el-alert>
+                        <slot name="content"></slot>
+                        <ul v-for="(item, index) in form.names" :key="index">
+                            <div style="word-wrap: break-word">
+                                <li>{{ item }}</li>
+                            </div>
+                        </ul>
+                    </el-col>
+                </el-row>
+            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="open = false" :disabled="loading">
+                        {{ $t('commons.button.cancel') }}
+                    </el-button>
+                    <el-button type="primary" @click="onConfirm" :disabled="loading">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+
+const form = reactive({
+    msgs: [],
+    title: '',
+    names: [],
+    api: null as Function,
+    params: {},
+});
+const loading = ref();
+const open = ref();
+
+interface DialogProps {
+    title: string;
+    msg: string;
+    names: Array<string>;
+
+    api: Function;
+    params: Object;
+}
+const acceptParams = (props: DialogProps): void => {
+    form.title = props.title;
+    form.names = props.names;
+    form.msgs = props.msg.split('\n');
+    form.api = props.api;
+    form.params = props.params;
+    open.value = true;
+};
+
+const emit = defineEmits(['search', 'cancel']);
+
+const onConfirm = async () => {
+    if (form.api) {
+        loading.value = true;
+        await form
+            .api(form.params)
+            .then(() => {
+                emit('cancel');
+                emit('search');
+                open.value = false;
+                loading.value = false;
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    }
+};
+
+onMounted(() => {});
+
+defineExpose({
+    acceptParams,
+});
+</script>
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@ -114,6 +114,7 @@ const message = {
            operateConfirm: 'If you are sure about the operation, please input it manually',
            inputOrSelect: 'Please select or enter',
            copyFailed: 'Copy failed',
+            operatorHelper: 'Would you like to continue performing {1} operation on {0}?',
            notFound: 'Sorry, the page you requested does not exist.',
            unSupportType: 'Current file type is not supported!',
            unSupportSize: 'The uploaded file exceeds {0}M, please confirm!',
@ -502,7 +503,7 @@ const message = {
        containerList: 'Container list',
        operatorHelper: '{0} will be performed on the following container, Do you want to continue?',
        operatorAppHelper:
-            'The {0} operation will be performed on the following containers, some of which are from the App Store. This operation may affect the normal use of the service, Do you want to continue?',
+            'The {0} operation will be performed on the following containers,\n some of which are from the App Store. This operation may affect the normal use of the service. \nDo you want to continue?',
        start: 'Start',
        stop: 'Stop',
        restart: 'Restart',
@ -845,7 +846,7 @@ const message = {
        quickCommand: 'Quick command',
        quickCommandHelper: 'Frequently used command list for quick selection at the bottom of the terminal interface',
        groupDeleteHelper:
-            'After the group is removed, all connections in the group will be migrated to the default group. Confirm the information',
+            'After the group is removed, all connections in the group will be migrated to the default group. Do you want to continue?',
        command: 'Command',
        quickCmd: 'Quick command',
        addHost: 'Add Host',
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@ -114,6 +114,7 @@ const message = {
            operateConfirm: '如果確認操作，請手動輸入',
            inputOrSelect: '請選擇或輸入',
            copyFailed: '復製失敗',
+            operatorHelper: '將對以下{0}進行{1}操作，是否繼續？',
            backupSuccess: '備份成功',
            restoreSuccess: '備份成功',
            notFound: '抱歉，您訪問的頁面不存在',
@ -489,7 +490,7 @@ const message = {
        containerList: '容器列表',
        operatorHelper: '將對以下容器進行 {0} 操作，是否繼續？',
        operatorAppHelper:
-            '將對以下容器進行 {0} 操作，其中部分來源於應用商店，該操作可能會影響到該服務的正常使用，是否確認？',
+            '將對以下容器進行 {0} 操作，\n其中部分來源於應用商店，該操作可能會影響到該服務的正常使用。\n是否確認？',
        start: '啟動',
        stop: '停止',
        restart: '重啟',
@ -809,7 +810,7 @@ const message = {
        batchInput: '批量輸入',
        quickCommand: '快速命令',
        quickCommandHelper: '常用命令列表，用於在終端界面底部快速選擇',
-        groupDeleteHelper: '移除組後，組內所有連接將遷移到 default 組內，是否確認',
+        groupDeleteHelper: '移除組後，組內所有連接將遷移到 default 組內，是否繼續？',
        command: '命令',
        addHost: '添加主機',
        localhost: '本地服務器',
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@ -114,6 +114,7 @@ const message = {
            operateConfirm: '如果确认操作，请手动输入',
            inputOrSelect: '请选择或输入',
            copyFailed: '复制失败',
+            operatorHelper: '将对以下{0}进行 {1} 操作，是否继续？',
            backupSuccess: '备份成功',
            restoreSuccess: '备份成功',
            notFound: '抱歉，您访问的页面不存在',
@ -489,7 +490,7 @@ const message = {
        containerList: '容器列表',
        operatorHelper: '将对以下容器进行 {0} 操作，是否继续？',
        operatorAppHelper:
-            '将对以下容器进行 {0} 操作，其中部分来源于应用商店，该操作可能会影响到该服务的正常使用，是否确认？',
+            '将对以下容器进行 {0} 操作，\n其中部分来源于应用商店，该操作可能会影响到该服务的正常使用。\n是否继续？',
        dead: '',
        start: '启动',
        stop: '停止',
@ -810,7 +811,7 @@ const message = {
        batchInput: '批量输入',
        quickCommand: '快速命令',
        quickCommandHelper: '常用命令列表，用于在终端界面底部快速选择',
-        groupDeleteHelper: '移除组后，组内所有连接将迁移到 default 组内，是否确认',
+        groupDeleteHelper: '移除组后，组内所有连接将迁移到 default 组内，是否继续？',
        command: '命令',
        addHost: '添加主机',
        localhost: '本地服务器',
--- a/frontend/src/views/container/compose/detail/index.vue
+++ b/frontend/src/views/container/compose/detail/index.vue
@ -102,11 +102,11 @@
                </ComplexTable>

                <CodemirrorDialog ref="mydetail" />
+                <OpDialog ref="opRef" @search="search" />

                <ContainerLogDialog ref="dialogContainerLogRef" />
                <MonitorDialog ref="dialogMonitorRef" />
                <TerminalDialog ref="dialogTerminalRef" />
-                <HandleDialog @search="search" ref="handleRef" />
            </template>
        </LayoutContent>
    </div>
@ -115,14 +115,14 @@
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import Tooltip from '@/components/tooltip/index.vue';
+import OpDialog from '@/components/del-dialog/index.vue';
 import MonitorDialog from '@/views/container/container/monitor/index.vue';
 import ContainerLogDialog from '@/views/container/container/log/index.vue';
 import TerminalDialog from '@/views/container/container/terminal/index.vue';
-import HandleDialog from '@/views/container/container/handle/index.vue';
 import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
 import Status from '@/components/status/index.vue';
 import { dateFormat } from '@/utils/util';
-import { composeOperator, inspect, searchContainer } from '@/api/modules/container';
+import { composeOperator, containerOperator, inspect, searchContainer } from '@/api/modules/container';
 import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
 import { Container } from '@/api/interface/container';
@ -134,7 +134,8 @@ const filters = ref();
 const createdBy = ref();

 const dialogContainerLogRef = ref();
-const handleRef = ref();
+
+const opRef = ref();

 const emit = defineEmits<{ (e: 'back'): void }>();
 interface DialogProps {
@ -233,16 +234,22 @@ const checkStatus = (operation: string) => {
    }
 };

-const onOperate = async (operation: string) => {
-    let msg = i18n.global.t('container.operatorHelper', [i18n.global.t('container.' + operation)]);
-    let containers = [];
+const onOperate = async (op: string) => {
+    let msg = i18n.global.t('container.operatorHelper', [i18n.global.t('container.' + op)]);
+    let names = [];
    for (const item of selects.value) {
-        containers.push(item.name);
+        names.push(item.name);
        if (item.isFromApp) {
-            msg = i18n.global.t('container.operatorAppHelper', [i18n.global.t('container.' + operation)]);
+            msg = i18n.global.t('container.operatorAppHelper', [i18n.global.t('container.' + op)]);
        }
    }
-    handleRef.value.acceptParams({ containers: containers, operation: operation, msg: msg });
+    opRef.value.acceptParams({
+        title: i18n.global.t('container.' + op),
+        names: names,
+        msg: msg,
+        api: containerOperator,
+        params: { names: names, operation: op },
+    });
 };

 const onComposeOperate = async (operation: string) => {
--- a/frontend/src/views/container/container/handle/index.vue
+++ b/frontend/src/views/container/container/handle/index.vue
@ -1,87 +0,0 @@
-<template>
-    <el-dialog v-model="open" :title="$t('container.' + operation)" width="30%" :close-on-click-modal="false">
-        <el-row>
-            <el-col :span="20" :offset="2">
-                <el-alert :title="msg" show-icon type="error" :closable="false"></el-alert>
-                <div class="resource">
-                    <table>
-                        <tr v-for="(row, index) in containers" :key="index">
-                            <td>
-                                <span>{{ row }}</span>
-                            </td>
-                        </tr>
-                    </table>
-                </div>
-            </el-col>
-        </el-row>
-
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="open = false" :disabled="loading">
-                    {{ $t('commons.button.cancel') }}
-                </el-button>
-                <el-button type="primary" @click="onConfirm" v-loading="loading">
-                    {{ $t('commons.button.confirm') }}
-                </el-button>
-            </span>
-        </template>
-    </el-dialog>
-</template>
-<script lang="ts" setup>
-import i18n from '@/lang';
-import { ref } from 'vue';
-import { containerOperator } from '@/api/modules/container';
-import { MsgSuccess } from '@/utils/message';
-
-const open = ref(false);
-const containers = ref();
-const msg = ref();
-const operation = ref();
-const loading = ref(false);
-const em = defineEmits(['search']);
-
-interface DialogProps {
-    containers: Array<string>;
-    operation: string;
-    msg: string;
-}
-
-const acceptParams = (props: DialogProps) => {
-    containers.value = props.containers;
-    operation.value = props.operation;
-    msg.value = props.msg;
-    open.value = true;
-};
-
-const onConfirm = () => {
-    const pros = [];
-    for (const item of containers.value) {
-        pros.push(containerOperator({ name: item, operation: operation.value, newName: '' }));
-    }
-    loading.value = true;
-    Promise.all(pros)
-        .then(() => {
-            open.value = false;
-            loading.value = false;
-            em('search');
-            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-        })
-        .finally(() => {
-            open.value = false;
-            loading.value = false;
-            em('search');
-        });
-};
-
-defineExpose({
-    acceptParams,
-});
-</script>
-
-<style scoped>
-.resource {
-    margin-top: 10px;
-    max-height: 400px;
-    overflow: auto;
-}
-</style>
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@ -15,7 +15,7 @@
                        <el-button type="primary" plain @click="onClean()">
                            {{ $t('container.containerPrune') }}
                        </el-button>
-                        <el-button-group style="margin-left: 10px">
+                        <el-button-group class="ml-4">
                            <el-button :disabled="checkStatus('start', null)" @click="onOperate('start', null)">
                                {{ $t('container.start') }}
                            </el-button>
@ -241,10 +241,12 @@
            </template>
        </LayoutContent>

-        <CodemirrorDialog ref="mydetail" />
+        <OpDialog ref="opRef" @search="search" />
+
+        <CodemirrorDialog ref="myDetail" />
        <PruneDialog @search="search" ref="dialogPruneRef" />

-        <ReNameDialog @search="search" ref="dialogReNameRef" />
+        <RenameDialog @search="search" ref="dialogRenameRef" />
        <ContainerLogDialog ref="dialogContainerLogRef" />
        <OperateDialog @search="search" ref="dialogOperateRef" />
        <UpgradeDialog @search="search" ref="dialogUpgradeRef" />
@ -252,27 +254,27 @@
        <TerminalDialog ref="dialogTerminalRef" />

        <PortJumpDialog ref="dialogPortJumpRef" />
-        <HandleDialog @search="search" ref="handleRef" />
    </div>
 </template>

 <script lang="ts" setup>
+import OpDialog from '@/components/del-dialog/index.vue';
 import Tooltip from '@/components/tooltip/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import PruneDialog from '@/views/container/container/prune/index.vue';
-import ReNameDialog from '@/views/container/container/rename/index.vue';
+import RenameDialog from '@/views/container/container/rename/index.vue';
 import OperateDialog from '@/views/container/container/operate/index.vue';
 import UpgradeDialog from '@/views/container/container/upgrade/index.vue';
 import MonitorDialog from '@/views/container/container/monitor/index.vue';
 import ContainerLogDialog from '@/views/container/container/log/index.vue';
 import TerminalDialog from '@/views/container/container/terminal/index.vue';
-import HandleDialog from '@/views/container/container/handle/index.vue';
 import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import Status from '@/components/status/index.vue';
 import { reactive, onMounted, ref, computed } from 'vue';
 import {
    containerListStats,
+    containerOperator,
    inspect,
    loadContainerInfo,
    loadDockerStatus,
@ -289,7 +291,7 @@ const mobile = computed(() => {
    return globalStore.isMobile();
 });

-const loading = ref();
+const loading = ref(false);
 const data = ref();
 const selects = ref<any>([]);
 const paginationConfig = reactive({
@ -304,7 +306,7 @@ const searchName = ref();
 const searchState = ref('all');
 const dialogUpgradeRef = ref();
 const dialogPortJumpRef = ref();
-const handleRef = ref();
+const opRef = ref();

 const dockerStatus = ref('Running');
 const loadStatus = async () => {
@ -347,10 +349,10 @@ const props = withDefaults(defineProps<Filters>(), {
    filters: '',
 });

-const mydetail = ref();
+const myDetail = ref();

 const dialogContainerLogRef = ref();
-const dialogReNameRef = ref();
+const dialogRenameRef = ref();
 const dialogPruneRef = ref();

 const search = async (column?: any) => {
@ -511,7 +513,7 @@ const onInspect = async (id: string) => {
        header: i18n.global.t('commons.button.view'),
        detailInfo: detailInfo,
    };
-    mydetail.value!.acceptParams(param);
+    myDetail.value!.acceptParams(param);
 };

 const onClean = () => {
@ -554,17 +556,24 @@ const checkStatus = (operation: string, row: Container.ContainerInfo | null) =>
            return false;
    }
 };
-const onOperate = async (operation: string, row: Container.ContainerInfo | null) => {
+
+const onOperate = async (op: string, row: Container.ContainerInfo | null) => {
    let opList = row ? [row] : selects.value;
-    let msg = i18n.global.t('container.operatorHelper', [i18n.global.t('container.' + operation)]);
-    let containers = [];
+    let msg = i18n.global.t('container.operatorHelper', [i18n.global.t('container.' + op)]);
+    let names = [];
    for (const item of opList) {
-        containers.push(item.name);
+        names.push(item.name);
        if (item.isFromApp) {
-            msg = i18n.global.t('container.operatorAppHelper', [i18n.global.t('container.' + operation)]);
+            msg = i18n.global.t('container.operatorAppHelper', [i18n.global.t('container.' + op)]);
        }
    }
-    handleRef.value.acceptParams({ containers: containers, operation: operation, msg: msg });
+    opRef.value.acceptParams({
+        title: i18n.global.t('container.' + op),
+        names: names,
+        msg: msg,
+        api: containerOperator,
+        params: { names: names, operation: op },
+    });
 };

 const buttons = [
@ -607,7 +616,7 @@ const buttons = [
    {
        label: i18n.global.t('container.rename'),
        click: (row: Container.ContainerInfo) => {
-            dialogReNameRef.value!.acceptParams({ container: row.name });
+            dialogRenameRef.value!.acceptParams({ container: row.name });
        },
        disabled: (row: any) => {
            return row.isFromCompose;
--- a/frontend/src/views/container/container/rename/index.vue
+++ b/frontend/src/views/container/container/rename/index.vue
@ -26,7 +26,7 @@
 </template>

 <script lang="ts" setup>
-import { containerOperator } from '@/api/modules/container';
+import { containerRename } from '@/api/modules/container';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
@ -38,7 +38,6 @@ const loading = ref(false);

 const renameForm = reactive({
    name: '',
-    operation: 'rename',
    newName: '',
 });

@ -54,7 +53,7 @@ const onSubmitName = async (formEl: FormInstance | undefined) => {
    formEl.validate(async (valid) => {
        if (!valid) return;
        loading.value = true;
-        await containerOperator(renameForm)
+        await containerRename(renameForm)
            .then(() => {
                loading.value = false;
                emit('search');
--- a/frontend/src/views/container/image/delete/index.vue
+++ b/frontend/src/views/container/image/delete/index.vue
@ -1,43 +1,48 @@
 <template>
-    <el-drawer v-model="deleteVisible" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
-        <template #header>
-            <DrawerHeader :header="$t('container.imageDelete')" :back="handleClose" />
-        </template>
-        <el-form @submit.prevent :model="deleteForm" label-position="top">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('container.tag')" prop="tagName">
-                        <el-checkbox-group v-model="deleteForm.deleteTags">
-                            <div>
-                                <el-checkbox
-                                    style="width: 100%"
-                                    v-for="item in deleteForm.tags"
-                                    :key="item"
-                                    :value="item"
-                                    :label="item"
-                                />
-                            </div>
-                        </el-checkbox-group>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-        </el-form>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="deleteVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" :disabled="deleteForm.deleteTags.length === 0" @click="batchDelete()">
-                    {{ $t('commons.button.delete') }}
-                </el-button>
-            </span>
-        </template>
-    </el-drawer>
+    <div>
+        <el-drawer v-model="deleteVisible" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
+            <template #header>
+                <DrawerHeader :header="$t('container.imageDelete')" :back="handleClose" />
+            </template>
+            <el-form @submit.prevent :model="deleteForm" label-position="top">
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
+                        <el-form-item :label="$t('container.tag')" prop="tagName">
+                            <el-checkbox-group v-model="deleteForm.deleteTags">
+                                <div>
+                                    <el-checkbox
+                                        style="width: 100%"
+                                        v-for="item in deleteForm.tags"
+                                        :key="item"
+                                        :value="item"
+                                        :label="item"
+                                    />
+                                </div>
+                            </el-checkbox-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="deleteVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button type="primary" :disabled="deleteForm.deleteTags.length === 0" @click="batchDelete()">
+                        {{ $t('commons.button.delete') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-drawer>
+
+        <OpDialog ref="opRef" @search="onSearch" @cancel="handleClose" />
+    </div>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import { ElForm } from 'element-plus';
+import OpDialog from '@/components/del-dialog/index.vue';
 import { imageRemove } from '@/api/modules/container';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import DrawerHeader from '@/components/drawer-header/index.vue';
+import i18n from '@/lang';

 const deleteVisible = ref(false);
 const deleteForm = reactive({
@ -45,6 +50,8 @@ const deleteForm = reactive({
    deleteTags: [] as Array<string>,
 });

+const opRef = ref();
+
 interface DialogProps {
    tags: Array<string>;
 }
@ -58,14 +65,25 @@ const handleClose = () => {
 };
 const emit = defineEmits<{ (e: 'search'): void }>();

+const onSearch = () => {
+    emit('search');
+};
+
 const batchDelete = async () => {
-    let names: Array<string> = [];
+    let names = [];
    for (const item of deleteForm.deleteTags) {
        names.push(item);
    }
-    await useDeleteData(imageRemove, { names: names }, 'commons.msg.delete');
-    deleteVisible.value = false;
-    emit('search');
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: names,
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('container.image'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: imageRemove,
+        params: { names: names },
+    });
 };

 defineExpose({
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@ -95,6 +95,8 @@
        </LayoutContent>

        <CodemirrorDialog ref="mydetail" />
+
+        <OpDialog ref="opRef" @search="search" />
        <Pull ref="dialogPullRef" @search="search" />
        <Tag ref="dialogTagRef" @search="search" />
        <Push ref="dialogPushRef" @search="search" />
@ -107,6 +109,7 @@
 </template>

 <script lang="ts" setup>
+import OpDialog from '@/components/del-dialog/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import Tooltip from '@/components/tooltip/index.vue';
 import { reactive, onMounted, ref, computed } from 'vue';
@ -124,7 +127,6 @@ import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
 import { searchImage, listImageRepo, loadDockerStatus, imageRemove, inspect } from '@/api/modules/container';
 import i18n from '@/lang';
 import router from '@/routers';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();

@ -134,6 +136,8 @@ const mobile = computed(() => {

 const loading = ref(false);

+const opRef = ref();
+
 const data = ref();
 const repos = ref();
 const paginationConfig = reactive({
@ -191,6 +195,20 @@ const loadRepos = async () => {
    repos.value = res.data || [];
 };

+const onDelete = (row: Container.ImageInfo) => {
+    let names = row.tags;
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: names,
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('container.image'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: imageRemove,
+        params: { names: names },
+    });
+};
+
 const onInspect = async (id: string) => {
    const res = await inspect({ id: id, type: 'image' });
    let detailInfo = JSON.stringify(JSON.parse(res.data), null, 2);
@ -256,8 +274,7 @@ const buttons = [
        label: i18n.global.t('commons.button.delete'),
        click: async (row: Container.ImageInfo) => {
            if (!row.tags?.length || row.tags.length <= 1) {
-                await useDeleteData(imageRemove, { names: [row.id] }, 'commons.msg.delete');
-                search();
+                onDelete(row);
                return;
            }
            let params = {
--- a/frontend/src/views/container/network/index.vue
+++ b/frontend/src/views/container/network/index.vue
@ -90,6 +90,7 @@
            </template>
        </LayoutContent>

+        <OpDialog ref="opRef" @search="search" />
        <CodemirrorDialog ref="codemirror" />
        <CreateDialog @search="search" ref="dialogCreateRef" />
    </div>
@ -97,6 +98,7 @@

 <script lang="ts" setup>
 import Tooltip from '@/components/tooltip/index.vue';
+import OpDialog from '@/components/del-dialog/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import CreateDialog from '@/views/container/network/create/index.vue';
 import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
@ -105,7 +107,6 @@ import { dateFormat } from '@/utils/util';
 import { deleteNetwork, searchNetwork, inspect, loadDockerStatus, containerPrune } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 import i18n from '@/lang';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import router from '@/routers';
 import { ElMessageBox } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
@ -123,6 +124,8 @@ const paginationConfig = reactive({
 });
 const searchName = ref();

+const opRef = ref();
+
 const dockerStatus = ref('Running');
 const loadStatus = async () => {
    loading.value = true;
@ -209,8 +212,16 @@ const batchDelete = async (row: Container.NetworkInfo | null) => {
    } else {
        names.push(row.name);
    }
-    await useDeleteData(deleteNetwork, { names: names }, 'commons.msg.delete');
-    search();
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: names,
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('container.network'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: deleteNetwork,
+        params: { names: names },
+    });
 };

 const onInspect = async (id: string) => {
--- a/frontend/src/views/container/repo/index.vue
+++ b/frontend/src/views/container/repo/index.vue
@ -70,11 +70,14 @@
                </ComplexTable>
            </template>
        </LayoutContent>
+
+        <OpDialog ref="opRef" @search="search" />
        <OperatorDialog @search="search" ref="dialogRef" />
    </div>
 </template>

 <script lang="ts" setup>
+import OpDialog from '@/components/del-dialog/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import OperatorDialog from '@/views/container/repo/operator/index.vue';
 import { reactive, onMounted, ref } from 'vue';
@ -83,7 +86,6 @@ import { Container } from '@/api/interface/container';
 import { checkRepoStatus, deleteImageRepo, loadDockerStatus, searchImageRepo } from '@/api/modules/container';
 import i18n from '@/lang';
 import router from '@/routers';
-import { ElMessageBox } from 'element-plus';

 const loading = ref();
 const data = ref();
@ -96,6 +98,8 @@ const paginationConfig = reactive({
 });
 const searchName = ref();

+const opRef = ref();
+
 const dockerStatus = ref('Running');
 const loadStatus = async () => {
    loading.value = true;
@ -149,12 +153,16 @@ const onOpenDialog = async (
 };

 const onDelete = async (row: Container.RepoInfo) => {
-    ElMessageBox.confirm(i18n.global.t('commons.msg.delete'), i18n.global.t('commons.button.delete'), {
-        confirmButtonText: i18n.global.t('commons.button.confirm'),
-        cancelButtonText: i18n.global.t('commons.button.cancel'),
-    }).then(async () => {
-        await deleteImageRepo({ ids: [row.id] });
-        search();
+    let ids = [row.id];
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: [row.name],
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('container.repo'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: deleteImageRepo,
+        params: { ids: ids },
    });
 };

--- a/frontend/src/views/container/template/index.vue
+++ b/frontend/src/views/container/template/index.vue
@ -57,6 +57,7 @@
            </template>
        </LayoutContent>

+        <OpDialog ref="opRef" @search="search" />
        <DetailDialog ref="detailRef" />
        <OperatorDialog @search="search" ref="dialogRef" />
    </div>
@ -64,6 +65,7 @@

 <script lang="ts" setup>
 import Tooltip from '@/components/tooltip/index.vue';
+import OpDialog from '@/components/del-dialog/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import { reactive, onMounted, ref } from 'vue';
 import { dateFormatSimple } from '@/utils/util';
@ -71,7 +73,6 @@ import { Container } from '@/api/interface/container';
 import DetailDialog from '@/views/container/template/detail/index.vue';
 import OperatorDialog from '@/views/container/template/operator/index.vue';
 import { deleteComposeTemplate, loadDockerStatus, searchComposeTemplate } from '@/api/modules/container';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import i18n from '@/lang';
 import router from '@/routers';

@ -88,6 +89,7 @@ const paginationConfig = reactive({
 const searchName = ref();

 const detailRef = ref();
+const opRef = ref();

 const dockerStatus = ref('Running');
 const loadStatus = async () => {
@ -148,16 +150,27 @@ const onOpenDialog = async (
 };

 const onBatchDelete = async (row: Container.RepoInfo | null) => {
-    let ids: Array<number> = [];
+    let ids = [];
+    let names = [];
    if (row) {
+        names.push(row.name);
        ids.push(row.id);
    } else {
        selects.value.forEach((item: Container.RepoInfo) => {
+            names.push(item.name);
            ids.push(item.id);
        });
    }
-    await useDeleteData(deleteComposeTemplate, { ids: ids }, 'commons.msg.delete');
-    search();
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: names,
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('container.composeTemplate'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: deleteComposeTemplate,
+        params: { ids: ids },
+    });
 };

 const buttons = [
--- a/frontend/src/views/container/volume/index.vue
+++ b/frontend/src/views/container/volume/index.vue
@ -87,6 +87,8 @@
            </template>
        </LayoutContent>

+        <OpDialog ref="opRef" @search="search" />
+
        <CodemirrorDialog ref="codemirror" />
        <CreateDialog @search="search" ref="dialogCreateRef" />
    </div>
@ -94,6 +96,7 @@

 <script lang="ts" setup>
 import Tooltip from '@/components/tooltip/index.vue';
+import OpDialog from '@/components/del-dialog/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import CreateDialog from '@/views/container/volume/create/index.vue';
 import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
@ -102,7 +105,6 @@ import { computeSize, dateFormat } from '@/utils/util';
 import { deleteVolume, searchVolume, inspect, loadDockerStatus, containerPrune } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 import i18n from '@/lang';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import router from '@/routers';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox } from 'element-plus';
@ -116,6 +118,8 @@ const mobile = computed(() => {
 const loading = ref();
 const codemirror = ref();

+const opRef = ref();
+
 const data = ref();
 const selects = ref<any>([]);
 const paginationConfig = reactive({
@ -214,16 +218,24 @@ const onClean = () => {
 };

 const batchDelete = async (row: Container.VolumeInfo | null) => {
-    let names: Array<string> = [];
-    if (row === null) {
+    let names = [];
+    if (row) {
+        names.push(row.name);
+    } else {
        selects.value.forEach((item: Container.VolumeInfo) => {
            names.push(item.name);
        });
-    } else {
-        names.push(row.name);
    }
-    await useDeleteData(deleteVolume, { names: names }, 'commons.msg.delete');
-    search();
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: names,
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('container.volume'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: deleteVolume,
+        params: { names: names },
+    });
 };

 const buttons = [
--- a/frontend/src/views/cronjob/index.vue
+++ b/frontend/src/views/cronjob/index.vue
@ -15,15 +15,17 @@
                        <el-button type="primary" @click="onOpenDialog('create')">
                            {{ $t('commons.button.create') }}{{ $t('cronjob.cronTask') }}
                        </el-button>
-                        <el-button plain :disabled="selects.length === 0" @click="onBatchChangeStatus('enable')">
-                            {{ $t('commons.button.enable') }}
-                        </el-button>
-                        <el-button plain :disabled="selects.length === 0" @click="onBatchChangeStatus('disable')">
-                            {{ $t('commons.button.disable') }}
-                        </el-button>
-                        <el-button plain :disabled="selects.length === 0" @click="onDelete(null)">
-                            {{ $t('commons.button.delete') }}
-                        </el-button>
+                        <el-button-group class="ml-4">
+                            <el-button plain :disabled="selects.length === 0" @click="onBatchChangeStatus('enable')">
+                                {{ $t('commons.button.enable') }}
+                            </el-button>
+                            <el-button plain :disabled="selects.length === 0" @click="onBatchChangeStatus('disable')">
+                                {{ $t('commons.button.disable') }}
+                            </el-button>
+                            <el-button plain :disabled="selects.length === 0" @click="onDelete(null)">
+                                {{ $t('commons.button.delete') }}
+                            </el-button>
+                        </el-button-group>
                    </el-col>
                    <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                        <TableSetting @search="search()" />
@ -133,38 +135,25 @@
            </template>
        </LayoutContent>

-        <el-dialog
-            v-model="deleteVisible"
-            :title="$t('commons.button.clean')"
-            width="30%"
-            :close-on-click-modal="false"
-        >
-            <el-form ref="deleteForm" label-position="left" v-loading="delLoading">
-                <el-form-item>
-                    <el-checkbox v-model="cleanData" :label="$t('cronjob.cleanData')" />
-                    <span class="input-help">
-                        {{ $t('cronjob.cleanDataHelper') }}
-                    </span>
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="deleteVisible = false" :disabled="delLoading">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button type="primary" @click="onSubmitDelete">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
+        <OpDialog ref="opRef" @search="search">
+            <template #content>
+                <el-form class="mt-4 mb-1" v-if="showClean" ref="deleteForm" label-position="left">
+                    <el-form-item>
+                        <el-checkbox v-model="cleanData" :label="$t('cronjob.cleanData')" />
+                        <span class="input-help">
+                            {{ $t('cronjob.cleanDataHelper') }}
+                        </span>
+                    </el-form-item>
+                </el-form>
            </template>
-        </el-dialog>
-
+        </OpDialog>
        <OperateDialog @search="search" ref="dialogRef" />
        <Records @search="search" ref="dialogRecordRef" />
    </div>
 </template>

 <script lang="ts" setup>
+import OpDialog from '@/components/del-dialog/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import Tooltip from '@/components/tooltip/index.vue';
 import OperateDialog from '@/views/cronjob/operate/index.vue';
@ -181,6 +170,10 @@ const loading = ref();
 const selects = ref<any>([]);
 const isRecordShow = ref();

+const opRef = ref();
+const showClean = ref();
+const cleanData = ref();
+
 const data = ref();
 const paginationConfig = reactive({
    cacheSizeKey: 'cronjob-page-size',
@ -192,11 +185,6 @@ const paginationConfig = reactive({
 });
 const searchName = ref();

-const deleteVisible = ref();
-const deleteCronjobID = ref();
-const delLoading = ref();
-const cleanData = ref();
-
 const weekOptions = [
    { label: i18n.global.t('cronjob.monday'), value: 1 },
    { label: i18n.global.t('cronjob.tuesday'), value: 2 },
@ -259,73 +247,37 @@ const onOpenDialog = async (
 };

 const onDelete = async (row: Cronjob.CronjobInfo | null) => {
+    let names = [];
+    let ids = [];
+    showClean.value = false;
+    cleanData.value = false;
    if (row) {
-        deleteCronjobID.value = row.id;
-        if (row.type !== 'database' && row.type !== 'website' && row.type !== 'directory') {
-            deleteMessageBox();
-            return;
+        ids = [row.id];
+        names = [row.name];
+        if (row.type === 'database' || row.type === 'website' || row.type === 'directory') {
+            showClean.value = true;
        }
-        deleteVisible.value = true;
    } else {
-        deleteCronjobID.value = 0;
        for (const item of selects.value) {
+            names.push(item.name);
+            ids.push(item.id);
            if (item.type === 'database' || item.type === 'website' || item.type === 'directory') {
-                deleteVisible.value = true;
-                return;
+                showClean.value = true;
            }
        }
-        deleteMessageBox();
    }
-};
-
-const deleteMessageBox = async () => {
-    let ids: Array<number> = [];
-    if (deleteCronjobID.value) {
-        ids.push(deleteCronjobID.value);
-    } else {
-        selects.value.forEach((item: Cronjob.CronjobInfo) => {
-            ids.push(item.id);
-        });
-    }
-    ElMessageBox.confirm(i18n.global.t('commons.msg.delete'), i18n.global.t('commons.msg.deleteTitle'), {
-        confirmButtonText: i18n.global.t('commons.button.confirm'),
-        cancelButtonText: i18n.global.t('commons.button.cancel'),
-        type: 'info',
-    }).then(async () => {
-        await deleteCronjob(ids, false)
-            .then(() => {
-                delLoading.value = false;
-                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                search();
-            })
-            .catch(() => {
-                delLoading.value = false;
-            });
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: names,
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('cronjob.cronTask'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: deleteCronjob,
+        params: { ids: ids, cleanData: cleanData.value },
    });
 };

-const onSubmitDelete = async () => {
-    let ids: Array<number> = [];
-    if (deleteCronjobID.value) {
-        ids.push(deleteCronjobID.value);
-    } else {
-        selects.value.forEach((item: Cronjob.CronjobInfo) => {
-            ids.push(item.id);
-        });
-    }
-    delLoading.value = true;
-    await deleteCronjob(ids, cleanData.value)
-        .then(() => {
-            delLoading.value = false;
-            deleteVisible.value = false;
-            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-            search();
-        })
-        .catch(() => {
-            delLoading.value = false;
-        });
-};
-
 const onChangeStatus = async (id: number, status: string) => {
    ElMessageBox.confirm(i18n.global.t('cronjob.' + status + 'Msg'), i18n.global.t('cronjob.changeStatus'), {
        confirmButtonText: i18n.global.t('commons.button.confirm'),
--- a/frontend/src/views/host/firewall/ip/index.vue
+++ b/frontend/src/views/host/firewall/ip/index.vue
@ -126,11 +126,14 @@
                </LayoutContent>
            </div>
        </div>
+
+        <OpDialog ref="opRef" @search="search" />
        <OperateDialog @search="search" ref="dialogRef" />
    </div>
 </template>

 <script lang="ts" setup>
+import OpDialog from '@/components/del-dialog/index.vue';
 import OperateDialog from '@/views/host/firewall/ip/operate/index.vue';
 import FireRouter from '@/views/host/firewall/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
@ -153,6 +156,8 @@ const maskShow = ref(true);
 const fireStatus = ref('running');
 const fireStatusRef = ref();

+const opRef = ref();
+
 const data = ref();
 const paginationConfig = reactive({
    cacheSizeKey: 'firewall-ip-page-size',
@ -249,43 +254,40 @@ const onChangeStatus = async (row: Host.RuleInfo, status: string) => {
 };

 const onDelete = async (row: Host.RuleIP | null) => {
-    ElMessageBox.confirm(i18n.global.t('commons.msg.delete'), i18n.global.t('commons.msg.deleteTitle'), {
-        confirmButtonText: i18n.global.t('commons.button.confirm'),
-        cancelButtonText: i18n.global.t('commons.button.cancel'),
-        type: 'warning',
-    }).then(async () => {
-        let rules = [];
-        if (row) {
+    let names = [];
+    let rules = [];
+    if (row) {
+        rules.push({
+            operation: 'remove',
+            address: row.address,
+            port: '',
+            source: '',
+            protocol: '',
+            strategy: row.strategy,
+        });
+        names = [row.address];
+    } else {
+        for (const item of selects.value) {
            rules.push({
                operation: 'remove',
-                address: row.address,
+                address: item.address,
                port: '',
                source: '',
                protocol: '',
-                strategy: row.strategy,
+                strategy: item.strategy,
            });
-        } else {
-            for (const item of selects.value) {
-                rules.push({
-                    operation: 'remove',
-                    address: item.address,
-                    port: '',
-                    source: '',
-                    protocol: '',
-                    strategy: item.strategy,
-                });
-            }
+            names.push(item.address);
        }
-        loading.value = true;
-        await batchOperateRule({ type: 'address', rules: rules })
-            .then(() => {
-                loading.value = false;
-                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                search();
-            })
-            .catch(() => {
-                loading.value = false;
-            });
+    }
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: names,
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('firewall.ipRule'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: batchOperateRule,
+        params: { type: 'address', rules: rules },
    });
 };

--- a/frontend/src/views/host/firewall/port/index.vue
+++ b/frontend/src/views/host/firewall/port/index.vue
@ -177,12 +177,14 @@
            </div>
        </div>

+        <OpDialog ref="opRef" @search="search" />
        <OperateDialog @search="search" ref="dialogRef" />
    </div>
 </template>

 <script lang="ts" setup>
 import FireRouter from '@/views/host/firewall/index.vue';
+import OpDialog from '@/components/del-dialog/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import OperateDialog from '@/views/host/firewall/port/operate/index.vue';
 import FireStatus from '@/views/host/firewall/status/index.vue';
@ -206,6 +208,8 @@ const fireStatus = ref('running');
 const fireName = ref();
 const fireStatusRef = ref();

+const opRef = ref();
+
 const data = ref();
 const paginationConfig = reactive({
    cacheSizeKey: 'firewall-port-page-size',
@ -316,43 +320,40 @@ const onChange = async (info: any) => {
 };

 const onDelete = async (row: Host.RuleInfo | null) => {
-    ElMessageBox.confirm(i18n.global.t('commons.msg.delete'), i18n.global.t('commons.msg.deleteTitle'), {
-        confirmButtonText: i18n.global.t('commons.button.confirm'),
-        cancelButtonText: i18n.global.t('commons.button.cancel'),
-        type: 'warning',
-    }).then(async () => {
-        let rules = [];
-        if (row) {
+    let names = [];
+    let rules = [];
+    if (row) {
+        rules.push({
+            operation: 'remove',
+            address: row.address,
+            port: row.port,
+            source: '',
+            protocol: row.protocol,
+            strategy: row.strategy,
+        });
+        names = [row.port + ' (' + row.protocol + ')'];
+    } else {
+        for (const item of selects.value) {
+            names.push(item.port + ' (' + item.protocol + ')');
            rules.push({
                operation: 'remove',
-                address: row.address,
-                port: row.port,
+                address: item.address,
+                port: item.port,
                source: '',
-                protocol: row.protocol,
-                strategy: row.strategy,
+                protocol: item.protocol,
+                strategy: item.strategy,
            });
-        } else {
-            for (const item of selects.value) {
-                rules.push({
-                    operation: 'remove',
-                    address: item.address,
-                    port: item.port,
-                    source: '',
-                    protocol: item.protocol,
-                    strategy: item.strategy,
-                });
-            }
        }
-        loading.value = true;
-        await batchOperateRule({ type: 'port', rules: rules })
-            .then(() => {
-                loading.value = false;
-                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                search();
-            })
-            .catch(() => {
-                loading.value = false;
-            });
+    }
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: names,
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('firewall.portRule'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: batchOperateRule,
+        params: { type: 'port', rules: rules },
    });
 };

--- a/frontend/src/views/host/terminal/command/index.vue
+++ b/frontend/src/views/host/terminal/command/index.vue
@ -72,14 +72,16 @@
                </span>
            </template>
        </el-drawer>
+
+        <OpDialog ref="opRef" @search="search" />
    </div>
 </template>

 <script setup lang="ts">
 import { Command } from '@/api/interface/command';
+import OpDialog from '@/components/del-dialog/index.vue';
 import { addCommand, editCommand, deleteCommand, getCommandPage } from '@/api/modules/host';
 import { reactive, ref } from 'vue';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import type { ElForm } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
@ -97,6 +99,8 @@ const paginationConfig = reactive({
 });
 const info = ref();

+const opRef = ref();
+
 type FormInstance = InstanceType<typeof ElForm>;
 const commandInfoRef = ref<FormInstance>();
 const rules = reactive({
@ -155,16 +159,27 @@ const onEdit = async (row: Command.CommandInfo | null) => {
 };

 const batchDelete = async (row: Command.CommandInfo | null) => {
-    let ids: Array<number> = [];
-    if (row === null) {
+    let names = [];
+    let ids = [];
+    if (row) {
+        ids = [row.id];
+        names = [row.name];
+    } else {
        selects.value.forEach((item: Command.CommandInfo) => {
            ids.push(item.id);
+            names.push(item.name);
        });
-    } else {
-        ids.push(row.id);
    }
-    await useDeleteData(deleteCommand, { ids: ids }, 'commons.msg.delete');
-    search();
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: names,
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('terminal.quickCommand'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: deleteCommand,
+        params: { ids: ids },
+    });
 };

 const buttons = [
--- a/frontend/src/views/host/terminal/host/index.vue
+++ b/frontend/src/views/host/terminal/host/index.vue
@ -71,6 +71,7 @@
            </template>
        </LayoutContent>

+        <OpDialog ref="opRef" @search="search" />
        <OperateDialog @search="search" ref="dialogRef" />
        <GroupDialog @search="search" ref="dialogGroupRef" />
        <GroupChangeDialog @search="search" ref="dialogGroupChangeRef" />
@ -79,6 +80,7 @@

 <script setup lang="ts">
 import GroupDialog from '@/components/group/index.vue';
+import OpDialog from '@/components/del-dialog/index.vue';
 import GroupChangeDialog from '@/views/host/terminal/host/change-group/index.vue';
 import OperateDialog from '@/views/host/terminal/host/operate/index.vue';
 import { deleteHost, searchHosts } from '@/api/modules/host';
@ -86,7 +88,6 @@ import { GetGroupList } from '@/api/modules/group';
 import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { Host } from '@/api/interface/host';
-import { useDeleteData } from '@/hooks/use-delete-data';

 const loading = ref();
 const data = ref();
@ -102,6 +103,8 @@ const info = ref();
 const group = ref<string>('');
 const dialogGroupChangeRef = ref();

+const opRef = ref();
+
 const acceptParams = () => {
    search();
 };
@ -131,16 +134,27 @@ const onOpenGroupDialog = () => {
 };

 const onBatchDelete = async (row: Host.Host | null) => {
-    let ids: Array<number> = [];
+    let names = [];
+    let ids = [];
    if (row) {
-        ids.push(row.id);
+        names = [row.name + '[' + row.addr + ']'];
+        ids = [row.id];
    } else {
        selects.value.forEach((item: Host.Host) => {
+            names.push(item.name + '[' + item.addr + ']');
            ids.push(item.id);
        });
    }
-    await useDeleteData(deleteHost, { ids: ids }, 'commons.msg.delete');
-    search();
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: names,
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('terminal.host'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: deleteHost,
+        params: { ids: ids },
+    });
 };

 const loadGroups = async () => {
--- a/frontend/src/views/setting/snapshot/index.vue
+++ b/frontend/src/views/setting/snapshot/index.vue
@ -139,17 +139,19 @@
                </span>
            </template>
        </el-drawer>
+
+        <OpDialog ref="opRef" @search="search" />
        <SnapStatus ref="snapStatusRef" @search="search" />
    </div>
 </template>

 <script setup lang="ts">
+import OpDialog from '@/components/del-dialog/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { snapshotCreate, searchSnapshotPage, snapshotDelete, updateSnapshotDescription } from '@/api/modules/setting';
 import { onMounted, reactive, ref } from 'vue';
 import { dateFormat } from '@/utils/util';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import { ElForm } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
@ -171,6 +173,8 @@ const paginationConfig = reactive({
 });
 const searchName = ref();

+const opRef = ref();
+
 const snapStatusRef = ref();
 const recoverStatusRef = ref();
 const importRef = ref();
@ -241,16 +245,27 @@ const loadBackups = async () => {
 };

 const batchDelete = async (row: Setting.SnapshotInfo | null) => {
-    let ids: Array<number> = [];
-    if (row === null) {
+    let names = [];
+    let ids = [];
+    if (row) {
+        ids.push(row.id);
+        names.push(row.name);
+    } else {
        selects.value.forEach((item: Setting.SnapshotInfo) => {
            ids.push(item.id);
+            names.push(item.name);
        });
-    } else {
-        ids.push(row.id);
    }
-    await useDeleteData(snapshotDelete, { ids: ids }, 'commons.msg.delete');
-    search();
+    opRef.value.acceptParams({
+        title: i18n.global.t('commons.button.delete'),
+        names: names,
+        msg: i18n.global.t('commons.msg.operatorHelper', [
+            i18n.global.t('setting.snapshot'),
+            i18n.global.t('commons.button.delete'),
+        ]),
+        api: snapshotDelete,
+        params: { ids: ids },
+    });
 };

 function restForm() {