From 0a6f6f0114d9e9ea7b1f63657428cb5215a5e86b Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 10 Jul 2024 11:27:52 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/App.vue                                |  2 +-
 ui/src/layout/components/app-main/index.vue   |  5 +-
 .../AppLayout.vue}                            |  2 +-
 .../DetailLayout.vue}                         |  2 +-
 .../layout/layout-template/SystemLayout.vue   | 53 +++++++++++++++++++
 ui/src/router/modules/application.ts          |  3 +-
 ui/src/router/modules/dataset.ts              |  3 +-
 ui/src/router/modules/setting.ts              |  2 +-
 ui/src/router/routes.ts                       |  1 -
 ui/src/views/authentication/index.vue         |  8 +--
 10 files changed, 67 insertions(+), 14 deletions(-)
 rename ui/src/layout/{app-layout/index.vue => layout-template/AppLayout.vue} (95%)
 rename ui/src/layout/{main-layout/index.vue => layout-template/DetailLayout.vue} (90%)
 create mode 100644 ui/src/layout/layout-template/SystemLayout.vue

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 3ed4b37bf..86643068a 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <RouterView />
+  <router-view />
 </template>
 
 <style scoped></style>
diff --git a/ui/src/layout/components/app-main/index.vue b/ui/src/layout/components/app-main/index.vue
index d9a3fabe5..1598772f2 100644
--- a/ui/src/layout/components/app-main/index.vue
+++ b/ui/src/layout/components/app-main/index.vue
@@ -2,7 +2,7 @@
   <router-view v-slot="{ Component }">
     <transition appear name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
-        <component :is="Component" :key="route.fullPath" />
+        <component :is="Component" :key="route.path" />
       </keep-alive>
     </transition>
   </router-view>
@@ -17,8 +17,7 @@ const route = useRoute()
 const cachedViews: any = ref([])
 onBeforeUpdate(() => {
   const { name, meta } = route
-  let isCached = meta?.cache
-  if (isCached && name && !cachedViews.value.includes(name)) {
+  if (name && !cachedViews.value.includes(name)) {
     cachedViews.value.push(name)
   }
 })
diff --git a/ui/src/layout/app-layout/index.vue b/ui/src/layout/layout-template/AppLayout.vue
similarity index 95%
rename from ui/src/layout/app-layout/index.vue
rename to ui/src/layout/layout-template/AppLayout.vue
index 98c3f8019..f47a0b80a 100644
--- a/ui/src/layout/app-layout/index.vue
+++ b/ui/src/layout/layout-template/AppLayout.vue
@@ -12,7 +12,7 @@ import { TopBar, AppMain } from '../components'
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
+<style lang="scss">
 .app-layout {
   background-color: var(--app-layout-bg-color);
   height: 100%;
diff --git a/ui/src/layout/main-layout/index.vue b/ui/src/layout/layout-template/DetailLayout.vue
similarity index 90%
rename from ui/src/layout/main-layout/index.vue
rename to ui/src/layout/layout-template/DetailLayout.vue
index dbb9438b2..c996e938a 100644
--- a/ui/src/layout/main-layout/index.vue
+++ b/ui/src/layout/layout-template/DetailLayout.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { Sidebar, AppMain } from '../components'
+import { TopBar, Sidebar, AppMain } from '../components'
 </script>
 <style lang="scss">
 .sidebar-container {
diff --git a/ui/src/layout/layout-template/SystemLayout.vue b/ui/src/layout/layout-template/SystemLayout.vue
new file mode 100644
index 000000000..85887bcd7
--- /dev/null
+++ b/ui/src/layout/layout-template/SystemLayout.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="app-layout">
+    <div class="app-header">
+      <TopBar />
+    </div>
+    <div class="app-main">
+      <div class="main-layout h-full flex">
+        <div class="sidebar-container">
+          <Sidebar />
+        </div>
+        <div class="view-container">
+          <AppMain />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TopBar, Sidebar, AppMain } from '../components'
+</script>
+<style lang="scss">
+.app-layout {
+  background-color: var(--app-layout-bg-color);
+  height: 100%;
+}
+
+.app-main {
+  position: relative;
+  height: 100%;
+  padding: var(--app-header-height) 0 0 !important;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.app-header {
+  background: var(--app-header-bg-color);
+  position: fixed;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: 100;
+}
+.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));
+}
+</style>
diff --git a/ui/src/router/modules/application.ts b/ui/src/router/modules/application.ts
index b5f2822e1..366f49ac8 100644
--- a/ui/src/router/modules/application.ts
+++ b/ui/src/router/modules/application.ts
@@ -1,9 +1,10 @@
-import Layout from '@/layout/main-layout/index.vue'
+import Layout from '@/layout/layout-template/DetailLayout.vue'
 const applicationRouter = {
   path: '/application',
   name: 'application',
   meta: { title: '应用', permission: 'APPLICATION:READ' },
   redirect: '/application',
+  component: () => import('@/layout/layout-template/AppLayout.vue'),
   children: [
     {
       path: '/application',
diff --git a/ui/src/router/modules/dataset.ts b/ui/src/router/modules/dataset.ts
index abc8a5406..05177edd2 100644
--- a/ui/src/router/modules/dataset.ts
+++ b/ui/src/router/modules/dataset.ts
@@ -1,8 +1,9 @@
-import Layout from '@/layout/main-layout/index.vue'
+import Layout from '@/layout/layout-template/DetailLayout.vue'
 const datasetRouter = {
   path: '/dataset',
   name: 'dataset',
   meta: { title: '知识库', permission: 'DATASET:READ' },
+  component: () => import('@/layout/layout-template/AppLayout.vue'),
   redirect: '/dataset',
   children: [
     {
diff --git a/ui/src/router/modules/setting.ts b/ui/src/router/modules/setting.ts
index f9dd1e460..417bf0f59 100644
--- a/ui/src/router/modules/setting.ts
+++ b/ui/src/router/modules/setting.ts
@@ -1,5 +1,5 @@
 import { hasPermission } from '@/utils/permission/index'
-import Layout from '@/layout/main-layout/index.vue'
+import Layout from '@/layout/layout-template/SystemLayout.vue'
 import { Role } from '@/utils/permission/type'
 const settingRouter = {
   path: '/setting',
diff --git a/ui/src/router/routes.ts b/ui/src/router/routes.ts
index b865da0f5..82ddb0596 100644
--- a/ui/src/router/routes.ts
+++ b/ui/src/router/routes.ts
@@ -8,7 +8,6 @@ export const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'home',
-    component: () => import('@/layout/app-layout/index.vue'),
     redirect: '/application',
     children: [...rolesRoutes]
   },
diff --git a/ui/src/views/authentication/index.vue b/ui/src/views/authentication/index.vue
index 2a424951a..a4a84f67a 100644
--- a/ui/src/views/authentication/index.vue
+++ b/ui/src/views/authentication/index.vue
@@ -5,11 +5,11 @@
       <template v-for="(item, index) in tabList" :key="index">
         <el-tab-pane :label="item.label" :name="item.name">
           <div class="authentication-setting__main main-calc-height">
-            <div class="form-container">
-              <el-scrollbar>
+            <el-scrollbar>
+              <div class="form-container">
                 <component :is="item.component" />
-              </el-scrollbar>
-            </div>
+              </div>
+            </el-scrollbar>
           </div>
         </el-tab-pane>
       </template>