diff --git a/ui/src/api/system/license.ts b/ui/src/api/system/license.ts
new file mode 100644
index 000000000..16e5acdf6
--- /dev/null
+++ b/ui/src/api/system/license.ts
@@ -0,0 +1,24 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import { type Ref } from 'vue'
+
+const prefix = '/license'
+
+/**
+ * 获得license信息
+ */
+const getLicense: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get(`${prefix}/profile`, undefined, loading)
+}
+/**
+ * 更新license信息
+ * @param 参数  license_file:file
+ */
+const putLicense: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (data, loading) => {
+  return put(`${prefix}/profile`, data, undefined, loading)
+}
+
+export default {
+  getLicense,
+  putLicense
+}
diff --git a/ui/src/layout/layout-header/avatar/AboutDialog.vue b/ui/src/layout/layout-header/avatar/AboutDialog.vue
index b4700e5f2..482d633e2 100644
--- a/ui/src/layout/layout-header/avatar/AboutDialog.vue
+++ b/ui/src/layout/layout-header/avatar/AboutDialog.vue
@@ -6,7 +6,7 @@
   >
     <template #header="{ titleId, titleClass }">
       <div class="logo flex-center" :id="titleId" :class="titleClass">
-        <LogoFull height="59px" />
+        <LogoFull height="59px"/>
       </div>
     </template>
     <div class="about-ui" v-loading="loading">
@@ -16,20 +16,21 @@
       </div>
       <div class="flex">
         <span class="label">{{ $t('layout.about.expiredTime') }}</span>
-        <!-- <span
-          >{{ licenseInfo?.expired || '-' }}
-          <span class="color-danger" v-if="licenseInfo?.expired && fromNowDate(licenseInfo?.expired)"
-            >（{{ fromNowDate(licenseInfo?.expired) }}）</span
-          ></span
-        > -->
+<!--        <span-->
+<!--        >{{ licenseInfo?.expired || '-' }}-->
+<!--          <span class="color-danger"-->
+<!--                v-if="licenseInfo?.expired && fromNowDate(licenseInfo?.expired)"-->
+<!--          >（{{ fromNowDate(licenseInfo?.expired) }}）</span-->
+<!--          ></span-->
+<!--        >-->
       </div>
       <div class="flex">
         <span class="label">{{ $t('layout.about.edition.label') }}</span>
         <span>{{
-          user.showXpack()
-            ? $t('layout.about.edition.professional')
-            : $t('layout.about.edition.community')
-        }}</span>
+            user.showXpack()
+              ? $t('layout.about.edition.professional')
+              : $t('layout.about.edition.community')
+          }}</span>
       </div>
       <div class="flex">
         <span class="label">{{ $t('layout.about.version') }}</span
@@ -53,7 +54,8 @@
           v-hasPermission="new Role('ADMIN')"
         >
           <el-button class="border-primary mr-16"
-            >{{ $t('layout.about.update') }} License</el-button
+          >{{ $t('layout.about.update') }} License
+          </el-button
           >
         </el-upload>
       </div>
@@ -64,12 +66,13 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-// import licenseApi from '@/api/license'
-// import { fromNowDate } from '@/utils/time'
-import { Role } from '@/utils/permission/type'
+import {ref, computed, watch} from 'vue'
+import licenseApi from '@/api/system/license'
+//import {fromNowDate} from '@/utils/time'
+import {Role} from '@/utils/permission/type'
 import useStore from '@/stores'
-const { user, theme } = useStore()
+
+const {user, theme} = useStore()
 const isDefaultTheme = computed(() => {
   return theme.isDefaultTheme()
 })
