refa: refactor to traceable context

packages/client/client/components/layout/content.vue

@@ -35,7 +35,7 @@
 
   h2 {
     font-size: 1.25rem;
-    margin: 1rem 0;
+    margin: 2rem 0 1rem;
   }
 }
 

packages/client/client/context.ts

@@ -79,12 +79,11 @@ export class Context extends cordis.Context {
   wrapComponent(component?: Component): DefineComponent | undefined
   wrapComponent(component: Component) {
     if (!component) return undefined
-    const caller = this[Context.current] || this
-    if (!caller.$entry) return component
+    if (!this.$entry) return component
     return markRaw(defineComponent((props, { slots }) => {
-      provide(kContext, caller)
+      provide(kContext, this)
       onErrorCaptured((e, instance, info) => {
-        return caller.scope.uid !== null
+        return this.scope.uid !== null
       })
       return () => h(component, props, slots)
     }))

packages/client/client/plugins/action.ts

@@ -120,14 +120,14 @@ export default class ActionService extends Service {
   action(id: string, options: ActionOptions | ActionOptions['action']) {
     if (typeof options === 'function') options = { action: options }
     markRaw(options)
-    return this[Context.current].effect(() => {
+    return this.ctx.effect(() => {
       this.ctx.internal.actions[id] = options
       return () => delete this.ctx.internal.actions[id]
     })
   }
 
   menu(id: string, items: MenuItem[]) {
-    return this[Context.current].effect(() => {
+    return this.ctx.effect(() => {
       const list = this.ctx.internal.menus[id] ||= []
       items.forEach(item => insert(list, item))
       return () => {
@@ -138,7 +138,7 @@ export default class ActionService extends Service {
   }
 
   define<K extends keyof ActionContext>(key: K, value: MaybeRefOrGetter<ActionContext[K]>) {
-    return this[Context.current].effect(() => {
+    return this.ctx.effect(() => {
       this.ctx.internal.scope[key] = value as any
       return () => delete this.ctx.internal.scope[key]
     })

packages/client/client/plugins/router.ts

@@ -149,10 +149,9 @@ export default class RouterService extends Service {
   }
 
   slot(options: SlotOptions) {
-    const caller = this[Context.current]
     options.order ??= 0
-    options.component = caller.wrapComponent(options.component)
-    return caller.effect(() => {
+    options.component = this.ctx.wrapComponent(options.component)
+    return this.ctx.effect(() => {
       const list = this.views[options.type] ||= []
       insert(list, options)
       return () => {
@@ -163,10 +162,9 @@ export default class RouterService extends Service {
   }
 
   page(options: Activity.Options) {
-    const caller = this[Context.current]
-    options.component = caller.wrapComponent(options.component)
-    return caller.effect(() => {
-      return new Activity(caller, options)
+    options.component = this.ctx.wrapComponent(options.component)
+    return this.ctx.effect(() => {
+      return new Activity(this.ctx, options)
     })
   }
 }

packages/client/client/plugins/setting.ts

@@ -122,15 +122,14 @@ export default class SettingService extends Service {
 
   settings(options: SettingOptions) {
     markRaw(options)
-    const caller = this[Context.current]
     options.order ??= 0
-    options.component = caller.wrapComponent(options.component)
-    return caller.effect(() => {
-      const list = caller.internal.settings[options.id] ||= []
+    options.component = this.ctx.wrapComponent(options.component)
+    return this.ctx.effect(() => {
+      const list = this.ctx.internal.settings[options.id] ||= []
       insert(list, options)
       return () => {
         remove(list, options)
-        if (!list.length) delete caller.internal.settings[options.id]
+        if (!list.length) delete this.ctx.internal.settings[options.id]
       }
     })
   }

packages/client/client/plugins/theme.ts

@@ -75,7 +75,7 @@ export default class ThemeService extends Service {
 
     ctx.effect(() => watchEffect(() => {
       if (!config.value.theme) return
-      const root = window.document.querySelector('html')
+      const root = window.document.querySelector('html')!
       root.setAttribute('theme', config.value.theme[colorMode.value])
       if (colorMode.value === 'dark') {
         root.classList.add('dark')
@@ -87,15 +87,14 @@ export default class ThemeService extends Service {
 
   theme(options: ThemeOptions) {
     markRaw(options)
-    const caller = this[Context.current]
     for (const [type, component] of Object.entries(options.components || {})) {
-      caller.slot({
+      this.ctx.slot({
         type,
         disabled: () => config.value.theme[colorMode.value] !== options.id,
         component,
       })
     }
-    return caller.effect(() => {
+    return this.ctx.effect(() => {
       this.ctx.internal.themes[options.id] = options
       return () => delete this.ctx.internal.themes[options.id]
     })

packages/components/client/k-comment.vue

@@ -41,7 +41,7 @@ const icon = computed(() => {
 
 .k-comment {
   padding: 1px 1.5rem;
-  margin: 2rem 0;
+  margin: 1rem 0;
   border-left-width: 4px;
   border-left-style: solid;
   position: relative;
@@ -65,10 +65,6 @@ const icon = computed(() => {
   @include apply-color(success);
   @include apply-color(danger);
 
-  & + & {
-    margin-top: -1rem;
-  }
-
   :deep(a) {
     text-decoration: underline;