refa: initialize @koishijs/theme-default

packages/client/client/components/layout/index.ts

@@ -1,6 +1,4 @@
 import { App } from 'vue'
-import Layout from './k-layout.vue'
-import Status from './k-status.vue'
 import CardNumeric from './card-numeric.vue'
 import Card from './card.vue'
 import Content from './content.vue'
@@ -11,8 +9,6 @@ import TabItem from './tab-item.vue'
 export * from './utils'
 
 export default function (app: App) {
-  app.component('k-layout', Layout)
-  app.component('k-status', Status)
   app.component('k-numeric', CardNumeric)
   app.component('k-card', Card)
   app.component('k-content', Content)

packages/client/client/components/layout/utils.ts

@@ -1,3 +0,0 @@
-import { ref } from 'vue'
-
-export const isLeftAsideOpen = ref(false)

packages/client/client/components/slot.ts

@@ -24,7 +24,11 @@ export const KSlot = defineComponent({
         .map(node => ({ node, order: node.props?.order || 0 }))
       const external = [...views[props.name] || []]
         .filter(item => !item.when || item.when())
-        .map(item => ({ node: h(item.component, { data: props.data }), order: item.order, layer: 1 }))
+        .map(item => ({
+          node: h(item.component, { data: props.data, ...props.data }, slots),
+          order: item.order,
+          layer: 1,
+        }))
       const children = [...internal, ...external].sort((a, b) => b.order - a.order)
       if (props.single) {
         return children[0]?.node || slots.default?.()
@@ -43,7 +47,15 @@ const KSlotItem = defineComponent({
   },
 })
 
+function defineSlotComponent(name: string) {
+  return defineComponent((_, { attrs, slots }) => {
+    return () => h(KSlot, { name, data: attrs, single: true }, slots)
+  })
+}
+
 export default (app: App) => {
   app.component('k-slot', KSlot)
   app.component('k-slot-item', KSlotItem)
+  app.component('k-layout', defineSlotComponent('layout'))
+  app.component('k-status', defineSlotComponent('status'))
 }

packages/client/client/config.ts

@@ -0,0 +1,15 @@
+import { useDark } from '@vueuse/core'
+import { computed } from 'vue'
+import { i18n } from '.'
+
+const isDark = useDark()
+
+export const config = computed({
+  get() {
+    return { isDark: isDark.value, locale: i18n.global.locale.value }
+  },
+  set(value) {
+    isDark.value = value?.isDark
+    i18n.global.locale.value = value?.locale
+  },
+})

packages/client/client/context.ts

@@ -1,7 +1,7 @@
 import * as cordis from 'cordis'
 import components from '@koishijs/components'
 import { Dict, remove } from 'cosmokit'
-import { App, markRaw, reactive } from 'vue'
+import { App, createApp, defineComponent, h, inject, markRaw, reactive, resolveComponent } from 'vue'
 import { Activity } from './activity'
 import { SlotOptions } from './components'
 
@@ -19,8 +19,25 @@ export interface Context {
   [Context.events]: Events<this>
 }
 
+export function useContext() {
+  return inject('root') as Context
+}
+
 export class Context extends cordis.Context {
-  static app: App
+  app: App
+
+  constructor() {
+    super()
+    this.app = createApp(defineComponent({
+      setup() {
+        return () => [
+          h(resolveComponent('k-slot'), { name: 'root', single: true }),
+          h(resolveComponent('k-slot'), { name: 'global' }),
+        ]
+      },
+    }))
+    this.app.provide('root', this)
+  }
 
   /** @deprecated */
   addView(options: SlotOptions) {

packages/client/client/data.ts

@@ -38,11 +38,9 @@ export type Store = {
 }
 
 declare const KOISHI_CONFIG: ClientConfig
-export const config = KOISHI_CONFIG
+export const global = KOISHI_CONFIG
 export const store = reactive<Store>({})
 
-export { config as global }
-
 export const socket = ref<AbstractWebSocket>(null)
 const listeners: Record<string, (data: any) => void> = {}
 const responseHooks: Record<string, [Function, Function]> = {}
@@ -94,11 +92,11 @@ export function connect(callback: () => AbstractWebSocket) {
   let sendTimer: number
   let closeTimer: number
   const refresh = () => {
-    if (!config.heartbeat) return
+    if (!global.heartbeat) return
     clearTimeout(sendTimer)
     clearTimeout(closeTimer)
-    sendTimer = +setTimeout(() => send('ping'), config.heartbeat.interval)
-    closeTimer = +setTimeout(() => value?.close(), config.heartbeat.timeout)
+    sendTimer = +setTimeout(() => send('ping'), global.heartbeat.interval)
+    closeTimer = +setTimeout(() => value?.close(), global.heartbeat.timeout)
   }
 
   const reconnect = () => {

plugins/console/app/pages/settings.vue → packages/client/client/extensions/settings.vue

@@ -8,32 +8,15 @@
 
 <script lang="ts" setup>
 
-import { i18n, Schema } from '@koishijs/client'
-import { useDark } from '@vueuse/core'
-import { computed } from 'vue'
-
-const isDark = useDark()
+import { config, Schema } from '..'
 
 const schema = Schema.object({
   isDark: Schema.boolean().description('暗色模式。'),
   locale: Schema.union(['zh-CN', 'en-US']).hidden().description('语言设置。'),
 }).description('外观设置')
 
-const config = computed({
-  get() {
-    return { isDark: isDark.value, locale: i18n.global.locale.value }
-  },
-  set(value) {
-    isDark.value = value?.isDark
-    i18n.global.locale.value = value?.locale
-  },
-})
-
 </script>
 
 <style lang="scss">
 
-.page-settings {
-}
-
 </style>

packages/client/client/index.ts

@@ -1,9 +1,10 @@
 import { Console } from '@koishijs/plugin-console'
 import { defineComponent, h, resolveComponent } from 'vue'
 import { createRouter, createWebHistory, START_LOCATION } from 'vue-router'
-import { config, Store, store } from './data'
+import { global, Store, store } from './data'
 import install, { isNullable } from './components'
 import Overlay from './components/chat/overlay.vue'
+import Settings from './extensions/settings.vue'
 import { initTask } from './loader'
 import { Context } from './context'
 import { createI18n } from 'vue-i18n'
@@ -12,14 +13,17 @@ import './styles/index.scss'
 
 export * from './activity'
 export * from './components'
+export * from './config'
 export * from './context'
 export * from './loader'
 export * from './data'
 
 export default install
 
+export const root = new Context()
+
 export const router = createRouter({
-  history: createWebHistory(config.uiPath),
+  history: createWebHistory(global.uiPath),
   linkActiveClass: 'active',
   routes: [],
 })
@@ -30,13 +34,24 @@ export const i18n = createI18n({
   fallbackLocale: 'zh-CN',
 })
 
-export const root = new Context()
+root.app.use(install)
+root.app.use(i18n)
+root.app.use(router)
 
 root.slot({
   type: 'global',
   component: Overlay,
 })
 
+root.page({
+  path: '/settings',
+  name: '用户设置',
+  icon: 'activity:settings',
+  position: 'bottom',
+  order: -100,
+  component: Settings,
+})
+
 root.on('activity', data => !data)
 
 router.beforeEach(async (to, from) => {

packages/components/client/k-form.vue

@@ -58,11 +58,3 @@ const config = computed({
 })
 
 </script>
-
-<style lang="scss">
-
-.k-form {
-  margin-bottom: 2rem;
-}
-
-</style>

packages/theme-default/client/index.ts

@@ -0,0 +1,36 @@
+import { defineExtension } 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'
+
+export default defineExtension((ctx) => {
+  ctx.page({
+    path: '/',
+    name: '欢迎',
+    icon: 'activity:home',
+    order: 1000,
+    component: Home,
+  })
+
+  ctx.slot({
+    type: 'status-right',
+    component: Progress,
+  })
+
+  ctx.slot({
+    type: 'root',
+    component: App,
+  })
+
+  ctx.slot({
+    type: 'layout',
+    component: Layout,
+  })
+
+  ctx.slot({
+    type: 'status',
+    component: Status,
+  })
+})

plugins/console/app/layouts/index.vue → packages/theme-default/client/layouts/index.vue

@@ -17,7 +17,7 @@
 import { store } from './utils'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { isLeftAsideOpen } from '@koishijs/client'
+import { isLeftAsideOpen } from './utils'
 import ActivityBar from './activity/index.vue'
 import StatusBar from './status-bar.vue'
 

packages/client/client/components/layout/k-status.vue → packages/theme-default/client/layouts/status.vue

@@ -11,11 +11,11 @@
   </el-tooltip>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 
-export default {
+defineOptions({
   inheritAttrs: false,
-}
+})
 
 </script>
 

plugins/console/app/layouts/utils.ts → packages/theme-default/client/layouts/utils.ts

@@ -1,9 +1,11 @@
-import { reactive } from 'vue'
+import { reactive, ref } 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/tsconfig.client.json → packages/theme-default/client/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "rootDir": ".",
     "target": "es2020",
     "module": "esnext",
     "declaration": true,
@@ -15,4 +16,7 @@
       "@koishijs/client/global",
     ],
   },
+  "include": [
+    ".",
+  ],
 }

packages/theme-default/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@koishijs/theme-default",
+  "description": "Koishi Console Theme Default",
+  "version": "1.0.0",
+  "main": "client/index.ts",
+  "files": [
+    "client",
+    "lib"
+  ],
+  "author": "Shigma <shigma10826@gmail.com>",
+  "license": "AGPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/koishijs/webui.git",
+    "directory": "packages/theme-default"
+  },
+  "bugs": {
+    "url": "https://github.com/koishijs/webui/issues"
+  },
+  "homepage": "https://koishi.chat",
+  "keywords": [
+    "bot",
+    "chatbot",
+    "koishi",
+    "plugin",
+    "webui",
+    "console",
+    "theme",
+    "default"
+  ],
+  "dependencies": {
+    "@koishijs/client": "5.8.3"
+  }
+}