diff --git a/maxkey-web-frontend/maxkey-web-app/src/app/shared/consts.ts b/maxkey-web-frontend/maxkey-web-app/src/app/shared/consts.ts
index 2bd226080..d5cd006f3 100644
--- a/maxkey-web-frontend/maxkey-web-app/src/app/shared/consts.ts
+++ b/maxkey-web-frontend/maxkey-web-app/src/app/shared/consts.ts
@@ -26,5 +26,5 @@ export const CONSTS = {
   REDIRECT_URI: 'redirect_uri',
   REMEMBER: 'remember_me',
   TOKEN: '_token',
-  VERSION: 'v4.1.0 GA'
+  VERSION: 'v4.1.1 GA'
 };
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/access/access.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/access/access.component.html
index 04bf5f520..bb6ef0c09 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/access/access.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/access/access.component.html
@@ -8,23 +8,39 @@
             <nz-form-item>
               <nz-form-label nzFor="groupName">{{ 'mxk.groups.name' | i18n }}</nz-form-label>
               <nz-form-control>
-                <input nz-input [(ngModel)]="groupQuery.params.groupName" [ngModelOptions]="{ standalone: true }"
-                  name="groupName" placeholder="" id="groupName" />
+                <input
+                  nz-input
+                  [(ngModel)]="groupQuery.params.groupName"
+                  [ngModelOptions]="{ standalone: true }"
+                  name="groupName"
+                  placeholder=""
+                  id="groupName"
+                />
               </nz-form-control>
             </nz-form-item>
           </div>
           <div nz-col [nzSpan]="8" [class.text-right]="groupQuery.expandForm">
             <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="groupQuery.submitLoading">{{
               'mxk.text.query' | i18n
-              }}</button>
+            }}</button>
           </div>
         </form>
       </nz-card>
-      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
-        [nzData]="groupQuery.results.rows" [nzFrontPagination]="false" [nzTotal]="groupQuery.results.records"
-        [nzPageSizeOptions]="groupQuery.params.pageSizeOptions" [nzPageSize]="groupQuery.params.pageSize"
-        [nzPageIndex]="groupQuery.params.pageNumber" [nzLoading]="this.groupQuery.tableLoading"
-        (nzQueryParams)="onGroupQueryParamsChange($event)">
+      <nz-table
+        #dynamicTable
+        nzTableLayout="auto"
+        nzSize="small"
+        nzBordered
+        nzShowSizeChanger
+        [nzData]="groupQuery.results.rows"
+        [nzFrontPagination]="false"
+        [nzTotal]="groupQuery.results.records"
+        [nzPageSizeOptions]="groupQuery.params.pageSizeOptions"
+        [nzPageSize]="groupQuery.params.pageSize"
+        [nzPageIndex]="groupQuery.params.pageNumber"
+        [nzLoading]="this.groupQuery.tableLoading"
+        (nzQueryParams)="onGroupQueryParamsChange($event)"
+      >
         <thead>
           <tr>
             <th></th>
@@ -35,8 +51,11 @@
         </thead>
         <tbody>
           <tr *ngFor="let data of groupQuery.results.rows">
-            <td [nzChecked]="groupQuery.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onGroupTableItemChecked(data.id, data.groupName, $event)"></td>
+            <td
+              [nzChecked]="groupQuery.tableCheckedId.has(data.id)"
+              [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onGroupTableItemChecked(data.id, data.groupName, $event)"
+            ></td>
             <td nzAlign="left" style="display: none">
               <span>{{ data.id }}</span>
             </td>
@@ -55,26 +74,37 @@
             <div nz-col nzMd="10" nzSm="24">
               <nz-form-item>
                 <nz-form-label nzFor="roleName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
-                <input nz-input [(ngModel)]="query.params.groupName" [ngModelOptions]="{ standalone: true }" readonly
-                  placeholder="" disabled />
+                <input
+                  nz-input
+                  [(ngModel)]="query.params.groupName"
+                  [ngModelOptions]="{ standalone: true }"
+                  readonly
+                  placeholder=""
+                  disabled
+                />
               </nz-form-item>
             </div>
             <div nz-col nzMd="10" nzSm="24">
               <nz-form-item>
                 <nz-form-label nzFor="name">{{ 'mxk.apps.name' | i18n }}</nz-form-label>
                 <nz-form-control>
-                  <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }"
-                    name="appName" placeholder="" id="appName" />
+                  <input
+                    nz-input
+                    [(ngModel)]="query.params.appName"
+                    [ngModelOptions]="{ standalone: true }"
+                    name="appName"
+                    placeholder=""
+                    id="appName"
+                  />
                 </nz-form-control>
               </nz-form-item>
             </div>
             <div nz-col [nzSpan]="query.expandForm ? 24 : 4" [class.text-right]="query.expandForm">
-              <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query'
-                | i18n }}</button>
-              <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset'
-                | i18n }}</button>
+              <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
+              <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
               <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
+              >
             </div>
           </div>
         </form>
@@ -82,24 +112,46 @@
       <nz-card [nzBordered]="false">
         <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
           <div nz-col [nzSpan]="24" class="table-list-toolbar">
-            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n
-              }}</button>
-            <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger
-              class="mx-sm">{{
-              'mxk.text.delete' | i18n
-              }}</button>
+            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
+            <button
+              nz-button
+              type="button"
+              nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+              nzPopconfirmPlacement="left"
+              [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+              (nzOnConfirm)="onBatchDelete()"
+              [nzType]="'primary'"
+              nzDanger
+              class="mx-sm"
+              >{{ 'mxk.text.delete' | i18n }}</button
+            >
           </div>
 
           <div nz-col nzMd="24" nzSm="24">
-            <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
-              [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
-              [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
-              [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
-              (nzQueryParams)="onQueryParamsChange($event)">
+            <nz-table
+              #dynamicTable
+              nzTableLayout="auto"
+              nzSize="small"
+              nzBordered
+              nzShowSizeChanger
+              [nzData]="query.results.rows"
+              [nzFrontPagination]="false"
+              [nzTotal]="query.results.records"
+              [nzPageSizeOptions]="query.params.pageSizeOptions"
+              [nzPageSize]="query.params.pageSize"
+              [nzPageIndex]="query.params.pageNumber"
+              [nzLoading]="this.query.tableLoading"
+              (nzQueryParams)="onQueryParamsChange($event)"
+            >
               <thead>
                 <tr>
-                  <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
-                    (nzCheckedChange)="onTableAllChecked($event)"></th>
+                  <th
+                    [nzChecked]="query.checked"
+                    [nzIndeterminate]="query.indeterminate"
+                    (nzCheckedChange)="onTableAllChecked($event)"
+                  ></th>
                   <th nzAlign="center" style="display: none">Id</th>
                   <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
                   <th nzAlign="center">{{ 'mxk.apps.icon' | i18n }}</th>
@@ -110,8 +162,11 @@
               </thead>
               <tbody>
                 <tr *ngFor="let data of query.results.rows">
-                  <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
-                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+                  <td
+                    [nzChecked]="query.tableCheckedId.has(data.id)"
+                    [nzDisabled]="data.disabled"
+                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"
+                  ></td>
                   <td nzAlign="left"> {{ data.groupName }}</td>
                   <td nzAlign="center"><img height="30" border="0px" src="{{ data.iconBase64 }}" /></td>
                   <td nzAlign="left"> {{ data.appName }}</td>
@@ -147,8 +202,18 @@
                   </td>
                   <td nzAlign="center" nzBreakWord="false">
                     <div nz-col>
-                      <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete'
-                        | i18n }}</button>
+                      <button
+                        nz-button
+                        type="button"
+                        nz-popconfirm
+                        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+                        nzPopconfirmPlacement="left"
+                        [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+                        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+                        (nzOnConfirm)="onDelete(data.id)"
+                        nzDanger
+                        >{{ 'mxk.text.delete' | i18n }}</button
+                      >
                     </div>
                   </td>
                 </tr>
@@ -159,4 +224,4 @@
       </nz-card>
     </div>
   </div>
-</nz-card>
\ No newline at end of file
+</nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/access/access.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/access/access.component.ts
index bfebb9849..c616ab01b 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/access/access.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/access/access.component.ts
@@ -67,33 +67,33 @@ export class AccessComponent implements OnInit {
     indeterminate: boolean;
     checked: boolean;
   } = {
-      params: {
-        displayName: '',
-        username: '',
-        groupId: '',
-        groupName: '',
-        appName: '',
-        appId: '',
-        startDate: '',
-        endDate: '',
-        startDatePicker: addDays(new Date(), -30),
-        endDatePicker: new Date(),
-        pageSize: 10,
-        pageNumber: 1,
-        pageSizeOptions: [10, 20, 50]
-      },
-      results: {
-        records: 0,
-        rows: []
-      },
-      expandForm: false,
-      submitLoading: false,
-      tableLoading: false,
-      tableInitialize: true,
-      tableCheckedId: new Set<String>(),
-      indeterminate: false,
-      checked: false
-    };
+    params: {
+      displayName: '',
+      username: '',
+      groupId: '',
+      groupName: '',
+      appName: '',
+      appId: '',
+      startDate: '',
+      endDate: '',
+      startDatePicker: addDays(new Date(), -30),
+      endDatePicker: new Date(),
+      pageSize: 10,
+      pageNumber: 1,
+      pageSizeOptions: [10, 20, 50]
+    },
+    results: {
+      records: 0,
+      rows: []
+    },
+    expandForm: false,
+    submitLoading: false,
+    tableLoading: false,
+    tableInitialize: true,
+    tableCheckedId: new Set<String>(),
+    indeterminate: false,
+    checked: false
+  };
 
   constructor(
     private modalService: NzModalService,
@@ -106,7 +106,7 @@ export class AccessComponent implements OnInit {
     private route: ActivatedRoute,
     private cdr: ChangeDetectorRef,
     private http: _HttpClient
-  ) { }
+  ) {}
 
   ngOnInit(): void {
     if (this.route.snapshot.queryParams['groupId']) {
@@ -128,10 +128,9 @@ export class AccessComponent implements OnInit {
     this.fetch();
   }
 
-  onReset(): void { }
+  onReset(): void {}
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.accessService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -185,8 +184,7 @@ export class AccessComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.accessService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -263,23 +261,23 @@ export class AccessComponent implements OnInit {
     indeterminate: boolean;
     checked: boolean;
   } = {
-      params: {
-        groupName: '',
-        pageSize: 10,
-        pageNumber: 1,
-        pageSizeOptions: [10, 20, 50]
-      },
-      results: {
-        records: 0,
-        rows: []
-      },
-      expandForm: false,
-      submitLoading: false,
-      tableLoading: false,
-      tableCheckedId: new Set<String>(),
-      indeterminate: false,
-      checked: false
-    };
+    params: {
+      groupName: '',
+      pageSize: 10,
+      pageNumber: 1,
+      pageSizeOptions: [10, 20, 50]
+    },
+    results: {
+      records: 0,
+      rows: []
+    },
+    expandForm: false,
+    submitLoading: false,
+    tableLoading: false,
+    tableCheckedId: new Set<String>(),
+    indeterminate: false,
+    checked: false
+  };
 
   onGroupSearch(): void {
     this.fetchGroup();
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.html
index 751ea4161..6f6ec2dcc 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.html
@@ -8,12 +8,18 @@
           <nz-form-label nzFor="appName">{{ 'mxk.accounts.appName' | i18n }}</nz-form-label>
           <nz-form-control>
             <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
-              <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" name="appName"
-                     readonly placeholder="" id="appName" />
+              <input
+                nz-input
+                [(ngModel)]="query.params.appName"
+                [ngModelOptions]="{ standalone: true }"
+                name="appName"
+                readonly
+                placeholder=""
+                id="appName"
+              />
             </nz-input-group>
             <ng-template #suffixButton>
-              <button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n
-                }}</button>
+              <button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n }}</button>
             </ng-template>
           </nz-form-control>
         </nz-form-item>
