diff --git a/ui/console-src/modules/interface/themes/ThemeSetting.vue b/ui/console-src/modules/interface/themes/ThemeSetting.vue
index 7f207c82b..a3f4f730a 100644
--- a/ui/console-src/modules/interface/themes/ThemeSetting.vue
+++ b/ui/console-src/modules/interface/themes/ThemeSetting.vue
@@ -1,19 +1,13 @@
 <script lang="ts" setup>
-// core libs
-import { computed, inject, ref, toRaw } from "vue";
-
-// components
-import { Toast, VButton } from "@halo-dev/components";
-
-// types
-import type { ConfigMap, Setting, Theme } from "@halo-dev/api-client";
-import type { Ref } from "vue";
-
-// hooks
 import StickyBlock from "@/components/sticky-block/StickyBlock.vue";
-import { useSettingFormConvert } from "@console/composables/use-setting-form";
+import type { FormKitSchemaCondition, FormKitSchemaNode } from "@formkit/core";
+import type { Setting, Theme } from "@halo-dev/api-client";
 import { consoleApiClient } from "@halo-dev/api-client";
+import { Toast, VButton } from "@halo-dev/components";
 import { useQuery, useQueryClient } from "@tanstack/vue-query";
+import { cloneDeep, set } from "lodash-es";
+import type { Ref } from "vue";
+import { computed, inject, ref, toRaw } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
@@ -26,10 +20,10 @@ const setting = inject<Ref<Setting | undefined>>("setting", ref());
 
 const saving = ref(false);
 
