update

packages/frontend/src/composables/useAddConnectionForm.ts

@@ -8,6 +8,7 @@ import { useTagsStore } from '../stores/tags.store';
 import { useSshKeysStore } from '../stores/sshKeys.store';
 import { useUiNotificationsStore } from '../stores/uiNotifications.store';
 import { useConfirmDialog } from './useConfirmDialog';
+import { useAlertDialog } from './useAlertDialog';
 
 // Define Props interface based on the component's props
 interface AddConnectionFormProps {
@@ -27,6 +28,7 @@ export function useAddConnectionForm(props: AddConnectionFormProps, emit: AddCon
 
   const { t } = useI18n();
   const { showConfirmDialog } = useConfirmDialog();
+  const { showAlertDialog } = useAlertDialog();
   const connectionsStore = useConnectionsStore();
   const proxiesStore = useProxiesStore();
   const tagsStore = useTagsStore();
@@ -807,7 +809,7 @@ export function useAddConnectionForm(props: AddConnectionFormProps, emit: AddCon
       if (confirmedDeleteTag) {
           const success = await tagsStore.deleteTag(tagId);
           if (!success) {
-              alert(t('tags.errorDelete', { error: tagsStore.error || '未知错误' }));
+              showAlertDialog({ title: t('common.error', '错误'), message: t('tags.errorDelete', { error: tagsStore.error || '未知错误' }) });
           }
       }
   };

packages/frontend/src/composables/useAlertDialog.ts

@@ -0,0 +1,62 @@
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import AlertDialog from '../components/common/AlertDialog.vue';
+import { createApp, h } from 'vue';
+
+interface AlertDialogOptions {
+  title: string;
+  message: string;
+  okText?: string;
+  onOk?: () => void | Promise<void>;
+}
+
+export function useAlertDialog() {
+  const { t } = useI18n();
+
+  const showAlertDialog = (options: AlertDialogOptions): Promise<void> => {
+    return new Promise((resolve) => {
+      const { title, message, okText, onOk } = options;
+
+      const
+        container = document.createElement('div');
+      document.body.appendChild(container);
+
+      const app = createApp({
+        render: () =>
+          h(AlertDialog, {
+            visible: true,
+            title,
+            message,
+            okText: okText || t('common.ok', '确定'),
+            onOk: async () => {
+              if (onOk) {
+                await onOk();
+              }
+              app.unmount();
+              container.remove();
+              resolve();
+            },
+            'onUpdate:visible': (isVisible: boolean) => {
+              if (!isVisible) {
+                // This case handles closing via Escape key or clicking outside
+                app.unmount();
+                container.remove();
+                resolve(); // Resolve promise when dialog is closed without explicit ok
+              }
+            },
+          }),
+      });
+
+      // Mount an app with i18n instance
+      const i18n = useI18n();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (app._context.provides as any).i18n = i18n;
+
+      app.mount(container);
+    });
+  };
+
+  return {
+    showAlertDialog,
+  };
+}

packages/frontend/src/composables/useDockerManager.ts

@@ -177,7 +177,6 @@ export function createDockerManager(sessionId: string, wsDeps: DockerManagerDepe
             // How to notify UI? Maybe set an error ref? Or rely on status update?
             // For now, just log. UI component could show a generic error or use a notification system.
             // Consider adding a transient commandError ref if needed.
-             alert(`${t('dockerManager.error.commandFailed', { command: payload?.command || '?' })}: ${payload?.message || 'Unknown error'}`);
         });
 
         const unsubRequestUpdate = onMessage('request_docker_status_update', (payload, message) => {
@@ -192,12 +191,10 @@ export function createDockerManager(sessionId: string, wsDeps: DockerManagerDepe
     const sendDockerCommand = (containerId: string, command: 'start' | 'stop' | 'restart' | 'remove') => {
         if (!isConnected.value) {
             console.warn(`[DockerManager ${sessionId}] Cannot send command, WebSocket not connected.`);
-            alert(t('dockerManager.error.sshNotConnected')); // Use generic disconnected message
             return;
         }
         if (!isDockerAvailable.value) {
            console.warn(`[DockerManager ${sessionId}] Cannot send command, remote Docker is not available.`);
-           alert(t('dockerManager.notAvailable'));
            return;
         }