@maxelms/create-plugin-cli 1.1.0

package/templates/vue-micro-plugin/configuration/App.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-form label-position="top" :model="form">
+    <el-form-item label="是否禁用">
+      <el-switch v-model="form.disabled"></el-switch>
+    </el-form-item>
+    <el-form-item label="最大长度">
+      <el-input-number v-model="form.maxLength"></el-input-number>
+    </el-form-item>
+    <el-form-item label="控件大小">
+      <el-select v-model="form.size">
+        <el-option label="small" value="small"></el-option>
+        <el-option label="default" value="default"></el-option>
+        <el-option label="large" value="large"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="占位符">
+      <el-input v-model="form.placeholder"></el-input>
+    </el-form-item>
+    <el-form-item label="label">
+      <el-input v-model="form.label"></el-input>
+    </el-form-item>
+    <el-form-item label="绑定字段">
+      <el-select v-model="form.field">
+        <el-option :label="field.fieldName" :value="field.pathChain" v-for="(field, index) in formFields" :key="index"></el-option>
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { PluginChannel } from '@max-kit/max-api'
+
+export default {
+  name: 'App',
+  data() {
+    return {
+      form: {
+        size: 'default',
+        disabled: false,
+        placeholder: '',
+        maxLength: 1,
+        label: '',
+        field: '',
+      },
+      formFields: [],
+      pluginChannel: null
+    };
+  },
+  mounted() {
+    this.pluginChannel = new PluginChannel({
+      // 初始化配置项
+      init: this.initConfigs
+    })
+    this.getFormFields()
+  },
+  beforeDestroy() {
+    this.pluginChannel && this.pluginChannel.destroy()
+  },
+  methods: {
+    initConfigs (configs) {
+      if (!configs || typeof configs !== 'object') return
+      if (typeof configs.field === 'object') configs.field = configs.field.pathChain
+      this.form = {
+        ...this.form,
+        ...configs
+      }
+    },
+    getFormFields () {
+      this.pluginChannel && this.pluginChannel.emit('getFormFieldsValueAsync').then((fields) => {
+        this.formFields = fields
+      }).catch(err => {
+        console.log('err: ', err)
+      })
+    }
+  },
+  watch: {
+    // 表单变化时，提交配置信息
+    form: {
+      handler() {
+        const configs = { ...this.form };
+        const { field } = configs
+        if (field) {
+          const fieldDetail = this.formFields.find(item => item.pathChain === field)
+          if (fieldDetail) configs.field = fieldDetail
+        }
+        this.pluginChannel.update(configs);
+      },
+      deep: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>

package/templates/vue-micro-plugin/configuration/main.js

@@ -0,0 +1,11 @@
+
+import Vue from 'vue'
+import App from './App.vue'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+Vue.use(ElementUI);
+
+new Vue({
+    render: h => h(App),
+}).$mount('#root')

package/templates/vue-micro-plugin/manifest.json.tpl

@@ -0,0 +1,3 @@
+{
+  "configurationType": "<%= configurationType %>"
+}

package/templates/vue-micro-plugin/package.json.tpl

@@ -0,0 +1,56 @@
+
+{
+  "name": "<%= pluginName %>",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "start": "vue-cli-service serve",
+    "build": "vue-cli-service build && maxelms-plugin-cli -c",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@max-kit/max-api": "1.0.1",
+    "core-js": "3.6.5",
+    "element-ui": "2.15.6",
+    "vue": "2.6.11"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
+    "@maxelms/create-plugin-cli": "<%= cliVersion %>",
+    "@vue/cli-plugin-babel": "4.5.0",
+    "@vue/cli-plugin-eslint": "4.5.0",
+    "@vue/cli-service": "4.5.0",
+    "archiver": "5.3.1",
+    "babel-eslint": "10.1.0",
+    "copy-webpack-plugin": "5.1.1",
+    "eslint": "6.7.2",
+    "eslint-plugin-vue": "6.2.2",
+    "less": "^4.1.3",
+    "less-loader": "5.0.0",
+    "sass": "1.47.0",
+    "sass-loader": "8.0.2",
+    "url-loader": "2.2.0",
+    "vue-template-compiler": "2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
+

package/templates/vue-micro-plugin/public/configuration.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Maxelms 页面组件</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/templates/vue-micro-plugin/public/configuration.json

@@ -0,0 +1,30 @@
+{
+  "propName1": {
+    "label": "配置项一",
+    "type": "string",
+    "defaultValue": "配置项内容"
+  },
+  "propName2": {
+    "label": "配置项二",
+    "type": "number",
+    "defaultValue": 350
+  },
+  "propName3": {
+    "label": "配置项三",
+    "type": "select",
+    "options": [
+      {
+        "label": "选项1",
+        "value": "option1"
+      },
+      {
+        "label": "选项2",
+        "value": "option2"
+      },
+      {
+        "label": "选项3",
+        "value": "option3"
+      }
+    ]
+  }
+}

package/templates/vue-micro-plugin/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Maxelms 页面组件</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/templates/vue-micro-plugin/scripts/compress.js

@@ -0,0 +1,32 @@
+const fs = require('fs');
+const archiver = require('archiver');
+
+const distDir = 'dist'
+if (fs.existsSync(distDir)) {
+  if (fs.existsSync('dist.maxplugin')) {
+    fs.unlinkSync('dist.maxplugin')
+  }
+
+  const output = fs.createWriteStream('dist.maxplugin');
+  const archive = archiver('zip', {
+    zlib: { level: 9 }
+  });
+
+  output.on('close', function() {
+    console.log('Compress completed!');
+  });
+
+  archive.on('error', function(err) {
+    console.log('Compress failed!');
+    throw err;
+  });
+
+  archive.pipe(output);
+
+
+  archive.directory('dist/', 'dist');
+
+  archive.finalize();
+} else {
+  console.log('No dist directory found!');
+}

package/templates/vue-micro-plugin/src/App.vue.tpl

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <div class="maxelms-customize-component-<%= timestamp %>">
+      <input
+        :style="{width: `${width}px`}"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        value="欢迎使用 Maxelms 页面组件"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'App',
+  components: {
+  },
+  methods: {
+    
+  },
+  computed: {
+    /** 是否禁用 */
+    disabled () {
+      return this.$root?.masterProps?.configurations?.propName3
+    },
+    /** 控件宽度 */
+    width () {
+      return this.$root?.masterProps?.configurations?.propName2 || 350
+    },
+    /** 提示文本 */
+    placeholder () {
+      return this.$root?.masterProps?.configurations?.propName1
+    },
+  },
+}
+</script>
+
+<style lang="less">
+@import "./style.less";
+</style>

package/templates/vue-micro-plugin/src/main.js

@@ -0,0 +1,38 @@
+import Vue from 'vue'
+import { registerPlugin, poweredByMaxelms } from '@max-kit/max-api'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+window.__SINGLETON_MODE__ = true
+
+const vms = {}
+
+const render = (props) => {
+  const { containerId } = props || {}
+  vms[containerId] = new Vue({
+    data: {
+      masterProps: props || {}
+    },
+    render: h => h(App),
+  }).$mount(containerId ? `#${containerId} #root` : '#root')
+}
+
+if (poweredByMaxelms) {
+  registerPlugin({
+    mount(props) {
+      render(props)
+    },
+    update(props) {
+      if (vms[props.containerId]) {
+        vms[props.containerId].masterProps = props
+      }
+    },
+    unmount(props) {
+      vms[props.containerId]?.$destroy?.()
+      vms[props.containerId] = null
+    }
+  });
+} else {
+  render()
+}

package/templates/vue-micro-plugin/src/style.less.tpl

@@ -0,0 +1,16 @@
+
+@prefixCls: maxelms-customize-component-<%= timestamp %>;
+
+.@{prefixCls} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    input {
+      width: 300px;
+      text-align: center;
+    }
+    img {
+      width: 350px;
+    }
+}

package/templates/vue-micro-plugin/vue.config.js.tpl

@@ -0,0 +1,53 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  pages: {
+    index: {
+      entry: "src/main.js",
+      template: "public/index.html",
+      filename: "index.html",
+      title: "Maxelms Plugin",
+    },
+    <% if (configurationType === 'html') {%>
+    configuration: {
+      entry: "configuration/main.js",
+      template: "public/configuration.html",
+      filename: "configuration.html",
+      title: "Maxelms Plugin Configurations",
+    },
+    <% } %>
+  },
+  publicPath: './',
+  css: {
+    extract: true,
+  },
+  productionSourceMap: false,
+  devServer: {
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+    port: 8080,
+    open: ['/', '/playground.html'],
+    contentBase: path.join(__dirname, 'examples/'),
+  },
+  chainWebpack: (config) => {
+    config.module
+      .rule('fonts')
+      .test(/.(ttf|otf|eot|woff|woff2)$/)
+      .use('url-loader')
+      .loader('url-loader')
+      .tap(() => ({
+        name: '/fonts/[name].[hash:8].[ext]'
+      }))
+      .end()
+  },
+  configureWebpack: {
+    plugins: [
+      new CopyWebpackPlugin([
+        { from: 'README.md' },
+        { from: 'manifest.json' },
+      ]),
+    ]
+  },
+};