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 {
+import { useDialog, VSwitch, VTag } from "@halo-dev/components";
-  useDialog,
+import type { Ref } from "vue";
-  VButton,
+import { computed, inject, onMounted, ref } from "vue";
-  VCard,
-  VPageHeader,
-  VSwitch,
-  VTabbar,
-  VTag,
-} from "@halo-dev/components";
-import { useRoute } from "vue-router";
-import { computed, onMounted, ref } from "vue";
 import { apiClient } from "@halo-dev/admin-shared";
-import type {
+import type { Plugin, Role } from "@halo-dev/api-client";
-  ConfigMap,
-  Plugin,
-  Role,
-  Setting,
-  SettingSpec,
-} 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"> {
+const plugin = inject<Ref<Plugin>>("plugin", ref({} as Plugin));
-  formSchema: FormKitSchemaCondition | FormKitSchemaNode[];
-}
 
-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,41 +82,15 @@ const pluginRoleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
 });
 
 onMounted(() => {
-  handleFetchPlugin();
   handleFetchRoles();
 });
 </script>
 
 <template>
-  <VPageHeader :title="plugin?.spec?.displayName">
+  <div class="flex items-center justify-between bg-white px-4 py-4 sm:px-6">
-    <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 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">
-            </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 ? "已启用" : "未启用" }}
@@ -264,10 +98,7 @@ onMounted(() => {
       </p>
     </div>
     <div v-permission="['system:plugins:manage']">
-            <VSwitch
+      <VSwitch :model-value="isStarted" @change="handleChangePluginStatus" />
-              :model-value="isStarted"
-              @change="handleChangePluginStatus"
-            />
     </div>
   </div>
   <div class="border-t border-gray-200">
@@ -315,10 +146,7 @@ onMounted(() => {
             v-if="plugin?.spec?.license && plugin?.spec?.license.length"
             class="list-inside list-disc"
           >
-                  <li
+            <li v-for="(license, index) in plugin.spec.license" :key="index">
-                    v-for="(license, index) in plugin.spec.license"
-                    :key="index"
-                  >
               <a v-if="license.url" :href="license.url" target="_blank">
                 {{ license.name }}
               </a>
@@ -357,9 +185,7 @@ onMounted(() => {
               <dt class="text-sm font-medium text-gray-900">
                 {{ group.module }}
               </dt>
-                    <dd
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                      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
@@ -402,39 +228,4 @@ onMounted(() => {
       </div>
     </dl>
   </div>
-      </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>
-  </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,6 +15,10 @@ export default definePlugin({
   routes: [
     {
       path: "/plugins",
+      component: BlankLayout,
+      children: [
+        {
+          path: "",
           component: BasicLayout,
           children: [
             {
@@ -19,13 +29,23 @@ export default definePlugin({
                 permissions: ["system:plugins:view"],
               },
             },
+          ],
+        },
         {
-          path: ":pluginName",
+          path: ":name",
+          component: PluginLayout,
+          children: [
+            {
+              path: "detail",
               name: "PluginDetail",
               component: PluginDetail,
-          meta: {
-            permissions: ["system:plugins:view"],
             },
+            {
+              path: "settings/:group",
+              name: "PluginSetting",
+              component: PluginSetting,
+            },
+          ],
         },
       ],
     },

src/modules/system/roles/RoleDetail.vue

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