diff --git a/.DS_Store b/.DS_Store
index 2fecdd4..5403157 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/activity-page-editor/package-lock.json b/activity-page-editor/package-lock.json
index 9fa78c0..cbdcf3e 100644
--- a/activity-page-editor/package-lock.json
+++ b/activity-page-editor/package-lock.json
@@ -8,6 +8,7 @@
       "name": "activity-page-editor",
       "version": "0.0.0",
       "dependencies": {
+        "element-plus": "^2.2.14",
         "vue": "^3.2.37"
       },
       "devDependencies": {
@@ -43,6 +44,22 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
+      "integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.9.tgz",
+      "integrity": "sha512-okdrwiVeKBmW41Hkl0eMrXDjzJwhQMuKiBOu17rOszqM+LS/yBYpNQNV5Jvoh06Wc+89fMmb/uhzf8NZuDuUaQ==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@esbuild/linux-loong64": {
       "version": "0.14.54",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz",
@@ -59,6 +76,47 @@
         "node": ">=12"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
+      "integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
+      "integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
+      "dependencies": {
+        "@floating-ui/core": "^0.7.3"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.14.184",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.184.tgz",
+      "integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q=="
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+      "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
+      "integrity": "sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz",
@@ -174,15 +232,133 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
       "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.1.0.tgz",
+      "integrity": "sha512-BIroqvXEqt826aE9r3K5cox1zobuPuAzdYJ36kouC2TVhlXvFKIILgFVWrpp9HZPwB3aLzasmG3K87q7TSyXZg==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.15",
+        "@vueuse/metadata": "9.1.0",
+        "@vueuse/shared": "9.1.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
+      "integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.1.0.tgz",
+      "integrity": "sha512-8OEhlog1iaAGTD3LICZ8oBGQdYeMwByvXetOtAOZCJOzyCRSwqwdggTsmVZZ1rkgYIEqgUBk942AsAPwM21s6A==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.1.0.tgz",
+      "integrity": "sha512-pB/3njQu4tfJJ78ajELNda0yMG6lKfpToQW7Soe09CprF1k3QuyoNi1tBNvo75wBDJWD+LOnr+c4B5HZ39jY/Q==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
+      "integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
     "node_modules/csstype": {
       "version": "2.6.20",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
+    "node_modules/dayjs": {
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz",
+      "integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA=="
+    },
     "node_modules/element-factory": {
       "resolved": "../element-factory",
       "link": true
     },
+    "node_modules/element-plus": {
+      "version": "2.2.14",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.14.tgz",
+      "integrity": "sha512-V5Pis0OHhePg1RgVogZrcefaVl8vjVn4Pn9Qsh/t2CbFgjg9kKOYFqf/tuP3ObSXGm3X89hpe0W+nLVAsaFnpw==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.0.6",
+        "@floating-ui/dom": "^0.5.4",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.3",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.14.54",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.54.tgz",
@@ -539,6 +715,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -588,6 +769,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.2.tgz",
+      "integrity": "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -596,6 +797,11 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -607,6 +813,11 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -766,6 +977,17 @@
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.11.tgz",
       "integrity": "sha512-9JKn5vN+hDt0Hdqn1PiJ2guflwP+B6Ga8qbDuoF0PzzVhrzsKIJo8yGqVk6CmMHiMei9w1C1Bp9IMJSIK+HPIQ=="
     },
+    "@ctrl/tinycolor": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
+      "integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
+    },
+    "@element-plus/icons-vue": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.9.tgz",
+      "integrity": "sha512-okdrwiVeKBmW41Hkl0eMrXDjzJwhQMuKiBOu17rOszqM+LS/yBYpNQNV5Jvoh06Wc+89fMmb/uhzf8NZuDuUaQ==",
+      "requires": {}
+    },
     "@esbuild/linux-loong64": {
       "version": "0.14.54",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz",
@@ -773,6 +995,42 @@
       "dev": true,
       "optional": true
     },
+    "@floating-ui/core": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
+      "integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
+    },
+    "@floating-ui/dom": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
+      "integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
+      "requires": {
+        "@floating-ui/core": "^0.7.3"
+      }
+    },
+    "@popperjs/core": {
+      "version": "npm:@sxzz/popperjs-es@2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+    },
+    "@types/lodash": {
+      "version": "4.14.184",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.184.tgz",
+      "integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q=="
+    },
+    "@types/lodash-es": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+      "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
+    "@types/web-bluetooth": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
+      "integrity": "sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA=="
+    },
     "@vitejs/plugin-vue": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz",
