From d14b47373a852a1cb89666c2f7d7c16165ccec7c Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 13 May 2025 16:19:21 +0800
Subject: [PATCH] feat: model

---
 ui/package.json                               |   2 +-
 ui/src/components/app-icon/icons/folder.ts    |  61 ++++
 ui/src/components/app-icon/index.ts           |  26 +-
 ui/src/components/common-list/index.vue       |  93 ++++++
 ui/src/components/folder-tree/index.vue       |   2 +-
 ui/src/components/index.ts                    |   2 +
 .../layout-container/ContentContainer.vue     |  18 +-
 ui/src/components/layout-container/index.vue  |   2 +-
 ui/src/styles/app.scss                        |   7 +
 ui/src/styles/component.scss                  |  14 +
 ui/src/styles/element-plus.scss               |  56 ++++
 ui/src/styles/index.scss                      |   1 +
 ui/src/styles/variables.scss                  |  23 +-
 ui/src/views/knowledge/index.vue              |  10 +-
 ui/src/views/model/component/ModelCard.vue    |  22 +-
 ui/src/views/model/index.vue                  | 273 +++++++++---------
 ui/src/views/tool/index.vue                   |   8 +-
 17 files changed, 427 insertions(+), 193 deletions(-)
 create mode 100644 ui/src/components/app-icon/icons/folder.ts
 create mode 100644 ui/src/components/common-list/index.vue
 create mode 100644 ui/src/styles/component.scss

diff --git a/ui/package.json b/ui/package.json
index 87e1c579e..f76c53ddc 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -16,7 +16,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "axios": "^1.8.4",
-    "element-plus": "^2.9.7",
+    "element-plus": "^2.9.10",
     "nprogress": "^0.2.0",
     "pinia": "^3.0.1",
     "use-element-plus-theme": "^0.0.5",
diff --git a/ui/src/components/app-icon/icons/folder.ts b/ui/src/components/app-icon/icons/folder.ts
new file mode 100644
index 000000000..963fadff0
--- /dev/null
+++ b/ui/src/components/app-icon/icons/folder.ts
@@ -0,0 +1,61 @@
+import { h } from 'vue'
+export default {
+  'app-folder': {
+    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: 'M42.666667 170.666667a42.666667 42.666667 0 0 1 42.666666-42.666667h357.632a42.666667 42.666667 0 0 1 38.144 23.594667L512 213.333333h426.666667a42.666667 42.666667 0 0 1 42.666666 42.666667v597.333333a42.666667 42.666667 0 0 1-42.666666 42.666667H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V170.666667z',
+              fill: '#FFA53D',
+            }),
+            h('path', {
+              d: 'M42.666667 256a42.666667 42.666667 0 0 1 42.666666-42.666667h853.333334a42.666667 42.666667 0 0 1 42.666666 42.666667v597.333333a42.666667 42.666667 0 0 1-42.666666 42.666667H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V256z',
+              fill: '#FFC60A',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
+  'app-all-menu-active': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M8.33317 1.6665H2.49984C2.0396 1.6665 1.6665 2.0396 1.6665 2.49984V8.33317C1.6665 8.79341 2.0396 9.1665 2.49984 9.1665H8.33317C8.79341 9.1665 9.1665 8.79341 9.1665 8.33317V2.49984C9.1665 2.0396 8.79341 1.6665 8.33317 1.6665Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M8.33317 10.8332H2.49984C2.0396 10.8332 1.6665 11.2063 1.6665 11.6665V17.4998C1.6665 17.9601 2.0396 18.3332 2.49984 18.3332H8.33317C8.79341 18.3332 9.1665 17.9601 9.1665 17.4998V11.6665C9.1665 11.2063 8.79341 10.8332 8.33317 10.8332Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M17.4998 1.6665H11.6665C11.2063 1.6665 10.8332 2.0396 10.8332 2.49984V8.33317C10.8332 8.79341 11.2063 9.1665 11.6665 9.1665H17.4998C17.9601 9.1665 18.3332 8.79341 18.3332 8.33317V2.49984C18.3332 2.0396 17.9601 1.6665 17.4998 1.6665Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M17.4508 10.8332H11.7155C11.2282 10.8332 10.8332 11.2282 10.8332 11.7155V17.4508C10.8332 17.9381 11.2282 18.3332 11.7155 18.3332H17.4508C17.9381 18.3332 18.3332 17.9381 18.3332 17.4508V11.7155C18.3332 11.2282 17.9381 10.8332 17.4508 10.8332Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+}
diff --git a/ui/src/components/app-icon/index.ts b/ui/src/components/app-icon/index.ts
index c88dd2655..65f578f19 100644
--- a/ui/src/components/app-icon/index.ts
+++ b/ui/src/components/app-icon/index.ts
@@ -117,31 +117,7 @@ export const iconMap: any = {
       ])
     },
   },