@@ -98,38 +101,43 @@ const open = () => {
 const onChange = (file: any) => {
   const fd = new FormData()
   fd.append('license_file', file.raw)
-  // licenseApi.putLicense(fd, loading).then((res: any) => {
-  //   getLicenseInfo()
-  //   isUpdate.value = true
-  // })
-}
-function getLicenseInfo() {
-  // licenseApi.getLicense(loading).then((res: any) => {
-  //   licenseInfo.value = res.data?.license
-  // })
+  licenseApi.putLicense(fd, loading).then((res: any) => {
+    getLicenseInfo()
+    isUpdate.value = true
+  })
 }
 
-defineExpose({ open })
+function getLicenseInfo() {
+  licenseApi.getLicense(loading).then((res: any) => {
+    licenseInfo.value = res.data?.license
+  })
+}
+
+defineExpose({open})
 </script>
 <style lang="scss" scope>
 .about-dialog {
   padding: 0 0 24px 0;
   width: 620px;
   font-weight: 400;
+
   .el-dialog__header {
     background: var(--app-header-bg-color);
     margin-right: 0;
     height: 140px;
     box-sizing: border-box;
     border-radius: 4px 4px 0 0;
+
     &.show-close {
       padding-right: 0;
     }
   }
+
   .el-dialog__title {
     height: 140px;
     box-sizing: border-box;
   }
+
   .about-ui {
     margin: 0 auto;
     font-weight: 400;
@@ -144,6 +152,7 @@ defineExpose({ open })
       color: var(--app-text-color-secondary);
     }
   }
+
   &.dialog-custom-header {
     .el-dialog__header {
       background: var(--el-color-primary-light-9) !important;
diff --git a/ui/src/layout/layout-header/avatar/index.vue b/ui/src/layout/layout-header/avatar/index.vue
index 3cba3fd77..b3e36e5da 100644
--- a/ui/src/layout/layout-header/avatar/index.vue
+++ b/ui/src/layout/layout-header/avatar/index.vue
@@ -2,11 +2,11 @@
   <el-dropdown trigger="click" type="primary">
     <div class="flex-center cursor">
       <el-avatar :size="30">
-        <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+        <img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
       </el-avatar>
       <span class="ml-8 color-text-primary">{{ user.userInfo?.username }}</span>
       <el-icon class="el-icon--right">
-        <CaretBottom />
+        <CaretBottom/>
       </el-icon>
     </div>
 
@@ -15,7 +15,7 @@
         <div class="userInfo flex align-center">
           <div class="mr-12 flex align-center">
             <el-avatar :size="30">
-              <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+              <img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
             </el-avatar>
           </div>
           <div style="width: 90%">
@@ -23,7 +23,7 @@
             <template v-if="user.userInfo?.role && user.userInfo.role.length > 0">
               <el-tag size="small" class="default-tag">{{ user.userInfo?.role[0] }}</el-tag>
               <el-tag size="small" class="default-tag ml-4" v-if="user.userInfo?.role?.length > 1"
-                >+{{ user.userInfo?.role?.length - 1 }}
+              >+{{ user.userInfo?.role?.length - 1 }}
               </el-tag>
             </template>
           </div>
@@ -41,7 +41,7 @@
             <div class="flex-between w-full" style="line-height: 22px; padding: 12px 11px">
               <span> {{ $t('layout.language') }}</span>
               <el-icon>
-                <ArrowRight />
+                <ArrowRight/>
               </el-icon>
             </div>
 
@@ -55,14 +55,14 @@
                   class="flex-between"
                 >
                   <span :class="lang.value === user.userInfo?.language ? 'primary' : ''">{{
-                    lang.label
-                  }}</span>
+                      lang.label
+                    }}</span>
 
                   <el-icon
                     :class="lang.value === user.userInfo?.language ? 'primary' : ''"
                     v-if="lang.value === user.userInfo?.language"
                   >
-                    <Check />
+                    <Check/>
                   </el-icon>
                 </el-dropdown-item>
               </el-dropdown-menu>
@@ -86,24 +86,24 @@
       </el-dropdown-menu>
     </template>
   </el-dropdown>
-  <APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef" />
+  <APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef"/>
   <ResetPassword ref="resetPasswordRef"></ResetPassword>
-  <!-- <AboutDialog ref="AboutDialogRef"></AboutDialog>
-  -->
+  <AboutDialog ref="AboutDialogRef"></AboutDialog>
+
   <!-- <UserPwdDialog ref="UserPwdDialogRef" /> -->
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import {ref, onMounted} from 'vue'
 import useStore from '@/stores'
-import { useRouter } from 'vue-router'
+import {useRouter} from 'vue-router'
 import ResetPassword from './ResetPassword.vue'
-// import AboutDialog from './AboutDialog.vue'
+import AboutDialog from './AboutDialog.vue'
 // import UserPwdDialog from '@/views/user-manage/component/UserPwdDialog.vue'
 import APIKeyDialog from './APIKeyDialog.vue'
-import { ComplexPermission } from '@/utils/permission/type'
-import { langList } from '@/locales/index'
+import {ComplexPermission} from '@/utils/permission/type'
+import {langList} from '@/locales/index'
 
-const { user, login } = useStore()
+const {user, login} = useStore()
 const router = useRouter()
 
 const AboutDialogRef = ref()
@@ -129,7 +129,7 @@ const openResetPassword = () => {
 
 const logout = () => {
   login.logout().then(() => {
-    router.push({ name: 'login' })
+    router.push({name: 'login'})
   })
 }