@@ -879,11 +1137,61 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
       "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
     },
+    "@vueuse/core": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.1.0.tgz",
+      "integrity": "sha512-BIroqvXEqt826aE9r3K5cox1zobuPuAzdYJ36kouC2TVhlXvFKIILgFVWrpp9HZPwB3aLzasmG3K87q7TSyXZg==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.15",
+        "@vueuse/metadata": "9.1.0",
+        "@vueuse/shared": "9.1.0",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.8",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
+          "integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.1.0.tgz",
+      "integrity": "sha512-8OEhlog1iaAGTD3LICZ8oBGQdYeMwByvXetOtAOZCJOzyCRSwqwdggTsmVZZ1rkgYIEqgUBk942AsAPwM21s6A=="
+    },
+    "@vueuse/shared": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.1.0.tgz",
+      "integrity": "sha512-pB/3njQu4tfJJ78ajELNda0yMG6lKfpToQW7Soe09CprF1k3QuyoNi1tBNvo75wBDJWD+LOnr+c4B5HZ39jY/Q==",
+      "requires": {
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.8",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz",
+          "integrity": "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg==",
+          "requires": {}
+        }
+      }
+    },
+    "async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
     "csstype": {
       "version": "2.6.20",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
+    "dayjs": {
+      "version": "1.11.5",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz",
+      "integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA=="
+    },
     "element-factory": {
       "version": "file:../element-factory",
       "requires": {
@@ -896,6 +1204,28 @@
         "vue": "^3.2.37"
       }
     },
+    "element-plus": {
+      "version": "2.2.14",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.14.tgz",
+      "integrity": "sha512-V5Pis0OHhePg1RgVogZrcefaVl8vjVn4Pn9Qsh/t2CbFgjg9kKOYFqf/tuP3ObSXGm3X89hpe0W+nLVAsaFnpw==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.0.6",
+        "@floating-ui/dom": "^0.5.4",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.3",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      }
+    },
     "esbuild": {
       "version": "0.14.54",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.54.tgz",
@@ -1065,6 +1395,11 @@
       "dev": true,
       "optional": true
     },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
     "estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -1101,6 +1436,22 @@
         "has": "^1.0.3"
       }
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "lodash-unified": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.2.tgz",
+      "integrity": "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==",
+      "requires": {}
+    },
     "magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -1109,11 +1460,21 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
     },
+    "normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
diff --git a/activity-page-editor/package.json b/activity-page-editor/package.json
index c501a60..1356fc6 100644
--- a/activity-page-editor/package.json
+++ b/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"
   }
 }
diff --git a/activity-page-editor/src/App.vue b/activity-page-editor/src/App.vue
index 18738a2..854f75b 100644
--- a/activity-page-editor/src/App.vue
+++ b/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>
diff --git a/activity-page-editor/src/components/Panel.vue b/activity-page-editor/src/components/Panel.vue
index 41f880e..8daf356 100644
--- a/activity-page-editor/src/components/Panel.vue
+++ b/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>
\ No newline at end of file
diff --git a/activity-page-editor/src/components/Render.vue b/activity-page-editor/src/components/Render.vue
index c13acc3..50ae5ea 100644
--- a/activity-page-editor/src/components/Render.vue
+++ b/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>
diff --git a/activity-page-editor/yarn.lock b/activity-page-editor/yarn.lock
index 613f7f2..03bb004 100644
--- a/activity-page-editor/yarn.lock
+++ b/activity-page-editor/yarn.lock
@@ -7,6 +7,50 @@
   "resolved" "https://registry.npmjs.org/@babel/parser/-/parser-7.18.11.tgz"
   "version" "7.18.11"
 
