diff --git a/ui/src/components/app-icon/index.ts b/ui/src/components/app-icon/index.ts
index c18798afa..2f26344bc 100644
--- a/ui/src/components/app-icon/index.ts
+++ b/ui/src/components/app-icon/index.ts
@@ -75,6 +75,48 @@ export const iconMap: any = {
       ])
     },
   },
+  'app-magnify': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M366.165333 593.749333a21.333333 21.333333 0 0 1 30.208 0l30.165334 30.165334a21.333333 21.333333 0 0 1 0 30.208l-170.752 170.666666H377.173333a21.333333 21.333333 0 0 1 21.333334 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333334 21.333334H156.458667a42.538667 42.538667 0 0 1-42.666667-42.666667v-220.16a21.333333 21.333333 0 0 1 21.333333-21.333333h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v113.493333l167.04-167.04z m500.992-480a42.538667 42.538667 0 0 1 42.666667 42.666667v220.16a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333v-113.493333l-167.04 167.04a21.333333 21.333333 0 0 1-30.165334 0l-30.165333-30.165334a21.333333 21.333333 0 0 1 0-30.165333l170.709333-170.666667h-121.344a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333h220.672z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
+  'app-minify': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M384.341333 597.205333a42.538667 42.538667 0 0 1 42.666667 42.666667v220.16a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333v-113.493333l-167.04 167.04a21.333333 21.333333 0 0 1-30.165334 0l-30.165333-30.208a21.333333 21.333333 0 0 1 0-30.165334l170.709333-170.666666H163.669333a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334h220.672zM849.92 110.506667a21.333333 21.333333 0 0 1 30.165333 0l30.165334 30.165333a21.333333 21.333333 0 0 1 0 30.165333l-170.709334 170.666667h121.344a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-220.672a42.538667 42.538667 0 0 1-42.666666-42.666666v-220.16a21.333333 21.333333 0 0 1 21.333333-21.333334h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333334v113.493333l167.04-166.997333z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
   // 动态加载的图标
   ...dynamicIcons,
 }
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 5cfd49ed9..bd151885b 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -4,6 +4,8 @@ import LogoIcon from './logo/LogoIcon.vue'
 import SendIcon from './logo/SendIcon.vue'
 import dynamicsForm from './dynamics-form'
 import AppIcon from './app-icon/AppIcon.vue'
