feat: markmap page view is ready

web/src/views/Test.vue

@@ -1,16 +1,43 @@
 <template>
   <div>
-    {{ title }}
+    <textarea v-model="value"/>
   </div>
+  <svg ref="svgRef"/>
 </template>
 
 <script setup>
+import {ref, onMounted, onUpdated} from 'vue';
+import {Markmap} from 'markmap-view';
+import {loadJS, loadCSS} from 'markmap-common';
+import {Transformer} from 'markmap-lib';
 
-import {ref} from "vue";
+const transformer = new Transformer();
+const {scripts, styles} = transformer.getAssets();
+loadCSS(styles);
+loadJS(scripts);
 
-const title = ref('Test Page')
+const initValue = `# markmap
 
+- beautiful
+- useful
+- easy
+- interactive
+`;
+
+const value = ref(initValue);
+const svgRef = ref(null);
+let mm;
+
+const update = () => {
+  const {root} = transformer.transform(value.value);
+  mm.setData(root);
+  mm.fit();
+};
+
+onMounted(() => {
+  mm = Markmap.create(svgRef.value);
+  update();
+});
+
+onUpdated(update);
 </script>
-
-<style lang="stylus" scoped>
-</style>