From c9e353604004317057a1c0461cfc50eb06ec29e8 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 11 Jul 2022 16:07:21 +0800
Subject: [PATCH] perf: open confirm dialog when changing plugin status

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 package.json                                |  8 ++---
 src/modules/system/plugins/PluginDetail.vue | 38 +++++++++++++--------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 8fc406cad..1003657fe 100644
--- a/package.json
+++ b/package.json
@@ -16,10 +16,10 @@
     "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false && pnpm run typecheck:packages",
     "lint": "eslint ./src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore && pnpm run lint:packages",
     "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}' && pnpm run prettier:packages",
-    "typecheck:packages": "pnpm --filter './packages/**' run typecheck",
-    "lint:packages": "pnpm --filter './packages/**' lint",
-    "prettier:packages": "pnpm --filter './packages/**' prettier",
-    "test:unit:packages": "pnpm --filter './packages/**' run test:unit"
+    "typecheck:packages": "pnpm --parallel --filter './packages/**' run typecheck",
+    "lint:packages": "pnpm --parallel --filter './packages/**' lint",
+    "prettier:packages": "pnpm --parallel --filter './packages/**' prettier",
+    "test:unit:packages": "pnpm --parallel --filter './packages/**' run test:unit"
   },
   "workspaces": [
     "packages/*"
diff --git a/src/modules/system/plugins/PluginDetail.vue b/src/modules/system/plugins/PluginDetail.vue
index 2aadac6af..1688c6777 100644
--- a/src/modules/system/plugins/PluginDetail.vue
+++ b/src/modules/system/plugins/PluginDetail.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import {
+  useDialog,
   VButton,
   VCard,
   VPageHeader,
@@ -9,14 +10,16 @@ import {
   VTag,
 } from "@halo-dev/components";
 import { useRoute } from "vue-router";
-import { computed, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import type { Plugin } from "@/types/extension";
 import { axiosInstance } from "@halo-dev/admin-shared";
+import cloneDeep from "lodash.clonedeep";
 
 const pluginActiveId = ref("detail");
 const plugin = ref<Plugin>({} as Plugin);
 
 const { params } = useRoute();
+const dialog = useDialog();
 
 const handleFetchPlugin = async () => {
   try {
@@ -34,20 +37,27 @@ const isStarted = computed(() => {
 });
 
 const handleChangePluginStatus = async () => {
-  try {
-    plugin.value.spec.enabled = !plugin.value.spec.enabled;
-    await axiosInstance.put(
-      `/apis/plugin.halo.run/v1alpha1/plugins/${plugin.value.metadata.name}`,
-      plugin.value
-    );
-  } catch (e) {
-    console.error(e);
-  } finally {
-    window.location.reload();
-  }
+  const pluginToUpdate = cloneDeep(plugin.value);
+
+  dialog.info({
+    title: `确定要${plugin.value.spec.enabled ? "停止" : "启动"}该插件吗？`,
+    onConfirm: async () => {
+      try {
+        pluginToUpdate.spec.enabled = !pluginToUpdate.spec.enabled;
+        await axiosInstance.put(
+          `/apis/plugin.halo.run/v1alpha1/plugins/${plugin.value.metadata.name}`,
+          pluginToUpdate
+        );
+      } catch (e) {
+        console.error(e);
+      } finally {
+        window.location.reload();
+      }
+    },
+  });
 };
 
-handleFetchPlugin();
+onMounted(handleFetchPlugin);
 </script>
 
 <template>
@@ -308,5 +318,3 @@ handleFetchPlugin();
     </VCard>
   </div>
 </template>
-
-<style lang="scss" scoped></style>