feat(manager): add h1 title and root menu

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

@@ -27,6 +27,15 @@
   @media screen and (max-width: 480px) {
     --content-padding: 1.5rem;
   }
+
+  h1 {
+    font-size: 1.5rem;
+    margin: 2rem 0;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+  }
 }
 
 </style>

plugins/manager/client/components/index.vue

@@ -42,11 +42,13 @@
     </k-empty>
     <template v-else-if="currentEntry.name in ctx.manager.data.value.packages">
       <k-content v-if="!local.runtime">
+        <h1>{{ currentEntry.name }}</h1>
         <k-comment>
           <p>正在加载插件信息……</p>
         </k-comment>
       </k-content>
       <k-content v-else-if="local.runtime.failed">
+        <h1>{{ currentEntry.name }}</h1>
         <k-comment type="danger">
           <p>插件信息失败，这可能是插件本身的问题所致。</p>
         </k-comment>
@@ -57,6 +59,7 @@
       />
     </template>
     <k-content v-else>
+      <h1>{{ currentEntry.name }}</h1>
       <k-slot name="plugin-missing" single>
         <k-comment type="danger">
           <p>此插件尚未安装。</p>

plugins/manager/client/components/tree.vue

@@ -1,9 +1,15 @@
 <template>
-  <el-scrollbar class="plugin-tree" ref="root">
-    <div class="search">
-      <el-input v-model="keyword" #suffix>
+  <el-scrollbar class="plugin-tree" ref="root" @contextmenu.stop="trigger($event)">
+    <div class="px-4 flex gap-x-2">
+      <el-input v-model="keyword" #prefix>
         <k-icon name="search"></k-icon>
       </el-input>
+      <el-button class="p-0 h-8 w-8 shrink-0" @click="ctx.manager.dialogSelect = null">
+        <k-icon name="add-plugin"></k-icon>
+      </el-button>
+      <el-button class="p-0 h-8 w-8 shrink-0" @click="ctx.manager.dialogCreateGroup = null">
+        <k-icon name="add-group"></k-icon>
+      </el-button>
     </div>
     <el-tree
       ref="tree"
