diff --git a/src/components/InstallationWizard.vue b/src/components/InstallationWizard.vue
index 990274a..7482a93 100644
--- a/src/components/InstallationWizard.vue
+++ b/src/components/InstallationWizard.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-6">
-    <Notification v-bind="notifyData" />
     <div class="w-full max-w-2xl bg-white rounded-lg shadow-xl overflow-hidden">
       <div class="p-8">
         <!-- Layout with Setup Guide on the Top Side -->
@@ -106,10 +105,6 @@
                 class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500">
                 {{ t('wizard.prev') }}
               </button>
-              <!-- <button v-if="currentStep === 0"   :disabled="!isLicenseAccepted" @click="nextStep" type="button"
-                  class="px-4 py-2 w-full bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-300">
-                  {{  t('wizard.next') }}
-              </button> -->
               <button v-if="currentStep === 0" :class="{
                 'px-4 py-2 w-full bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500': true,
                 'bg-gray-300 opacity-50': !isLicenseAccepted
@@ -157,12 +152,14 @@
 import { ref, reactive, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { CheckCircleIcon, XCircleIcon } from 'lucide-vue-next'
-import Notification from './Notification.vue'
 import StepSection from './StepSection.vue'
 import StepIndicator from './StepIndicator.vue'
-import { languageLabels, defaultConfig, stepsConfig } from '../config'
-import { postData, getData } from '../utils/request'
-import { Step, Config } from '../types'
+import { languageLabels, defaultConfig, stepsConfig } from '@/config'
+import { postData, getData } from '@/utils/request'
+import { confirm } from '@/utils/confirm'
+import { notify } from '@/utils/notify'
+import { Step, Config } from '@/types'
+import wizardConfig from '../../wizard.config'
 const { t, messages, locale, availableLocales } = useI18n()
 
 // Reactive state for license acceptance
@@ -194,12 +191,6 @@ const stepTexts = [
 
 const steps: Step[] = stepsConfig
 
-const notifyData = reactive({
-  message: '',
-  type: 'info',
-  duration: 3000,
-})
-
 
 // fetch system overview data
 const fetchSystemOverview = async () => {
@@ -212,29 +203,58 @@ const fetchSystemOverview = async () => {
 }
 
 onMounted(() => {
-  notify('Welcome to the installation wizard', 'info')
+  notify({
+    message: 'Welcome to the installation wizard',
+  })
   fetchSystemOverview()
 })
 
-const notify = (message: string, type: string = 'info') => {
-  notifyData.message = message
-  notifyData.type = type
-  setTimeout(() => {
-    notifyData.message = ''
-  }, notifyData.duration)
-}
 
 
 // Modify config dynamically in nextStep
 const nextStep = async (event: Event) => {
   event.preventDefault()
-  console.log('nextStep')
   if (currentStep.value === 0) {
     // License step - check if the user accepted the license
     if (!isLicenseAccepted.value) {
-      notify(t('wizard.licenseError'), 'error') // Handle license acceptance error
+      notify({
+        message: t('wizard.licenseError'),
+        type: 'error'
+      }) // Handle license acceptance error
       return
+    } else {
+      // check /data/install.lock file
+      try {
+        const res = await getData('/api/status')
+        if (res.success && res.data.locked) {
+          if (wizardConfig.canIgnoreLock) {
+            currentStep.value++
+          } else {
+            confirm({
+              title: t('wizard.installLocked'),
+              message: t('wizard.installLockedMessage'),
+              confirmText: t('wizard.installLockedConfirm'),
+              cancelText: t('wizard.installLockedCancel'),
+              type: 'info'
+            }).then((value) => {
+              if (value) {
+                currentStep.value++
+              }
+            })
+          }
+          return
+        } else {
+          currentStep.value++
+        }
+      } catch (error: Error | any) {
+        notify({
+          message: t('wizard.error', { msg: error.message }),
+          type: 'error'
+        })
+        return
+      }
     }
+    return
   }
   if (currentStep.value < steps.length - 1) {
     currentStep.value++
diff --git a/src/components/MsgConfirm.vue b/src/components/MsgConfirm.vue
new file mode 100644
index 0000000..2fa905d
--- /dev/null
+++ b/src/components/MsgConfirm.vue
@@ -0,0 +1,113 @@
+<template>
+  <div
+    v-if="visible"
+    class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 z-50"
+  >
+    <div
+      class="bg-white rounded-lg shadow-lg p-6 w-80"
+      :class="typeClass"
+    >
+      <div class="flex items-center justify-between">
+        <h3 :class="typeClass" class="text-lg font-semibold flex items-center">
+          <component :is="typeIcon" class="inline-block mr-2 w-5 h-5" />
+          {{ title }}
+        </h3>
+        <button @click="handleCancel" class="text-gray-500 hover:text-gray-800">
+          <X class="w-5 h-5" />
+        </button>
+      </div>
+      <div class="mt-4 text-gray-700">{{ message }}</div>
+      <div class="flex justify-end mt-6 space-x-3">
+        <button
+          @click="handleCancel"
+          class="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
+        >
+          {{ cancelText }}
+        </button>
+        <button
+          @click="handleConfirm"
+          class="px-4 py-2 rounded-md text-white focus:outline-none focus:ring-2"
+          :class="confirmButtonClass"
+        >
+          {{ confirmText }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, FunctionalComponent } from "vue";
+import { Icon, Info, AlertTriangle, AlertCircle, CheckCircle, X } from "lucide-vue-next";
+import { defineProps, defineEmits } from "vue";
+
+// Define Props with TypeScript types
+const props = defineProps<{
+  visible: boolean;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  type?: "info" | "error" | "warning" | "success";
+}>();
+
+// Define Emits with TypeScript types
+const emit = defineEmits<{
+  (event: "confirm"): void;
+  (event: "cancel"): void;
+}>();
+
+// Default prop values
+const confirmText = computed(() => props.confirmText || "OK");
+const cancelText = computed(() => props.cancelText || "Cancel");
+const type = computed(() => props.type || "info");
+
+// Maps for dynamic properties
+const typeIcons: Record<string, FunctionalComponent> = {
+  info: Info,
+  error: AlertCircle,
+  warning: AlertTriangle,
+  success: CheckCircle,
+};
+
+const typeClasses: Record<string, string> = {
+  info: "text-blue-500",
+  error: "text-red-500",
+  warning: "text-yellow-500",
+  success: "text-green-500",
+};
+
+const confirmButtonClasses: Record<string, string> = {
+  info: "bg-blue-500 hover:bg-blue-600 focus:ring-blue-500",
+  error: "bg-red-500 hover:bg-red-600 focus:ring-red-500",
+  warning: "bg-yellow-500 hover:bg-yellow-600 focus:ring-yellow-500",
+  success: "bg-green-500 hover:bg-green-600 focus:ring-green-500",
+};
+
+// Computed properties for dynamic values
+const typeIcon = computed(() => typeIcons[type.value] || "info");
+const typeClass = computed(() => typeClasses[type.value] || "text-blue-500 bg-blue-100");
+const confirmButtonClass = computed(
+  () => confirmButtonClasses[type.value] || "bg-blue-500"
+);
+
+// Event handlers
+const handleConfirm = () => emit("confirm");
+const handleCancel = () => emit("cancel");
+</script>
+
+<style scoped>
+/* Add transition effects for the modal and buttons */
+.bg-blue-100, .bg-red-100, .bg-yellow-100, .bg-green-100 {
+  transition: background-color 0.3s ease;
+}
+
+button {
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+
+button:active {
+  transform: translateY(0);
+}
+</style>
diff --git a/src/components/Notification.vue b/src/components/Notification.vue
index e2c2529..f6797c6 100644
--- a/src/components/Notification.vue
+++ b/src/components/Notification.vue
@@ -7,7 +7,11 @@
   >
     <div
       v-show="isVisible"
-      :class="['fixed z-50 top-4 left-1/2 transform -translate-x-1/2 mb-4 p-4 rounded-lg shadow-lg', notificationClasses]"
+      :class="[
+        'fixed z-50 transform mb-4 p-4 rounded-lg shadow-lg',
+        notificationClasses,
+        directionClasses,
+      ]"
       role="alert"
       :style="{ maxWidth: '90%' }"
     >
@@ -25,73 +29,85 @@
           <InfoIcon class="w-6 h-6" stroke="white" />
         </div>
         <div class="flex-1">
-          <p class="text-white">{{ currentMessage }}</p>
+          <p class="text-white">{{ message }}</p>
         </div>
         <button
           @click="closeNotification"
           class="text-white ml-4 hover:text-gray-300"
           aria-label="Close"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-5 h-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
           </svg>
         </button>
       </div>
     </div>
   </transition>
 </template>
-
-<script setup lang="ts" name="Notification">
+<script setup lang="ts">
+import { ref, computed, nextTick } from 'vue'
 import { CheckCircleIcon, XCircleIcon, InfoIcon } from 'lucide-vue-next'
 
-// Props
+// Props for the Notification
 const props = defineProps({
-  message: {
-    type: String,
-    required: true,
-  },
+  message: String,
   type: {
     type: String,
     default: 'info', // 'success', 'error', or 'info'
   },
   duration: {
     type: Number,
-    default: 3000, // Duration in milliseconds
+    default: 3000,
+  },
+  direction: {
+    type: [String, Array] as PropType<string | [string] | [string, string]>,
+    default: () => ['top', 'center'],
   },
 })
 
-// State
+// State for visibility
 const isVisible = ref(false)
-const currentMessage = ref('')
-let resetTimeout = null // Track the reset timeout
-
-// Watch for message prop changes
-watch(() => props.message, (newMessage, oldMessage) => {
-  if (newMessage && newMessage !== currentMessage.value) {
-    // If the message changes, show the notification
-    currentMessage.value = newMessage
-    isVisible.value = true
+let resetTimeout: ReturnType<typeof setTimeout> | null = null
 
-    // Reset the message after the duration
-    clearTimeout(resetTimeout)
-    resetTimeout = setTimeout(() => {
-      isVisible.value = false
-      // Delay resetting the message until the transition is complete
-      nextTick(() => {
-        currentMessage.value = ''
-      })
-    }, props.duration)
-  }
-})
+// Show notification programmatically
+const showNotification = () => {
+  isVisible.value = true
+  if (resetTimeout) clearTimeout(resetTimeout)
+  resetTimeout = setTimeout(() => {
+    isVisible.value = false
+    nextTick(() => {
+      emitClose()
+    })
+  }, props.duration)
+}
 
-// Close the notification manually
+// Close notification manually
 const closeNotification = () => {
   isVisible.value = false
-  currentMessage.value = ''
-  clearTimeout(resetTimeout) // Ensure timeout is cleared on manual close
+  if (resetTimeout) clearTimeout(resetTimeout)
+  nextTick(() => {
+    emitClose()
+  })
+}
+
+// Emit close event
+const emitClose = () => {
+  const event = new CustomEvent('close-notification')
+  window.dispatchEvent(event)
 }
 
-// Notification type classes
+// Notification style classes
 const notificationClasses = computed(() => {
   switch (props.type) {
     case 'success':
@@ -105,19 +121,45 @@ const notificationClasses = computed(() => {
   }
 })
 
-// Transition methods for the slide-down effect
-const beforeEnter = (el) => {
+// Compute position classes based on `direction`
+const directionClasses = computed(() => {
+  const directions = Array.isArray(props.direction) ? props.direction : [props.direction]
+
+  const verticalMap: Record<string, string> = {
+    top: 'top-4',
+    bottom: 'bottom-4',
+    center: 'top-1/2 transform -translate-y-1/2',
+  }
+
+  const horizontalMap: Record<string, string> = {
+    left: 'left-4',
+    right: 'right-4',
+    center: 'left-1/2 transform -translate-x-1/2',
+  }
+
+  const verticalClass = verticalMap[directions[0] || 'top']
+  const horizontalClass = horizontalMap[directions[1] || 'center']
+
+  return `${verticalClass} ${horizontalClass}`
+})
+
+// Transition methods
+const beforeEnter = (el: HTMLElement) => {
   el.classList.add('translate-y-[-100%]')
 }
-const enter = (el, done) => {
-  el.offsetHeight // trigger reflow to restart transition
+const enter = (el: HTMLElement, done: () => void) => {
+  el.offsetHeight
   el.classList.remove('translate-y-[-100%]')
   el.classList.add('transition-transform', 'transform', 'duration-300', 'ease-out')
   done()
 }
-const leave = (el, done) => {
+const leave = (el: HTMLElement, done: () => void) => {
   el.classList.add('translate-y-[-100%]')
   el.classList.add('transition-transform', 'transform', 'duration-300', 'ease-in')
   done()
 }
+
+// Trigger the notification when the component is mounted
+showNotification()
 </script>
+
diff --git a/src/components/StepSection.vue b/src/components/StepSection.vue
index 4ae26af..fa24f31 100644
--- a/src/components/StepSection.vue
+++ b/src/components/StepSection.vue
@@ -22,7 +22,7 @@
 <script setup lang="ts" name="Step">
 import { defineProps } from 'vue'
 import { useI18n } from 'vue-i18n'
-import type { Step } from '../types'
+import type { Step } from '@/types'
 
 // i18n setup
 const { t } = useI18n()
diff --git a/src/config.ts b/src/config.ts
index 91ba999..caa3bea 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -83,6 +83,10 @@ export const messages = {
       step2: 'Step 2',
       step3: 'Step 3',
       step4: 'Step 4',
+      installLocked: 'Installation Confirm',
+      installLockedMessage: 'The installation has already been completed. Are you sure you want to run the configuration wizard again?',
+      installLockedConfirm: 'OK',
+      installLockedCancel: 'Cancel',
       title: 'ConfigWizard',
       language: 'Language',
       licenseSetup: 'License Setup',
@@ -205,6 +209,10 @@ export const messages = {
       step2: '第二步',
       step3: '第三步',
       step4: '第四步',
+      installLocked: '安装确认',
+      installLockedMessage: '安装已经完成，您确定要再次运行配置向导吗？',
+      installLockedConfirm: '确定',
+      installLockedCancel: '取消',
       title: '配置向导',
       language: '语言',
       licenseSetup: '许可证设置',
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index d2668e0..c519db5 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -1,5 +1,5 @@
 import { createI18n } from 'vue-i18n'
-import { messages } from '../config'
+import { messages } from '@/config'
 
 export const i18n = createI18n({
   legacy: false,
diff --git a/src/utils/confirm.ts b/src/utils/confirm.ts
new file mode 100644
index 0000000..9573b3d
--- /dev/null
+++ b/src/utils/confirm.ts
@@ -0,0 +1,52 @@
+import { createApp, reactive, h } from "vue";
+import MsgConfirm from "@/components/MsgConfirm.vue";
+
+interface ConfirmOptions {
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  type?: "info" | "success" | "warning" | "error";
+}
+
+export const confirm = (options: ConfirmOptions) => {
+  return new Promise((resolve) => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+
+    const app = createApp({
+      setup() {
+        const state = reactive({
+          visible: true,
+          ...options,
+        });
+
+        const handleConfirm = () => {
+          state.visible = false;
+          resolve(true);
+          cleanup();
+        };
+
+        const handleCancel = () => {
+          state.visible = false;
+          resolve(false);
+          cleanup();
+        };
+
+        const cleanup = () => {
+          app.unmount();
+          document.body.removeChild(container);
+        };
+
+        return () =>
+          h(MsgConfirm, {
+            ...state,
+            onConfirm: handleConfirm,
+            onCancel: handleCancel,
+          });
+      },
+    });
+
+    app.mount(container);
+  });
+}
diff --git a/src/utils/notify.ts b/src/utils/notify.ts
new file mode 100644
index 0000000..0207508
--- /dev/null
+++ b/src/utils/notify.ts
@@ -0,0 +1,30 @@
+import { createApp, h } from 'vue'
+import Notification from '@/components/Notification.vue'
+
+export function notify(options: {
+  message: string
+  type?: 'success' | 'error' | 'info'
+  duration?: number
+}): Promise<void> {
+  return new Promise((resolve) => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const app = createApp({
+      render() {
+        return h(Notification, {
+          message: options.message,
+          type: options.type || 'info',
+          duration: options.duration || 3000,
+          onClose: () => {
+            app.unmount()
+            document.body.removeChild(container)
+            resolve() // Resolve the promise when the notification is closed
+          },
+        })
+      },
+    })
+
+    app.mount(container)
+  })
+}
diff --git a/src/utils/request.ts b/src/utils/request.ts
index fe612af..2f939ee 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -1,4 +1,4 @@
-import { i18n } from '../i18n'
+import { i18n } from '@/i18n'
 
 interface ApiResponse<T = any> {
   success?: boolean
diff --git a/tsconfig.json b/tsconfig.json
index f9be343..fa8fcf3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,13 +7,18 @@
     "strict": true,
     "jsx": "preserve",
     "resolveJsonModule": true,
-    "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": ["ESNext", "DOM"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
-    "noEmit": true
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "types": ["vite/client","vitest/globals", "node"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
-
diff --git a/vite.config.ts b/vite.config.ts
index c22790d..0859d9d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
+import path from 'path'
 import config from './wizard.config'
 export default defineConfig({
   plugins: [
@@ -10,7 +11,13 @@ export default defineConfig({
         'vue', // Automatically imports from Vue
       ],
       dts: 'src/auto-imports.d.ts', // Optionally generate TypeScript declaration file
-    }),],
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    }
+  },
   server: {
     watch: {
       // Ignore specific file or directory (supports glob patterns)
diff --git a/wizard.config.ts b/wizard.config.ts
index 3bd3321..fd9b3bd 100644
--- a/wizard.config.ts
+++ b/wizard.config.ts
@@ -15,4 +15,6 @@ export default {
 
   // sql files
   sqlfile: '/data/install.sql',
+
+  canIgnoreLock: false,
 }