perf: 优化页面结构

perf: 优化页面结构

ui/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <RouterView />
+  <router-view />
 </template>
 
 <style scoped></style>

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)
   }
 })

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%;

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 {

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>

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',

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: [
     {

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',

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]
   },

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>