feat: 添加自定义对话模态框

packages/frontend/src/App.vue

@@ -17,6 +17,8 @@ import StyleCustomizer from './components/StyleCustomizer.vue';
 import FocusSwitcherConfigurator from './components/FocusSwitcherConfigurator.vue';
 import RemoteDesktopModal from './components/RemoteDesktopModal.vue';
 import VncModal from './components/VncModal.vue';
+import ConfirmDialog from './components/common/ConfirmDialog.vue';
+import { useDialogStore } from './stores/dialog.store';
 
 const { t } = useI18n();
 const authStore = useAuthStore();
@@ -25,6 +27,8 @@ const appearanceStore = useAppearanceStore();
 const layoutStore = useLayoutStore();
 const focusSwitcherStore = useFocusSwitcherStore(); // +++ 实例化焦点切换 Store +++
 const sessionStore = useSessionStore(); // +++ 实例化 Session Store +++
+const dialogStore = useDialogStore(); // +++ 实例化 DialogStore +++
+const { state: dialogState } = storeToRefs(dialogStore); 
 const favoritePathsStore = useFavoritePathsStore(); // +++ 实例化 favoritePathsStore +++
 const { isAuthenticated } = storeToRefs(authStore);
 const { showPopupFileEditorBoolean } = storeToRefs(settingsStore);
