feat: 添加全局确认对话框管理器，重构对话框服务，优化用户交互体验

src/renderer/App.vue

@@ -1,11 +1,13 @@
 <script setup lang="tsx">
 import { DefaultLayout } from '@/renderer/components/layout'
+import GlobalDialog from '@/renderer/components/GlobalDialog.vue'
 </script>
 
 <template>
   <DefaultLayout>
     <router-view />
   </DefaultLayout>
+  <GlobalDialog />
 </template>
 
 <style>

src/renderer/components/ConfirmDialog.vue

@@ -0,0 +1,85 @@
+<template>
+  <v-dialog
+    v-model="dialogVisible"
+    max-width="450"
+    persistent
+  >
+    <v-card>
+      <v-card-title class="text-h6">
+        {{ title }}
+      </v-card-title>
+      <v-card-text>
+        {{ message }}
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          @click="handleCancel"
+          variant="text"
+        >
+          {{ cancelText }}
+        </v-btn>
+        <v-btn
+          @click="handleConfirm"
+          :color="confirmColor"
+          variant="flat"
+        >
+          {{ confirmText }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+// 定义 props
+interface Props {
+  modelValue: boolean
+  title?: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  confirmColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '确认',
+  confirmText: '确认',
+  cancelText: '取消',
+  confirmColor: 'primary'
+})
+
+// 定义 emits
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  confirm: []
+  cancel: []
+}>()
+
+// 本地状态
+const dialogVisible = ref(props.modelValue)
+
+// 监听 modelValue 的变化
+watch(() => props.modelValue, (newValue) => {
+  dialogVisible.value = newValue
+})
+
+// 监听本地状态变化并同步到父组件
+watch(dialogVisible, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+// 处理确认事件
+const handleConfirm = () => {
+  emit('confirm')
+  dialogVisible.value = false
+}
+
+// 处理取消事件
+const handleCancel = () => {
+  emit('cancel')
+  dialogVisible.value = false
+}
+</script>

src/renderer/components/GlobalDialog.vue

@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <!-- Confirm Dialog -->
+    <v-dialog
+      v-model="confirmDialogVisible"
+      max-width="450"
+      persistent
+    >
+      <v-card>
+        <v-card-title class="text-h6">
+          {{ currentConfirmOptions.title }}
+        </v-card-title>
+        <v-card-text>
+          {{ currentConfirmOptions.message }}
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            @click="handleConfirmCancel"
+            variant="text"
+          >
+            {{ currentConfirmOptions.cancelText }}
+          </v-btn>
+          <v-btn
+            @click="handleConfirmAction"
+            :color="currentConfirmOptions.confirmColor"
+            variant="flat"
+          >
+            {{ currentConfirmOptions.confirmText }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Message Dialog -->
+    <v-dialog
+      v-model="messageDialogVisible"
+      max-width="450"
+      persistent
+    >
+      <v-card :color="currentMessageOptions.dialogColor">
+        <v-card-title class="text-h6 white--text">
+          {{ currentMessageOptions.title }}
+        </v-card-title>
+        <v-card-text class="pt-4">
+          {{ currentMessageOptions.message }}
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            @click="handleMessageAction"
+            :color="currentMessageOptions.confirmColor"
+            variant="flat"
+          >
+            {{ currentMessageOptions.confirmText }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+// 定义对话框选项接口
+interface BaseDialogOptions {
+  title: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  confirmColor?: string
+}
+
+interface ConfirmDialogOptions extends BaseDialogOptions {}
+
+interface MessageDialogOptions extends BaseDialogOptions {
+  dialogColor?: string
+}
+
+// 全局状态
+const confirmDialogVisible = ref(false)
+const messageDialogVisible = ref(false)
+const currentConfirmOptions = ref<ConfirmDialogOptions>({} as ConfirmDialogOptions)
+const currentMessageOptions = ref<MessageDialogOptions>({} as MessageDialogOptions)
+
+// Promise 解析器
+let confirmResolver: ((value: boolean) => void) | null = null
+let messageResolver: (() => void) | null = null
+
+// 显示确认对话框
+const showConfirm = (options: ConfirmDialogOptions): Promise<boolean> => {
+  currentConfirmOptions.value = {
+    title: options.title || '确认',
+    message: options.message,
+    confirmText: options.confirmText || '确认',
+    cancelText: options.cancelText || '取消',
+    confirmColor: options.confirmColor || 'primary'
+  }
+  
+  confirmDialogVisible.value = true
+  return new Promise((resolve) => {
+    confirmResolver = resolve
+  })
+}
+
+// 显示消息对话框
+const showMessage = (options: MessageDialogOptions): Promise<void> => {
+  currentMessageOptions.value = {
+    title: options.title,
+    message: options.message,
+    confirmText: options.confirmText || '确定',
+    confirmColor: options.confirmColor || 'primary',
+    dialogColor: options.dialogColor || 'white'
+  }
+  
+  messageDialogVisible.value = true
+  return new Promise((resolve) => {
+    messageResolver = resolve
+  })
+}
+
+// 处理确认对话框确认操作
+const handleConfirmAction = () => {
+  confirmDialogVisible.value = false
+  if (confirmResolver) {
+    confirmResolver(true)
+    confirmResolver = null
+  }
+}
+
+// 处理确认对话框取消操作
+const handleConfirmCancel = () => {
+  confirmDialogVisible.value = false
+  if (confirmResolver) {
+    confirmResolver(false)
+    confirmResolver = null
+  }
+}
+
+// 处理消息对话框操作
+const handleMessageAction = () => {
+  messageDialogVisible.value = false
+  if (messageResolver) {
+    messageResolver()
+    messageResolver = null
+  }
+}
+
+// 暴露方法给全局
+onMounted(() => {
+  window.ConfirmDialogManager = {
+    showConfirm,
+    showMessage
+  }
+})
+
+onUnmounted(() => {
+  if (window.ConfirmDialogManager) {
+    delete window.ConfirmDialogManager
+  }
+})
+
+// 对话框类型
+type DialogType = 'confirm' | 'info' | 'success' | 'warning' | 'error'
+
+// 导出方法
+defineExpose({
+  showConfirm,
+  showMessage
+})
+</script>
+
+<style scoped>
+/* 样式在此可以添加额外的自定义样式 */
+</style>

src/renderer/components/MessageBoxDialog.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-dialog
+    v-model="dialogVisible"
+    max-width="450"
+    persistent
+  >
+    <v-card :color="dialogColor">
+      <v-card-title class="text-h6 white--text">
+        {{ title }}
+      </v-card-title>
+      <v-card-text class="pt-4">
+        {{ message }}
+      </v-card-text>
+      <v-card-actions v-if="showActions">
+        <v-spacer></v-spacer>
+        <v-btn
+          v-if="cancelText"
+          @click="handleCancel"
+          variant="text"
+        >
+          {{ cancelText }}
+        </v-btn>
+        <v-btn
+          @click="handleConfirm"
+          :color="confirmColor"
+          variant="flat"
+        >
+          {{ confirmText }}
+        </v-btn>
+      </v-card-actions>
+      <v-card-actions v-else>
+        <v-spacer></v-spacer>
+        <v-btn
+          @click="handleConfirm"
+          :color="confirmColor"
+          variant="flat"
+        >
+          {{ confirmText }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+// 定义 props
+interface Props {
+  modelValue: boolean
+  title: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  confirmColor?: string
+  dialogColor?: string
+  showActions?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  confirmText: '确认',
+  cancelText: '取消',
+  confirmColor: 'primary',
+  dialogColor: 'white',
+  showActions: true
+})
+
+// 定义 emits
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  confirm: []
+  cancel: []
+}>()
+
+// 本地状态
+const dialogVisible = ref(props.modelValue)
+
+// 监听 modelValue 的变化
+watch(() => props.modelValue, (newValue) => {
+  dialogVisible.value = newValue
+})
+
+// 监听本地状态变化并同步到父组件
+watch(dialogVisible, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+// 处理确认事件
+const handleConfirm = () => {
+  emit('confirm')
+  dialogVisible.value = false
+}
+
+// 处理取消事件
+const handleCancel = () => {
+  emit('cancel')
+  dialogVisible.value = false
+}
+</script>

src/renderer/main.ts

@@ -10,6 +10,22 @@ import pinia from '@/renderer/plugins/pinia'
 declare global {
   interface Window {
     mainApi?: any
+    ConfirmDialogManager?: {
+      showConfirm: (options: {
+        title: string;
+        message: string;
+        confirmText?: string;
+        cancelText?: string;
+        confirmColor?: string;
+      }) => Promise<boolean>;
+      showMessage: (options: {
+        title: string;
+        message: string;
+        confirmText?: string;
+        confirmColor?: string;
+        dialogColor?: string;
+      }) => Promise<void>;
+    };
   }
 }
 

src/renderer/screens/CreateTemplateScreen.vue

@@ -358,6 +358,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useTemplateStore } from '@/renderer/store/template'
 import { Template } from '@/renderer/store/template'
 import TemplateTree from '@/renderer/components/TemplateTree.vue'
+import { ConfirmDialogService } from '@/renderer/utils/confirm-dialog-service'
 
 const router = useRouter()
 const route = useRoute()
@@ -810,9 +811,17 @@ const selectAndAddFile = async () => {
   currentEditingItem.value = null
 }
 
-const goBack = () => {
+const goBack = async () => {
   if (hasChanges.value) {
-    if (confirm('您有未保存的更改，确定要离开吗？')) {
+    const confirmed = await ConfirmDialogService.confirm({
+      title: '确认离开',
+      message: '您有未保存的更改，确定要离开吗？',
+      confirmText: '离开',
+      cancelText: '取消',
+      confirmColor: 'warning'
+    })
+    
+    if (confirmed) {
       router.push('/templates')
     }
   } else {
@@ -904,8 +913,16 @@ const showEditFileDialog = (file: { path: string; content?: string; sourceFilePa
 // Variable to track the current item being edited
 const currentEditingItem = ref<{ path: string; type: 'directory' | 'file'; content?: string; sourceFilePath?: string } | null>(null)
 
-const deleteItem = (item: TreeItem) => {
-  if (!confirm('确定要删除此项吗？')) return
+const deleteItem = async (item: TreeItem) => {
+  const confirmed = await ConfirmDialogService.confirm({
+    title: '删除确认',
+    message: '确定要删除此项吗？',
+    confirmText: '删除',
+    cancelText: '取消',
+    confirmColor: 'error'
+  })
+  
+  if (!confirmed) return
 
   if (item.type === 'directory') {
     // Find all directories that start with the item name (including the exact match)

src/renderer/screens/TemplateListScreen.vue

@@ -141,6 +141,7 @@ import { useRouter } from 'vue-router'
 import { useTemplateStore } from '@/renderer/store/template'
 import { Template } from '@/renderer/store/template'
 import TemplateTree from '@/renderer/components/TemplateTree.vue'
+import { ConfirmDialogService } from '@/renderer/utils/confirm-dialog-service'
 
 const router = useRouter()
 const templateStore = useTemplateStore()
@@ -216,8 +217,16 @@ const editTemplate = (template: Template) => {
   router.push(`/create-template/${template.id}`)
 }
 
-const deleteTemplate = (template: Template) => {
-  if (confirm(`确定要删除模板 "${template.name}" 吗？此操作不可撤销。`)) {
+const deleteTemplate = async (template: Template) => {
+  const confirmed = await ConfirmDialogService.confirm({
+    title: '删除模板',
+    message: `确定要删除模板 "${template.name}" 吗？此操作不可撤销。`,
+    confirmText: '删除',
+    cancelText: '取消',
+    confirmColor: 'error'
+  })
+  
+  if (confirmed) {
     storeDeleteTemplate(template.id)
   }
 }
@@ -249,16 +258,28 @@ const confirmExecuteTemplate = () => {
       executePath.value,
       dirNames
     )
-    .then((result: any) => {
+    .then(async (result: any) => {
       if (result.success) {
-        alert('模板执行成功！')
+        await ConfirmDialogService.success({
+          title: '执行成功',
+          message: '模板执行成功！',
+          confirmText: '确定'
+        })
         showExecuteDialog.value = false
       } else {
-        alert(`模板执行失败: ${result.error}`)
+        await ConfirmDialogService.error({
+          title: '执行失败',
+          message: `模板执行失败: ${result.error}`,
+          confirmText: '确定'
+        })
       }
     })
-    .catch((error: any) => {
-      alert(`模板执行出错: ${error.message}`)
+    .catch(async (error: any) => {
+      await ConfirmDialogService.error({
+        title: '执行出错',
+        message: `模板执行出错: ${error.message}`,
+        confirmText: '确定'
+      })
     })
 }
 </script>

src/renderer/types/global.d.ts

@@ -0,0 +1,19 @@
+// 确保 TypeScript 能识别我们的全局变量
+interface Window {
+  ConfirmDialogManager?: {
+    showConfirm: (options: {
+      title: string;
+      message: string;
+      confirmText?: string;
+      cancelText?: string;
+      confirmColor?: string;
+    }) => Promise<boolean>;
+    showMessage: (options: {
+      title: string;
+      message: string;
+      confirmText?: string;
+      confirmColor?: string;
+      dialogColor?: string;
+    }) => Promise<void>;
+  };
+}

src/renderer/utils/confirm-dialog-service.ts

@@ -0,0 +1,97 @@
+// 定义对话框选项接口
+interface BaseDialogOptions {
+  title: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  confirmColor?: string
+}
+
+interface ConfirmDialogOptions extends BaseDialogOptions { }
+
+interface MessageDialogOptions extends BaseDialogOptions {
+  dialogColor?: string
+}
+
+// 对话框类型
+type DialogType = 'confirm' | 'info' | 'success' | 'warning' | 'error'
+
+// 全局对话框管理器接口
+interface GlobalDialogManager {
+  showConfirm: (options: ConfirmDialogOptions) => Promise<boolean>
+  showMessage: (options: MessageDialogOptions) => Promise<void>
+}
+
+// 确认对话框服务
+export const ConfirmDialogService = {
+  // 显示确认对话框
+  async confirm(options: ConfirmDialogOptions): Promise<boolean> {
+    if (window.ConfirmDialogManager) {
+      return (window.ConfirmDialogManager as GlobalDialogManager).showConfirm(options)
+    } else {
+      console.error('GlobalDialog component not properly initialized')
+      // 降级到原生 confirm
+      return confirm(`${options.title}: ${options.message}`)
+    }
+  },
+
+  // 显示信息对话框
+  async info(options: MessageDialogOptions): Promise<void> {
+    if (window.ConfirmDialogManager) {
+      return (window.ConfirmDialogManager as GlobalDialogManager).showMessage({
+        ...options,
+        dialogColor: options.dialogColor || 'info',
+        confirmColor: options.confirmColor || 'white'
+      })
+    } else {
+      console.error('GlobalDialog component not properly initialized')
+      // 降级到原生 alert
+      alert(`${options.title}: ${options.message}`)
+    }
+  },
+
+  // 显示成功对话框
+  async success(options: MessageDialogOptions): Promise<void> {
+    if (window.ConfirmDialogManager) {
+      return (window.ConfirmDialogManager as GlobalDialogManager).showMessage({
+        ...options,
+        dialogColor: options.dialogColor || 'success',
+        confirmColor: options.confirmColor || 'white'
+      })
+    } else {
+      console.error('GlobalDialog component not properly initialized')
+      // 降级到原生 alert
+      alert(`${options.title}: ${options.message}`)
+    }
+  },
+
+  // 显示警告对话框
+  async warning(options: MessageDialogOptions): Promise<void> {
+    if (window.ConfirmDialogManager) {
+      return (window.ConfirmDialogManager as GlobalDialogManager).showMessage({
+        ...options,
+        dialogColor: options.dialogColor || 'warning',
+        confirmColor: options.confirmColor || 'white'
+      })
+    } else {
+      console.error('GlobalDialog component not properly initialized')
+      // 降级到原生 alert
+      alert(`${options.title}: ${options.message}`)
+    }
+  },
+
+  // 显示错误对话框
+  async error(options: MessageDialogOptions): Promise<void> {
+    if (window.ConfirmDialogManager) {
+      return (window.ConfirmDialogManager as GlobalDialogManager).showMessage({
+        ...options,
+        dialogColor: options.dialogColor || 'error',
+        confirmColor: options.confirmColor || 'white'
+      })
+    } else {
+      console.error('GlobalDialog component not properly initialized')
+      // 降级到原生 alert
+      alert(`${options.title}: ${options.message}`)
+    }
+  }
+}