@@ -22,18 +28,24 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.accounts.username' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input nz-input [(ngModel)]="query.params.username" [ngModelOptions]="{ standalone: true }" name="username"
-                   placeholder="" id="username" />
+            <input
+              nz-input
+              [(ngModel)]="query.params.username"
+              [ngModelOptions]="{ standalone: true }"
+              name="username"
+              placeholder=""
+              id="username"
+            />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
-          i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
         <button nz-button type="reset" (click)="onReset()" class="mx-sm">{{ 'mxk.text.reset' | i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
+        >
       </div>
     </div>
   </form>
@@ -41,45 +53,79 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
-      'mxk.text.delete' | i18n
-      }}</button>
+    <button
+      nz-button
+      type="button"
+      nz-popconfirm
+      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left"
+      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+      (nzOnConfirm)="onBatchDelete()"
+      [nzType]="'primary'"
+      nzDanger
+      class="mx-sm"
+      >{{ 'mxk.text.delete' | i18n }}</button
+    >
   </div>
-  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
-            [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
-            [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
-            (nzQueryParams)="onQueryParamsChange($event)">
+  <nz-table
+    #dynamicTable
+    nzTableLayout="auto"
+    nzSize="small"
+    nzBordered
+    nzShowSizeChanger
+    [nzData]="query.results.rows"
+    [nzFrontPagination]="false"
+    [nzTotal]="query.results.records"
+    [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize"
+    [nzPageIndex]="query.params.pageNumber"
+    [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)"
+  >
     <thead>
-    <tr>
-      <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
-          (nzCheckedChange)="onTableAllChecked($event)"></th>
-      <th nzAlign="center" style="display: none">Id</th>
-      <th nzAlign="center">{{ 'mxk.accounts.username' | i18n }}</th>
-      <th nzAlign="center">{{ 'mxk.accounts.displayName' | i18n }}</th>
-      <th nzAlign="center">{{ 'mxk.accounts.appName' | i18n }}</th>
-      <th nzAlign="center">{{ 'mxk.accounts.relatedUsername' | i18n }}</th>
-      <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.action' | i18n }}</th>
-    </tr>
+      <tr>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th nzAlign="center" style="display: none">Id</th>
+        <th nzAlign="center">{{ 'mxk.accounts.username' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.accounts.displayName' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.accounts.appName' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.accounts.relatedUsername' | i18n }}</th>
+        <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.action' | i18n }}</th>
+      </tr>
     </thead>
     <tbody>
-    <tr *ngFor="let data of query.results.rows">
-      <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
-      <td nzAlign="left" style="display: none">
-        <span>{{ data.id }}</span>
-      </td>
-      <td nzAlign="left" nzBreakWord="false">{{ data.username }}</td>
-      <td nzAlign="left" nzBreakWord="false">{{ data.displayName }}</td>
-      <td nzAlign="left" nzBreakWord="false">{{ data.appName }}</td>
-      <td nzAlign="left" nzBreakWord="false">{{ data.relatedUsername }}</td>
+      <tr *ngFor="let data of query.results.rows">
+        <td
+          [nzChecked]="query.tableCheckedId.has(data.id)"
+          [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
+        ></td>
+        <td nzAlign="left" style="display: none">
+          <span>{{ data.id }}</span>
+        </td>
+        <td nzAlign="left" nzBreakWord="false">{{ data.username }}</td>
+        <td nzAlign="left" nzBreakWord="false">{{ data.displayName }}</td>
+        <td nzAlign="left" nzBreakWord="false">{{ data.appName }}</td>
+        <td nzAlign="left" nzBreakWord="false">{{ data.relatedUsername }}</td>
 
-      <td nzAlign="center" nzBreakWord="false">
-        <div nz-col>
-          <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n
-            }}</button>
-        </div>
-      </td>
-    </tr>
+        <td nzAlign="center" nzBreakWord="false">
+          <div nz-col>
+            <button
+              nz-button
+              type="button"
+              nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+              nzPopconfirmPlacement="left"
+              [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+              (nzOnConfirm)="onDelete(data.id)"
+              nzDanger
+              >{{ 'mxk.text.delete' | i18n }}</button
+            >
+          </div>
+        </td>
+      </tr>
     </tbody>
   </nz-table>
 </nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.ts
index afafad4e8..b2f9c1164 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.ts
@@ -147,8 +147,7 @@ export class AccountsComponent implements OnInit {
       }
     });
   }
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.accountsService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -180,8 +179,7 @@ export class AccountsComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.accountsService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.html
index 7848f3b04..6c829c4f5 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.html
@@ -56,9 +56,20 @@
       'mxk.text.add' | i18n
     }}</button>
 
-    <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
-      'mxk.text.delete' | i18n
-    }}</button>
+    <button
+      nz-button
+      type="button"
+      nz-popconfirm
+      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left"
+      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+      (nzOnConfirm)="onBatchDelete()"
+      [nzType]="'primary'"
+      nzDanger
+      class="mx-sm"
+      >{{ 'mxk.text.delete' | i18n }}</button
+    >
   </div>
   <nz-table
     #dynamicTable
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.ts
index f907cdcfc..6517f7df6 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.ts
@@ -118,8 +118,7 @@ export class AppsComponent implements OnInit {
 
   onReset(): void {}
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.appsService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/accounts-strategy/accounts-strategy.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/accounts-strategy/accounts-strategy.component.html
index c27d8a647..c85344414 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/accounts-strategy/accounts-strategy.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/accounts-strategy/accounts-strategy.component.html
@@ -25,9 +25,20 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
-      'mxk.text.delete' | i18n
-    }}</button>
+    <button
+      nz-button
+      type="button"
+      nz-popconfirm
+      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left"
+      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+      (nzOnConfirm)="onBatchDelete()"
+      [nzType]="'primary'"
+      nzDanger
+      class="mx-sm"
+      >{{ 'mxk.text.delete' | i18n }}</button
+    >
   </div>
   <nz-table
     #dynamicTable
@@ -77,7 +88,18 @@
         <td nzAlign="left" nzBreakWord="false">
           <div nz-col>
             <button nz-button type="button" (click)="onEdit($event, data.id)" style="float: left">{{ 'mxk.text.edit' | i18n }}</button>
-            <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
+            <button
+              nz-button
+              type="button"
+              nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+              nzPopconfirmPlacement="left"
+              [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+              (nzOnConfirm)="onDelete(data.id)"
+              nzDanger
+              >{{ 'mxk.text.delete' | i18n }}</button
+            >
           </div>
         </td>
       </tr>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/accounts-strategy/accounts-strategy.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/accounts-strategy/accounts-strategy.component.ts
index 6c1dba41c..33163ea4e 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/accounts-strategy/accounts-strategy.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/accounts-strategy/accounts-strategy.component.ts
@@ -108,8 +108,7 @@ export class AccountsStrategyComponent implements OnInit {
 
   onReset(): void {}
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.accountsStrategyService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -160,8 +159,7 @@ export class AccountsStrategyComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.accountsStrategyService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/adapters/adapters.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/adapters/adapters.component.html
index 3c397b55e..afee300f4 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/adapters/adapters.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/adapters/adapters.component.html
@@ -25,9 +25,20 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
-      'mxk.text.delete' | i18n
-    }}</button>
+    <button
+      nz-button
+      type="button"
+      nz-popconfirm
+      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left"
+      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+      (nzOnConfirm)="onBatchDelete()"
+      [nzType]="'primary'"
+      nzDanger
+      class="mx-sm"
+      >{{ 'mxk.text.delete' | i18n }}</button
+    >
   </div>
   <nz-table
     #dynamicTable
@@ -75,7 +86,18 @@
         <td nzAlign="left" nzBreakWord="false">
           <div nz-col>
             <button nz-button type="button" (click)="onEdit($event, data.id)" style="float: left">{{ 'mxk.text.edit' | i18n }}</button>
