feat: 删除插件添加二次确认,插件列表添加非空判断
This commit is contained in:
@@ -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>
|
||||
@@ -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 = () => {
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
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);
|
||||
|
||||
let resolvePromise: (value: boolean) => void;
|
||||
|
||||
const vNode = h(ConfirmDialog);
|
||||
vNode.appContext = app._context;
|
||||
render(vNode, mountNode);
|
||||
|
||||
const confirm = (options: { title?: string; message?: string }) => {
|
||||
return new Promise<boolean>((resolve) => {
|
||||
resolvePromise = resolve;
|
||||
vNode.component?.exposed?.open(options).then(resolve); // ✅ 确保返回 `Promise<boolean>`
|
||||
});
|
||||
};
|
||||
|
||||
app.config.globalProperties.$confirm = confirm;
|
||||
app.provide("$confirm", confirm);
|
||||
},
|
||||
};
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
// 方法
|
||||
|
||||
Reference in New Issue
Block a user