Skip to content

Commit d1634a3

Browse files
walle233LeezQ
walle233
authored and
LeezQ
committed
feat: App side menus (labring#157)
* fix: goto app-console * chore: build && docker deploy * docs: add readme * feat: add app menus
1 parent 24e5027 commit d1634a3

29 files changed

+411
-18
lines changed

‎packages/web/.vscode/settings.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"cSpell.words": ["Vitesse"],
2+
"cSpell.words": ["Vitesse", "pinia"],
33
"prettier.enable": false,
44
"editor.codeActionsOnSave": {
55
"source.fixAll.eslint": true

‎packages/web/auto-imports.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ declare global {
110110
const useAttrs: typeof import('vue')['useAttrs']
111111
const useBase64: typeof import('@vueuse/core')['useBase64']
112112
const useBattery: typeof import('@vueuse/core')['useBattery']
113+
const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
113114
const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
114115
const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
115116
const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
@@ -157,6 +158,7 @@ declare global {
157158
const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
158159
const useI18n: typeof import('vue-i18n')['useI18n']
159160
const useIdle: typeof import('@vueuse/core')['useIdle']
161+
const useImage: typeof import('@vueuse/core')['useImage']
160162
const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
161163
const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
162164
const useInterval: typeof import('@vueuse/core')['useInterval']

‎packages/web/components.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ declare module '@vue/runtime-core' {
77
export interface GlobalComponents {
88
CommonOpener: typeof import('./src/components/CommonOpener.vue')['default']
99
Counter: typeof import('./src/components/Counter.vue')['default']
10+
ElAside: typeof import('element-plus/es')['ElAside']
1011
ElButton: typeof import('element-plus/es')['ElButton']
1112
ElCard: typeof import('element-plus/es')['ElCard']
1213
ElContainer: typeof import('element-plus/es')['ElContainer']
@@ -20,10 +21,13 @@ declare module '@vue/runtime-core' {
2021
ElIcon: typeof import('element-plus/es')['ElIcon']
2122
ElInput: typeof import('element-plus/es')['ElInput']
2223
ElMain: typeof import('element-plus/es')['ElMain']
24+
ElMenu: typeof import('element-plus/es')['ElMenu']
25+
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
2326
ElRadio: typeof import('element-plus/es')['ElRadio']
2427
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
2528
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
2629
ElSpace: typeof import('element-plus/es')['ElSpace']
30+
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
2731
ElTable: typeof import('element-plus/es')['ElTable']
2832
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
2933
ElTag: typeof import('element-plus/es')['ElTag']

‎packages/web/pnpm-lock.yaml

+20
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/web/scripts/extend-route.ts

+10
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { resolveComponentNameByPath } from './utils'
1010
export default function extendRoute(route: RouteRecordRaw) {
1111
if (!route.component)
1212
return route
13+
1314
const fileName = route.component as any as string
1415
const routeName = route.name as string
1516
// update route.name
@@ -19,5 +20,14 @@ export default function extendRoute(route: RouteRecordRaw) {
1920
...route.meta,
2021
componentName: resolveComponentNameByPath(resolve(process.cwd(), `.${fileName}`)),
2122
}
23+
24+
if (route.path === '/login' || route.path === '/register' || route.path === '/')
25+
route.meta.requiresAuth = false
26+
else
27+
route.meta.requiresAuth = true
28+
29+
if (route.path.startsWith('/app/'))
30+
route.meta.layout = 'AppLayout'
31+
2232
return route
2333
}

‎packages/web/src/layout/AppLayout.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script lang="ts" setup>
2+
import TopBar from './components/TopBar.vue'
3+
import SideBar from './components/SideBar/index.vue'
4+
</script>
5+
6+
<template>
7+
<el-container fixed top-0 bottom-0 left-0 right-0>
8+
<el-header relative z-5 style="--el-header-padding: 0;">
9+
<top-bar />
10+
</el-header>
11+
12+
<el-container>
13+
<side-bar />
14+
15+
<el-main style="--el-main-padding: 0;" bg-light pt-10 flex>
16+
<el-scrollbar>
17+
<div p-6 h-screen>
18+
<router-view />
19+
</div>
20+
</el-scrollbar>
21+
</el-main>
22+
</el-container>
23+
</el-container>
24+
</template>

‎packages/web/src/layout/components/SideBar/SideItem.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
<el-sub-menu index="1">
7+
<template #title>
8+
<el-icon><location /></el-icon>
9+
<span>Navigator One</span>
10+
</template>
11+
<el-menu-item index="1-1">
12+
item one one
13+
</el-menu-item>
14+
<el-menu-item index="1-2">
15+
item one two
16+
</el-menu-item>
17+
</el-sub-menu>
18+
</template>

‎packages/web/src/layout/components/SideBar/index.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup lang="ts">
2+
import { useMenuStore } from '~/store'
3+
4+
const router = useRouter()
5+
const menuStore = useMenuStore()
6+
7+
const menus = ref<any>(menuStore.appMenus)
8+
9+
const switchRoute = (item: any) => {
10+
const path = item.path
11+
router.push(path)
12+
}
13+
</script>
14+
15+
<template>
16+
<el-aside width="200px">
17+
<el-scrollbar>
18+
<el-menu
19+
h-screen
20+
>
21+
<el-sub-menu v-for="item in menus" :key="item.name" :collapse="false" :index="item.name">
22+
<template #title>
23+
<el-icon><setting /></el-icon>
24+
<span>{{ item.name }}</span>
25+
</template>
26+
<el-menu-item v-for="child in item.children" :key="child.path" :index="child.path" @click="switchRoute(child)">
27+
<!-- <el-icon><location /></el-icon> -->
28+
<span>{{ child.name }}</span>
29+
</el-menu-item>
30+
</el-sub-menu>
31+
</el-menu>
32+
</el-scrollbar>
33+
</el-aside>
34+
</template>

‎packages/web/src/pages/account/login.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const login = async (loginEl: FormInstance | undefined) => {
4343
if (res.error)
4444
loginForm.password = ''
4545
46-
goPage('/application')
46+
goPage('/apps')
4747
})
4848
}
4949
</script>

‎packages/web/src/pages/app/[appid]/cloudfunction/index.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import { useAppStore } from '~/store'
3+
4+
const route = useRoute()
5+
const appid = route.params.appid
6+
7+
const appStore = useAppStore()
8+
const app = appStore.currentApp
9+
</script>
10+
11+
<template>
12+
cloud function index {{ appid }} {{ app }}
13+
</template>
14+
15+
<route lang="yaml">
16+
name: cloudFunction
17+
meta:
18+
title: 云函数
19+
icon: cloud-function
20+
index: 1-0
21+
</route>

‎packages/web/src/pages/app/[appid]/cloudfunction/logs.vue

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
logs
7+
</template>
8+
9+
<route lang="yaml">
10+
name: logs
11+
meta:
12+
title: 云函数日志
13+
hidden: true
14+
index: 1-1
15+
</route>

‎packages/web/src/pages/app/[appid]/cloudfunction/packages.vue

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script setup lang="ts">
2+
</script>
3+
4+
<template>
5+
packages
6+
</template>
7+
8+
<route lang="yaml">
9+
name: packages
10+
meta:
11+
title: 云函数依赖
12+
index: 1-2
13+
</route>

‎packages/web/src/pages/app/[appid]/dashboard/index.vue

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script setup lang="ts">
2+
import { useAppStore } from '~/store'
3+
4+
const appStore = useAppStore()
5+
const {
6+
currentApp: app,
7+
appDeployUrlSchema: schema,
8+
appDeployHost: domain,
9+
} = appStore
10+
const getAppUrl = `${schema}://${app.appid}.${domain}`
11+
</script>
12+
13+
<template>
14+
<div class="welcome">
15+
欢迎使用 LaF 云开发！
16+
</div>
17+
<div class="introduce row">
18+
<div class="label">
19+
使用文档：
20+
</div>
21+
<div class="content">
22+
<a style="color: blue" target="_blank" href="https://lafjs.github.io/">https://lafjs.github.io/</a>
23+
</div>
24+
</div>
25+
<div class="row">
26+
<div class="label">
27+
应用名：
28+
</div>
29+
<div class="content">
30+
{{ app.name }}
31+
</div>
32+
</div>
33+
<div class="row">
34+
<div class="label">
35+
应用ID：
36+
</div>
37+
<div class="content">
38+
{{ app.appid }}
39+
</div>
40+
<!-- <i v-clipboard:message="app.appid" v-clipboard:success="onCopy" class="el-icon-document-copy copy-btn" /> -->
41+
</div>
42+
<div class="row">
43+
<div class="label">
44+
服务地址：
45+
</div>
46+
<div class="content">
47+
<a style="color: black; text-decoration: undeline"> {{ getAppUrl }}</a>
48+
<!-- <i v-clipboard:message="getAppUrl()" v-clipboard:success="onCopy" class="el-icon-document-copy copy-btn" /> -->
49+
</div>
50+
</div>
51+
</template>
52+
53+
<route lang="yaml">
54+
name: dashboard
55+
meta:
56+
title: 欢迎
57+
index: 0-0
58+
</route>

‎packages/web/src/pages/app/[appid]/database/collections.vue

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
collections
7+
</template>
8+
9+
<route lang="yaml">
10+
name: collections
11+
meta:
12+
title: 集合管理
13+
index: 2-0
14+
</route>

‎packages/web/src/pages/app/[appid]/database/policies.vue

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
policies
7+
</template>
8+
9+
<route lang="yaml">
10+
name: policies
11+
meta:
12+
title: 策略管理
13+
index: 2-1
14+
</route>

‎packages/web/src/pages/app/[appid]/storage/buckets.vue

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<route lang="yaml">
2+
name: buckets
3+
meta:
4+
title: 文件管理
5+
index: 3-0 # menu sort by index
6+
</route>

0 commit comments

Comments
 (0)