-            <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
+            <button
+              nz-button
+              type="button"
+              nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+              nzPopconfirmPlacement="left"
+              [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+              (nzOnConfirm)="onDelete(data.id)"
+              nzDanger
+              >{{ 'mxk.text.delete' | i18n }}</button
+            >
           </div>
         </td>
       </tr>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/adapters/adapters.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/adapters/adapters.component.ts
index 8ec1ed7c4..5fd962057 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/adapters/adapters.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/adapters/adapters.component.ts
@@ -108,8 +108,7 @@ export class AdaptersComponent implements OnInit {
 
   onReset(): void {}
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.adaptersService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -162,8 +161,7 @@ export class AdaptersComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.adaptersService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.html
index ef02721e8..7a176f417 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.html
@@ -7,69 +7,105 @@
         <nz-form-item>
           <nz-form-label nzFor="connName">{{ 'mxk.connectors.connName' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input nz-input [(ngModel)]="query.params.connName" [ngModelOptions]="{ standalone: true }"
-                   name="connName" placeholder="" id="connName" />
+            <input
+              nz-input
+              [(ngModel)]="query.params.connName"
+              [ngModelOptions]="{ standalone: true }"
+              name="connName"
+              placeholder=""
+              id="connName"
+            />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{
-          'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{
-          'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
+        >
       </div>
     </div>
   </form>
 </nz-card>
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
-    <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n
-      }}</button>
-    <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
-      'mxk.text.delete' | i18n
-      }}</button>
+    <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
+    <button
+      nz-button
+      type="button"
+      nz-popconfirm
+      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left"
+      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+      (nzOnConfirm)="onBatchDelete()"
+      [nzType]="'primary'"
+      nzDanger
+      class="mx-sm"
+      >{{ 'mxk.text.delete' | i18n }}</button
+    >
   </div>
-  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
-            [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
-            [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
-            [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
-            (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
+  <nz-table
+    #dynamicTable
+    nzTableLayout="auto"
+    nzSize="small"
+    nzBordered
+    nzShowSizeChanger
+    [nzData]="query.results.rows"
+    [nzFrontPagination]="false"
+    [nzTotal]="query.results.records"
+    [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize"
+    [nzPageIndex]="query.params.pageNumber"
+    [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)"
+    nzWidth="100%"
+  >
     <thead>
-    <tr>
-      <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
-          (nzCheckedChange)="onTableAllChecked($event)"></th>
-      <th nzAlign="center" style="display: none">Id</th>
-      <th nzAlign="center">{{ 'mxk.connectors.connName' | i18n }}</th>
-      <th nzAlign="center">{{ 'mxk.connectors.justInTime' | i18n }}</th>
-      <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
-      <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | i18n }}</th>
-    </tr>
+      <tr>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th nzAlign="center" style="display: none">Id</th>
+        <th nzAlign="center">{{ 'mxk.connectors.connName' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.connectors.justInTime' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
+        <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | i18n }}</th>
+      </tr>
     </thead>
     <tbody>
-    <tr *ngFor="let data of query.results.rows">
-      <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
-      <td nzAlign="left" style="display: none">
-        <span>{{ data.id }}</span>
-      </td>
+      <tr *ngFor="let data of query.results.rows">
+        <td
+          [nzChecked]="query.tableCheckedId.has(data.id)"
+          [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
+        ></td>
+        <td nzAlign="left" style="display: none">
+          <span>{{ data.id }}</span>
+        </td>
 
-      <td nzAlign="left"> {{ data.connName }}</td>
-      <td nzAlign="center" *ngIf="data.justInTime == 1">{{ 'mxk.text.yes' | i18n }}</td>
-      <td nzAlign="center" *ngIf="data.justInTime == 0">{{ 'mxk.text.no' | i18n }}</td>
-      <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
-                               style="color: green"></i></td>
-      <td nzAlign="center" nzBreakWord="false">
-        <div nz-col>
-          <button nz-button type="button" (click)="onEdit($event, data.id)">{{
-            'mxk.text.edit' | i18n }}</button>
-          <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{
-            'mxk.text.delete' | i18n }}</button>
-        </div>
-      </td>
-    </tr>
+        <td nzAlign="left"> {{ data.connName }}</td>
+        <td nzAlign="center" *ngIf="data.justInTime == 1">{{ 'mxk.text.yes' | i18n }}</td>
+        <td nzAlign="center" *ngIf="data.justInTime == 0">{{ 'mxk.text.no' | i18n }}</td>
+        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+        <td nzAlign="center" nzBreakWord="false">
+          <div nz-col>
+            <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' | i18n }}</button>
+            <button
+              nz-button
+              type="button"
+              nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+              nzPopconfirmPlacement="left"
+              [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+              (nzOnConfirm)="onDelete(data.id)"
+              nzDanger
+              >{{ 'mxk.text.delete' | i18n }}</button
+            >
+          </div>
+        </td>
+      </tr>
     </tbody>
   </nz-table>
 </nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.ts
index 6cb6b5cb9..ad611abca 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.ts
@@ -1,19 +1,18 @@
 /*
  * Copyright [2024] [MaxKey of copyright http://www.maxkey.top]
- * 
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *     http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
 
 import { ChangeDetectionStrategy, ViewContainerRef, ChangeDetectorRef, Component, OnInit, Inject } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -109,8 +108,7 @@ export class ConnectorsComponent implements OnInit {
 
   onReset(): void {}
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.connectorsService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -160,8 +158,7 @@ export class ConnectorsComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.connectorsService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.html
index 609db8b05..6fdcd8624 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.html
@@ -7,19 +7,24 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.socialsproviders.providerName' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input nz-input [(ngModel)]="query.params.providerName" [ngModelOptions]="{ standalone: true }"
-                   name="providerName" placeholder="" id="providerName" />
+            <input
+              nz-input
+              [(ngModel)]="query.params.providerName"
+              [ngModelOptions]="{ standalone: true }"
+              name="providerName"
+              placeholder=""
+              id="providerName"
+            />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
-          i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
-          i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
+        >
       </div>
     </div>
   </form>
@@ -27,57 +32,88 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
-      'mxk.text.delete' | i18n
-      }}</button>
+    <button
+      nz-button
+      type="button"
+      nz-popconfirm
+      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left"
+      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+      (nzOnConfirm)="onBatchDelete()"
+      [nzType]="'primary'"
+      nzDanger
+      class="mx-sm"
+      >{{ 'mxk.text.delete' | i18n }}</button
+    >
   </div>
-  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
-            [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
-            [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
-            (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
+  <nz-table
+    #dynamicTable
+    nzTableLayout="auto"
+    nzSize="small"
+    nzBordered
+    nzShowSizeChanger
+    [nzData]="query.results.rows"
+    [nzFrontPagination]="false"
+    [nzTotal]="query.results.records"
+    [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize"
+    [nzPageIndex]="query.params.pageNumber"
+    [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)"
+    nzWidth="100%"
+  >
     <thead>
-    <tr>
-      <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
-          (nzCheckedChange)="onTableAllChecked($event)"></th>
-      <th nzAlign="center" style="display: none">Id</th>
-      <th nzAlign="center">{{ 'mxk.socialsproviders.icon' | i18n }}</th>
-      <th nzAlign="center">{{ 'mxk.socialsproviders.provider' | i18n }}</th>
-      <th nzAlign="center">{{ 'mxk.socialsproviders.providerName' | i18n }}</th>
-      <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.sortIndex' | i18n }}</th>
-      <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.socialsproviders.display' | i18n }}</th>
-      <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.socialsproviders.scanCode' | i18n }}</th>
+      <tr>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th nzAlign="center" style="display: none">Id</th>
+        <th nzAlign="center">{{ 'mxk.socialsproviders.icon' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.socialsproviders.provider' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.socialsproviders.providerName' | i18n }}</th>
+        <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.sortIndex' | i18n }}</th>
+        <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.socialsproviders.display' | i18n }}</th>
+        <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.socialsproviders.scanCode' | i18n }}</th>
 
-      <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.status' | i18n }}</th>
-      <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | i18n }}</th>
-    </tr>
+        <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.status' | i18n }}</th>
+        <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | i18n }}</th>
+      </tr>
     </thead>
     <tbody>
-    <tr *ngFor="let data of query.results.rows">
-      <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
-      <td nzAlign="left" style="display: none">
-        <span>{{ data.id }}</span>
-      </td>
-      <td nzAlign="center" nzBreakWord="false"><img src="{{ data.icon }}" /></td>
-      <td nzAlign="left"> {{ data.provider }}</td>
-      <td nzAlign="left"> {{ data.providerName }}</td>
-      <td nzAlign="center"> {{ data.sortIndex }}</td>
-      <td nzAlign="center"> <i *ngIf="data.display == 'true'" nz-icon nzType="check-circle" nzTheme="fill"
-                               style="color: green"></i></td>
-      <td nzAlign="center"> <i *ngIf="data.scanCode == 'true'" nz-icon nzType="check-circle" nzTheme="fill"
-                               style="color: green"></i></td>
+      <tr *ngFor="let data of query.results.rows">
+        <td
+          [nzChecked]="query.tableCheckedId.has(data.id)"
+          [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
+        ></td>
+        <td nzAlign="left" style="display: none">
+          <span>{{ data.id }}</span>
+        </td>
+        <td nzAlign="center" nzBreakWord="false"><img src="{{ data.icon }}" /></td>
+        <td nzAlign="left"> {{ data.provider }}</td>
+        <td nzAlign="left"> {{ data.providerName }}</td>
+        <td nzAlign="center"> {{ data.sortIndex }}</td>
+        <td nzAlign="center"> <i *ngIf="data.display == 'true'" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+        <td nzAlign="center"> <i *ngIf="data.scanCode == 'true'" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
 
-      <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
-                               style="color: green"></i></td>
-      <td nzAlign="center" nzBreakWord="false">
-        <div nz-col>
-          <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' |
-            i18n }}</button>
-          <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n
-            }}</button>
-        </div>
-      </td>
-    </tr>
+        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+        <td nzAlign="center" nzBreakWord="false">
+          <div nz-col>
+            <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' | i18n }}</button>
+            <button
+              nz-button
+              type="button"
+              nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+              nzPopconfirmPlacement="left"
+              [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+              (nzOnConfirm)="onDelete(data.id)"
+              nzDanger
+              >{{ 'mxk.text.delete' | i18n }}</button
+            >
+          </div>
+        </td>
+      </tr>
     </tbody>
   </nz-table>
 </nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.ts
index 0d2b88939..4a0dd9b66 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.ts
@@ -107,8 +107,7 @@ export class SocialsProviderComponent implements OnInit {
 
   onReset(): void {}
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.socialsProviderService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -159,8 +158,7 @@ export class SocialsProviderComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.socialsProviderService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.html
index fd1f63427..3196aa7e8 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.html
@@ -7,19 +7,17 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.synchronizers.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input nz-input [(ngModel)]="query.params.name" [ngModelOptions]="{ standalone: true }" name="name"
-                   placeholder="" id="name" />
+            <input nz-input [(ngModel)]="query.params.name" [ngModelOptions]="{ standalone: true }" name="name" placeholder="" id="name" />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
-          i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
-          i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
+        >
       </div>
     </div>
   </form>
@@ -27,48 +25,80 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
-      'mxk.text.delete' | i18n
-      }}</button>
+    <button
+      nz-button
+      type="button"
+      nz-popconfirm
+      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left"
+      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+      (nzOnConfirm)="onBatchDelete()"
+      [nzType]="'primary'"
+      nzDanger
+      class="mx-sm"
+      >{{ 'mxk.text.delete' | i18n }}</button
+    >
   </div>
-  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
-            [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
-            [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
-            (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
+  <nz-table
+    #dynamicTable
+    nzTableLayout="auto"
+    nzSize="small"
+    nzBordered
+    nzShowSizeChanger
+    [nzData]="query.results.rows"
+    [nzFrontPagination]="false"
+    [nzTotal]="query.results.records"
+    [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize"
+    [nzPageIndex]="query.params.pageNumber"
+    [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)"
+    nzWidth="100%"
+  >
     <thead>
-    <tr>
-      <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
-          (nzCheckedChange)="onTableAllChecked($event)"></th>
-      <th nzAlign="center" style="display: none">Id</th>
-      <th nzAlign="center">{{ 'mxk.synchronizers.name' | i18n }}</th>
-      <th nzAlign="center">{{ 'mxk.synchronizers.scheduler' | i18n }}</th>
-      <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
-      <th nzAlign="center" class="table_cell_action_3">{{ 'mxk.text.action' | i18n }}</th>
-    </tr>
+      <tr>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th nzAlign="center" style="display: none">Id</th>
+        <th nzAlign="center">{{ 'mxk.synchronizers.name' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.synchronizers.scheduler' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
+        <th nzAlign="center" class="table_cell_action_3">{{ 'mxk.text.action' | i18n }}</th>
+      </tr>
     </thead>
     <tbody>
-    <tr *ngFor="let data of query.results.rows">
-      <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
-      <td nzAlign="left" style="display: none">
-        <span>{{ data.id }}</span>
-      </td>
+      <tr *ngFor="let data of query.results.rows">
+        <td
+          [nzChecked]="query.tableCheckedId.has(data.id)"
+          [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
+        ></td>
+        <td nzAlign="left" style="display: none">
+          <span>{{ data.id }}</span>
+        </td>
 
-      <td nzAlign="left"> {{ data.name }}</td>
-      <td nzAlign="left"> {{ data.scheduler }}</td>
-      <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
-                               style="color: green"></i></td>
-      <td nzAlign="center" nzBreakWord="false">
-        <div nz-col>
-          <button nz-button type="button" (click)="onSynchr($event, data.id)">{{ 'mxk.text.synchr'
-            | i18n }}</button>
-          <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' |
-            i18n }}</button>
-          <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n
-            }}</button>
-        </div>
-      </td>
-    </tr>
+        <td nzAlign="left"> {{ data.name }}</td>
+        <td nzAlign="left"> {{ data.scheduler }}</td>
+        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+        <td nzAlign="center" nzBreakWord="false">
+          <div nz-col>
+            <button nz-button type="button" (click)="onSynchr($event, data.id)">{{ 'mxk.text.synchr' | i18n }}</button>
+            <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' | i18n }}</button>
+            <button
+              nz-button
+              type="button"
+              nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+              nzPopconfirmPlacement="left"
+              [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+              (nzOnConfirm)="onDelete(data.id)"
+              nzDanger
+              >{{ 'mxk.text.delete' | i18n }}</button
+            >
+          </div>
+        </td>
+      </tr>
     </tbody>
   </nz-table>
 </nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.ts
index bfbab6f7a..f775b6f64 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.ts
@@ -107,8 +107,7 @@ export class SynchronizersComponent implements OnInit {
 
   onReset(): void {}
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.synchronizersService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -169,8 +168,7 @@ export class SynchronizersComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.synchronizersService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/group-members/group-members.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/group-members/group-members.component.html
index bed3a060a..526fc2c5e 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/group-members/group-members.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/group-members/group-members.component.html
@@ -8,23 +8,39 @@
             <nz-form-item>
               <nz-form-label nzFor="groupName">{{ 'mxk.groups.name' | i18n }}</nz-form-label>
               <nz-form-control>
-                <input nz-input [(ngModel)]="groupQuery.params.groupName" [ngModelOptions]="{ standalone: true }"
-                  name="groupName" placeholder="" id="groupName" />
+                <input
+                  nz-input
+                  [(ngModel)]="groupQuery.params.groupName"
+                  [ngModelOptions]="{ standalone: true }"
+                  name="groupName"
+                  placeholder=""
+                  id="groupName"
+                />
               </nz-form-control>
             </nz-form-item>
           </div>
           <div nz-col [nzSpan]="8" [class.text-right]="groupQuery.expandForm">
             <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="groupQuery.submitLoading">{{
               'mxk.text.query' | i18n
-              }}</button>
+            }}</button>
           </div>
         </form>
       </nz-card>
-      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
-        [nzData]="groupQuery.results.rows" [nzFrontPagination]="false" [nzTotal]="groupQuery.results.records"
-        [nzPageSizeOptions]="groupQuery.params.pageSizeOptions" [nzPageSize]="groupQuery.params.pageSize"
-        [nzPageIndex]="groupQuery.params.pageNumber" [nzLoading]="this.groupQuery.tableLoading"
-        (nzQueryParams)="onGroupQueryParamsChange($event)">
+      <nz-table
+        #dynamicTable
+        nzTableLayout="auto"
+        nzSize="small"
+        nzBordered
+        nzShowSizeChanger
+        [nzData]="groupQuery.results.rows"
+        [nzFrontPagination]="false"
+        [nzTotal]="groupQuery.results.records"
+        [nzPageSizeOptions]="groupQuery.params.pageSizeOptions"
+        [nzPageSize]="groupQuery.params.pageSize"
+        [nzPageIndex]="groupQuery.params.pageNumber"
+        [nzLoading]="this.groupQuery.tableLoading"
+        (nzQueryParams)="onGroupQueryParamsChange($event)"
+      >
         <thead>
           <tr>
             <th></th>
@@ -35,8 +51,11 @@
         </thead>
         <tbody>
           <tr *ngFor="let data of groupQuery.results.rows">
-            <td [nzChecked]="groupQuery.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onGroupTableItemChecked(data.id, data.groupName, $event)"></td>
+            <td
+              [nzChecked]="groupQuery.tableCheckedId.has(data.id)"
+              [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onGroupTableItemChecked(data.id, data.groupName, $event)"
+            ></td>
             <td nzAlign="left" style="display: none">
               <span>{{ data.id }}</span>
             </td>
@@ -55,25 +74,37 @@
             <div nz-col nzMd="8" nzSm="24">
               <nz-form-item>
                 <nz-form-label nzFor="groupName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
-                <input nz-input [(ngModel)]="query.params.groupName" [ngModelOptions]="{ standalone: true }" readonly
-                  disabled placeholder="" />
+                <input
+                  nz-input
+                  [(ngModel)]="query.params.groupName"
+                  [ngModelOptions]="{ standalone: true }"
+                  readonly
+                  disabled
+                  placeholder=""
+                />
               </nz-form-item>
             </div>
             <div nz-col nzMd="8" nzSm="24">
               <nz-form-item>
                 <nz-form-label nzFor="name">{{ 'mxk.users.username' | i18n }}</nz-form-label>
                 <nz-form-control>
-                  <input nz-input [(ngModel)]="query.params.username" [ngModelOptions]="{ standalone: true }"
-                    name="username" placeholder="" id="username" />
+                  <input
+                    nz-input
+                    [(ngModel)]="query.params.username"
+                    [ngModelOptions]="{ standalone: true }"
+                    name="username"
+                    placeholder=""
+                    id="username"
+                  />
                 </nz-form-control>
               </nz-form-item>
             </div>
             <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-              <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query'
-                | i18n }}</button>
+              <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
               <button nz-button type="reset" (click)="onReset()" class="mx-sm">{{ 'mxk.text.reset' | i18n }}</button>
               <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
+              >
             </div>
           </div>
         </form>
@@ -81,24 +112,46 @@
       <nz-card [nzBordered]="false">
         <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
           <div nz-col [nzSpan]="24" class="table-list-toolbar">
-            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n
-              }}</button>
-            <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger
-              class="mx-sm">{{
-              'mxk.text.delete' | i18n
-              }}</button>
+            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
+            <button
+              nz-button
+              type="button"
+              nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+              nzPopconfirmPlacement="left"
+              [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+              (nzOnConfirm)="onBatchDelete()"
+              [nzType]="'primary'"
+              nzDanger
+              class="mx-sm"
+              >{{ 'mxk.text.delete' | i18n }}</button
+            >
           </div>
 
           <div nz-col nzMd="24" nzSm="24">
-            <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
-              [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
-              [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
-              [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
-              (nzQueryParams)="onQueryParamsChange($event)">
+            <nz-table
+              #dynamicTable
+              nzTableLayout="auto"
+              nzSize="small"
+              nzBordered
+              nzShowSizeChanger
+              [nzData]="query.results.rows"
+              [nzFrontPagination]="false"
+              [nzTotal]="query.results.records"
+              [nzPageSizeOptions]="query.params.pageSizeOptions"
+              [nzPageSize]="query.params.pageSize"
+              [nzPageIndex]="query.params.pageNumber"
+              [nzLoading]="this.query.tableLoading"
+              (nzQueryParams)="onQueryParamsChange($event)"
+            >
               <thead>
                 <tr>
-                  <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
-                    (nzCheckedChange)="onTableAllChecked($event)"></th>
+                  <th
+                    [nzChecked]="query.checked"
+                    [nzIndeterminate]="query.indeterminate"
+                    (nzCheckedChange)="onTableAllChecked($event)"
+                  ></th>
                   <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
                   <th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
                   <th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
@@ -110,21 +163,32 @@
               </thead>
               <tbody>
                 <tr *ngFor="let data of query.results.rows">
-                  <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
-                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+                  <td
+                    [nzChecked]="query.tableCheckedId.has(data.id)"
+                    [nzDisabled]="data.disabled"
+                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"
+                  ></td>
                   <td nzAlign="left"> {{ data.groupName }}</td>
                   <td nzAlign="left"> {{ data.username }}</td>
                   <td nzAlign="left"> {{ data.displayName }}</td>
                   <td nzAlign="left"> {{ data.department }}</td>
                   <td nzAlign="left"> {{ data.jobTitle }}</td>
-                  <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) :
-                    ('mxk.users.gender.male' | i18n) }}</td>
+                  <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) : ('mxk.users.gender.male' | i18n) }}</td>
                   <td nzAlign="center" nzBreakWord="false">
                     <div nz-col>
-                      <button *ngIf="data.category == 'static'" nz-button type="button"
-                        (click)="onDelete($event, data.id)" nzDanger>{{
-                        'mxk.text.delete' | i18n
-                        }}</button>
+                      <button
+                        *ngIf="data.category == 'static'"
+                        nz-button
+                        type="button"
+                        nz-popconfirm
+                        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+                        nzPopconfirmPlacement="left"
+                        [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+                        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+                        (nzOnConfirm)="onDelete(data.id)"
+                        nzDanger
+                        >{{ 'mxk.text.delete' | i18n }}</button
+                      >
                     </div>
                   </td>
                 </tr>
@@ -135,4 +199,4 @@
       </nz-card>
     </div>
   </div>
-</nz-card>
\ No newline at end of file
+</nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/group-members/group-members.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/group-members/group-members.component.ts
index ba1bb8000..a1b58d1c1 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/group-members/group-members.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/group-members/group-members.component.ts
@@ -68,33 +68,33 @@ export class GroupMembersComponent implements OnInit {
     indeterminate: boolean;
     checked: boolean;
   } = {
-      params: {
-        groupName: '',
-        displayName: '',
-        username: '',
-        groupId: '',
-        appName: '',
-        appId: '',
-        startDate: '',
-        endDate: '',
-        startDatePicker: addDays(new Date(), -30),
-        endDatePicker: new Date(),
-        pageSize: 10,
-        pageNumber: 1,
-        pageSizeOptions: [10, 20, 50]
-      },
-      results: {
-        records: 0,
-        rows: []
-      },
-      expandForm: false,
-      submitLoading: false,
-      tableLoading: false,
-      tableInitialize: true,
-      tableCheckedId: new Set<String>(),
-      indeterminate: false,
-      checked: false
-    };
+    params: {
+      groupName: '',
+      displayName: '',
+      username: '',
+      groupId: '',
+      appName: '',
+      appId: '',
+      startDate: '',
+      endDate: '',
+      startDatePicker: addDays(new Date(), -30),
+      endDatePicker: new Date(),
+      pageSize: 10,
+      pageNumber: 1,
+      pageSizeOptions: [10, 20, 50]
+    },
+    results: {
+      records: 0,
+      rows: []
+    },
+    expandForm: false,
+    submitLoading: false,
+    tableLoading: false,
+    tableInitialize: true,
+    tableCheckedId: new Set<String>(),
+    indeterminate: false,
+    checked: false
+  };
 
   constructor(
     private modalService: NzModalService,
@@ -106,7 +106,7 @@ export class GroupMembersComponent implements OnInit {
     @Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
     private route: ActivatedRoute,
     private cdr: ChangeDetectorRef
-  ) { }
+  ) {}
 
   ngOnInit(): void {
     if (this.route.snapshot.queryParams['username']) {
@@ -138,8 +138,7 @@ export class GroupMembersComponent implements OnInit {
     this.fetch();
   }
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.groupMembersService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -210,8 +209,7 @@ export class GroupMembersComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.groupMembersService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -288,23 +286,23 @@ export class GroupMembersComponent implements OnInit {
     indeterminate: boolean;
     checked: boolean;
   } = {
-      params: {
-        groupName: '',
-        pageSize: 10,
-        pageNumber: 1,
-        pageSizeOptions: [10, 20, 50]
-      },
-      results: {
-        records: 0,
-        rows: []
-      },
-      expandForm: false,
-      submitLoading: false,
-      tableLoading: false,
-      tableCheckedId: new Set<String>(),
-      indeterminate: false,
-      checked: false
-    };
+    params: {
+      groupName: '',
+      pageSize: 10,
+      pageNumber: 1,
+      pageSizeOptions: [10, 20, 50]
+    },
+    results: {
+      records: 0,
+      rows: []
+    },
+    expandForm: false,
+    submitLoading: false,
+    tableLoading: false,
+    tableCheckedId: new Set<String>(),
+    indeterminate: false,
+    checked: false
+  };
 
   onGroupSearch(): void {
     this.fetchGroup();
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/groups/groups.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/groups/groups.component.html
index d6dd737bd..ffccb059b 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/groups/groups.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/groups/groups.component.html
@@ -32,9 +32,20 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
-      'mxk.text.delete' | i18n
-    }}</button>
+    <button
+      nz-button
+      type="button"
+      nz-popconfirm
+      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left"
+      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+      (nzOnConfirm)="onBatchDelete()"
+      [nzType]="'primary'"
+      nzDanger
+      class="mx-sm"
+      >{{ 'mxk.text.delete' | i18n }}</button
+    >
   </div>
   <nz-table
     #dynamicTable
@@ -92,7 +103,12 @@
                 <li
                   nz-menu-item
                   *ngIf="data.roleCode != 'ROLE_ADMINISTRATORS' && data.roleCode != 'ROLE_ALL_USER' && data.roleCode != 'ROLE_MANAGERS'"
-                  (click)="onDelete($event, data.id)"
+                  nz-popconfirm
+                  nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+                  nzPopconfirmPlacement="left"
+                  [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+                  [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+                  (nzOnConfirm)="onDelete(data.id)"
                   nzDanger
                   >{{ 'mxk.text.delete' | i18n }}</li
                 >
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/groups/groups.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/groups/groups.component.ts
index 4cbd9dbf4..c2c26ce5f 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/groups/groups.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/groups/groups.component.ts
@@ -59,29 +59,29 @@ export class GroupsComponent implements OnInit {
     indeterminate: boolean;
     checked: boolean;
   } = {
-      params: {
-        groupName: '',
-        displayName: '',
-        employeeNumber: '',
-        startDate: '',
-        endDate: '',
-        startDatePicker: addDays(new Date(), -30),
-        endDatePicker: new Date(),
-        pageSize: 10,
-        pageNumber: 1,
-        pageSizeOptions: [10, 20, 50]
-      },
-      results: {
-        records: 0,
-        rows: []
-      },
-      expandForm: false,
-      submitLoading: false,
-      tableLoading: false,
-      tableCheckedId: new Set<String>(),
-      indeterminate: false,
-      checked: false
-    };
+    params: {
+      groupName: '',
+      displayName: '',
+      employeeNumber: '',
+      startDate: '',
+      endDate: '',
+      startDatePicker: addDays(new Date(), -30),
+      endDatePicker: new Date(),
+      pageSize: 10,
+      pageNumber: 1,
+      pageSizeOptions: [10, 20, 50]
+    },
+    results: {
+      records: 0,
+      rows: []
+    },
+    expandForm: false,
+    submitLoading: false,
+    tableLoading: false,
+    tableCheckedId: new Set<String>(),
+    indeterminate: false,
+    checked: false
+  };
 
   constructor(
     private modalService: NzModalService,
@@ -92,7 +92,7 @@ export class GroupsComponent implements OnInit {
     private router: Router,
     @Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
     private cdr: ChangeDetectorRef
-  ) { }
+  ) {}
 
   ngOnInit(): void {
     this.fetch();
@@ -108,10 +108,9 @@ export class GroupsComponent implements OnInit {
     this.fetch();
   }
 
-  onReset(): void { }
+  onReset(): void {}
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.groupsService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -162,8 +161,7 @@ export class GroupsComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.groupsService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/organizations/organizations.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/organizations/organizations.component.html
index d772c7645..507a1dd35 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/organizations/organizations.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/organizations/organizations.component.html
@@ -7,18 +7,23 @@
         <nz-form-item>
           <nz-form-label nzFor="orgName">{{ 'mxk.organizations.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input nz-input [(ngModel)]="query.params.orgName" [ngModelOptions]="{ standalone: true }" name="orgName"
-                   placeholder="" id="orgName" />
+            <input
+              nz-input
+              [(ngModel)]="query.params.orgName"
+              [ngModelOptions]="{ standalone: true }"
+              name="orgName"
+              placeholder=""
+              id="orgName"
+            />
           </nz-form-control>
         </nz-form-item>
       </div>
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
-          i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
-          i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
+        >
       </div>
     </div>
   </form>
@@ -27,13 +32,31 @@
   <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
     <div nz-col [nzSpan]="24" class="table-list-toolbar">
       <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-      <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
-        'mxk.text.delete' | i18n
-        }}</button>
+      <button
+        nz-button
+        type="button"
+        nz-popconfirm
+        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+        nzPopconfirmPlacement="left"
+        [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+        (nzOnConfirm)="onBatchDelete()"
+        [nzType]="'primary'"
+        nzDanger
+        class="mx-sm"
+        >{{ 'mxk.text.delete' | i18n }}</button
+      >
     </div>
     <div nz-col nzMd="6" nzSm="24" class="grid-border">
-      <nz-tree nzShowLine="false" [nzCheckable]="treeNodes.checkable" nzBlockNode [nzData]="treeNodes.nodes"
-               (nzClick)="activeNode($event)" (nzDblClick)="openFolder($event)" [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
+      <nz-tree
+        nzShowLine="false"
+        [nzCheckable]="treeNodes.checkable"
+        nzBlockNode
+        [nzData]="treeNodes.nodes"
+        (nzClick)="activeNode($event)"
+        (nzDblClick)="openFolder($event)"
+        [nzTreeTemplate]="nzTreeTemplate"
+      ></nz-tree>
       <ng-template #nzTreeTemplate let-node let-origin="origin">
         <span class="custom-node">
           <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, menu)">
@@ -54,51 +77,71 @@
       </nz-dropdown-menu>
     </div>
     <div nz-col nzMd="18" nzSm="24" class="grid-border">
-      <nz-table #dynamicTable nzBordered nzShowSizeChanger nzSize="small" [nzData]="query.results.rows" [nzFrontPagination]="false"
-                [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
-                [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber"
-                [nzLoading]="this.query.tableLoading" (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
+      <nz-table
+        #dynamicTable
+        nzBordered
+        nzShowSizeChanger
+        nzSize="small"
+        [nzData]="query.results.rows"
+        [nzFrontPagination]="false"
+        [nzTotal]="query.results.records"
+        [nzPageSizeOptions]="query.params.pageSizeOptions"
+        [nzPageSize]="query.params.pageSize"
+        [nzPageIndex]="query.params.pageNumber"
+        [nzLoading]="this.query.tableLoading"
+        (nzQueryParams)="onQueryParamsChange($event)"
+        nzWidth="100%"
+      >
         <thead>
-        <tr>
-          <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
-              (nzCheckedChange)="onTableAllChecked($event)"></th>
-          <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.organizations.code' | i18n }}</th>
-          <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.organizations.name' | i18n }}</th>
-          <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.organizations.type' | i18n }}</th>
-          <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.sortIndex' | i18n }}</th>
-          <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.status' | i18n }}</th>
-          <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | i18n }}</th>
-        </tr>
+          <tr>
+            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+            <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.organizations.code' | i18n }}</th>
+            <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.organizations.name' | i18n }}</th>
+            <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.organizations.type' | i18n }}</th>
+            <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.sortIndex' | i18n }}</th>
+            <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.status' | i18n }}</th>
+            <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | i18n }}</th>
+          </tr>
         </thead>
         <tbody>
-        <tr *ngFor="let data of query.results.rows">
-          <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
-          <td nzAlign="left">
-            <span>{{ data.orgCode }}</span>
-          </td>
-          <td nzAlign="left"> {{ data.orgName }}</td>
-          <td nzAlign="center" *ngIf="data.type == 'company'"> {{ 'mxk.organizations.type.company' | i18n }}</td>
-          <td nzAlign="center" *ngIf="data.type == 'division'"> {{ 'mxk.organizations.type.division' | i18n }}</td>
-          <td nzAlign="center" *ngIf="data.type == 'department'"> {{ 'mxk.organizations.type.department' | i18n }}
-          </td>
-          <td nzAlign="center" *ngIf="data.type == 'entity'"> {{ 'mxk.organizations.type.entity' | i18n }}</td>
-          <td nzAlign="center" *ngIf="data.type == 'virtual'"> {{ 'mxk.organizations.type.virtual' | i18n }}</td>
-          <td nzAlign="center"> {{ data.sortIndex }}</td>
-          <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
-                                   style="color: green"></i></td>
-          <td nzAlign="center" nzBreakWord="false">
-            <div nz-col>
-              <button nz-button type="button" (click)="onEdit($event, data.id)">
-                {{ 'mxk.text.edit' | i18n }}
-              </button>
-              <button
-                *ngIf="data.parentId != null && data.parentId != '-1' && data.parentId != '0' && data.id != data.instId"
-                nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n
-                }}</button>
-            </div>
-          </td>
-        </tr>
+          <tr *ngFor="let data of query.results.rows">
+            <td
+              [nzChecked]="query.tableCheckedId.has(data.id)"
+              [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onTableItemChecked(data.id, $event)"
+            ></td>
+            <td nzAlign="left">
+              <span>{{ data.orgCode }}</span>
+            </td>
+            <td nzAlign="left"> {{ data.orgName }}</td>
+            <td nzAlign="center" *ngIf="data.type == 'company'"> {{ 'mxk.organizations.type.company' | i18n }}</td>
+            <td nzAlign="center" *ngIf="data.type == 'division'"> {{ 'mxk.organizations.type.division' | i18n }}</td>
+            <td nzAlign="center" *ngIf="data.type == 'department'"> {{ 'mxk.organizations.type.department' | i18n }} </td>
+            <td nzAlign="center" *ngIf="data.type == 'entity'"> {{ 'mxk.organizations.type.entity' | i18n }}</td>
+            <td nzAlign="center" *ngIf="data.type == 'virtual'"> {{ 'mxk.organizations.type.virtual' | i18n }}</td>
+            <td nzAlign="center"> {{ data.sortIndex }}</td>
+            <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+            <td nzAlign="center" nzBreakWord="false">
+              <div nz-col>
+                <button nz-button type="button" (click)="onEdit($event, data.id)">
+                  {{ 'mxk.text.edit' | i18n }}
+                </button>
+                <button
+                  *ngIf="data.parentId != null && data.parentId != '-1' && data.parentId != '0' && data.id != data.instId"
+                  nz-button
+                  type="button"
+                  nz-popconfirm
+                  nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+                  nzPopconfirmPlacement="left"
+                  [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+                  [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+                  (nzOnConfirm)="onDelete(data.id)"
+                  nzDanger
+                  >{{ 'mxk.text.delete' | i18n }}</button
+                >
+              </div>
+            </td>
+          </tr>
         </tbody>
       </nz-table>
     </div>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/organizations/organizations.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/organizations/organizations.component.ts
index 0a8b38fbe..c646461cd 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/organizations/organizations.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/organizations/organizations.component.ts
@@ -141,8 +141,7 @@ export class OrganizationsComponent implements OnInit {
 
   onReset(): void {}
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.orgsService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -198,8 +197,7 @@ export class OrganizationsComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.orgsService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/users.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/users.component.html
index f02a50beb..4c8078fd2 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/users.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/users.component.html
@@ -37,7 +37,19 @@
       <button nz-button type="button" [nzType]="'primary'" (click)="changePassword($event)">
         {{ 'mxk.text.changepassword' | i18n }}
       </button>
-      <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">
+      <button
+        nz-button
+        type="button"
+        nz-popconfirm
+        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+        nzPopconfirmPlacement="left"
+        [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+        (nzOnConfirm)="onBatchDelete()"
+        [nzType]="'primary'"
+        nzDanger
+        class="mx-sm"
+      >
         {{ 'mxk.text.delete' | i18n }}
       </button>
     </div>
@@ -169,7 +181,17 @@
                     <li nz-menu-item *ngIf="data.status == 5" (click)="onUpdateStatus($event, data.id, 1)">{{
                       'mxk.text.unlock' | i18n
                     }}</li>
-                    <li nz-menu-item (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</li>
+                    <li
+                      nz-menu-item
+                      nz-popconfirm
+                      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+                      nzPopconfirmPlacement="left"
+                      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+                      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+                      (nzOnConfirm)="onDelete(data.id)"
+                      nzDanger
+                      >{{ 'mxk.text.delete' | i18n }}</li
+                    >
                   </ul>
                 </nz-dropdown-menu>
               </div>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/users.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/users.component.ts
index 2a2d244cc..b248c1e61 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/users.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/users.component.ts
@@ -118,8 +118,7 @@ export class UsersComponent implements OnInit {
 
   onReset(): void {}
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.usersService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -239,8 +238,7 @@ export class UsersComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.usersService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.operate.success'));
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.html
index 3f24a66dd..d7f97b82e 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.html
@@ -6,26 +6,30 @@
       <div nz-col nzMd="10" nzSm="24">
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.resources.appName' | i18n }}</nz-form-label>
-          <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" disabled
-            placeholder="" />
+          <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" disabled placeholder="" />
         </nz-form-item>
       </div>
       <div nz-col nzMd="10" nzSm="24">
         <nz-form-item>
           <nz-form-label nzFor="resourceName">{{ 'mxk.resources.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input nz-input [(ngModel)]="query.params.resourceName" [ngModelOptions]="{ standalone: true }"
-              name="resourceName" placeholder="" id="resourceName" />
+            <input
+              nz-input
+              [(ngModel)]="query.params.resourceName"
+              [ngModelOptions]="{ standalone: true }"
+              name="resourceName"
+              placeholder=""
+              id="resourceName"
+            />
           </nz-form-control>
         </nz-form-item>
       </div>
       <div nz-col [nzSpan]="query.expandForm ? 24 : 4" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
-          i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
-          i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
+        >
       </div>
     </div>
   </form>
@@ -34,13 +38,31 @@
   <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
     <div nz-col [nzSpan]="24" class="table-list-toolbar">
       <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-      <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
-        'mxk.text.delete' | i18n
-        }}</button>
+      <button
+        nz-button
+        type="button"
+        nz-popconfirm
+        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+        nzPopconfirmPlacement="left"
+        [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+        (nzOnConfirm)="onBatchDelete()"
+        [nzType]="'primary'"
+        nzDanger
+        class="mx-sm"
+        >{{ 'mxk.text.delete' | i18n }}</button
+      >
     </div>
     <div nz-col nzMd="6" nzSm="24" class="grid-border">
-      <nz-tree nzShowLine="false" [nzCheckable]="treeNodes.checkable" nzBlockNode [nzData]="treeNodes.nodes"
-        (nzClick)="activeNode($event)" (nzDblClick)="openFolder($event)" [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
+      <nz-tree
+        nzShowLine="false"
+        [nzCheckable]="treeNodes.checkable"
+        nzBlockNode
+        [nzData]="treeNodes.nodes"
+        (nzClick)="activeNode($event)"
+        (nzDblClick)="openFolder($event)"
+        [nzTreeTemplate]="nzTreeTemplate"
+      ></nz-tree>
       <ng-template #nzTreeTemplate let-node let-origin="origin">
         <span class="custom-node">
           <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, menu)">
@@ -61,15 +83,25 @@
       </nz-dropdown-menu>
     </div>
     <div nz-col nzMd="18" nzSm="24" class="grid-border">
-      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
-        [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
-        [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
-        [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
-        (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
+      <nz-table
+        #dynamicTable
+        nzTableLayout="auto"
+        nzSize="small"
+        nzBordered
+        nzShowSizeChanger
+        [nzData]="query.results.rows"
+        [nzFrontPagination]="false"
+        [nzTotal]="query.results.records"
+        [nzPageSizeOptions]="query.params.pageSizeOptions"
+        [nzPageSize]="query.params.pageSize"
+        [nzPageIndex]="query.params.pageNumber"
+        [nzLoading]="this.query.tableLoading"
+        (nzQueryParams)="onQueryParamsChange($event)"
+        nzWidth="100%"
+      >
         <thead>
           <tr>
-            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
-              (nzCheckedChange)="onTableAllChecked($event)"></th>
+            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
             <th nzAlign="center">{{ 'mxk.resources.appName' | i18n }}</th>
             <th nzAlign="center">{{ 'mxk.resources.name' | i18n }}</th>
             <th nzAlign="center">{{ 'mxk.resources.resourceType' | i18n }}</th>
@@ -80,21 +112,33 @@
         </thead>
         <tbody>
           <tr *ngFor="let data of query.results.rows">
-            <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+            <td
+              [nzChecked]="query.tableCheckedId.has(data.id)"
+              [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onTableItemChecked(data.id, $event)"
+            ></td>
             <td nzAlign="center">
               {{ data.appName }}
             </td>
             <td nzAlign="left"> {{ data.resourceName }}</td>
             <td nzAlign="left"> {{ data.resourceType }}</td>
             <td nzAlign="center"> {{ data.sortIndex }}</td>
-            <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
-                style="color: green"></i></td>
+            <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
             <td nzAlign="center" nzBreakWord="false">
               <div nz-col>
                 <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' | i18n }}</button>
-                <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n
-                  }}</button>
+                <button
+                  nz-button
+                  type="button"
+                  nz-popconfirm
+                  nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+                  nzPopconfirmPlacement="left"
+                  [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+                  [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+                  (nzOnConfirm)="onDelete(data.id)"
+                  nzDanger
+                  >{{ 'mxk.text.delete' | i18n }}</button
+                >
               </div>
             </td>
           </tr>
@@ -102,4 +146,4 @@
       </nz-table>
     </div>
   </div>
-</nz-card>
\ No newline at end of file
+</nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.ts
index d27732de5..90d46f38b 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.ts
@@ -128,8 +128,7 @@ export class ResourcesComponent implements OnInit {
 
   onReset(): void {}
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.resourcesService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -205,8 +204,7 @@ export class ResourcesComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.resourcesService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/role-members/role-members.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/role-members/role-members.component.html
index e4aa6e310..0a62bb8c1 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/role-members/role-members.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/role-members/role-members.component.html
@@ -18,16 +18,26 @@
             <div nz-col [nzSpan]="leftQuery.expandForm ? 24 : 6" [class.text-right]="leftQuery.expandForm">
               <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="leftQuery.submitLoading">{{
                 'mxk.text.query' | i18n
-                }}</button>
+              }}</button>
             </div>
           </div>
         </form>
       </nz-card>
-      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
-        [nzData]="leftQuery.results.rows" [nzFrontPagination]="false" [nzTotal]="leftQuery.results.records"
-        [nzPageSizeOptions]="leftQuery.params.pageSizeOptions" [nzPageSize]="leftQuery.params.pageSize"
-        [nzPageIndex]="leftQuery.params.pageNumber" [nzLoading]="this.leftQuery.tableLoading"
-        (nzQueryParams)="onLeftQueryParamsChange($event)">
+      <nz-table
+        #dynamicTable
+        nzTableLayout="auto"
+        nzSize="small"
+        nzBordered
+        nzShowSizeChanger
+        [nzData]="leftQuery.results.rows"
+        [nzFrontPagination]="false"
+        [nzTotal]="leftQuery.results.records"
+        [nzPageSizeOptions]="leftQuery.params.pageSizeOptions"
+        [nzPageSize]="leftQuery.params.pageSize"
+        [nzPageIndex]="leftQuery.params.pageNumber"
+        [nzLoading]="this.leftQuery.tableLoading"
+        (nzQueryParams)="onLeftQueryParamsChange($event)"
+      >
         <thead>
           <tr>
             <!--<th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
@@ -39,8 +49,11 @@
         </thead>
         <tbody>
           <tr *ngFor="let data of leftQuery.results.rows">
-            <td [nzChecked]="leftQuery.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onLeftTableItemChecked(data.id, data.roleName, $event)"></td>
+            <td
+              [nzChecked]="leftQuery.tableCheckedId.has(data.id)"
+              [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onLeftTableItemChecked(data.id, data.roleName, $event)"
+            ></td>
             <td nzAlign="left" style="width: 300px">{{ data.id }}</td>
             <td nzAlign="left" nzBreakWord="false">{{ data.roleName }}</td>
           </tr>
@@ -54,25 +67,29 @@
             <div nz-col nzMd="8" nzSm="24">
               <nz-form-item>
                 <nz-form-label nzFor="name">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
-                <input nz-input [(ngModel)]="query.params.selectRoleName" [ngModelOptions]="{ standalone: true }"
-                  disabled />
+                <input nz-input [(ngModel)]="query.params.selectRoleName" [ngModelOptions]="{ standalone: true }" disabled />
               </nz-form-item>
             </div>
             <div nz-col nzMd="8" nzSm="24">
               <nz-form-item>
                 <nz-form-label nzFor="name">{{ 'mxk.roles.member' | i18n }}</nz-form-label>
                 <nz-form-control>
-                  <input nz-input [(ngModel)]="query.params.memberName" [ngModelOptions]="{ standalone: true }"
-                    name="memberName" placeholder="" />
+                  <input
+                    nz-input
+                    [(ngModel)]="query.params.memberName"
+                    [ngModelOptions]="{ standalone: true }"
+                    name="memberName"
+                    placeholder=""
+                  />
                 </nz-form-control>
               </nz-form-item>
             </div>
             <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-              <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query'
-                | i18n }}</button>
+              <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
               <button nz-button type="reset" (click)="onReset()" class="mx-sm">{{ 'mxk.text.reset' | i18n }}</button>
               <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
+              >
             </div>
           </div>
         </form>
@@ -80,24 +97,46 @@
       <nz-card [nzBordered]="false">
         <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
           <div nz-col [nzSpan]="24" class="table-list-toolbar">
-            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n
-              }}</button>
-            <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger
-              class="mx-sm">{{
-              'mxk.text.delete' | i18n
-              }}</button>
+            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
+            <button
+              nz-button
+              type="button"
+              nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+              nzPopconfirmPlacement="left"
+              [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+              (nzOnConfirm)="onBatchDelete()"
+              [nzType]="'primary'"
+              nzDanger
+              class="mx-sm"
+              >{{ 'mxk.text.delete' | i18n }}</button
+            >
           </div>
 
           <div nz-col nzMd="24" nzSm="24">
-            <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
-              [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
-              [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
-              [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
-              (nzQueryParams)="onQueryParamsChange($event)">
+            <nz-table
+              #dynamicTable
+              nzTableLayout="auto"
+              nzSize="small"
+              nzBordered
+              nzShowSizeChanger
+              [nzData]="query.results.rows"
+              [nzFrontPagination]="false"
+              [nzTotal]="query.results.records"
+              [nzPageSizeOptions]="query.params.pageSizeOptions"
+              [nzPageSize]="query.params.pageSize"
+              [nzPageIndex]="query.params.pageNumber"
+              [nzLoading]="this.query.tableLoading"
+              (nzQueryParams)="onQueryParamsChange($event)"
+            >
               <thead>
                 <tr>
-                  <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
-                    (nzCheckedChange)="onTableAllChecked($event)"></th>
+                  <th
+                    [nzChecked]="query.checked"
+                    [nzIndeterminate]="query.indeterminate"
+                    (nzCheckedChange)="onTableAllChecked($event)"
+                  ></th>
                   <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
                   <th nzAlign="center">{{ 'mxk.roles.type' | i18n }}</th>
                   <th nzAlign="center">{{ 'mxk.roles.member' | i18n }}</th>
@@ -109,12 +148,14 @@
               </thead>
               <tbody>
                 <tr *ngFor="let data of query.results.rows">
-                  <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
-                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+                  <td
+                    [nzChecked]="query.tableCheckedId.has(data.id)"
+                    [nzDisabled]="data.disabled"
+                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"
+                  ></td>
                   <td nzAlign="left"> {{ data.roleName }}</td>
                   <td nzAlign="center" *ngIf="data.type == 'USER'"> {{ 'mxk.roles.type.user' | i18n }}</td>
-                  <td nzAlign="center" *ngIf="data.type == 'USER-DYNAMIC'"> {{ 'mxk.roles.type.user-dynamic' | i18n }}
-                  </td>
+                  <td nzAlign="center" *ngIf="data.type == 'USER-DYNAMIC'"> {{ 'mxk.roles.type.user-dynamic' | i18n }} </td>
                   <td nzAlign="center" *ngIf="data.type == 'POST'"> {{ 'mxk.roles.type.post' | i18n }}</td>
                   <td nzAlign="left"> {{ data.memberName }}</td>
                   <td nzAlign="left"> {{ data.jobTitle }}</td>
@@ -125,10 +166,19 @@
                   <td nzAlign="left"> {{ data.department }}</td>
                   <td nzAlign="center" nzBreakWord="false">
                     <div nz-col>
-                      <button *ngIf="data.type != 'USER-DYNAMIC'" nz-button type="button"
-                        (click)="onDelete($event, data.id)" nzDanger>{{
-                        'mxk.text.delete' | i18n
-                        }}</button>
+                      <button
+                        *ngIf="data.type != 'USER-DYNAMIC'"
+                        nz-button
+                        type="button"
+                        nz-popconfirm
+                        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+                        nzPopconfirmPlacement="left"
+                        [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+                        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+                        (nzOnConfirm)="onDelete(data.id)"
+                        nzDanger
+                        >{{ 'mxk.text.delete' | i18n }}</button
+                      >
                     </div>
                   </td>
                 </tr>
@@ -139,4 +189,4 @@
       </nz-card>
     </div>
   </div>
-</nz-card>
\ No newline at end of file
+</nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/role-members/role-members.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/role-members/role-members.component.ts
index 3962af830..a97b16e54 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/role-members/role-members.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/role-members/role-members.component.ts
@@ -53,34 +53,34 @@ export class RoleMembersComponent implements OnInit {
     indeterminate: boolean;
     checked: boolean;
   } = {
-      params: {
-        roleName: '',
-        displayName: '',
-        memberName: '',
-        roleId: '',
-        appName: '',
-        appId: '',
-        selectRoleName: '',
-        startDate: '',
-        endDate: '',
-        startDatePicker: addDays(new Date(), -30),
-        endDatePicker: new Date(),
-        pageSize: 10,
-        pageNumber: 1,
-        pageSizeOptions: [10, 20, 50]
-      },
-      results: {
-        records: 0,
-        rows: []
-      },
-      expandForm: false,
-      submitLoading: false,
-      tableLoading: false,
-      tableInitialize: true,
-      tableCheckedId: new Set<String>(),
-      indeterminate: false,
-      checked: false
-    };
+    params: {
+      roleName: '',
+      displayName: '',
+      memberName: '',
+      roleId: '',
+      appName: '',
+      appId: '',
+      selectRoleName: '',
+      startDate: '',
+      endDate: '',
+      startDatePicker: addDays(new Date(), -30),
+      endDatePicker: new Date(),
+      pageSize: 10,
+      pageNumber: 1,
+      pageSizeOptions: [10, 20, 50]
+    },
+    results: {
+      records: 0,
+      rows: []
+    },
+    expandForm: false,
+    submitLoading: false,
+    tableLoading: false,
+    tableInitialize: true,
+    tableCheckedId: new Set<String>(),
+    indeterminate: false,
+    checked: false
+  };
 
   constructor(
     private modalService: NzModalService,
@@ -92,7 +92,7 @@ export class RoleMembersComponent implements OnInit {
     @Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
     private route: ActivatedRoute,
     private cdr: ChangeDetectorRef
-  ) { }
+  ) {}
 
   ngOnInit(): void {
     if (this.route.snapshot.queryParams['username']) {
@@ -134,8 +134,7 @@ export class RoleMembersComponent implements OnInit {
     this.fetch();
   }
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.roleMembersService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -206,8 +205,7 @@ export class RoleMembersComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.roleMembersService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -289,29 +287,29 @@ export class RoleMembersComponent implements OnInit {
     indeterminate: boolean;
     checked: boolean;
   } = {
-      params: {
-        id: '',
-        roleName: '',
-        appId: '',
-        startDate: '',
-        endDate: '',
-        startDatePicker: addDays(new Date(), -30),
-        endDatePicker: new Date(),
-        pageSize: 10,
-        pageNumber: 1,
-        pageSizeOptions: [10, 20, 50]
-      },
-      results: {
-        records: 0,
-        rows: []
-      },
-      expandForm: false,
-      submitLoading: false,
-      tableLoading: false,
-      tableCheckedId: new Set<String>(),
-      indeterminate: false,
-      checked: false
-    };
+    params: {
+      id: '',
+      roleName: '',
+      appId: '',
+      startDate: '',
+      endDate: '',
+      startDatePicker: addDays(new Date(), -30),
+      endDatePicker: new Date(),
+      pageSize: 10,
+      pageNumber: 1,
+      pageSizeOptions: [10, 20, 50]
+    },
+    results: {
+      records: 0,
+      rows: []
+    },
+    expandForm: false,
+    submitLoading: false,
+    tableLoading: false,
+    tableCheckedId: new Set<String>(),
+    indeterminate: false,
+    checked: false
+  };
 
   //LEFT TABLE
   onLeftSearch(): void {
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/roles/roles.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/roles/roles.component.html
index 7dc65b165..b2ac23cf6 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/roles/roles.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/roles/roles.component.html
@@ -7,19 +7,24 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input nz-input [(ngModel)]="query.params.roleName" [ngModelOptions]="{ standalone: true }" name="roleName"
-              placeholder="" id="roleName" />
+            <input
+              nz-input
+              [(ngModel)]="query.params.roleName"
+              [ngModelOptions]="{ standalone: true }"
+              name="roleName"
+              placeholder=""
+              id="roleName"
+            />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
-          i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
-          i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
+        >
       </div>
     </div>
   </form>
@@ -27,18 +32,40 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
-      'mxk.text.delete' | i18n
-      }}</button>
+    <button
+      nz-button
+      type="button"
+      nz-popconfirm
+      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left"
+      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+      (nzOnConfirm)="onBatchDelete()"
+      [nzType]="'primary'"
+      nzDanger
+      class="mx-sm"
+      >{{ 'mxk.text.delete' | i18n }}</button
+    >
   </div>
-  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
-    [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
+  <nz-table
+    #dynamicTable
+    nzTableLayout="auto"
+    nzSize="small"
+    nzBordered
+    nzShowSizeChanger
+    [nzData]="query.results.rows"
+    [nzFrontPagination]="false"
+    [nzTotal]="query.results.records"
+    [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize"
+    [nzPageIndex]="query.params.pageNumber"
+    [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)"
+    nzWidth="100%"
+  >
     <thead>
       <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
-          (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
         <th nzAlign="center" style="display: none">Id</th>
         <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.roles.category' | i18n }}</th>
@@ -48,8 +75,11 @@
     </thead>
     <tbody>
       <tr *ngFor="let data of query.results.rows">
-        <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+        <td
+          [nzChecked]="query.tableCheckedId.has(data.id)"
+          [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
+        ></td>
         <td nzAlign="left" style="display: none">
           <span>{{ data.id }}</span>
         </td>
@@ -61,17 +91,26 @@
         <td nzAlign="center" nzBreakWord="false" width="350px">
           <div nz-col>
             <button nz-button type=" button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' | i18n }}</button>
-            <button nz-button type="button" (click)="onMembers($event, data.id, data.roleName)">{{ 'mxk.roles.member' |
-              i18n }}</button>
+            <button nz-button type="button" (click)="onMembers($event, data.id, data.roleName)">{{ 'mxk.roles.member' | i18n }}</button>
             <button nz-button type="button" (click)="onPermissions($event, data.id, data.roleName)">{{
               'mxk.roles.permissions' | i18n
-              }}</button>
-            <button nz-button type="button" (click)="onDelete($event, data.id)"
+            }}</button>
+            <button
+              nz-button
+              type="button"
+              nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+              nzPopconfirmPlacement="left"
+              [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
+              (nzOnConfirm)="onDelete(data.id)"
               *ngIf="data.roleCode != 'ROLE_ADMINISTRATORS' && data.roleCode != 'ROLE_ALL_USER' && data.roleCode != 'ROLE_MANAGERS'"
-              nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
+              nzDanger
+              >{{ 'mxk.text.delete' | i18n }}</button
+            >
           </div>
         </td>
       </tr>
     </tbody>
   </nz-table>
-</nz-card>
\ No newline at end of file
+</nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/roles/roles.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/roles/roles.component.ts
index 607e95979..0ad0535ef 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/roles/roles.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/roles/roles.component.ts
@@ -46,31 +46,31 @@ export class RolesComponent implements OnInit {
     indeterminate: boolean;
     checked: boolean;
   } = {
-      params: {
-        appId: '',
-        appName: '',
-        roleName: '',
-        displayName: '',
-        employeeNumber: '',
-        startDate: '',
-        endDate: '',
-        startDatePicker: addDays(new Date(), -30),
-        endDatePicker: new Date(),
-        pageSize: 10,
-        pageNumber: 1,
-        pageSizeOptions: [10, 20, 50]
-      },
-      results: {
-        records: 0,
-        rows: []
-      },
-      expandForm: false,
-      submitLoading: false,
-      tableLoading: false,
-      tableCheckedId: new Set<String>(),
-      indeterminate: false,
-      checked: false
-    };
+    params: {
+      appId: '',
+      appName: '',
+      roleName: '',
+      displayName: '',
+      employeeNumber: '',
+      startDate: '',
+      endDate: '',
+      startDatePicker: addDays(new Date(), -30),
+      endDatePicker: new Date(),
+      pageSize: 10,
+      pageNumber: 1,
+      pageSizeOptions: [10, 20, 50]
+    },
+    results: {
+      records: 0,
+      rows: []
+    },
+    expandForm: false,
+    submitLoading: false,
+    tableLoading: false,
+    tableCheckedId: new Set<String>(),
+    indeterminate: false,
+    checked: false
+  };
 
   constructor(
     private modalService: NzModalService,
@@ -82,7 +82,7 @@ export class RolesComponent implements OnInit {
     private router: Router,
     private route: ActivatedRoute,
     private cdr: ChangeDetectorRef
-  ) { }
+  ) {}
 
   ngOnInit(): void {
     if (this.route.snapshot.queryParams['appId']) {
@@ -102,10 +102,9 @@ export class RolesComponent implements OnInit {
     this.fetch();
   }
 
-  onReset(): void { }
+  onReset(): void {}
 
-  onBatchDelete(e: MouseEvent): void {
-    e.preventDefault();
+  onBatchDelete(): void {
     this.rolesService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
@@ -183,8 +182,7 @@ export class RolesComponent implements OnInit {
     });
   }
 
-  onDelete(e: MouseEvent, deleteId: String): void {
-    e.preventDefault();
+  onDelete(deleteId: String): void {
     this.rolesService.delete(deleteId).subscribe(res => {
       if (res.code == 0) {
         this.msg.success(this.i18n.fanyi('mxk.alert.delete.success'));
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/shared/consts.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/shared/consts.ts
index 20c5054b2..718a3f276 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/shared/consts.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/shared/consts.ts
@@ -19,5 +19,5 @@ export const CONSTS = {
   INST: 'inst',
   REDIRECT_URI: 'redirect_uri',
   REMEMBER: 'remember',
-  VERSION: 'v4.1.0 GA'
+  VERSION: 'v4.1.1 GA'
 };
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/en-US.json b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/en-US.json
index 89b4750dc..e04ccc251 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/en-US.json
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/en-US.json
@@ -722,7 +722,7 @@
 				"success":"Operate Success!",
 				"error":"Operate Error!"
 			}
-			
+
 		},
 		"text": {
 			"action": "Action",
@@ -737,6 +737,11 @@
 			"add": "Add",
 			"edit": "Edit",
 			"delete": "Delete",
+      "delete.popconfirm":{
+        "title":"Are you sure you want to delete it?",
+        "cancelText":"Cancel",
+        "okText":"Confirm"
+      },
 			"test": "Test",
 			"select": "Select",
 			"confirm": "Confirm",
@@ -938,4 +943,4 @@
 	"validation.date.required": "Please select the start and end date",
 	"validation.goal.required": "Please enter a description of the goal",
 	"validation.standard.required": "Please enter a metric"
-}
\ No newline at end of file
+}
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-CN.json b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-CN.json
index 3a18b0a68..1f61167b7 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-CN.json
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-CN.json
@@ -734,6 +734,11 @@
 			"add": "新增",
 			"edit": "编辑",
 			"delete": "删除",
+      "delete.popconfirm":{
+        "title":"请确定要删除吗？",
+        "cancelText":"取消",
+        "okText":"确定"
+      },
 			"test": "测试",
 			"select": "选择",
 			"confirm": "确定",
@@ -930,4 +935,4 @@
 	"validation.date.required": "请选择起止日期",
 	"validation.goal.required": "请输入目标描述",
 	"validation.standard.required": "请输入衡量标准"
-}
\ No newline at end of file
+}
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-TW.json b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-TW.json
index 0832c8b54..fb6bd92fb 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-TW.json
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-TW.json
@@ -735,6 +735,11 @@
 			"add": "新增",
 			"edit": "編輯",
 			"delete": "刪除",
+      "delete.popconfirm":{
+        "title":"请确定要删除吗？",
+        "cancelText":"取消",
+        "okText":"确定"
+      },
 			"test": "測試",
 			"select": "選擇",
 			"confirm": "確定",
@@ -931,4 +936,4 @@
 	"validation.date.required": "請選擇起止日期",
 	"validation.goal.required": "請輸入目標描述",
 	"validation.standard.required": "請輸入衡量標準"
-}
\ No newline at end of file
+}