Merge pull request #962 from zhx8702/feat-webui-add-double-confirm

feat: 删除插件添加二次确认，插件列表添加非空判断

dashboard/src/components/ConfirmDialog.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-dialog v-model="isOpen" max-width="400">
+    <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 color="gray" @click="handleCancel">取消</v-btn>
+        <v-btn color="red" @click="handleConfirm">确定</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const isOpen = ref(false);
+const title = ref("");
+const message = ref("");
+let resolvePromise = null; // ✅ 确保 Promise 句柄可用
+
+const open = (options) => {
+  title.value = options.title || "确认操作";
+  message.value = options.message || "你确定要执行此操作吗？";
+  isOpen.value = true;
+
+  return new Promise((resolve) => {
+    resolvePromise = resolve; // ✅ 赋值 Promise 解析方法
+  });
+};
+
+const handleConfirm = () => {
+  isOpen.value = false;
+  if (resolvePromise) resolvePromise(true); // ✅ 解析 Promise
+};
+
+const handleCancel = () => {
+  isOpen.value = false;
+  if (resolvePromise) resolvePromise(false); // ✅ 解析 Promise
+};
+
+defineExpose({ open }); // ✅ 确保 `confirmPlugin.ts` 可以访问 `open`
+</script>

dashboard/src/components/shared/ExtensionCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, inject } from 'vue';
 
 const props = defineProps({
   extension: {
@@ -46,8 +46,21 @@ const reloadExtension = () => {
   emit('reload', props.extension);
 };
 
-const uninstallExtension = () => {
-  emit('uninstall', props.extension);
+const $confirm = inject("$confirm");
+const uninstallExtension = async () => {
+  if (typeof $confirm !== "function") {
+    console.error("$confirm 未正确注册");
+    return;
+  }
+
+  const confirmed = await $confirm({
+    title: "删除确认",
+    message: "你确定要删除当前插件吗？",
+  });
+
+  if (confirmed) {
+    emit("uninstall", props.extension);
+  }
 };
 
 const toggleActivation = () => {

dashboard/src/main.ts

@@ -3,6 +3,7 @@ import { createPinia } from 'pinia';
 import App from './App.vue';
 import { router } from './router';
 import vuetify from './plugins/vuetify';
+import confirmPlugin from './plugins/confirmPlugin';
 import '@/scss/style.scss';
 import VueApexCharts from 'vue3-apexcharts';
 
@@ -15,7 +16,10 @@ app.use(router);
 app.use(createPinia());
 app.use(print);
 app.use(VueApexCharts);
-app.use(vuetify).mount('#app');
+app.use(vuetify);
+app.use(confirmPlugin);
+app.mount('#app');
+
 
 axios.interceptors.request.use((config) => {
   const token = localStorage.getItem('token');

dashboard/src/plugins/confirmPlugin.ts

@@ -0,0 +1,23 @@
+import type { App } from "vue";
+import { h, render } from "vue";
+import ConfirmDialog from "@/components/ConfirmDialog.vue";
+
+export default {
+  install(app: App) {
+    const mountNode = document.createElement("div");
+    document.body.appendChild(mountNode);
+
+    const vNode = h(ConfirmDialog);
+    vNode.appContext = app._context;
+    render(vNode, mountNode);
+
+    const confirm = (options: { title?: string; message?: string }) => {
+      return new Promise<boolean>((resolve) => {
+        vNode.component?.exposed?.open(options).then(resolve); // ✅ 确保返回 `Promise<boolean>`
+      });
+    };
+
+    app.config.globalProperties.$confirm = confirm;
+    app.provide("$confirm", confirm);
+  },
+};

dashboard/src/views/ExtensionPage.vue

@@ -46,7 +46,7 @@ const filteredExtensions = computed(() => {
   if (showReserved.value) {
     return extension_data.data;
   }
-  return extension_data.data.filter(ext => !ext.reserved);
+  return extension_data?.data?.filter(ext => !ext.reserved);
 });
 
 // 方法