Skip to content

Commit

Permalink
perf: 优化页面结构
Browse files Browse the repository at this point in the history
perf: 优化页面结构
wangdan-fit2cloud authored Jul 10, 2024
2 parents c182311 + 0a6f6f0 commit db34290
Showing 10 changed files with 67 additions and 14 deletions.
2 changes: 1 addition & 1 deletion ui/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup lang="ts"></script>

<template>
<RouterView />
<router-view />
</template>

<style scoped></style>
5 changes: 2 additions & 3 deletions ui/src/layout/components/app-main/index.vue
Original file line number Diff line number Diff line change
@@ -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)
}
})
Original file line number Diff line number Diff line change
@@ -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%;
Original file line number Diff line number Diff line change
@@ -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 {
53 changes: 53 additions & 0 deletions ui/src/layout/layout-template/SystemLayout.vue
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 2 additions & 1 deletion ui/src/router/modules/application.ts
Original file line number Diff line number Diff line change
@@ -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',
3 changes: 2 additions & 1 deletion ui/src/router/modules/dataset.ts
Original file line number Diff line number Diff line change
@@ -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: [
{
2 changes: 1 addition & 1 deletion ui/src/router/modules/setting.ts
Original file line number Diff line number Diff line change
@@ -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',
1 change: 0 additions & 1 deletion ui/src/router/routes.ts
Original file line number Diff line number Diff line change
@@ -8,7 +8,6 @@ export const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: () => import('@/layout/app-layout/index.vue'),
redirect: '/application',
children: [...rolesRoutes]
},
8 changes: 4 additions & 4 deletions ui/src/views/authentication/index.vue
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit db34290

Please sign in to comment.