diff --git a/package.json b/package.json
index 6484b69cd..ba5c2578c 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,10 @@
     "@formkit/vue": "1.0.0-beta.9",
     "@halo-dev/admin-api": "^1.1.0",
     "@halo-dev/admin-shared": "workspace:*",
+    "@halo-dev/api-client": "^0.0.0",
     "@halo-dev/components": "workspace:*",
     "@vueuse/core": "^8.9.2",
+    "axios": "^0.27.2",
     "filepond": "^4.30.4",
     "filepond-plugin-image-preview": "^4.6.11",
     "floating-vue": "2.0.0-beta.16",
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 4c2392b01..f517b4041 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -36,6 +36,7 @@
   "homepage": "https://github.com/halo-dev/halo-admin/tree/next/shared/components#readme",
   "license": "MIT",
   "dependencies": {
+    "@halo-dev/api-client": "^0.0.0",
     "@halo-dev/components": "workspace:*",
     "axios": "^0.27.2"
   },
diff --git a/packages/shared/src/layouts/UserProfileLayout.vue b/packages/shared/src/layouts/UserProfileLayout.vue
index 0e7501aae..521062f34 100644
--- a/packages/shared/src/layouts/UserProfileLayout.vue
+++ b/packages/shared/src/layouts/UserProfileLayout.vue
@@ -3,8 +3,8 @@ import { BasicLayout } from "@/layouts";
 import { IconUpload, VButton, VTabbar } from "@halo-dev/components";
 import { onMounted, provide, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { axiosInstance } from "@/utils/api-client";
-import type { User } from "@/types/extension";
+import { apiClient } from "@/utils/api-client";
+import type { User } from "@halo-dev/api-client";
 
 const tabs = [
   {
@@ -35,8 +35,8 @@ const { params } = useRoute();
 
 const handleFetchUser = async () => {
   try {
-    const { data } = await axiosInstance.get(
-      `/api/v1alpha1/users/${params.name}`
+    const { data } = await apiClient.extension.user.getv1alpha1User(
+      params.name as string
     );
     user.value = data;
   } catch (e) {
diff --git a/packages/shared/src/utils/api-client.ts b/packages/shared/src/utils/api-client.ts
index 7212d8c83..d8419b2eb 100644
--- a/packages/shared/src/utils/api-client.ts
+++ b/packages/shared/src/utils/api-client.ts
@@ -1,5 +1,20 @@
+import {
+  PluginHaloRunV1alpha1PluginApi,
+  V1alpha1UserApi,
+  ApiHaloRunV1alpha1UserApi,
+  V1alpha1ConfigMapApi,
+  V1alpha1PersonalAccessTokenApi,
+  V1alpha1RoleBindingApi,
+  V1alpha1RoleApi,
+  V1alpha1SettingApi,
+  PluginHaloRunV1alpha1ReverseProxyApi,
+  CoreHaloRunV1alpha1LinkApi,
+  CoreHaloRunV1alpha1LinkGroupApi,
+} from "@halo-dev/api-client";
 import axios from "axios";
 
+const baseUrl = "http://localhost:8090";
+
 const axiosInstance = axios.create({
   baseURL: "http://localhost:8090",
   withCredentials: true,
@@ -18,4 +33,38 @@ axiosInstance.interceptors.response.use(
   }
 );
 
-export { axiosInstance };
+const apiClient = {
+  extension: {
+    configMap: new V1alpha1ConfigMapApi(undefined, baseUrl, axiosInstance),
+    personalAccessToken: new V1alpha1PersonalAccessTokenApi(
+      undefined,
+      baseUrl,
+      axiosInstance
+    ),
+    roleBinding: new V1alpha1RoleBindingApi(undefined, baseUrl, axiosInstance),
+    role: new V1alpha1RoleApi(undefined, baseUrl, axiosInstance),
+    setting: new V1alpha1SettingApi(undefined, baseUrl, axiosInstance),
+    reverseProxy: new PluginHaloRunV1alpha1ReverseProxyApi(
+      undefined,
+      baseUrl,
+      axiosInstance
+    ),
+    plugin: new PluginHaloRunV1alpha1PluginApi(
+      undefined,
+      baseUrl,
+      axiosInstance
+    ),
+    user: new V1alpha1UserApi(undefined, baseUrl, axiosInstance),
+
+    // TODO optional
+    link: new CoreHaloRunV1alpha1LinkApi(undefined, baseUrl, axiosInstance),
+    linkGroup: new CoreHaloRunV1alpha1LinkGroupApi(
+      undefined,
+      baseUrl,
+      axiosInstance
+    ),
+  },
+  user: new ApiHaloRunV1alpha1UserApi(undefined, baseUrl, axiosInstance),
+};
+
+export { apiClient };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 641566836..3c58b5032 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,6 +31,7 @@ importers:
       '@vue/tsconfig': ^0.1.3
       '@vueuse/core': ^8.9.2
       autoprefixer: ^10.4.7
+      axios: ^0.27.2
       c8: ^7.11.3
       cypress: ^9.7.0
       eslint: ^8.19.0
@@ -77,6 +78,7 @@ importers:
       '@halo-dev/admin-shared': link:packages/shared
       '@halo-dev/components': link:packages/components
       '@vueuse/core': 8.9.2_vue@3.2.37
+      axios: 0.27.2
       filepond: 4.30.4
       filepond-plugin-image-preview: 4.6.11_filepond@4.30.4
       floating-vue: 2.0.0-beta.16_vue@3.2.37
diff --git a/src/composables/usePlugins.ts b/src/composables/usePlugins.ts
index 3324977d3..bb8e3203e 100644
--- a/src/composables/usePlugins.ts
+++ b/src/composables/usePlugins.ts
@@ -3,7 +3,7 @@ import type {
   ExtensionPointName,
   ExtensionPointState,
 } from "@halo-dev/admin-shared";
-import type { Plugin } from "@/types/extension";
+import type { Plugin } from "@halo-dev/api-client";
 import type { Ref } from "vue";
 
 export function useExtensionPointsState(
@@ -13,9 +13,11 @@ export function useExtensionPointsState(
   const { plugins } = usePluginStore();
 
   plugins.forEach((plugin: Plugin) => {
+    // @ts-ignore
     if (!plugin.spec.module?.extensionPoints?.[point]) {
       return;
     }
+    // @ts-ignore
     plugin.spec.module.extensionPoints[point]?.(state);
   });
 }
diff --git a/src/main.ts b/src/main.ts
index e16e69c97..b0df8bd4e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,7 +7,7 @@ import type {
   MenuItemType,
   Plugin,
 } from "@halo-dev/admin-shared";
-import { axiosInstance } from "@halo-dev/admin-shared";
+import { apiClient } from "@halo-dev/admin-shared";
 import { menus, minimenus, registerMenu } from "./router/menus.config";
 // setup
 import "./setup/setupStyles";
@@ -17,7 +17,7 @@ import { setupComponents } from "./setup/setupComponents";
 import { coreModules } from "./modules";
 import { useScriptTag } from "@vueuse/core";
 import { usePluginStore } from "@/stores/plugin";
-import type { User } from "@/types/extension";
+import type { User } from "@halo-dev/api-client";
 
 const app = createApp(App);
 
@@ -97,21 +97,23 @@ function loadStyle(href: string) {
 }
 
 async function loadPluginModules() {
-  const response = await axiosInstance.get(
-    `/apis/plugin.halo.run/v1alpha1/plugins`
-  );
+  const response =
+    await apiClient.extension.plugin.listpluginHaloRunV1alpha1Plugin();
 
   // Get all started plugins
   const plugins = response.data.filter(
-    (plugin) => plugin.status.phase === "STARTED" && plugin.spec.enabled
+    (plugin) => plugin.status?.phase === "STARTED" && plugin.spec.enabled
   );
 
   for (const plugin of plugins) {
-    const { entry, stylesheet } = plugin.status;
+    const { entry, stylesheet } = plugin.status || {
+      entry: "",
+      stylesheet: "",
+    };
 
     if (entry) {
       const { load } = useScriptTag(
-        `http://localhost:8090${plugin.status.entry}`
+        `http://localhost:8090${plugin.status?.entry}`
       );
       await load();
       const pluginModule = window[plugin.metadata.name];
@@ -132,9 +134,7 @@ async function loadPluginModules() {
 }
 
 async function loadCurrentUser() {
-  const response = await axiosInstance.get(
-    `/apis/api.halo.run/v1alpha1/users/-`
-  );
+  const response = await apiClient.user.getCurrentUserDetail();
   app.provide<User>("currentUser", response.data);
 }
 
diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index c0ab0d6e0..3fbd329a2 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -21,8 +21,8 @@ import vueFilePond from "vue-filepond";
 import "filepond/dist/filepond.min.css";
 import FilePondPluginImagePreview from "filepond-plugin-image-preview";
 import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
-import type { User } from "@/types/extension";
-import { axiosInstance } from "@halo-dev/admin-shared";
+import type { User } from "@halo-dev/api-client";
+import { apiClient } from "@halo-dev/admin-shared";
 
 const viewTypes = [
   {
@@ -81,7 +81,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
 
 const handleFetchUsers = async () => {
   try {
-    const { data } = await axiosInstance.get("/api/v1alpha1/users");
+    const { data } = await apiClient.extension.user.listv1alpha1User();
     users.value = data;
   } catch (e) {
     console.error(e);
diff --git a/src/modules/contents/pages/PageList.vue b/src/modules/contents/pages/PageList.vue
index 34d443305..27671ea1b 100644
--- a/src/modules/contents/pages/PageList.vue
+++ b/src/modules/contents/pages/PageList.vue
@@ -14,9 +14,9 @@ import {
 } from "@halo-dev/components";
 import { onMounted, ref } from "vue";
 import type { PagesPublicState } from "@halo-dev/admin-shared";
-import { axiosInstance } from "@halo-dev/admin-shared";
+import { apiClient } from "@halo-dev/admin-shared";
 import { useExtensionPointsState } from "@/composables/usePlugins";
-import type { User } from "@/types/extension";
+import type { User } from "@halo-dev/api-client";
 
 const pagesRef = ref([
   {
@@ -52,7 +52,7 @@ useExtensionPointsState("PAGES", pagesPublicState);
 
 const handleFetchUsers = async () => {
   try {
-    const { data } = await axiosInstance.get("/api/v1alpha1/users");
+    const { data } = await apiClient.extension.user.listv1alpha1User();
     users.value = data;
   } catch (e) {
     console.error(e);
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 088c6d633..96682766a 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -17,8 +17,8 @@ import { posts } from "./posts-mock";
 import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import type { Post } from "@halo-dev/admin-api";
-import { axiosInstance } from "@halo-dev/admin-shared";
-import type { User } from "@/types/extension";
+import { apiClient } from "@halo-dev/admin-shared";
+import type { User } from "@halo-dev/api-client";
 
 const postsRef = ref(
   // eslint-disable-next-line
@@ -43,7 +43,7 @@ const checkedCount = computed(() => {
 
 const handleFetchUsers = async () => {
   try {
-    const { data } = await axiosInstance.get("/api/v1alpha1/users");
+    const { data } = await apiClient.extension.user.listv1alpha1User();
     users.value = data;
   } catch (e) {
     console.error(e);
diff --git a/src/modules/dashboard/widgets/RecentLoginWidget.vue b/src/modules/dashboard/widgets/RecentLoginWidget.vue
index 61c31a2b3..e3cdc0727 100644
--- a/src/modules/dashboard/widgets/RecentLoginWidget.vue
+++ b/src/modules/dashboard/widgets/RecentLoginWidget.vue
@@ -1,14 +1,14 @@
 <script lang="ts" name="RecentLoginWidget" setup>
 import { VCard } from "@halo-dev/components";
 import { onMounted, ref } from "vue";
-import type { User } from "@/types/extension";
-import { axiosInstance } from "@halo-dev/admin-shared";
+import { apiClient } from "@halo-dev/admin-shared";
+import type { User } from "@halo-dev/api-client";
 
 const users = ref<User[]>([]);
 
 const handleFetchUsers = async () => {
   try {
-    const { data } = await axiosInstance.get("/api/v1alpha1/users");
+    const { data } = await apiClient.extension.user.listv1alpha1User();
     users.value = data;
   } catch (e) {
     console.error(e);
diff --git a/src/modules/system/plugins/PluginDetail.vue b/src/modules/system/plugins/PluginDetail.vue
index 01e6ab050..8d4fa1033 100644
--- a/src/modules/system/plugins/PluginDetail.vue
+++ b/src/modules/system/plugins/PluginDetail.vue
@@ -4,26 +4,34 @@ import {
   VButton,
   VCard,
   VPageHeader,
-  VSpace,
   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 {
-  ConfigMap,
   Plugin,
+  ConfigMap,
   Setting,
   SettingSpec,
-} from "@/types/extension";
-import { axiosInstance } from "@halo-dev/admin-shared";
+} from "@halo-dev/api-client";
 import cloneDeep from "lodash.clonedeep";
+import type { FormKitSchemaCondition, FormKitSchemaNode } from "@formkit/core";
+
+interface FormKitSettingSpec extends Omit<SettingSpec, "formSchema"> {
+  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<Setting>({} as Setting);
+const settings = ref<FormKitSetting>({} as FormKitSetting);
 
 const configmapFormData = ref<Record<string, Record<string, string>>>({});
 const configmap = ref<ConfigMap>({
@@ -41,9 +49,10 @@ const dialog = useDialog();
 
 const handleFetchPlugin = async () => {
   try {
-    const response = await axiosInstance.get(
-      `/apis/plugin.halo.run/v1alpha1/plugins/${params.pluginName}`
-    );
+    const response =
+      await apiClient.extension.plugin.getpluginHaloRunV1alpha1Plugin(
+        params.pluginName as string
+      );
     plugin.value = response.data;
 
     await handleFetchSettings();
@@ -55,25 +64,25 @@ const handleFetchPlugin = async () => {
 
 const handleFetchSettings = async () => {
   try {
-    const response = await axiosInstance.get(
-      `/api/v1alpha1/settings/${plugin.value.spec.settingName}`
+    const response = await apiClient.extension.setting.getv1alpha1Setting(
+      plugin.value.spec.settingName as string
     );
-    settings.value = response.data;
+    settings.value = response.data as FormKitSetting;
 
     const { spec } = settings.value;
 
     if (spec) {
       pageTabs.value = [
         ...pageTabs.value,
-        ...spec.map((item: SettingSpec) => {
+        ...spec.map((item: FormKitSettingSpec) => {
           return {
             id: item.group,
-            label: item.label,
+            label: item.label || "",
           };
         }),
       ];
 
-      spec.forEach((item: SettingSpec) => {
+      spec.forEach((item: FormKitSettingSpec) => {
         configmapFormData.value[item.group] = {};
       });
     }
@@ -84,16 +93,18 @@ const handleFetchSettings = async () => {
 
 const handleFetchConfigMap = async () => {
   try {
-    const response = await axiosInstance.get(
-      `/api/v1alpha1/configmaps/${plugin.value.spec.configMapName}`
+    const response = await apiClient.extension.configMap.getv1alpha1ConfigMap(
+      plugin.value.spec.configMapName as string
     );
     configmap.value = response.data;
 
     const { data } = configmap.value;
 
-    Object.keys(data).forEach((key) => {
-      configmapFormData.value[key] = JSON.parse(data[key]);
-    });
+    if (data) {
+      Object.keys(data).forEach((key) => {
+        configmapFormData.value[key] = JSON.parse(data[key]);
+      });
+    }
   } catch (e) {
     console.error(e);
   }
@@ -107,17 +118,20 @@ const handleSaveConfigMap = async () => {
       configmap.value.metadata.name = plugin.value.spec.configMapName;
     }
 
-    settings.value.spec.forEach((item: SettingSpec) => {
+    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 axiosInstance.post(`/api/v1alpha1/configmaps`, configmap.value);
+      await apiClient.extension.configMap.createv1alpha1ConfigMap(
+        configmap.value
+      );
     } else {
-      await axiosInstance.put(
-        `/api/v1alpha1/configmaps/${configmap.value.metadata.name}`,
+      await apiClient.extension.configMap.updatev1alpha1ConfigMap(
+        configmap.value.metadata.name,
         configmap.value
       );
     }
@@ -141,8 +155,8 @@ const handleChangePluginStatus = async () => {
     onConfirm: async () => {
       try {
         pluginToUpdate.spec.enabled = !pluginToUpdate.spec.enabled;
-        await axiosInstance.put(
-          `/apis/plugin.halo.run/v1alpha1/plugins/${plugin.value.metadata.name}`,
+        await apiClient.extension.plugin.updatepluginHaloRunV1alpha1Plugin(
+          plugin.value.metadata.name,
           pluginToUpdate
         );
       } catch (e) {
@@ -264,31 +278,7 @@ onMounted(handleFetchPlugin);
             >
               <dt class="text-sm font-medium text-gray-900">模型定义</dt>
               <dd class="mt-1 sm:col-span-2 sm:mt-0">
-                <ul v-if="plugin?.extensions" class="space-y-2">
-                  <li
-                    v-for="(extension, index) in plugin?.extensions"
-                    :key="index"
-                  >
-                    <div
-                      class="inline-flex w-96 cursor-pointer flex-row flex-col gap-y-3 rounded border p-5 hover:border-themeable-primary"
-                    >
-                      <span class="font-medium text-gray-900">
-                        {{ extension.name }}
-                      </span>
-                      <div class="text-xs text-gray-400">
-                        <VSpace>
-                          <VTag
-                            v-for="(field, fieldIndex) in extension.fields"
-                            :key="fieldIndex"
-                          >
-                            {{ field }}
-                          </VTag>
-                        </VSpace>
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-                <span v-else>无</span>
+                <span>无</span>
               </dd>
             </div>
             <div
diff --git a/src/modules/system/plugins/PluginList.vue b/src/modules/system/plugins/PluginList.vue
index 8738faea3..04de922ae 100644
--- a/src/modules/system/plugins/PluginList.vue
+++ b/src/modules/system/plugins/PluginList.vue
@@ -15,8 +15,8 @@ import {
 } from "@halo-dev/components";
 import { onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
-import type { Plugin } from "@/types/extension";
-import { axiosInstance } from "@halo-dev/admin-shared";
+import { apiClient } from "@halo-dev/admin-shared";
+import type { Plugin } from "@halo-dev/api-client";
 import cloneDeep from "lodash.clonedeep";
 
 const checkedAll = ref(false);
@@ -46,9 +46,8 @@ const isStarted = (plugin: Plugin) => {
 
 const handleFetchPlugins = async () => {
   try {
-    const response = await axiosInstance.get(
-      `/apis/plugin.halo.run/v1alpha1/plugins`
-    );
+    const response =
+      await apiClient.extension.plugin.listpluginHaloRunV1alpha1Plugin();
     plugins.value = response.data;
   } catch (e) {
     console.error("Fail to fetch plugins", e);
@@ -63,8 +62,8 @@ const handleChangeStatus = (plugin: Plugin) => {
     onConfirm: async () => {
       try {
         pluginToUpdate.spec.enabled = !pluginToUpdate.spec.enabled;
-        await axiosInstance.put(
-          `/apis/plugin.halo.run/v1alpha1/plugins/${plugin.metadata.name}`,
+        await apiClient.extension.plugin.updatepluginHaloRunV1alpha1Plugin(
+          pluginToUpdate.metadata.name,
           pluginToUpdate
         );
       } catch (e) {
@@ -102,8 +101,8 @@ const handleChangeStatusInBatch = (enable: boolean) => {
       try {
         for (const plugin of pluginsToUpdate) {
           plugin.spec.enabled = enable;
-          await axiosInstance.put(
-            `/apis/plugin.halo.run/v1alpha1/plugins/${plugin.metadata.name}`,
+          await apiClient.extension.plugin.updatepluginHaloRunV1alpha1Plugin(
+            plugin.metadata.name,
             plugin
           );
         }
diff --git a/src/modules/system/roles/RoleDetail.vue b/src/modules/system/roles/RoleDetail.vue
index b4844d870..258b8b79c 100644
--- a/src/modules/system/roles/RoleDetail.vue
+++ b/src/modules/system/roles/RoleDetail.vue
@@ -11,8 +11,8 @@ import {
 } from "@halo-dev/components";
 import { useRoute, useRouter } from "vue-router";
 import { computed, onMounted, ref } from "vue";
-import { axiosInstance } from "@halo-dev/admin-shared";
-import type { Role, User } from "@/types/extension";
+import { apiClient } from "@halo-dev/admin-shared";
+import type { Role, User } from "@halo-dev/api-client";
 
 interface RoleTemplateGroup {
   name: string | null | undefined;
@@ -42,6 +42,7 @@ const formState = ref<FormState>({
         "plugin.halo.run/display-name": "",
       },
     },
+    rules: [],
   },
   selectedRoleTemplates: [],
   saving: false,
@@ -74,8 +75,8 @@ const roleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
 
 const handleFetchRole = async () => {
   try {
-    const response = await axiosInstance.get<Role>(
-      `/api/v1alpha1/roles/${route.params.name}`
+    const response = await apiClient.extension.role.getv1alpha1Role(
+      route.params.name as string
     );
     formState.value.role = response.data;
     formState.value.selectedRoleTemplates = JSON.parse(
@@ -89,7 +90,7 @@ const handleFetchRole = async () => {
 
 const handleFetchRoles = async () => {
   try {
-    const { data } = await axiosInstance.get("/api/v1alpha1/roles");
+    const { data } = await apiClient.extension.role.listv1alpha1Role();
     roles.value = data;
   } catch (e) {
     console.error(e);
@@ -98,7 +99,7 @@ const handleFetchRoles = async () => {
 
 const handleFetchUsers = async () => {
   try {
-    const { data } = await axiosInstance.get("/api/v1alpha1/users");
+    const { data } = await apiClient.extension.user.listv1alpha1User();
     users.value = data;
   } catch (e) {
     console.error(e);
@@ -113,8 +114,8 @@ const handleUpdateRole = async () => {
         "plugin.halo.run/dependencies"
       ] = JSON.stringify(formState.value.selectedRoleTemplates);
     }
-    await axiosInstance.put<Role>(
-      `/api/v1alpha1/roles/${route.params.name}`,
+    await apiClient.extension.role.updatev1alpha1Role(
+      route.params.name as string,
       formState.value.role
     );
   } catch (e) {
diff --git a/src/modules/system/roles/RoleList.vue b/src/modules/system/roles/RoleList.vue
index ce933f551..4340af71b 100644
--- a/src/modules/system/roles/RoleList.vue
+++ b/src/modules/system/roles/RoleList.vue
@@ -14,8 +14,8 @@ import {
 import RoleCreationModal from "./components/RoleCreationModal.vue";
 import { useRouter } from "vue-router";
 import { computed, onMounted, ref } from "vue";
-import type { Role } from "@/types/extension";
-import { axiosInstance } from "@halo-dev/admin-shared";
+import type { Role } from "@halo-dev/api-client";
+import { apiClient } from "@halo-dev/admin-shared";
 
 const createVisible = ref(false);
 const roles = ref<Role[]>([]);
@@ -31,7 +31,7 @@ const router = useRouter();
 
 const handleFetchRoles = async () => {
   try {
-    const { data } = await axiosInstance.get("/api/v1alpha1/roles");
+    const { data } = await apiClient.extension.role.listv1alpha1Role();
     roles.value = data;
   } catch (e) {
     console.error(e);
diff --git a/src/modules/system/roles/components/RoleCreationModal.vue b/src/modules/system/roles/components/RoleCreationModal.vue
index 6d3e5c25f..93affa7c8 100644
--- a/src/modules/system/roles/components/RoleCreationModal.vue
+++ b/src/modules/system/roles/components/RoleCreationModal.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { VButton, VModal, VTabItem, VTabs } from "@halo-dev/components";
 import { computed, ref, watch } from "vue";
-import type { Role } from "@/types/extension";
-import { axiosInstance } from "@halo-dev/admin-shared";
+import { apiClient } from "@halo-dev/admin-shared";
+import type { Role } from "@halo-dev/api-client";
 
 interface RoleTemplateGroup {
   name: string | null | undefined;
@@ -71,7 +71,7 @@ const roleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
 
 const handleFetchRoles = async () => {
   try {
-    const { data } = await axiosInstance.get("/api/v1alpha1/roles");
+    const { data } = await apiClient.extension.role.listv1alpha1Role();
     roles.value = data;
   } catch (e) {
     console.error(e);
@@ -86,8 +86,7 @@ const handleCreateRole = async () => {
         "plugin.halo.run/dependencies"
       ] = JSON.stringify(creationFormState.value.selectedRoleTemplates);
     }
-    await axiosInstance.post<Role>(
-      "/api/v1alpha1/roles",
+    await apiClient.extension.role.createv1alpha1Role(
       creationFormState.value.role
     );
     handleVisibleChange(false);
diff --git a/src/modules/system/users/Login.vue b/src/modules/system/users/Login.vue
index 3057c6b00..0331881ad 100644
--- a/src/modules/system/users/Login.vue
+++ b/src/modules/system/users/Login.vue
@@ -5,12 +5,17 @@ import {
   VButton,
 } from "@halo-dev/components";
 import { v4 as uuid } from "uuid";
-import { axiosInstance } from "@halo-dev/admin-shared";
+import axios from "axios";
 import qs from "qs";
 import logo from "../../../assets/logo.svg";
 import { onMounted, ref } from "vue";
 import { submitForm } from "@formkit/vue";
 
+const axiosInstance = axios.create({
+  baseURL: "http://localhost:8090",
+  withCredentials: true,
+});
+
 interface LoginForm {
   _csrf: string;
   username: string;
diff --git a/src/modules/system/users/PersonalAccessTokens.vue b/src/modules/system/users/PersonalAccessTokens.vue
index 2e73ccb96..a99c1a8e8 100644
--- a/src/modules/system/users/PersonalAccessTokens.vue
+++ b/src/modules/system/users/PersonalAccessTokens.vue
@@ -10,8 +10,8 @@ import {
   VTabs,
 } from "@halo-dev/components";
 import { onMounted, ref } from "vue";
-import type { PersonalAccessToken } from "@/types/extension";
-import { axiosInstance } from "@halo-dev/admin-shared";
+import { apiClient } from "@halo-dev/admin-shared";
+import type { PersonalAccessToken } from "@halo-dev/api-client";
 
 const createVisible = ref(false);
 const createActiveId = ref("general");
@@ -20,9 +20,8 @@ const personalAccessTokens = ref<PersonalAccessToken[]>([]);
 
 const handleFetchPersonalAccessTokens = async () => {
   try {
-    const response = await axiosInstance.get(
-      "/api/v1alpha1/personalaccesstokens"
-    );
+    const response =
+      await apiClient.extension.personalAccessToken.listv1alpha1PersonalAccessToken();
     personalAccessTokens.value = response.data;
   } catch (e) {
     console.error(e);
diff --git a/src/modules/system/users/ProfileModification.vue b/src/modules/system/users/ProfileModification.vue
index edff2a475..3ef099357 100644
--- a/src/modules/system/users/ProfileModification.vue
+++ b/src/modules/system/users/ProfileModification.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { VButton } from "@halo-dev/components";
 import { inject } from "vue";
-import type { User } from "@/types/extension";
+import type { User } from "@halo-dev/api-client";
 
 const user = inject<User>("user");
 </script>
diff --git a/src/modules/system/users/UserDetail.vue b/src/modules/system/users/UserDetail.vue
index 905de6a66..9e80b9712 100644
--- a/src/modules/system/users/UserDetail.vue
+++ b/src/modules/system/users/UserDetail.vue
@@ -3,7 +3,7 @@ import { IconUserSettings, VTag } from "@halo-dev/components";
 import type { Ref } from "vue";
 import { computed, inject } from "vue";
 import { useRouter } from "vue-router";
-import type { User } from "@/types/extension";
+import type { User } from "@halo-dev/api-client";
 
 const user = inject<Ref<User>>("user");
 
diff --git a/src/modules/system/users/UserList.vue b/src/modules/system/users/UserList.vue
index b3ab41072..1e1bd798c 100644
--- a/src/modules/system/users/UserList.vue
+++ b/src/modules/system/users/UserList.vue
@@ -14,8 +14,8 @@ import {
 } from "@halo-dev/components";
 import UserCreationModal from "./components/UserCreationModal.vue";
 import { onMounted, ref } from "vue";
-import { axiosInstance } from "@halo-dev/admin-shared";
-import type { User } from "@/types/extension";
+import { apiClient } from "@halo-dev/admin-shared";
+import type { User } from "@halo-dev/api-client";
 
 const checkAll = ref(false);
 const creationModal = ref<boolean>(false);
@@ -33,7 +33,7 @@ const pagination = ref<{
 
 const handleFetchUsers = async () => {
   try {
-    const { data } = await axiosInstance.get("/api/v1alpha1/users");
+    const { data } = await apiClient.extension.user.listv1alpha1User();
     users.value = data;
   } catch (e) {
     console.error(e);
diff --git a/src/modules/system/users/components/UserCreationModal.vue b/src/modules/system/users/components/UserCreationModal.vue
index 27c9d3353..1511a6a4d 100644
--- a/src/modules/system/users/components/UserCreationModal.vue
+++ b/src/modules/system/users/components/UserCreationModal.vue
@@ -1,9 +1,9 @@
 <script lang="ts" name="UserCreationModal" setup>
 import type { PropType } from "vue";
 import { computed, onMounted, ref, watch } from "vue";
-import { axiosInstance } from "@halo-dev/admin-shared";
+import { apiClient } from "@halo-dev/admin-shared";
+import type { Role, User } from "@halo-dev/api-client";
 import { IconSave, VButton, VModal } from "@halo-dev/components";
-import type { Role, User } from "@/types/extension";
 import { v4 as uuid } from "uuid";
 
 const props = defineProps({
@@ -70,7 +70,7 @@ watch(props, (newVal) => {
 
 const handleFetchRoles = async () => {
   try {
-    const { data } = await axiosInstance.get("/api/v1alpha1/roles");
+    const { data } = await apiClient.extension.role.listv1alpha1Role();
     roles.value = data;
   } catch (e) {
     console.error(e);
@@ -90,27 +90,26 @@ const handleCreateUser = async () => {
     let user: User;
 
     if (isUpdateMode.value) {
-      const response = await axiosInstance.put(
-        `/api/v1alpha1/users/${creationForm.value.user.metadata.name}`,
+      const response = await apiClient.extension.user.updatev1alpha1User(
+        creationForm.value.user.metadata.name,
         creationForm.value.user
       );
       user = response.data;
     } else {
-      const response = await axiosInstance.post(
-        "/api/v1alpha1/users",
+      const response = await apiClient.extension.user.createv1alpha1User(
         creationForm.value.user
       );
       user = response.data;
     }
 
-    if (selectedRole.value) {
-      await axiosInstance.post(
-        `/apis/api.halo.run/v1alpha1/users/${user.metadata.name}/permissions`,
-        {
-          roles: [selectedRole.value],
-        }
-      );
-    }
+    // if (selectedRole.value) {
+    //   await apiClient.user.(
+    //     `/apis/api.halo.run/v1alpha1/users/${user.metadata.name}/permissions`,
+    //     {
+    //       roles: [selectedRole.value],
+    //     }
+    //   );
+    // }
 
     handleVisibleChange(false);
   } catch (e) {