feat: App side menus (#157)

* fix: goto app-console

* chore: build && docker deploy

* docs: add readme

* feat: add app menus

packages/web/.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "cSpell.words": ["Vitesse"],
+  "cSpell.words": ["Vitesse", "pinia"],
   "prettier.enable": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true

packages/web/auto-imports.d.ts

@@ -110,6 +110,7 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
@@ -157,6 +158,7 @@ declare global {
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
   const useI18n: typeof import('vue-i18n')['useI18n']
   const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
   const useInterval: typeof import('@vueuse/core')['useInterval']

packages/web/components.d.ts

@@ -7,6 +7,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     CommonOpener: typeof import('./src/components/CommonOpener.vue')['default']
     Counter: typeof import('./src/components/Counter.vue')['default']
+    ElAside: typeof import('element-plus/es')['ElAside']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElContainer: typeof import('element-plus/es')['ElContainer']
@@ -20,10 +21,13 @@ declare module '@vue/runtime-core' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']

packages/web/scripts/extend-route.ts

@@ -10,6 +10,7 @@ import { resolveComponentNameByPath } from './utils'
 export default function extendRoute(route: RouteRecordRaw) {
   if (!route.component)
     return route
+
   const fileName = route.component as any as string
   const routeName = route.name as string
   // update route.name
@@ -19,5 +20,14 @@ export default function extendRoute(route: RouteRecordRaw) {
     ...route.meta,
     componentName: resolveComponentNameByPath(resolve(process.cwd(), `.${fileName}`)),
   }
+
+  if (route.path === '/login' || route.path === '/register' || route.path === '/')
+    route.meta.requiresAuth = false
+  else
+    route.meta.requiresAuth = true
+
+  if (route.path.startsWith('/app/'))
+    route.meta.layout = 'AppLayout'
+
   return route
 }

packages/web/src/layout/AppLayout.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import TopBar from './components/TopBar.vue'
+import SideBar from './components/SideBar/index.vue'
+</script>
+
+<template>
+  <el-container fixed top-0 bottom-0 left-0 right-0>
+    <el-header relative z-5 style="--el-header-padding: 0;">
+      <top-bar />
+    </el-header>
+
+    <el-container>
+      <side-bar />
+
+      <el-main style="--el-main-padding: 0;" bg-light pt-10 flex>
+        <el-scrollbar>
+          <div p-6 h-screen>
+            <router-view />
+          </div>
+        </el-scrollbar>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <el-sub-menu index="1">
+    <template #title>
+      <el-icon><location /></el-icon>
+      <span>Navigator One</span>
+    </template>
+    <el-menu-item index="1-1">
+      item one one
+    </el-menu-item>
+    <el-menu-item index="1-2">
+      item one two
+    </el-menu-item>
+  </el-sub-menu>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useMenuStore } from '~/store'
+
+const router = useRouter()
+const menuStore = useMenuStore()
+
+const menus = ref<any>(menuStore.appMenus)
+
+const switchRoute = (item: any) => {
+  const path = item.path
+  router.push(path)
+}
+</script>
+
+<template>
+  <el-aside width="200px">
+    <el-scrollbar>
+      <el-menu
+        h-screen
+      >
+        <el-sub-menu v-for="item in menus" :key="item.name" :collapse="false" :index="item.name">
+          <template #title>
+            <el-icon><setting /></el-icon>
+            <span>{{ item.name }}</span>
+          </template>
+          <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path" @click="switchRoute(child)">
+            <!-- <el-icon><location /></el-icon> -->
+            <span>{{ child.name }}</span>
+          </el-menu-item>
+        </el-sub-menu>
+      </el-menu>
+    </el-scrollbar>
+  </el-aside>
+</template>

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

@@ -43,7 +43,7 @@ const login = async (loginEl: FormInstance | undefined) => {
     if (res.error)
       loginForm.password = ''
 
-    goPage('/application')
+    goPage('/apps')
   })
 }
 </script>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useAppStore } from '~/store'
+
+const route = useRoute()
+const appid = route.params.appid
+
+const appStore = useAppStore()
+const app = appStore.currentApp
+</script>
+
+<template>
+  cloud function index {{ appid }} {{ app }}
+</template>
+
+<route lang="yaml">
+name: cloudFunction
+meta:
+  title: 云函数
+  icon: cloud-function
+  index: 1-0
+</route>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  logs
+</template>
+
+<route lang="yaml">
+name: logs
+meta:
+  title: 云函数日志
+  hidden: true
+  index: 1-1
+</route>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  packages
+</template>
+
+<route lang="yaml">
+name: packages
+meta:
+  title: 云函数依赖
+  index: 1-2
+</route>

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useAppStore } from '~/store'
+
+const appStore = useAppStore()
+const {
+  currentApp: app,
+  appDeployUrlSchema: schema,
+  appDeployHost: domain,
+} = appStore
+const getAppUrl = `${schema}://${app.appid}.${domain}`
+</script>
+
+<template>
+  <div class="welcome">
+    欢迎使用 LaF 云开发！
+  </div>
+  <div class="introduce row">
+    <div class="label">
+      使用文档：
+    </div>
+    <div class="content">
+      <a style="color: blue" target="_blank" href="https://lafjs.github.io/">https://lafjs.github.io/</a>
+    </div>
+  </div>
+  <div class="row">
+    <div class="label">
+      应用名：
+    </div>
+    <div class="content">
+      {{ app.name }}
+    </div>
+  </div>
+  <div class="row">
+    <div class="label">
+      应用ID：
+    </div>
+    <div class="content">
+      {{ app.appid }}
+    </div>
+    <!-- <i v-clipboard:message="app.appid" v-clipboard:success="onCopy" class="el-icon-document-copy copy-btn" /> -->
+  </div>
+  <div class="row">
+    <div class="label">
+      服务地址：
+    </div>
+    <div class="content">
+      <a style="color: black; text-decoration: undeline"> {{ getAppUrl }}</a>
+      <!-- <i v-clipboard:message="getAppUrl()" v-clipboard:success="onCopy" class="el-icon-document-copy copy-btn" /> -->
+    </div>
+  </div>
+</template>
+
+<route lang="yaml">
+name: dashboard
+meta:
+  title: 欢迎
+  index: 0-0
+</route>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  collections
+</template>
+
+<route lang="yaml">
+name: collections
+meta:
+  title: 集合管理
+  index: 2-0
+</route>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  policies
+</template>
+
+<route lang="yaml">
+name: policies
+meta:
+  title: 策略管理
+  index: 2-1
+</route>

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

@@ -0,0 +1,6 @@
+<route lang="yaml">
+name: buckets
+meta:
+  title: 文件管理
+  index: 3-0 # menu sort by index
+</route>