+"@ctrl/tinycolor@^3.4.1":
+  "integrity" "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
+  "resolved" "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz"
+  "version" "3.4.1"
+
+"@element-plus/icons-vue@^2.0.6":
+  "integrity" "sha512-okdrwiVeKBmW41Hkl0eMrXDjzJwhQMuKiBOu17rOszqM+LS/yBYpNQNV5Jvoh06Wc+89fMmb/uhzf8NZuDuUaQ=="
+  "resolved" "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.9.tgz"
+  "version" "2.0.9"
+
+"@floating-ui/core@^0.7.3":
+  "integrity" "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
+  "resolved" "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz"
+  "version" "0.7.3"
+
+"@floating-ui/dom@^0.5.4":
+  "integrity" "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg=="
+  "resolved" "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz"
+  "version" "0.5.4"
+  dependencies:
+    "@floating-ui/core" "^0.7.3"
+
+"@popperjs/core@npm:@sxzz/popperjs-es@^2.11.7":
+  "integrity" "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+  "resolved" "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz"
+  "version" "2.11.7"
+
+"@types/lodash-es@*", "@types/lodash-es@^4.17.6":
+  "integrity" "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg=="
+  "resolved" "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz"
+  "version" "4.17.6"
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*", "@types/lodash@^4.14.182":
+  "integrity" "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q=="
+  "resolved" "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.184.tgz"
+  "version" "4.14.184"
+
+"@types/web-bluetooth@^0.0.15":
+  "integrity" "sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA=="
+  "resolved" "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz"
+  "version" "0.0.15"
+
 "@vitejs/plugin-vue@^3.0.1":
   "integrity" "sha512-U4zNBlz9mg+TA+i+5QPc3N5lQvdUXENZLO2h0Wdzp56gI1MWhqJOv+6R+d4kOzoaSSq6TnGPBdZAXKOe4lXy6g=="
   "resolved" "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz"
@@ -102,17 +146,70 @@
   "resolved" "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz"
   "version" "3.2.37"
 
+"@vueuse/core@^9.1.0":
+  "integrity" "sha512-BIroqvXEqt826aE9r3K5cox1zobuPuAzdYJ36kouC2TVhlXvFKIILgFVWrpp9HZPwB3aLzasmG3K87q7TSyXZg=="
+  "resolved" "https://registry.npmjs.org/@vueuse/core/-/core-9.1.0.tgz"
+  "version" "9.1.0"
+  dependencies:
+    "@types/web-bluetooth" "^0.0.15"
+    "@vueuse/metadata" "9.1.0"
+    "@vueuse/shared" "9.1.0"
+    "vue-demi" "*"
+
+"@vueuse/metadata@9.1.0":
+  "integrity" "sha512-8OEhlog1iaAGTD3LICZ8oBGQdYeMwByvXetOtAOZCJOzyCRSwqwdggTsmVZZ1rkgYIEqgUBk942AsAPwM21s6A=="
+  "resolved" "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.1.0.tgz"
+  "version" "9.1.0"
+
+"@vueuse/shared@9.1.0":
+  "integrity" "sha512-pB/3njQu4tfJJ78ajELNda0yMG6lKfpToQW7Soe09CprF1k3QuyoNi1tBNvo75wBDJWD+LOnr+c4B5HZ39jY/Q=="
+  "resolved" "https://registry.npmjs.org/@vueuse/shared/-/shared-9.1.0.tgz"
+  "version" "9.1.0"
+  dependencies:
+    "vue-demi" "*"
+
+"async-validator@^4.2.5":
+  "integrity" "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+  "resolved" "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz"
+  "version" "4.2.5"
+
 "csstype@^2.6.8":
   "integrity" "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
   "resolved" "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz"
   "version" "2.6.20"
 
+"dayjs@^1.11.3":
+  "integrity" "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA=="
+  "resolved" "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz"
+  "version" "1.11.5"
+
 "element-factory@../element-factory/":
   "resolved" "file:../element-factory"
   "version" "0.0.1"
   dependencies:
     "@vue/compiler-sfc" "^3.2.37"
 