-  'app-folder': {
-    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: 'M42.666667 170.666667a42.666667 42.666667 0 0 1 42.666666-42.666667h357.632a42.666667 42.666667 0 0 1 38.144 23.594667L512 213.333333h426.666667a42.666667 42.666667 0 0 1 42.666666 42.666667v597.333333a42.666667 42.666667 0 0 1-42.666666 42.666667H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V170.666667z',
-              fill: '#FFA53D',
-            }),
-            h('path', {
-              d: 'M42.666667 256a42.666667 42.666667 0 0 1 42.666666-42.666667h853.333334a42.666667 42.666667 0 0 1 42.666666 42.666667v597.333333a42.666667 42.666667 0 0 1-42.666666 42.666667H85.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V256z',
-              fill: '#FFC60A',
-            }),
-          ],
-        ),
-      ])
-    },
-  },
+
   // 动态加载的图标
   ...dynamicIcons,
 }
diff --git a/ui/src/components/common-list/index.vue b/ui/src/components/common-list/index.vue
new file mode 100644
index 000000000..1e3784251
--- /dev/null
+++ b/ui/src/components/common-list/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="common-list">
+    <ul v-if="data.length > 0">
+      <template v-for="(item, index) in data" :key="index">
+        <li
+          @click.stop="clickHandle(item, index)"
+          :class="current === item[props.valueKey] ? 'active color-primary-1' : ''"
+          class="cursor"
+          @mouseenter.stop="mouseenter(item)"
+          @mouseleave.stop="mouseleave()"
+        >
+          <slot :row="item" :index="index"> </slot>
+        </li>
+      </template>
+    </ul>
+    <slot name="empty" v-else>
+      <el-empty :description="$t('common.noData')" />
+    </slot>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+defineOptions({ name: 'CommonList' })
+
+const props = withDefaults(
+  defineProps<{
+    data: Array<any>
+    defaultActive?: string
+    valueKey?: string // 唯一标识的键名
+  }>(),
+  {
+    data: () => [],
+    defaultActive: '',
+    valueKey: 'id'
+  }
+)
+
+const current = ref<Number | String>(0)
+
+watch(
+  () => props.defaultActive,
+  (val) => {
+    current.value = val
+  },
+  { immediate: true }
+)
+
+const emit = defineEmits(['click', 'mouseenter', 'mouseleave'])
+
+function mouseenter(row: any) {
+  emit('mouseenter', row)
+}
+function mouseleave() {
+  emit('mouseleave')
+}
+
+function clickHandle(row: any, index: number) {
+  current.value = row[props.valueKey]
+  emit('click', row)
+}
+
+function clearCurrent() {
+  current.value = 0
+}
+defineExpose({
+  clearCurrent
+})
+</script>
+<style lang="scss" scoped>
+/* 通用 ui li样式 */
+.common-list {
+  li {
+    padding: 8px 16px;
+    font-weight: 400;
+    color: var(--el-text-color-regular);
+    font-size: 14px;
+    margin-bottom: 4px;
+    &.active {
+      border-radius: 4px;
+      color: var(--el-color-primary);
+      font-weight: 500;
+      &:hover {
+        background: var(--el-color-primary-light-9);
+      }
+    }
+    &:hover {
+      border-radius: 4px;
+      background: var(--app-text-color-light-1);
+    }
+  }
+}
+</style>
diff --git a/ui/src/components/folder-tree/index.vue b/ui/src/components/folder-tree/index.vue
index 2b208e524..fd5d95431 100644
--- a/ui/src/components/folder-tree/index.vue
+++ b/ui/src/components/folder-tree/index.vue
@@ -5,7 +5,7 @@
       :placeholder="$t('common.search')"
       prefix-icon="Search"
       clearable
-      class="p-8"
+      class="p-16"
     />
     <el-tree
       ref="treeRef"
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 13bb4a3a1..ce051f760 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -8,6 +8,7 @@ import LayoutContainer from './layout-container/index.vue'
 import ContentContainer from './layout-container/ContentContainer.vue'
 import CardBox from './card-box/index.vue'
 import FolderTree from './folder-tree/index.vue'
