finish setting panel

activity-page-editor/package.json

@@ -7,11 +7,12 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "element-plus": "^2.2.14",
     "vue": "^3.2.37"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
-    "vite": "^3.0.4",
-    "element-factory": "../element-factory/"
+    "element-factory": "../element-factory/",
+    "vite": "^3.0.4"
   }
 }

activity-page-editor/src/App.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { sfc } from 'element-factory'
 import Render from './components/Render.vue'
 import Panel from './components/Panel.vue'
 import schema from './schemas/card.mjs'
@@ -22,21 +23,17 @@ function translateProps(props = {}) {
 }
 
 function createElement(name) {
-  // if (/^[A-Z]/.test(name)) {
-  //   return `${name} v-select="true"`
-  // } else {
-    return `${name}`
-  // }
+  return `${name}`
 }
 
-function parse(json, ignores) {
+function parse(json, ignores, noWrapper) {
   let res = ''
   switch (json.type) {
     case 'Element':
       res += `<${createElement(json.name)}${translateProps(json.props)}>
   ${
     json.children ? 
-      json.children.map(v => parse(v, ignores))
+      json.children.map(v => parse(v, ignores, noWrapper))
         .reduce((a, b) => a + b, '') : 
       ''
   }
@@ -47,14 +44,16 @@ function parse(json, ignores) {
           json.id = ++uuid + ''
           idMap.set(json.id, json)
         }
-        res = `<Wrapper id=${json.id}>${res}</Wrapper>`
+        if (!noWrapper) {
+          res = `<Wrapper id=${json.id}>${res}</Wrapper>`
+        }
       }
       break;
     case 'Template':
       res += `<template ${json.name ? `#${json.name}` : ''}>
   ${
     json.children ? 
-      json.children.map(v => parse(v, ignores))
+      json.children.map(v => parse(v, ignores, noWrapper))
         .reduce((a, b) => a + b, '') : 
       ''
   }      
@@ -64,18 +63,47 @@ function parse(json, ignores) {
   return res
 }
 
-let xml = parse(schema, ['Card'])
+let xml = ref(parse(schema, ['Card']))
 
 onMounted(() => {
   document.body.addEventListener('schema-change', (e) => {
     currentComponent.value = idMap.get(e.id)
   }, false)
 })
+
+function onchange(keys, value) {
+  const arr = keys.split('.')
+  const lastKey = arr.pop()
+  let res = currentComponent.value
+  for (let key of arr) {
+    res = res[key]
+  }
+  res[lastKey] = value
+  // 如果是切换组件就把 props 填空
+  if (keys === 'name') {
+    res.props = {}
+  }
+  xml.value = parse(schema, ['Card'])
+}
+
+function createCode(xml) {
+  if ('download' in document.createElement('a')) {
+    let eleLink = document.createElement('a');
+    eleLink.download = 'component.vue';
+    let blob = new Blob([sfc(xml)])
+    eleLink.href = URL.createObjectURL(blob)
+
+    document.body.appendChild(eleLink)
+    eleLink.click()
+    document.body.removeChild(eleLink)
+  }
+}
 </script>
 
 <template>
+  <button @click="createCode(parse(schema, [], true))">出码</button>
   <Render :schema="xml" :data="data.data.result[0]"></Render>
-  <Panel :data="currentComponent"></Panel>
+  <Panel :data="currentComponent" @change="onchange"></Panel>
 </template>
 
 <style scoped>

activity-page-editor/src/components/Panel.vue

@@ -10,14 +10,100 @@
 }
 </style>
 
-<script setup>
-const props = defineProps({
-    data: Object
-})
+<script>
+import data from '../data.mjs'
+const keys = Object.keys(data.data.result[0])
+const components = [
+    'CirclePic',
+    'RectPic',
+    'DeletePrice',
+    'Price',
+    'Tags',
+    'Title'
+]
+const interfaces = {
+    CirclePic: {
+        value: {
+            label: '图片地址'
+        }
+    },
+    RectPic: {
+        value: {
+            label: '图片地址'
+        }
+    },
+    DeletePrice: {
+        value: {
+            label: '价格'
+        }
+    },
+    Price: {
+        value: {
+            label: '价格'
+        }
+    },
+    Title: {
+        msg: {
+            label: '文字'
+        }
+    },
+    Tags: {
+        tags: {
+            label: '标签'
+        }
+    }
+}
+
+export default {
+    props: {
+        data: {
+            type: Object,
+            default: {}
+        }
+    },
+    data(vm) {
+        return {
+            keys,
+            components
+        }
+    },
+    computed: {
+        props() {
+            const attrs = this.data && this.data.props || {}
+            const _interface = interfaces[this.data.name];
+            return Object.keys(_interface).map(_key => {
+                const key = _key in attrs ? _key : `:${_key}`
+                return { key: key, value: attrs[key], label: _interface[_key].label }
+            })
+        }
+    },
+    methods: {
+        oninput(item, event) {
+            item.value = event
+        }
+    },
+    emits: ['change']
+}
 </script>
 
 <template>
-<div class="panel-container">
-{{props.data}}
+<div class="panel-container" v-if="data">
+    <p>组件选择</p>
+    <div>
+        <select v-model="data.name" @change="$emit('change', 'name', $event.target.value)">
+            <option v-for="value in components" :value="value">{{value}}</option>
+        </select>
+    </div>
+    <p>属性列表：</p>
+    <div v-for="item in props">
+        <div v-if="item.key.indexOf(':') === 0">
+            {{ (item.label || item.key.slice(1)) + ': ' }} <select v-model="item.value" @change="$emit('change', `props.${item.key}`, $event.target.value)">
+                <option v-for="value in keys" :value="value">{{value}}</option>
+            </select>
+        </div>
+        <div v-else>
+            {{ (item.label || item.key) + ': ' }} <input v-model="item.value" @change="$emit('change', `props.${item.key}`, $event.target.value)" />
+        </div>    
+    </div>
 </div>
 </template>

activity-page-editor/src/components/Render.vue

@@ -27,19 +27,30 @@ export default {
     components: {
         Blank
     },
-    mounted: function () {
-        let js = factory(this.schema)
-            .replace(/\"vue\"/g, '"/node_modules/.vite/deps/vue.js"')
-        // TODO：找了2个小时，没找到更优化的办法办法～
-        js += `;\n window.__render__(__default__)`
-        const script = document.createElement('script')
-        script.type = 'module'
-        script.innerHTML = js
-        window.__render__ = (Component) => {
-            this.$.components.Current = Component
-            this.current = 'Current'
+    watch: {
+        schema: {
+            handler(value) {
+                if (this.script) {
+                    document.body.removeChild(this.script)
+                    this.script = null
+                    this.current = 'Blank'
+                }
+
+                let js = factory(value)
+                    .replace(/\"vue\"/g, '"/node_modules/.vite/deps/vue.js"')
+                // TODO：找了2个小时，没找到更优化的办法办法～
+                js += `;\n window.__render__(__default__)`
+                const script = this.script = document.createElement('script')
+                script.type = 'module'
+                script.innerHTML = js
+                window.__render__ = (Component) => {
+                    this.$.components.Current = Component
+                    this.current = 'Current'
+                }
+                document.body.appendChild(script) 
+            },
+            immediate: true
         }
-        document.body.appendChild(script) 
     }
 }
 </script>