Skip to content

Commit c8ce7e2

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
feat: layout
1 parent 7be1173 commit c8ce7e2

File tree

15 files changed

+410
-143
lines changed

15 files changed

+410
-143
lines changed

‎ui/src/components/app-icon/index.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,48 @@ export const iconMap: any = {
7575
])
7676
},
7777
},
78+
'app-magnify': {
79+
iconReader: () => {
80+
return h('i', [
81+
h(
82+
'svg',
83+
{
84+
style: { height: '100%', width: '100%' },
85+
viewBox: '0 0 1024 1024',
86+
version: '1.1',
87+
xmlns: 'http://www.w3.org/2000/svg',
88+
},
89+
[
90+
h('path', {
91+
d: 'M366.165333 593.749333a21.333333 21.333333 0 0 1 30.208 0l30.165334 30.165334a21.333333 21.333333 0 0 1 0 30.208l-170.752 170.666666H377.173333a21.333333 21.333333 0 0 1 21.333334 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333334 21.333334H156.458667a42.538667 42.538667 0 0 1-42.666667-42.666667v-220.16a21.333333 21.333333 0 0 1 21.333333-21.333333h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v113.493333l167.04-167.04z m500.992-480a42.538667 42.538667 0 0 1 42.666667 42.666667v220.16a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333v-113.493333l-167.04 167.04a21.333333 21.333333 0 0 1-30.165334 0l-30.165333-30.165334a21.333333 21.333333 0 0 1 0-30.165333l170.709333-170.666667h-121.344a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333h220.672z',
92+
fill: 'currentColor',
93+
}),
94+
],
95+
),
96+
])
97+
},
98+
},
99+
'app-minify': {
100+
iconReader: () => {
101+
return h('i', [
102+
h(
103+
'svg',
104+
{
105+
style: { height: '100%', width: '100%' },
106+
viewBox: '0 0 1024 1024',
107+
version: '1.1',
108+
xmlns: 'http://www.w3.org/2000/svg',
109+
},
110+
[
111+
h('path', {
112+
d: 'M384.341333 597.205333a42.538667 42.538667 0 0 1 42.666667 42.666667v220.16a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333v-113.493333l-167.04 167.04a21.333333 21.333333 0 0 1-30.165334 0l-30.165333-30.208a21.333333 21.333333 0 0 1 0-30.165334l170.709333-170.666666H163.669333a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334h220.672zM849.92 110.506667a21.333333 21.333333 0 0 1 30.165333 0l30.165334 30.165333a21.333333 21.333333 0 0 1 0 30.165333l-170.709334 170.666667h121.344a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-220.672a42.538667 42.538667 0 0 1-42.666666-42.666666v-220.16a21.333333 21.333333 0 0 1 21.333333-21.333334h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333334v113.493333l167.04-166.997333z',
113+
fill: 'currentColor',
114+
}),
115+
],
116+
),
117+
])
118+
},
119+
},
78120
// 动态加载的图标
79121
...dynamicIcons,
80122
}

‎ui/src/components/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@ import LogoIcon from './logo/LogoIcon.vue'
44
import SendIcon from './logo/SendIcon.vue'
55
import dynamicsForm from './dynamics-form'
66
import AppIcon from './app-icon/AppIcon.vue'
7+
import LayoutContainer from './layout-container/index.vue'
8+
import ContentContainer from './layout-container/ContentContainer.vue'
79
export default {
810
install(app: App) {
911
app.component('LogoFull', LogoFull)
1012
app.component('LogoIcon', LogoIcon)
1113
app.component('SendIcon', SendIcon)
1214
app.use(dynamicsForm)
1315
app.component('AppIcon', AppIcon)
16+
app.component('LayoutContainer', LayoutContainer)
17+
app.component('ContentContainer', ContentContainer)
1418
},
1519
}

