feat: add settings support to the plugin

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/modules/system/plugins/PluginDetail.vue

@@ -11,12 +11,30 @@ import {
 } from "@halo-dev/components";
 import { useRoute } from "vue-router";
 import { computed, onMounted, ref } from "vue";
-import type { Plugin } from "@/types/extension";
+import type {
+  ConfigMap,
+  Plugin,
+  Setting,
+  SettingSpec,
+} from "@/types/extension";
 import { axiosInstance } from "@halo-dev/admin-shared";
 import cloneDeep from "lodash.clonedeep";
 
-const pluginActiveId = ref("detail");
+const pageTabs = ref([{ id: "detail", label: "详情" }]);
+const activeTabId = ref(pageTabs.value[0].id);
 const plugin = ref<Plugin>({} as Plugin);
+const settings = ref<Setting>({} as Setting);
+
+const configmapFormData = ref<Record<string, Record<string, string>>>({});
+const configmap = ref<ConfigMap>({
+  data: {},
+  apiVersion: "v1alpha1",
+  kind: "ConfigMap",
+  metadata: {
+    name: "",
+  },
+});
+const saving = ref(false);
 
 const { params } = useRoute();
 const dialog = useDialog();
@@ -27,11 +45,90 @@ const handleFetchPlugin = async () => {
       `/apis/plugin.halo.run/v1alpha1/plugins/${params.pluginName}`
     );
     plugin.value = response.data;
+
+    await handleFetchSettings();
+    await handleFetchConfigMap();
   } catch (e) {
     console.error(e);
   }
 };
 
+const handleFetchSettings = async () => {
+  try {
+    const response = await axiosInstance.get(
+      `/api/v1alpha1/settings/${plugin.value.spec.settingName}`
+    );
+    settings.value = response.data;
+
+    const { spec } = settings.value;
+
+    if (spec) {
+      pageTabs.value = [
+        ...pageTabs.value,
+        ...spec.map((item: SettingSpec) => {
+          return {
+            id: item.group,
+            label: item.label,
+          };
+        }),
+      ];
+
+      spec.forEach((item: SettingSpec) => {
+        configmapFormData.value[item.group] = {};
+      });
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+const handleFetchConfigMap = async () => {
+  try {
+    const response = await axiosInstance.get(
+      `/api/v1alpha1/configmaps/${plugin.value.spec.configmapName}`
+    );
+    configmap.value = response.data;
+
+    const { data } = configmap.value;
+
+    Object.keys(data).forEach((key) => {
+      configmapFormData.value[key] = JSON.parse(data[key]);
+    });
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+const handleSaveConfigMap = async () => {
+  try {
+    saving.value = true;
+
+    if (!configmap.value.metadata.name && plugin.value.spec.configmapName) {
+      configmap.value.metadata.name = plugin.value.spec.configmapName;
+    }
+
+    settings.value.spec.forEach((item: SettingSpec) => {
+      configmap.value.data[item.group] = JSON.stringify(
+        configmapFormData.value[item.group]
+      );
+    });
+
+    if (!configmap.value.metadata.creationTimestamp) {
+      await axiosInstance.post(`/api/v1alpha1/configmaps`, configmap.value);
+    } else {
+      await axiosInstance.put(
+        `/api/v1alpha1/configmaps/${configmap.value.metadata.name}`,
+        configmap.value
+      );
+    }
+  } catch (e) {
+    console.error(e);
+  } finally {
+    await handleFetchConfigMap();
+    saving.value = false;
+  }
+};
+
 const isStarted = computed(() => {
   return plugin.value.status?.phase === "STARTED" && plugin.value.spec.enabled;
 });
@@ -74,17 +171,14 @@ onMounted(handleFetchPlugin);
     <VCard :body-class="['!p-0']">
       <template #header>
         <VTabbar
-          v-model:active-id="pluginActiveId"
+          v-model:active-id="activeTabId"
-          :items="[
+          :items="pageTabs"
-            { id: 'detail', label: '详情' },
-            { id: 'settings', label: '基础设置' },
-          ]"
           class="w-full !rounded-none"
           type="outline"
         ></VTabbar>
       </template>
 
-      <div v-if="pluginActiveId === 'detail'">
+      <div v-if="activeTabId === 'detail'">
         <div class="flex items-center justify-between px-4 py-4 sm:px-6">
           <div>
             <h3 class="text-lg font-medium leading-6 text-gray-900">
@@ -303,18 +397,37 @@ onMounted(handleFetchPlugin);
         </div>
       </div>
 
-      <div v-if="pluginActiveId === 'settings'">
+      <template v-for="(group, index) in settings.spec">
-        <FormKit id="plugin-setting-form" :actions="false" type="form">
+        <div
-          <FormKit label="设置项 1" type="text"></FormKit>
+          v-if="activeTabId === group.group"
-          <FormKit label="设置项 2" type="text"></FormKit>
+          :key="index"
-        </FormKit>
+          class="p-4 sm:px-6"
-
+        >
-        <div class="pt-5">
+          <div class="w-1/3">
-          <div class="flex justify-start p-4">
+            <FormKit
-            <VButton type="secondary"> 保存</VButton>
+              :id="group.group"
+              v-model="configmapFormData[group.group]"
+              :actions="false"
+              :preserve="true"
+              type="form"
+              @submit="handleSaveConfigMap"
+            >
+              <FormKitSchema :schema="group.formSchema" />
+            </FormKit>
+          </div>
+          <div class="pt-5">
+            <div class="flex justify-start">
+              <VButton
+                :loading="saving"
+                type="secondary"
+                @click="$formkit.submit(group.group)"
+              >
+                保存
+              </VButton>
+            </div>
           </div>
         </div>
-      </div>
+      </template>
     </VCard>
   </div>
 </template>

src/types/extension.d.ts

@@ -1,4 +1,5 @@
 import type { Plugin as PluginModule } from "@halo-dev/admin-shared";
+import type { FormKitSchemaCondition, FormKitSchemaNode } from "@formkit/core";
 
 export interface License {
   name?: string;
@@ -47,6 +48,8 @@ export interface PluginSpec {
   pluginClass?: string;
   enabled?: boolean;
   module?: PluginModule;
+  settingName?: string;
+  configmapName?: string;
 }
 
 export interface PluginStatus {
@@ -167,3 +170,23 @@ export interface ReverseProxyRule {
   path?: string;
   file?: FileReverseProxyProvider;
 }
+
+export interface Setting {
+  spec: SettingSpec[];
+  apiVersion: string;
+  kind: string;
+  metadata: Metadata;
+}
+
+export interface SettingSpec {
+  group: string;
+  label: string;
+  formSchema: FormKitSchemaCondition | FormKitSchemaNode[];
+}
+
+export interface ConfigMap {
+  data: Record<string, string>;
+  apiVersion: string;
+  kind: string;
+  metadata: Metadata;
+}