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

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
+  };
+}