📝: 添加 stackblitz

package/document-component/src/components/LayCode.vue

@@ -12,11 +12,6 @@
       </div>
     </div>
     <div :class="{ 'is-fixed': isFixContorl }" class="control">
-      <i
-        class="layui-icon layui-icon-play btn"
-        @click="onPlayground"
-        title="运行代码"
-      />
       <i
         class="layui-icon layui-icon-file btn"
         @click="copy"
@@ -27,6 +22,16 @@
         @click="toggle"
         title="查看代码"
       />
+      <i
+        class="layui-icon layui-icon-component btn"
+        @click="onPlayground"
+        title="在 sandbox-vue 打开"
+      />
+      <i 
+        class="layui-icon layui-icon-chart btn" 
+        title="在 stackblitz 打开"  
+        @click="onStackblitz">
+      </i>
     </div>
   </div>
 </template>
@@ -34,7 +39,8 @@
 <script setup lang="ts">
 import { layer } from "@layui/layer-vue";
 import { onMounted, onUnmounted, ref, watch } from "vue";
-import { usePlayGround } from "../composable/usePlayground";
+import { openPlayground } from "../utils/code-playground";
+import { openStackblitz } from "../utils/code-stackblitz"
 
 const meta = ref<HTMLElement>({} as HTMLElement);
 const isFixContorl = ref(false);
@@ -51,10 +57,17 @@ const onPlayground = async function () {
   const foundCode = foundCodes[0];
   const SourceCode = foundCode.textContent || "";
 
-  const { link } = await usePlayGround(SourceCode, true);
+  const { link } = await openPlayground(SourceCode, true);
   window.open(link);
 };
 
+const onStackblitz = function() {
+  const foundCodes = meta.value.getElementsByClassName("language-html");
+  const foundCode = foundCodes[0];
+  const SourceCode = foundCode.textContent || "";
+  openStackblitz(SourceCode);
+}
+
 const copy = function () {
   const foundCodes = meta.value.getElementsByClassName("language-html");
   const foundCode = foundCodes[0];
@@ -200,4 +213,7 @@ function handleScroll() {
 .btn:hover::before {
   color: #5fb878;
 }
+.btn:hover svg > path{
+  fill: #5fb878;
+}
 </style>