-const { data: configMap, suspense } = useQuery<ConfigMap>({
-  queryKey: ["theme-configMap", selectedTheme],
+const { data: configMapData, suspense } = useQuery({
+  queryKey: ["core:theme:configMap:data", selectedTheme],
   queryFn: async () => {
-    const { data } = await consoleApiClient.theme.theme.fetchThemeConfig({
+    const { data } = await consoleApiClient.theme.theme.fetchThemeJsonConfig({
       name: selectedTheme?.value?.metadata.name as string,
     });
     return data;
@@ -39,30 +33,37 @@ const { data: configMap, suspense } = useQuery<ConfigMap>({
   }),
 });
 
-const { configMapFormData, formSchema, convertToSave } = useSettingFormConvert(
-  setting,
-  configMap,
-  group
-);
+const currentConfigMapGroupData = computed(() => {
+  return configMapData.value?.[group.value];
+});
 
-const handleSaveConfigMap = async () => {
+const formSchema = computed(() => {
+  if (!setting.value) {
+    return;
+  }
+  const { forms } = setting.value.spec;
+  return forms.find((item) => item.group === group?.value)?.formSchema as (
+    | FormKitSchemaCondition
+    | FormKitSchemaNode
+  )[];
+});
+
+const handleSaveConfigMap = async (data: object) => {
   saving.value = true;
 
-  const configMapToUpdate = convertToSave();
-
-  if (!configMapToUpdate || !selectedTheme?.value) {
+  if (!selectedTheme?.value) {
     saving.value = false;
     return;
   }
 
-  await consoleApiClient.theme.theme.updateThemeConfig({
+  await consoleApiClient.theme.theme.updateThemeJsonConfig({
     name: selectedTheme?.value?.metadata.name,
-    configMap: configMapToUpdate,
+    body: set(cloneDeep(configMapData.value) || {}, group.value, data),
   });
 
   Toast.success(t("core.common.toast.save_success"));
 
-  queryClient.invalidateQueries({ queryKey: ["theme-configMap"] });
+  queryClient.invalidateQueries({ queryKey: ["core:theme:configMap:data"] });
 
   saving.value = false;
 };
@@ -73,18 +74,16 @@ await suspense();
   <Transition mode="out-in" name="fade">
     <div class="p-4">
       <FormKit
-        v-if="group && formSchema && configMapFormData?.[group]"
+        v-if="group && formSchema && currentConfigMapGroupData"
         :id="group"
-        v-model="configMapFormData[group]"
+        :value="currentConfigMapGroupData || {}"
         :name="group"
-        :actions="false"
-        :preserve="true"
         type="form"
         @submit="handleSaveConfigMap"
       >
         <FormKitSchema
           :schema="toRaw(formSchema)"
-          :data="configMapFormData[group]"
+          :data="toRaw(currentConfigMapGroupData)"
         />
       </FormKit>
       <StickyBlock
diff --git a/ui/console-src/modules/system/plugins/components/tabs/Setting.vue b/ui/console-src/modules/system/plugins/components/tabs/Setting.vue
index 460a82f5b..c83f0ee42 100644
--- a/ui/console-src/modules/system/plugins/components/tabs/Setting.vue
+++ b/ui/console-src/modules/system/plugins/components/tabs/Setting.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import StickyBlock from "@/components/sticky-block/StickyBlock.vue";
-import { useSettingFormConvert } from "@console/composables/use-setting-form";
-import type { ConfigMap, Plugin, Setting } from "@halo-dev/api-client";
+import type { FormKitSchemaCondition, FormKitSchemaNode } from "@formkit/core";
+import type { Plugin, Setting } from "@halo-dev/api-client";
 import { consoleApiClient } from "@halo-dev/api-client";
 import { Toast, VButton } from "@halo-dev/components";
 import { useQuery, useQueryClient } from "@tanstack/vue-query";
+import { cloneDeep, set } from "lodash-es";
 import { computed, inject, ref, toRaw, type Ref } from "vue";
 import { useI18n } from "vue-i18n";
 
@@ -16,12 +17,14 @@ const plugin = inject<Ref<Plugin | undefined>>("plugin");
 const setting = inject<Ref<Setting | undefined>>("setting", ref());
 const saving = ref(false);
 
-const { data: configMap } = useQuery<ConfigMap>({
-  queryKey: ["plugin-configMap", plugin],
+const { data: configMapData } = useQuery({
+  queryKey: ["core:plugin:configMap:data", plugin],
   queryFn: async () => {
-    const { data } = await consoleApiClient.plugin.plugin.fetchPluginConfig({
-      name: plugin?.value?.metadata.name as string,
-    });
+    const { data } = await consoleApiClient.plugin.plugin.fetchPluginJsonConfig(
+      {
+        name: plugin?.value?.metadata.name as string,
+      }
+    );
     return data;
   },
   enabled: computed(() => {
@@ -29,28 +32,37 @@ const { data: configMap } = useQuery<ConfigMap>({
   }),
 });
 
-const { configMapFormData, formSchema, convertToSave } = useSettingFormConvert(
-  setting,
-  configMap,
-  group
-);
+const currentConfigMapGroupData = computed(() => {
+  return configMapData.value?.[group.value];
+});
 
-const handleSaveConfigMap = async () => {
+const formSchema = computed(() => {
+  if (!setting.value) {
+    return;
+  }
+  const { forms } = setting.value.spec;
+  return forms.find((item) => item.group === group?.value)?.formSchema as (
+    | FormKitSchemaCondition
+    | FormKitSchemaNode
+  )[];
+});
+
+const handleSaveConfigMap = async (data: object) => {
   saving.value = true;
-  const configMapToUpdate = convertToSave();
-  if (!configMapToUpdate || !plugin?.value) {
+
+  if (!plugin?.value) {
     saving.value = false;
     return;
   }
 
-  await consoleApiClient.plugin.plugin.updatePluginConfig({
+  await consoleApiClient.plugin.plugin.updatePluginJsonConfig({
     name: plugin.value.metadata.name,
-    configMap: configMapToUpdate,
+    body: set(cloneDeep(configMapData.value) || {}, group.value, data),
   });
 
   Toast.success(t("core.common.toast.save_success"));
 
-  queryClient.invalidateQueries({ queryKey: ["plugin-configMap"] });
+  queryClient.invalidateQueries({ queryKey: ["core:plugin:configMap:data"] });
 
   saving.value = false;
 };
@@ -60,18 +72,16 @@ const handleSaveConfigMap = async () => {
     <div class="rounded-b-base bg-white p-4">
       <div>
         <FormKit
-          v-if="group && formSchema && configMapFormData?.[group]"
+          v-if="group && formSchema && currentConfigMapGroupData"
           :id="group"
-          v-model="configMapFormData[group]"
+          :value="currentConfigMapGroupData"
           :name="group"
-          :actions="false"
-          :preserve="true"
           type="form"
           @submit="handleSaveConfigMap"
         >
           <FormKitSchema
             :schema="toRaw(formSchema)"
-            :data="configMapFormData[group]"
+            :data="toRaw(currentConfigMapGroupData)"
           />
         </FormKit>
       </div>
diff --git a/ui/packages/api-client/src/api/plugin-v1alpha1-console-api.ts b/ui/packages/api-client/src/api/plugin-v1alpha1-console-api.ts
index efde5318e..dcf3317b4 100644
--- a/ui/packages/api-client/src/api/plugin-v1alpha1-console-api.ts
+++ b/ui/packages/api-client/src/api/plugin-v1alpha1-console-api.ts
@@ -163,7 +163,7 @@ export const PluginV1alpha1ConsoleApiAxiosParamCreator = function (configuration
             };
         },
         /**
-         * Fetch configMap of plugin by configured configMapName.
+         * Fetch configMap of plugin by configured configMapName. it is deprecated since 2.20.0
          * @param {string} name 
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
@@ -194,6 +194,47 @@ export const PluginV1alpha1ConsoleApiAxiosParamCreator = function (configuration
 
 
     
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * Fetch converted json config of plugin by configured configMapName.
+         * @param {string} name 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        fetchPluginJsonConfig: async (name: string, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'name' is not null or undefined
+            assertParamExists('fetchPluginJsonConfig', 'name', name)
+            const localVarPath = `/apis/api.console.halo.run/v1alpha1/plugins/{name}/json-config`
+                .replace(`{${"name"}}`, encodeURIComponent(String(name)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication basicAuth required
+            // http basic authentication required
+            setBasicAuthToObject(localVarRequestOptions, configuration)
+
+            // authentication bearerAuth required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
             setSearchParams(localVarUrlObj, localVarQueryParameter);
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
@@ -535,10 +576,11 @@ export const PluginV1alpha1ConsoleApiAxiosParamCreator = function (configuration
             };
         },
         /**
-         * Update the configMap of plugin setting.
+         * Update the configMap of plugin setting, it is deprecated since 2.20.0
          * @param {string} name 
          * @param {ConfigMap} configMap 
          * @param {*} [options] Override http request option.
+         * @deprecated
          * @throws {RequiredError}
          */
         updatePluginConfig: async (name: string, configMap: ConfigMap, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
@@ -581,6 +623,53 @@ export const PluginV1alpha1ConsoleApiAxiosParamCreator = function (configuration
                 options: localVarRequestOptions,
             };
         },
+        /**
+         * Update the config of plugin setting.
+         * @param {string} name 
+         * @param {object} body 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updatePluginJsonConfig: async (name: string, body: object, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'name' is not null or undefined
+            assertParamExists('updatePluginJsonConfig', 'name', name)
+            // verify required parameter 'body' is not null or undefined
+            assertParamExists('updatePluginJsonConfig', 'body', body)
+            const localVarPath = `/apis/api.console.halo.run/v1alpha1/plugins/{name}/json-config`
+                .replace(`{${"name"}}`, encodeURIComponent(String(name)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication basicAuth required
+            // http basic authentication required
+            setBasicAuthToObject(localVarRequestOptions, configuration)
+
+            // authentication bearerAuth required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(body, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
         /**
          * Upgrade a plugin by uploading a Jar file
          * @param {string} name 
@@ -734,7 +823,7 @@ export const PluginV1alpha1ConsoleApiFp = function(configuration?: Configuration
             return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
         },
         /**
-         * Fetch configMap of plugin by configured configMapName.
+         * Fetch configMap of plugin by configured configMapName. it is deprecated since 2.20.0
          * @param {string} name 
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
@@ -745,6 +834,18 @@ export const PluginV1alpha1ConsoleApiFp = function(configuration?: Configuration
             const localVarOperationServerBasePath = operationServerMap['PluginV1alpha1ConsoleApi.fetchPluginConfig']?.[localVarOperationServerIndex]?.url;
             return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
         },
+        /**
+         * Fetch converted json config of plugin by configured configMapName.
+         * @param {string} name 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async fetchPluginJsonConfig(name: string, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<object>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.fetchPluginJsonConfig(name, options);
+            const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
+            const localVarOperationServerBasePath = operationServerMap['PluginV1alpha1ConsoleApi.fetchPluginJsonConfig']?.[localVarOperationServerIndex]?.url;
+            return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
+        },
         /**
          * Fetch setting of plugin.
          * @param {string} name 
@@ -837,10 +938,11 @@ export const PluginV1alpha1ConsoleApiFp = function(configuration?: Configuration
             return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
         },
         /**
-         * Update the configMap of plugin setting.
+         * Update the configMap of plugin setting, it is deprecated since 2.20.0
          * @param {string} name 
          * @param {ConfigMap} configMap 
          * @param {*} [options] Override http request option.
+         * @deprecated
          * @throws {RequiredError}
          */
         async updatePluginConfig(name: string, configMap: ConfigMap, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<ConfigMap>> {
@@ -849,6 +951,19 @@ export const PluginV1alpha1ConsoleApiFp = function(configuration?: Configuration
             const localVarOperationServerBasePath = operationServerMap['PluginV1alpha1ConsoleApi.updatePluginConfig']?.[localVarOperationServerIndex]?.url;
             return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
         },
+        /**
+         * Update the config of plugin setting.
+         * @param {string} name 
+         * @param {object} body 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updatePluginJsonConfig(name: string, body: object, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updatePluginJsonConfig(name, body, options);
+            const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
+            const localVarOperationServerBasePath = operationServerMap['PluginV1alpha1ConsoleApi.updatePluginJsonConfig']?.[localVarOperationServerIndex]?.url;
+            return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
+        },
         /**
          * Upgrade a plugin by uploading a Jar file
          * @param {string} name 
@@ -913,7 +1028,7 @@ export const PluginV1alpha1ConsoleApiFactory = function (configuration?: Configu
             return localVarFp.fetchJsBundle(options).then((request) => request(axios, basePath));
         },
         /**
-         * Fetch configMap of plugin by configured configMapName.
+         * Fetch configMap of plugin by configured configMapName. it is deprecated since 2.20.0
          * @param {PluginV1alpha1ConsoleApiFetchPluginConfigRequest} requestParameters Request parameters.
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
@@ -921,6 +1036,15 @@ export const PluginV1alpha1ConsoleApiFactory = function (configuration?: Configu
         fetchPluginConfig(requestParameters: PluginV1alpha1ConsoleApiFetchPluginConfigRequest, options?: RawAxiosRequestConfig): AxiosPromise<ConfigMap> {
             return localVarFp.fetchPluginConfig(requestParameters.name, options).then((request) => request(axios, basePath));
         },
+        /**
+         * Fetch converted json config of plugin by configured configMapName.
+         * @param {PluginV1alpha1ConsoleApiFetchPluginJsonConfigRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        fetchPluginJsonConfig(requestParameters: PluginV1alpha1ConsoleApiFetchPluginJsonConfigRequest, options?: RawAxiosRequestConfig): AxiosPromise<object> {
+            return localVarFp.fetchPluginJsonConfig(requestParameters.name, options).then((request) => request(axios, basePath));
+        },
         /**
          * Fetch setting of plugin.
          * @param {PluginV1alpha1ConsoleApiFetchPluginSettingRequest} requestParameters Request parameters.
@@ -984,14 +1108,24 @@ export const PluginV1alpha1ConsoleApiFactory = function (configuration?: Configu
             return localVarFp.resetPluginConfig(requestParameters.name, options).then((request) => request(axios, basePath));
         },
         /**
-         * Update the configMap of plugin setting.
+         * Update the configMap of plugin setting, it is deprecated since 2.20.0
          * @param {PluginV1alpha1ConsoleApiUpdatePluginConfigRequest} requestParameters Request parameters.
          * @param {*} [options] Override http request option.
+         * @deprecated
          * @throws {RequiredError}
          */
         updatePluginConfig(requestParameters: PluginV1alpha1ConsoleApiUpdatePluginConfigRequest, options?: RawAxiosRequestConfig): AxiosPromise<ConfigMap> {
             return localVarFp.updatePluginConfig(requestParameters.name, requestParameters.configMap, options).then((request) => request(axios, basePath));
         },
+        /**
+         * Update the config of plugin setting.
+         * @param {PluginV1alpha1ConsoleApiUpdatePluginJsonConfigRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updatePluginJsonConfig(requestParameters: PluginV1alpha1ConsoleApiUpdatePluginJsonConfigRequest, options?: RawAxiosRequestConfig): AxiosPromise<void> {
+            return localVarFp.updatePluginJsonConfig(requestParameters.name, requestParameters.body, options).then((request) => request(axios, basePath));
+        },
         /**
          * Upgrade a plugin by uploading a Jar file
          * @param {PluginV1alpha1ConsoleApiUpgradePluginRequest} requestParameters Request parameters.
@@ -1048,6 +1182,20 @@ export interface PluginV1alpha1ConsoleApiFetchPluginConfigRequest {
     readonly name: string
 }
 
+/**
+ * Request parameters for fetchPluginJsonConfig operation in PluginV1alpha1ConsoleApi.
+ * @export
+ * @interface PluginV1alpha1ConsoleApiFetchPluginJsonConfigRequest
+ */
+export interface PluginV1alpha1ConsoleApiFetchPluginJsonConfigRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof PluginV1alpha1ConsoleApiFetchPluginJsonConfig
+     */
+    readonly name: string
+}
+
 /**
  * Request parameters for fetchPluginSetting operation in PluginV1alpha1ConsoleApi.
  * @export
@@ -1209,6 +1357,27 @@ export interface PluginV1alpha1ConsoleApiUpdatePluginConfigRequest {
     readonly configMap: ConfigMap
 }
 
+/**
+ * Request parameters for updatePluginJsonConfig operation in PluginV1alpha1ConsoleApi.
+ * @export
+ * @interface PluginV1alpha1ConsoleApiUpdatePluginJsonConfigRequest
+ */
+export interface PluginV1alpha1ConsoleApiUpdatePluginJsonConfigRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof PluginV1alpha1ConsoleApiUpdatePluginJsonConfig
+     */
+    readonly name: string
+
+    /**
+     * 
+     * @type {object}
+     * @memberof PluginV1alpha1ConsoleApiUpdatePluginJsonConfig
+     */
+    readonly body: object
+}
+
 /**
  * Request parameters for upgradePlugin operation in PluginV1alpha1ConsoleApi.
  * @export
@@ -1304,7 +1473,7 @@ export class PluginV1alpha1ConsoleApi extends BaseAPI {
     }
 
     /**
-     * Fetch configMap of plugin by configured configMapName.
+     * Fetch configMap of plugin by configured configMapName. it is deprecated since 2.20.0
      * @param {PluginV1alpha1ConsoleApiFetchPluginConfigRequest} requestParameters Request parameters.
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
@@ -1314,6 +1483,17 @@ export class PluginV1alpha1ConsoleApi extends BaseAPI {
         return PluginV1alpha1ConsoleApiFp(this.configuration).fetchPluginConfig(requestParameters.name, options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * Fetch converted json config of plugin by configured configMapName.
+     * @param {PluginV1alpha1ConsoleApiFetchPluginJsonConfigRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof PluginV1alpha1ConsoleApi
+     */
+    public fetchPluginJsonConfig(requestParameters: PluginV1alpha1ConsoleApiFetchPluginJsonConfigRequest, options?: RawAxiosRequestConfig) {
+        return PluginV1alpha1ConsoleApiFp(this.configuration).fetchPluginJsonConfig(requestParameters.name, options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * Fetch setting of plugin.
      * @param {PluginV1alpha1ConsoleApiFetchPluginSettingRequest} requestParameters Request parameters.
@@ -1391,9 +1571,10 @@ export class PluginV1alpha1ConsoleApi extends BaseAPI {
     }
 
     /**
-     * Update the configMap of plugin setting.
+     * Update the configMap of plugin setting, it is deprecated since 2.20.0
      * @param {PluginV1alpha1ConsoleApiUpdatePluginConfigRequest} requestParameters Request parameters.
      * @param {*} [options] Override http request option.
+     * @deprecated
      * @throws {RequiredError}
      * @memberof PluginV1alpha1ConsoleApi
      */
@@ -1401,6 +1582,17 @@ export class PluginV1alpha1ConsoleApi extends BaseAPI {
         return PluginV1alpha1ConsoleApiFp(this.configuration).updatePluginConfig(requestParameters.name, requestParameters.configMap, options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * Update the config of plugin setting.
+     * @param {PluginV1alpha1ConsoleApiUpdatePluginJsonConfigRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof PluginV1alpha1ConsoleApi
+     */
+    public updatePluginJsonConfig(requestParameters: PluginV1alpha1ConsoleApiUpdatePluginJsonConfigRequest, options?: RawAxiosRequestConfig) {
+        return PluginV1alpha1ConsoleApiFp(this.configuration).updatePluginJsonConfig(requestParameters.name, requestParameters.body, options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * Upgrade a plugin by uploading a Jar file
      * @param {PluginV1alpha1ConsoleApiUpgradePluginRequest} requestParameters Request parameters.
diff --git a/ui/packages/api-client/src/api/theme-v1alpha1-console-api.ts b/ui/packages/api-client/src/api/theme-v1alpha1-console-api.ts
index 2e1fa3df5..08cc168ec 100644
--- a/ui/packages/api-client/src/api/theme-v1alpha1-console-api.ts
+++ b/ui/packages/api-client/src/api/theme-v1alpha1-console-api.ts
@@ -118,9 +118,10 @@ export const ThemeV1alpha1ConsoleApiAxiosParamCreator = function (configuration?
             };
         },
         /**
-         * Fetch configMap of theme by configured configMapName.
+         * Fetch configMap of theme by configured configMapName. It is deprecated.
          * @param {string} name 
          * @param {*} [options] Override http request option.
+         * @deprecated
          * @throws {RequiredError}
          */
         fetchThemeConfig: async (name: string, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
@@ -149,6 +150,47 @@ export const ThemeV1alpha1ConsoleApiAxiosParamCreator = function (configuration?
 
 
     
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * Fetch converted json config of theme by configured configMapName.
+         * @param {string} name 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        fetchThemeJsonConfig: async (name: string, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'name' is not null or undefined
+            assertParamExists('fetchThemeJsonConfig', 'name', name)
+            const localVarPath = `/apis/api.console.halo.run/v1alpha1/themes/{name}/json-config`
+                .replace(`{${"name"}}`, encodeURIComponent(String(name)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication basicAuth required
+            // http basic authentication required
+            setBasicAuthToObject(localVarRequestOptions, configuration)
+
+            // authentication bearerAuth required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
             setSearchParams(localVarUrlObj, localVarQueryParameter);
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
@@ -465,10 +507,11 @@ export const ThemeV1alpha1ConsoleApiAxiosParamCreator = function (configuration?
             };
         },
         /**
-         * Update the configMap of theme setting.
+         * Update the configMap of theme setting. It is deprecated.
          * @param {string} name 
          * @param {ConfigMap} configMap 
          * @param {*} [options] Override http request option.
+         * @deprecated
          * @throws {RequiredError}
          */
         updateThemeConfig: async (name: string, configMap: ConfigMap, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
@@ -511,6 +554,53 @@ export const ThemeV1alpha1ConsoleApiAxiosParamCreator = function (configuration?
                 options: localVarRequestOptions,
             };
         },
+        /**
+         * Update the configMap of theme setting.
+         * @param {string} name 
+         * @param {object} body 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateThemeJsonConfig: async (name: string, body: object, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'name' is not null or undefined
+            assertParamExists('updateThemeJsonConfig', 'name', name)
+            // verify required parameter 'body' is not null or undefined
+            assertParamExists('updateThemeJsonConfig', 'body', body)
+            const localVarPath = `/apis/api.console.halo.run/v1alpha1/themes/{name}/json-config`
+                .replace(`{${"name"}}`, encodeURIComponent(String(name)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication basicAuth required
+            // http basic authentication required
+            setBasicAuthToObject(localVarRequestOptions, configuration)
+
+            // authentication bearerAuth required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(body, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
         /**
          * Upgrade theme
          * @param {string} name 
@@ -644,9 +734,10 @@ export const ThemeV1alpha1ConsoleApiFp = function(configuration?: Configuration)
             return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
         },
         /**
-         * Fetch configMap of theme by configured configMapName.
+         * Fetch configMap of theme by configured configMapName. It is deprecated.
          * @param {string} name 
          * @param {*} [options] Override http request option.
+         * @deprecated
          * @throws {RequiredError}
          */
         async fetchThemeConfig(name: string, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<ConfigMap>> {
@@ -655,6 +746,18 @@ export const ThemeV1alpha1ConsoleApiFp = function(configuration?: Configuration)
             const localVarOperationServerBasePath = operationServerMap['ThemeV1alpha1ConsoleApi.fetchThemeConfig']?.[localVarOperationServerIndex]?.url;
             return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
         },
+        /**
+         * Fetch converted json config of theme by configured configMapName.
+         * @param {string} name 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async fetchThemeJsonConfig(name: string, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<object>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.fetchThemeJsonConfig(name, options);
+            const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
+            const localVarOperationServerBasePath = operationServerMap['ThemeV1alpha1ConsoleApi.fetchThemeJsonConfig']?.[localVarOperationServerIndex]?.url;
+            return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
+        },
         /**
          * Fetch setting of theme.
          * @param {string} name 
@@ -743,10 +846,11 @@ export const ThemeV1alpha1ConsoleApiFp = function(configuration?: Configuration)
             return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
         },
         /**
-         * Update the configMap of theme setting.
+         * Update the configMap of theme setting. It is deprecated.
          * @param {string} name 
          * @param {ConfigMap} configMap 
          * @param {*} [options] Override http request option.
+         * @deprecated
          * @throws {RequiredError}
          */
         async updateThemeConfig(name: string, configMap: ConfigMap, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<ConfigMap>> {
@@ -755,6 +859,19 @@ export const ThemeV1alpha1ConsoleApiFp = function(configuration?: Configuration)
             const localVarOperationServerBasePath = operationServerMap['ThemeV1alpha1ConsoleApi.updateThemeConfig']?.[localVarOperationServerIndex]?.url;
             return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
         },
+        /**
+         * Update the configMap of theme setting.
+         * @param {string} name 
+         * @param {object} body 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updateThemeJsonConfig(name: string, body: object, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updateThemeJsonConfig(name, body, options);
+            const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
+            const localVarOperationServerBasePath = operationServerMap['ThemeV1alpha1ConsoleApi.updateThemeJsonConfig']?.[localVarOperationServerIndex]?.url;
+            return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
+        },
         /**
          * Upgrade theme
          * @param {string} name 
@@ -809,14 +926,24 @@ export const ThemeV1alpha1ConsoleApiFactory = function (configuration?: Configur
             return localVarFp.fetchActivatedTheme(options).then((request) => request(axios, basePath));
         },
         /**
-         * Fetch configMap of theme by configured configMapName.
+         * Fetch configMap of theme by configured configMapName. It is deprecated.
          * @param {ThemeV1alpha1ConsoleApiFetchThemeConfigRequest} requestParameters Request parameters.
          * @param {*} [options] Override http request option.
+         * @deprecated
          * @throws {RequiredError}
          */
         fetchThemeConfig(requestParameters: ThemeV1alpha1ConsoleApiFetchThemeConfigRequest, options?: RawAxiosRequestConfig): AxiosPromise<ConfigMap> {
             return localVarFp.fetchThemeConfig(requestParameters.name, options).then((request) => request(axios, basePath));
         },
+        /**
+         * Fetch converted json config of theme by configured configMapName.
+         * @param {ThemeV1alpha1ConsoleApiFetchThemeJsonConfigRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        fetchThemeJsonConfig(requestParameters: ThemeV1alpha1ConsoleApiFetchThemeJsonConfigRequest, options?: RawAxiosRequestConfig): AxiosPromise<object> {
+            return localVarFp.fetchThemeJsonConfig(requestParameters.name, options).then((request) => request(axios, basePath));
+        },
         /**
          * Fetch setting of theme.
          * @param {ThemeV1alpha1ConsoleApiFetchThemeSettingRequest} requestParameters Request parameters.
@@ -880,14 +1007,24 @@ export const ThemeV1alpha1ConsoleApiFactory = function (configuration?: Configur
             return localVarFp.resetThemeConfig(requestParameters.name, options).then((request) => request(axios, basePath));
         },
         /**
-         * Update the configMap of theme setting.
+         * Update the configMap of theme setting. It is deprecated.
          * @param {ThemeV1alpha1ConsoleApiUpdateThemeConfigRequest} requestParameters Request parameters.
          * @param {*} [options] Override http request option.
+         * @deprecated
          * @throws {RequiredError}
          */
         updateThemeConfig(requestParameters: ThemeV1alpha1ConsoleApiUpdateThemeConfigRequest, options?: RawAxiosRequestConfig): AxiosPromise<ConfigMap> {
             return localVarFp.updateThemeConfig(requestParameters.name, requestParameters.configMap, options).then((request) => request(axios, basePath));
         },
+        /**
+         * Update the configMap of theme setting.
+         * @param {ThemeV1alpha1ConsoleApiUpdateThemeJsonConfigRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateThemeJsonConfig(requestParameters: ThemeV1alpha1ConsoleApiUpdateThemeJsonConfigRequest, options?: RawAxiosRequestConfig): AxiosPromise<void> {
+            return localVarFp.updateThemeJsonConfig(requestParameters.name, requestParameters.body, options).then((request) => request(axios, basePath));
+        },
         /**
          * Upgrade theme
          * @param {ThemeV1alpha1ConsoleApiUpgradeThemeRequest} requestParameters Request parameters.
@@ -937,6 +1074,20 @@ export interface ThemeV1alpha1ConsoleApiFetchThemeConfigRequest {
     readonly name: string
 }
 
+/**
+ * Request parameters for fetchThemeJsonConfig operation in ThemeV1alpha1ConsoleApi.
+ * @export
+ * @interface ThemeV1alpha1ConsoleApiFetchThemeJsonConfigRequest
+ */
+export interface ThemeV1alpha1ConsoleApiFetchThemeJsonConfigRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof ThemeV1alpha1ConsoleApiFetchThemeJsonConfig
+     */
+    readonly name: string
+}
+
 /**
  * Request parameters for fetchThemeSetting operation in ThemeV1alpha1ConsoleApi.
  * @export
@@ -1070,6 +1221,27 @@ export interface ThemeV1alpha1ConsoleApiUpdateThemeConfigRequest {
     readonly configMap: ConfigMap
 }
 
+/**
+ * Request parameters for updateThemeJsonConfig operation in ThemeV1alpha1ConsoleApi.
+ * @export
+ * @interface ThemeV1alpha1ConsoleApiUpdateThemeJsonConfigRequest
+ */
+export interface ThemeV1alpha1ConsoleApiUpdateThemeJsonConfigRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof ThemeV1alpha1ConsoleApiUpdateThemeJsonConfig
+     */
+    readonly name: string
+
+    /**
+     * 
+     * @type {object}
+     * @memberof ThemeV1alpha1ConsoleApiUpdateThemeJsonConfig
+     */
+    readonly body: object
+}
+
 /**
  * Request parameters for upgradeTheme operation in ThemeV1alpha1ConsoleApi.
  * @export
@@ -1141,9 +1313,10 @@ export class ThemeV1alpha1ConsoleApi extends BaseAPI {
     }
 
     /**
-     * Fetch configMap of theme by configured configMapName.
+     * Fetch configMap of theme by configured configMapName. It is deprecated.
      * @param {ThemeV1alpha1ConsoleApiFetchThemeConfigRequest} requestParameters Request parameters.
      * @param {*} [options] Override http request option.
+     * @deprecated
      * @throws {RequiredError}
      * @memberof ThemeV1alpha1ConsoleApi
      */
@@ -1151,6 +1324,17 @@ export class ThemeV1alpha1ConsoleApi extends BaseAPI {
         return ThemeV1alpha1ConsoleApiFp(this.configuration).fetchThemeConfig(requestParameters.name, options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * Fetch converted json config of theme by configured configMapName.
+     * @param {ThemeV1alpha1ConsoleApiFetchThemeJsonConfigRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof ThemeV1alpha1ConsoleApi
+     */
+    public fetchThemeJsonConfig(requestParameters: ThemeV1alpha1ConsoleApiFetchThemeJsonConfigRequest, options?: RawAxiosRequestConfig) {
+        return ThemeV1alpha1ConsoleApiFp(this.configuration).fetchThemeJsonConfig(requestParameters.name, options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * Fetch setting of theme.
      * @param {ThemeV1alpha1ConsoleApiFetchThemeSettingRequest} requestParameters Request parameters.
@@ -1228,9 +1412,10 @@ export class ThemeV1alpha1ConsoleApi extends BaseAPI {
     }
 
     /**
-     * Update the configMap of theme setting.
+     * Update the configMap of theme setting. It is deprecated.
      * @param {ThemeV1alpha1ConsoleApiUpdateThemeConfigRequest} requestParameters Request parameters.
      * @param {*} [options] Override http request option.
+     * @deprecated
      * @throws {RequiredError}
      * @memberof ThemeV1alpha1ConsoleApi
      */
@@ -1238,6 +1423,17 @@ export class ThemeV1alpha1ConsoleApi extends BaseAPI {
         return ThemeV1alpha1ConsoleApiFp(this.configuration).updateThemeConfig(requestParameters.name, requestParameters.configMap, options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * Update the configMap of theme setting.
+     * @param {ThemeV1alpha1ConsoleApiUpdateThemeJsonConfigRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof ThemeV1alpha1ConsoleApi
+     */
+    public updateThemeJsonConfig(requestParameters: ThemeV1alpha1ConsoleApiUpdateThemeJsonConfigRequest, options?: RawAxiosRequestConfig) {
+        return ThemeV1alpha1ConsoleApiFp(this.configuration).updateThemeJsonConfig(requestParameters.name, requestParameters.body, options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * Upgrade theme
      * @param {ThemeV1alpha1ConsoleApiUpgradeThemeRequest} requestParameters Request parameters.