feat: 支持文档模板

src/main/api.js

@@ -1,6 +1,8 @@
-import {app} from 'electron';
+import {app, BrowserWindow} from 'electron';
 import {getlocalDataFile, saveData, getData} from './common/utils';
 import path from "path";
+import marked from 'marked';
+const rendererMD = new marked.Renderer();
 
 const appPath = path.join(getlocalDataFile());
 const dbPath = path.join(appPath, './db.json');
@@ -10,7 +12,6 @@ export default {
     return app.getPath(arg.name);
   },
   hideMainWindow(arg, mainWindow) {
-    console.log(111, mainWindow)
     mainWindow.hide();
   },
   showMainWindow(arg, mainWindow) {
@@ -20,15 +21,13 @@ export default {
     return arg
   },
   setExpendHeight({height}, mainWindow) {
-    console.log(height);
+    mainWindow.setSize(788, height || 60);
-    mainWindow.setSize(788, height);
   },
   db: {
     put({data}) {
       data._rev = '';
       let dbData = getData(dbPath) || [];
       let target = [];
-      console.log(data, dbData);
       dbData.some((d, i) => {
         if (d._id === data._id) {
           target = [d, i]
@@ -102,5 +101,37 @@ export default {
       const result = dbData.filter(d => d._id === key);
       return result;
     }
+  },
+
+  ubrowser: {
+    goto: ({md, title}) => {
+      marked.setOptions({
+        renderer: rendererMD,
+        gfm: true,
+        tables: true,
+        breaks: false,
+        pedantic: false,
+        sanitize: false,
+        smartLists: true,
+        smartypants: false
+      });
+      const htmlContent = marked(md);
+      const win = new BrowserWindow({
+        height: 600,
+        useContentSize: true,
+        width: 788,
+        title,
+        webPreferences: {
+          webSecurity: false,
+          enableRemoteModule: true,
+          backgroundThrottling: false,
+          webviewTag: true,
+          nodeIntegration: true // 在网页中集成Node
+        }
+      });
+      win.loadURL('data:text/html;charset=UTF-8,' + encodeURIComponent(htmlContent))
+      win.once('ready-to-show', () => win.show());
+      return win.id
+    }
   }
 }

src/main/index.js

@@ -39,7 +39,7 @@ function createWindow () {
   mainWindow.on('closed', () => {
     mainWindow = null
   });
-  protocol.interceptFileProtocol('file', (req, callback) => {
+  protocol.interceptFileProtocol('image', (req, callback) => {
     const url = req.url.substr(8);
     callback(decodeURI(url));
   }, (error) => {

src/renderer/pages/plugins/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <webview id="webview" :src="path" :preload="preload"></webview>
+    <webview v-if="!query.subType" id="webview" :src="path" :preload="preload"></webview>
+    <div v-else>
+      <webview id="webview" :src="templatePath" :preload="preload"></webview>
+    </div>
   </div>
 </template>
 
@@ -15,6 +18,9 @@ export default {
       path: `File://${this.$route.query.sourceFile}`,
       preload: `File://${path.join(__static, './preload.js')}`,
       webview: null,
+      query: this.$route.query,
+      config: {},
+      templatePath: `File://${path.join(__static, './doc-tpl.html')}?code=${JSON.parse(this.$route.query.detail).code}&targetFile=${encodeURIComponent(this.$route.query.sourceFile)}`,
     }
   },
   mounted() {
@@ -28,10 +34,40 @@ export default {
       if (event.channel === 'setSubInput') {
         this.setSubPlaceHolder(event.args[0].placeHolder);
       }
+      if (event.channel === 'removeSubInput') {
+        this.commonUpdate({
+          searchValue: '',
+        });
+      }
+      if (event.channel === 'setSubInputValue') {
+        this.commonUpdate({
+          searchValue: event.args[0].text,
+        });
+        this.webview.send('msg-back-setSubInput', this.searchValue);
+      }
+      if (event.channel === 'templateConfig') {
+        this.config = event.args[0].config;
+      }
+      if (event.channel === 'getFeatures') {
+        this.webview.send('msg-back-getFeatures', this.pluginDetail);
+      }
+      if (event.channel === 'setFeature') {
+        this.commonUpdate({
+          devPlugins: this.devPlugins.map(plugin => {
+            if (plugin.name === this.query.name) {
+              return {
+                ...plugin,
+                features: [...plugin.features, event.args[0].feature]
+              }
+            }
+            return plugin;
+          }),
+        });
+      }
     })
   },
   methods: {
-    ...mapMutations('main', ['setSubPlaceHolder']),
+    ...mapMutations('main', ['setSubPlaceHolder', 'commonUpdate']),
   },
   beforeRouteUpdate() {
     this.path = `File://${this.$route.query.sourceFile}`
@@ -41,7 +77,10 @@ export default {
     webview && webview.send('onPluginOut', this.$route.query)
   },
   computed: {
-    ...mapState('main', ['searchValue'])
+    ...mapState('main', ['searchValue', 'devPlugins']),
+    pluginDetail() {
+      return (this.devPlugins.filter(plugin => plugin.name === this.query.name)[0] || {}).features
+    },
   },
   watch: {
     searchValue() {

src/renderer/store/modules/main.js

@@ -99,9 +99,15 @@ const actions = {
 
       const pluginConfig = {
         ...config,
-        sourceFile: path.join(fileUrl, `../${config.main}`),
+        sourceFile: path.join(fileUrl, `../${config.main || 'index.html'}`),
         name: uuidv4(),
-        type: 'dev'
+        type: 'dev',
+        subType: (() => {
+          if (config.main) {
+            return ''
+          }
+          return 'template';
+        })()
       };
       commit('commonUpdate', {
         selected: {
@@ -164,7 +170,7 @@ const actions = {
             ...cmds.map((cmd) => ({
               name: cmd,
               value: 'plugin',
-              icon: 'file://' + path.join(plugin.sourceFile, `../${plugin.logo}`),
+              icon: 'image://' + path.join(plugin.sourceFile, `../${plugin.logo}`),
               desc: fe.explain,
               click: (router) => {
                 actions.openPlugin({commit}, {cmd, plugin, feature: fe, router});
@@ -201,7 +207,7 @@ const actions = {
       selected: {
         key: 'plugin-container',
         name: cmd,
-        icon: 'file://' + path.join(plugin.sourceFile, `../${plugin.logo}`),
+        icon: 'image://' + path.join(plugin.sourceFile, `../${plugin.logo}`),
       },
       searchValue: '',
       showMain: true,

static/doc-tpl.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+</head>
+<script crossorigin="anonymous" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
+<script src="https://lib.baomitu.com/vue-router/3.5.1/vue-router.min.js"></script>
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+  .doc-container {
+      width: 100%;
+      height: 100vh;
+      display: flex;
+      align-items: flex-start;
+      justify-content: flex-start;
+      border-top: 1px solid #ddd;
+  }
+  .doc-container .menu {
+      width: 200px;
+      height: 100%;
+      border-right: 1px solid #ddd;
+      overflow: auto;
+      background: #fff;
+  }
+  .doc-container .menu .item.active {
+      background: #DEE2E6;
+  }
+  .doc-container .menu .item {
+      padding: 5px 10px;
+      cursor: pointer;
+  }
+  .doc-container .menu .title {
+      font-size: 14px;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+      width: 100%;
+  }
+  .doc-container .menu .desc {
+      font-size: 12px;
+      color: #999;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+      width: 100%;
+  }
+  .frame {
+      flex: 1;
+      height: 100%;
+      border: none;
+  }
+</style>
+<body>
+  <div id="app">
+    <router-view />
+  </div>
+</body>
+<script src="./doc.js" type="module"></script>
+<script src="./index.js" type="module"></script>
+</html>

static/doc.js

@@ -0,0 +1,28 @@
+export default {
+  template: `
+    <div class="doc-container">
+      <div class="menu">
+        <div @click="active = index" :class="active === index ? 'active item' : 'item'" v-for="(item, index) in menu">
+          <div class="title">{{item.t}}</div>
+          <div class="desc">{{item.d}}</div>
+        </div>
+      </div>
+      <iframe class="frame" :src="path" />
+    </div>
+  `,
+  data() {
+    return {
+      query: this.$route.query,
+      menu: [],
+      active: 0,
+    }
+  },
+  mounted() {
+    this.menu = JSON.parse(this.query.args).indexes || [];
+  },
+  computed: {
+    path() {
+      return decodeURIComponent(this.query.rootPath) + (this.menu[this.active] || {}).p
+    }
+  }
+}

static/index.js

@@ -0,0 +1,41 @@
+import doc from './doc.js';
+function getQueryVariable(variable) {
+  var query = window.location.search.substring(1);
+  var vars = query.split("&");
+  console.log(vars);
+  for (var i=0;i<vars.length;i++) {
+    var pair = vars[i].split("=");
+    if(pair[0] == variable){return pair[1];}
+  }
+  return(false);
+}
+
+const routes = [
+  { path: '/doc', name: 'doc', component: doc },
+]
+
+const router = new VueRouter({
+  routes // (缩写) 相当于 routes: routes
+})
+
+const app = new Vue({
+  el: '#app',
+  data: {
+    config: window.exports,
+    code: '',
+    current: {}
+  },
+  mounted() {
+    this.code = getQueryVariable('code');
+    this.current = this.config[this.code];
+    this.$router.push({
+      name: this.current.mode,
+      query: {
+        args: JSON.stringify(this.current.args),
+        rootPath: getQueryVariable('targetFile').replace('index.html', '')
+      },
+    })
+
+  },
+  router,
+})

static/preload.js

@@ -1,5 +1,21 @@
 const path = require('path');
-const filePath = location.href.replace('file://', '');
+
+let filePath = '';
+function getQueryVariable(variable) {
+  var query = window.location.search.substring(1);
+  var vars = query.split("&");
+  for (var i=0;i<vars.length;i++) {
+    var pair = vars[i].split("=");
+    if(pair[0] == variable){return pair[1];}
+  }
+  return(false);
+}
+
+if (location.href.indexOf('targetFile') > -1) {
+  filePath = decodeURIComponent(getQueryVariable('targetFile'));
+} else {
+  filePath = location.href.replace('file://', '');
+}
 const {ipcRenderer, nativeImage, clipboard, remote} = require('electron');
 
 const currentWindow = remote.getCurrentWindow();
@@ -26,19 +42,20 @@ window.utools = window.rubick = {
   onPluginEnter(cb) {
     ipcRenderer.once('onPluginEnter', (e, message) => {
       const feature = JSON.parse(message.detail)
-      cb(feature)
+      console.log(feature)
+      cb({...feature, type: 'text'})
     })
   },
   onPluginReady(cb) {
     ipcRenderer.once('onPluginReady', (e, message) => {
       const feature = JSON.parse(message.detail)
-      cb(feature)
+      cb({...feature, type: 'text'})
     })
   },
   onPluginOut(cb) {
     ipcRenderer.once('onPluginOut', (e, message) => {
       const feature = JSON.parse(message.detail)
-      cb(feature)
+      cb({...feature, type: 'text'})
     })
   },
 
@@ -69,8 +86,14 @@ window.utools = window.rubick = {
     });
   },
 
-  setSubInputValue(text) {
+  removeSubInput() {
+    ipcRenderer.sendToHost('removeSubInput');
+  },
 
+  setSubInputValue(text) {
+    ipcRenderer.sendToHost('setSubInputValue', {
+      text
+    });
   },
 
   getPath(name) {
@@ -139,5 +162,30 @@ window.utools = window.rubick = {
   isDarkColors() {
     return false;
   },
+  getFeatures() {
+    ipcRenderer.sendToHost('getFeatures');
+    return new Promise(resolve => {
+      ipcRenderer.on(`msg-back-getFeatures`, (e, result) => {
+        resolve(result);
+      });
+    });
+  },
+  setFeature(feature) {
+    ipcRenderer.sendToHost('setFeature', {feature});
+  },
+  ubrowser: {
+    goto(md, title) {
+      ipcRenderer.send('msg-trigger', {
+        type: 'ubrowser.goto',
+        md, title,
+      });
+      return utools.ubrowser;
+    },
+    run() {
+
+    }
+  }
 }
 require(path.join(filePath, '../preload.js'));
+window.exports && ipcRenderer.sendToHost('templateConfig', {config: window.exports});
+