refactor: plugin detail page

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

packages/shared/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./types/plugin";
 export * from "./types/menus";
+export * from "./types/formkit";
 export * from "./core/plugins";
 export * from "./states/pages";
 export * from "./layouts";

packages/shared/src/layouts/PluginLayout.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { VButton, VCard, VPageHeader, VTabbar } from "@halo-dev/components";
+import type { RouteLocationRaw } from "vue-router";
+import { RouterView, useRoute, useRouter } from "vue-router";
+import type { Ref } from "vue";
+import { onMounted, provide, ref, watch } from "vue";
+import type { Plugin } from "@halo-dev/api-client";
+import type {
+  FormKitSetting,
+  FormKitSettingSpec,
+} from "@halo-dev/admin-shared";
+import { apiClient, BasicLayout } from "@halo-dev/admin-shared";
+
+interface PluginTab {
+  id: string;
+  label: string;
+  route: RouteLocationRaw;
+}
+
+const route = useRoute();
+const router = useRouter();
+
+const plugin = ref<Plugin>({} as Plugin);
+const tabs = ref<PluginTab[]>([
+  {
+    id: "detail",
+    label: "详情",
+    route: {
+      name: "PluginDetail",
+    },
+  },
+]);
+const activeTab = ref<string>();
+
+provide<Ref<Plugin>>("plugin", plugin);
+provide<Ref<string | undefined>>("activeTab", activeTab);
+
+const handleFetchPlugin = async () => {
+  try {
+    const response =
+      await apiClient.extension.plugin.getpluginHaloRunV1alpha1Plugin(
+        route.params.name as string
+      );
+    plugin.value = response.data;
+
+    await handleFetchSettings();
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+const handleFetchSettings = async () => {
+  if (!plugin.value.spec.settingName) {
+    return;
+  }
+  try {
+    const response = await apiClient.extension.setting.getv1alpha1Setting(
+      plugin.value.spec.settingName as string
+    );
+    const settings = response.data as FormKitSetting;
+
+    const { spec } = settings;
+
+    if (spec) {
+      spec.forEach((item: FormKitSettingSpec) => {
+        tabs.value.push({
+          id: item.group,
+          label: item.label || "",
+          route: {
+            name: "PluginSetting",
+            params: {
+              group: item.group,
+            },
+          },
+        });
+      });
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+const handleTabChange = (id: string) => {
+  const tab = tabs.value.find((item) => item.id === id);
+  if (tab) {
+    router.push(tab.route);
+  }
+};
+
+onMounted(async () => {
+  await handleFetchPlugin();
+
+  // @ts-ignore
+  const tab = tabs.value.find((tab) => tab.route.name === route.name);
+  activeTab.value = tab ? tab.id : tabs.value[0].id;
+});
+
+watch(
+  () => route.name,
+  async (newRouteName) => {
+    // @ts-ignore
+    const tab = tabs.value.find((tab) => tab.route.name === newRouteName);
+    activeTab.value = tab ? tab.id : tabs.value[0].id;
+  }
+);
+</script>
+<template>
+  <BasicLayout>
+    <VPageHeader :title="plugin?.spec?.displayName">
+      <template #icon>
+        <img :src="plugin?.spec?.logo" class="mr-2 h-8 w-8" />
+      </template>
+      <template #actions>
+        <VButton class="opacity-0" type="secondary">安装</VButton>
+      </template>
+    </VPageHeader>
+
+    <div class="m-0 md:m-4">
+      <VCard :body-class="['!p-0']">
+        <template #header>
+          <VTabbar
+            v-model:active-id="activeTab"
+            :items="tabs"
+            class="w-full !rounded-none"
+            type="outline"
+            @change="handleTabChange"
+          ></VTabbar>
+        </template>
+      </VCard>
+      <div>
+        <RouterView :key="activeTab" />
+      </div>
+    </div>
+  </BasicLayout>
+</template>

packages/shared/src/layouts/index.ts

@@ -2,3 +2,4 @@ export { default as BlankLayout } from "./BlankLayout.vue";
 export { default as BasicLayout } from "./BasicLayout.vue";
 export { default as SystemSettingsLayout } from "./SystemSettingsLayout.vue";
 export { default as UserProfileLayout } from "./UserProfileLayout.vue";
+export { default as PluginLayout } from "./PluginLayout.vue";

packages/shared/src/types/formkit.ts

@@ -0,0 +1,10 @@
+import type { Setting, SettingSpec } from "@halo-dev/api-client";
+import type { FormKitSchemaCondition, FormKitSchemaNode } from "@formkit/core";
+
+export interface FormKitSettingSpec extends Omit<SettingSpec, "formSchema"> {
+  formSchema: FormKitSchemaCondition | FormKitSchemaNode[];
+}
+
+export interface FormKitSetting extends Omit<Setting, "spec"> {
+  spec: Array<FormKitSettingSpec>;
+}

src/modules/interface/themes/ThemeDetail.vue

@@ -320,7 +320,7 @@ onMounted(handleFetchThemes);
                       <RouterLink
                         :to="{
                           name: 'PluginDetail',
-                          params: { pluginName: 'PluginLinks' },
+                          params: { name: 'PluginLinks' },
                         }"
                         class="font-medium text-gray-900 hover:text-blue-400"
                       >

src/modules/system/plugins/PluginDetail.vue

@@ -1,157 +1,17 @@
 <script lang="ts" setup>
-import {
-  useDialog,
-  VButton,
-  VCard,
-  VPageHeader,
-  VSwitch,
-  VTabbar,
-  VTag,
-} from "@halo-dev/components";
-import { useRoute } from "vue-router";
-import { computed, onMounted, ref } from "vue";
+import { useDialog, VSwitch, VTag } from "@halo-dev/components";
+import type { Ref } from "vue";
+import { computed, inject, onMounted, ref } from "vue";
 import { apiClient } from "@halo-dev/admin-shared";
-import type {
-  ConfigMap,
-  Plugin,
-  Role,
-  Setting,
-  SettingSpec,
-} from "@halo-dev/api-client";
+import type { Plugin, Role } from "@halo-dev/api-client";
 import cloneDeep from "lodash.clonedeep";
-import type { FormKitSchemaCondition, FormKitSchemaNode } from "@formkit/core";
 import { pluginLabels } from "@/constants/labels";
 import { rbacAnnotations } from "@/constants/annotations";
 
-interface FormKitSettingSpec extends Omit<SettingSpec, "formSchema"> {
-  formSchema: FormKitSchemaCondition | FormKitSchemaNode[];
-}
+const plugin = inject<Ref<Plugin>>("plugin", ref({} as Plugin));
 
-interface FormKitSetting extends Omit<Setting, "spec"> {
-  spec: Array<FormKitSettingSpec>;
-}
-
-const pageTabs = ref([{ id: "detail", label: "详情" }]);
-const activeTabId = ref(pageTabs.value[0].id);
-const plugin = ref<Plugin>({} as Plugin);
-const settings = ref<FormKitSetting>({} as FormKitSetting);
-
-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();
 
-const handleFetchPlugin = async () => {
-  try {
-    const response =
-      await apiClient.extension.plugin.getpluginHaloRunV1alpha1Plugin(
-        params.pluginName as string
-      );
-    plugin.value = response.data;
-
-    await handleFetchSettings();
-    await handleFetchConfigMap();
-  } catch (e) {
-    console.error(e);
-  }
-};
-
-const handleFetchSettings = async () => {
-  if (!plugin.value.spec.settingName) {
-    return;
-  }
-  try {
-    const response = await apiClient.extension.setting.getv1alpha1Setting(
-      plugin.value.spec.settingName as string
-    );
-    settings.value = response.data as FormKitSetting;
-
-    const { spec } = settings.value;
-
-    if (spec) {
-      pageTabs.value = [
-        ...pageTabs.value,
-        ...spec.map((item: FormKitSettingSpec) => {
-          return {
-            id: item.group,
-            label: item.label || "",
-          };
-        }),
-      ];
-
-      spec.forEach((item: FormKitSettingSpec) => {
-        configmapFormData.value[item.group] = {};
-      });
-    }
-  } catch (e) {
-    console.error(e);
-  }
-};
-
-const handleFetchConfigMap = async () => {
-  if (!plugin.value.spec.configMapName) {
-    return;
-  }
-  try {
-    const response = await apiClient.extension.configMap.getv1alpha1ConfigMap(
-      plugin.value.spec.configMapName as string
-    );
-    configmap.value = response.data;
-
-    const { data } = configmap.value;
-
-    if (data) {
-      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: FormKitSettingSpec) => {
-      // @ts-ignore
-      configmap.value.data[item.group] = JSON.stringify(
-        configmapFormData.value[item.group]
-      );
-    });
-
-    if (!configmap.value.metadata.creationTimestamp) {
-      await apiClient.extension.configMap.createv1alpha1ConfigMap(
-        configmap.value
-      );
-    } else {
-      await apiClient.extension.configMap.updatev1alpha1ConfigMap(
-        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;
 });
@@ -197,7 +57,7 @@ const handleFetchRoles = async () => {
 const pluginRoleTemplates = computed(() => {
   return roles.value.filter((item) => {
     return (
-      item.metadata.labels?.[pluginLabels.NAME] === plugin.value.metadata.name
+      item.metadata.labels?.[pluginLabels.NAME] === plugin.value.metadata?.name
     );
   });
 });
@@ -222,219 +82,150 @@ const pluginRoleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
 });
 
 onMounted(() => {
-  handleFetchPlugin();
   handleFetchRoles();
 });
 </script>
 
 <template>
-  <VPageHeader :title="plugin?.spec?.displayName">
-    <template #icon>
-      <img :src="plugin?.spec?.logo" class="mr-2 h-8 w-8" />
-    </template>
-    <template #actions>
-      <VButton class="opacity-0" type="secondary">安装</VButton>
-    </template>
-  </VPageHeader>
-
-  <div class="m-0 md:m-4">
-    <VCard :body-class="['!p-0']">
-      <template #header>
-        <VTabbar
-          v-model:active-id="activeTabId"
-          :items="pageTabs"
-          class="w-full !rounded-none"
-          type="outline"
-        ></VTabbar>
-      </template>
-
-      <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">
-              插件信息
-            </h3>
-            <p
-              class="mt-1 flex max-w-2xl items-center gap-2 text-sm text-gray-500"
-            >
-              <span>{{ plugin?.spec?.version }}</span>
-              <VTag>
-                {{ isStarted ? "已启用" : "未启用" }}
-              </VTag>
-            </p>
-          </div>
-          <div v-permission="['system:plugins:manage']">
-            <VSwitch
-              :model-value="isStarted"
-              @change="handleChangePluginStatus"
-            />
-          </div>
-        </div>
-        <div class="border-t border-gray-200">
-          <dl class="divide-y divide-gray-100">
+  <div class="flex items-center justify-between bg-white px-4 py-4 sm:px-6">
+    <div>
+      <h3 class="text-lg font-medium leading-6 text-gray-900">插件信息</h3>
+      <p class="mt-1 flex max-w-2xl items-center gap-2 text-sm text-gray-500">
+        <span>{{ plugin?.spec?.version }}</span>
+        <VTag>
+          {{ isStarted ? "已启用" : "未启用" }}
+        </VTag>
+      </p>
+    </div>
+    <div v-permission="['system:plugins:manage']">
+      <VSwitch :model-value="isStarted" @change="handleChangePluginStatus" />
+    </div>
+  </div>
+  <div class="border-t border-gray-200">
+    <dl class="divide-y divide-gray-100">
+      <div
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+      >
+        <dt class="text-sm font-medium text-gray-900">名称</dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+          {{ plugin?.spec?.displayName }}
+        </dd>
+      </div>
+      <div
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+      >
+        <dt class="text-sm font-medium text-gray-900">版本</dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+          {{ plugin?.spec?.version }}
+        </dd>
+      </div>
+      <div
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+      >
+        <dt class="text-sm font-medium text-gray-900">Halo 版本要求</dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+          {{ plugin?.spec?.requires }}
+        </dd>
+      </div>
+      <div
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+      >
+        <dt class="text-sm font-medium text-gray-900">提供方</dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+          <a :href="plugin?.spec?.homepage" target="_blank">
+            {{ plugin?.spec?.author }}
+          </a>
+        </dd>
+      </div>
+      <div
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+      >
+        <dt class="text-sm font-medium text-gray-900">协议</dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+          <ul
+            v-if="plugin?.spec?.license && plugin?.spec?.license.length"
+            class="list-inside list-disc"
+          >
+            <li v-for="(license, index) in plugin.spec.license" :key="index">
+              <a v-if="license.url" :href="license.url" target="_blank">
+                {{ license.name }}
+              </a>
+              <span>
+                {{ license.name }}
+              </span>
+            </li>
+          </ul>
+        </dd>
+      </div>
+      <div
+        class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+      >
+        <dt class="text-sm font-medium text-gray-900">模型定义</dt>
+        <dd class="mt-1 sm:col-span-2 sm:mt-0">
+          <span>无</span>
+        </dd>
+      </div>
+      <div
+        :class="`${
+          pluginRoleTemplateGroups.length ? 'bg-gray-50' : 'bg-white'
+        }`"
+        class="px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+      >
+        <dt class="text-sm font-medium text-gray-900">权限模板</dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-5 sm:mt-0">
+          <dl
+            v-if="pluginRoleTemplateGroups.length"
+            class="divide-y divide-gray-100"
+          >
             <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+              v-for="(group, groupIndex) in pluginRoleTemplateGroups"
+              :key="groupIndex"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
             >
-              <dt class="text-sm font-medium text-gray-900">名称</dt>
+              <dt class="text-sm font-medium text-gray-900">
+                {{ group.module }}
+              </dt>
               <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ plugin?.spec?.displayName }}
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">版本</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ plugin?.spec?.version }}
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">Halo 版本要求</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ plugin?.spec?.requires }}
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">提供方</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <a :href="plugin?.spec?.homepage" target="_blank">
-                  {{ plugin?.spec?.author }}
-                </a>
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">协议</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <ul
-                  v-if="plugin?.spec?.license && plugin?.spec?.license.length"
-                  class="list-inside list-disc"
-                >
-                  <li
-                    v-for="(license, index) in plugin.spec.license"
-                    :key="index"
-                  >
-                    <a v-if="license.url" :href="license.url" target="_blank">
-                      {{ license.name }}
-                    </a>
-                    <span>
-                      {{ license.name }}
-                    </span>
+                <ul class="space-y-2">
+                  <li v-for="(role, index) in group.roles" :key="index">
+                    <div
+                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
+                    >
+                      <div class="inline-flex flex-col gap-y-3">
+                        <span class="font-medium text-gray-900">
+                          {{
+                            role.metadata.annotations?.[
+                              rbacAnnotations.DISPLAY_NAME
+                            ]
+                          }}
+                        </span>
+                        <span
+                          v-if="
+                            role.metadata.annotations?.[
+                              rbacAnnotations.DEPENDENCIES
+                            ]
+                          "
+                          class="text-xs text-gray-400"
+                        >
+                          依赖于
+                          {{
+                            JSON.parse(
+                              role.metadata.annotations?.[
+                                rbacAnnotations.DEPENDENCIES
+                              ]
+                            ).join(", ")
+                          }}
+                        </span>
+                      </div>
+                    </div>
                   </li>
                 </ul>
               </dd>
             </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">模型定义</dt>
-              <dd class="mt-1 sm:col-span-2 sm:mt-0">
-                <span>无</span>
-              </dd>
-            </div>
-            <div
-              :class="`${
-                pluginRoleTemplateGroups.length ? 'bg-gray-50' : 'bg-white'
-              }`"
-              class="px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">权限模板</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-5 sm:mt-0">
-                <dl
-                  v-if="pluginRoleTemplateGroups.length"
-                  class="divide-y divide-gray-100"
-                >
-                  <div
-                    v-for="(group, groupIndex) in pluginRoleTemplateGroups"
-                    :key="groupIndex"
-                    class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-                  >
-                    <dt class="text-sm font-medium text-gray-900">
-                      {{ group.module }}
-                    </dt>
-                    <dd
-                      class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
-                    >
-                      <ul class="space-y-2">
-                        <li v-for="(role, index) in group.roles" :key="index">
-                          <div
-                            class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
-                          >
-                            <div class="inline-flex flex-col gap-y-3">
-                              <span class="font-medium text-gray-900">
-                                {{
-                                  role.metadata.annotations?.[
-                                    rbacAnnotations.DISPLAY_NAME
-                                  ]
-                                }}
-                              </span>
-                              <span
-                                v-if="
-                                  role.metadata.annotations?.[
-                                    rbacAnnotations.DEPENDENCIES
-                                  ]
-                                "
-                                class="text-xs text-gray-400"
-                              >
-                                依赖于
-                                {{
-                                  JSON.parse(
-                                    role.metadata.annotations?.[
-                                      rbacAnnotations.DEPENDENCIES
-                                    ]
-                                  ).join(", ")
-                                }}
-                              </span>
-                            </div>
-                          </div>
-                        </li>
-                      </ul>
-                    </dd>
-                  </div>
-                </dl>
-                <span v-else>无</span>
-              </dd>
-            </div>
           </dl>
-        </div>
+          <span v-else>无</span>
+        </dd>
       </div>
-
-      <template v-for="(group, index) in settings.spec">
-        <div
-          v-if="activeTabId === group.group"
-          :key="index"
-          class="p-4 sm:px-6"
-        >
-          <div class="w-1/3">
-            <FormKit
-              :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>
-      </template>
-    </VCard>
+    </dl>
   </div>
 </template>

src/modules/system/plugins/PluginList.vue

@@ -27,7 +27,7 @@ const dialog = useDialog();
 const handleRouteToDetail = (plugin: Plugin) => {
   router.push({
     name: "PluginDetail",
-    params: { pluginName: plugin.metadata.name },
+    params: { name: plugin.metadata.name },
   });
 };
 

src/modules/system/plugins/PluginSetting.vue

@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import { VButton } from "@halo-dev/components";
+import type { Ref } from "vue";
+import { computed, inject, onMounted, ref, watch } from "vue";
+import type { ConfigMap, Plugin } from "@halo-dev/api-client";
+import type {
+  FormKitSetting,
+  FormKitSettingSpec,
+} from "@halo-dev/admin-shared";
+import { apiClient } from "@halo-dev/admin-shared";
+
+const plugin = inject<Ref<Plugin>>("plugin", ref({} as Plugin));
+const settings = ref<FormKitSetting>({} as FormKitSetting);
+const configmapFormData = ref<Record<string, Record<string, string>>>({});
+const configmap = ref<ConfigMap>({
+  data: {},
+  apiVersion: "v1alpha1",
+  kind: "ConfigMap",
+  metadata: {
+    name: "",
+  },
+});
+const saving = ref(false);
+
+const group = inject<Ref<string | undefined>>("activeTab");
+
+const formSchema = computed(() => {
+  if (!settings.value.spec) {
+    return;
+  }
+  return settings.value.spec.find((item) => item.group === group?.value)
+    ?.formSchema;
+});
+
+const handleFetchSettings = async () => {
+  if (!plugin.value.spec?.settingName) {
+    return;
+  }
+  try {
+    const response = await apiClient.extension.setting.getv1alpha1Setting(
+      plugin.value.spec.settingName as string
+    );
+    settings.value = response.data as FormKitSetting;
+
+    const { spec } = settings.value;
+
+    if (spec) {
+      spec.forEach((item: FormKitSettingSpec) => {
+        configmapFormData.value[item.group] = {};
+      });
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+const handleFetchConfigMap = async () => {
+  if (!plugin.value.spec?.configMapName) {
+    return;
+  }
+  try {
+    const response = await apiClient.extension.configMap.getv1alpha1ConfigMap(
+      plugin.value.spec?.configMapName as string
+    );
+    configmap.value = response.data;
+
+    const { data } = configmap.value;
+
+    if (data) {
+      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: FormKitSettingSpec) => {
+      // @ts-ignore
+      configmap.value.data[item.group] = JSON.stringify(
+        configmapFormData.value[item.group]
+      );
+    });
+
+    if (!configmap.value.metadata.creationTimestamp) {
+      await apiClient.extension.configMap.createv1alpha1ConfigMap(
+        configmap.value
+      );
+    } else {
+      await apiClient.extension.configMap.updatev1alpha1ConfigMap(
+        configmap.value.metadata.name,
+        configmap.value
+      );
+    }
+  } catch (e) {
+    console.error(e);
+  } finally {
+    await handleFetchConfigMap();
+    saving.value = false;
+  }
+};
+
+onMounted(() => {
+  handleFetchSettings();
+  handleFetchConfigMap();
+});
+
+watch([() => plugin.value, () => group?.value], () => {
+  handleFetchConfigMap();
+  handleFetchConfigMap();
+});
+</script>
+<template>
+  <div class="bg-white p-4 sm:px-6">
+    <div class="w-1/3">
+      <FormKit
+        v-if="group && formSchema"
+        :id="group"
+        v-model="configmapFormData[group]"
+        :actions="false"
+        :preserve="true"
+        type="form"
+        @submit="handleSaveConfigMap"
+      >
+        <FormKitSchema :schema="formSchema" />
+      </FormKit>
+    </div>
+    <div class="pt-5">
+      <div class="flex justify-start">
+        <VButton
+          :loading="saving"
+          type="secondary"
+          @click="$formkit.submit(group || '')"
+        >
+          保存
+        </VButton>
+      </div>
+    </div>
+  </div>
+</template>

src/modules/system/plugins/module.ts

@@ -1,5 +1,11 @@
-import { BasicLayout, definePlugin } from "@halo-dev/admin-shared";
+import {
+  BasicLayout,
+  BlankLayout,
+  definePlugin,
+  PluginLayout,
+} from "@halo-dev/admin-shared";
 import PluginList from "./PluginList.vue";
+import PluginSetting from "./PluginSetting.vue";
 import PluginDetail from "./PluginDetail.vue";
 import { IconPlug } from "@halo-dev/components";
 
@@ -9,23 +15,37 @@ export default definePlugin({
   routes: [
     {
       path: "/plugins",
-      component: BasicLayout,
+      component: BlankLayout,
       children: [
         {
           path: "",
-          name: "Plugins",
-          component: PluginList,
-          meta: {
-            permissions: ["system:plugins:view"],
-          },
+          component: BasicLayout,
+          children: [
+            {
+              path: "",
+              name: "Plugins",
+              component: PluginList,
+              meta: {
+                permissions: ["system:plugins:view"],
+              },
+            },
+          ],
         },
         {
-          path: ":pluginName",
-          name: "PluginDetail",
-          component: PluginDetail,
-          meta: {
-            permissions: ["system:plugins:view"],
-          },
+          path: ":name",
+          component: PluginLayout,
+          children: [
+            {
+              path: "detail",
+              name: "PluginDetail",
+              component: PluginDetail,
+            },
+            {
+              path: "settings/:group",
+              name: "PluginSetting",
+              component: PluginSetting,
+            },
+          ],
         },
       ],
     },

src/modules/system/roles/RoleDetail.vue

@@ -311,8 +311,9 @@ onMounted(() => {
                     :to="{
                       name: 'PluginDetail',
                       params: {
-                        pluginName:
-                          group.roles[0].metadata.labels?.[pluginLabels.NAME],
+                        name: group.roles[0].metadata.labels?.[
+                          pluginLabels.NAME
+                        ],
                       },
                     }"
                     class="hover:text-blue-600"