online: support share links

packages/online/app/components/home.vue

@@ -30,7 +30,7 @@
         </div>
         <h2>我可以在这里做什么？</h2>
         <p>在左侧的活动栏中前往「沙盒」，并在窗口底部的聊天框中输入「help」，即可开始你与 Koishi 的对话。</p>
-        <p>了解基础操作后，你可以体验更多插件的功能。由于 k-on! 还处于测试阶段，因此只有少数的插件进行了适配。你可以在「插件市场」中查看并配置这些插件。如果你是一名开发者，也可以参考<a href="https://koishi.chat/cookbook/online.html" rel="noopener noreferer" target="_blank">这篇文档</a>将你的插件是否部署到 k-on!。</p>
+        <p>了解基础操作后，你可以体验更多插件的功能。由于 k-on! 还处于测试阶段，因此只有少数的插件进行了适配。你可以在「插件市场」中查看并配置这些插件。如果你是一名开发者，也可以参考<a href="https://koishi.chat/cookbook/online.html" rel="noopener noreferer" target="_blank">这篇文档</a>将你的插件部署到 k-on!。</p>
         <div class="links">
           <router-link to="/sandbox">
             <k-card>

packages/online/app/components/instance.vue

@@ -19,7 +19,7 @@
           删除
         </el-button>
       </template>
-      <el-button>
+      <el-button @click="share(id)">
         <k-icon name="share"></k-icon>
         分享
       </el-button>
@@ -29,8 +29,9 @@
 
 <script lang="ts" setup>
 
-import { activate, data, instances, remove, Instance, flush } from '../utils'
+import { activate, data, instances, remove, Instance, flush, shareLink } from '../utils'
 import { computed } from 'vue'
+import { message } from '@koishijs/client'
 
 const props = defineProps<{ id: string } & Instance>()
 
@@ -42,6 +43,12 @@ const model = computed({
   },
 })
 
+async function share(id: string) {
+  const link = await shareLink(id)
+  await navigator.clipboard.writeText(link)
+  message.success('已复制分享链接')
+}
+
 </script>
 
 <style lang="scss" scoped>

packages/online/app/utils.ts

@@ -1,8 +1,8 @@
 import { ref, shallowRef, watch } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
-import { dump } from 'js-yaml'
+import { dump, load } from 'js-yaml'
 import { promises as fs } from 'fs'
-import { Dict, provideStorage } from '@koishijs/client'
+import { Dict, global, provideStorage } from '@koishijs/client'
 import loader from './loader'
 
 globalThis.fs = fs
@@ -70,7 +70,7 @@ export async function remove(key: string) {
   await flush()
 }
 
-export async function activate(id?: string, event?: Event) {
+export async function activate(id?: string, event?: Event, config?: any) {
   (event?.target as HTMLElement)?.blur()
   await loader.app?.stop()
   id ||= Math.random().toString(36).slice(2, 10)
@@ -84,6 +84,7 @@ export async function activate(id?: string, event?: Event) {
     await flush()
   } catch {
     loader.config = {
+      ...config,
       plugins: {
         'config': {},
         'console': {},
@@ -101,8 +102,14 @@ export async function activate(id?: string, event?: Event) {
         'theme-vanilla': {},
       },
     }
+    for (const key in config?.plugins || {}) {
+      if (!key.startsWith('~') || !loader.config.plugins[key.slice(1)]) {
+        loader.config.plugins[key] = config.plugins[key]
+      }
+    }
+    delete loader.config.shared
     await fs.writeFile(filename, dump(loader.config))
-    instances.value[id] = { name: id, lastVisit: Date.now() }
+    instances.value[id] = { name: id, ...config?.share, lastVisit: Date.now() }
     await flush()
     await loader.init(`${root}/${id}`)
   }
@@ -140,6 +147,12 @@ async function getInstances() {
   return result
 }
 
+export async function shareLink(id: string) {
+  const config: any = load(await fs.readFile(`${root}/${id}/koishi.yml`, 'utf8'))
+  config.share = instances.value[id]
+  return location.origin + global.uiPath + '?share=' + btoa(JSON.stringify(config))
+}
+
 export async function initialize() {
   await fs.mkdir(root, { recursive: true })
   try {
@@ -150,5 +163,12 @@ export async function initialize() {
     await fs.rm(root, { recursive: true })
     await fs.mkdir(root, { recursive: true })
   }
-  await activate(data.value.current)
+  const share = new URLSearchParams(location.search).get('share')
+  if (share) {
+    const config = JSON.parse(atob(share))
+    location.replace(location.origin + location.pathname)
+    await activate(null, null, config)
+  } else {
+    await activate(data.value.current)
+  }
 }