‎ui/src/components/layout-container/ContentContainer.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div class="content-container border-r-4">
3+
<div class="content-container__header flex align-center w-full" v-if="slots.header || header">
4+
<slot name="backButton">
5+
<back-button :to="backTo" v-if="showBack"></back-button>
6+
</slot>
7+
<slot name="header">
8+
<h4>{{ header }}</h4>
9+
</slot>
10+
</div>
11+
<el-scrollbar>
12+
<div class="content-container__main">
13+
<slot></slot>
14+
</div>
15+
</el-scrollbar>
16+
</div>
17+
</template>
18+
19+
<script setup lang="ts">
20+
import { computed, useSlots } from 'vue'
21+
defineOptions({ name: 'ContentContainer' })
22+
const slots = useSlots()
23+
const props = defineProps({
24+
header: String || null,
25+
backTo: String
26+
})
27+
const showBack = computed(() => {
28+
const { backTo } = props
29+
return backTo
30+
})
31+
</script>
32+
33+
<style lang="scss" scoped>
34+
.content-container {
35+
transition: 0.3s;
36+
padding: 0 var(--app-view-padding) var(--app-view-padding);
37+
.content-container__header {
38+
box-sizing: border-box;
39+
padding: 16px 0;
40+
flex-wrap: wrap;
41+
}
42+
.content-container__main {
43+
// background-color: var(--app-view-bg-color);
44+
box-sizing: border-box;
45+
min-width: 847px;
46+
}
47+
}
48+
</style>

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="layout-container flex h-full">
3+
<div class="layout-container__left">
4+
<slot name="left"></slot>
5+
</div>
6+
<div class="layout-container__right">
7+
<slot></slot>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script setup lang="ts">
13+
import { computed, useSlots } from 'vue'
14+
defineOptions({ name: 'LayoutContainer' })
15+
const slots = useSlots()
16+
const props = defineProps({
17+
header: String || null,
18+
backTo: String,
19+
})
20+
const showBack = computed(() => {
21+
const { backTo } = props
22+
return backTo
23+
})
24+
</script>
25+
26+
<style lang="scss" scoped>
27+
.layout-container {
28+
&__left {
29+
box-sizing: border-box;
30+
transition: width 0.28s;
31+
width: var(--sidebar-width);
32+
min-width: var(--sidebar-width);
33+
background-color: var(--sidebar-bg-color);
34+
}
35+
&__right {
36+
width: calc(100% - var(--sidebar-width));
37+
}
38+
}
39+
</style>

‎ui/src/enums/model.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export enum PermissionType {
2+
PRIVATE = 'common.private',
3+
PUBLIC = 'common.public'
4+
}
5+
export enum PermissionDesc {
6+
PRIVATE = 'views.model.templateForm.form.permissionType.privateDesc',
7+
PUBLIC = 'views.model.templateForm.form.permissionType.publicDesc',
8+
}
9+
10+
export enum modelType {
11+
EMBEDDING = 'views.model.modelType.EMBEDDING',
12+
LLM = 'views.model.modelType.LLM',
13+
STT = 'views.model.modelType.STT',
14+
TTS = 'views.model.modelType.TTS',
15+
IMAGE = 'views.model.modelType.IMAGE',
16+
TTI = 'views.model.modelType.TTI',
17+
RERANKER = 'views.model.modelType.RERANKER'
18+
}

‎ui/src/layout/layout-header/avatar/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<el-dropdown trigger="click" type="primary">
33
<div class="flex-center cursor">
4-
<AppAvatar>
4+
<el-avatar :size="30">
55
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
6-
</AppAvatar>
6+
</el-avatar>
77
<span class="ml-8">{{ user.userInfo?.username }}</span>
88
<el-icon class="el-icon--right">
99
<CaretBottom />

‎ui/src/layout/layout-template/MainLayout.vue‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,18 @@
33
<div class="app-header">
44
<UserHeader />
55
</div>
6-
76
<div class="app-main">
8-
<div class="main-layout h-full flex">
9-
<div class="sidebar-container">
7+
<layout-container>
8+
<template #left>
109
<Sidebar />
11-
</div>
12-
<div class="view-container">
10+
</template>
11+
<template #right>
1312
<AppMain />
14-
</div>
15-
</div>
13+
</template>
14+
</layout-container>
1615
</div>
1716
</div>
1817
</template>
19-
2018
<script setup lang="ts">
2119
import UserHeader from '@/layout/layout-header/UserHeader.vue'
2220
import Sidebar from '@/layout/components/sidebar/index.vue'
@@ -25,5 +23,5 @@ import useStore from '@/stores'
2523
const { user } = useStore()
2624
</script>
2725
<style lang="scss" scoped>
28-
@import './index.scss';
26+
@use './index.scss';
2927
</style>

‎ui/src/layout/layout-template/SimpleLayout.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script setup lang="ts">
2+
import UserHeader from '@/layout/layout-header/UserHeader.vue'
3+
import AppMain from '@/layout/app-main/index.vue'
4+
</script>
5+
6+
<template>
7+
<div class="app-layout">
8+
<div class="app-header">
9+
<UserHeader />
10+
</div>
11+
<div class="app-main">
12+
<AppMain />
13+
</div>
14+
</div>
15+
</template>
16+
<style lang="scss">
17+
@use './index.scss';
18+
</style>

‎ui/src/layout/layout-template/index.scss‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,3 @@
2222
padding-top: calc(var(--app-header-height) + 40px) !important;
2323
}
2424
}
25-
26-
.sidebar-container {
27-
box-sizing: border-box;
28-
transition: width 0.28s;
29-
width: var(--sidebar-width);
30-
min-width: var(--sidebar-width);
31-
background-color: var(--sidebar-bg-color);
32-
}
33-
.view-container {
34-
width: calc(100% - var(--sidebar-width));
35-
}

‎ui/src/router/modules/model.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const ModelRouter = {
33
name: 'model',
44
meta: { title: 'views.model.title', permission: 'MODEL:READ' },
55
redirect: '/model',
6-
component: () => import('@/layout/layout-template/MainLayout.vue'),
6+
component: () => import('@/layout/layout-template/SimpleLayout.vue'),
77
children: [
88
{
99
path: '/model',

0 commit comments

Comments
 (0)