From f9f60b3d54cb510d1d863c34a489078a794e811e Mon Sep 17 00:00:00 2001
From: Shigma <shigma10826@gmail.com>
Date: Sat, 11 Jun 2022 03:45:00 +0800
Subject: [PATCH] feat(manager): support rename fork alias

---
 .../client/client/components/icons/index.ts   |  2 +
 .../client/components/icons/svg/edit.vue      |  5 +++
 .../frontend/manager/client/bots/index.vue    |  1 +
 .../manager/client/settings/index.vue         | 12 +++---
 .../manager/client/settings/plugin.vue        | 39 +++++++++++++++++--
 .../frontend/manager/client/settings/tree.vue |  8 +---
 .../frontend/manager/client/settings/utils.ts | 15 ++++++-
 plugins/frontend/manager/src/writer.ts        | 21 +++++++++-
 8 files changed, 83 insertions(+), 20 deletions(-)
 create mode 100644 plugins/frontend/client/client/components/icons/svg/edit.vue

diff --git a/plugins/frontend/client/client/components/icons/index.ts b/plugins/frontend/client/client/components/icons/index.ts
index e8de71aa28..b0b549673e 100644
--- a/plugins/frontend/client/client/components/icons/index.ts
+++ b/plugins/frontend/client/client/components/icons/index.ts
@@ -17,6 +17,7 @@ import Cog from './svg/cog.vue'
 import CommentsFull from './svg/comments-full.vue'
 import Database from './svg/database.vue'
 import Diagram from './svg/diagram.vue'
+import Edit from './svg/edit.vue'
 import ExclamationFull from './svg/exclamation-full.vue'
 import Expand from './svg/expand.vue'
 import External from './svg/external.vue'
@@ -77,6 +78,7 @@ register('cog', Cog)
 register('comments-full', CommentsFull)
 register('database', Database)
 register('diagram', Diagram)
+register('edit', Edit)
 register('exclamation-full', ExclamationFull)
 register('expand', Expand)
 register('external', External)