@@ -92,11 +98,7 @@ interface EntryNode extends Omit<TreeNode, 'data'> {
 }
 
 function getLabel(node: EntryNode) {
-  if (node.data.isGroup) {
-    return '分组：' + (node.data.label || node.data.id)
-  } else {
-    return node.data.label || node.data.name
-  }
+  return node.data.label || node.data.name
 }
 
 function allowDrag(node: EntryNode) {
@@ -148,7 +150,7 @@ const optionProps: TreeOptionProps = {
     if (!entry.isGroup && !(entry.name in ctx.manager.data.value.packages)) words.push('not-found')
     if (entry.id === ctx.manager.currentEntry?.id) words.push('is-active')
     const change = ctx.manager.changes[entry.id]
-    if (!deepEqual(change.config, entry.config)) {
+    if (change && !deepEqual(change.config, entry.config)) {
       words.push('is-edited')
     }
     return words.join(' ')
@@ -173,10 +175,6 @@ watch(keyword, (val) => {
     line-height: 2.25rem;
   }
 
-  .search {
-    padding: 0 1.5rem;
-  }
-
   .k-icon-filter {
     height: 15px;
   }

plugins/manager/client/dialogs/group.vue

@@ -1,14 +1,14 @@
 <template>
   <el-dialog
-    :model-value="createGroup !== undefined"
-    @update:model-value="createGroup = undefined"
+    :model-value="ctx.manager.dialogCreateGroup !== undefined"
+    @update:model-value="ctx.manager.dialogCreateGroup = undefined"
     title="创建分组"
     destroy-on-close
     @open="handleOpen"
   >
     <el-input ref="inputEl" v-model="input" @keydown.enter.stop.prevent="action"/>
     <template #footer>
-      <el-button @click="createGroup = undefined">取消</el-button>
+      <el-button @click="ctx.manager.dialogCreateGroup = undefined">取消</el-button>
       <el-button type="primary" @click="action">确定</el-button>
     </template>
   </el-dialog>
@@ -38,8 +38,9 @@ watch(createGroup, (value) => {
 async function action() {
   const id = await send('manager.config.create', {
     name: 'cordis/group',
-    parent: createGroup.value!.id,
+    parent: createGroup.value,
     label: input.value || undefined,
+    config: [],
   })
   router.replace('/plugins/' + id)
   ctx.manager.dialogCreateGroup = undefined

plugins/manager/client/dialogs/remove.vue

@@ -3,14 +3,14 @@
     v-model="show"
     title="确认移除"
     destroy-on-close
-    @closed="remove = undefined"
+    @closed="ctx.manager.dialogRemove = undefined"
   >
     <template v-if="remove">
       确定要移除{{ remove.isGroup ? `分组 ${remove.label || remove.id}` : `插件 ${remove.label || remove.name}` }} 吗？此操作不可撤销！
     </template>
     <template #footer>
       <el-button @click="show = false">取消</el-button>
-      <el-button type="danger" @click="removeItem">确定</el-button>
+      <el-button type="danger" @click="action">确定</el-button>
     </template>
   </el-dialog>
 </template>
@@ -30,9 +30,9 @@ watch(remove, (value) => {
   show.value = true
 })
 
-async function removeItem() {
+async function action() {
   show.value = false
-  ctx.manager.remove(remove!)
+  ctx.manager.remove(remove.value!)
   // tree?.activate()
 }
 

plugins/manager/client/dialogs/select.vue

@@ -1,14 +1,15 @@
 <template>
   <el-dialog
-    :modelValue="!!ctx.manager.dialogSelect"
+    :modelValue="ctx.manager.dialogSelect !== undefined"
     @update:modelValue="ctx.manager.dialogSelect = undefined"
     class="plugin-select"
+    @open="handleOpen"
   >
     <template #header>
       <slot name="title" :packages="packages">
         <span class="title">选择插件</span>
       </slot>
-      <el-input ref="input" v-model="keyword" #suffix>
+      <el-input ref="inputEl" v-model="keyword" #suffix>
         <k-icon name="search"></k-icon>
       </el-input>
     </template>
@@ -39,12 +40,15 @@
 
 import { router, send, useContext, useI18nText } from '@cordisjs/client'
 import { computed, nextTick, ref, watch } from 'vue'
+import { useAutoFocus } from '../utils'
 
 const ctx = useContext()
 const tt = useI18nText()
 
 const keyword = ref('')
-const input = ref()
+const inputEl = ref()
+
+const handleOpen = useAutoFocus(inputEl)
 
 const packages = computed(() => Object.values(ctx.manager.data.value.packages).filter((local) => {
   return local.package.name.includes(keyword.value.toLowerCase())
@@ -56,7 +60,7 @@ function joinName(name: string, base: string) {
 }
 
 async function configure(name: string) {
-  const parent = ctx.manager.dialogSelect!.id
+  const parent = ctx.manager.dialogSelect
   ctx.manager.dialogSelect = undefined
   keyword.value = ''
   const id = await send('manager.config.create', {
@@ -67,12 +71,6 @@ async function configure(name: string) {
   router.push('/plugins/' + id)
 }
 
-watch(() => ctx.manager.dialogSelect, async (value) => {
-  if (!value) return
-  await nextTick()
-  await input.value.focus()
-}, { flush: 'post' })
-
 </script>
 
 <style lang="scss">

plugins/manager/client/index.ts

@@ -60,10 +60,10 @@ export default class Manager extends Service {
   changes = reactive<Dict<Partial<EntryData>>>({})
 
   _dialogFork = ref<string>()
-  _dialogSelect = ref<EntryData>()
+  _dialogSelect = ref<string | null>()
   _dialogRemove = ref<EntryData>()
   _dialogRename = ref<EntryData>()
-  _dialogCreateGroup = ref<EntryData>()
+  _dialogCreateGroup = ref<string | null>()
 
   get dialogFork() {
     return this._dialogFork.value
@@ -269,14 +269,15 @@ export default class Manager extends Service {
     }])
 
     this.ctx.action('config.tree.rename', {
-      disabled: ({ config }) => !config.tree,
+      hidden: ({ config }) => !config.tree,
       action: ({ config }) => {
         this.dialogRename = config.tree
       },
     })
 
     this.ctx.action('config.tree.remove', {
-      disabled: ({ config }) => !config.tree || this.hasCoreDeps(config.tree),
+      hidden: ({ config }) => !config.tree,
+      disabled: ({ config }) => this.hasCoreDeps(config.tree),
       action: ({ config }) => {
         this.dialogRemove = config.tree
       },
@@ -305,19 +306,19 @@ export default class Manager extends Service {
 
     this.ctx.action('config.tree.add-plugin', {
       hidden: ({ config }) => config.tree && !config.tree.isGroup,
-      action: ({ config }) => this.dialogSelect = config.tree,
+      action: ({ config }) => this.dialogSelect = config.tree?.id ?? null,
     })
 
     this.ctx.action('config.tree.add-group', {
       hidden: ({ config }) => config.tree && !config.tree.isGroup,
       action: ({ config }) => {
-        this.dialogCreateGroup = config.tree
+        this.dialogCreateGroup = config.tree?.id ?? null
       },
     })
 
     this.ctx.action('config.tree.save', {
       shortcut: 'ctrl+s',
-      disabled: (scope) => !scope.config?.tree,
+      hidden: ({ config }) => !config.tree,
       action: async ({ config: { tree } }) => {
         const { disabled } = tree
         if (!disabled && !this.checkConfig(tree)) {
@@ -333,7 +334,8 @@ export default class Manager extends Service {
     })
 
     this.ctx.action('config.tree.toggle', {
-      disabled: ({ config }) => !config.tree || this.hasCoreDeps(config.tree),
+      hidden: ({ config }) => !config.tree,
+      disabled: ({ config }) => this.hasCoreDeps(config.tree),
       action: async ({ config: { tree } }) => {
         const { disabled, name } = tree
         if (disabled && !this.checkConfig(tree)) {

plugins/manager/client/routes/main.vue

@@ -1,5 +1,6 @@
 <template>
   <k-content v-if="current && local.runtime">
+    <h1>{{ current.name }}</h1>
     <k-slot name="plugin-details">
       <!-- dependency -->
       <k-slot-item :order="800">

plugins/webui/src/index.ts

@@ -96,7 +96,8 @@ class NodeWebUI extends WebUI<NodeWebUI.Config> {
     this.ctx.server.post(`${this.config.apiPath}/${event}`, async (koa) => {
       const { body } = koa.request
       try {
-        koa.body = await (callback as any)(body) ?? {}
+        koa.body = JSON.stringify(await (callback as any)(body) ?? {})
+        koa.type = 'application/json'
         koa.status = 200
       } catch (error) {
         this.ctx.logger.warn(error)