diff --git a/seatunnel-ui/src/locales/en_US/datasource.ts b/seatunnel-ui/src/locales/en_US/datasource.ts
index e811af285..27b2412c6 100644
--- a/seatunnel-ui/src/locales/en_US/datasource.ts
+++ b/seatunnel-ui/src/locales/en_US/datasource.ts
@@ -35,6 +35,7 @@ export default {
   operation: 'Operation',
   click_to_view: 'Click to view',
   delete: 'Delete',
+  delete_confirm: 'Are you sure delete ?',
   confirm: 'Confirm',
   cancel: 'Cancel',
   create: 'Create',
diff --git a/seatunnel-ui/src/locales/zh_CN/datasource.ts b/seatunnel-ui/src/locales/zh_CN/datasource.ts
index f8321b5f9..6222fd05b 100644
--- a/seatunnel-ui/src/locales/zh_CN/datasource.ts
+++ b/seatunnel-ui/src/locales/zh_CN/datasource.ts
@@ -35,6 +35,7 @@ export default {
   operation: '操作',
   click_to_view: '点击查看',
   delete: '删除',
+  delete_confirm: '确认删除？',
   confirm: '确定',
   cancel: '取消',
   create: '创建',
diff --git a/seatunnel-ui/src/router/index.ts b/seatunnel-ui/src/router/index.ts
index 2a88a6940..464afbcf6 100644
--- a/seatunnel-ui/src/router/index.ts
+++ b/seatunnel-ui/src/router/index.ts
@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 
-import { createRouter, createWebHashHistory } from 'vue-router'
+import {createRouter, createWebHistory} from 'vue-router'
 import routes from './routes'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 
 const router = createRouter({
-  history: createWebHashHistory(
+  history: createWebHistory(
       import.meta.env.MODE === 'production' ? '/ui/' : '/'
   ),
   routes
diff --git a/seatunnel-ui/src/views/datasource/list/index.tsx b/seatunnel-ui/src/views/datasource/list/index.tsx
index 052757494..260cfdfac 100644
--- a/seatunnel-ui/src/views/datasource/list/index.tsx
+++ b/seatunnel-ui/src/views/datasource/list/index.tsx
@@ -52,7 +52,7 @@ const DatasourceList = defineComponent({
     const { getColumns } = useColumns((id: string, type: 'edit' | 'delete') => {
       if (type === 'edit') {
         router.push({ name: 'datasource-edit', params: { id } })
-      } else {
+      } else  if(type === 'delete'){
         deleteRecord(id)
       }
     })
diff --git a/seatunnel-ui/src/views/datasource/list/use-columns.ts b/seatunnel-ui/src/views/datasource/list/use-columns.ts
index 807a42978..81b31a76d 100644
--- a/seatunnel-ui/src/views/datasource/list/use-columns.ts
+++ b/seatunnel-ui/src/views/datasource/list/use-columns.ts
@@ -23,7 +23,6 @@ import { getTableColumn } from '@/common/table'
 
 import { useTableOperation } from '@/hooks'
 import { EditOutlined } from '@vicons/antd'
-import ResourceAuth from '@/components/resource-auth'
 
 export function useColumns(onCallback: Function) {
   const { t } = useI18n()
@@ -80,7 +79,26 @@ export function useColumns(onCallback: Function) {
       {
         title: t('datasource.update_time'),
         key: 'updateTime',
-      }
+      },
+      useTableOperation({
+        title: t('datasource.operation'),
+        key: 'operation',
+        buttons: [
+          {
+            text: t('datasource.edit'),
+            icon: h(EditOutlined),
+            onClick: (rowData) => void onCallback(rowData.id, 'edit')
+          },
+          {
+            isDelete: true,
+            text: t('datasource.delete'),
+            onPositiveClick: (rowData) => void onCallback(rowData.id, 'delete'),
+            negativeText: t('datasource.cancel'),
+            positiveText: t('datasource.confirm'),
+            popTips: t('datasource.delete_confirm')
+          }
+        ]
+      })
     ]
   }
 
diff --git a/seatunnel-ui/src/views/virtual-tables/list/use-columns.ts b/seatunnel-ui/src/views/virtual-tables/list/use-columns.ts
index 860dd0000..86b881f0b 100644
--- a/seatunnel-ui/src/views/virtual-tables/list/use-columns.ts
+++ b/seatunnel-ui/src/views/virtual-tables/list/use-columns.ts
@@ -19,6 +19,7 @@ import { h, ref, watch, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { EditOutlined } from '@vicons/antd'
 import { NButton, NSpace } from 'naive-ui'
+import {useTableOperation} from "@/hooks";
 //import type { TableColumns, VirtualTableRecord } from '../types'
 
 export function useColumns(onCallback: Function) {
@@ -70,33 +71,25 @@ export function useColumns(onCallback: Function) {
         //render: (rowData: VirtualTableRecord) =>
         //  renderTableTime(rowData.createTime)
       },
-      {
+      useTableOperation({
         title: t('virtual_tables.operation'),
         key: 'operation',
-        render: (row: any) =>
-          h(NSpace, null, {
-            default: () => [
-              h(
-                NButton,
-                {
-                  text: true,
-                  onClick: () => void onCallback(row.tableId, 'edit')
-                },
-                {
-                  default: () => t('virtual_tables.edit')
-                }
-              ),
-              h(
-                NButton,
-                {
-                  text: true,
-                  onClick: () => void onCallback(row.tableId, 'delete')
-                },
-                { default: () => t('virtual_tables.delete') }
-              )
-            ]
-          })
-      }
+        buttons: [
+          {
+            text: t('datasource.edit'),
+            icon: h(EditOutlined),
+            onClick: (rowData) => void onCallback(rowData.tableId, 'edit')
+          },
+          {
+            isDelete: true,
+            text: t('datasource.delete'),
+            onPositiveClick: (rowData) => void onCallback(rowData.tableId, 'delete'),
+            negativeText: t('datasource.cancel'),
+            positiveText: t('datasource.confirm'),
+            popTips: t('datasource.delete_confirm')
+          }
+        ]
+      })
     ]
     return columns
   }