feat: model

2025-12-31 10:12:51 +00:00 · 2025-05-13 16:19:21 +08:00 · 2025-05-13 16:19:21 +08:00 · d14b47373a
parent 4eed42b6a0
commit d14b47373a
17 changed files with 427 additions and 193 deletions
--- 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",
--- a/ui/src/components/app-icon/icons/folder.ts
+++ 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'
+            })
+          ]
+        )
+      ])
+    }
+  },
+}
--- 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,
 }
--- a/ui/src/components/common-list/index.vue
+++ 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>
--- 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"
--- 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)
  },
 }
--- 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;
  }
--- 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">
--- 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);
 }
--- a/ui/src/styles/component.scss
+++ 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);
+  }
+}
--- 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);
+  }
+}
--- 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';
--- 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;
 }
--- 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()
 })
--- 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;
--- 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;
--- 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()
 })