chore(playground): add some instances

Author: sheepbox8646

playground/src/config/instance.ts

@@ -1,4 +1,17 @@
+import ins01 from '../instances/instance/ins01.sciux?raw'
+import ins02 from '../instances/instance/ins02.sciux?raw'
 import angle from '../instances/math/angle.sciux?raw'
+import axis from '../instances/math/axis.sciux?raw'
+import circle from '../instances/math/circle.sciux?raw'
+import dot from '../instances/math/dot.sciux?raw'
+import figure from '../instances/math/figure.sciux?raw'
+
+import parametric from '../instances/math/parametric.sciux?raw'
+import plane from '../instances/math/plane.sciux?raw'
+import mermaid from '../instances/mermaid.sciux?raw'
+
+import model from '../instances/model.sciux?raw'
+import widget from '../instances/widget.sciux?raw'
 
 export interface InstanceItem {
   name: string
@@ -28,6 +41,90 @@ export default {
           description: 'Angle components',
           content: angle,
         },
+        {
+          name: 'Axis',
+          id: 'axis',
+          description: 'Axis components',
+          content: axis,
+        },
+        {
+          name: 'Circle',
+          id: 'circle',
+          description: 'Circle components',
+          content: circle,
+        },
+        {
+          name: 'Dot',
+          id: 'dot',
+          description: 'Dot components',
+          content: dot,
+        },
+        {
+          name: 'Figure',
+          id: 'figure',
+          description: 'Figure components',
+          content: figure,
+        },
+        {
+          name: 'Parametric',
+          id: 'parametric',
+          description: 'Parametric components',
+          content: parametric,
+        },
+        {
+          name: 'Plane',
+          id: 'plane',
+          description: 'Plane components',
+          content: plane,
+        },
+      ],
+    },
+    {
+      name: '@sciux/widget',
+      description: 'Widget components',
+      children: [
+        {
+          name: 'Widget',
+          id: 'widget',
+          description: 'Widget components',
+          content: widget,
+        },
+        {
+          name: 'Mermaid',
+          id: 'mermaid',
+          description: 'Mermaid components',
+          content: mermaid,
+        },
+      ],
+    },
+    {
+      name: '@sciux/model',
+      description: 'Model components',
+      children: [
+        {
+          name: 'Model',
+          id: 'model',
+          description: 'Model components',
+          content: model,
+        },
+      ],
+    },
+    {
+      name: 'Instances',
+      description: 'Instances',
+      children: [
+        {
+          name: 'Ins01',
+          id: 'ins01',
+          description: 'Ins01 components',
+          content: ins01,
+        },
+        {
+          name: 'Ins02',
+          id: 'ins02',
+          description: 'Ins02 components',
+          content: ins02,
+        },
       ],
     },
   ],

playground/src/views/Preview.vue

@@ -4,7 +4,7 @@ import { useRoute } from 'vue-router'
 import Sidebar from '../components/Sidebar.vue'
 import MonacoEditor from '../components/MonacoEditor.vue'
 import config from '../config/instance'
-import { activeContext, globals, reactive as sciuxReactive, render, applyTheme } from 'sciux'
+import { activeContext, globals, reactive as sciuxReactive, render, applyTheme, animationManager } from 'sciux'
 import init from 'sciux'
 
 const route = useRoute()
@@ -134,6 +134,7 @@ onMounted(() => {
   init()
   nextTick(() => {
     triggerManualRender()
+    animationManager.init()
   })
 })
 
@@ -142,6 +143,7 @@ const handleRenderRequest = (content: string) => {
   if (preview.value) {
     preview.value.innerHTML = ''
     const [ast, update] = render(content, preview.value)
+    animationManager.init()
   }
 }
 
@@ -171,6 +173,18 @@ const safeHtml = computed(() => {
   return renderedHtml.value
 })
 
+watch(animationSettings, (settings) => {
+  console.log(settings)
+  if (settings.autoExecute) {
+    console.log(animationManager.getIn())
+    animationManager.enableAutoExecute()
+    animationManager.setAutoIn('creation', settings.duration)
+  }
+  else {
+    animationManager.disableAutoExecute()
+  }
+}, { deep: true, immediate: true })
+
 // 预定义的动画曲线选项
 const animationCurves = [
   'ease',