lint

src/renderer/components/MessageBoxDialog.vue

@@ -1,3 +1,59 @@
+<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>
+
 <template>
   <v-dialog
     v-model="dialogVisible"
@@ -12,28 +68,28 @@
         {{ message }}
       </v-card-text>
       <v-card-actions v-if="showActions">
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-btn
           v-if="cancelText"
-          @click="handleCancel"
           variant="text"
+          @click="handleCancel"
         >
           {{ cancelText }}
         </v-btn>
         <v-btn
-          @click="handleConfirm"
           :color="confirmColor"
           variant="flat"
+          @click="handleConfirm"
         >
           {{ confirmText }}
         </v-btn>
       </v-card-actions>
       <v-card-actions v-else>
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-btn
-          @click="handleConfirm"
           :color="confirmColor"
           variant="flat"
+          @click="handleConfirm"
         >
           {{ confirmText }}
         </v-btn>
@@ -41,59 +97,3 @@
     </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>