refa: enhance app file structure

packages/client/app/home/index.ts

@@ -0,0 +1,12 @@
+import { Context } from '@koishijs/client'
+import Home from './home.vue'
+
+export default function (ctx: Context) {
+  ctx.page({
+    path: '/',
+    name: '欢迎',
+    icon: 'activity:home',
+    order: 1000,
+    component: Home,
+  })
+}

packages/client/app/index.ts

@@ -1,5 +1,9 @@
 import { connect, Dict, global, root } from '@koishijs/client'
-import internal from './internal'
+import home from './home'
+import layout from './layout'
+import settings from './settings'
+import status from './status'
+import styles from './styles'
 import theme from './theme'
 
 import './index.scss'
@@ -11,7 +15,11 @@ declare module '@koishijs/plugin-console' {
   }
 }
 
-root.plugin(internal)
+root.plugin(home)
+root.plugin(layout)
+root.plugin(settings)
+root.plugin(status)
+root.plugin(styles)
 root.plugin(theme)
 
 root.app.provide('ecTheme', 'dark-blue')

packages/client/app/theme/layouts/layout-header.vue → packages/client/app/layout/header.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="layout-header">
-    <div class="toggle-sidebar-button" role="button" tabindex="0" @click="isLeftAsideOpen = !isLeftAsideOpen">
+    <div
+      class="toggle-sidebar-button"
+      role="button"
+      tabindex="0"
+      @click="$emit('update:isLeftAsideOpen', !isLeftAsideOpen)"
+    >
       <div class="icon">
         <span></span>
         <span></span>
@@ -18,9 +23,15 @@
 
 <script lang="ts" setup>
 
-import { isLeftAsideOpen } from './utils'
 import { useRoute } from 'vue-router'
 
+defineProps<{
+  isLeftAsideOpen: boolean
+  isRightAsideOpen: boolean
+}>()
+
+defineEmits(['update:isLeftAsideOpen', 'update:isRightAsideOpen'])
+
 const route = useRoute()
 
 </script>

packages/client/app/layout/index.ts

@@ -0,0 +1,10 @@
+import { Context } from '@koishijs/client'
+import Layout from './layout.vue'
+
+export default function (ctx: Context) {
+  ctx.slot({
+    type: 'layout',
+    component: Layout,
+    order: -1000,
+  })
+}

packages/client/app/theme/layouts/layout.vue → packages/client/app/layout/layout.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="layout-container" :class="[container, { 'has-left-aside': $slots.left, 'has-right-aside': $slots.right }]">
+  <div class="layout-container" :class="[container, styles]">
     <aside class="layout-left" :class="left" v-if="$slots.left">
       <slot name="left"></slot>
     </aside>
 
     <div class="main-container">
       <div class="aside-mask" @click="isLeftAsideOpen = !isLeftAsideOpen"></div>
-      <layout-header>
+      <layout-header v-model:isLeftAsideOpen="isLeftAsideOpen" v-model:isRightAsideOpen="isRightAsideOpen">
         <template #left>
           <slot name="header">{{ route.meta.activity?.name }}</slot>
         </template>
@@ -34,23 +34,34 @@
 
 <script lang="ts" setup>
 
+import { computed, ref, useSlots } from 'vue'
 import { useRoute } from 'vue-router'
-import { ActionOptions, useContext } from '@koishijs/client'
-import { isLeftAsideOpen } from './utils'
-import LayoutHeader from './layout-header.vue'
-import LayoutMenuItem from './layout-menu-item.vue'
+import { LegacyMenuItem, useContext } from '@koishijs/client'
+import LayoutHeader from './header.vue'
+import LayoutMenuItem from './menu-item.vue'
 
 defineProps<{
   main?: string
   left?: string
   right?: string
   container?: string
-  menu?: string | (ActionOptions | string)[]
+  menu?: string | LegacyMenuItem[]
 }>()
 
+const slots = useSlots()
 const route = useRoute()
 const ctx = useContext()
 
+const isLeftAsideOpen = ref(false)
+const isRightAsideOpen = ref(false)
+
+const styles = computed(() => ({
+  'has-left-aside': slots.left,
+  'has-right-aside': slots.right,
+  'is-left-aside-open': isLeftAsideOpen.value,
+  'is-right-aside-open': isRightAsideOpen.value,
+}))
+
 </script>
 
 <style lang="scss">
@@ -63,7 +74,7 @@ const ctx = useContext()
   left: var(--activity-width);
   bottom: var(--footer-height);
   right: 0;
-  background-color: var(--card-bg);
+  background-color: var(--k-card-bg);
   transition: var(--color-transition);
   display: flex;
   flex-direction: row;
@@ -137,13 +148,13 @@ const ctx = useContext()
     }
   }
 