+import CommonList from './common-list/index.vue'
 export default {
   install(app: App) {
     app.component('LogoFull', LogoFull)
@@ -19,5 +20,6 @@ export default {
     app.component('ContentContainer', ContentContainer)
     app.component('CardBox', CardBox)
     app.component('FolderTree', FolderTree)
+    app.component('CommonList', CommonList)
   },
 }
diff --git a/ui/src/components/layout-container/ContentContainer.vue b/ui/src/components/layout-container/ContentContainer.vue
index f83b92ff4..647d83e97 100644
--- a/ui/src/components/layout-container/ContentContainer.vue
+++ b/ui/src/components/layout-container/ContentContainer.vue
@@ -1,15 +1,20 @@
 <template>
-  <div class="content-container border-r-4 p-16-24">
+  <div class="content-container">
     <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 class="flex-between w-full">
+        <slot name="header">
+          <h4>{{ header }}</h4>
+        </slot>
+        <slot name="search">
+          <h4>{{ header }}</h4>
+        </slot>
+      </div>
     </div>
 
-    <div class="content-container__main">
+    <div class="content-container__main p-16">
       <slot></slot>
     </div>
   </div>
@@ -34,11 +39,10 @@ const showBack = computed(() => {
   transition: 0.3s;
   .content-container__header {
     box-sizing: border-box;
-    padding: calc(var(--app-base-px) * 2) 0;
+    padding: calc(var(--app-base-px) * 2) calc(var(--app-base-px) * 2) 0;
     flex-wrap: wrap;
   }
   .content-container__main {
-    // background-color: var(--app-view-bg-color);
     box-sizing: border-box;
     min-width: 447px;
   }
diff --git a/ui/src/components/layout-container/index.vue b/ui/src/components/layout-container/index.vue
index 81399c610..fa604a048 100644
--- a/ui/src/components/layout-container/index.vue
+++ b/ui/src/components/layout-container/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layout-container flex h-full">
-    <div class="layout-container__left border-r p-8">
+    <div class="layout-container__left border-r">
       <slot name="left"></slot>
     </div>
     <div class="layout-container__right">
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 5983a6646..9647a5e5a 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -1,3 +1,4 @@
+$primary-color: #3370ff;
 @font-face {
   font-family: AlibabaPuHuiTi;
   src:
@@ -373,6 +374,12 @@ h5 {
 }
 
 // 颜色
+.color-primary-1 {
+  background: rgba($primary-color, 0.1);
+}
+.color-primary {
+  color: var(--el-color-primary);
+}
 .color-text-primary {
   color: var(--el-text-color-primary);
 }
diff --git a/ui/src/styles/component.scss b/ui/src/styles/component.scss
new file mode 100644
index 000000000..0b077e383
--- /dev/null
+++ b/ui/src/styles/component.scss
@@ -0,0 +1,14 @@
+// 复合搜索框
+.complex-search {
+  border: 1px solid var(--el-border-color);
+  border-radius: var(--el-border-radius-base);
+  .el-select__wrapper {
+    box-shadow: none !important;
+  }
+  .el-input__wrapper {
+    box-shadow: none !important;
+  }
+  &__left {
+    border-right: 1px solid var(--el-border-color);
+  }
+}
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 99da2ae08..30aae5095 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -43,3 +43,59 @@ $primary-color: #3370ff;
   color: var(--app-text-color-secondary);
   font-size: 16px;
 }
+
+// button
+.el-button {
+  --el-button-font-weight: 400;
+  padding: 5px 12px;
+  &.is-text {
+    padding: 4px !important;
+    font-size: 16px;
+    max-height: 24px;
+    &:not(.is-disabled):hover {
+      background: var(--app-text-color-light-1);
+    }
+  }
+  &:focus {
+    color: var(--el-button-text-color);
+    background-color: var(--el-button-bg-color);
+    border-color: var(--el-button-border-color);
+  }
+  &.is-link:focus {
+    background: none;
+    border: none;
+  }
+}
+.el-button--text {
+  border: none !important;
+  &:focus {
+    border: none !important;
+  }
+}
+.el-button--large {
+  font-size: 16px;
+}
+
+
+// dropdown
+.el-dropdown {
+  color: var(--app-text-color);
+}
+.el-dropdown-menu__item {
+  color: var(--app-text-color);
+  font-weight: 400;
+  padding: 5px 11px;
+  i {
+    margin-right: 8px;
+  }
+  &:not(.is-disabled):focus,
+  &:not(.is-active):focus {
+    background-color: var(--app-text-color-light-1);
+    color: var(--app-text-color);
+  }
+  &.is-active,
+  &.is-active:hover {
+    color: var(--el-menu-active-color);
+    background: var(--el-color-primary-light-9);
+  }
+}
diff --git a/ui/src/styles/index.scss b/ui/src/styles/index.scss
index 7cb7783e5..7f452a1a3 100644
--- a/ui/src/styles/index.scss
+++ b/ui/src/styles/index.scss
@@ -2,4 +2,5 @@
 @use './element-plus.scss';
 @use './variables.scss';
 @use './app.scss';
+@use './component.scss';
 @import 'nprogress/nprogress.css';
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index 321f03049..181e58707 100644
--- a/ui/src/styles/variables.scss
+++ b/ui/src/styles/variables.scss
@@ -8,13 +8,16 @@
   --app-view-padding: 24px;
   --app-view-bg-color: #ffffff;
   --app-border-color-dark: #bbbfc4;
-  --md-bk-hover-color:var(--el-border-color-hover);
+  --md-bk-hover-color: var(--el-border-color-hover);
   /** header 组件 */
   --app-header-height: 56px;
   --app-header-padding: 0 20px;
   --app-header-bg-color: linear-gradient(90deg, #ebf1ff 24.34%, #e5fbf8 56.18%, #f2ebfe 90.18%);
-  --app-logo-color: linear-gradient(180deg, #3370FF 0%, #7f3bf5 100%);
-  --app-avatar-gradient-color: linear-gradient(270deg, #9258f7 0%, #3370FF 100%);
+  --app-logo-color: linear-gradient(180deg, #3370ff 0%, #7f3bf5 100%);
+  --app-avatar-gradient-color: linear-gradient(270deg, #9258f7 0%, #3370ff 100%);
+
+  /* 计算高度 */
+  --app-main-height: calc(100% - var(--app-header-height));
 
   /** sidebar 组件 */
   --sidebar-width: 240px;
@@ -32,17 +35,7 @@
   --card-min-height: 166px;
   --card-min-width: 220px;
 
-  /** setting */
-  --setting-left-width: 280px;
-
-  /** dataset */
-  --create-dataset-height: calc(var(--app-main-height) - 70px);
-
   /** ai-chat */
-  --dialog-bg-gradient-color: linear-gradient(
-      188deg,
-      rgba(235, 241, 255, 0.2) 39.6%,
-      rgba(231, 249, 255, 0.2) 94.3%
-    ),
-    #eff0f1;
+  --dialog-bg-gradient-color:
+    linear-gradient(188deg, rgba(235, 241, 255, 0.2) 39.6%, rgba(231, 249, 255, 0.2) 94.3%), #eff0f1;
 }
diff --git a/ui/src/views/knowledge/index.vue b/ui/src/views/knowledge/index.vue
index e916f52e1..5911851d9 100644
--- a/ui/src/views/knowledge/index.vue
+++ b/ui/src/views/knowledge/index.vue
@@ -1,7 +1,7 @@
 <template>
   <LayoutContainer class="knowledge-manage">
     <template #left>
-      <h4 class="p-8">{{ $t('views.knowledge.title') }}</h4>
+      <h4 class="p-16 pb-0">{{ $t('views.knowledge.title') }}</h4>
       <folder-tree
         :data="folderList"
         :currentNodeKey="currentFolder?.id"
@@ -107,13 +107,19 @@ function getList() {
 
 function getFolder() {
   const params = {}
-  folder.asynGetFolder('default', 'KNOWLEDGE', params, loading).then((res) => {
+  folder.asynGetFolder('default', 'KNOWLEDGE', params, loading).then((res: any) => {
     folderList.value = res.data
     currentFolder.value = res.data?.[0] || {}
     getList()
   })
 }
 
+function folderClickHandel(row: any) {
+  // currentFolder.value = row
+  // toolList.value = []
+  // getList()
+}
+
 onMounted(() => {
   getFolder()
 })
diff --git a/ui/src/views/model/component/ModelCard.vue b/ui/src/views/model/component/ModelCard.vue
index 1f1f6d52b..460ff4798 100644
--- a/ui/src/views/model/component/ModelCard.vue
+++ b/ui/src/views/model/component/ModelCard.vue
@@ -64,19 +64,21 @@
 
     <template #mouseEnter>
       <div class="operation-button">
-        <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
-          <el-button text :disabled="!is_permisstion" @click.stop="openEditModel">
-            <el-icon>
-              <el-icon><EditPen /></el-icon>
-            </el-icon>
-          </el-button>
-        </el-tooltip>
         <el-dropdown trigger="click">
           <el-button text @click.stop>
             <el-icon><MoreFilled /></el-icon>
           </el-button>
           <template #dropdown>
             <el-dropdown-menu>
+              <el-dropdown-item
+                icon="EditPen"
+                :disabled="!is_permisstion"
+                text
+                @click.stop="openEditModel"
+              >
+                {{ $t('common.modify') }}
+              </el-dropdown-item>
+
               <el-dropdown-item
                 v-if="
                   currentModel.model_type === 'TTS' ||
@@ -91,6 +93,7 @@
                 {{ $t('views.model.modelForm.title.paramSetting') }}
               </el-dropdown-item>
               <el-dropdown-item
+                divided
                 icon="Delete"
                 :disabled="!is_permisstion"
                 text
@@ -230,11 +233,8 @@ onBeforeUnmount(() => {
   .operation-button {
     position: absolute;
     right: 12px;
-    top: 18px;
+    bottom: 12px;
     height: auto;
-    .el-button + .el-button {
-      margin-left: 4px;
-    }
   }
   .progress-mask {
     position: absolute;
diff --git a/ui/src/views/model/index.vue b/ui/src/views/model/index.vue
index 7b69f24f8..074f47d3e 100644
--- a/ui/src/views/model/index.vue
+++ b/ui/src/views/model/index.vue
@@ -1,30 +1,38 @@
 <template>
   <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
-            class="all-mode flex cursor"
-            @click="clickListHandle(allObj as Provider)"
-            :class="!active_provider?.provider ? 'all-mode-active' : ''"
-          >
-            <!-- <AppIcon
-              class="mr-8"
-              style="height: 20px; width: 20px"
-              :iconName="'app-all-menu-active'"
-            ></AppIcon> -->
-            <span>{{ $t('views.model.modelType.allModel') }}</span>
-          </div>
+      <h4 class="p-16 mb-8 pb-0">{{ $t('views.model.provider') }}</h4>
+      <div class="model-manage-height-left">
+        <el-scrollbar>
+          <div class="p-8">
+            <div
+              class="all-mode flex cursor"
+              @click="clickListHandle(allObj as Provider)"
+              :class="!active_provider?.provider ? 'all-mode-active color-primary-1' : ''"
+            >
+              <AppIcon
+                class="mr-8 color-primary"
+                style="height: 20px; width: 20px"
+                :iconName="'app-all-menu-active'"
+              ></AppIcon>
+              <span>{{ $t('views.model.modelType.allModel') }}</span>
+            </div>
 
-          <el-scrollbar>
-            <el-collapse class="model-collapse">
-              <el-collapse-item :title="$t('views.model.modelType.publicModel')" name="1">
+            <el-collapse class="model-collapse" expand-icon-position="left">
+              <el-collapse-item
+                :title="$t('views.model.modelType.publicModel')"
+                name="1"
+                icon="CaretRight"
+              >
                 <template #title>
-                  <!-- <img src="@/assets/icon_file-folder_colorful.svg" class="mr-8" /> -->
-                  {{ $t('views.model.modelType.publicModel') }}
+                  <div class="flex align-center">
+                    <AppIcon iconName="app-folder" style="font-size: 20px"></AppIcon>
+                    <span class="ml-8">
+                      {{ $t('views.model.modelType.publicModel') }}
+                    </span>
+                  </div>
                 </template>
-                <!-- <common-list
+                <common-list
                   :data="online_provider_list"
                   v-loading="loading"
                   @click="clickListHandle"
@@ -40,17 +48,25 @@
                         style="height: 20px; width: 20px"
                         class="mr-8"
                       />
-                      <span>{{ row.name }}</span>
+                      <span class="ellipsis-1" :title="row.name">{{ row.name }}</span>
                     </div>
                   </template>
-                </common-list> -->
+                </common-list>
               </el-collapse-item>
-              <el-collapse-item :title="$t('views.model.modelType.privateModel')" name="2">
+              <el-collapse-item
+                :title="$t('views.model.modelType.privateModel')"
+                name="2"
+                icon="CaretRight"
+              >
                 <template #title>
-                  <!-- <img src="@/assets/icon_file-folder_colorful.svg" class="mr-8" /> -->
-                  {{ $t('views.model.modelType.privateModel') }}
+                  <div class="flex align-center">
+                    <AppIcon iconName="app-folder" style="font-size: 20px"></AppIcon>
+                    <span class="ml-8">
+                      {{ $t('views.model.modelType.privateModel') }}
+                    </span>
+                  </div>
                 </template>
-                <!-- <common-list
+                <common-list
                   :data="local_provider_list"
                   v-loading="loading"
                   @click="clickListHandle"
@@ -66,108 +82,111 @@
                         style="height: 20px; width: 20px"
                         class="mr-8"
                       />
-                      <span>{{ row.name }}</span>
+                      <span class="ellipsis-1" :title="row.name">{{ row.name }}</span>
                     </div>
                   </template>
-                </common-list> -->
+                </common-list>
               </el-collapse-item>
             </el-collapse>
-          </el-scrollbar>
-        </div>
+          </div>
+        </el-scrollbar>
       </div>
     </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"
+      <template #search>
+        <div class="flex">
+          <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-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-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>
+          <el-button class="ml-16" type="primary" @click="openCreateModel(active_provider)">
+            {{ $t('views.model.addModel') }}</el-button
           >
-            <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>
+      </template>
 
       <div class="model-list-height">
         <el-scrollbar>
-          <div>
-            <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="12"
-                  :md="12"
-                  :lg="8"
-                  :xl="6"
-                  class="mb-16"
-                  v-for="(model, i) in row"
-                  :key="i"
+          <el-row v-if="model_split_list.length > 0" :gutter="15" class="w-full">
+            <template v-for="(row, index) in model_split_list" :key="index">
+              <el-col
+                :xs="24"
+                :sm="12"
+                :md="12"
+                :lg="8"
+                :xl="6"
+                class="mb-16"
+                v-for="(model, i) in row"
+                :key="i"
+              >
+                <ModelCard
+                  @change="list_model"
+                  :updateModelById="updateModelById"
+                  :model="model"
+                  :provider_list="provider_list"
                 >
-                  <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>
+                </ModelCard>
+              </el-col>
+            </template>
+          </el-row>
+          <el-empty :description="$t('common.noData')" v-else />
         </el-scrollbar>
       </div>
     </ContentContainer>
@@ -304,35 +323,30 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .model-manage {
-  &__left {
-    box-sizing: border-box;
-    width: var(--setting-left-width);
-    min-width: var(--setting-left-width);
-  }
-
   .model-list-height {
-    height: calc(var(--create-dataset-height) - 80px);
+    height: calc(var(--app-main-height));
   }
 
-  .model-list-height-left {
-    height: calc(var(--create-dataset-height) - 40px);
+  .model-manage-height-left {
+    height: calc(var(--app-main-height));
   }
   .all-mode {
-    padding: 10px 16px;
+    padding: 10px 8px;
+    font-weight: 400;
   }
   .all-mode-active {
-    background: var(--el-color-primary-light-9);
     border-radius: 4px;
     color: var(--el-color-primary);
-    font-weight: 500;
+    font-weight: 500 !important;
   }
   .model-collapse {
     border-top: none !important;
     border-bottom: none !important;
     :deep(.el-collapse-item__header) {
       border-bottom: none !important;
-      padding-left: 16px;
+      padding-left: 8px;
       font-size: 14px;
+      font-weight: 400;
       height: 40px;
       background: none;
       &:hover {
@@ -345,11 +359,12 @@ onMounted(() => {
     }
     :deep(.common-list) {
       li {
-        padding-left: 30px !important;
+        padding-left: 50px !important;
       }
     }
     :deep(.el-collapse-item__wrap) {
       border-bottom: none !important;
+      background: none !important;
     }
     :deep(.el-collapse-item__content) {
       padding-bottom: 0 !important;
diff --git a/ui/src/views/tool/index.vue b/ui/src/views/tool/index.vue
index b8bb78df7..70aa6b6e5 100644
--- a/ui/src/views/tool/index.vue
+++ b/ui/src/views/tool/index.vue
@@ -1,7 +1,7 @@
 <template>
   <LayoutContainer class="tool-manage">
     <template #left>
-      <h4 class="p-8">{{ $t('views.tool.title') }}</h4>
+      <h4 class="p-16 pb-0">{{ $t('views.tool.title') }}</h4>
       <folder-tree
         :data="folderList"
         :currentNodeKey="currentFolder?.id"
@@ -79,6 +79,12 @@ function getFolder() {
   })
 }
 
+function folderClickHandel(row: any) {
+  // currentFolder.value = row
+  // toolList.value = []
+  // getList()
+}
+
 onMounted(() => {
   getFolder()
 })