feat: add stackblitz playground

components/OneDemo.vue

@@ -22,13 +22,21 @@
   </section>
   <section class="actions">
     <veui-button
-      v-tooltip="t('playInCsb')"
+      v-tooltip="t('playInCodeSandbox')"
       ui="icon"
-      @click="play"
+      @click="play('CodeSandbox')"
     >
       <veui-icon
-        scale="0.8"
-        name="one-demo-csb"
+        name="one-demo-codesandbox"
+      />
+    </veui-button>
+    <veui-button
+      v-tooltip="t('playInStackBlitz')"
+      ui="icon"
+      @click="play('StackBlitz')"
+    >
+      <veui-icon
+        name="one-demo-stackblitz"
       />
     </veui-button>
     <veui-button
@@ -37,6 +45,7 @@
       @click="localExpanded = !localExpanded"
     >
       <veui-icon
+        scale="1.2"
         :name="localExpanded ? 'one-demo-code-off' : 'one-demo-code'"
       />
     </veui-button>
@@ -58,7 +67,7 @@ import tooltip from 'veui/directives/tooltip'
 import i18n from 'veui/mixins/i18n'
 import { BrowserWindow } from 'vue-windows'
 import { getLocale } from '../common/i18n'
-import { createCodeSandbox } from '../common/play'
+import { play } from '../common/play'
 
 export default {
   name: 'one-demo',
@@ -98,17 +107,13 @@ export default {
     style.height = '0'
   },
   methods: {
-    play () {
+    play (vendor) {
       let locale = getLocale(this.$route.path)
-      createCodeSandbox(preprocess(this.$refs.source.textContent), { locale })
+      play(this.$refs.source.textContent, { locale, vendor })
     }
   }
 }
 
-function preprocess (code) {
-  return code.replace(/from 'veui'/g, `from 'veui/dist/veui.esm'`)
-}
-
 Icon.register({
   'one-demo-code': {
     width: 24,
@@ -120,10 +125,15 @@ Icon.register({
     height: 24,
     d: 'M19.17 12l-4.58-4.59L16 6l6 6l-3.59 3.59L17 14.17L19.17 12zM1.39 4.22l4.19 4.19L2 12l6 6l1.41-1.41L4.83 12L7 9.83l12.78 12.78l1.41-1.41L2.81 2.81L1.39 4.22z'
   },
-  'one-demo-csb': {
+  'one-demo-codesandbox': {
     width: 32,
     height: 32,
     d: 'M2.667 8l13.938-8l13.943 8l.12 15.932L16.605 32L2.667 24zm2.786 3.307v6.344l4.458 2.479v4.688l5.297 3.063V16.85zm22.318 0l-9.755 5.542V27.88l5.292-3.063v-4.682l4.464-2.484zM6.844 8.802l9.74 5.526l9.76-5.573l-5.161-2.932l-4.547 2.594l-4.573-2.625z'
+  },
+  'one-demo-stackblitz': {
+    width: 28,
+    height: 28,
+    d: 'M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z'
   }
 })
 </script>
@@ -180,5 +190,5 @@ Icon.register({
     font-size 18px
 
   .veui-button + .veui-button
-    margin-left 8px
+    margin-left 12px
 </style>