+"element-plus@^2.2.14":
+  "integrity" "sha512-V5Pis0OHhePg1RgVogZrcefaVl8vjVn4Pn9Qsh/t2CbFgjg9kKOYFqf/tuP3ObSXGm3X89hpe0W+nLVAsaFnpw=="
+  "resolved" "https://registry.npmjs.org/element-plus/-/element-plus-2.2.14.tgz"
+  "version" "2.2.14"
+  dependencies:
+    "@ctrl/tinycolor" "^3.4.1"
+    "@element-plus/icons-vue" "^2.0.6"
+    "@floating-ui/dom" "^0.5.4"
+    "@popperjs/core" "npm:@sxzz/popperjs-es@^2.11.7"
+    "@types/lodash" "^4.14.182"
+    "@types/lodash-es" "^4.17.6"
+    "@vueuse/core" "^9.1.0"
+    "async-validator" "^4.2.5"
+    "dayjs" "^1.11.3"
+    "escape-html" "^1.0.3"
+    "lodash" "^4.17.21"
+    "lodash-es" "^4.17.21"
+    "lodash-unified" "^1.0.2"
+    "memoize-one" "^6.0.0"
+    "normalize-wheel-es" "^1.2.0"
+
 "esbuild-darwin-64@0.14.54":
   "integrity" "sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug=="
   "resolved" "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz"
@@ -145,6 +242,11 @@
     "esbuild-windows-64" "0.14.54"
     "esbuild-windows-arm64" "0.14.54"
 
+"escape-html@^1.0.3":
+  "integrity" "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+  "resolved" "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz"
+  "version" "1.0.3"
+
 "estree-walker@^2.0.2":
   "integrity" "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
   "resolved" "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz"
@@ -174,6 +276,21 @@
   dependencies:
     "has" "^1.0.3"
 
+"lodash-es@*", "lodash-es@^4.17.21":
+  "integrity" "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+  "resolved" "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
+  "version" "4.17.21"
+
+"lodash-unified@^1.0.2":
+  "integrity" "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g=="
+  "resolved" "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.2.tgz"
+  "version" "1.0.2"
+
+"lodash@*", "lodash@^4.17.21":
+  "integrity" "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+  "resolved" "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  "version" "4.17.21"
+
 "magic-string@^0.25.7":
   "integrity" "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ=="
   "resolved" "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz"
@@ -181,11 +298,21 @@
   dependencies:
     "sourcemap-codec" "^1.4.8"
 
+"memoize-one@^6.0.0":
+  "integrity" "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+  "resolved" "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz"
+  "version" "6.0.0"
+
 "nanoid@^3.3.4":
   "integrity" "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
   "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
   "version" "3.3.4"
 
+"normalize-wheel-es@^1.2.0":
+  "integrity" "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+  "resolved" "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz"
+  "version" "1.2.0"
+
 "path-parse@^1.0.7":
   "integrity" "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
   "resolved" "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
@@ -253,7 +380,12 @@
   optionalDependencies:
     "fsevents" "~2.3.2"
 
-"vue@^3.2.25", "vue@^3.2.37", "vue@3.2.37":
+"vue-demi@*":
+  "integrity" "sha512-Vy1zbZhCOdsmvGR6tJhAvO5vhP7eiS8xkbYQSoVa7o6KlIy3W8Rc53ED4qI4qpeRDjv3mLfXSEpYU6Yq4pgXRg=="
+  "resolved" "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.8.tgz"
+  "version" "0.13.8"
+
+"vue@^3.0.0-0 || ^2.6.0", "vue@^3.2.0", "vue@^3.2.25", "vue@^3.2.37", "vue@3.2.37":
   "integrity" "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ=="
   "resolved" "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz"
   "version" "3.2.37"
diff --git a/element-factory/src/index.mjs b/element-factory/src/index.mjs
index 325e71e..cc0da3c 100644
--- a/element-factory/src/index.mjs
+++ b/element-factory/src/index.mjs
@@ -1,12 +1,12 @@
 import { parse, compileScript, compileTemplate } from '@vue/compiler-sfc'
 import Generator from './generator.mjs'
 
-export default (code, options = {}) => {
+export function sfc(code, options = {}) {
     const parsed = parse(`<template>${code}</template>`)
     // console.log(parsed)
     const ast = parsed.descriptor.template.ast
     const generator = new Generator(ast, options)
-    const newParsed = parse(`
+    return `
 <script setup>
 ${generator.buildScript()}
 </script>  
@@ -21,7 +21,10 @@ export default {
 <template>
 ${code}
 </template>
-`)
+`
+}
+export default (code, options = {}) => {
+    const newParsed = parse(sfc(code, options))
     const ret = compileScript(newParsed.descriptor, { 
         id: 'abc',
         inlineTemplate: true