diff --git a/packages/cli/src/worker/daemon.ts b/packages/cli/src/worker/daemon.ts
index d6ce9acae5..bd4ac40515 100644
--- a/packages/cli/src/worker/daemon.ts
+++ b/packages/cli/src/worker/daemon.ts
@@ -1,11 +1,5 @@
 import { Context, noop } from 'koishi'
 
-declare module 'koishi' {
-  interface EventMap {
-    'exit'(signal: NodeJS.Signals): Promise<void>
-  }
-}
-
 export interface Config {
   exitCommand?: boolean
   autoRestart?: boolean
diff --git a/packages/cli/src/worker/index.ts b/packages/cli/src/worker/index.ts
index 7ab0438498..eb1c5b0c9a 100644
--- a/packages/cli/src/worker/index.ts
+++ b/packages/cli/src/worker/index.ts
@@ -7,6 +7,11 @@ import Watcher from './watcher'
 export { Loader, Watcher }
 
 declare module 'koishi' {
+  interface EventMap {
+    'exit'(signal: NodeJS.Signals): Promise<void>
+    'config'(): void
+  }
+
   interface App {
     prologue: string[]
     watcher: Watcher
diff --git a/packages/cli/src/worker/loader.ts b/packages/cli/src/worker/loader.ts
index aad27dc55e..1ba6e4183a 100644
--- a/packages/cli/src/worker/loader.ts
+++ b/packages/cli/src/worker/loader.ts
@@ -82,6 +82,7 @@ export default class Loader extends ConfigLoader<App.Config> {
     // prevent hot reload when it's being written
     if (this.app.watcher) this.app.watcher.suspend = true
     super.writeConfig()
+    this.app.emit('config')
   }
 
   resolvePlugin(name: string) {
diff --git a/packages/cli/src/worker/watcher.ts b/packages/cli/src/worker/watcher.ts
index a96c440b03..9c6863c6c4 100644
--- a/packages/cli/src/worker/watcher.ts
+++ b/packages/cli/src/worker/watcher.ts
@@ -136,6 +136,7 @@ class Watcher {
 
     // check plugin changes
     this.triggerGroupReload(neo.plugins || {}, old.plugins || {}, this.ctx.loader.runtime)
+    this.ctx.emit('config')
   }
 
   private triggerGroupReload(neo: Dict, old: Dict, runtime: Plugin.Runtime) {
diff --git a/packages/core/package.json b/packages/core/package.json
index e75e44a807..8b2cd6d9df 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@koishijs/utils": "^5.4.5",
-    "cordis": "^1.3.0",
+    "cordis": "^1.3.1",
     "fastest-levenshtein": "^1.0.12",
     "minato": "^1.1.0"
   }
diff --git a/plugins/frontend/manager/client/index.ts b/plugins/frontend/manager/client/index.ts
index f70318a507..81507e597d 100644
--- a/plugins/frontend/manager/client/index.ts
+++ b/plugins/frontend/manager/client/index.ts
@@ -31,12 +31,12 @@ export default (ctx: Context) => {
   })
 
   ctx.addPage({
-    path: '/settings/:name*',
+    path: '/plugins/:name*',
     name: '插件配置',
     icon: 'cog',
     order: 630,
     authority: 4,
-    fields: ['packages', 'services', 'dependencies'],
+    fields: ['config', 'packages', 'services', 'dependencies'],
     component: Settings,
   })
 
diff --git a/plugins/frontend/manager/client/settings/global.vue b/plugins/frontend/manager/client/settings/global.vue
new file mode 100644
index 0000000000..6a11c0e3e6
--- /dev/null
+++ b/plugins/frontend/manager/client/settings/global.vue
@@ -0,0 +1,25 @@
+<template>
+  <h1 class="config-header">
+    全局设置
+    <k-button solid @click="send('manager/app-reload', data.config)">应用配置</k-button>
+  </h1>
+  <k-form :schema="store.packages[''].schema" :initial="data.config" v-model="config"></k-form>
+</template>
+
+<script lang="ts" setup>
+
+import { send, store, clone } from '@koishijs/client'
+import { ref, watch } from 'vue'
+import { Tree } from './utils'
+
+const props = defineProps<{
+  data: Tree
+}>()
+
+const config = ref()
+
+watch(() => props.data.config, (value) => {
+  config.value = clone(value)
+}, { immediate: true })
+
+</script>
diff --git a/plugins/frontend/manager/client/settings/group.vue b/plugins/frontend/manager/client/settings/group.vue
new file mode 100644
index 0000000000..70eb437c24
--- /dev/null
+++ b/plugins/frontend/manager/client/settings/group.vue
@@ -0,0 +1,17 @@
+<template>
+  <h1 class="config-header">
+    {{ data.label }}
+  </h1>
+</template>
+
+<script lang="ts" setup>
+
+import { send, store, clone } from '@koishijs/client'
+import { ref, watch } from 'vue'
+import { Tree } from './utils'
+
+const props = defineProps<{
+  data: Tree
+}>()
+
+</script>
diff --git a/plugins/frontend/manager/client/settings/index.vue b/plugins/frontend/manager/client/settings/index.vue
index f47967f1ff..41e6621da0 100644
--- a/plugins/frontend/manager/client/settings/index.vue
+++ b/plugins/frontend/manager/client/settings/index.vue
@@ -1,19 +1,25 @@
 <template>
   <k-card-aside class="page-settings">
     <template #aside>
-      <plugin-select v-model="current"></plugin-select>
+      <plugin-select v-model="path"></plugin-select>
     </template>
-    <plugin-settings :key="current" :current="current"></plugin-settings>
+    <k-content class="plugin-view">
+      <global-settings v-if="current.path === '@global'" :data="current"></global-settings>
+      <group-settings v-else-if="current.children" :data="current"></group-settings>
+      <plugin-settings v-else :current="current"></plugin-settings>
+    </k-content>
   </k-card-aside>
 </template>
 
 <script setup lang="ts">
 
-import { store } from '@koishijs/client'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { plugins } from './utils'
+import GlobalSettings from './global.vue'
+import GroupSettings from './group.vue'
 import PluginSelect from './select.vue'
-import PluginSettings from './settings.vue'
+import PluginSettings from './plugin.vue'
 
 function join(source: string | string[]) {
   return Array.isArray(source) ? source.join('/') : source || ''
@@ -22,17 +28,19 @@ function join(source: string | string[]) {
 const route = useRoute()
 const router = useRouter()
 
-const current = computed<string>({
+const path = computed<string>({
   get() {
     const name = join(route.params.name)
-    return store.packages[name] ? name : ''
+    return name in plugins.value.map ? name : '@global'
   },
   set(name) {
-    if (!store.packages[name]) name = ''
-    router.replace('/settings/' + name)
+    if (!(name in plugins.value.map)) name = '@global'
+    router.replace('/plugins/' + name)
   },
 })
 
+const current = computed(() => plugins.value.map[path.value])
+
 </script>
 
 <style lang="scss">
diff --git a/plugins/frontend/manager/client/settings/plugin.vue b/plugins/frontend/manager/client/settings/plugin.vue
new file mode 100644
index 0000000000..56cd34189c
--- /dev/null
+++ b/plugins/frontend/manager/client/settings/plugin.vue
@@ -0,0 +1,119 @@
+<template>
+  <h1 class="config-header">
+    {{ data.shortname }}
+    <span class="version">({{ data.workspace ? '工作区' : data.version }})</span>
+    <template v-if="data.id">
+      <k-button solid type="error" @click="execute('unload')">停用插件</k-button>
+      <k-button solid :disabled="env.invalid" @click="execute('reload')">重载配置</k-button>
+    </template>
+    <template v-else>
+      <k-button solid :disabled="env.invalid" @click="execute('reload')">启用插件</k-button>
+      <k-button solid @click="execute('unload')">保存配置</k-button>
+    </template>
+  </h1>
+
+  <!-- latest -->
+  <k-comment v-if="hasUpdate">
+    当前的插件版本不是最新，<router-link to="/dependencies">点击前往依赖管理</router-link>。
+  </k-comment>
+
+  <!-- external -->
+  <k-comment type="warning" v-if="!data.workspace && !store.dependencies[name]">
+    尚未将当前插件列入依赖，<a @click="send('market/patch', name, data.version)">点击添加</a>。
+  </k-comment>
+
+  <!-- impl -->
+  <template v-for="name in env.impl" :key="name">
+    <k-comment v-if="name in store.services && !data.id" type="warning">
+      此插件将会提供 {{ name }} 服务，但此服务已被其他插件实现。
+    </k-comment>
+    <k-comment v-else :type="data.id ? 'success' : 'primary'">
+      此插件{{ data.id ? '提供了' : '将会提供' }} {{ name }} 服务。
+    </k-comment>
+  </template>
+
+  <!-- using -->
+  <k-comment
+    v-for="({ fulfilled, required, available, name }) in env.using" :key="name"
+    :type="fulfilled ? 'success' : required ? 'error' : 'primary'">
+    {{ required ? '必需' : '可选' }}服务：{{ name }}
+    {{ fulfilled ? '(已加载)' : '(未加载，启用下列任一插件可实现此服务)' }}
+    <template v-if="!fulfilled" #body>
+      <ul>
+        <li v-for="name in available">
+          <k-dep-link :name="name"></k-dep-link> (点击{{ name in store.packages ? '配置' : '添加' }})
+        </li>
+      </ul>
+    </template>
+  </k-comment>
+
+  <!-- dep -->
+  <k-comment
+    v-for="({ fulfilled, required, local, name }) in env.deps" :key="name"
+    :type="fulfilled ? 'success' : required ? 'error' : 'primary'">
+    {{ required ? '必需' : '可选' }}依赖：<k-dep-link :name="name"></k-dep-link>
+    ({{ local ? `${fulfilled ? '已' : '未'}启用` : '未安装，点击添加' }})
+  </k-comment>
+
+  <!-- schema -->
+  <k-comment v-if="!data.schema" type="warning">
+    此插件未声明配置项，这可能并非预期行为{{ hint }}。
+  </k-comment>
+  <k-form :schema="data.schema" :initial="current.config" v-model="config">
+    <template #hint>{{ hint }}</template>
+  </k-form>
+</template>
+
+<script lang="ts" setup>
+
+import { send, store, clone } from '@koishijs/client'
+import { computed, ref, watch } from 'vue'
+import { getMixedMeta } from '../utils'
+import { envMap, Tree } from './utils'
+
+const props = defineProps<{
+  current: Tree
+}>()
+
+const config = ref()
+
+watch(() => props.current.config, (value) => {
+  config.value = clone(value)
+}, { immediate: true })
+
+const name = computed(() => {
+  const { label } = props.current
+  if (label.includes('/')) {
+    const [left, right] = label.split('/')
+    return `${left}/koishi-plugin-${right}`
+  }
+  return [`@koishijs/plugin-${label}`, `koishi-plugin-${label}`].find(name => name in store.packages)
+})
+
+const data = computed(() => getMixedMeta(name.value))
+const env = computed(() => envMap.value[name.value])
+const hint = computed(() => data.value.workspace ? '，请检查源代码' : '，请联系插件作者')
+
+const hasUpdate = computed(() => {
+  if (!data.value.versions || data.value.workspace) return
+  return data.value.versions[0].version !== data.value.version
+})
+
+function execute(event: 'unload' | 'reload') {
+  send(`manager/plugin-${event}`, props.current.path, config.value)
+}
+
+</script>
+
+<style lang="scss">
+
+.plugin-view {
+  a {
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+</style>
diff --git a/plugins/frontend/manager/client/settings/select.vue b/plugins/frontend/manager/client/settings/select.vue
index d0a9602d7c..72f59580f5 100644
--- a/plugins/frontend/manager/client/settings/select.vue
+++ b/plugins/frontend/manager/client/settings/select.vue
@@ -5,10 +5,15 @@
         <k-icon name="search"></k-icon>
       </el-input>
     </div>
-    <k-tab-item class="k-tab-group-title" label="" v-model="model">
+    <k-tab-item class="k-tab-group-title" label="@global" v-model="model">
       全局设置
     </k-tab-item>
-    <div class="k-tab-group-title">
+    <el-tree :data="plugins.data" :expand-on-click-node="false" default-expand-all :props="{ class: getClass }"
+      @node-click="handleClick"
+      #="{ node }">
+      {{ node.label }}
+    </el-tree>
+    <!-- <div class="k-tab-group-title">
       运行中的插件
     </div>
     <k-tab-group
@@ -31,7 +36,7 @@
       :data="packages" v-model="model"
       :filter="data => !data.id && data.name && (!config.showDepsOnly || store.dependencies[data.name])" #="data">
       <span :class="{ readonly: isReadonly(data) }">{{ data.shortname }}</span>
-    </k-tab-group>
+    </k-tab-group> -->
   </el-scrollbar>
 </template>
 
@@ -39,7 +44,7 @@
 
 import { ref, computed, onActivated, nextTick } from 'vue'
 import { store } from '@koishijs/client'
-import { envMap } from './utils'
+import { Tree, envMap, plugins } from './utils'
 import { config } from '../utils'
 
 const props = defineProps<{
@@ -53,6 +58,18 @@ const model = computed({
   set: val => emits('update:modelValue', val),
 })
 
+function handleClick(tree: Tree) {
+  model.value = tree.path
+}
+
+function getClass(tree: Tree) {
+  const words: string[] = []
+  if (tree.children) words.push('is-group')
+  if (tree.disabled) words.push('is-disabled')
+  if (tree.path === model.value) words.push('is-active')
+  return words.join(' ')
+}
+
 const packages = computed(() => {
   return Object.fromEntries(Object.values(store.packages)
     .filter(data => data.shortname.includes(keyword.value))
@@ -71,6 +88,7 @@ onActivated(async () => {
   const container = root.value.$el
   await nextTick()
   const element = container.querySelector('.k-tab-item.active') as HTMLElement
+  if (!element) return
   root.value['setScrollTop'](element.offsetTop - (container.offsetHeight - element.offsetHeight) / 2)
 })
 
@@ -122,6 +140,43 @@ onActivated(async () => {
   .k-tab-item:hover i.remove {
     opacity: 0.4;
   }
+
+  .el-tree {
+    margin-top: 0.5rem;
+    user-select: none;
+  }
+
+  .el-tree-node__expand-icon {
+    margin-left: 8px;
+  }
+
+  .el-tree-node.is-group {
+    > .el-tree-node__content {
+      font-weight: bold;
+    }
+  }
+
+  .el-tree-node.is-disabled {
+    > .el-tree-node__content {
+      color: var(--fg3t);
+    }
+  }
+
+  .el-tree-node.is-active {
+    > .el-tree-node__content {
+      background-color: var(--hover-bg);
+      color: var(--active);
+    }
+  }
+
+  .el-tree-node__content {
+    line-height: 2.25rem;
+    height: 2.25rem;
+  }
+
+  .el-tree-node__label {
+    font-size: 16px;
+  }
 }
 
 </style>
diff --git a/plugins/frontend/manager/client/settings/settings.vue b/plugins/frontend/manager/client/settings/settings.vue
deleted file mode 100644
index b2c8689272..0000000000
--- a/plugins/frontend/manager/client/settings/settings.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <k-content class="plugin-view">
-    <!-- title -->
-    <h1 class="config-header" v-if="data.name">
-      {{ data.shortname }}
-      <span class="version">({{ data.workspace ? '工作区' : data.version }})</span>
-      <template v-if="data.id">
-        <k-button solid type="error" @click="execute('unload')">停用插件</k-button>
-        <k-button solid :disabled="env.invalid" @click="execute('reload')">重载配置</k-button>
-      </template>
-      <template v-else>
-        <k-button solid :disabled="env.invalid" @click="execute('reload')">启用插件</k-button>
-        <k-button solid @click="execute('unload')">保存配置</k-button>
-      </template>
-    </h1>
-    <h1 class="config-header" v-else>
-      全局设置
-      <k-button solid @click="send('manager/app-reload', config)">应用配置</k-button>
-    </h1>
-
-    <!-- market -->
-    <template v-if="data.name">
-      <!-- latest -->
-      <k-comment v-if="hasUpdate">
-        当前的插件版本不是最新，<router-link to="/dependencies">点击前往依赖管理</router-link>。
-      </k-comment>
-
-      <!-- external -->
-      <k-comment type="warning" v-if="!data.workspace && !store.dependencies[current]">
-        尚未将当前插件列入依赖，<a @click="send('market/patch', current, data.version)">点击添加</a>。
-      </k-comment>
-
-      <!-- impl -->
-      <template v-for="name in env.impl" :key="name">
-        <k-comment v-if="name in store.services && !data.id" type="warning">
-          此插件将会提供 {{ name }} 服务，但此服务已被其他插件实现。
-        </k-comment>
-        <k-comment v-else :type="data.id ? 'success' : 'primary'">
-          此插件{{ data.id ? '提供了' : '将会提供' }} {{ name }} 服务。
-        </k-comment>
-      </template>
-
-      <!-- using -->
-      <k-comment
-        v-for="({ fulfilled, required, available, name }) in env.using" :key="name"
-        :type="fulfilled ? 'success' : required ? 'error' : 'primary'">
-        {{ required ? '必需' : '可选' }}服务：{{ name }}
-        {{ fulfilled ? '(已加载)' : '(未加载，启用下列任一插件可实现此服务)' }}
-        <template v-if="!fulfilled" #body>
-          <ul>
-            <li v-for="name in available">
-              <k-dep-link :name="name"></k-dep-link> (点击{{ name in store.packages ? '配置' : '添加' }})
-            </li>
-          </ul>
-        </template>
-      </k-comment>
-
-      <!-- dep -->
-      <k-comment
-        v-for="({ fulfilled, required, local, name }) in env.deps" :key="name"
-        :type="fulfilled ? 'success' : required ? 'error' : 'primary'">
-        {{ required ? '必需' : '可选' }}依赖：<k-dep-link :name="name"></k-dep-link>
-        ({{ local ? `${fulfilled ? '已' : '未'}启用` : '未安装，点击添加' }})
-      </k-comment>
-    </template>
-
-    <!-- schema -->
-    <k-comment v-if="!data.root && data.id" type="warning">
-      此插件已被加载，但并非是在配置文件中。你无法修改其配置。
-    </k-comment>
-    <template v-else>
-      <k-comment v-if="!data.schema" type="warning">
-        此插件未声明配置项，这可能并非预期行为{{ hint }}。
-      </k-comment>
-      <k-form :schema="data.schema" :initial="data.config" v-model="config">
-        <template #hint>{{ hint }}</template>
-      </k-form>
-    </template>
-  </k-content>
-</template>
-
-<script setup lang="ts">
-
-import { computed, ref, watch } from 'vue'
-import { store, send, clone } from '@koishijs/client'
-import { envMap } from './utils'
-import { getMixedMeta } from '../utils'
-import KDepLink from './dep-link.vue'
-
-const props = defineProps<{
-  current: string
-}>()
-
-const data = computed(() => getMixedMeta(props.current))
-const env = computed(() => envMap.value[props.current])
-const hint = computed(() => data.value.workspace ? '，请检查源代码' : '，请联系插件作者')
-
-const config = ref()
-
-watch(() => data.value.config, (value) => {
-  config.value = clone(value)
-}, { immediate: true })
-
-const hasUpdate = computed(() => {
-  if (!data.value.versions || data.value.workspace) return
-  return data.value.versions[0].version !== data.value.version
-})
-
-function execute(event: 'unload' | 'reload') {
-  send(`manager/plugin-${event}`, data.value.shortname, config.value)
-}
-
-</script>
-
-<style lang="scss">
-
-.plugin-view {
-  a {
-    cursor: pointer;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-</style>
diff --git a/plugins/frontend/manager/client/settings/utils.ts b/plugins/frontend/manager/client/settings/utils.ts
index 16394c0c52..b5a3a7e57f 100644
--- a/plugins/frontend/manager/client/settings/utils.ts
+++ b/plugins/frontend/manager/client/settings/utils.ts
@@ -4,6 +4,7 @@ import { PackageJson } from '@koishijs/market'
 import { MarketProvider } from '@koishijs/plugin-manager'
 import { store } from '@koishijs/client'
 import { getMixedMeta } from '../utils'
+import {} from '@koishijs/cli'
 
 interface DepInfo {
   name: string
@@ -61,11 +62,6 @@ function getEnvInfo(name: string) {
   const data = getMixedMeta(name)
   const result: EnvInfo = { impl: [], using: {}, deps: {} }
 
-  // nested plugins
-  if (!data.root && data.id) {
-    result.invalid = true
-  }
-
   // check implementations
   for (const name of getKeywords('impl', data)) {
     if (name === 'adapter') continue
@@ -99,3 +95,52 @@ function getEnvInfo(name: string) {
 export const envMap = computed(() => {
   return Object.fromEntries(Object.keys(store.packages).map(name => [name, getEnvInfo(name)]))
 })
+
+export interface Tree {
+  label: string
+  path: string
+  config?: any
+  disabled?: boolean
+  children?: Tree[]
+}
+
+function getTree(prefix: string, plugins: any, map: Dict<Tree>): Tree[] {
+  const trees: Tree[] = []
+  for (const key in plugins) {
+    if (key.startsWith('$')) continue
+    const label = key.replace(/^~/, '')
+    const path = prefix + label
+    const config = plugins[key]
+    const node: Tree = { label, path, config }
+    if (key.startsWith('~')) {
+      node.disabled = true
+    }
+    if (key.startsWith('+')) {
+      node.label = '分组：' + label.slice(1)
+      node.children = getTree(path + '/', config, map)
+    }
+    map[path] = node
+    trees.push(node)
+  }
+  return trees
+}
+
+export const plugins = computed(() => {
+  const map: Dict<Tree> = {
+    '@global': {
+      label: '全局设置',
+      path: '@global',
+      config: store.config,
+    },
+    '': {
+      label: '所有插件',
+      path: '',
+      config: store.config.plugins,
+    },
+  }
+  map[''].children = getTree('', store.config.plugins, map)
+  return {
+    map,
+    data: [map['']],
+  }
+})
diff --git a/plugins/frontend/manager/src/writer.ts b/plugins/frontend/manager/src/writer.ts
index f087213ad1..2457afdde7 100644
--- a/plugins/frontend/manager/src/writer.ts
+++ b/plugins/frontend/manager/src/writer.ts
@@ -40,6 +40,8 @@ class ConfigWriter extends DataService<App.Config> {
     ctx.console.addListener('manager/bot-remove', (id) => {
       this.removeBot(id)
     }, { authority: 4 })
+
+    ctx.on('config', () => this.refresh())
   }
 
   async get() {
@@ -54,7 +56,7 @@ class ConfigWriter extends DataService<App.Config> {
   }
 
   private resolve(path: string) {
-    const segments = path.split('.')
+    const segments = path.split('/')
     let runtime = this.loader.runtime
     let name = segments.shift()
     while (segments.length) {