diff --git a/packages/client/app/settings/index.ts b/packages/client/app/settings/index.ts
index b481c25..9973605 100644
--- a/packages/client/app/settings/index.ts
+++ b/packages/client/app/settings/index.ts
@@ -12,7 +12,7 @@ export default function (ctx: Context) {
     component: Settings,
   })
 
-  ctx.schema({
+  ctx.schema.component({
     type: 'string',
     role: 'theme',
     component: Theme,
diff --git a/packages/client/client/context.ts b/packages/client/client/context.ts
index 08260cf..030e8c0 100644
--- a/packages/client/client/context.ts
+++ b/packages/client/client/context.ts
@@ -1,6 +1,6 @@
 import * as cordis from 'cordis'
 import {
-  App, Component, createApp, defineComponent, h, inject, InjectionKey,
+  App, Component, createApp, DefineComponent, defineComponent, h, inject, InjectionKey,
   markRaw, onBeforeUnmount, onErrorCaptured, provide, Ref, resolveComponent,
 } from 'vue'
 import ActionService from './plugins/action'
@@ -75,8 +75,10 @@ export class Context extends cordis.Context {
     })
   }
 
+  wrapComponent(component: Component): DefineComponent
+  wrapComponent(component?: Component): DefineComponent | undefined
   wrapComponent(component: Component) {
-    if (!component) return null!
+    if (!component) return undefined
     const caller = this[Context.current] || this
     if (!caller.$entry) return component
     return markRaw(defineComponent((props, { slots }) => {
diff --git a/packages/client/client/plugins/setting.ts b/packages/client/client/plugins/setting.ts
index f43f9ae..b202189 100644
--- a/packages/client/client/plugins/setting.ts
+++ b/packages/client/client/plugins/setting.ts
@@ -6,10 +6,15 @@ import { Dict, remove } from 'cosmokit'
 import { Component, computed, markRaw, reactive, ref, watch } from 'vue'
 import { Config } from '..'
 
+declare module '@cordisjs/schema' {
+  interface SchemaService {
+    component(extension: SchemaBase.Extension): () => void
+  }
+}
+
 declare module '../context' {
   interface Context {
     $setting: SettingService
-    schema(extension: SchemaBase.Extension): () => void
     settings(options: SettingOptions): () => void
   }
 
@@ -26,7 +31,7 @@ interface SettingOptions extends Ordered {
   component?: Component
 }
 
-export let useStorage = <T extends object>(key: string, version: number, fallback?: () => T): RemovableRef<T> => {
+export let useStorage = <T extends object>(key: string, version?: number, fallback?: () => T): RemovableRef<T> => {
   const initial = fallback ? fallback() : {} as T
   initial['__version__'] = version
   const storage = useLocalStorage('koishi.console.' + key, initial)
@@ -40,23 +45,6 @@ export function provideStorage(factory: typeof useStorage) {
   useStorage = factory
 }
 
-interface StorageData<T> {
-  version: number
-  data: T
-}
-
-/** @deprecated use `useConfig` instead */
-export function createStorage<T extends object>(key: string, version: number, fallback?: () => T) {
-  const storage = useLocalStorage('koishi.console.' + key, {} as StorageData<T>)
-  const initial = fallback ? fallback() : {} as T
-  if (storage.value.version !== version) {
-    storage.value = { version, data: initial }
-  } else if (!Array.isArray(storage.value.data)) {
-    storage.value.data = { ...initial, ...storage.value.data }
-  }
-  return reactive<T>(storage.value['data'])
-}
-
 export const original = useStorage<Config>('config', undefined, () => ({
   theme: {
     mode: 'auto',
@@ -73,7 +61,10 @@ export const useConfig = (useOriginal = false) => useOriginal ? original : resol
 export default class SettingService extends Service {
   constructor(ctx: Context) {
     super(ctx, '$setting', true)
-    ctx.mixin('$setting', ['schema', 'settings'])
+    ctx.mixin('$setting', {
+      'schema': 'schema.component',
+      'settings': 'settings',
+    })
 
     ctx.internal.settings = reactive({})