diff --git a/frontend/src/api/modules/user/index.ts b/frontend/src/api/modules/user/index.ts
index 48952a7a4c..79a360ba1e 100644
--- a/frontend/src/api/modules/user/index.ts
+++ b/frontend/src/api/modules/user/index.ts
@@ -1,7 +1,34 @@
 import MSR from '@/api/http/index';
-import { GetMenuListUrl, getPublicKeyUrl, isLoginUrl, LoginUrl, LogoutUrl } from '@/api/requrls/user';
+import {
+  AddAPIKEYUrl,
+  AddLocalConfigUrl,
+  DeleteAPIKEYUrl,
+  DisableAPIKEYUrl,
+  DisableLocalConfigUrl,
+  EnableAPIKEYUrl,
+  EnableLocalConfigUrl,
+  GetAPIKEYListUrl,
+  GetLocalConfigUrl,
+  GetMenuListUrl,
+  GetPublicKeyUrl,
+  isLoginUrl,
+  LoginUrl,
+  LogoutUrl,
+  UpdateAPIKEYUrl,
+  UpdateLocalConfigUrl,
+  ValidAPIKEYUrl,
+  ValidLocalConfigUrl,
+} from '@/api/requrls/user';
 
-import type { LoginData, LoginRes } from '@/models/user';
+import type {
+  AddLocalConfigParams,
+  APIKEY,
+  LocalConfig,
+  LoginData,
+  LoginRes,
+  UpdateAPIKEYParams,
+  UpdateLocalConfigParams,
+} from '@/models/user';
 
 import type { RouteRecordNormalized } from 'vue-router';
 
@@ -22,5 +49,70 @@ export function getMenuList() {
 }
 
 export function getPublicKeyRequest() {
-  return MSR.get<string>({ url: getPublicKeyUrl }, { ignoreCancelToken: true });
+  return MSR.get<string>({ url: GetPublicKeyUrl }, { ignoreCancelToken: true });
+}
+
+// 个人设置-更新本地执行
+export function updateLocalConfig(data: UpdateLocalConfigParams) {
+  return MSR.post({ url: UpdateLocalConfigUrl, data });
+}
+
+// 个人设置-添加本地执行
+export function addLocalConfig(data: AddLocalConfigParams) {
+  return MSR.post({ url: AddLocalConfigUrl, data });
+}
+
+// 个人设置-验证本地执行配置
+export function validLocalConfig(id: string) {
+  return MSR.get<boolean>({ url: ValidLocalConfigUrl, params: id });
+}
+
+// 个人设置-获取本地执行配置
+export function getLocalConfig() {
+  return MSR.get<LocalConfig[]>({ url: GetLocalConfigUrl });
+}
+
+// 个人设置-启用本地执行配置
+export function enableLocalConfig(id: string) {
+  return MSR.get({ url: EnableLocalConfigUrl, params: id });
+}
+
+// 个人设置-禁用本地执行配置
+export function disableLocalConfig(id: string) {
+  return MSR.get({ url: DisableLocalConfigUrl, params: id });
+}
+
+// 个人设置-修改 APIKEY
+export function updateAPIKEY(data: UpdateAPIKEYParams) {
+  return MSR.post({ url: UpdateAPIKEYUrl, data });
+}
+
+// 个人设置-验证 APIKEY
+export function validAPIKEY() {
+  return MSR.get({ url: ValidAPIKEYUrl });
+}
+
+// 个人设置-获取 APIKEY 列表
+export function getAPIKEYList() {
+  return MSR.get<APIKEY[]>({ url: GetAPIKEYListUrl });
+}
+
+// 个人设置-开启 APIKEY
+export function enableAPIKEY(id: string) {
+  return MSR.get({ url: EnableAPIKEYUrl, params: id });
+}
+
+// 个人设置-关闭 APIKEY
+export function disableAPIKEY(id: string) {
+  return MSR.get({ url: DisableAPIKEYUrl, params: id });
+}
+
+// 个人设置-删除 APIKEY
+export function deleteAPIKEY(id: string) {
+  return MSR.get({ url: DeleteAPIKEYUrl, params: id });
+}
+
+// 个人设置-生成 APIKEY
+export function addAPIKEY() {
+  return MSR.get({ url: AddAPIKEYUrl });
 }
