feat(manager): shortname display

packages/client/app/styles/layout.scss

@@ -35,7 +35,6 @@
 
 .layout-left {
   .el-tree {
-    margin-top: 0.5rem;
     user-select: none;
     line-height: 2.25rem;
   }

packages/client/client/data.ts

@@ -27,6 +27,9 @@ export async function send(type: string, ...args: any[]) {
       'Content-Type': 'application/json',
     }),
   })
+  if (!response.ok) {
+    throw new Error(response.statusText)
+  }
   const result = await response.json()
   console.debug('[response]', result)
   return result

packages/client/client/plugins/action.ts

@@ -59,7 +59,7 @@ export interface ActiveMenu {
 
 export function useMenu<K extends keyof ActionContext>(id: K) {
   const ctx = useContext()
-  return (event: MouseEvent, value: MaybeRefOrGetter<ActionContext[K]>) => {
+  return (event: MouseEvent, value?: MaybeRefOrGetter<ActionContext[K]>) => {
     ctx.define(id, value)
     event.preventDefault()
     const { clientX, clientY } = event

packages/registry/src/local.ts

@@ -209,7 +209,7 @@ export class LocalScanner {
         name,
         property: manifest.ecosystem.property || 'cordis',
         inject: manifest.service?.implements || [],
-        pattern: manifest.ecosystem.pattern || [`${name}-plugin-`],
+        pattern: manifest.ecosystem.pattern || [`${name}-plugin-*`],
         keywords: manifest.ecosystem.keywords || [name, 'plugin'],
       })
     }

plugins/manager/client/components/index.vue

@@ -5,7 +5,7 @@
 
       <template v-else>
         <span class="label">
-          {{ currentEntry.label || currentEntry.name }}
+          {{ ctx.manager.getLabel(currentEntry) }}
         </span>
         <span class="divider"></span>
         <el-popover popper-class="k-menu" v-model:visible="visible">

plugins/manager/client/components/tree.vue

@@ -1,14 +1,11 @@
 <template>
   <el-scrollbar class="plugin-tree" ref="root" @contextmenu.stop="trigger($event)">
-    <div class="px-4 flex gap-x-2">
+    <div class="search px-4 flex gap-x-2 w-full box-border absolute top-4 z-100">
       <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 class="p-0 h-8 w-8 shrink-0" @click.stop="trigger($event)">
+        <k-icon name="add"></k-icon>
       </el-button>
     </div>
     <el-tree
@@ -29,8 +26,8 @@
       @node-collapse="handleCollapse"
       #="{ node }">
       <div class="item" :ref="handleItemMount">
-        <div class="label" :title="getLabel(node)">
-          {{ getLabel(node) }}
+        <div class="label">
+          {{ ctx.manager.getLabel(node.data) }}
         </div>
         <div class="right">
           <span class="status-light" :class="getStatusClass(node.data)"></span>
@@ -97,10 +94,6 @@ interface EntryNode extends Omit<TreeNode, 'data'> {
   childNodes: EntryNode[]
 }
 
-function getLabel(node: EntryNode) {
-  return node.data.label || node.data.name
-}
-
 function allowDrag(node: EntryNode) {
   return !!node.data.id
 }
@@ -163,23 +156,29 @@ watch(keyword, (val) => {
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+
+.search {
+  background: var(--k-side-bg);
+}
 
-.plugin-tree {
+.search::after {
+  position: absolute;
+  content: '';
+  top: 100%;
+  left: 0;
   width: 100%;
-  height: 100%;
-  overflow: auto;
+  height: 32px;
+  background: linear-gradient(var(--k-side-bg) 25%, transparent 50%);
+}
 
-  .el-scrollbar__view {
-    padding: 1rem 0;
+.el-scrollbar {
+  :deep(.el-scrollbar__view) {
+    padding: 4rem 0 1rem;
     line-height: 2.25rem;
   }
 
-  .k-icon-filter {
-    height: 15px;
-  }
-
-  .el-tree-node {
+  :deep(.el-tree-node) {
     &.is-edited > .el-tree-node__content {
       color: var(--warning);
     }
@@ -188,14 +187,12 @@ watch(keyword, (val) => {
       font-weight: bold;
     }
 
-    &.not-found {
-      .el-tree-node__content .status-light {
-        display: none;
-      }
+    &.not-found > .el-tree-node__content .status-light {
+      display: none;
     }
   }
 
-  .el-tree-node__content {
+  :deep(.el-tree-node__content) {
     .item {
       flex: 1;
       height: 100%;
@@ -213,7 +210,9 @@ watch(keyword, (val) => {
 
     .right {
       height: 100%;
+      width: 1rem;
       margin: 0 1.5rem 0 0.5rem;
+      text-align: center;
     }
   }
 }

plugins/manager/client/index.ts

@@ -9,10 +9,10 @@ import Rename from './dialogs/rename.vue'
 import Group from './dialogs/group.vue'
 import Main from './routes/main.vue'
 import Config from './routes/config.vue'
+import Remove from './dialogs/remove.vue'
 
 import './index.scss'
 import './icons'
-import Remove from './dialogs/remove.vue'
 
 declare module '@cordisjs/client' {
   interface Context {
@@ -359,6 +359,32 @@ export default class Manager extends Service {
     }
   }
 
+  getLabel(entry: EntryData) {
+    if (entry.label) return entry.label
+    const cap = /^(@[\w-]+\/)?([\w-]+)/.exec(entry.name)
+    if (!cap) return entry.name
+    const fullname = cap[0]
+    const path = entry.name.slice(fullname.length)
+    const local = this.data.value.packages[entry.name]
+    if (local) return local.shortname + path
+    const patterns = Object.values(this.data.value.packages).flatMap((local) => {
+      if (!local.manifest.ecosystem) return []
+      return local.manifest.ecosystem.pattern ?? [`${local.package.name}-plugin-*`]
+    })
+    for (const pattern of patterns) {
+      const regexp = new RegExp('^' + pattern.replace('*', '.*') + '$')
+      let prefix = '', name = fullname
+      if (!pattern.startsWith('@')) {
+        prefix = cap[1] || ''
+        name = cap[2]
+      }
+      if (!regexp.test(name)) continue
+      const index = pattern.indexOf('*')
+      return prefix + name.slice(index) + path
+    }
+    return fullname + path
+  }
+
   checkConfig(entry: EntryData) {
     const schema = this.data.value.packages[entry.name]?.runtime?.schema
     if (!schema) return true