feat: make live demo code better (#37)

vue-playground/src/App.vue

@@ -13,7 +13,8 @@
       </p>
       <div class="livebox" v-if="!debug">
         <div class="hint">
-          You can edit <a title="copy code to clipboard" @click="copy">this</a>
+          You can edit
+          <span title="copy code to clipboard" @click="copy">this</span>
           <span>-></span>
         </div>
         <VueLive
@@ -81,16 +82,9 @@
           :height="70"
           v-bind:blur="10"
           :grayscale="false"
-          :brighten="40"
+          :brighten="80"
           :invert="false"
         ></v-image>
-        <v-image
-          :x="0"
-          :y="0"
-          :image="'https://raw.githubusercontent.com/rustq/vue-skia/main/vue-playground/src/assets/logo.png'"
-          :width="70"
-          :height="70"
-        ></v-image>
       </v-surface>
     </template>
     <github-corners
@@ -125,14 +119,10 @@ export default defineComponent({
     VueLive,
     GithubCorners,
     VSurface,
-    VGroup,
     VRect,
     VCircle,
-    VRoundRect,
-    VLine,
     VPoints,
     VImage,
-    VText
   },
   data() {
     return {
@@ -246,6 +236,7 @@ body {
   color: rgb(0, 161, 132);
   transform: rotate(-30deg);
   transition: transform 0.2s;
+  user-select: none;
 }
 
 @media (max-width: 1600px) {

vue-playground/src/code.ts

@@ -23,16 +23,9 @@ export default `<v-surface :width="360" :height="360">
     :height="70"
     v-bind:blur="10"
     :grayscale="false"
-    :brighten="40"
+    :brighten="80"
     :invert="false"
   ></v-image>
-  <v-image
-    :x="0"
-    :y="0"
-    :image="'https://raw.githubusercontent.com/rustq/vue-skia/main/vue-playground/src/assets/logo.png'"
-    :width="70"
-    :height="70"
-  ></v-image>
   <v-group :x="200" :y="160" color="violet" :style="'stroke'" :invertClip="true">
     <template #clip>
       <v-circle :cx="8" :cy="68" :r="40" />

vue-playground/src/loading-code.ts

@@ -1,4 +1,4 @@
-export default `<!--<template>loading</template>-->
+export default `<!-- The vue-skia is a skia-based 2d graphics vue rendering library. It is based on Rust to implement software rasterization to perform rendering. It takes up less memory than the native canvas, however it is still a experiment project. And it's based entirely on vue syntax. -->
 
 
 
@@ -18,4 +18,21 @@ export default `<!--<template>loading</template>-->
 
 
 
-`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;