@@ -346,6 +350,18 @@ const isElementVisibleAndFocusable = (element: HTMLElement): boolean => {
       @close="sessionStore.closeVncModal()"
     />
 
+    <!-- +++ 全局确认对话框 +++ -->
+    <ConfirmDialog
+          :visible="dialogState.visible"
+          :title="dialogState.title"
+          :message="dialogState.message"
+          :confirm-text="dialogState.confirmText"
+          :cancel-text="dialogState.cancelText"
+          :is-loading="dialogState.isLoading"
+          @confirm="dialogStore.handleConfirm"
+          @cancel="dialogStore.handleCancel"
+          @update:visible="(val: boolean) => dialogStore.state.visible = val"
+        />
 
   </div>
 </template>

packages/frontend/src/components/AddEditQuickCommandForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed inset-0 bg-overlay flex justify-center items-center z-[1050]" @click.self="closeForm">
+  <div class="fixed inset-0 bg-overlay flex justify-center items-center z-50" @click.self="closeForm">
     <div class="bg-background text-foreground p-6 rounded-xl border border-border/50 shadow-2xl w-[90%] max-w-lg">
       <h2 class="m-0 mb-6 text-center text-xl font-semibold">{{ isEditing ? t('quickCommands.form.titleEdit', '编辑快捷指令') : t('quickCommands.form.titleAdd', '添加快捷指令') }}</h2>
       <form @submit.prevent="handleSubmit" class="space-y-5">
@@ -61,6 +61,7 @@ import { useI18n } from 'vue-i18n';
 import { useQuickCommandsStore, type QuickCommandFE } from '../stores/quickCommands.store';
 import { useQuickCommandTagsStore } from '../stores/quickCommandTags.store'; 
 import TagInput from './TagInput.vue';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 const props = defineProps<{
     commandToEdit?: QuickCommandFE | null; // 接收要编辑的指令对象 (should include tagIds)
@@ -69,6 +70,7 @@ const props = defineProps<{
 const emit = defineEmits(['close']);
 
 const { t } = useI18n();
+const { showConfirmDialog } = useConfirmDialog();
 const quickCommandsStore = useQuickCommandsStore();
 const quickCommandTagsStore = useQuickCommandTagsStore(); // +++ Instantiate tag store +++
 const isSubmitting = ref(false);
@@ -126,7 +128,10 @@ const handleDeleteTag = async (tagId: number) => {
     const tagToDelete = quickCommandTagsStore.tags.find(t => t.id === tagId);
     if (!tagToDelete) return;
 
-    if (confirm(t('tags.prompts.confirmDelete', { name: tagToDelete.name }))) {
+    const confirmed = await showConfirmDialog({
+        message: t('tags.prompts.confirmDelete', { name: tagToDelete.name })
+    });
+    if (confirmed) {
         console.log(`[QuickCmdForm] Calling quickCommandTagsStore.deleteTag...`);
         const success = await quickCommandTagsStore.deleteTag(tagId);
         if (success) {

packages/frontend/src/components/CommandHistoryMenu.vue

@@ -48,10 +48,12 @@ import { ref, onMounted, computed } from 'vue';
 import { useCommandHistoryStore, CommandHistoryEntryFE } from '../stores/commandHistory.store';
 import { useUiNotificationsStore } from '../stores/uiNotifications.store';
 import { useI18n } from 'vue-i18n';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 const commandHistoryStore = useCommandHistoryStore();
 const uiNotificationsStore = useUiNotificationsStore();
 const { t } = useI18n();
+const { showConfirmDialog } = useConfirmDialog();
 const hoveredItemId = ref<number | null>(null);
 const listContainer = ref<HTMLElement | null>(null);
 
@@ -80,9 +82,11 @@ const updateSearchTerm = (event: Event) => {
 };
 
 // 确认清空所有历史记录
-const confirmClearAll = () => {
-  // 使用浏览器的 confirm 对话框进行确认
-  if (window.confirm(t('commandHistory.confirmClear', '确定要清空所有历史记录吗？'))) {
+const confirmClearAll = async () => { // 注意 async，并替换为实际函数名
+  const confirmed = await showConfirmDialog({
+    message: t('commandHistory.confirmClear', '确定要清空所有历史记录吗？')
+  });
+  if (confirmed) {
     commandHistoryStore.clearAllHistory();
   }
 };

packages/frontend/src/components/ConnectionList.vue

@@ -5,10 +5,12 @@ import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useConnectionsStore, ConnectionInfo } from '../stores/connections.store';
 import { useTagsStore } from '../stores/tags.store';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 const { t } = useI18n(); 
 const router = useRouter();
 const tagsStore = useTagsStore();
+const { showConfirmDialog } = useConfirmDialog();
 
 
 
@@ -124,7 +126,10 @@ const handleDelete = async (conn: ConnectionInfo) => {
     const connectionsStore = useConnectionsStore();
     // 使用 i18n 获取确认消息
     const confirmMessage = t('connections.prompts.confirmDelete', { name: conn.name });
-    if (window.confirm(confirmMessage)) {
+    const confirmed = await showConfirmDialog({
+      message: confirmMessage
+    });
+    if (confirmed) {
         const success = await connectionsStore.deleteConnection(conn.id);
         if (!success) {
             // 如果删除失败，显示 store 中的错误信息 (或自定义错误)

packages/frontend/src/components/FavoritePathsModal.vue

@@ -5,6 +5,7 @@ import { useFavoritePathsStore, type FavoritePathItem } from '../stores/favorite
 import { useSessionStore } from '../stores/session.store';
 import AddEditFavoritePathForm from './AddEditFavoritePathForm.vue';
 import { useWorkspaceEventEmitter } from '../composables/workspaceEvents';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 const PADDING = 8; // px
 
@@ -25,6 +26,7 @@ const { t } = useI18n();
 const favoritePathsStore = useFavoritePathsStore();
 const sessionStore = useSessionStore();
 const emitWorkspaceEvent = useWorkspaceEventEmitter();
+const { showConfirmDialog } = useConfirmDialog();
 
 const searchTerm = ref('');
 const showAddEditModal = ref(false);
@@ -82,7 +84,10 @@ const openEditModal = (pathItem: FavoritePathItem) => {
 };
 
 const handleDelete = async (pathItem: FavoritePathItem) => {
-  if (confirm(t('favoritePaths.confirmDelete', { name: pathItem.name || pathItem.path }))) {
+  const confirmed = await showConfirmDialog({
+    message: t('favoritePaths.confirmDelete', { name: pathItem.name || pathItem.path })
+  });
+  if (confirmed) {
     try {
       await favoritePathsStore.deleteFavoritePath(pathItem.id, t);
     } catch (error) {

packages/frontend/src/components/FocusSwitcherConfigurator.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import draggable from 'vuedraggable';
 import { useFocusSwitcherStore, type FocusableInput, type FocusItemConfig, type FocusSwitcherFullConfig } from '../stores/focusSwitcher.store';
 import { storeToRefs } from 'pinia';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 // 本地接口，仅用于右侧列表显示
 interface SequenceDisplayItem extends FocusableInput {}
@@ -23,6 +24,7 @@ const emit = defineEmits(['close']);
 // --- Setup ---
 const { t } = useI18n();
 const focusSwitcherStore = useFocusSwitcherStore(); // 实例化 Store
+const { showConfirmDialog } = useConfirmDialog();
  
 // --- State ---
 const dialogRef = ref<HTMLElement | null>(null);
@@ -144,9 +146,12 @@ watch([localSequence, localItemConfigs], () => {
 
 
 // --- Methods ---
-const closeDialog = () => {
+const closeDialog = async () => {
   if (hasChanges.value) {
-    if (confirm(t('focusSwitcher.confirmClose', '有未保存的更改，确定要关闭吗？'))) {
+    const confirmed = await showConfirmDialog({
+      message: t('focusSwitcher.confirmClose', '有未保存的更改，确定要关闭吗？')
+    });
+    if (confirmed) {
       emit('close');
     }
   } else {

packages/frontend/src/components/LayoutConfigurator.vue

@@ -6,6 +6,7 @@ import { useSettingsStore } from '../stores/settings.store';
 import { storeToRefs } from 'pinia';
 import draggable from 'vuedraggable';
 import LayoutNodeEditor from './LayoutNodeEditor.vue';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 
 
@@ -25,6 +26,7 @@ const { t } = useI18n();
 const layoutStore = useLayoutStore();
 const settingsStore = useSettingsStore(); // +++ Initialize settings store +++
 const { layoutLockedBoolean } = storeToRefs(settingsStore); // +++ Get reactive state +++
+const { showConfirmDialog } = useConfirmDialog();
 
 // --- State ---
 const localLayoutTree: Ref<LayoutNode | null> = ref(null);
@@ -184,10 +186,13 @@ const handleLayoutLockChange = async () => { // Removed event parameter
   }
 };
 
-const closeDialog = () => {
+const closeDialog = async () => {
   // Use the computed property for the check
   if (isModified.value) {
-    if (confirm(t('layoutConfigurator.confirmClose', '有未保存的更改，确定要关闭吗？'))) {
+    const confirmed = await showConfirmDialog({
+      message: t('layoutConfigurator.confirmClose', '有未保存的更改，确定要关闭吗？')
+    });
+    if (confirmed) {
       emit('close');
     }
   } else {
@@ -219,8 +224,11 @@ const saveLayout = async () => { // Make async
   }
 };
 
-const resetToDefault = () => {
-  if (confirm(t('layoutConfigurator.confirmReset', '确定要恢复默认布局和侧栏配置吗？当前更改将丢失。'))) {
+const resetToDefault = async () => {
+  const confirmed = await showConfirmDialog({
+    message: t('layoutConfigurator.confirmReset', '确定要恢复默认布局和侧栏配置吗？当前更改将丢失。')
+  });
+  if (confirmed) {
     // Reset main layout
     const defaultLayout = layoutStore.getSystemDefaultLayout();
     localLayoutTree.value = JSON.parse(JSON.stringify(defaultLayout));
@@ -295,12 +303,15 @@ function findAndRemoveNode(node: LayoutNode | null, parentNodeId: string | undef
 }
 
 // CORRECTED handleNodeRemove
-const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex: number }) => {
+const handleNodeRemove = async (payload: { parentNodeId: string | undefined; nodeIndex: number }) => {
   console.log('[LayoutConfigurator] Received node remove request:', payload);
   if (payload.parentNodeId === undefined && payload.nodeIndex === 0) {
-     if (confirm(t('layoutConfigurator.confirmClearLayout', '确定要清空整个布局吗？所有面板将返回可用列表。'))) { // Keep default text for now
-       localLayoutTree.value = null;
-     }
+    const confirmed = await showConfirmDialog({
+      message: t('layoutConfigurator.confirmClearLayout', '确定要清空整个布局吗？所有面板将返回可用列表。')
+    });
+    if (confirmed) {
+      localLayoutTree.value = null;
+    }
   } else if (payload.parentNodeId) {
      // Update the local tree; isModified will react automatically
      localLayoutTree.value = findAndRemoveNode(localLayoutTree.value, payload.parentNodeId, payload.nodeIndex);

packages/frontend/src/components/ManageTagConnectionsModal.vue

@@ -5,6 +5,7 @@ import { storeToRefs } from 'pinia';
 import { useConnectionsStore, type ConnectionInfo } from '../stores/connections.store';
 import { useTagsStore, type TagInfo } from '../stores/tags.store';
 import { useUiNotificationsStore } from '../stores/uiNotifications.store';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 interface Props {
   tagInfo: TagInfo | null; // 传递整个 TagInfo 对象
@@ -19,6 +20,7 @@ const { t } = useI18n();
 const connectionsStore = useConnectionsStore();
 const tagsStore = useTagsStore(); // 如果需要更新标签信息或调用标签相关的 actions
 const uiNotificationsStore = useUiNotificationsStore();
+const { showConfirmDialog } = useConfirmDialog();
 
 const { connections: allConnections, isLoading: connectionsLoading } = storeToRefs(connectionsStore);
 
@@ -127,7 +129,10 @@ const handleDeleteTag = async () => {
   if (!props.tagInfo) return;
 
   const tagName = props.tagInfo.name;
-  if (confirm(t('tags.prompts.confirmDelete', { name: tagName }))) {
+  const confirmed = await showConfirmDialog({
+    message: t('tags.prompts.confirmDelete', { name: tagName })
+  });
+  if (confirmed) {
     const success = await tagsStore.deleteTag(props.tagInfo.id);
     if (success) {
       uiNotificationsStore.addNotification({ message: t('tags.deleteSuccess', { name: tagName }), type: 'success' }); // 需要新的翻译键

packages/frontend/src/components/NotificationSettings.vue

@@ -75,8 +75,10 @@ import { useNotificationsStore } from '../stores/notifications.store';
 import { NotificationSetting, NotificationChannelType, NotificationEvent } from '../types/server.types';
 import NotificationSettingForm from './NotificationSettingForm.vue'; 
 import { useI18n } from 'vue-i18n';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 const store = useNotificationsStore();
+const { showConfirmDialog } = useConfirmDialog();
 const { t } = useI18n();
 
 const showAddForm = ref(false);
@@ -121,9 +123,14 @@ const editSetting = (setting: NotificationSetting) => {
   showAddForm.value = false; // Ensure add form is hidden
 };
 
-const confirmDelete = (setting: NotificationSetting) => {
-  if (setting.id && confirm(t('settings.notifications.confirmDelete', { name: setting.name }))) {
-    store.deleteSetting(setting.id);
+const confirmDelete = async (setting: NotificationSetting) => {
+  if (setting.id) {
+    const confirmed = await showConfirmDialog({
+      message: t('settings.notifications.confirmDelete', { name: setting.name })
+    });
+    if (confirmed) {
+      store.deleteSetting(setting.id);
+    }
   }
 };
 

packages/frontend/src/components/ProxyList.vue

@@ -2,9 +2,11 @@
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import { useProxiesStore, ProxyInfo } from '../stores/proxies.store';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 const { t } = useI18n();
 const proxiesStore = useProxiesStore();
+const { showConfirmDialog } = useConfirmDialog();
 const { proxies, isLoading, error } = storeToRefs(proxiesStore);
 
 // 定义组件发出的事件
@@ -13,7 +15,10 @@ const emit = defineEmits(['edit-proxy']);
 // 处理删除代理的方法
 const handleDelete = async (proxy: ProxyInfo) => {
     const confirmMessage = t('proxies.prompts.confirmDelete', { name: proxy.name });
-    if (window.confirm(confirmMessage)) {
+    const confirmed = await showConfirmDialog({
+      message: confirmMessage
+    });
+    if (confirmed) {
         const success = await proxiesStore.deleteProxy(proxy.id);
         if (!success) {
             alert(t('proxies.errors.deleteFailed', { error: proxiesStore.error || '未知错误' }));

packages/frontend/src/components/SshKeyManagementModal.vue

@@ -3,12 +3,14 @@ import { ref, reactive, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSshKeysStore, SshKeyBasicInfo, SshKeyInput } from '../stores/sshKeys.store';
 import { useUiNotificationsStore } from '../stores/uiNotifications.store';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 const emit = defineEmits(['close']);
 
 const { t } = useI18n();
 const sshKeysStore = useSshKeysStore();
 const uiNotificationsStore = useUiNotificationsStore();
+const { showConfirmDialog } = useConfirmDialog();
 
 const keys = computed(() => sshKeysStore.sshKeys);
 const isLoading = computed(() => sshKeysStore.isLoading);
@@ -104,18 +106,20 @@ const handleSubmit = async () => {
 
 // Handle key deletion
 const handleDelete = async (key: SshKeyBasicInfo) => {
-    // Simple confirmation dialog
-    if (confirm(t('sshKeys.modal.confirmDelete', { name: key.name }))) {
-        const success = await sshKeysStore.deleteSshKey(key.id);
-        if (!success) {
-            // Error handled by store
-        }
-         // If the deleted key was being edited, close the form
-         if (keyToEdit.value?.id === key.id) {
-            isAddEditFormVisible.value = false;
-            keyToEdit.value = null;
-        }
+  const confirmed = await showConfirmDialog({
+    message: t('sshKeys.modal.confirmDelete', { name: key.name })
+  });
+  if (confirmed) {
+    const success = await sshKeysStore.deleteSshKey(key.id);
+    if (!success) {
+        // Error handled by store
     }
+     // If the deleted key was being edited, close the form
+     if (keyToEdit.value?.id === key.id) {
+        isAddEditFormVisible.value = false;
+        keyToEdit.value = null;
+    }
+  }
 };
 
 // Cancel add/edit form

packages/frontend/src/components/WorkspaceConnectionList.vue

@@ -12,6 +12,8 @@ import { useUiNotificationsStore } from '../stores/uiNotifications.store'; // ++
 import { useSettingsStore } from '../stores/settings.store'; 
 import { useWorkspaceEventEmitter } from '../composables/workspaceEvents';
 import ManageTagConnectionsModal from './ManageTagConnectionsModal.vue'; 
+import { useConfirmDialog } from '../composables/useConfirmDialog';
+
 
 // 定义事件
 
@@ -25,6 +27,7 @@ const sessionStore = useSessionStore(); // 获取 session store 实例
 const focusSwitcherStore = useFocusSwitcherStore(); // +++ 实例化焦点切换 Store +++
 const uiNotificationsStore = useUiNotificationsStore(); // +++ 修正实例化大小写 +++
 const settingsStore = useSettingsStore(); // 实例化设置 store
+const { showConfirmDialog } = useConfirmDialog();
 
 const { connections, isLoading: connectionsLoading, error: connectionsError } = storeToRefs(connectionsStore);
 const { tags, isLoading: tagsLoading, error: tagsError } = storeToRefs(tagsStore);
@@ -378,7 +381,7 @@ const closeContextMenu = () => {
 };
 
 // 处理右键菜单操作
-const handleMenuAction = (action: 'add' | 'edit' | 'delete' | 'clone') => { // 添加 'clone' 类型
+const handleMenuAction = async (action: 'add' | 'edit' | 'delete' | 'clone') => { // 添加 'clone' 类型
   const conn = contextTargetConnection.value;
   closeContextMenu(); // 先关闭菜单
 
@@ -386,12 +389,15 @@ const handleMenuAction = (action: 'add' | 'edit' | 'delete' | 'clone') => { //
     console.log('[WorkspaceConnectionList] handleMenuAction called with action: add. Emitting request-add-connection...'); 
     // router.push('/connections/add'); // 改为触发事件
     emitWorkspaceEvent('connection:requestAdd');
-  } else if (conn) {
+  }else if (conn) {
     if (action === 'edit') {
       // router.push(`/connections/edit/${conn.id}`); // 改为触发事件
       emitWorkspaceEvent('connection:requestEdit', { connectionInfo: conn }); // 传递整个连接对象
     } else if (action === 'delete') {
-      if (confirm(t('connections.prompts.confirmDelete', { name: conn.name || conn.host }))) {
+      const confirmed = await showConfirmDialog({
+        message: t('connections.prompts.confirmDelete', { name: conn.name || conn.host })
+      });
+      if (confirmed) {
         connectionsStore.deleteConnection(conn.id);
         // 注意：删除后列表会自动更新，因为 store 是响应式的
       }
@@ -476,7 +482,7 @@ const closeTagContextMenu = () => {
 
 // 处理标签右键菜单操作
 // 修改：允许直接传递 groupData，用于新的行内编辑按钮
-const handleTagMenuAction = (action: 'connectAll' | 'manageTag' | 'deleteAllConnections', directGroupData?: (typeof filteredAndGroupedConnections.value)[0]) => {
+const handleTagMenuAction = async (action: 'connectAll' | 'manageTag' | 'deleteAllConnections', directGroupData?: (typeof filteredAndGroupedConnections.value)[0]) => {
   const group = directGroupData || contextTargetTagGroup.value; // 优先使用直接传递的 groupData
   closeTagContextMenu(); // 先关闭菜单
 
@@ -530,7 +536,10 @@ const handleTagMenuAction = (action: 'connectAll' | 'manageTag' | 'deleteAllConn
       return;
     }
 
-    if (confirm(t('workspaceConnectionList.confirmDeleteAllConnectionsInGroup', { count: group.connections.length, groupName: group.groupName }))) { 
+    const confirmed = await showConfirmDialog({
+      message: t('workspaceConnectionList.confirmDeleteAllConnectionsInGroup', { count: group.connections.length, groupName: group.groupName })
+    });
+    if (confirmed) {
       const connectionIdsToDelete = group.connections.map(conn => conn.id);
       
       const deletePromises = connectionIdsToDelete.map(connId =>

packages/frontend/src/components/common/ConfirmDialog.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+interface Props {
+  visible: boolean;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  isLoading?: boolean;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['confirm', 'cancel', 'update:visible']);
+
+const { t } = useI18n();
+
+const dialogVisible = ref(props.visible);
+
+watch(() => props.visible, (newValue) => {
+  dialogVisible.value = newValue;
+});
+
+watch(dialogVisible, (newValue) => {
+  if (newValue !== props.visible) {
+    emit('update:visible', newValue);
+  }
+});
+
+const handleConfirm = () => {
+  if (props.isLoading) return;
+  emit('confirm');
+};
+
+const handleCancel = () => {
+  if (props.isLoading) return;
+  emit('cancel');
+  // 通常取消也应关闭对话框，如果store管理visible，则由store处理
+  // emit('update:visible', false); 
+};
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && dialogVisible.value && !props.isLoading) {
+    handleCancel();
+  }
+};
+
+watch(dialogVisible, (isVisible) => {
+  if (isVisible) {
+    document.addEventListener('keydown', handleKeydown);
+  } else {
+    document.removeEventListener('keydown', handleKeydown);
+  }
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handleKeydown);
+});
+
+</script>
+
+<template>
+  <teleport to="body">
+    <div
+      v-if="dialogVisible"
+      class="fixed inset-0 z-[100] flex items-center justify-center bg-overlay p-4"
+      @mousedown.self="handleCancel"
+    >
+      <div
+        class="bg-background text-foreground p-5 rounded-lg shadow-xl border border-border w-full max-w-md flex flex-col"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="props.title"
+      >
+        <h3 class="text-xl font-semibold mb-4 text-center flex-shrink-0" :id="props.title">
+          {{ props.title }}
+        </h3>
+        <div class="flex-grow mb-6 text-sm">
+          <p class="text-text-secondary text-center whitespace-pre-wrap">
+            {{ props.message }}
+          </p>
+        </div>
+        <div class="flex justify-end gap-3 flex-shrink-0">
+          <button
+            @click="handleCancel"
+            :disabled="props.isLoading"
+            type="button"
+            class="px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-background-dark text-sm font-medium transition-colors duration-150 bg-background border border-border/50 text-text-secondary hover:bg-border hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {{ props.cancelText || t('common.cancel', '取消') }}
+          </button>
+          <button
+            @click="handleConfirm"
+            :disabled="props.isLoading"
+            type="button"
+            class="px-4 py-2 text-sm font-medium text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-background-dark transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center bg-primary hover:bg-primary-hover focus:ring-primary"
+          >
+            <svg
+              v-if="props.isLoading"
+              class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+            {{ props.confirmText || t('common.confirm', '确认') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>

packages/frontend/src/components/style-customizer/StyleCustomizerBackgroundTab.vue

@@ -4,8 +4,11 @@ import { useI18n } from 'vue-i18n';
 import { useAppearanceStore } from '../../stores/appearance.store';
 import { useUiNotificationsStore } from '../../stores/uiNotifications.store';
 import { storeToRefs } from 'pinia';
+import { useConfirmDialog } from '../../composables/useConfirmDialog';
+
 
 const { t } = useI18n();
+const { showConfirmDialog } = useConfirmDialog();
 const appearanceStore = useAppearanceStore();
 const notificationsStore = useUiNotificationsStore();
 
@@ -294,9 +297,11 @@ const handleSaveLocalPreset = async () => {
 };
 
 const handleDeleteLocalPreset = async (name: string) => {
-  // name here is the full filename with .html
   const displayName = name.replace(/\.html$/, '');
-  if (confirm(t('styleCustomizer.confirmDeletePreset', { name: displayName }))) {
+  const confirmed = await showConfirmDialog({
+    message: t('styleCustomizer.confirmDeletePreset', { name: displayName })
+  });
+  if (confirmed) {
     try {
       await deleteLocalHtmlPreset(name);
       notificationsStore.addNotification({ type: 'success', message: t('styleCustomizer.localPresetDeleted') });

packages/frontend/src/composables/settings/useIpBlacklist.ts

@@ -3,11 +3,13 @@ import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import { useSettingsStore } from '../../stores/settings.store';
 import { useAuthStore } from '../../stores/auth.store';
+import { useConfirmDialog } from '../useConfirmDialog';
 
 export function useIpBlacklist() {
     const settingsStore = useSettingsStore();
     const authStore = useAuthStore();
     const { t } = useI18n();
+    const { showConfirmDialog } = useConfirmDialog();
     const { settings, ipBlacklistEnabledBoolean } = storeToRefs(settingsStore);
 
     // --- IP Blacklist Enabled State & Method ---
@@ -110,7 +112,11 @@ export function useIpBlacklist() {
 
     const handleDeleteIp = async (ip: string) => {
         blacklistToDeleteIp.value = ip;
-        if (confirm(t('settings.ipBlacklist.confirmRemoveIp', { ip }))) {
+        const confirmed = await showConfirmDialog({
+            title: '',
+            message: t('settings.ipBlacklist.confirmRemoveIp', { ip }),
+        });
+        if (confirmed) {
             blacklistDeleteLoading.value = true;
             blacklistDeleteError.value = null;
             try {

packages/frontend/src/composables/useAddConnectionForm.ts

@@ -7,6 +7,7 @@ import { useProxiesStore } from '../stores/proxies.store';
 import { useTagsStore } from '../stores/tags.store';
 import { useSshKeysStore } from '../stores/sshKeys.store';
 import { useUiNotificationsStore } from '../stores/uiNotifications.store';
+import { useConfirmDialog } from './useConfirmDialog';
 
 // Define Props interface based on the component's props
 interface AddConnectionFormProps {
@@ -25,6 +26,7 @@ export function useAddConnectionForm(props: AddConnectionFormProps, emit: AddCon
   const { connectionToEdit } = toRefs(props);
 
   const { t } = useI18n();
+  const { showConfirmDialog } = useConfirmDialog();
   const connectionsStore = useConnectionsStore();
   const proxiesStore = useProxiesStore();
   const tagsStore = useTagsStore();
@@ -767,7 +769,10 @@ export function useAddConnectionForm(props: AddConnectionFormProps, emit: AddCon
     if (!isEditMode.value || !connectionToEdit.value) return;
 
     const connectionName = connectionToEdit.value.name || `ID: ${connectionToEdit.value.id}`;
-    if (!confirm(t('connections.prompts.confirmDelete', { name: connectionName }))) {
+    const confirmedDeleteConnection = await showConfirmDialog({
+      message: t('connections.prompts.confirmDelete', { name: connectionName })
+    });
+    if (!confirmedDeleteConnection) {
         return;
     }
 
@@ -796,7 +801,10 @@ export function useAddConnectionForm(props: AddConnectionFormProps, emit: AddCon
       const tagToDelete = tags.value.find(t_ => t_.id === tagId);
       if (!tagToDelete) return;
 
-      if (confirm(t('tags.prompts.confirmDelete', { name: tagToDelete.name }))) {
+      const confirmedDeleteTag = await showConfirmDialog({
+        message: t('tags.prompts.confirmDelete', { name: tagToDelete.name })
+      });
+      if (confirmedDeleteTag) {
           const success = await tagsStore.deleteTag(tagId);
           if (!success) {
               alert(t('tags.errorDelete', { error: tagsStore.error || '未知错误' }));

packages/frontend/src/composables/useConfirmDialog.ts

@@ -0,0 +1,45 @@
+import { useDialogStore } from '../stores/dialog.store';
+import { useI18n } from 'vue-i18n';
+
+interface ConfirmDialogOptions {
+  title?: string; // 将 title 设为可选
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+export function useConfirmDialog() {
+  const dialogStore = useDialogStore();
+  const { t } = useI18n(); // For potential default texts if needed
+
+  const showConfirmDialog = (options: ConfirmDialogOptions): Promise<boolean> => {
+    // Provide default title if not specified, though usually it's better to be explicit
+    const finalOptions = {
+      title: options.title || t('common.confirmationTitle', '请确认'),
+      message: options.message,
+      confirmText: options.confirmText,
+      cancelText: options.cancelText,
+    };
+    return dialogStore.showDialog(finalOptions);
+  };
+
+  // Optional: A simpler version if you often use a generic title
+  const confirmAction = (message: string, title?: string): Promise<boolean> => {
+    return showConfirmDialog({
+      title: title || t('common.confirmationTitle', '请确认'),
+      message: message,
+    });
+  };
+  
+  // Expose setLoading if needed directly from composable
+  const setLoading = (isLoading: boolean) => {
+    dialogStore.setLoading(isLoading);
+  };
+
+
+  return {
+    showConfirmDialog,
+    confirmAction, // Export the simpler version as well
+    setDialogLoading: setLoading, // Expose setLoading with a more specific name
+  };
+}

packages/frontend/src/stores/dialog.store.ts

@@ -0,0 +1,83 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+interface DialogState {
+  visible: boolean;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  isLoading: boolean;
+  resolvePromise?: (value: boolean) => void;
+  rejectPromise?: (reason?: any) => void;
+}
+
+export const useDialogStore = defineStore('dialog', () => {
+  const { t } = useI18n();
+
+  const defaultState: DialogState = {
+    visible: false,
+    title: '',
+    message: '',
+    confirmText: t('common.confirm', '确认'),
+    cancelText: t('common.cancel', '取消'),
+    isLoading: false,
+  };
+
+  const state = ref<DialogState>({ ...defaultState });
+
+  const showDialog = (options: {
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+  }): Promise<boolean> => {
+    state.value = {
+      ...defaultState,
+      ...options,
+      visible: true,
+      isLoading: false, // Reset loading state
+    };
+    return new Promise((resolve, reject) => {
+      state.value.resolvePromise = resolve;
+      state.value.rejectPromise = reject; // Though typically we resolve false for cancel
+    });
+  };
+
+  const handleConfirm = async () => {
+    if (state.value.resolvePromise) {
+      state.value.resolvePromise(true);
+    }
+    state.value.visible = false;
+    // No need to reset state here, showDialog will do it
+  };
+
+  const handleCancel = () => {
+    if (state.value.resolvePromise) { // Resolve with false on cancel
+      state.value.resolvePromise(false);
+    }
+    state.value.visible = false;
+    // No need to reset state here, showDialog will do it
+  };
+  
+  // For actions that might take time, to show a loading spinner on the confirm button
+  const setLoading = (loading: boolean) => {
+    state.value.isLoading = loading;
+  };
+
+  return {
+    visible: ref(state.value.visible), // Expose refs for reactivity in component
+    title: ref(state.value.title),
+    message: ref(state.value.message),
+    confirmText: ref(state.value.confirmText),
+    cancelText: ref(state.value.cancelText),
+    isLoading: ref(state.value.isLoading),
+    // ---
+    state, // Expose whole state for ConfirmDialog.vue to bind
+    showDialog,
+    handleConfirm,
+    handleCancel,
+    setLoading,
+  };
+});

packages/frontend/src/views/CommandHistoryView.vue

@@ -92,8 +92,10 @@ import { useWorkspaceEventEmitter } from '../composables/workspaceEvents';
 import { useSessionStore } from '../stores/session.store'; 
 import type { SessionState } from '../stores/session/types'; 
 import { useConnectionsStore } from '../stores/connections.store';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 const commandHistoryStore = useCommandHistoryStore();
+const { showConfirmDialog } = useConfirmDialog();
 const uiNotificationsStore = useUiNotificationsStore();
 const { t } = useI18n();
 const focusSwitcherStore = useFocusSwitcherStore(); // +++ 实例化焦点切换 Store +++
@@ -208,8 +210,11 @@ const handleSearchInputBlur = () => {
 };
 
 // 确认清空所有历史记录
-const confirmClearAll = () => {
-  if (window.confirm(t('commandHistory.confirmClear', '确定要清空所有历史记录吗？'))) {
+const confirmClearAll = async () => { // 注意 async
+  const confirmed = await showConfirmDialog({
+    message: t('commandHistory.confirmClear', '确定要清空所有历史记录吗？')
+  });
+  if (confirmed) {
     commandHistoryStore.clearAllHistory();
   }
 };

packages/frontend/src/views/ConnectionsView.vue

@@ -10,13 +10,14 @@ import type { SortField, SortOrder } from '../stores/settings.store';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import type { ConnectionInfo } from '../stores/connections.store';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
 import { storeToRefs } from 'pinia';
 import { formatDistanceToNow } from 'date-fns';
 import { zhCN, enUS, ja } from 'date-fns/locale';
 import type { Locale } from 'date-fns';
 
 const { t, locale } = useI18n();
-const router = useRouter();
+const { showConfirmDialog } = useConfirmDialog();
 const connectionsStore = useConnectionsStore();
 const sessionStore = useSessionStore();
 const tagsStore = useTagsStore();
@@ -282,7 +283,11 @@ const handleBatchDeleteConnections = async () => {
     `您确定要删除选中的 ${selectedConnectionIdsForBatch.value.size} 个连接吗？此操作无法撤销。`
   );
 
-  if (window.confirm(confirmMessage)) {
+
+  const confirmed = await showConfirmDialog({
+    message: confirmMessage
+  });
+  if (confirmed) {
     isDeletingSelectedConnections.value = true;
     try {
       const idsToDelete = Array.from(selectedConnectionIdsForBatch.value);

packages/frontend/src/views/QuickCommandsView.vue

@@ -233,6 +233,7 @@ import { useQuickCommandsStore, type QuickCommandFE, type QuickCommandSortByType
 import { useQuickCommandTagsStore } from '../stores/quickCommandTags.store'; 
 import { useUiNotificationsStore } from '../stores/uiNotifications.store';
 import { useI18n } from 'vue-i18n';
+import { useConfirmDialog } from '../composables/useConfirmDialog';
 import AddEditQuickCommandForm from '../components/AddEditQuickCommandForm.vue';
 import { useFocusSwitcherStore } from '../stores/focusSwitcher.store'; 
 import { useSettingsStore } from '../stores/settings.store';
@@ -245,6 +246,7 @@ const quickCommandsStore = useQuickCommandsStore();
 const quickCommandTagsStore = useQuickCommandTagsStore(); 
 const uiNotificationsStore = useUiNotificationsStore();
 const { t } = useI18n();
+const { showConfirmDialog } = useConfirmDialog();
 const focusSwitcherStore = useFocusSwitcherStore();
 const settingsStore = useSettingsStore();
 const emitWorkspaceEvent = useWorkspaceEventEmitter();
@@ -510,8 +512,11 @@ const closeForm = () => {
   commandToEdit.value = null;
 };
 
-const confirmDelete = (command: QuickCommandFE) => {
-  if (window.confirm(t('quickCommands.confirmDelete', { name: command.name || command.command }))) {
+const confirmDelete = async (command: QuickCommandFE) => {
+  const confirmed = await showConfirmDialog({
+    message: t('quickCommands.confirmDelete', { name: command.name || command.command })
+  });
+  if (confirmed) {
     quickCommandsStore.deleteQuickCommand(command.id);
   }
 };