diff --git a/frontend/src/api/requrls/user.ts b/frontend/src/api/requrls/user.ts
index e05a14851a..1b8939f64b 100644
--- a/frontend/src/api/requrls/user.ts
+++ b/frontend/src/api/requrls/user.ts
@@ -2,4 +2,17 @@ export const LoginUrl = '/login';
 export const isLoginUrl = '/is-login';
 export const LogoutUrl = '/signout';
 export const GetMenuListUrl = '/api/user/menu';
-export const getPublicKeyUrl = '/get-key';
+export const GetPublicKeyUrl = '/get-key';
+export const UpdateLocalConfigUrl = '/user/local/config/update'; // 个人设置-更新本地执行配置
+export const AddLocalConfigUrl = '/user/local/config/add'; // 个人设置-添加本地执行
+export const ValidLocalConfigUrl = '/user/local/config/validate'; // 个人设置-验证本地执行
+export const GetLocalConfigUrl = '/user/local/config/get'; // 个人设置-获取本地执行配置
+export const EnableLocalConfigUrl = '/user/local/config/enable'; // 个人设置-启用本地执行配置
+export const DisableLocalConfigUrl = '/user/local/config/disable'; // 个人设置-禁用本地执行配置
+export const UpdateAPIKEYUrl = '/user/api/key/update'; // 个人设置-更新 APIKEY
+export const ValidAPIKEYUrl = '/user/api/key/validate'; // 个人设置-验证 APIKEY
+export const GetAPIKEYListUrl = '/user/api/key/list'; // 个人设置-获取 APIKEY 列表
+export const EnableAPIKEYUrl = '/user/api/key/enable'; // 个人设置-开启 APIKEY
+export const DisableAPIKEYUrl = '/user/api/key/disable'; // 个人设置-关闭 APIKEY
+export const DeleteAPIKEYUrl = '/user/api/key/delete'; // 个人设置-删除 APIKEY
+export const AddAPIKEYUrl = '/user/api/key/add'; // 个人设置-生成 APIKEY
diff --git a/frontend/src/auto-import.d.ts b/frontend/src/auto-import.d.ts
index 5eb5ac528f..d298c3ccaa 100644
--- a/frontend/src/auto-import.d.ts
+++ b/frontend/src/auto-import.d.ts
@@ -62,4 +62,5 @@ declare global {
 declare global {
   // @ts-ignore
   export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }
diff --git a/frontend/src/components/business/ms-personal-drawer/components/apiKey.vue b/frontend/src/components/business/ms-personal-drawer/components/apiKey.vue
index 1c075d2783..021034158a 100644
--- a/frontend/src/components/business/ms-personal-drawer/components/apiKey.vue
+++ b/frontend/src/components/business/ms-personal-drawer/components/apiKey.vue
@@ -10,7 +10,15 @@
       </a-tooltip>
     </div>
     <a-tooltip :content="t('ms.personal.maxTip')" position="right" :disabled="apiKeyList.length < 5">
-      <a-button type="outline" class="w-[60px]" :disabled="apiKeyList.length >= 5">{{ t('common.new') }}</a-button>
+      <a-button
+        type="outline"
+        class="w-[60px]"
+        :disabled="apiKeyList.length >= 5"
+        :loading="newLoading"
+        @click="newApiKey"
+      >
+        {{ t('common.new') }}
+      </a-button>
     </a-tooltip>
     <a-spin class="api-list-content" :loading="loading">
       <div v-for="item of apiKeyList" :key="item.id" class="api-item">
@@ -38,14 +46,16 @@
         </div>
         <div class="px-[16px]">
           <div class="api-item-label">{{ t('ms.personal.desc') }}</div>
-          <a-tooltip :content="item.desc">
-            <div class="api-item-value one-line-text">{{ item.desc }}</div>
+          <a-tooltip :content="item.description" :disabled="!item.description">
+            <div class="api-item-value one-line-text">{{ item.description || '-' }}</div>
           </a-tooltip>
           <div class="api-item-label">{{ t('ms.personal.createTime') }}</div>
-          <div class="api-item-value">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
+          <div class="api-item-value">
+            {{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+          </div>
           <div class="api-item-label">{{ t('ms.personal.expireTime') }}</div>
           <div class="api-item-value">
-            {{ dayjs(item.expireTime).format('YYYY-MM-DD HH:mm:ss') }}
+            {{ item.forever ? t('ms.personal.forever') : dayjs(item.expireTime).format('YYYY-MM-DD HH:mm:ss') }}
             <a-tooltip v-if="item.isExpire" :content="t('ms.personal.expiredTip')">
               <MsIcon type="icon-icon_warning_filled" class="ml-[4px] text-[rgb(var(--warning-6))]" />
             </a-tooltip>
@@ -61,7 +71,7 @@
             v-model:model-value="item.enable"
             size="small"
             :before-change="() => handleBeforeEnableChange(item)"
-          ></a-switch>
+          />
         </div>
       </div>
     </a-spin>
@@ -112,6 +122,7 @@
 </template>
 
 <script setup lang="ts">
+  import { onBeforeMount } from 'vue';
   import { useClipboard } from '@vueuse/core';
   import { FormInstance, Message } from '@arco-design/web-vue';
   import dayjs from 'dayjs';
@@ -121,83 +132,66 @@
   import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
   import MsTag from '@/components/pure/ms-tag/ms-tag.vue';
 
+  import {
+    addAPIKEY,
+    deleteAPIKEY,
+    disableAPIKEY,
+    enableAPIKEY,
+    getAPIKEYList,
+    updateAPIKEY,
+  } from '@/api/modules/user/index';
   import { useI18n } from '@/hooks/useI18n';
   import useModal from '@/hooks/useModal';
 
+  import { APIKEY } from '@/models/user';
+
   const { copy } = useClipboard();
   const { t } = useI18n();
   const { openModal } = useModal();
 
-  interface ApiKeyItem {
-    id: string;
-    accessKey: string;
-    secretKey: string;
-    desc: string;
-    createTime: number;
-    expireTime: number;
-    enable: boolean;
-    desensitization: boolean;
+  const loading = ref(false);
+  interface APIKEYItem extends APIKEY {
     isExpire: boolean;
+    desensitization: boolean;
+  }
+  const apiKeyList = ref<APIKEYItem[]>([]);
+
+  async function initApiKeys() {
+    try {
+      loading.value = true;
+      const res = await getAPIKEYList();
+      apiKeyList.value = res.map((item) => ({
+        ...item,
+        isExpire: item.forever ? false : item.expireTime < Date.now(),
+        desensitization: true,
+      }));
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  onBeforeMount(() => {
+    initApiKeys();
+  });
+
+  const newLoading = ref(false);
+  async function newApiKey() {
+    try {
+      newLoading.value = true;
+      await addAPIKEY();
+      Message.success(t('common.newSuccess'));
+      initApiKeys();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      newLoading.value = false;
+    }
   }
 
-  const loading = ref(false);
-  const apiKeyList = ref<ApiKeyItem[]>([
-    {
-      id: '238dy23d2',
-      accessKey: 'dueiouhwded',
-      secretKey: 'asdasdas',
-      desc: '92387yd9283d2',
-      createTime: 1629782400000,
-      expireTime: 1629982400000,
-      enable: true,
-      desensitization: true,
-      isExpire: false,
-    },
-    {
-      id: 'ih02i3d23',
-      accessKey: 'sdshsd',
-      secretKey: 'poj4f',
-      desc: '92387yd9283d2',
-      createTime: 1629782400000,
-      expireTime: 1629982400000,
-      enable: false,
-      desensitization: true,
-      isExpire: true,
-    },
-    {
-      id: '34hy34h3',
-      accessKey: 'sdshsd',
-      secretKey: 'poj4f',
-      desc: '92387yd9283d2',
-      createTime: 1629782400000,
-      expireTime: 1629982400000,
-      enable: false,
-      desensitization: true,
-      isExpire: true,
-    },
-    {
-      id: 'f23',
-      accessKey: 'sdshsd',
-      secretKey: 'poj4f',
-      desc: '92387yd9283d2',
-      createTime: 1629782400000,
-      expireTime: 1629982400000,
-      enable: false,
-      desensitization: true,
-      isExpire: true,
-    },
-    {
-      id: 'ih02i3ed23',
-      accessKey: 'sdshsd',
-      secretKey: 'poj4f',
-      desc: '92387yd9283d2',
-      createTime: 1629782400000,
-      expireTime: 1629982400000,
-      enable: false,
-      desensitization: true,
-      isExpire: true,
-    },
-  ]);
   const actions: ActionsItem[] = [
     {
       label: t('ms.personal.validTime'),
@@ -218,11 +212,11 @@
     Message.success(t('ms.personal.copySuccess'));
   }
 
-  function desensitization(item: ApiKeyItem) {
+  function desensitization(item: APIKEYItem) {
     item.desensitization = !item.desensitization;
   }
 
-  async function handleBeforeEnableChange(item: ApiKeyItem) {
+  async function handleBeforeEnableChange(item: APIKEYItem) {
     if (item.enable) {
       openModal({
         type: 'error',
@@ -235,7 +229,9 @@
         },
         onBeforeOk: async () => {
           try {
+            await disableAPIKEY(item.id);
             Message.success(t('ms.personal.closeSuccess'));
+            item.enable = false;
           } catch (error) {
             // eslint-disable-next-line no-console
             console.log(error);
@@ -246,15 +242,17 @@
       return false;
     }
     try {
+      await enableAPIKEY(item.id);
       Message.success(t('ms.personal.openSuccess'));
       return true;
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
       return false;
     }
   }
 
-  function deleteApiKey(item: ApiKeyItem) {
+  function deleteApiKey(item: APIKEYItem) {
     openModal({
       type: 'error',
       title: t('ms.personal.confirmDelete'),
@@ -266,7 +264,9 @@
       },
       onBeforeOk: async () => {
         try {
+          await deleteAPIKEY(item.id);
           Message.success(t('common.deleteSuccess'));
+          initApiKeys();
         } catch (error) {
           // eslint-disable-next-line no-console
           console.log(error);
@@ -290,8 +290,15 @@
     timeFormRef.value?.validate(async (errors) => {
       if (!errors) {
         try {
+          await updateAPIKEY({
+            id: apiKeyList.value[0].id,
+            description: timeForm.value.desc,
+            expireTime: timeForm.value.activeTimeType === 'forever' ? 0 : dayjs(timeForm.value.time).valueOf(),
+            forever: timeForm.value.activeTimeType === 'forever',
+          });
           Message.success(t('common.updateSuccess'));
           done(true);
+          initApiKeys();
         } catch (error) {
           // eslint-disable-next-line no-console
           console.log(error);
@@ -308,12 +315,12 @@
     timeForm.value = { ...defaultTimeForm };
   }
 
-  function handleMoreActionSelect(item: ActionsItem, apiKey: ApiKeyItem) {
+  function handleMoreActionSelect(item: ActionsItem, apiKey: APIKEYItem) {
     if (item.eventTag === 'time') {
       timeForm.value = {
-        activeTimeType: 'forever',
+        activeTimeType: apiKey.forever ? 'forever' : 'custom',
         time: apiKey.expireTime ? dayjs(apiKey.expireTime).format('YYYY-MM-DD HH:mm:ss') : '',
-        desc: apiKey.desc,
+        desc: apiKey.description,
       };
       timeModalVisible.value = true;
     } else if (item.eventTag === 'delete') {
diff --git a/frontend/src/components/business/ms-personal-drawer/components/localExec.vue b/frontend/src/components/business/ms-personal-drawer/components/localExec.vue
index fd865a27e3..828a99bfc7 100644
--- a/frontend/src/components/business/ms-personal-drawer/components/localExec.vue
+++ b/frontend/src/components/business/ms-personal-drawer/components/localExec.vue
@@ -2,96 +2,126 @@
   <div class="mb-[16px] flex items-center justify-between">
     <div class="font-medium text-[var(--color-text-1)]">{{ t('ms.personal.localExecution') }}</div>
   </div>
-  <div class="grid grid-cols-2 gap-[16px]">
-    <div class="config-card">
-      <div class="config-card-title">
-        <div class="config-card-title-text">{{ t('ms.personal.apiLocalExecution') }}</div>
-        <MsTag theme="outline" :type="tagMap[apiConfig.status].type" size="small" class="px-[4px]">
-          {{ tagMap[apiConfig.status].text }}
-        </MsTag>
-      </div>
-      <a-input
-        v-model:model-value="apiConfig.url"
-        :placeholder="t('ms.personal.apiLocalExecutionPlaceholder')"
-        class="mb-[16px]"
-      ></a-input>
-      <div class="config-card-footer">
-        <a-button
-          type="outline"
-          class="px-[8px]"
-          size="mini"
-          :disabled="apiConfig.url.trim() === ''"
-          :loading="testApiLoading"
-          @click="testApi"
-        >
-          {{ t('ms.personal.test') }}
-        </a-button>
-        <div class="flex items-center">
-          <div class="mr-[4px] text-[12px] leading-[16px] text-[var(--color-text-4)]">
-            {{ t('ms.personal.priorityLocalExec') }}
-          </div>
-          <a-switch
-            v-model:model-value="apiConfig.isPriorityLocalExec"
+  <a-spin class="w-full" :loading="loading">
+    <div class="grid grid-cols-2 gap-[16px]">
+      <div class="config-card">
+        <div class="config-card-title">
+          <div class="config-card-title-text">{{ t('ms.personal.apiLocalExecution') }}</div>
+          <MsTag
+            v-if="apiConfig.status !== 'none'"
+            theme="outline"
+            :type="tagMap[apiConfig.status].type"
             size="small"
-            :disabled="apiConfig.status !== 1 || testApiLoading"
-            :before-change="(val) => handleApiPriorityBeforeChange(val)"
-          />
+            class="px-[4px]"
+          >
+            {{ tagMap[apiConfig.status].text }}
+          </MsTag>
+        </div>
+        <a-input
+          v-model:model-value="apiConfig.userUrl"
+          :placeholder="t('ms.personal.apiLocalExecutionPlaceholder')"
+          class="mb-[16px]"
+          @press-enter="testApi"
+        ></a-input>
+        <div class="config-card-footer">
+          <a-button
+            type="outline"
+            class="px-[8px]"
+            size="mini"
+            :disabled="apiConfig.userUrl.trim() === ''"
+            :loading="testApiLoading"
+            @click="testApi"
+          >
+            {{ t('ms.personal.test') }}
+          </a-button>
+          <div class="flex items-center">
+            <div class="mr-[4px] text-[12px] leading-[16px] text-[var(--color-text-4)]">
+              {{ t('ms.personal.priorityLocalExec') }}
+            </div>
+            <a-switch
+              v-model:model-value="apiConfig.enable"
+              size="small"
+              :disabled="apiConfig.id === '' || testApiLoading"
+              :before-change="(val) => handleApiPriorityBeforeChange(val)"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="config-card">
+        <div class="config-card-title">
+          <div class="config-card-title-text">{{ t('ms.personal.uiLocalExecution') }}</div>
+          <MsTag
+            v-if="uiConfig.status !== 'none'"
+            theme="outline"
+            :type="tagMap[uiConfig.status].type"
+            size="small"
+            class="px-[4px]"
+          >
+            {{ tagMap[uiConfig.status].text }}
+          </MsTag>
+        </div>
+        <a-input
+          v-model:model-value="uiConfig.userUrl"
+          :placeholder="t('ms.personal.uiLocalExecutionPlaceholder')"
+          class="mb-[16px]"
+          @press-enter="testUi"
+        ></a-input>
+        <div class="config-card-footer">
+          <a-button
+            type="outline"
+            class="px-[8px]"
+            size="mini"
+            :disabled="uiConfig.userUrl.trim() === ''"
+            :loading="testUiLoading"
+            @click="testUi"
+          >
+            {{ t('ms.personal.test') }}
+          </a-button>
+          <div class="flex items-center">
+            <div class="mr-[4px] text-[12px] leading-[16px] text-[var(--color-text-4)]">
+              {{ t('ms.personal.priorityLocalExec') }}
+            </div>
+            <a-switch
+              v-model:model-value="uiConfig.enable"
+              size="small"
+              :disabled="uiConfig.id === '' || testUiLoading"
+              :before-change="(val) => handleUiPriorityBeforeChange(val)"
+            />
+          </div>
         </div>
       </div>
     </div>
-    <div class="config-card">
-      <div class="config-card-title">
-        <div class="config-card-title-text">{{ t('ms.personal.uiLocalExecution') }}</div>
-        <MsTag theme="outline" :type="tagMap[uiConfig.status].type" size="small" class="px-[4px]">
-          {{ tagMap[uiConfig.status].text }}
-        </MsTag>
-      </div>
-      <a-input
-        v-model:model-value="uiConfig.url"
-        :placeholder="t('ms.personal.uiLocalExecutionPlaceholder')"
-        class="mb-[16px]"
-      ></a-input>
-      <div class="config-card-footer">
-        <a-button
-          type="outline"
-          class="px-[8px]"
-          size="mini"
-          :disabled="uiConfig.url.trim() === ''"
-          :loading="testUiLoading"
-          @click="testUi"
-        >
-          {{ t('ms.personal.test') }}
-        </a-button>
-        <div class="flex items-center">
-          <div class="mr-[4px] text-[12px] leading-[16px] text-[var(--color-text-4)]">
-            {{ t('ms.personal.priorityLocalExec') }}
-          </div>
-          <a-switch
-            v-model:model-value="uiConfig.isPriorityLocalExec"
-            size="small"
-            :disabled="uiConfig.status !== 1 || testUiLoading"
-            :before-change="(val) => handleUiPriorityBeforeChange(val)"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
+  </a-spin>
 </template>
 
 <script setup lang="ts">
+  import { onBeforeMount } from 'vue';
   import { Message } from '@arco-design/web-vue';
 
   import MsTag, { TagType } from '@/components/pure/ms-tag/ms-tag.vue';
 
+  import {
+    addLocalConfig,
+    disableLocalConfig,
+    enableLocalConfig,
+    getLocalConfig,
+    updateLocalConfig,
+    validLocalConfig,
+  } from '@/api/modules/user/index';
   import { useI18n } from '@/hooks/useI18n';
 
+  import { LocalConfig } from '@/models/user';
+
   const { t } = useI18n();
 
-  type Status = 0 | 1 | 2;
+  type Status = 0 | 1 | 2 | 'none'; // 0 未配置 1 测试通过 2 测试失败
   interface TagMapItem {
     type: TagType;
     text: string;
   }
+  interface Config {
+    status: Status;
+  }
   const tagMap: Record<Status, TagMapItem> = {
     0: {
       type: 'default',
@@ -105,18 +135,44 @@
       type: 'danger',
       text: t('ms.personal.testFail'),
     },
+    none: {
+      type: 'default',
+      text: '',
+    },
   };
+  const loading = ref(false);
   const testApiLoading = ref(false);
-  const apiConfig = ref({
-    url: '',
-    status: 1 as Status,
-    isPriorityLocalExec: false,
+  const apiConfig = ref<LocalConfig & Config>({
+    id: '',
+    userUrl: '',
+    enable: false,
+    type: 'API',
+    status: 0,
   });
 
   async function testApi() {
     try {
       testApiLoading.value = true;
-      Message.success(t('ms.personal.testPass'));
+      if (apiConfig.value.id) {
+        // 已经存在配置
+        await updateLocalConfig({
+          id: apiConfig.value.id,
+          userUrl: apiConfig.value.userUrl.trim(),
+        });
+      } else {
+        const result = await addLocalConfig({
+          type: 'API',
+          userUrl: apiConfig.value.userUrl.trim(),
+        });
+        apiConfig.value.id = result.id;
+      }
+      const res = await validLocalConfig(apiConfig.value.id);
+      apiConfig.value.status = res ? 1 : 2;
+      if (res) {
+        Message.success(t('ms.personal.testPass'));
+      } else {
+        Message.error(t('ms.personal.testFail'));
+      }
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
@@ -127,6 +183,11 @@
 
   async function handleApiPriorityBeforeChange(val: string | number | boolean) {
     try {
+      if (val) {
+        await enableLocalConfig(apiConfig.value.id);
+      } else {
+        await disableLocalConfig(apiConfig.value.id);
+      }
       Message.success(val ? t('ms.personal.apiLocalExecutionOpen') : t('ms.personal.apiLocalExecutionClose'));
       return true;
     } catch (error) {
@@ -137,26 +198,52 @@
   }
 
   const testUiLoading = ref(false);
-  const uiConfig = ref({
-    url: '',
-    status: 1 as Status,
-    isPriorityLocalExec: false,
+  const uiConfig = ref<LocalConfig & Config>({
+    id: '',
+    userUrl: '',
+    enable: false,
+    type: 'UI',
+    status: 0,
   });
 
   async function testUi() {
     try {
-      testApiLoading.value = true;
-      Message.success(t('ms.personal.testPass'));
+      testUiLoading.value = true;
+      if (uiConfig.value.id) {
+        // 已经存在配置
+        await updateLocalConfig({
+          id: uiConfig.value.id,
+          userUrl: uiConfig.value.userUrl.trim(),
+        });
+      } else {
+        const result = await addLocalConfig({
+          type: 'UI',
+          userUrl: uiConfig.value.userUrl.trim(),
+        });
+        uiConfig.value.id = result.id;
+      }
+      const res = await validLocalConfig(uiConfig.value.id);
+      uiConfig.value.status = res ? 1 : 2;
+      if (res) {
+        Message.success(t('ms.personal.testPass'));
+      } else {
+        Message.error(t('ms.personal.testFail'));
+      }
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
     } finally {
-      testApiLoading.value = false;
+      testUiLoading.value = false;
     }
   }
 
   async function handleUiPriorityBeforeChange(val: string | number | boolean) {
     try {
+      if (val) {
+        await enableLocalConfig(uiConfig.value.id);
+      } else {
+        await disableLocalConfig(uiConfig.value.id);
+      }
       Message.success(val ? t('ms.personal.uiLocalExecutionOpen') : t('ms.personal.uiLocalExecutionClose'));
       return true;
     } catch (error) {
@@ -165,6 +252,33 @@
       return false;
     }
   }
+
+  onBeforeMount(async () => {
+    try {
+      loading.value = true;
+      const res = await getLocalConfig();
+      if (Array.isArray(res)) {
+        res.forEach((config) => {
+          if (config.type === 'API') {
+            apiConfig.value = {
+              ...config,
+              status: 'none',
+            };
+          } else if (config.type === 'UI') {
+            uiConfig.value = {
+              ...config,
+              status: 'none',
+            };
+          }
+        });
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      loading.value = false;
+    }
+  });
 </script>
 
 <style lang="less" scoped>
diff --git a/frontend/src/components/business/ms-personal-drawer/index.vue b/frontend/src/components/business/ms-personal-drawer/index.vue
index f97a60d715..a8d0d1ea75 100644
--- a/frontend/src/components/business/ms-personal-drawer/index.vue
+++ b/frontend/src/components/business/ms-personal-drawer/index.vue
@@ -50,14 +50,18 @@
     }
   );
 
+  const activeMenu = ref('baseInfo');
+
   watch(
     () => innerVisible.value,
     (val) => {
       emit('update:visible', val);
+      if (!val) {
+        activeMenu.value = 'baseInfo';
+      }
     }
   );
 
-  const activeMenu = ref('baseInfo');
   const menuList = ref([
     {
       name: 'personal',
diff --git a/frontend/src/components/pure/ms-form-create/form-create.vue b/frontend/src/components/pure/ms-form-create/form-create.vue
index b7ff5df832..9e624ac0e2 100644
--- a/frontend/src/components/pure/ms-form-create/form-create.vue
+++ b/frontend/src/components/pure/ms-form-create/form-create.vue
@@ -59,11 +59,11 @@
     // 获取当前列表里边所有包含cascade的item
     if (currentFormCreateRules) {
       const cascade = currentFormCreateRules
-        .map((item: Record<string, any>) => item.link)
-        .filter((item: Record<string, any>) => item)
+        .map((item) => item.link)
+        .filter((item) => item)
         .flatMap((flatItem: any) => flatItem);
       // 给所有的link上边关联的某个item 进行绑定监视
-      return currentFormCreateRules.filter((item: Record<string, any>) => {
+      return currentFormCreateRules.filter((item) => {
         return cascade.indexOf(item.field) > -1;
       });
     }
@@ -88,9 +88,9 @@
     (val) => {
       // 监视当前改变请求获取当前方法下边的options 和获取多有的字段值
       if (val) {
-        val.forEach(async (item: any) => {
+        val.forEach((item) => {
           if (item.value) {
-            await getOptionsRequest(item);
+            getOptionsRequest(item as FormRuleItem);
           }
         });
       }
diff --git a/frontend/src/components/pure/ms-menu-panel/index.vue b/frontend/src/components/pure/ms-menu-panel/index.vue
index 0db51bcb76..b5ca574161 100644
--- a/frontend/src/components/pure/ms-menu-panel/index.vue
+++ b/frontend/src/components/pure/ms-menu-panel/index.vue
@@ -42,6 +42,13 @@
 
   const currentKey = ref(props.defaultKey);
 
+  watch(
+    () => props.defaultKey,
+    (val) => {
+      currentKey.value = val;
+    }
+  );
+
   const toggleMenu = (itemName: string) => {
     if (itemName) {
       currentKey.value = itemName;
diff --git a/frontend/src/locale/en-US/common.ts b/frontend/src/locale/en-US/common.ts
index aa267d8071..58afac0ce9 100644
--- a/frontend/src/locale/en-US/common.ts
+++ b/frontend/src/locale/en-US/common.ts
@@ -75,4 +75,5 @@ export default {
   'common.more': 'More',
   'common.recycle': 'Recycle Bin',
   'common.new': 'New',
+  'common.newSuccess': 'Added successfully',
 };
diff --git a/frontend/src/locale/zh-CN/common.ts b/frontend/src/locale/zh-CN/common.ts
index d72280ebe3..b483c349de 100644
--- a/frontend/src/locale/zh-CN/common.ts
+++ b/frontend/src/locale/zh-CN/common.ts
@@ -75,4 +75,5 @@ export default {
   'common.more': '更多',
   'common.recycle': '回收站',
   'common.new': '新增',
+  'common.newSuccess': '新增成功',
 };
diff --git a/frontend/src/models/user.ts b/frontend/src/models/user.ts
index b88d67a877..588a35fab6 100644
--- a/frontend/src/models/user.ts
+++ b/frontend/src/models/user.ts
@@ -37,3 +37,42 @@ export interface LoginRes {
   userRoleRelations: UserRole[];
   userRoles: UserRole[];
 }
+// 更新本地执行配置
+export interface UpdateLocalConfigParams {
+  id: string;
+  userUrl: string;
+}
+// 本地执行配置类型
+export type LocalConfigType = 'API' | 'UI';
+// 添加本地执行
+export interface AddLocalConfigParams {
+  userUrl: string;
+  type: LocalConfigType;
+}
+// 本地执行配置
+export interface LocalConfig {
+  id: string;
+  userUrl: string;
+  enable: boolean;
+  type: LocalConfigType;
+  createUser?: string;
+}
+// 更新 APIKEY
+export interface UpdateAPIKEYParams {
+  id: string;
+  forever: boolean;
+  expireTime: number;
+  description: string;
+}
+// APIKEY
+export interface APIKEY {
+  id: string;
+  createUser: string;
+  accessKey: string;
+  secretKey: string;
+  createTime: number;
+  enable: boolean;
+  forever: boolean;
+  expireTime: number;
+  description: string;
+}
diff --git a/frontend/src/store/modules/form-create/form-create.ts b/frontend/src/store/modules/form-create/form-create.ts
index 21e2e6b3d2..63e662c352 100644
--- a/frontend/src/store/modules/form-create/form-create.ts
+++ b/frontend/src/store/modules/form-create/form-create.ts
@@ -7,8 +7,6 @@ import { useI18n } from '@/hooks/useI18n';
 
 import { FormCreateKeyEnum } from '@/enums/formCreateEnum';
 
-import type { Rule } from '@form-create/arco-design';
-
 const { t } = useI18n();
 const useFormCreateStore = defineStore('form-create', {
   persist: false,
@@ -111,12 +109,10 @@ const useFormCreateStore = defineStore('form-create', {
       const formValue = formValueApi.formData();
       // 设置自定义属性给到searchSelect
       const formCreateRuleArr = this.formCreateRuleMap.get(key);
-      if (formCreateRuleArr) {
-        const formCreateItem = formCreateRuleArr.find((item: FormRuleItem) => cascadeItem.field === item.field);
-        if (formCreateItem && formCreateItem.props) {
-          formCreateItem.props.keyword = val.value;
-          formCreateItem.props.formValue = formValue;
-        }
+      const formCreateItem = formCreateRuleArr?.find((items) => cascadeItem.field === items.field);
+      if (formCreateItem) {
+        formCreateItem.props.keyword = val.value;
+        formCreateItem.props.formValue = formValue;
       }
     },
   },