diff --git a/plugins/frontend/client/client/components/icons/svg/edit.vue b/plugins/frontend/client/client/components/icons/svg/edit.vue
new file mode 100644
index 0000000000..d473c33efb
--- /dev/null
+++ b/plugins/frontend/client/client/components/icons/svg/edit.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M373.1 24.97C401.2-3.147 446.8-3.147 474.9 24.97L487 37.09C515.1 65.21 515.1 110.8 487 138.9L289.8 336.2C281.1 344.8 270.4 351.1 258.6 354.5L158.6 383.1C150.2 385.5 141.2 383.1 135 376.1C128.9 370.8 126.5 361.8 128.9 353.4L157.5 253.4C160.9 241.6 167.2 230.9 175.8 222.2L373.1 24.97zM440.1 58.91C431.6 49.54 416.4 49.54 407 58.91L377.9 88L424 134.1L453.1 104.1C462.5 95.6 462.5 80.4 453.1 71.03L440.1 58.91zM203.7 266.6L186.9 325.1L245.4 308.3C249.4 307.2 252.9 305.1 255.8 302.2L390.1 168L344 121.9L209.8 256.2C206.9 259.1 204.8 262.6 203.7 266.6zM200 64C213.3 64 224 74.75 224 88C224 101.3 213.3 112 200 112H88C65.91 112 48 129.9 48 152V424C48 446.1 65.91 464 88 464H360C382.1 464 400 446.1 400 424V312C400 298.7 410.7 288 424 288C437.3 288 448 298.7 448 312V424C448 472.6 408.6 512 360 512H88C39.4 512 0 472.6 0 424V152C0 103.4 39.4 64 88 64H200z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/frontend/manager/client/bots/index.vue b/plugins/frontend/manager/client/bots/index.vue
index b9d8b6f1d8..5557ab7933 100644
--- a/plugins/frontend/manager/client/bots/index.vue
+++ b/plugins/frontend/manager/client/bots/index.vue
@@ -46,6 +46,7 @@ watch(() => store.bots, () => {
 section.page-bots {
   > aside {
     width: 20rem;
+    max-width: unset;
 
     .add {
       font-size: 1.15rem;
diff --git a/plugins/frontend/manager/client/settings/index.vue b/plugins/frontend/manager/client/settings/index.vue
index 3f2c2b1f2f..08a5ad3af2 100644
--- a/plugins/frontend/manager/client/settings/index.vue
+++ b/plugins/frontend/manager/client/settings/index.vue
@@ -3,13 +3,11 @@
     <template #aside>
       <tree-view v-model="path"></tree-view>
     </template>
-    <keep-alive>
-      <k-content class="plugin-view" :key="path">
-        <global-settings v-if="current.path === ':global'" :current="current"></global-settings>
-        <group-settings v-else-if="current.children" v-model="path" :current="current"></group-settings>
-        <plugin-settings v-else :current="current"></plugin-settings>
-      </k-content>
-    </keep-alive>
+    <k-content class="plugin-view" :key="path">
+      <global-settings v-if="current.path === ':global'" :current="current"></global-settings>
+      <group-settings v-else-if="current.children" v-model="path" :current="current"></group-settings>
+      <plugin-settings v-else :current="current"></plugin-settings>
+    </k-content>
   </k-card-aside>
 </template>
 
diff --git a/plugins/frontend/manager/client/settings/plugin.vue b/plugins/frontend/manager/client/settings/plugin.vue
index 40ae0b55fc..fae09e5aae 100644
--- a/plugins/frontend/manager/client/settings/plugin.vue
+++ b/plugins/frontend/manager/client/settings/plugin.vue
@@ -11,8 +11,10 @@
       </el-select>
     </template>
     <template v-else>
-      {{ data.shortname }}
-      <span class="version">({{ data.workspace ? '工作区' : data.version }})</span>
+      <span class="label">{{ data.shortname }}</span>
+      <span class="alias">
+        @ <input v-model="alias" @blur="updateAlias">
+      </span>
     </template>
     <template v-if="!current.disabled">
       <k-button solid type="error" @click="execute('unload')">停用插件</k-button>
@@ -83,7 +85,7 @@
 import { send, store, clone, router } from '@koishijs/client'
 import { computed, ref, watch } from 'vue'
 import { getMixedMeta } from '../utils'
-import { envMap, Tree } from './utils'
+import { envMap, Tree, setPath } from './utils'
 import KDepLink from './dep-link.vue'
 
 const props = defineProps<{
@@ -96,6 +98,23 @@ watch(() => props.current.config, (value) => {
   config.value = clone(value)
 }, { immediate: true })
 
+const alias = ref()
+
+watch(() => props.current.alias, (value) => {
+  alias.value = value
+}, { immediate: true })
+
+function updateAlias() {
+  if (alias.value === props.current.alias) return
+  props.current.alias = alias.value
+  send('manager/alias', props.current.path, alias.value)
+  const oldPath = props.current.path
+  const segments = oldPath.split('/')
+  const oldKey = segments.pop()
+  segments.push(oldKey.split(':', 1)[0] + (alias.value ? ':' : '') + alias.value)
+  setPath(oldPath, segments.join('/'))
+}
+
 const name = computed(() => {
   const { label, target: temporary } = props.current
   const shortname = temporary || label
@@ -138,6 +157,20 @@ function execute(event: 'unload' | 'reload') {
       text-decoration: underline;
     }
   }
+
+  .config-header .alias {
+    font-size: 1.15rem;
+    color: var(--fg3);
+    user-select: none;
+
+    input {
+      font-size: inherit;
+      border: none;
+      outline: none;
+      color: var(--fg3);
+      padding: 0;
+    }
+  }
 }
 
 </style>
diff --git a/plugins/frontend/manager/client/settings/tree.vue b/plugins/frontend/manager/client/settings/tree.vue
index 5d4fed5302..0b57b0d1ce 100644
--- a/plugins/frontend/manager/client/settings/tree.vue
+++ b/plugins/frontend/manager/client/settings/tree.vue
@@ -34,7 +34,7 @@
 
 import { ref, computed, onActivated, nextTick, watch } from 'vue'
 import { send } from '@koishijs/client'
-import { Tree, plugins } from './utils'
+import { Tree, plugins, setPath } from './utils'
 
 const props = defineProps<{
   modelValue: string
@@ -88,11 +88,7 @@ function handleDrop(source: Node, target: Node, position: 'before' | 'after' | '
   const segments1 = oldPath.split('/')
   const segments2 = ctxPath ? ctxPath.split('/') : []
   segments2.push(segments1.pop())
-  const newPath = source.data.path = segments2.join('/')
-  if (oldPath === newPath) return
-  plugins.value.paths[newPath] = plugins.value.paths[oldPath]
-  delete plugins.value.paths[oldPath]
-  emits('update:modelValue', newPath)
+  setPath(oldPath, segments2.join('/'))
 }
 
 function getClass(tree: Tree) {
diff --git a/plugins/frontend/manager/client/settings/utils.ts b/plugins/frontend/manager/client/settings/utils.ts
index 70c345b45b..f730876d3b 100644
--- a/plugins/frontend/manager/client/settings/utils.ts
+++ b/plugins/frontend/manager/client/settings/utils.ts
@@ -2,7 +2,7 @@ import { Dict } from 'koishi'
 import { computed } from 'vue'
 import { PackageJson } from '@koishijs/market'
 import { MarketProvider } from '@koishijs/plugin-manager'
-import { store } from '@koishijs/client'
+import { router, store } from '@koishijs/client'
 import { getMixedMeta } from '../utils'
 import {} from '@koishijs/cli'
 
@@ -98,6 +98,7 @@ export const envMap = computed(() => {
 
 export interface Tree {
   id: string
+  alias?: string
   label: string
   path: string
   config?: any
@@ -121,7 +122,8 @@ function getTree(prefix: string, plugins: any): Tree[] {
       node.path = prefix + key
       node.children = getTree(node.path + '/', config)
     } else {
-      node.label = key.split(':')[0]
+      node.label = key.split(':', 1)[0]
+      node.alias = key.slice(node.label.length + 1)
       node.path = prefix + key
     }
     node.id = node.path
@@ -157,3 +159,12 @@ export const plugins = computed(() => {
   traverse(root)
   return { data: [root], paths, expanded }
 })
+
+export function setPath(oldPath: string, newPath: string) {
+  if (oldPath === newPath) return
+  const tree = plugins.value.paths[oldPath]
+  tree.path = newPath
+  plugins.value.paths[newPath] = tree
+  delete plugins.value.paths[oldPath]
+  router.replace('/plugins/' + newPath)
+}
diff --git a/plugins/frontend/manager/src/writer.ts b/plugins/frontend/manager/src/writer.ts
index 3871db5f86..77e695f491 100644
--- a/plugins/frontend/manager/src/writer.ts
+++ b/plugins/frontend/manager/src/writer.ts
@@ -9,6 +9,7 @@ declare module '@koishijs/plugin-console' {
     'manager/reload'(path: string, config: any, key?: string): void
     'manager/unload'(path: string, config: any, key?: string): void
     'manager/group'(path: string): void
+    'manager/alias'(path: string, alias: string): void
     'manager/meta'(path: string, config: any): void
     'manager/bot-update'(id: string, adapter: string, config: any): void
     'manager/bot-remove'(id: string): void
@@ -55,7 +56,7 @@ class ConfigWriter extends DataService<App.Config> {
       this.reloadApp(config)
     }, { authority: 4 })
 
-    for (const key of ['teleport', 'reload', 'unload', 'group', 'meta'] as const) {
+    for (const key of ['teleport', 'reload', 'unload', 'group', 'meta', 'alias'] as const) {
       ctx.console.addListener(`manager/${key}`, this[key].bind(this), { authority: 4 })
     }
 
@@ -92,6 +93,22 @@ class ConfigWriter extends DataService<App.Config> {
     return [runtime, name] as const
   }
 
+  alias(path: string, alias: string) {
+    const [runtime, oldKey] = this.resolve(path)
+    const config = runtime.config[oldKey]
+    let newKey = oldKey.split(':', 1)[0] + (alias ? ':' : '') + alias
+    const record = runtime[Symbol.for('koishi.loader.record')]
+    const fork = record[oldKey]
+    if (fork) {
+      delete record[oldKey]
+      record[newKey] = fork
+    } else {
+      newKey = '~' + newKey
+    }
+    rename(runtime.config, oldKey, newKey, config)
+    this.loader.writeConfig()
+  }
+
   meta(path: string, config: any) {
     const [runtime, name] = this.resolve(path)
     const target = path ? runtime.config[name] : runtime.config
@@ -151,7 +168,7 @@ class ConfigWriter extends DataService<App.Config> {
     this.loader.writeConfig()
   }
 
-  locate(name: string, runtime: Plugin.Runtime) {
+  private locate(name: string, runtime: Plugin.Runtime) {
     for (const key in runtime.config) {
       const value = runtime.config[key]
       const fork = runtime[Symbol.for('koishi.loader.record')][key]