+import LayoutContainer from './layout-container/index.vue'
+import ContentContainer from './layout-container/ContentContainer.vue'
 export default {
   install(app: App) {
     app.component('LogoFull', LogoFull)
@@ -11,5 +13,7 @@ export default {
     app.component('SendIcon', SendIcon)
     app.use(dynamicsForm)
     app.component('AppIcon', AppIcon)
+    app.component('LayoutContainer', LayoutContainer)
+    app.component('ContentContainer', ContentContainer)
   },
 }
diff --git a/ui/src/components/layout-container/ContentContainer.vue b/ui/src/components/layout-container/ContentContainer.vue
new file mode 100644
index 000000000..d01ef295b
--- /dev/null
+++ b/ui/src/components/layout-container/ContentContainer.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="content-container border-r-4">
+    <div class="content-container__header flex align-center w-full" v-if="slots.header || header">
+      <slot name="backButton">
+        <back-button :to="backTo" v-if="showBack"></back-button>
+      </slot>
+      <slot name="header">
+        <h4>{{ header }}</h4>
+      </slot>
+    </div>
+    <el-scrollbar>
+      <div class="content-container__main">
+        <slot></slot>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+defineOptions({ name: 'ContentContainer' })
+const slots = useSlots()
+const props = defineProps({
+  header: String || null,
+  backTo: String
+})
+const showBack = computed(() => {
+  const { backTo } = props
+  return backTo
+})
+</script>
+
+<style lang="scss" scoped>
+.content-container {
+  transition: 0.3s;
+  padding: 0 var(--app-view-padding) var(--app-view-padding);
+  .content-container__header {
+    box-sizing: border-box;
+    padding: 16px 0;
+    flex-wrap: wrap;
+  }
+  .content-container__main {
+    // background-color: var(--app-view-bg-color);
+    box-sizing: border-box;
+    min-width: 847px;
+  }
+}
+</style>
diff --git a/ui/src/components/layout-container/index.vue b/ui/src/components/layout-container/index.vue
new file mode 100644
index 000000000..1c5c8ab03
--- /dev/null
+++ b/ui/src/components/layout-container/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="layout-container flex h-full">
+    <div class="layout-container__left">
+      <slot name="left"></slot>
+    </div>
+    <div class="layout-container__right">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+defineOptions({ name: 'LayoutContainer' })
+const slots = useSlots()
+const props = defineProps({
+  header: String || null,
+  backTo: String,
+})
+const showBack = computed(() => {
+  const { backTo } = props
+  return backTo
+})
+</script>
+
+<style lang="scss" scoped>
+.layout-container {
+  &__left {
+    box-sizing: border-box;
+    transition: width 0.28s;
+    width: var(--sidebar-width);
+    min-width: var(--sidebar-width);
+    background-color: var(--sidebar-bg-color);
+  }
+  &__right {
+    width: calc(100% - var(--sidebar-width));
+  }
+}
+</style>
diff --git a/ui/src/enums/model.ts b/ui/src/enums/model.ts
new file mode 100644
index 000000000..6d073d932
--- /dev/null
+++ b/ui/src/enums/model.ts
@@ -0,0 +1,18 @@
+export enum PermissionType {
+  PRIVATE = 'common.private',
+  PUBLIC = 'common.public'
+}
+export enum PermissionDesc {
+  PRIVATE = 'views.model.templateForm.form.permissionType.privateDesc',
+  PUBLIC = 'views.model.templateForm.form.permissionType.publicDesc',
+}
+
+export enum modelType {
+  EMBEDDING = 'views.model.modelType.EMBEDDING',
+  LLM = 'views.model.modelType.LLM',
+  STT = 'views.model.modelType.STT',
+  TTS = 'views.model.modelType.TTS',
+  IMAGE = 'views.model.modelType.IMAGE',
+  TTI = 'views.model.modelType.TTI',
+  RERANKER = 'views.model.modelType.RERANKER'
+}
diff --git a/ui/src/layout/layout-header/avatar/index.vue b/ui/src/layout/layout-header/avatar/index.vue
index d9735792d..fb162488a 100644
--- a/ui/src/layout/layout-header/avatar/index.vue
+++ b/ui/src/layout/layout-header/avatar/index.vue
@@ -1,9 +1,9 @@
 <template>
   <el-dropdown trigger="click" type="primary">
     <div class="flex-center cursor">
-      <AppAvatar>
+      <el-avatar :size="30">
         <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
-      </AppAvatar>
+      </el-avatar>
       <span class="ml-8">{{ user.userInfo?.username }}</span>
       <el-icon class="el-icon--right">
         <CaretBottom />
diff --git a/ui/src/layout/layout-template/MainLayout.vue b/ui/src/layout/layout-template/MainLayout.vue
index c107a6c28..2a11e1973 100644
--- a/ui/src/layout/layout-template/MainLayout.vue
+++ b/ui/src/layout/layout-template/MainLayout.vue
@@ -3,20 +3,18 @@
     <div class="app-header">
       <UserHeader />
     </div>
-
     <div class="app-main">
-      <div class="main-layout h-full flex">
-        <div class="sidebar-container">
+      <layout-container>
+        <template #left>
           <Sidebar />
-        </div>
-        <div class="view-container">
+        </template>
+        <template #right>
           <AppMain />
-        </div>
-      </div>
+        </template>
+      </layout-container>
     </div>
   </div>
 </template>
-
 <script setup lang="ts">
 import UserHeader from '@/layout/layout-header/UserHeader.vue'
 import Sidebar from '@/layout/components/sidebar/index.vue'
@@ -25,5 +23,5 @@ import useStore from '@/stores'
 const { user } = useStore()
 </script>
 <style lang="scss" scoped>
-@import './index.scss';
+@use './index.scss';
 </style>
diff --git a/ui/src/layout/layout-template/SimpleLayout.vue b/ui/src/layout/layout-template/SimpleLayout.vue
new file mode 100644
index 000000000..a8635e2a8
--- /dev/null
+++ b/ui/src/layout/layout-template/SimpleLayout.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import UserHeader from '@/layout/layout-header/UserHeader.vue'
+import AppMain from '@/layout/app-main/index.vue'
+</script>
+
+<template>
+  <div class="app-layout">
+    <div class="app-header">
+      <UserHeader />
+    </div>
+    <div class="app-main">
+      <AppMain />
+    </div>
+  </div>
+</template>
+<style lang="scss">
+@use './index.scss';
+</style>
diff --git a/ui/src/layout/layout-template/index.scss b/ui/src/layout/layout-template/index.scss
index 327f0c219..c48a10d48 100644
--- a/ui/src/layout/layout-template/index.scss
+++ b/ui/src/layout/layout-template/index.scss
@@ -22,14 +22,3 @@
     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/router/modules/model.ts b/ui/src/router/modules/model.ts
index b7b075a61..d9527b4a4 100644
--- a/ui/src/router/modules/model.ts
+++ b/ui/src/router/modules/model.ts
@@ -3,7 +3,7 @@ const ModelRouter = {
   name: 'model',
   meta: { title: 'views.model.title', permission: 'MODEL:READ' },
   redirect: '/model',
-  component: () => import('@/layout/layout-template/MainLayout.vue'),
+  component: () => import('@/layout/layout-template/SimpleLayout.vue'),
   children: [
     {
       path: '/model',
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index e6e06542d..f88cc3d8c 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -9,3 +9,11 @@
   // --el-text-color-primary: #1f2329;
   // --el-font-line-height-primary: 22px;
 }
+
+.el-avatar {
+  --el-avatar-bg-color: var(--el-color-primary);
+  --el-avatar-size-small: 33px;
+  --el-avatar-border-radius: 6px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
diff --git a/ui/src/views/model/component/CreateModelDialog.vue b/ui/src/views/model/component/CreateModelDialog.vue
index 88791fe87..8b5c344d4 100644
--- a/ui/src/views/model/component/CreateModelDialog.vue
+++ b/ui/src/views/model/component/CreateModelDialog.vue
@@ -275,7 +275,7 @@ import type { FormRules } from 'element-plus'
 import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message'
 import { PermissionType, PermissionDesc } from '@/enums/model'
 import { input_type_list } from '@/components/dynamics-form/constructor/data'
-import AddParamDrawer from '@/views/template/component/AddParamDrawer.vue'
+import AddParamDrawer from '@/views/model/component/AddParamDrawer.vue'
 import { t } from '@/locales'
 
 const providerValue = ref<Provider>()
diff --git a/ui/src/views/model/component/ModelCard.vue b/ui/src/views/model/component/ModelCard.vue
index 1b2237767..fd5299fe7 100644
--- a/ui/src/views/model/component/ModelCard.vue
+++ b/ui/src/views/model/component/ModelCard.vue
@@ -61,7 +61,7 @@
     </div>
     <!-- progress -->
     <div class="progress-mask" v-if="currentModel.status === 'DOWNLOAD'">
-      <DownloadLoading class="percentage" />
+      <!-- <DownloadLoading class="percentage" /> -->
 
       <div class="percentage-label flex-center">
         {{ $t('views.model.download.downloading') }} <span class="dotting"></span>
@@ -125,8 +125,8 @@
 import type { Provider, Model } from '@/api/type/model'
 import ModelApi from '@/api/model/model'
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
-import EditModel from '@/views/template/component/EditModel.vue'
-import DownloadLoading from '@/components/loading/DownloadLoading.vue'
+import EditModel from '@/views/model/component/EditModel.vue'
+// import DownloadLoading from '@/components/loading/DownloadLoading.vue'
 import { MsgConfirm } from '@/utils/message'
 import { modelType } from '@/enums/model'
 import useStore from '@/stores'
diff --git a/ui/src/views/model/component/Provider.vue b/ui/src/views/model/component/Provider.vue
new file mode 100644
index 000000000..69c27231c
--- /dev/null
+++ b/ui/src/views/model/component/Provider.vue
@@ -0,0 +1,3 @@
+<template>
+111
+</template>
diff --git a/ui/src/views/model/index.vue b/ui/src/views/model/index.vue
index e2d9553b9..8de34f3fb 100644
--- a/ui/src/views/model/index.vue
+++ b/ui/src/views/model/index.vue
@@ -1,8 +1,7 @@
 <template>
-  1111111111
-  <!-- <LayoutContainer :header="$t('views.model.title')">
-    <div class="model-manage flex main-calc-height">
-      <div class="model-manage__left p-8 border-r">
+  <LayoutContainer class="model-manage">
+    <template #left>
+      <div class="p-8">
         <h4 class="p-16">{{ $t('views.model.provider') }}</h4>
         <div class="model-list-height-left">
           <div
@@ -10,11 +9,11 @@
             @click="clickListHandle(allObj as Provider)"
             :class="!active_provider?.provider ? 'all-mode-active' : ''"
           >
-            <AppIcon
+            <!-- <AppIcon
               class="mr-8"
               style="height: 20px; width: 20px"
               :iconName="'app-all-menu-active'"
-            ></AppIcon>
+            ></AppIcon> -->
             <span>{{ $t('views.model.modelType.allModel') }}</span>
           </div>
 
@@ -22,10 +21,10 @@
             <el-collapse class="model-collapse">
               <el-collapse-item :title="$t('views.model.modelType.publicModel')" name="1">
                 <template #title>
-                  <img src="@/assets/icon_file-folder_colorful.svg" class="mr-8" />
+                  <!-- <img src="@/assets/icon_file-folder_colorful.svg" class="mr-8" /> -->
                   {{ $t('views.model.modelType.publicModel') }}
                 </template>
-                <common-list
+                <!-- <common-list
                   :data="online_provider_list"
                   v-loading="loading"
                   @click="clickListHandle"
@@ -44,14 +43,14 @@
                       <span>{{ row.name }}</span>
                     </div>
                   </template>
-                </common-list>
+                </common-list> -->
               </el-collapse-item>
               <el-collapse-item :title="$t('views.model.modelType.privateModel')" name="2">
                 <template #title>
-                  <img src="@/assets/icon_file-folder_colorful.svg" class="mr-8" />
+                  <!-- <img src="@/assets/icon_file-folder_colorful.svg" class="mr-8" /> -->
                   {{ $t('views.model.modelType.privateModel') }}
                 </template>
-                <common-list
+                <!-- <common-list
                   :data="local_provider_list"
                   v-loading="loading"
                   @click="clickListHandle"
@@ -70,118 +69,109 @@
                       <span>{{ row.name }}</span>
                     </div>
                   </template>
-                </common-list>
+                </common-list> -->
               </el-collapse-item>
             </el-collapse>
           </el-scrollbar>
         </div>
       </div>
-      <div class="model-manage__right w-full" v-loading="list_model_loading">
-        <div class="p-24 pb-0">
-          <h4>{{ active_provider?.name }}</h4>
-          <div class="flex-between mt-16 mb-16">
-            <el-button type="primary" @click="openCreateModel(active_provider)">
-              {{ $t('views.model.addModel') }}</el-button
-            >
-            <div class="flex-between complex-search">
-              <el-select
-                class="complex-search__left"
-                v-model="search_type"
-                style="width: 120px"
-                @change="search_type_change"
-              >
-                <el-option :label="$t('common.creator')" value="create_user" />
-                <el-option
-                  :label="$t('views.model.modelForm.form.permissionType.label')"
-                  value="permission_type"
-                />
-                <el-option
-                  :label="$t('views.model.modelForm.form.model_type.label')"
-                  value="model_type"
-                />
-                <el-option
-                  :label="$t('views.model.modelForm.form.templateName.label')"
-                  value="name"
-                />
-              </el-select>
-              <el-input
-                v-if="search_type === 'name'"
-                v-model="model_search_form.name"
-                @change="list_model"
-                :placeholder="$t('views.model.searchBar.placeholder')"
-                prefix-icon="Search"
-                style="width: 220px"
-                clearable
-              />
-              <el-select
-                v-else-if="search_type === 'create_user'"
-                v-model="model_search_form.create_user"
-                @change="list_model"
-                clearable
-                style="width: 220px"
-              >
-                <el-option
-                  v-for="u in user_options"
-                  :key="u.id"
-                  :value="u.id"
-                  :label="u.username"
-                />
-              </el-select>
-              <el-select
-                v-else-if="search_type === 'permission_type'"
-                v-model="model_search_form.permission_type"
-                clearable
-                @change="list_model"
-                style="width: 220px"
-              >
-                <el-option :label="$t('common.public')" value="PUBLIC" />
-                <el-option :label="$t('common.private')" value="PRIVATE" />
-              </el-select>
-              <el-select
-                v-else-if="search_type === 'model_type'"
-                v-model="model_search_form.model_type"
-                clearable
-                @change="list_model"
-                style="width: 220px"
-              >
-                <template v-for="item in modelTypeList" :key="item.value">
-                  <el-option :label="item.text" :value="item.value" />
-                </template>
-              </el-select>
-            </div>
-          </div>
-        </div>
-        <div class="model-list-height">
-          <el-scrollbar>
-            <div class="p-24 pt-0">
-              <el-row v-if="model_split_list.length > 0" :gutter="15">
-                <template v-for="(row, index) in model_split_list" :key="index">
-                  <el-col
-                    :xs="24"
-                    :sm="24"
-                    :md="24"
-                    :lg="12"
-                    :xl="12"
-                    class="mb-16"
-                    v-for="(model, i) in row"
-                    :key="i"
-                  >
-                    <ModelCard
-                      @change="list_model"
-                      :updateModelById="updateModelById"
-                      :model="model"
-                      :provider_list="provider_list"
-                    >
-                    </ModelCard>
-                  </el-col>
-                </template>
-              </el-row>
-              <el-empty :description="$t('common.noData')" v-else />
-            </div>
-          </el-scrollbar>
+    </template>
+    <ContentContainer :header="active_provider?.name" v-loading="list_model_loading">
+      <div class="flex-between mt-16 mb-16">
+        <el-button type="primary" @click="openCreateModel(active_provider)">
+          {{ $t('views.model.addModel') }}</el-button
+        >
+        <div class="flex-between complex-search">
+          <el-select
+            class="complex-search__left"
+            v-model="search_type"
+            style="width: 120px"
+            @change="search_type_change"
+          >
+            <el-option :label="$t('common.creator')" value="create_user" />
+            <el-option
+              :label="$t('views.model.modelForm.form.permissionType.label')"
+              value="permission_type"
+            />
+            <el-option
+              :label="$t('views.model.modelForm.form.model_type.label')"
+              value="model_type"
+            />
+            <el-option :label="$t('views.model.modelForm.form.templateName.label')" value="name" />
+          </el-select>
+          <el-input
+            v-if="search_type === 'name'"
+            v-model="model_search_form.name"
+            @change="list_model"
+            :placeholder="$t('views.model.searchBar.placeholder')"
+            prefix-icon="Search"
+            style="width: 220px"
+            clearable
+          />
+          <el-select
+            v-else-if="search_type === 'create_user'"
+            v-model="model_search_form.create_user"
+            @change="list_model"
+            clearable
+            style="width: 220px"
+          >
+            <el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.username" />
+          </el-select>
+          <el-select
+            v-else-if="search_type === 'permission_type'"
+            v-model="model_search_form.permission_type"
+            clearable
+            @change="list_model"
+            style="width: 220px"
+          >
+            <el-option :label="$t('common.public')" value="PUBLIC" />
+            <el-option :label="$t('common.private')" value="PRIVATE" />
+          </el-select>
+          <el-select
+            v-else-if="search_type === 'model_type'"
+            v-model="model_search_form.model_type"
+            clearable
+            @change="list_model"
+            style="width: 220px"
+          >
+            <template v-for="item in modelTypeList" :key="item.value">
+              <el-option :label="item.text" :value="item.value" />
+            </template>
+          </el-select>
         </div>
       </div>
-    </div>
+
+      <div class="model-list-height">
+        <el-scrollbar>
+          <div class="p-24 pt-0">
+            <el-row v-if="model_split_list.length > 0" :gutter="15">
+              <template v-for="(row, index) in model_split_list" :key="index">
+                <el-col
+                  :xs="24"
+                  :sm="24"
+                  :md="24"
+                  :lg="12"
+                  :xl="12"
+                  class="mb-16"
+                  v-for="(model, i) in row"
+                  :key="i"
+                >
+                  <ModelCard
+                    @change="list_model"
+                    :updateModelById="updateModelById"
+                    :model="model"
+                    :provider_list="provider_list"
+                  >
+                  </ModelCard>
+                </el-col>
+              </template>
+            </el-row>
+            <el-empty :description="$t('common.noData')" v-else />
+          </div>
+        </el-scrollbar>
+      </div>
+    </ContentContainer>
+
     <CreateModelDialog
       ref="createModelRef"
       @submit="list_model"
@@ -192,11 +182,121 @@
       ref="selectProviderRef"
       @change="(provider, modelType) => openCreateModel(provider, modelType)"
     ></SelectProviderDialog>
-  </LayoutContainer> -->
+  </LayoutContainer>
 </template>
 
 <script lang="ts" setup>
+import { onMounted, ref, computed } from 'vue'
+import ModelApi from '@/api/model/model'
+import type { Provider, Model } from '@/api/type/model'
+import ModelCard from '@/views/model/component/ModelCard.vue'
+import { splitArray } from '@/utils/common'
+import { modelTypeList } from '@/views/model/component/data'
+import CreateModelDialog from '@/views/model/component/CreateModelDialog.vue'
+import SelectProviderDialog from '@/views/model/component/SelectProviderDialog.vue'
+import { t } from '@/locales'
 
+const allObj = {
+  icon: '',
+  provider: '',
+  name: t('views.model.modelType.allModel'),
+}
+
+const commonList1 = ref()
+const commonList2 = ref()
+const loading = ref<boolean>(false)
+
+const active_provider = ref<Provider>()
+const search_type = ref('name')
+const model_search_form = ref<{
+  name: string
+  create_user: string
+  permission_type: string
+  model_type: string
+}>({
+  name: '',
+  create_user: '',
+  permission_type: '',
+  model_type: '',
+})
+const user_options = ref<any[]>([])
+const list_model_loading = ref<boolean>(false)
+const provider_list = ref<Array<Provider>>([])
+const online_provider_list = ref<Array<Provider>>([])
+const local_provider_list = ref<Array<Provider>>([])
+
+const model_list = ref<Array<Model>>([])
+
+const updateModelById = (model_id: string, model: Model) => {
+  model_list.value
+    .filter((m) => m.id == model_id)
+    .forEach((m) => {
+      m.status = model.status
+    })
+}
+const model_split_list = computed(() => {
+  return splitArray(model_list.value, 2)
+})
+const createModelRef = ref<InstanceType<typeof CreateModelDialog>>()
+const selectProviderRef = ref<InstanceType<typeof SelectProviderDialog>>()
+
+const clickListHandle = (item: Provider) => {
+  active_provider.value = item
+  list_model()
+  if (active_provider.value.provider === '') {
+    commonList1.value.clearCurrent()
+    commonList2.value.clearCurrent()
+  }
+}
+
+const openCreateModel = (provider?: Provider, model_type?: string) => {
+  console.log(provider)
+  console.log(model_type)
+  if (provider && provider.provider) {
+    createModelRef.value?.open(provider, model_type)
+  } else {
+    selectProviderRef.value?.open()
+  }
+}
+
+const list_model = () => {
+  const params = active_provider.value?.provider ? { provider: active_provider.value.provider } : {}
+  ModelApi.getModel({ ...model_search_form.value, ...params }, list_model_loading).then((ok) => {
+    model_list.value = ok.data
+    const v = model_list.value.map((m) => ({ id: m.user_id, username: m.username }))
+    if (user_options.value.length === 0) {
+      user_options.value = Array.from(new Map(v.map((item) => [item.id, item])).values())
+    }
+  })
+}
+
+const search_type_change = () => {
+  model_search_form.value = { name: '', create_user: '', permission_type: '', model_type: '' }
+}
+
+onMounted(() => {
+  ModelApi.getProvider(loading).then((ok) => {
+    active_provider.value = allObj
+    provider_list.value = [allObj, ...ok.data]
+
+    const local_provider = [
+      'model_ollama_provider',
+      'model_local_provider',
+      'model_xinference_provider',
+      'model_vllm_provider',
+    ]
+    ok.data.forEach((item) => {
+      if (local_provider.indexOf(item.provider) > -1) {
+        local_provider_list.value.push(item)
+      } else {
+        online_provider_list.value.push(item)
+      }
+    })
+    online_provider_list.value.sort((a, b) => a.provider.localeCompare(b.provider))
+    local_provider_list.value.sort((a, b) => a.provider.localeCompare(b.provider))
+    list_model()
+  })
+})
 </script>
 
 <style lang="scss" scoped>