-  .is-left-aside-open .layout-container.has-left-aside {
+  .layout-container.is-left-aside-open.has-left-aside {
     .main-container {
       left: calc(var(--aside-width) + var(--activity-width));
     }
   }
 
-  .is-left-aside-open .layout-container:not(.has-left-aside) {
+  .layout-container.is-left-aside-open:not(.has-left-aside) {
     .main-container {
       left: var(--activity-width);
     }

packages/client/app/theme/layouts/layout-menu-item.vue → packages/client/app/layout/menu-item.vue

@@ -8,10 +8,10 @@
 
 <script lang="ts" setup>
 
-import { LayoutMenuItem } from '@koishijs/client'
+import { LegacyMenuItem } from '@koishijs/client'
 import { computed, toValue } from 'vue'
 
-const props = defineProps<LayoutMenuItem>()
+const props = defineProps<LegacyMenuItem>()
 
 const disabled = computed(() => toValue(props.disabled))
 

packages/client/app/status/index.ts

@@ -0,0 +1,16 @@
+import { Context } from '@koishijs/client'
+import Status from './status.vue'
+import Loading from './loading.vue'
+
+export default function (ctx: Context) {
+  ctx.slot({
+    type: 'status',
+    component: Status,
+    order: -1000,
+  })
+
+  ctx.slot({
+    type: 'status-right',
+    component: Loading,
+  })
+}

packages/client/app/styles/index.ts

@@ -0,0 +1,25 @@
+import { Context } from '@koishijs/client'
+
+import './index.scss'
+
+export default function (ctx: Context) {
+  ctx.theme({
+    id: 'default-light',
+    name: 'Default Light',
+  })
+
+  ctx.theme({
+    id: 'default-dark',
+    name: 'Default Dark',
+  })
+
+  ctx.theme({
+    id: 'hc-light',
+    name: 'High Contrast Light',
+  })
+
+  ctx.theme({
+    id: 'hc-dark',
+    name: 'High Contrast Dark',
+  })
+}

packages/client/app/theme/layouts/activity/item.vue → packages/client/app/theme/activity/item.vue

@@ -13,8 +13,9 @@
 <script lang="ts" setup>
 
 import { computed } from 'vue'
-import { Activity, routeCache } from '../utils'
+import { Activity } from '@koishijs/client'
 import { Placement } from 'element-plus'
+import { routeCache } from './utils'
 
 const props = defineProps<{
   data: Activity,

packages/client/app/theme/layouts/utils.ts → packages/client/app/theme/activity/utils.ts

@@ -1,11 +1,7 @@
-import { reactive, ref } from 'vue'
+import { reactive } from 'vue'
 import { RouteRecordName } from 'vue-router'
 import { global, router } from '@koishijs/client'
 
-export * from '@koishijs/client'
-
-export const isLeftAsideOpen = ref(false)
-
 export const routeCache = reactive<Record<RouteRecordName, string>>({})
 
 router.afterEach((route) => {

packages/client/app/theme/index.ts

@@ -1,61 +1,10 @@
 import { Context } from '@koishijs/client'
-import Home from './pages/home.vue'
-import App from './layouts/index.vue'
-import Layout from './layouts/layout.vue'
-import Status from './layouts/status.vue'
-import Progress from './layouts/status-loading.vue'
-
-import './styles/index.scss'
+import App from './index.vue'
 
 export default function (ctx: Context) {
-  ctx.theme({
-    id: 'default-light',
-    name: 'Default Light',
-  })
-
-  ctx.theme({
-    id: 'default-dark',
-    name: 'Default Dark',
-  })
-
-  ctx.theme({
-    id: 'hc-light',
-    name: 'High Contrast Light',
-  })
-
-  ctx.theme({
-    id: 'hc-dark',
-    name: 'High Contrast Dark',
-  })
-
-  ctx.page({
-    path: '/',
-    name: '欢迎',
-    icon: 'activity:home',
-    order: 1000,
-    component: Home,
-  })
-
-  ctx.slot({
-    type: 'status-right',
-    component: Progress,
-  })
-
   ctx.slot({
     type: 'root',
     component: App,
     order: -1000,
   })
-
-  ctx.slot({
-    type: 'layout',
-    component: Layout,
-    order: -1000,
-  })
-
-  ctx.slot({
-    type: 'status',
-    component: Status,
-    order: -1000,
-  })
 }

packages/client/app/theme/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <activity-bar></activity-bar>
+  <router-view v-if="loaded" #="{ Component }">
+    <keep-alive>
+      <component :is="Component"></component>
+    </keep-alive>
+  </router-view>
+  <div class="loading" v-else v-loading="true" element-loading-text="正在加载数据……"></div>
+  <status-bar></status-bar>
+  <k-slot name="global"></k-slot>
+</template>
+
+<script lang="ts" setup>
+
+import { store } from '@koishijs/client'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import ActivityBar from './activity/index.vue'
+import StatusBar from './status.vue'
+
+const route = useRoute()
+
+const loaded = computed(() => {
+  if (!route.meta.activity?.fields) return true
+  return route.meta.activity.fields.every((key) => store[key])
+})
+
+</script>

packages/client/client/context.ts

@@ -45,7 +45,7 @@ export function useAction(id: string, options: ActionOptions) {
   return options.action
 }
 
-export interface LayoutMenuItem extends ActionOptions, Omit<MenuItem, 'id'> {}
+export type LegacyMenuItem = Partial<ActionOptions> & Omit<MenuItem, 'id'>
 
 export interface MenuItem {
   id: string