diff --git a/ui/src/layout/app-main/index.vue b/ui/src/layout/app-main/index.vue
new file mode 100644
index 000000000..1598772f2
--- /dev/null
+++ b/ui/src/layout/app-main/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <transition appear name="fade-transform" mode="out-in">
+      <keep-alive :include="cachedViews">
+        <component :is="Component" :key="route.path" />
+      </keep-alive>
+    </transition>
+  </router-view>
+</template>
+
+<script setup lang="ts">
+import { ref, onBeforeUpdate } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const cachedViews: any = ref([])
+onBeforeUpdate(() => {
+  const { name, meta } = route
+  if (name && !cachedViews.value.includes(name)) {
+    cachedViews.value.push(name)
+  }
+})
+</script>
diff --git a/ui/src/layout/components/breadcrumb/index.vue b/ui/src/layout/components/breadcrumb/index.vue
new file mode 100644
index 000000000..9140e8209
--- /dev/null
+++ b/ui/src/layout/components/breadcrumb/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="breadcrumb ml-4 mt-4 mb-12 flex">
+    <back-button :to="activeMenu" class="mt-4"></back-button>
+    <el-dropdown
+      placement="bottom"
+      trigger="click"
+      @command="changeMenu"
+      class="w-full"
+      style="display: block"
+    >
+      <div class="breadcrumb-hover flex-between cursor">
+        <div class="flex align-center">
+          <AppAvatar
+            v-if="isApplication && isAppIcon(current?.icon)"
+            shape="square"
+            :size="24"
+            style="background: none"
+            class="mr-8"
+          >
+            <img :src="current?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="isApplication"
+            :name="current?.name"
+            pinyinColor
+            shape="square"
+            class="mr-8"
+            :size="24"
+          />
+
+          <AppAvatar
+            v-else-if="isDataset && current?.type === '1'"
+            class="mr-8 avatar-purple"
+            shape="square"
+            :size="24"
+          >
+            <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="isDataset && current?.type === '2'"
+            class="mr-8 avatar-purple"
+            shape="square"
+            :size="24"
+            style="background: none"
+          >
+            <img src="@/assets/logo_lark.svg" style="width: 100%" alt="" />
+          </AppAvatar>
+          <AppAvatar v-else class="mr-8 avatar-blue" shape="square" :size="24">
+            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+          </AppAvatar>
+          <div class="ellipsis" :title="current?.name">{{ current?.name }}</div>
+        </div>
+
+        <el-button text>
+          <el-icon><CaretBottom /></el-icon>
+        </el-button>
+      </div>
+      <template #dropdown>
+        <el-scrollbar>
+          <div style="max-height: 400px">
+            <el-dropdown-menu>
+              <template v-for="(item, index) in list" :key="index">
+                <div :class="item.id === id ? 'dropdown-active' : ''">
+                  <el-dropdown-item :command="item.id">
+                    <div class="flex align-center">
+                      <AppAvatar
+                        v-if="isApplication && isAppIcon(item?.icon)"
+                        shape="square"
+                        :size="24"
+                        style="background: none"
+                        class="mr-8"
+                      >
+                        <img :src="item?.icon" alt="" />
+                      </AppAvatar>
+
+                      <AppAvatar
+                        v-else-if="isApplication"
+                        :name="item.name"
+                        pinyinColor
+                        class="mr-12"
+                        shape="square"
+                        :size="24"
+                      />
+                      <AppAvatar
+                        v-else-if="isDataset && item.type === '1'"
+                        class="mr-12 avatar-purple"
+                        shape="square"
+                        :size="24"
+                      >
+                        <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                      </AppAvatar>
+                      <AppAvatar
+                        v-else-if="isDataset && item.type === '2'"
+                        class="mr-8 avatar-purple"
+                        shape="square"
+                        :size="24"
+                        style="background: none"
+                      >
+                        <img src="@/assets/logo_lark.svg" style="width: 100%" alt="" />
+                      </AppAvatar>
+                      <AppAvatar v-else class="mr-12 avatar-blue" shape="square" :size="24">
+                        <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                      </AppAvatar>
+                      <span class="ellipsis" :title="item?.name"> {{ item?.name }}</span>
+                    </div>
+                  </el-dropdown-item>
+                </div>
+              </template>
+            </el-dropdown-menu>
+          </div>
+        </el-scrollbar>
+        <div class="breadcrumb__footer border-t" style="padding: 8px 11px; min-width: 200px">
+          <template v-if="isApplication">
+            <div class="w-full text-left cursor" @click="openCreateDialog">
+              <el-button link>
+                <el-icon class="mr-4"><Plus /></el-icon>
+                {{ $t('views.application.createApplication') }}
+              </el-button>
+            </div>
+          </template>
+          <template v-else-if="isDataset">
+            <div class="w-full text-left cursor" @click="openCreateDialog">
+              <el-button link>
+                <el-icon class="mr-4"><Plus /></el-icon> {{ $t('views.dataset.createDataset') }}
+              </el-button>
+            </div>
+          </template>
+        </div>
+      </template>
+    </el-dropdown>
+  </div>
+  <CreateApplicationDialog ref="CreateApplicationDialogRef" @refresh="refresh" />
+  <CreateDatasetDialog ref="CreateDatasetDialogRef" @refresh="refresh" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router'
+import CreateApplicationDialog from '@/views/application/component/CreateApplicationDialog.vue'
+import CreateDatasetDialog from '@/views/dataset/component/CreateDatasetDialog.vue'
+import { isAppIcon, isWorkFlow } from '@/utils/application'
+import useStore from '@/stores'
+const { common, dataset, application } = useStore()
+const route = useRoute()
+const router = useRouter()
+const {
+  meta: { activeMenu },
+  params: { id }
+} = route as any
+
+onBeforeRouteLeave((to, from) => {
+  common.saveBreadcrumb(null)
+})
+
+const CreateDatasetDialogRef = ref()
+const CreateApplicationDialogRef = ref()
+const list = ref<any[]>([])
+const loading = ref(false)
+
+const breadcrumbData = computed(() => common.breadcrumb)
+
+const current = computed(() => {
+  return list.value?.filter((v) => v.id === id)?.[0]
+})
+
+const isApplication = computed(() => {
+  return activeMenu.includes('application')
+})
+const isDataset = computed(() => {
+  return activeMenu.includes('dataset')
+})
+
+function openCreateDialog() {
+  if (isDataset.value) {
+    CreateDatasetDialogRef.value.open()
+  } else if (isApplication.value) {
+    CreateApplicationDialogRef.value.open()
+  }
+}
+
+function changeMenu(id: string) {
+  const lastMatched = route.matched[route.matched.length - 1]
+  if (lastMatched) {
+    if (isDataset.value) {
+      router.push({ name: lastMatched.name, params: { id: id } })
+    } else if (isApplication.value) {
+      const type = list.value?.filter((v) => v.id === id)?.[0]?.type
+      if (
+        isWorkFlow(type) &&
+        (lastMatched.name === 'AppSetting' || lastMatched.name === 'AppHitTest')
+      ) {
+        router.push({ path: `/application/${id}/${type}/overview` })
+      } else {
+        router.push({
+          name: lastMatched.name,
+          params: { id: id, type: type }
+        })
+      }
+    }
+  }
+}
+
+function getDataset() {
+  loading.value = true
+  dataset
+    .asyncGetAllDataset()
+    .then((res: any) => {
+      list.value = res.data
+      common.saveBreadcrumb(list.value)
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+function getApplication() {
+  loading.value = true
+  application
+    .asyncGetAllApplication()
+    .then((res: any) => {
+      list.value = res.data
+      common.saveBreadcrumb(list.value)
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+function refresh() {
+  common.saveBreadcrumb(null)
+}
+onMounted(() => {
+  if (!breadcrumbData.value) {
+    if (isDataset.value) {
+      getDataset()
+    } else if (isApplication.value) {
+      getApplication()
+    }
+  } else {
+    list.value = breadcrumbData.value
+  }
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.dropdown-active) {
+  background-color: var(--el-dropdown-menuItem-hover-fill);
+  .el-dropdown-menu__item {
+    color: var(--el-dropdown-menuItem-hover-color);
+  }
+}
+.breadcrumb {
+  .breadcrumb-hover {
+    padding: 4px;
+    border-radius: 4px;
+    &:hover {
+      background: var(--el-color-primary-light-9);
+      color: var(--el-color-primary);
+    }
+  }
+  &__footer {
+    &:hover {
+      background-color: var(--app-text-color-light-1);
+    }
+  }
+}
+</style>
diff --git a/ui/src/layout/components/index.ts b/ui/src/layout/components/index.ts
new file mode 100644
index 000000000..c6d38f7c4
--- /dev/null
+++ b/ui/src/layout/components/index.ts
@@ -0,0 +1,4 @@
+export { default as Sidebar } from './sidebar/index.vue'
+export { default as AppMain } from './app-main/index.vue'
+export { default as TopBar } from './top-bar/index.vue'
+export { default as AppHeader } from './app-header/index.vue'
diff --git a/ui/src/layout/components/sidebar/SidebarItem.vue b/ui/src/layout/components/sidebar/SidebarItem.vue
new file mode 100644
index 000000000..f89feeda2
--- /dev/null
+++ b/ui/src/layout/components/sidebar/SidebarItem.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="(!menu.meta || !menu.meta.hidden) && showMenu()" class="sidebar-item">
+    <el-sub-menu
+      v-if="menu?.children && menu?.children.length > 0"
+      :index="menu.path"
+      popper-class="sidebar-container-popper"
+    >
+      <template #title>
+        <el-icon>
+          <AppIcon v-if="menu.meta && menu.meta.icon" :iconName="menuIcon" class="sidebar-icon" />
+        </el-icon>
+        <span>{{ $t(menu.meta?.title as string) }}</span>
+      </template>
+      <sidebar-item
+        v-hasPermission="child.meta?.permission"
+        v-for="(child, index) in menu?.children"
+        :key="index"
+        :menu="child"
+        :activeMenu="activeMenu"
+      >
+      </sidebar-item>
+    </el-sub-menu>
+    <el-menu-item
+      v-else
+      ref="subMenu"
+      :index="menu.path"
+      popper-class="sidebar-popper"
+      @click="clickHandle(menu)"
+    >
+      <template #title>
+        <AppIcon v-if="menu.meta && menu.meta.icon" :iconName="menuIcon" class="sidebar-icon" />
+        <span v-if="menu.meta && menu.meta.title">{{ $t(menu.meta?.title as string) }}</span>
+      </template>
+    </el-menu-item>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter, useRoute, type RouteRecordRaw } from 'vue-router'
+import { isWorkFlow } from '@/utils/application'
+const props = defineProps<{
+  menu: RouteRecordRaw
+  activeMenu: any
+}>()
+
+const router = useRouter()
+const route = useRoute()
+const {
+  params: { id, type }
+} = route as any
+
+function showMenu() {
+  if (isWorkFlow(type)) {
+    return props.menu.name !== 'AppHitTest'
+  } else {
+    return true
+  }
+}
+
+function clickHandle(item?: any) {
+  if (isWorkFlow(type) && item?.name === 'AppSetting') {
+    router.push({ path: `/application/${id}/workflow` })
+  }
+}
+const menuIcon = computed(() => {
+  if (props.activeMenu === props.menu.path) {
+    return props.menu.meta?.iconActive || props.menu?.meta?.icon
+  } else {
+    return props.menu?.meta?.icon
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.sidebar-item {
+  .sidebar-icon {
+    font-size: 20px;
+    margin-top: -2px;
+  }
+  .el-menu-item {
+    padding: 13px 12px 13px 16px !important;
+    font-weight: 500;
+    border-radius: 4px;
+    &:hover {
+      background: none;
+      color: var(--el-color-primary);
+    }
+  }
+  :deep(.el-sub-menu__title) {
+    padding: 13px 12px 13px 16px !important;
+    &:hover {
+      background: none;
+      color: var(--el-color-primary);
+    }
+  }
+  .el-sub-menu {
+    .el-menu-item {
+      padding-left: 43px !important;
+    }
+  }
+  .el-menu-item.is-active {
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+  }
+}
+</style>
diff --git a/ui/src/layout/components/sidebar/index.vue b/ui/src/layout/components/sidebar/index.vue
new file mode 100644
index 000000000..4fc452395
--- /dev/null
+++ b/ui/src/layout/components/sidebar/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="sidebar p-8">
+    <div v-if="showBreadcrumb">
+      <AppBreadcrumb />
+    </div>
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu :default-active="activeMenu" router>
+        <sidebar-item
+          v-hasPermission="menu.meta?.permission"
+          v-for="(menu, index) in subMenuList"
+          :key="index"
+          :menu="menu"
+          :activeMenu="activeMenu"
+        >
+        </sidebar-item>
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { getChildRouteListByPathAndName } from '@/router/index'
+import SidebarItem from './SidebarItem.vue'
+import AppBreadcrumb from './../breadcrumb/index.vue'
+
+const route = useRoute()
+
+const showBreadcrumb = computed(() => {
+  const { meta } = route as any
+  return (
+    meta?.activeMenu &&
+    (meta?.activeMenu.includes('dataset') || meta?.activeMenu.includes('application'))
+  )
+})
+
+const subMenuList = computed(() => {
+  const { meta } = route
+  return getChildRouteListByPathAndName(meta.parentPath, meta.parentName)
+})
+
+const activeMenu = computed(() => {
+  const { path, meta } = route
+  return meta.active || path
+})
+</script>
+
+<style lang="scss">
+.sidebar {
+  .el-menu {
+    height: 100%;
+    border: none;
+  }
+}
+</style>
diff --git a/ui/src/layout/hooks/useResize.ts b/ui/src/layout/hooks/useResize.ts
new file mode 100644
index 000000000..3b0e46577
--- /dev/null
+++ b/ui/src/layout/hooks/useResize.ts
@@ -0,0 +1,38 @@
+import { nextTick, onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import useStore from '@/stores'
+import { DeviceType } from '@/enums/common'
+/** 参考 Bootstrap 的响应式设计 WIDTH = 768 */
+const WIDTH = 768
+
+/** 根据大小变化重新布局 */
+export default () => {
+  const { common } = useStore()
+  const _isMobile = () => {
+    const rect = document.body?.getBoundingClientRect()
+    return rect.width - 1 < WIDTH
+  }
+
+  const _resizeHandler = () => {
+    if (!document.hidden) {
+      const isMobile = _isMobile()
+      common.toggleDevice(isMobile ? DeviceType.Mobile : DeviceType.Desktop)
+    }
+  }
+
+  onBeforeMount(() => {
+    window.addEventListener('resize', _resizeHandler)
+  })
+
+  onMounted(() => {
+    nextTick(() => {
+      if (_isMobile()) {
+        common.toggleDevice(DeviceType.Mobile)
+      }
+    })
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', _resizeHandler)
+  })
+}
diff --git a/ui/src/layout/layout-header/UserHeader.vue b/ui/src/layout/layout-header/UserHeader.vue
new file mode 100644
index 000000000..b1ebb5328
--- /dev/null
+++ b/ui/src/layout/layout-header/UserHeader.vue
@@ -0,0 +1,23 @@
+·
+<template>
+  <div class="app-top-bar-container border-b flex-center">
+    <div class="logo">
+      <LogoFull />
+    </div>
+    <div class="flex-between">
+      <div></div>
+      <TopMenu></TopMenu>
+      <TopUrlMenu></TopUrlMenu>
+    </div>
+    <Avatar></Avatar>
+  </div>
+</template>
+<script setup lang="ts">
+import TopMenu from './top-menu/index.vue'
+import Avatar from './avatar/index.vue'
+import TopUrlMenu from './top-url-menu/index.vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+</script>
+<style lang="scss"></style>
diff --git a/ui/src/layout/layout-header/avatar/APIKeyDialog.vue b/ui/src/layout/layout-header/avatar/APIKeyDialog.vue
new file mode 100644
index 000000000..a03337792
--- /dev/null
+++ b/ui/src/layout/layout-header/avatar/APIKeyDialog.vue
@@ -0,0 +1,164 @@
+<template>
+  <el-dialog
+    :title="$t('layout.apiKey')"
+    v-model="dialogVisible"
+    width="800"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-card shadow="never" class="layout-bg mb-16">
+      <el-text type="info" class="color-secondary">{{ $t('layout.apiServiceAddress') }}</el-text>
+      <p style="margin-top: 10px">
+        <span class="vertical-middle lighter break-all">
+          {{ apiUrl }}
+        </span>
+        <el-button type="primary" text @click="copyClick(apiUrl)">
+          <AppIcon iconName="app-copy"></AppIcon>
+        </el-button>
+      </p>
+    </el-card>
+
+    <el-button type="primary" class="mb-16" @click="createApiKey">
+      {{ $t('common.create') }}
+    </el-button>
+    <el-table :data="apiKey" class="mb-16" :loading="loading">
+      <el-table-column prop="secret_key" label="API Key">
+        <template #default="{ row }">
+          <span class="vertical-middle lighter break-all">
+            {{ row.secret_key }}
+          </span>
+          <el-button type="primary" text @click="copyClick(row.secret_key)">
+            <AppIcon iconName="app-copy"></AppIcon>
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('common.status.label')" width="80">
+        <template #default="{ row }">
+          <div @click.stop>
+            <el-switch size="small" v-model="row.is_active" @change="changeState($event, row)" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" :label="$t('common.createDate')" width="170">
+        <template #default="{ row }">
+          {{ datetimeFormat(row.create_time) }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('common.setting')" align="left" width="80">
+        <template #default="{ row }">
+          <span class="mr-4">
+            <el-tooltip effect="dark" :content="$t('common.setting')" placement="top">
+              <el-button type="primary" text @click.stop="settingApiKey(row)">
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </el-tooltip>
+          </span>
+          <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
+            <el-button type="primary" text @click="deleteApiKey(row)">
+              <el-icon>
+                <Delete />
+              </el-icon>
+            </el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+    <SettingAPIKeyDialog ref="SettingAPIKeyDialogRef" @refresh="refresh" />
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { copyClick } from '@/utils/clipboard'
+import systemKeyApi from '@/api/system-api-key'
+import { datetimeFormat } from '@/utils/time'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { t } from '@/locales'
+import SettingAPIKeyDialog from '@/views/application-overview/component/SettingAPIKeyDialog.vue'
+
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const props = defineProps({
+  userId: {
+    type: String,
+    default: ''
+  }
+})
+const emit = defineEmits(['addData'])
+
+const apiUrl = window.location.origin + '/doc/'
+const SettingAPIKeyDialogRef = ref()
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+const apiKey = ref<any>(null)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    apiKey.value = null
+  }
+})
+
+function settingApiKey(row: any) {
+  SettingAPIKeyDialogRef.value.open(row, 'USER')
+}
+
+function deleteApiKey(row: any) {
+  MsgConfirm(
+    // @ts-ignore
+    `${t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm1')}: ${row.secret_key}?`,
+    t(t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm2')),
+    {
+      confirmButtonText: t('common.confirm'),
+      cancelButtonText: t('common.cancel'),
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      systemKeyApi.delAPIKey(row.id, loading).then(() => {
+        MsgSuccess(t('common.deleteSuccess'))
+        getApiKeyList()
+      })
+    })
+    .catch(() => {})
+}
+
+function changeState(bool: Boolean, row: any) {
+  const obj = {
+    is_active: bool
+  }
+  const str = bool
+    ? t('views.applicationOverview.appInfo.APIKeyDialog.enabledSuccess')
+    : t('views.applicationOverview.appInfo.APIKeyDialog.disabledSuccess')
+  systemKeyApi.putAPIKey(row.id, obj, loading).then((res) => {
+    MsgSuccess(str)
+    getApiKeyList()
+  })
+}
+
+function createApiKey() {
+  systemKeyApi.postAPIKey(loading).then((res) => {
+    getApiKeyList()
+  })
+}
+
+const open = () => {
+  getApiKeyList()
+  dialogVisible.value = true
+}
+
+function getApiKeyList() {
+  systemKeyApi.getAPIKey().then((res) => {
+    apiKey.value = res.data
+  })
+}
+
+function refresh() {
+  getApiKeyList()
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/ui/src/layout/layout-header/avatar/AboutDialog.vue b/ui/src/layout/layout-header/avatar/AboutDialog.vue
new file mode 100644
index 000000000..59ecfc076
--- /dev/null
+++ b/ui/src/layout/layout-header/avatar/AboutDialog.vue
@@ -0,0 +1,143 @@
+<template>
+  <el-dialog
+    v-model="aboutDialogVisible"
+    class="about-dialog border-r-4"
+    :class="!isDefaultTheme ? 'dialog-custom-header' : ''"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div class="logo flex-center" :id="titleId" :class="titleClass">
+        <LogoFull height="59px" />
+      </div>
+    </template>
+    <div class="about-ui" v-loading="loading">
+      <div class="flex">
+        <span class="label">{{ $t('layout.about.authorize') }}</span><span>{{ licenseInfo?.corporation || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="label">{{ $t('layout.about.expiredTime') }}</span>
+        <span
+          >{{ licenseInfo?.expired || '-' }}
+          <span class="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>
+      </div>
+      <div class="flex">
+        <span class="label">{{ $t('layout.about.version') }}</span><span>{{ user.version }}</span>
+      </div>
+      <div class="flex">
+        <span class="label">{{ $t('layout.about.serialNo') }}</span><span>{{ licenseInfo?.serialNo || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="label">{{ $t('layout.about.remark') }}</span><span>{{ licenseInfo?.remark || '-' }}</span>
+      </div>
+      <div class="mt-16 flex align-center" v-if="user.showXpack()">
+        <el-upload
+          ref="uploadRef"
+          action="#"
+          :auto-upload="false"
+          :show-file-list="false"
+          :on-change="onChange"
+          v-hasPermission="new Role('ADMIN')"
+        >
+          <el-button class="border-primary mr-16">{{ $t('layout.about.update') }} License</el-button>
+        </el-upload>
+      </div>
+    </div>
+    <div class="border-t text-center mt-16 p-16 pb-0">
+      <el-text type="info">{{ $t('layout.copyright') }}</el-text>
+    </div>
+  </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 useStore from '@/stores'
+const { user } = useStore()
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+
+const aboutDialogVisible = ref(false)
+const loading = ref(false)
+const licenseInfo = ref<any>(null)
+const isUpdate = ref(false)
+
+watch(aboutDialogVisible, (bool) => {
+  if (!bool) {
+    if (isUpdate.value) {
+      window.location.reload()
+    }
+    isUpdate.value = false
+  }
+})
+const open = () => {
+  if (user.showXpack()) {
+    getLicenseInfo()
+  }
+
+  aboutDialogVisible.value = true
+}
+
+const onChange = (file: any) => {
+  let 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
+  })
+}
+
+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;
+    font-size: 14px;
+    margin-top: 24px;
+    line-height: 36px;
+    padding: 0 40px;
+
+    .label {
+      width: 150px;
+      text-align: left;
+      color: var(--app-text-color-secondary);
+    }
+  }
+  &.dialog-custom-header {
+    .el-dialog__header {
+      background: var(--el-color-primary-light-9) !important;
+    }
+  }
+}
+</style>
diff --git a/ui/src/layout/layout-header/avatar/ResetPassword.vue b/ui/src/layout/layout-header/avatar/ResetPassword.vue
new file mode 100644
index 000000000..35f538f1b
--- /dev/null
+++ b/ui/src/layout/layout-header/avatar/ResetPassword.vue
@@ -0,0 +1,216 @@
+<template>
+  <el-dialog
+    v-model="resetPasswordDialog"
+    :title="$t('views.login.resetPassword')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      class="reset-password-form"
+      ref="resetPasswordFormRef1"
+      :model="resetPasswordForm"
+      :rules="rules1"
+    >
+      <p class="mb-8 lighter">{{ $t('views.login.newPassword') }}</p>
+      <el-form-item prop="password" style="margin-bottom: 8px">
+        <el-input
+          type="password"
+          class="input-item"
+          v-model="resetPasswordForm.password"
+          :placeholder="$t('views.login.enterPassword')"
+          show-password
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="re_password">
+        <el-input
+          type="password"
+          class="input-item"
+          v-model="resetPasswordForm.re_password"
+          :placeholder="$t('views.user.userForm.form.re_password.placeholder')"
+          show-password
+        >
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <el-form
+      class="reset-password-form mb-24"
+      ref="resetPasswordFormRef2"
+      :model="resetPasswordForm"
+      :rules="rules2"
+    >
+      <p class="mb-8 lighter">{{ $t('views.login.useEmail') }}</p>
+      <el-form-item style="margin-bottom: 8px">
+        <el-input
+          class="input-item"
+          :disabled="true"
+          v-bind:modelValue="user.userInfo?.email"
+          :placeholder="t('views.user.userForm.form.email.placeholder')"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="code">
+        <div class="flex-between w-full">
+          <el-input
+            class="code-input"
+            v-model="resetPasswordForm.code"
+            :placeholder="$t('views.login.verificationCode.placeholder')"
+          >
+          </el-input>
+          <el-button
+            :disabled="isDisabled"
+            class="send-email-button ml-8"
+            @click="sendEmail"
+            :loading="loading"
+          >
+            {{
+              isDisabled
+                ? `${$t('views.login.verificationCode.resend')}（${time}s）`
+                : $t('views.login.verificationCode.getVerificationCode')
+            }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetPasswordDialog = false">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="resetPassword">
+          {{ $t('common.save') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { ResetCurrentUserPasswordRequest } from '@/api/type/user'
+import type { FormInstance, FormRules } from 'element-plus'
+import { MsgSuccess } from '@/utils/message'
+import UserApi from '@/api/user'
+import useStore from '@/stores'
+import { useRouter } from 'vue-router'
+import { t } from '@/locales'
+const router = useRouter()
+const { user } = useStore()
+
+const resetPasswordDialog = ref<boolean>(false)
+
+const resetPasswordForm = ref<ResetCurrentUserPasswordRequest>({
+  code: '',
+  password: '',
+  re_password: ''
+})
+
+const resetPasswordFormRef1 = ref<FormInstance>()
+const resetPasswordFormRef2 = ref<FormInstance>()
+
+const loading = ref<boolean>(false)
+const isDisabled = ref<boolean>(false)
+const time = ref<number>(60)
+
+const rules1 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
+  password: [
+    {
+      required: true,
+      message: t('views.login.enterPassword'),
+      trigger: 'blur'
+    },
+    {
+      min: 6,
+      max: 20,
+      message: t('views.user.userForm.form.password.lengthMessage'),
+      trigger: 'blur'
+    }
+  ],
+  re_password: [
+    {
+      required: true,
+      message: t('views.user.userForm.form.re_password.requiredMessage'),
+      trigger: 'blur'
+    },
+    {
+      min: 6,
+      max: 20,
+      message: t('views.user.userForm.form.password.lengthMessage'),
+      trigger: 'blur'
+    },
+    {
+      validator: (rule, value, callback) => {
+        if (resetPasswordForm.value.password != resetPasswordForm.value.re_password) {
+          callback(new Error(t('views.user.userForm.form.re_password.validatorMessage')))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ]
+})
+const rules2 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
+  // @ts-ignore
+  code: [
+    {
+      required: true,
+      message: t('views.login.verificationCode.placeholder'),
+      trigger: 'blur'
+    }
+  ]
+})
+/**
+ * 发送验证码
+ */
+const sendEmail = () => {
+  resetPasswordFormRef1.value?.validate().then(() => {
+    UserApi.sendEmailToCurrent(loading).then(() => {
+      MsgSuccess(t('views.login.verificationCode.successMessage'))
+      isDisabled.value = true
+      handleTimeChange()
+    })
+  })
+}
+
+const handleTimeChange = () => {
+  if (time.value <= 0) {
+    isDisabled.value = false
+    time.value = 60
+  } else {
+    setTimeout(() => {
+      time.value--
+      handleTimeChange()
+    }, 1000)
+  }
+}
+
+const open = () => {
+  resetPasswordForm.value = {
+    code: '',
+    password: '',
+    re_password: ''
+  }
+  resetPasswordDialog.value = true
+  resetPasswordFormRef1.value?.resetFields()
+  resetPasswordFormRef2.value?.resetFields()
+}
+const resetPassword = () => {
+  resetPasswordFormRef1.value?.validate().then(() => {
+    resetPasswordFormRef2.value
+      ?.validate()
+      .then(() => {
+        return UserApi.resetCurrentUserPassword(resetPasswordForm.value)
+      })
+      .then(() => {
+        return user.logout()
+      })
+      .then(() => {
+        router.push({ name: 'login' })
+      })
+  })
+}
+const close = () => {
+  resetPasswordDialog.value = false
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scope></style>
diff --git a/ui/src/layout/layout-header/avatar/index.vue b/ui/src/layout/layout-header/avatar/index.vue
new file mode 100644
index 000000000..ac1fcbb9e
--- /dev/null
+++ b/ui/src/layout/layout-header/avatar/index.vue
@@ -0,0 +1,140 @@
+<template>
+  <el-dropdown trigger="click" type="primary">
+    <div class="flex-center cursor">
+      <AppAvatar>
+        <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+      </AppAvatar>
+      <span class="ml-8">{{ user.userInfo?.username }}</span>
+      <el-icon class="el-icon--right">
+        <CaretBottom />
+      </el-icon>
+    </div>
+
+    <template #dropdown>
+      <el-dropdown-menu class="avatar-dropdown">
+        <div class="userInfo">
+          <p class="bold mb-4" style="font-size: 14px">{{ user.userInfo?.username }}</p>
+          <p>
+            <el-text type="info">
+              {{ user.userInfo?.email }}
+            </el-text>
+          </p>
+        </div>
+        <el-dropdown-item class="border-t p-8" @click="openResetPassword">
+          {{ $t('views.login.resetPassword') }}
+        </el-dropdown-item>
+        <div v-hasPermission="new ComplexPermission([], ['x-pack'], 'OR')">
+          <el-dropdown-item class="border-t p-8" @click="openAPIKeyDialog">
+            {{ $t('layout.apiKey') }}
+          </el-dropdown-item>
+        </div>
+        <el-dropdown-item class="border-t" style="padding: 0" @click.stop>
+          <el-dropdown class="w-full" trigger="hover" placement="left-start">
+            <div class="flex-between w-full" style="line-height: 22px; padding: 12px 11px">
+              <span> {{ $t('layout.language') }}</span>
+              <el-icon><ArrowRight /></el-icon>
+            </div>
+
+            <template #dropdown>
+              <el-dropdown-menu style="width: 180px">
+                <el-dropdown-item
+                  v-for="(lang, index) in langList"
+                  :key="index"
+                  :value="lang.value"
+                  @click="changeLang(lang.value)"
+                  class="flex-between"
+                >
+                  <span :class="lang.value === user.userInfo?.language ? 'primary' : ''">{{
+                    lang.label
+                  }}</span>
+
+                  <el-icon
+                    :class="lang.value === user.userInfo?.language ? 'primary' : ''"
+                    v-if="lang.value === user.userInfo?.language"
+                  >
+                    <Check />
+                  </el-icon>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </el-dropdown-item>
+        <el-dropdown-item class="border-t" @click="openAbout">
+          {{ $t('layout.about.title') }}
+        </el-dropdown-item>
+
+        <el-dropdown-item class="border-t" @click="logout">
+          {{ $t('layout.logout') }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+  <ResetPassword ref="resetPasswordRef"></ResetPassword>
+  <AboutDialog ref="AboutDialogRef"></AboutDialog>
+  <APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef" />
+  <UserPwdDialog ref="UserPwdDialogRef" />
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import useStore from '@/stores'
+import { useRouter } from 'vue-router'
+import ResetPassword from './ResetPassword.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 { useLocale } from '@/locales/useLocale'
+const { user } = useStore()
+const router = useRouter()
+
+const UserPwdDialogRef = ref()
+const AboutDialogRef = ref()
+const APIKeyDialogRef = ref()
+const resetPasswordRef = ref<InstanceType<typeof ResetPassword>>()
+
+// const { changeLocale } = useLocale()
+const changeLang = (lang: string) => {
+  user.postUserLanguage(lang)
+  // changeLocale(lang)
+}
+const openAbout = () => {
+  AboutDialogRef.value?.open()
+}
+
+function openAPIKeyDialog() {
+  APIKeyDialogRef.value.open()
+}
+
+const openResetPassword = () => {
+  resetPasswordRef.value?.open()
+}
+
+const logout = () => {
+  user.logout().then(() => {
+    router.push({ name: 'login' })
+  })
+}
+
+onMounted(() => {
+  if (user.userInfo?.is_edit_password) {
+    UserPwdDialogRef.value.open(user.userInfo)
+  }
+})
+</script>
+<style lang="scss" scoped>
+.avatar-dropdown {
+  min-width: 210px;
+
+  .userInfo {
+    padding: 12px 11px;
+  }
+
+  :deep(.el-dropdown-menu__item) {
+    padding: 12px 11px;
+    &:hover {
+      background: var(--app-text-color-light-1);
+    }
+  }
+}
+</style>
diff --git a/ui/src/layout/layout-header/top-menu/MenuItem.vue b/ui/src/layout/layout-header/top-menu/MenuItem.vue
new file mode 100644
index 000000000..946d1e544
--- /dev/null
+++ b/ui/src/layout/layout-header/top-menu/MenuItem.vue
@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="menu-item-container flex-center h-full"
+    :class="isActive ? 'active' : ''"
+    @click="router.push({ name: menu.name })"
+  >
+    <!-- <div class="icon">
+      <AppIcon :iconName="menu.meta ? (menu.meta.icon as string) : '404'" />
+    </div> -->
+    <div class="title">
+      {{ $t(menu.meta?.title as string) }}
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useRouter, useRoute, type RouteRecordRaw } from 'vue-router'
+import { computed } from 'vue'
+const router = useRouter()
+const route = useRoute()
+
+const props = defineProps<{
+  menu: RouteRecordRaw
+}>()
+
+const isActive = computed(() => {
+  const { name, path, meta } = route
+  return (name == props.menu.name && path == props.menu.path) || meta?.activeMenu == props.menu.path
+})
+</script>
+<style lang="scss" scoped>
+.menu-item-container {
+  margin-right: 28px;
+  cursor: pointer;
+  font-size: 16px;
+  position: relative;
+
+  .icon {
+    font-size: 15px;
+    margin-right: 5px;
+    margin-top: 2px;
+  }
+
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
+
+.active {
+  color: var(--el-color-primary);
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    content: '';
+    background-color: var(--el-color-primary-light-9);
+    border-bottom: 3px solid var(--el-color-primary);
+  }
+}
+</style>
diff --git a/ui/src/layout/layout-header/top-menu/index.vue b/ui/src/layout/layout-header/top-menu/index.vue
new file mode 100644
index 000000000..b8b7390ed
--- /dev/null
+++ b/ui/src/layout/layout-header/top-menu/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="top-menu-container flex align-center h-full">
+    <MenuItem
+      :menu="menu"
+      v-hasPermission="menu.meta?.permission"
+      v-for="(menu, index) in topMenuList"
+      :key="index"
+    >
+    </MenuItem>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getChildRouteListByPathAndName } from '@/router/index'
+import MenuItem from './MenuItem.vue'
+
+const topMenuList = computed(() => {
+  return getChildRouteListByPathAndName('/', 'home')
+})
+</script>
+<style lang="scss" scope>
+
+</style>
diff --git a/ui/src/layout/layout-header/top-url-menu/index.vue b/ui/src/layout/layout-header/top-url-menu/index.vue
new file mode 100644
index 000000000..1981775d9
--- /dev/null
+++ b/ui/src/layout/layout-header/top-url-menu/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-tooltip
+    effect="dark"
+    :content="$t('layout.github')"
+    placement="top"
+    v-if="user.themeInfo?.showProject"
+  >
+    <AppIcon
+      iconName="app-github"
+      class="cursor color-secondary mr-8 ml-8"
+      style="font-size: 20px"
+      @click="toUrl(user.themeInfo?.projectUrl)"
+    ></AppIcon>
+  </el-tooltip>
+  <el-tooltip
+    effect="dark"
+    :content="$t('layout.wiki')"
+    placement="top"
+    v-if="user.themeInfo?.showUserManual"
+  >
+    <AppIcon
+      iconName="app-reading"
+      class="cursor color-secondary mr-8 ml-8"
+      style="font-size: 20px"
+      @click="toUrl(user.themeInfo?.userManualUrl)"
+    ></AppIcon>
+  </el-tooltip>
+  <el-tooltip
+    effect="dark"
+    :content="$t('layout.forum')"
+    placement="top"
+    v-if="user.themeInfo?.showForum"
+  >
+    <AppIcon
+      iconName="app-help"
+      class="cursor color-secondary mr-16 ml-8"
+      style="font-size: 20px"
+      @click="toUrl(user.themeInfo?.forumUrl)"
+    ></AppIcon>
+  </el-tooltip>
+</template>
+<script setup lang="ts">
+import useStore from '@/stores'
+const { user } = useStore()
+function toUrl(url: string) {
+  window.open(url, '_blank')
+}
+</script>
diff --git a/ui/src/layout/layout-template/AppLayout.vue b/ui/src/layout/layout-template/AppLayout.vue
new file mode 100644
index 000000000..97c6771ec
--- /dev/null
+++ b/ui/src/layout/layout-template/AppLayout.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import UserHeader from './layout-header/UserHeader.vue'
+import useStore from '@/stores'
+const { user } = useStore()
+</script>
+
+<template>
+  <div class="app-layout">
+    <div class="app-header">
+      <UserHeader />
+    </div>
+    <div class="app-main">
+      <AppMain />
+    </div>
+  </div>
+</template>
+<style lang="scss">
+@import './index.scss';
+</style>
diff --git a/ui/src/layout/layout-template/DetailLayout.vue b/ui/src/layout/layout-template/DetailLayout.vue
new file mode 100644
index 000000000..9e1a6c201
--- /dev/null
+++ b/ui/src/layout/layout-template/DetailLayout.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="main-layout h-full flex">
+    <div class="sidebar-container">
+      <Sidebar />
+    </div>
+    <div class="view-container">
+      <AppMain />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {  Sidebar, AppMain } from '../components'
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+
+</style>
diff --git a/ui/src/layout/layout-template/SystemLayout.vue b/ui/src/layout/layout-template/SystemLayout.vue
new file mode 100644
index 000000000..41d6bb45d
--- /dev/null
+++ b/ui/src/layout/layout-template/SystemLayout.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="app-layout">
+    <AppHeader />
+    <div class="app-main">
+      <div class="main-layout h-full flex">
+        <div class="sidebar-container">
+          <Sidebar />
+        </div>
+        <div class="view-container">
+          <AppMain />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AppHeader, Sidebar, AppMain } from '../components'
+import useStore from '@/stores'
+const { user } = useStore()
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/ui/src/layout/layout-template/index.scss b/ui/src/layout/layout-template/index.scss
new file mode 100644
index 000000000..327f0c219
--- /dev/null
+++ b/ui/src/layout/layout-template/index.scss
@@ -0,0 +1,35 @@
+.app-layout {
+  background-color: var(--app-layout-bg-color);
+  height: 100%;
+}
+
+.app-header {
+  background: var(--app-header-bg-color);
+  position: fixed;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: 100;
+}
+
+.app-main {
+  position: relative;
+  height: 100%;
+  padding: var(--app-header-height) 0 0 !important;
+  box-sizing: border-box;
+  overflow: auto;
+  &.isExpire {
+    padding-top: calc(var(--app-header-height) + 40px) !important;
+  }
+}
+
+.sidebar-container {
+  box-sizing: border-box;
+  transition: width 0.28s;
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  background-color: var(--sidebar-bg-color);
+}
+.view-container {
+  width: calc(100% - var(--sidebar-width));
+}
diff --git a/ui/src/request/index.ts b/ui/src/request/index.ts
index b7073e2f6..e67aa05ec 100644
--- a/ui/src/request/index.ts
+++ b/ui/src/request/index.ts
@@ -99,7 +99,6 @@ const promise: (
     }
     request
       .then((response) => {
-        console.log(response)
         // blob类型的返回状态是response.status
         if (response.status === 200) {
           resolve(response?.data?.data || response)
diff --git a/ui/src/router/modules/model.ts b/ui/src/router/modules/model.ts
new file mode 100644
index 000000000..ff0f45e2b
--- /dev/null
+++ b/ui/src/router/modules/model.ts
@@ -0,0 +1,17 @@
+const ModelRouter = {
+  path: '/model',
+  name: 'model',
+  meta: { title: 'views.model.title', permission: 'MODEL:READ' },
+  redirect: '/model',
+  component: () => import('@/layout/layout-template/AppLayout.vue'),
+  children: [
+    {
+      path: '/model',
+      name: 'model-index',
+      meta: { title: '模型主页', activeMenu: '/function-lib' },
+      component: () => import('@/views/model/index.vue')
+    }
+  ]
+}
+
+export default ModelRouter
diff --git a/ui/src/router/routes.ts b/ui/src/router/routes.ts
index e32cf4b1f..dedec972b 100644
--- a/ui/src/router/routes.ts
+++ b/ui/src/router/routes.ts
@@ -1,12 +1,13 @@
 import type { RouteRecordRaw } from 'vue-router'
-// const modules: any = import.meta.glob('./modules/*.ts', { eager: true })
-// const rolesRoutes: RouteRecordRaw[] = [...Object.keys(modules).map((key) => modules[key].default)]
+const modules: any = import.meta.glob('./modules/*.ts', { eager: true })
+const rolesRoutes: RouteRecordRaw[] = [...Object.keys(modules).map((key) => modules[key].default)]
 
 export const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'home',
-    component: () => import('@/views/HomeView.vue'),
+    redirect: '/model',
+    children: [...rolesRoutes],
   },
 
   {
@@ -17,12 +18,12 @@ export const routes: Array<RouteRecordRaw> = [
   {
     path: '/forget_password',
     name: 'ForgetPassword',
-    component: () => import('@/views/login/ForgetPassword.vue')
+    component: () => import('@/views/login/ForgetPassword.vue'),
   },
   {
     path: '/reset_password/:code/:email',
     name: 'ResetPassword',
-    component: () => import('@/views/login/ResetPassword.vue')
+    component: () => import('@/views/login/ResetPassword.vue'),
   },
   // {
   //   path: '/:pathMatch(.*)',
diff --git a/ui/src/stores/modules/login.ts b/ui/src/stores/modules/login.ts
index 4cb12cb9b..024c8c601 100644
--- a/ui/src/stores/modules/login.ts
+++ b/ui/src/stores/modules/login.ts
@@ -34,7 +34,7 @@ const useLoginStore = defineStore('login', {
         this.token = ok.token
         localStorage.setItem('token', ok.token)
         const user = useUserStore()
-        return user.profile()
+        return user.profile(loading)
       })
     },
   },
diff --git a/ui/src/stores/modules/user.ts b/ui/src/stores/modules/user.ts
index 528212b7d..d8ff185de 100644
--- a/ui/src/stores/modules/user.ts
+++ b/ui/src/stores/modules/user.ts
@@ -35,9 +35,9 @@ const useLoginStore = defineStore('user', {
     isDefaultTheme() {
       return !this.themeInfo?.theme || this.themeInfo?.theme === '#3370FF'
     },
-    async profile() {
-      return UserApi.getUserProfile().then((ok) => {
-        this.userInfo = ok
+    async profile(loading?: Ref<boolean>) {
+      return UserApi.getUserProfile(loading).then((ok: { data: User }) => {
+        this.userInfo = ok.data
         useLocalStorage<string>(localeConfigKey, 'en-US').value =
           ok.data?.language || this.getLanguage()
         // return this.asyncGetProfile()
diff --git a/ui/src/views/model/component/AddInternalFunctionDialog.vue b/ui/src/views/model/component/AddInternalFunctionDialog.vue
new file mode 100644
index 000000000..2f6514bc4
--- /dev/null
+++ b/ui/src/views/model/component/AddInternalFunctionDialog.vue
@@ -0,0 +1,88 @@
+<template>
+  <el-dialog
+    :title="$t('views.functionLib.functionForm.form.functionName.name')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    append-to-body
+    width="450"
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item prop="name">
+        <el-input v-model="form.name" maxlength="64" show-word-limit></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ isEdit ? $t('common.save') : $t('common.add') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import { t } from '@/locales'
+
+const emit = defineEmits(['refresh'])
+
+const fieldFormRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref<boolean>(false)
+
+const form = ref<any>({
+  name: ''
+})
+
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: t('views.functionLib.functionForm.form.functionName.placeholder'),
+      trigger: 'blur'
+    }
+  ]
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      name: ''
+    }
+  }
+})
+
+const open = (row: any, edit: boolean) => {
+  if (row) {
+    form.value = cloneDeep(row)
+  }
+  isEdit.value = edit || false
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value, isEdit.value)
+      dialogVisible.value = false
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/model/component/EditAvatarDialog.vue b/ui/src/views/model/component/EditAvatarDialog.vue
new file mode 100644
index 000000000..0b1c57f67
--- /dev/null
+++ b/ui/src/views/model/component/EditAvatarDialog.vue
@@ -0,0 +1,127 @@
+<template>
+  <el-dialog
+    :title="`Logo ${$t('common.setting')}`"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="550"
+  >
+    <el-radio-group v-model="radioType" class="radio-block mb-16">
+      <el-radio value="default">
+        <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.default') }}</p>
+        <AppAvatar
+          v-if="detail?.name"
+          :name="detail?.name"
+          pinyinColor
+          class="mt-8 mb-8"
+          shape="square"
+          :size="32"
+        />
+      </el-radio>
+
+      <el-radio value="custom">
+        <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.customizeUpload') }}</p>
+        <div class="flex mt-8">
+          <AppAvatar
+            v-if="fileURL"
+            shape="square"
+            :size="32"
+            style="background: none"
+            class="mr-16"
+          >
+            <img :src="fileURL" alt="" />
+          </AppAvatar>
+          <el-upload
+            ref="uploadRef"
+            action="#"
+            :auto-upload="false"
+            :show-file-list="false"
+            accept="image/jpeg, image/png, image/gif"
+            :on-change="onChange"
+          >
+            <el-button icon="Upload" :disabled="radioType !== 'custom'"
+              >{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.upload') }}
+            </el-button>
+          </el-upload>
+        </div>
+        <div class="el-upload__tip info mt-8">
+          {{ $t('views.applicationOverview.appInfo.EditAvatarDialog.sizeTip') }}
+        </div>
+      </el-radio>
+    </el-radio-group>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submit" :loading="loading">
+          {{ $t('common.save') }}</el-button
+        >
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import functionLibApi from '@/api/function-lib'
+import { cloneDeep } from 'lodash'
+import { MsgError, MsgSuccess } from '@/utils/message'
+import { defaultIcon, isAppIcon } from '@/utils/application'
+import { t } from '@/locales'
+
+const emit = defineEmits(['refresh'])
+
+const iconFile = ref<any>(null)
+const fileURL = ref<any>(null)
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+const detail = ref<any>(null)
+const radioType = ref('default')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    iconFile.value = null
+    fileURL.value = null
+  }
+})
+
+const open = (data: any) => {
+  radioType.value = isAppIcon(data.icon) ? 'custom' : 'default'
+  fileURL.value = isAppIcon(data.icon) ? data.icon : null
+  detail.value = cloneDeep(data)
+  dialogVisible.value = true
+}
+
+const onChange = (file: any) => {
+  //1、判断文件大小是否合法，文件限制不能大于10MB
+  const isLimit = file?.size / 1024 / 1024 < 10
+  if (!isLimit) {
+    // @ts-ignore
+    MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.fileSizeExceeded'))
+    return false
+  } else {
+    iconFile.value = file
+    fileURL.value = URL.createObjectURL(file.raw)
+  }
+}
+
+function submit() {
+  if (radioType.value === 'default') {
+    emit('refresh', '/ui/favicon.ico')
+    dialogVisible.value = false
+  } else if (radioType.value === 'custom' && iconFile.value) {
+    let fd = new FormData()
+    fd.append('file', iconFile.value.raw)
+    functionLibApi.putFunctionLibIcon(detail.value.id, fd, loading).then((res: any) => {
+      emit('refresh', res.data)
+      dialogVisible.value = false
+    })
+  } else {
+    MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.uploadImagePrompt'))
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+
+</style>
diff --git a/ui/src/views/model/component/FieldFormDialog.vue b/ui/src/views/model/component/FieldFormDialog.vue
new file mode 100644
index 000000000..635382a72
--- /dev/null
+++ b/ui/src/views/model/component/FieldFormDialog.vue
@@ -0,0 +1,129 @@
+<template>
+  <el-dialog
+    :title="
+      isEdit
+        ? $t('views.template.templateForm.title.editParam')
+        : $t('views.template.templateForm.title.addParam')
+    "
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    append-to-body
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item :label="$t('views.functionLib.functionForm.form.paramName.label')" prop="name">
+        <el-input
+          v-model="form.name"
+          :placeholder="$t('views.functionLib.functionForm.form.paramName.placeholder')"
+          maxlength="64"
+          show-word-limit
+          @blur="form.name = form.name.trim()"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('views.functionLib.functionForm.form.dataType.label')">
+        <el-select v-model="form.type">
+          <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('views.functionLib.functionForm.form.source.label')">
+        <el-select v-model="form.source">
+          <el-option
+            :label="$t('views.functionLib.functionForm.form.source.reference')"
+            value="reference"
+          />
+          <el-option
+            :label="$t('views.functionLib.functionForm.form.source.custom')"
+            value="custom"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('views.functionLib.functionForm.form.required.label')"
+        @click.prevent
+      >
+        <el-switch size="small" v-model="form.is_required"></el-switch>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ isEdit ? $t('common.save') : $t('common.add') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import { t } from '@/locales'
+const typeOptions = ['string', 'int', 'dict', 'array', 'float']
+
+const emit = defineEmits(['refresh'])
+
+const fieldFormRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+
+const form = ref<any>({
+  name: '',
+  type: typeOptions[0],
+  source: 'reference',
+  is_required: true
+})
+
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: t('views.functionLib.functionForm.form.paramName.placeholder'),
+      trigger: 'blur'
+    }
+  ]
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      name: '',
+      type: typeOptions[0],
+      source: 'reference',
+      is_required: true
+    }
+    isEdit.value = false
+  }
+})
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+    isEdit.value = true
+  }
+
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value)
+      dialogVisible.value = false
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/model/component/FunctionDebugDrawer.vue b/ui/src/views/model/component/FunctionDebugDrawer.vue
new file mode 100644
index 000000000..484e4d607
--- /dev/null
+++ b/ui/src/views/model/component/FunctionDebugDrawer.vue
@@ -0,0 +1,184 @@
+<template>
+  <el-drawer v-model="debugVisible" size="60%" :append-to-body="true">
+    <template #header>
+      <div class="flex align-center" style="margin-left: -8px">
+        <el-button class="cursor mr-4" link @click.prevent="debugVisible = false">
+          <el-icon :size="20">
+            <Back />
+          </el-icon>
+        </el-button>
+        <h4>{{ $t('common.debug') }}</h4>
+      </div>
+    </template>
+    <div>
+      <div v-if="form.init_field_list.length > 0">
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('common.param.initParam') }}
+        </h4>
+        <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+          <DynamicsForm
+            v-model="form.init_params"
+            :model="form.init_params"
+            label-position="top"
+            require-asterisk-position="right"
+            :render_data="form.init_field_list"
+            ref="dynamicsFormRef"
+          >
+          </DynamicsForm>
+        </el-card>
+      </div>
+      <div v-if="form.debug_field_list.length > 0" class="mb-16">
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('common.param.inputParam') }}
+        </h4>
+        <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+          <el-form
+            ref="FormRef"
+            :model="form"
+            label-position="top"
+            require-asterisk-position="right"
+            hide-required-asterisk
+            v-loading="loading"
+            @submit.prevent
+          >
+            <template v-for="(item, index) in form.debug_field_list" :key="index">
+              <el-form-item
+                :label="item.name"
+                :prop="'debug_field_list.' + index + '.value'"
+                :rules="{
+                  required: item.is_required,
+                  message: $t('views.functionLib.functionForm.form.param.inputPlaceholder'),
+                  trigger: 'blur'
+                }"
+              >
+                <template #label>
+                  <div class="flex">
+                    <span
+                    >{{ item.name }} <span class="danger" v-if="item.is_required">*</span></span
+                    >
+                    <el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
+                  </div>
+                </template>
+                <el-input
+                  v-model="item.value"
+                  :placeholder="$t('views.functionLib.functionForm.form.param.inputPlaceholder')"
+                />
+              </el-form-item>
+            </template>
+          </el-form>
+        </el-card>
+      </div>
+
+      <el-button type="primary" @click="submit(FormRef)" :loading="loading">
+        {{ $t('views.functionLib.functionForm.form.debug.run') }}
+      </el-button>
+      <div v-if="showResult" class="mt-8">
+        <h4 class="title-decoration-1 mb-16 mt-16">
+          {{ $t('views.functionLib.functionForm.form.debug.runResult') }}
+        </h4>
+        <div class="mb-16">
+          <el-alert
+            v-if="isSuccess"
+            :title="$t('views.functionLib.functionForm.form.debug.runSuccess')"
+            type="success"
+            show-icon
+            :closable="false"
+          />
+          <el-alert
+            v-else
+            :title="$t('views.functionLib.functionForm.form.debug.runFailed')"
+            type="error"
+            show-icon
+            :closable="false"
+          />
+        </div>
+
+        <p class="lighter mb-8">{{ $t('views.functionLib.functionForm.form.debug.output') }}</p>
+
+        <el-card
+          :class="isSuccess ? '' : 'danger'"
+          class="pre-wrap"
+          shadow="never"
+          style="max-height: 350px; overflow: scroll"
+        >
+          {{ String(result) == '0' ? 0 : result || '-' }}
+        </el-card>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import functionLibApi from '@/api/function-lib'
+import type { FormInstance } from 'element-plus'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+
+const FormRef = ref()
+const dynamicsFormRef = ref()
+const loading = ref(false)
+const debugVisible = ref(false)
+const showResult = ref(false)
+const isSuccess = ref(false)
+const result = ref('')
+
+const form = ref<any>({
+  debug_field_list: [],
+  code: '',
+  input_field_list: [],
+  init_field_list: [],
+  init_params: {}
+})
+
+watch(debugVisible, (bool) => {
+  if (!bool) {
+    showResult.value = false
+    isSuccess.value = false
+    result.value = ''
+    form.value = {
+      debug_field_list: [],
+      code: '',
+      input_field_list: [],
+      init_field_list: [],
+      init_params: {}
+    }
+  }
+})
+
+const submit = async (formEl: FormInstance | undefined) => {
+  const validate = formEl ? formEl.validate() : Promise.resolve()
+  Promise.all([dynamicsFormRef.value?.validate(), validate]).then(() => {
+    functionLibApi.postFunctionLibDebug(form.value, loading).then((res) => {
+      if (res.code === 500) {
+        showResult.value = true
+        isSuccess.value = false
+        result.value = res.message
+      } else {
+        showResult.value = true
+        isSuccess.value = true
+        result.value = res.data
+      }
+    })
+  })
+}
+
+const open = (data: any) => {
+  if (data.input_field_list.length > 0) {
+    data.input_field_list.forEach((item: any) => {
+      form.value.debug_field_list.push({
+        value: '',
+        ...item
+      })
+    })
+  }
+  form.value.code = data.code
+  form.value.input_field_list = data.input_field_list
+  form.value.init_field_list = data.init_field_list
+  debugVisible.value = true
+}
+
+defineExpose({
+  open
+})
+</script>
+<style lang="scss"></style>
diff --git a/ui/src/views/model/component/FunctionFormDrawer.vue b/ui/src/views/model/component/FunctionFormDrawer.vue
new file mode 100644
index 000000000..8e2fb5df6
--- /dev/null
+++ b/ui/src/views/model/component/FunctionFormDrawer.vue
@@ -0,0 +1,518 @@
+<template>
+  <el-drawer v-model="visible" size="60%" :before-close="close">
+    <template #header>
+      <h4>{{ title }}</h4>
+    </template>
+    <div>
+      <h4 class="title-decoration-1 mb-16">
+        {{ $t('views.functionLib.functionForm.title.baseInfo') }}
+      </h4>
+      <el-form
+        ref="FormRef"
+        :model="form"
+        :rules="rules"
+        label-position="top"
+        require-asterisk-position="right"
+        v-loading="loading"
+        @submit.prevent
+      >
+        <el-form-item
+          :label="$t('views.functionLib.functionForm.form.functionName.label')"
+          prop="name"
+        >
+          <div class="flex w-full">
+            <div
+              v-if="form.id"
+              class="edit-avatar mr-12"
+              @mouseenter="showEditIcon = true"
+              @mouseleave="showEditIcon = false"
+            >
+              <AppAvatar
+                v-if="isAppIcon(form.icon)"
+                :id="form.id"
+                shape="square"
+                :size="32"
+                style="background: none"
+              >
+                <img :src="String(form.icon)" alt="" />
+              </AppAvatar>
+              <AppAvatar
+                v-else-if="form.name"
+                :id="form.id"
+                :name="form.name"
+                pinyinColor
+                shape="square"
+                :size="32"
+              />
+              <AppAvatar
+                v-if="showEditIcon"
+                :id="form.id"
+                shape="square"
+                class="edit-mask"
+                :size="32"
+                @click="openEditAvatar"
+              >
+                <el-icon><EditPen /></el-icon>
+              </AppAvatar>
+            </div>
+            <AppAvatar shape="square" style="background: #34c724" class="mr-12" v-else>
+              <img src="@/assets/icon_function_outlined.svg" style="width: 75%" alt="" />
+            </AppAvatar>
+            <el-input
+              v-model="form.name"
+              :placeholder="$t('views.functionLib.functionForm.form.functionName.placeholder')"
+              maxlength="64"
+              show-word-limit
+              @blur="form.name = form.name?.trim()"
+            />
+          </div>
+        </el-form-item>
+
+        <el-form-item :label="$t('views.functionLib.functionForm.form.functionDescription.label')">
+          <el-input
+            v-model="form.desc"
+            type="textarea"
+            :placeholder="$t('views.functionLib.functionForm.form.functionDescription.placeholder')"
+            maxlength="128"
+            show-word-limit
+            :autosize="{ minRows: 3 }"
+            @blur="form.desc = form.desc?.trim()"
+          />
+        </el-form-item>
+        <!--
+        <el-form-item prop="permission_type">
+          <template #label>
+            <span>{{ $t('views.functionLib.functionForm.form.permission_type.label') }}</span>
+          </template>
+
+          <el-radio-group v-model="form.permission_type" class="card__radio">
+            <el-row :gutter="16">
+              <template v-for="(value, key) of PermissionType" :key="key">
+                <el-col :span="12">
+                  <el-card
+                    shadow="never"
+                    class="mb-16"
+                    :class="form.permission_type === key ? 'active' : ''"
+                  >
+                    <el-radio :value="key" size="large">
+                      <p class="mb-4">{{ $t(value) }}</p>
+                      <el-text type="info">
+                        {{ $t(PermissionDesc[key]) }}
+                      </el-text>
+                    </el-radio>
+                  </el-card>
+                </el-col>
+              </template>
+            </el-row>
+          </el-radio-group>
+        </el-form-item>
+        -->
+      </el-form>
+      <div class="flex-between">
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('common.param.initParam') }}
+        </h4>
+        <el-button link type="primary" @click="openAddInitDialog()">
+          <el-icon class="mr-4"><Plus /></el-icon> {{ $t('common.add') }}
+        </el-button>
+      </div>
+      <el-table ref="initFieldTableRef" :data="form.init_field_list" class="mb-16">
+        <el-table-column prop="field" :label="$t('dynamicsForm.paramForm.field.label')">
+          <template #default="{ row }">
+            <span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('dynamicsForm.paramForm.input_type.label')">
+          <template #default="{ row }">
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'TextInput'">{{
+              $t('dynamicsForm.input_type_list.TextInput')
+            }}</el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'PasswordInput'">{{
+              $t('dynamicsForm.input_type_list.PasswordInput')
+            }}</el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'Slider'">{{
+              $t('dynamicsForm.input_type_list.Slider')
+            }}</el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'SwitchInput'">{{
+              $t('dynamicsForm.input_type_list.SwitchInput')
+            }}</el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'SingleSelect'">{{
+              $t('dynamicsForm.input_type_list.SingleSelect')
+            }}</el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'MultiSelect'">{{
+              $t('dynamicsForm.input_type_list.MultiSelect')
+            }}</el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'RadioCard'">{{
+              $t('dynamicsForm.input_type_list.RadioCard')
+            }}</el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'DatePicker'">{{
+              $t('dynamicsForm.input_type_list.DatePicker')
+            }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.required')">
+          <template #default="{ row }">
+            <div @click.stop>
+              <el-switch disabled size="small" v-model="row.required" />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.operation')" align="left" width="90">
+          <template #default="{ row, $index }">
+            <span class="mr-4">
+              <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
+                <el-button type="primary" text @click.stop="openAddInitDialog(row, $index)">
+                  <el-icon><EditPen /></el-icon>
+                </el-button>
+              </el-tooltip>
+            </span>
+            <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
+              <el-button type="primary" text @click="deleteInitField($index)">
+                <el-icon>
+                  <Delete />
+                </el-icon>
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="flex-between">
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('common.param.inputParam') }}
+          <el-text type="info" class="color-secondary">
+            {{ $t('views.functionLib.functionForm.form.param.paramInfo1') }}
+          </el-text>
+        </h4>
+        <el-button link type="primary" @click="openAddDialog()">
+          <el-icon class="mr-4"><Plus /></el-icon> {{ $t('common.add') }}
+        </el-button>
+      </div>
+
+      <el-table ref="inputFieldTableRef" :data="form.input_field_list" class="mb-16">
+        <el-table-column
+          prop="name"
+          :label="$t('views.functionLib.functionForm.form.paramName.label')"
+        />
+        <el-table-column :label="$t('views.functionLib.functionForm.form.dataType.label')">
+          <template #default="{ row }">
+            <el-tag type="info" class="info-tag">{{ row.type }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.required')">
+          <template #default="{ row }">
+            <div @click.stop>
+              <el-switch size="small" v-model="row.is_required" />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="source"
+          :label="$t('views.functionLib.functionForm.form.source.label')"
+        >
+          <template #default="{ row }">
+            {{
+              row.source === 'custom'
+                ? $t('views.functionLib.functionForm.form.source.custom')
+                : $t('views.functionLib.functionForm.form.source.reference')
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.operation')" align="left" width="90">
+          <template #default="{ row, $index }">
+            <span class="mr-4">
+              <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
+                <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
+                  <el-icon><EditPen /></el-icon>
+                </el-button>
+              </el-tooltip>
+            </span>
+            <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
+              <el-button type="primary" text @click="deleteField($index)">
+                <el-icon>
+                  <Delete />
+                </el-icon>
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <h4 class="title-decoration-1 mb-16">
+        {{ $t('views.functionLib.functionForm.form.param.code') }}
+        <span style="color: red; margin-left: -10px">*</span>
+        <el-text type="info" class="color-secondary">
+          {{ $t('views.functionLib.functionForm.form.param.paramInfo2') }}
+        </el-text>
+      </h4>
+
+      <div class="mb-8" v-if="showEditor">
+        <CodemirrorEditor
+          :title="$t('views.functionLib.functionForm.form.param.code')"
+          v-model="form.code"
+          @submitDialog="submitCodemirrorEditor"
+        />
+      </div>
+      <h4 class="title-decoration-1 mb-16 mt-16">
+        {{ $t('common.param.outputParam') }}
+        <el-text type="info" class="color-secondary">
+          {{ $t('views.functionLib.functionForm.form.param.paramInfo1') }}
+        </el-text>
+      </h4>
+      <div class="flex-between border-r-4 p-8-12 mb-8 layout-bg lighter">
+        <span>{{ $t('common.result') }} {result}</span>
+      </div>
+    </div>
+
+    <template #footer>
+      <div>
+        <el-button :loading="loading" @click="visible = false">{{ $t('common.cancel') }}</el-button>
+        <el-button :loading="loading" @click="openDebug">{{ $t('common.debug') }}</el-button>
+        <el-button type="primary" @click="submit(FormRef)" :loading="loading">
+          {{ isEdit ? $t('common.save') : $t('common.create') }}</el-button
+        >
+      </div>
+    </template>
+
+    <FunctionDebugDrawer ref="FunctionDebugDrawerRef" />
+    <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
+    <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshInitFieldList" />
+    <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshFunctionLib" />
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, nextTick } from 'vue'
+import FieldFormDialog from './FieldFormDialog.vue'
+import FunctionDebugDrawer from './FunctionDebugDrawer.vue'
+import type { functionLibData } from '@/api/type/function-lib'
+import functionLibApi from '@/api/function-lib'
+import type { FormInstance } from 'element-plus'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { cloneDeep } from 'lodash'
+import { PermissionType, PermissionDesc } from '@/enums/model'
+import { t } from '@/locales'
+import UserFieldFormDialog from '@/workflow/nodes/base-node/component/UserFieldFormDialog.vue'
+import { isAppIcon } from '@/utils/application'
+import EditAvatarDialog from './EditAvatarDialog.vue'
+import Sortable from 'sortablejs'
+
+const props = defineProps({
+  title: String
+})
+
+const emit = defineEmits(['refresh'])
+const FieldFormDialogRef = ref()
+const FunctionDebugDrawerRef = ref()
+const UserFieldFormDialogRef = ref()
+const EditAvatarDialogRef = ref()
+const initFieldTableRef = ref()
+const inputFieldTableRef = ref()
+
+const FormRef = ref()
+
+const isEdit = ref(false)
+const loading = ref(false)
+const visible = ref(false)
+const showEditor = ref(false)
+const currentIndex = ref<any>(null)
+const showEditIcon = ref(false)
+
+const form = ref<functionLibData>({
+  name: '',
+  desc: '',
+  code: '',
+  icon: '',
+  input_field_list: [],
+  init_field_list: [],
+  permission_type: 'PRIVATE'
+})
+
+watch(visible, (bool) => {
+  if (!bool) {
+    isEdit.value = false
+    showEditor.value = false
+    currentIndex.value = null
+    form.value = {
+      name: '',
+      desc: '',
+      code: '',
+      icon: '',
+      input_field_list: [],
+      init_field_list: [],
+      permission_type: 'PRIVATE'
+    }
+    FormRef.value?.clearValidate()
+  }
+})
+
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: t('views.functionLib.functionForm.form.functionName.requiredMessage'),
+      trigger: 'blur'
+    }
+  ],
+  permission_type: [
+    {
+      required: true,
+      message: t('views.functionLib.functionForm.form.permission_type.requiredMessage'),
+      trigger: 'change'
+    }
+  ]
+})
+
+function onDragHandle() {
+  // For init_field_list table
+  if (initFieldTableRef.value) {
+    const el = initFieldTableRef.value.$el.querySelector('.el-table__body-wrapper tbody')
+    Sortable.create(el, {
+      animation: 150,
+      ghostClass: 'sortable-ghost',
+      onEnd: ({ newIndex, oldIndex }) => {
+        if (newIndex === undefined || oldIndex === undefined) return
+        if (newIndex !== oldIndex) {
+          const item = form.value.init_field_list?.splice(oldIndex, 1)[0]
+          form.value.init_field_list?.splice(newIndex, 0, item)
+        }
+      }
+    })
+  }
+
+  // For input_field_list table
+  if (inputFieldTableRef.value) {
+    const el = inputFieldTableRef.value.$el.querySelector('.el-table__body-wrapper tbody')
+    Sortable.create(el, {
+      animation: 150,
+      ghostClass: 'sortable-ghost',
+      onEnd: ({ newIndex, oldIndex }) => {
+        if (newIndex === undefined || oldIndex === undefined) return
+        if (newIndex !== oldIndex) {
+          const item = form.value.input_field_list?.splice(oldIndex, 1)[0]
+          form.value.input_field_list?.splice(newIndex, 0, item)
+        }
+      }
+    })
+  }
+}
+
+function submitCodemirrorEditor(val: string) {
+  form.value.code = val
+}
+
+function close() {
+  if (isEdit.value || !areAllValuesNonEmpty(form.value)) {
+    visible.value = false
+  } else {
+    MsgConfirm(t('common.tip'), t('views.functionLib.tip.saveMessage'), {
+      confirmButtonText: t('common.confirm'),
+      type: 'warning'
+    })
+      .then(() => {
+        visible.value = false
+      })
+      .catch(() => {})
+  }
+}
+
+function areAllValuesNonEmpty(obj: any) {
+  return Object.values(obj).some((value) => {
+    return Array.isArray(value)
+      ? value.length !== 0
+      : value !== null && value !== undefined && value !== ''
+  })
+}
+
+function openDebug() {
+  FunctionDebugDrawerRef.value.open(form.value)
+}
+
+function deleteField(index: any) {
+  form.value.input_field_list?.splice(index, 1)
+}
+
+function openAddDialog(data?: any, index?: any) {
+  if (typeof index !== 'undefined') {
+    currentIndex.value = index
+  }
+
+  FieldFormDialogRef.value.open(data)
+}
+
+function refreshFieldList(data: any) {
+  if (currentIndex.value !== null) {
+    form.value.input_field_list?.splice(currentIndex.value, 1, data)
+  } else {
+    form.value.input_field_list?.push(data)
+  }
+  currentIndex.value = null
+}
+
+function openAddInitDialog(data?: any, index?: any) {
+  if (typeof index !== 'undefined') {
+    currentIndex.value = index
+  }
+
+  UserFieldFormDialogRef.value.open(data)
+}
+
+function refreshInitFieldList(data: any) {
+  if (currentIndex.value !== null) {
+    form.value.init_field_list?.splice(currentIndex.value, 1, data)
+  } else {
+    form.value.init_field_list?.push(data)
+  }
+  currentIndex.value = null
+  UserFieldFormDialogRef.value.close()
+}
+
+function refreshFunctionLib(data: any) {
+  form.value.icon = data
+  // console.log(data)
+}
+
+function deleteInitField(index: any) {
+  form.value.init_field_list?.splice(index, 1)
+}
+
+function openEditAvatar() {
+  EditAvatarDialogRef.value.open(form.value)
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid: any) => {
+    if (valid) {
+      // console.log(form.value)
+      if (isEdit.value) {
+        functionLibApi.putFunctionLib(form.value?.id as string, form.value, loading).then((res) => {
+          MsgSuccess(t('common.editSuccess'))
+          emit('refresh', res.data)
+          visible.value = false
+        })
+      } else {
+        functionLibApi.postFunctionLib(form.value, loading).then((res) => {
+          MsgSuccess(t('common.createSuccess'))
+          emit('refresh')
+          visible.value = false
+        })
+      }
+    }
+  })
+}
+
+const open = (data: any) => {
+  if (data) {
+    isEdit.value = data?.id ? true : false
+    form.value = cloneDeep(data)
+  }
+  visible.value = true
+  setTimeout(() => {
+    showEditor.value = true
+  }, 100)
+}
+
+defineExpose({
+  open
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/model/component/InitParamDrawer.vue b/ui/src/views/model/component/InitParamDrawer.vue
new file mode 100644
index 000000000..ec6db25c1
--- /dev/null
+++ b/ui/src/views/model/component/InitParamDrawer.vue
@@ -0,0 +1,97 @@
+<template>
+  <el-drawer v-model="debugVisible" size="60%" :append-to-body="true">
+    <template #header>
+      <div class="flex align-center" style="margin-left: -8px">
+        <el-button class="cursor mr-4" link @click.prevent="debugVisible = false">
+          <el-icon :size="20">
+            <Back />
+          </el-icon>
+        </el-button>
+        <h4>{{ $t('common.param.initParam') }}</h4>
+      </div>
+    </template>
+    <div>
+      <div v-if="form.init_field_list?.length > 0">
+        <DynamicsForm
+          v-model="form.init_params"
+          :model="form.init_params"
+          label-position="top"
+          require-asterisk-position="right"
+          :render_data="form.init_field_list"
+          ref="dynamicsFormRef"
+        >
+        </DynamicsForm>
+      </div>
+
+    </div>
+    <template #footer>
+      <div>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button
+        >
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import functionLibApi from '@/api/function-lib'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+import { cloneDeep } from 'lodash'
+
+const emit = defineEmits(['refresh'])
+
+const dynamicsFormRef = ref()
+const loading = ref(false)
+const debugVisible = ref(false)
+
+const form = ref<any>({
+  init_params: {}
+})
+
+watch(debugVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      init_params: {},
+      is_active: false
+    }
+  }
+})
+
+const submit = async () => {
+  dynamicsFormRef.value.validate().then(() => {
+    functionLibApi.putFunctionLib(form.value?.id as string, form.value, loading)
+      .then((res) => {
+        MsgSuccess(t('common.editSuccess'))
+        emit('refresh')
+        debugVisible.value = false
+      })
+  })
+}
+
+const open = (data: any, is_active: boolean) => {
+  if (data) {
+    form.value = cloneDeep(data)
+    form.value.is_active = is_active
+  }
+  const init_params = form.value.init_field_list
+    .map((item: any) => {
+      if (item.show_default_value === false) {
+        return { [item.field]: undefined }
+      }
+      return { [item.field]: item.default_value }
+    })
+    .reduce((x: any, y: any) => ({ ...x, ...y }), {})
+  form.value.init_params = { ...init_params, ...form.value.init_params }
+  debugVisible.value = true
+}
+
+defineExpose({
+  open
+})
+</script>
+<style lang="scss"></style>
diff --git a/ui/src/views/model/component/InternalDescDrawer.vue b/ui/src/views/model/component/InternalDescDrawer.vue
new file mode 100644
index 000000000..8940471da
--- /dev/null
+++ b/ui/src/views/model/component/InternalDescDrawer.vue
@@ -0,0 +1,100 @@
+<template>
+  <el-drawer v-model="visibleInternalDesc" size="60%" :append-to-body="true">
+    <template #header>
+      <div class="flex align-center" style="margin-left: -8px">
+        <el-button class="cursor mr-4" link @click.prevent="visibleInternalDesc = false">
+          <el-icon :size="20">
+            <Back />
+          </el-icon>
+        </el-button>
+        <h4>详情</h4>
+      </div>
+    </template>
+
+    <div>
+      <div class="card-header">
+        <div class="flex-between">
+          <div class="title flex align-center">
+            <AppAvatar
+              v-if="isAppIcon(functionDetail?.icon)"
+              shape="square"
+              :size="64"
+              style="background: none"
+              class="mr-8"
+            >
+              <img :src="functionDetail?.icon" alt="" />
+            </AppAvatar>
+            <AppAvatar
+              v-else-if="functionDetail?.name"
+              :name="functionDetail?.name"
+              pinyinColor
+              shape="square"
+              :size="64"
+              class="mr-8"
+            />
+            <div class="ml-16">
+              <h3 class="mb-8">{{ functionDetail.name }}</h3>
+              <el-text type="info" v-if="functionDetail?.desc">
+                {{ functionDetail.desc }}
+              </el-text>
+            </div>
+          </div>
+          <div @click.stop>
+            <el-button type="primary" @click="addInternalFunction(functionDetail)">
+              {{ $t('common.add') }}
+            </el-button>
+          </div>
+        </div>
+
+        <div class="mt-16">
+          <el-text type="info">
+            <div>{{ $t('common.author') }}: MaxKB</div>
+          </el-text>
+        </div>
+      </div>
+      <MdPreview
+        ref="editorRef"
+        editorId="preview-only"
+        :modelValue="markdownContent"
+        style="background: none"
+        noImgZoomIn
+      />
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+import { cloneDeep } from 'lodash'
+import { isAppIcon } from '@/utils/application'
+const emit = defineEmits(['refresh', 'addFunction'])
+
+const visibleInternalDesc = ref(false)
+const markdownContent = ref('')
+const functionDetail = ref<any>({})
+
+watch(visibleInternalDesc, (bool) => {
+  if (!bool) {
+    markdownContent.value = ''
+  }
+})
+
+const open = (data: any, detail: any) => {
+  functionDetail.value = detail
+  if (data) {
+    markdownContent.value = cloneDeep(data)
+  }
+  visibleInternalDesc.value = true
+}
+
+const addInternalFunction = (data: any) => {
+  emit('addFunction', data)
+  visibleInternalDesc.value = false
+}
+
+defineExpose({
+  open
+})
+</script>
+<style lang="scss"></style>
diff --git a/ui/src/views/model/component/PermissionDialog.vue b/ui/src/views/model/component/PermissionDialog.vue
new file mode 100644
index 000000000..829de9f07
--- /dev/null
+++ b/ui/src/views/model/component/PermissionDialog.vue
@@ -0,0 +1,106 @@
+<template>
+  <el-dialog
+    :title="$t('views.functionLib.functionForm.form.permission_type.label')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    append-to-body
+    width="450"
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-radio-group v-model="form.permission_type" class="radio-block">
+        <el-radio value="PRIVATE" size="large">
+          {{ $t('common.private') }}
+          <el-text type="info">{{
+            $t('views.template.templateForm.form.permissionType.privateDesc')
+          }}</el-text>
+        </el-radio>
+        <el-radio value="PUBLIC" size="large">
+          {{ $t('common.public') }}
+          <el-text type="info">{{
+            $t('views.template.templateForm.form.permissionType.publicDesc')
+          }}</el-text>
+        </el-radio>
+      </el-radio-group>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ isEdit ? $t('common.save') : $t('common.add') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import { t } from '@/locales'
+import functionLibApi from '@/api/function-lib'
+import { MsgSuccess } from '@/utils/message'
+
+const emit = defineEmits(['refresh'])
+
+const fieldFormRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+
+const form = ref<any>({
+  permission_type: 'PRIVATE'
+})
+
+const rules = reactive({
+  permission_type: [
+    {
+      required: true,
+      message: t('views.functionLib.functionForm.form.paramName.placeholder'),
+      trigger: 'blur'
+    }
+  ]
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      permission_type: 'PRIVATE'
+    }
+    isEdit.value = false
+  }
+})
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+    isEdit.value = true
+  }
+
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      functionLibApi.putFunctionLib(form.value?.id as string, form.value, loading).then((res) => {
+        MsgSuccess(t('common.editSuccess'))
+        emit('refresh')
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/model/index.vue b/ui/src/views/model/index.vue
new file mode 100644
index 000000000..d7c61fd6c
--- /dev/null
+++ b/ui/src/views/model/index.vue
@@ -0,0 +1,623 @@
+<template>
+  <div class="function-lib-list-container p-24" style="padding-top: 16px">
+    <el-tabs v-model="functionType" @tab-change="tabChangeHandle">
+      <el-tab-pane :label="$t('views.functionLib.title')" name="PUBLIC"></el-tab-pane>
+      <el-tab-pane :label="$t('views.functionLib.internalTitle')" name="INTERNAL"></el-tab-pane>
+    </el-tabs>
+    <div class="flex-between mb-16">
+      <h4></h4>
+      <div class="flex-between">
+        <el-select
+          v-if="functionType === 'PUBLIC'"
+          v-model="selectUserId"
+          class="mr-12"
+          style="max-width: 240px; width: 150px"
+          @change="searchHandle"
+        >
+          <el-option
+            v-for="item in userOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-input
+          v-model="searchValue"
+          @change="searchHandle"
+          :placeholder="$t('views.functionLib.searchBar.placeholder')"
+          prefix-icon="Search"
+          class="w-240"
+          style="max-width: 240px"
+          clearable
+        />
+      </div>
+    </div>
+    <div
+      v-loading.fullscreen.lock="
+        (paginationConfig.current_page === 1 && loading) || changeStateloading
+      "
+    >
+      <InfiniteScroll
+        :size="functionLibList.length"
+        :total="paginationConfig.total"
+        :page_size="paginationConfig.page_size"
+        v-model:current_page="paginationConfig.current_page"
+        @load="getList"
+        :loading="loading"
+      >
+        <el-row :gutter="15">
+          <el-col
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="6"
+            class="mb-16"
+            v-if="functionType === 'PUBLIC'"
+          >
+            <el-card shadow="hover" class="application-card-add" style="--el-card-padding: 8px">
+              <div class="card-add-button flex align-center cursor p-8" @click="openCreateDialog()">
+                <AppIcon iconName="app-add-application" class="mr-8"></AppIcon>
+                {{ $t('views.functionLib.createFunction') }}
+              </div>
+              <el-divider style="margin: 8px 0" />
+              <el-upload
+                ref="elUploadRef"
+                :file-list="[]"
+                action="#"
+                :auto-upload="false"
+                :show-file-list="false"
+                :limit="1"
+                :on-change="(file: any, fileList: any) => importFunctionLib(file)"
+                class="card-add-button"
+              >
+                <div class="flex align-center cursor p-8">
+                  <AppIcon iconName="app-import" class="mr-8"></AppIcon>
+                  {{ $t('views.functionLib.importFunction') }}
+                </div>
+              </el-upload>
+            </el-card>
+          </el-col>
+          <el-col
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="6"
+            v-for="(item, index) in functionLibList"
+            :key="index"
+            class="mb-16"
+          >
+            <CardBox
+              v-if="functionType === 'PUBLIC'"
+              :title="item.name"
+              :description="item.desc"
+              class="function-lib-card"
+              @click="openCreateDialog(item)"
+              :class="item.permission_type === 'PUBLIC' && !canEdit(item) ? '' : 'cursor'"
+            >
+              <template #icon>
+                <AppAvatar
+                  v-if="isAppIcon(item?.icon)"
+                  shape="square"
+                  :size="32"
+                  style="background: none"
+                  class="mr-8"
+                >
+                  <img :src="item?.icon" alt="" />
+                </AppAvatar>
+                <AppAvatar
+                  v-else-if="item?.name"
+                  :name="item?.name"
+                  pinyinColor
+                  shape="square"
+                  :size="32"
+                  class="mr-8"
+                />
+              </template>
+              <template #subTitle>
+                <el-text class="color-secondary" size="small">
+                  <auto-tooltip :content="item.username">
+                    {{ $t('common.creator') }}: {{ item.username }}
+                  </auto-tooltip>
+                </el-text>
+              </template>
+              <div class="status-button">
+                <el-tag
+                  class="info-tag"
+                  v-if="item.permission_type === 'PUBLIC'"
+                  style="height: 22px"
+                >
+                  {{ $t('common.public') }}</el-tag
+                >
+                <el-tag
+                  class="danger-tag"
+                  v-else-if="item.permission_type === 'PRIVATE'"
+                  style="height: 22px"
+                >
+                  {{ $t('common.private') }}</el-tag
+                >
+              </div>
+              <template #footer>
+                <div class="footer-content flex-between">
+                  <div>
+                    <span v-if="item.template_id"> {{ $t('common.author') }}: MaxKB</span>
+                  </div>
+                  <div @click.stop>
+                    <el-switch
+                      :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
+                      v-model="item.is_active"
+                      @change="changeState($event, item)"
+                      size="small"
+                      class="mr-4"
+                    />
+                    <el-divider direction="vertical" />
+                    <el-dropdown trigger="click">
+                      <el-button text @click.stop>
+                        <el-icon><MoreFilled /></el-icon>
+                      </el-button>
+                      <template #dropdown>
+                        <el-dropdown-menu>
+                          <el-dropdown-item
+                            v-if="item.template_id"
+                            :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
+                            @click.stop="addInternalFunction(item, true)"
+                          >
+                            <el-icon><EditPen /></el-icon>
+                            {{ $t('common.edit') }}
+                          </el-dropdown-item>
+                          <el-dropdown-item
+                            v-if="!item.template_id"
+                            :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
+                            @click.stop="openCreateDialog(item)"
+                          >
+                            <el-icon><EditPen /></el-icon>
+                            {{ $t('common.edit') }}
+                          </el-dropdown-item>
+                          <el-dropdown-item
+                            :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
+                            v-if="!item.template_id"
+                            @click.stop="copyFunctionLib(item)"
+                          >
+                            <AppIcon iconName="app-copy"></AppIcon>
+                            {{ $t('common.copy') }}
+                          </el-dropdown-item>
+                          <el-dropdown-item
+                            v-if="item.init_field_list?.length > 0"
+                            :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
+                            @click.stop="configInitParams(item)"
+                          >
+                            <AppIcon iconName="app-operation" class="mr-4"></AppIcon>
+                            {{ $t('common.param.initParam') }}
+                          </el-dropdown-item>
+                          <el-dropdown-item
+                            :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
+                            @click.stop="configPermission(item)"
+                          >
+                            <el-icon><User /></el-icon>
+                            {{ $t('views.functionLib.functionForm.form.permission_type.label') }}
+                          </el-dropdown-item>
+                          <el-dropdown-item
+                            :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
+                            v-if="!item.template_id"
+                            @click.stop="exportFunctionLib(item)"
+                          >
+                            <AppIcon iconName="app-export"></AppIcon>
+                            {{ $t('common.export') }}
+                          </el-dropdown-item>
+                          <el-dropdown-item
+                            :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
+                            @click.stop="deleteFunctionLib(item)"
+                          >
+                            <el-icon><Delete /></el-icon>
+                            {{ $t('common.delete') }}
+                          </el-dropdown-item>
+                        </el-dropdown-menu>
+                      </template>
+                    </el-dropdown>
+                  </div>
+                </div>
+              </template>
+            </CardBox>
+            <CardBox
+              v-if="functionType === 'INTERNAL'"
+              :title="item.name"
+              :description="item.desc"
+              class="function-lib-card"
+              @click="openDescDrawer(item)"
+              :class="item.permission_type === 'PUBLIC' && !canEdit(item) ? '' : 'cursor'"
+            >
+              <template #icon>
+                <AppAvatar
+                  v-if="isAppIcon(item?.icon)"
+                  shape="square"
+                  :size="32"
+                  style="background: none"
+                  class="mr-8"
+                >
+                  <img :src="item?.icon" alt="" />
+                </AppAvatar>
+                <AppAvatar
+                  v-else-if="item?.name"
+                  :name="item?.name"
+                  pinyinColor
+                  shape="square"
+                  :size="32"
+                  class="mr-8"
+                />
+              </template>
+              <div class="status-button"></div>
+              <template #footer>
+                <div class="footer-content flex-between">
+                  <div>{{ $t('common.author') }}: MaxKB</div>
+                  <div @click.stop>
+                    <el-button type="primary" link @click="addInternalFunction(item)">
+                      {{ $t('common.add') }}
+                    </el-button>
+                  </div>
+                </div>
+              </template>
+            </CardBox>
+          </el-col>
+        </el-row>
+      </InfiniteScroll>
+    </div>
+    <FunctionFormDrawer ref="FunctionFormDrawerRef" @refresh="refresh" :title="title" />
+    <PermissionDialog ref="PermissionDialogRef" @refresh="refresh" />
+    <AddInternalFunctionDialog
+      ref="AddInternalFunctionDialogRef"
+      @refresh="confirmAddInternalFunction"
+    />
+    <InitParamDrawer ref="InitParamDrawerRef" @refresh="refresh" />
+    <InternalDescDrawer ref="InternalDescDrawerRef" @addFunction="addInternalFunction" />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive, watch, nextTick } from 'vue'
+import { cloneDeep, get } from 'lodash'
+import functionLibApi from '@/api/function-lib'
+import FunctionFormDrawer from './component/FunctionFormDrawer.vue'
+import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
+import useStore from '@/stores'
+import applicationApi from '@/api/application'
+import { t } from '@/locales'
+import PermissionDialog from '@/views/function-lib/component/PermissionDialog.vue'
+import InitParamDrawer from '@/views/function-lib/component/InitParamDrawer.vue'
+import InternalDescDrawer from '@/views/function-lib/component/InternalDescDrawer.vue'
+import { isAppIcon } from '@/utils/application'
+import InfiniteScroll from '@/components/infinite-scroll/index.vue'
+import CardBox from '@/components/card-box/index.vue'
+import AddInternalFunctionDialog from '@/views/function-lib/component/AddInternalFunctionDialog.vue'
+
+const { user } = useStore()
+
+const loading = ref(false)
+
+const InternalDescDrawerRef = ref()
+const FunctionFormDrawerRef = ref()
+const PermissionDialogRef = ref()
+const AddInternalFunctionDialogRef = ref()
+const InitParamDrawerRef = ref()
+
+const functionLibList = ref<any[]>([])
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 30,
+  total: 0
+})
+
+const searchValue = ref('')
+const title = ref('')
+const changeStateloading = ref(false)
+
+interface UserOption {
+  label: string
+  value: string
+}
+
+const userOptions = ref<UserOption[]>([])
+
+const selectUserId = ref('all')
+const elUploadRef = ref<any>()
+
+const functionType = ref('PUBLIC')
+
+watch(
+  functionType,
+  (val) => {
+    paginationConfig.total = 0
+    paginationConfig.current_page = 1
+    functionLibList.value = []
+    getList()
+  },
+  { immediate: true }
+)
+
+function tabChangeHandle() {
+  selectUserId.value = 'all'
+  searchValue.value = ''
+}
+
+const canEdit = (row: any) => {
+  return user.userInfo?.id === row?.user_id
+}
+
+function openCreateDialog(data?: any) {
+  // 有template_id的不允许编辑，是模板转换来的
+  if (data?.template_id) {
+    return
+  }
+  // console.log(data)
+  title.value = data ? t('views.functionLib.editFunction') : t('views.functionLib.createFunction')
+  if (data) {
+    if (data?.permission_type !== 'PUBLIC' || canEdit(data)) {
+      functionLibApi.getFunctionLibById(data?.id, changeStateloading).then((res) => {
+        FunctionFormDrawerRef.value.open(res.data)
+      })
+    }
+  } else {
+    FunctionFormDrawerRef.value.open(data)
+  }
+}
+
+async function openDescDrawer(row: any) {
+  const index = row.icon.replace('icon.png', 'detail.md')
+  const response = await fetch(index)
+  const content = await response.text()
+  InternalDescDrawerRef.value.open(content, row)
+}
+
+function addInternalFunction(data?: any, isEdit?: boolean) {
+  AddInternalFunctionDialogRef.value.open(data, isEdit)
+}
+
+function confirmAddInternalFunction(data?: any, isEdit?: boolean) {
+  if (isEdit) {
+    functionLibApi.putFunctionLib(data?.id as string, data, loading).then((res) => {
+      MsgSuccess(t('common.saveSuccess'))
+      searchHandle()
+    })
+  } else {
+    functionLibApi
+      .addInternalFunction(data.id, { name: data.name }, changeStateloading)
+      .then((res) => {
+        MsgSuccess(t('common.addSuccess'))
+        searchHandle()
+      })
+  }
+}
+
+function searchHandle() {
+  if (user.userInfo) {
+    localStorage.setItem(user.userInfo.id + 'function', selectUserId.value)
+  }
+  paginationConfig.total = 0
+  paginationConfig.current_page = 1
+  functionLibList.value = []
+  getList()
+}
+
+async function changeState(bool: Boolean, row: any) {
+  if (!bool) {
+    MsgConfirm(
+      `${t('views.functionLib.disabled.confirmTitle')}${row.name} ?`,
+      t('views.functionLib.disabled.confirmMessage'),
+      {
+        confirmButtonText: t('views.functionLib.setting.disabled'),
+        confirmButtonClass: 'danger'
+      }
+    )
+      .then(() => {
+        const obj = {
+          is_active: bool
+        }
+        functionLibApi.putFunctionLib(row.id, obj, changeStateloading).then((res) => {})
+      })
+      .catch(() => {
+        row.is_active = true
+      })
+  } else {
+    const res = await functionLibApi.getFunctionLibById(row.id, changeStateloading)
+    if (
+      !res.data.init_params &&
+      res.data.init_field_list &&
+      res.data.init_field_list.length > 0 &&
+      res.data.init_field_list.filter((item: any) => item.default_value && item.show_default_value).length !==
+        res.data.init_field_list.length
+    ) {
+      InitParamDrawerRef.value.open(res.data, bool)
+      row.is_active = false
+      return
+    }
+    const init_params = res.data.init_field_list.reduce((acc: any, item: any) => {
+      acc[item.field] = item.default_value
+      return acc
+    }, {})
+    const obj = {
+      is_active: bool,
+      init_params: init_params,
+      init_field_list: res.data.init_field_list
+    }
+    functionLibApi.putFunctionLib(row.id, obj, changeStateloading).then((res) => {})
+  }
+}
+
+function deleteFunctionLib(row: any) {
+  MsgConfirm(
+    `${t('views.functionLib.delete.confirmTitle')}${row.name} ?`,
+    t('views.functionLib.delete.confirmMessage'),
+    {
+      confirmButtonText: t('common.confirm'),
+      cancelButtonText: t('common.cancel'),
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      functionLibApi.delFunctionLib(row.id, loading).then(() => {
+        const index = functionLibList.value.findIndex((v) => v.id === row.id)
+        functionLibList.value.splice(index, 1)
+        MsgSuccess(t('common.deleteSuccess'))
+      })
+    })
+    .catch(() => {})
+}
+
+function copyFunctionLib(row: any) {
+  title.value = t('views.functionLib.copyFunction')
+  const obj = cloneDeep(row)
+  delete obj['id']
+  obj['name'] = obj['name'] + `  ${t('views.functionLib.functionForm.title.copy')}`
+  FunctionFormDrawerRef.value.open(obj)
+}
+
+function exportFunctionLib(row: any) {
+  functionLibApi.exportFunctionLib(row.id, row.name, loading).catch((e: any) => {
+    if (e.response.status !== 403) {
+      e.response.data.text().then((res: string) => {
+        MsgError(`${t('views.application.tip.ExportError')}:${JSON.parse(res).message}`)
+      })
+    }
+  })
+}
+
+function configPermission(item: any) {
+  PermissionDialogRef.value.open(item)
+}
+
+function configInitParams(item: any) {
+  functionLibApi.getFunctionLibById(item?.id, changeStateloading).then((res) => {
+    InitParamDrawerRef.value.open(res.data)
+  })
+}
+
+function importFunctionLib(file: any) {
+  const formData = new FormData()
+  formData.append('file', file.raw, file.name)
+  elUploadRef.value.clearFiles()
+  functionLibApi
+    .importFunctionLib(formData, loading)
+    .then(async (res: any) => {
+      if (res?.data) {
+        searchHandle()
+      }
+    })
+    .catch((e: any) => {
+      if (e.code === 400) {
+        MsgConfirm(t('common.tip'), t('views.application.tip.professionalMessage'), {
+          cancelButtonText: t('common.confirm'),
+          confirmButtonText: t('common.professional')
+        }).then(() => {
+          window.open('https://maxkb.cn/pricing.html', '_blank')
+        })
+      }
+    })
+}
+
+async function getList() {
+  if (userOptions.value?.length === 0) {
+    await getUserList()
+  }
+  const params = {
+    ...(searchValue.value && { name: searchValue.value }),
+    ...(functionType.value && { function_type: functionType.value }),
+    ...(selectUserId.value &&
+      selectUserId.value !== 'all' && { select_user_id: selectUserId.value })
+  }
+  functionLibApi.getFunctionLib(paginationConfig, params, loading).then((res: any) => {
+    res.data.records.forEach((item: any) => {
+      if (user.userInfo && item.user_id === user.userInfo.id) {
+        item.username = user.userInfo.username
+      } else {
+        item.username = userOptions.value.find((v) => v.value === item.user_id)?.label
+      }
+    })
+    functionLibList.value = [...functionLibList.value, ...res.data.records]
+    paginationConfig.total = res.data.total
+  })
+}
+
+function refresh(data: any) {
+  if (data) {
+    const index = functionLibList.value.findIndex((v) => v.id === data.id)
+    if (user.userInfo && data.user_id === user.userInfo.id) {
+      data.username = user.userInfo.username
+    } else {
+      data.username = userOptions.value.find((v) => v.value === data.user_id)?.label
+    }
+    functionLibList.value.splice(index, 1, data)
+  }
+  paginationConfig.total = 0
+  paginationConfig.current_page = 1
+  functionLibList.value = []
+  getList()
+}
+
+async function getUserList() {
+  const res = await applicationApi.getUserList('FUNCTION', loading)
+  if (res.data) {
+    userOptions.value = res.data.map((item: any) => {
+      return {
+        label: item.username,
+        value: item.id
+      }
+    })
+    if (user.userInfo) {
+      const selectUserIdValue = localStorage.getItem(user.userInfo.id + 'function')
+      if (selectUserIdValue && userOptions.value.find((v) => v.value === selectUserIdValue)) {
+        selectUserId.value = selectUserIdValue
+      }
+    }
+  }
+}
+
+onMounted(() => {
+
+})
+</script>
+<style lang="scss" scoped>
+.application-card-add {
+  width: 100%;
+  font-size: 14px;
+  min-height: var(--card-min-height);
+  border: 1px dashed var(--el-border-color);
+  background: var(--el-disabled-bg-color);
+  border-radius: 8px;
+  box-sizing: border-box;
+
+  &:hover {
+    border: 1px solid var(--el-card-bg-color);
+    background-color: var(--el-card-bg-color);
+  }
+
+  .card-add-button {
+    &:hover {
+      border-radius: 4px;
+      background: var(--app-text-color-light-1);
+    }
+
+    :deep(.el-upload) {
+      display: block;
+      width: 100%;
+      color: var(--el-text-color-regular);
+    }
+  }
+}
+
+.application-card {
+  .status-tag {
+    position: absolute;
+    right: 16px;
+    top: 15px;
+  }
+}
+
+.function-lib-list-container {
+  .status-button {
+    position: absolute;
+    right: 12px;
+    top: 15px;
+    height: auto;
+  }
+}
+</style>