新增自定义插件功能

frontend/src/useful/plugin/index.ts

@@ -1,6 +1,7 @@
 import * as shortcut from '@/useful/shortcut'
 import { getLogger } from '@/useful/utils'
 import { useBus } from '@/useful/bus'
+import { useToast } from '@/useful/toast'
 import buildInPlugins from './build-in'
 import store from '@/store'
 import * as tree from './tree'
@@ -27,6 +28,9 @@ const ctx = {
   bus,
   store,
   shortcut,
+  ui: {
+    useToast,
+  },
   registerHook: (type: HookType, fun: HookFun, once = false) => {
     if (Array.isArray(hooks[type])) {
       hooks[type] = [...hooks[type]!!, { fun, once }]
@@ -73,6 +77,12 @@ export const init = () => {
       register(plugin)
     }
   })
+
+  ;(window as any).registerPlugin = register
+
+  const script = window.document.createElement('script')
+  script.src = '/api/plugins'
+  window.document.body.appendChild(script)
 }
 
 export const triggerHook = ctx.triggerHook

src/server/constant.ts

@@ -14,6 +14,7 @@ export const CONFIG_FILE = path.join(USER_DIR, 'config.json')
 export const STATIC_DIR = path.join(__dirname, '../../frontend/dist')
 export const HELP_DIR = path.join(__dirname, '../../help')
 export const ASSETS_DIR = path.join(__dirname, '../assets')
+export const USER_PLUGIN_DIR = path.join(USER_DIR, './plugins')
 
 export const BIN_DIR = convertAppPath(path.join(__dirname, '../../bin'))
 export const RESOURCES_DIR = convertAppPath(path.join(__dirname, '../resources'))

src/server/init.ts

@@ -1,5 +1,6 @@
 import * as fs from 'fs'
-import { USER_DIR, TRASH_DIR, MAIN_REPO_DIR } from './constant'
+import * as path from 'path'
+import { USER_DIR, TRASH_DIR, MAIN_REPO_DIR, USER_PLUGIN_DIR } from './constant'
 
 const init = () => {
   if (!fs.existsSync(USER_DIR)) {
@@ -11,6 +12,21 @@ const init = () => {
   if (!fs.existsSync(TRASH_DIR)) {
     fs.mkdirSync(TRASH_DIR)
   }
+  if (!fs.existsSync(USER_PLUGIN_DIR)) {
+    fs.mkdirSync(USER_PLUGIN_DIR)
+    fs.writeFileSync(path.join(USER_PLUGIN_DIR, 'plugin-example.js'), `
+window.registerPlugin({
+  name: 'example-plugin',
+  register: ctx => {
+    console.log('example-plugin', 'register', ctx);
+
+    // setTimeout(() => {
+    //   ctx.ui.useToast().show('info', 'HELLO WORLD!');
+    // }, 2000);
+  }
+});
+    `.trim())
+  }
 }
 
 export default init

src/server/main.ts

@@ -6,7 +6,7 @@ import * as xStatic from 'koa-static'
 import * as mime from 'mime'
 import * as request from 'request'
 import * as pty from 'node-pty'
-import { STATIC_DIR, HOME_DIR, HELP_DIR } from './constant'
+import { STATIC_DIR, HOME_DIR, HELP_DIR, USER_PLUGIN_DIR } from './constant'
 import init from './init'
 import file from './file'
 import dataRepository from './repository'
@@ -176,6 +176,24 @@ const readme = async (ctx: any, next: any) => {
   }
 }
 
+const userPlugin = async (ctx: any, next: any) => {
+  if (ctx.path.startsWith('/api/plugins')) {
+    ctx.type = 'application/javascript; charset=utf-8';
+
+    let code = ''
+    fs.readdirSync(USER_PLUGIN_DIR, { withFileTypes: true })
+      .filter(x => x.isFile && x.name.endsWith('.js'))
+      .forEach(x => {
+        code += `// ===== ${x.name} =====\n`
+          + fs.readFileSync(path.join(USER_PLUGIN_DIR, x.name))
+          + '\n// ===== end =====\n\n'
+      })
+    ctx.body = code
+  } else {
+    await next()
+  }
+}
+
 const wrapper = async (ctx: any, next: any, fun: any) => {
   try {
     await fun(ctx, next)
@@ -207,6 +225,7 @@ const server = (port = 3000) => {
   app.use(async (ctx: any, next: any) => await wrapper(ctx, next, proxy))
   app.use(async (ctx: any, next: any) => await wrapper(ctx, next, readme))
   app.use(async (ctx: any, next: any) => await wrapper(ctx, next, markFile))
+  app.use(async (ctx: any, next: any) => await wrapper(ctx, next, userPlugin))
 
   app.use(async (ctx: any, next: any) => {
     if (ctx.path.startsWith('/static')) {