fix: left collapse

ui/src/components/layout-container/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="layout-container flex h-full">
-    <div class="layout-container__left border-r">
+    <div :class="`layout-container__left border-r ${isCollapse ? 'hidden' : ''}`">
-      <slot name="left"></slot>
+      <div class="layout-container__left_content">
+        <slot name="left"></slot>
+      </div>
+      <el-tooltip :content="isCollapse ? $t('common.expand') : $t('common.collapse')" placement="right">
+        <el-button v-if="props.showCollapse" class="collapse" size="small" circle @click="isCollapse = !isCollapse"
+          :icon="isCollapse ? 'ArrowRightBold' : 'ArrowLeftBold'" />
+      </el-tooltip>
     </div>
     <div class="layout-container__right">
       <slot></slot>
@@ -10,13 +16,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useSlots } from 'vue'
+import { computed, useSlots, ref } from 'vue'
 defineOptions({ name: 'LayoutContainer' })
 const slots = useSlots()
 const props = defineProps({
   header: String || null,
   backTo: String,
+  showCollapse: Boolean
 })
+
+const isCollapse = ref(false)
+
 const showBack = computed(() => {
   const { backTo } = props
   return backTo
@@ -26,13 +36,43 @@ const showBack = computed(() => {
 <style lang="scss" scoped>
 .layout-container {
   &__left {
+    position: relative;
     box-sizing: border-box;
     transition: width 0.28s;
     width: var(--sidebar-width);
     min-width: var(--sidebar-width);
+    box-sizing: border-box;
+
+    .collapse {
+      position: absolute;
+      top: 36px;
+      right: -15px;
+      box-shadow: 0px 5px 10px 0px #1f23291a;
+      z-index: 1;
+    }
+
+    .layout-container__left_content {
+      width: 100%;
+      height: 100%;
+    }
+
+    &.hidden {
+      width: 0;
+      min-width: 0;
+
+      .layout-container__left_content {
+        visibility: hidden;
+      }
+
+      .collapse {
+        right: -18px;
+      }
+    }
   }
+
   &__right {
-    width: calc(100% - var(--sidebar-width));
+    flex: 1;
+    overflow: hidden;
   }
 }
 </style>

ui/src/locales/lang/en-US/common.ts

@@ -98,4 +98,6 @@ export default {
   custom: 'Custom',
   moveTo: 'Move To',
   deleteConfirm: 'Confirm delete',
+  expand: 'Expand',
+  collapse: 'Collapse',
 }

ui/src/locales/lang/zh-CN/common.ts

@@ -102,4 +102,6 @@ export default {
   custom: '自定义',
   moveTo: '转移到',
   deleteConfirm: '是否删除',
+  expand: '展开',
+  collapse: '收起',
 }

ui/src/locales/lang/zh-Hant/common.ts

@@ -98,4 +98,6 @@ export default {
   custom: '自定義',
   moveTo: '移動到',
   deleteConfirm: '是否刪除',
+  expand: '展開',
+  collapse: '收起',
 }

ui/src/views/application/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer class="application-manage">
+  <LayoutContainer showCollapse class="application-manage">
     <template #left>
       <h4 class="p-12-16 pb-0 mt-12">{{ $t('views.application.title') }}</h4>
       <folder-tree

ui/src/views/chat/pc/index.vue

@@ -708,6 +708,7 @@ function closeExecutionDetail() {
       top: 20px;
       right: -15px;
       box-shadow: 0px 5px 10px 0px #1f23291a;
+      z-index: 1;
     }
   }
 

ui/src/views/knowledge/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer class="knowledge-manage">
+  <LayoutContainer showCollapse class="knowledge-manage">
     <template #left>
       <h4 class="p-12-16 pb-0 mt-12">{{ $t('views.knowledge.title') }}</h4>
       <folder-tree

ui/src/views/model/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer class="model-manage">
+  <LayoutContainer showCollapse class="model-manage">
     <template #left>
       <h4 class="p-12-16 pb-0 mt-12">{{ $t('views.model.provider') }}</h4>
       <ProviderComponent

ui/src/views/paragraph/index.vue

@@ -46,20 +46,22 @@
           </template>
         </el-input>
       </div>
-      <div class="flex">
+      <LayoutContainer showCollapse>
-        <div class="paragraph-sidebar p-16 border-r">
+        <template #left>
-          <el-anchor
+          <div class="paragraph-sidebar p-16">
-            direction="vertical"
+            <el-anchor
-            type="default"
+              direction="vertical"
-            :offset="130"
+              type="default"
-            container=".paragraph-scollbar"
+              :offset="130"
-            @click="handleClick"
+              container=".paragraph-scollbar"
-          >
+              @click="handleClick"
-            <template v-for="(item, index) in paragraphDetail" :key="item.id">
+            >
-              <el-anchor-link :href="`#m${item.id}`" :title="item.title" v-if="item.title" />
+              <template v-for="(item, index) in paragraphDetail" :key="item.id">
-            </template>
+                <el-anchor-link :href="`#m${item.id}`" :title="item.title" v-if="item.title" />
-          </el-anchor>
+              </template>
-        </div>
+            </el-anchor>
+          </div>
+        </template>
         <div class="w-full">
           <el-empty v-if="paragraphDetail.length == 0" :description="$t('common.noData')" />
           <div v-else>
@@ -117,7 +119,7 @@
             </el-scrollbar>
           </div>
         </div>
-      </div>
+      </LayoutContainer>
 
       <div class="mul-operation border-t w-full" v-if="isBatch === true">
         <el-button :disabled="multipleSelection.length === 0" @click="openGenerateDialog()">
@@ -343,7 +345,9 @@ onMounted(() => {
     top: calc(var(--app-base-px) + 4px);
   }
   .paragraph-sidebar {
-    width: 240px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
   }
 
   .paragraph-detail {

ui/src/views/tool/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer class="tool-manage">
+  <LayoutContainer showCollapse class="tool-manage">
     <template #left>
       <h4 class="p-12-16 pb-0 mt-12">{{ $t('views.tool.title') }}</h4>
       <folder-tree
@@ -13,7 +13,7 @@
         class="p-8"
       />
     </template>
-    <ToolListContainer @refreshFolder="refreshFolder">
+    <ToolListContainer>
       <template #header>
         <FolderBreadcrumb :folderList="folderList" @click="folderClickHandle" />
       </template>
@@ -60,9 +60,6 @@ function getFolder(bool?: boolean) {
 }
 
 function folderClickHandle(row: any) {
-  if (row.id === folder.currentFolder?.id) {
-    return
-  }
   folder.setCurrentFolder(row)
   tool.setToolList([])
 }