docs: 新增 CodeSandbox 支持 (#3422)

* feat(Doc): 新增 CodeSandbox 支持 * refactor(Doc): 调整codesandbox按钮位置 * chore(Doc): 更新依赖 --------- Co-authored-by: 骆沛 <[email protected]>
Tencent · Sep 26, 2023 · 7ae5b2e · 7ae5b2e
1 parent 8d40f0b
commit 7ae5b2e
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -136,6 +136,7 @@
     "camelcase": "~6.3.0",
     "cli-color": "^2.0.3",
     "clipboard": "^2.0.11",
+    "codesandbox": "^2.2.3",
     "cypress": "^12.17.2",
     "cz-git": "^1.7.0",
     "czg": "^1.7.0",
@@ -203,4 +204,4 @@
     "attributes": "helper/attributes.json"
   },
   "web-types": "helper/web-types.json"
-}
+}
diff --git a/site/plugin-doc/demo.js b/site/plugin-doc/demo.js
@@ -18,6 +18,7 @@ export default function renderDemo(md, container) {
           <td-doc-demo component-name="${componentName.trim()}" :code=${demoCodeDefName} demo-name="${demoName}" language="markup">
             <div slot="action">
               <Stackblitz demo-name="${demoName}" component-name="${componentName}" :code=${demoCodeDefName} />
+              <CodeSandbox demo-name="${demoName}" component-name="${componentName}" :code=${demoCodeDefName} />
             </div>
             <div class="tdesign-demo-item__body">
               <${demoDefName} />

diff --git a/site/src/components/codeSandbox/getCodeSandboxParams.js b/site/src/components/codeSandbox/getCodeSandboxParams.js
@@ -0,0 +1,81 @@
+import { getParameters } from 'codesandbox/lib/api/define';
+import orgPkg from '../../../../package.json';
+
+const indexHtml = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>TDesign Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
+`;
+
+const App = `
+<template>
+  <demo />
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import Demo from "./Demo.vue";
+
+export default defineComponent({
+components: {
+  Demo,
+},
+});
+</script>`;
+
+const mainJs = `import { createApp } from 'vue';
+import TDesign from 'tdesign-vue-next';
+import App from './App.vue';
+import 'tdesign-vue-next/es/style/index.css';
+
+const app = createApp(App)
+app.use(TDesign);
+app.mount("#app");
+`;
+
+export function getCodeSandboxParams(code, meta) {
+  return getParameters({
+    files: {
+      'package.json': {
+        content: JSON.stringify(
+          {
+            title: meta.title,
+            dependencies: {
+              vue: orgPkg.devDependencies.vue,
+              less: orgPkg.devDependencies.less,
+              'tdesign-vue-next': orgPkg.version,
+              'tdesign-icons-vue-next': orgPkg.dependencies['tdesign-icons-vue-next'],
+            },
+            devDependencies: {
+              '@vue/cli-plugin-babel': '~4.5.0',
+            },
+          },
+          null,
+          2,
+        ),
+        isBinary: false,
+      },
+      'index.html': {
+        content: indexHtml,
+        isBinary: false,
+      },
+      'src/Demo.vue': {
+        content: code,
+        isBinary: false,
+      },
+      'src/App.vue': {
+        content: App,
+        isBinary: false,
+      },
+      'src/main.js': {
+        content: mainJs,
+        isBinary: false,
+      },
+    },
+  });
+}
diff --git a/site/src/components/codeSandbox/index.vue b/site/src/components/codeSandbox/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <t-tooltip content="在 CodeSandbox 中打开">
+    <form
+      ref="codeformRef"
+      action="https://codesandbox.io/api/v1/sandboxes/define"
+      method="POST"
+      target="_blank"
+      @click="submit"
+    >
+      <input type="hidden" name="parameters" :value="params" />
+
+      <div class="action-online">
+        <svg
+          focusable="false"
+          data-icon="code-sandbox"
+          width="1em"
+          height="1em"
+          fill="currentColor"
+          aria-hidden="true"
+          viewBox="64 64 896 896"
+        >
+          <path
+            d="M709.6 210l.4-.2h.2L512 96 313.9 209.8h-.2l.7.3L151.5 304v416L512 928l360.5-208V304l-162.9-94zM482.7 843.6L339.6 761V621.4L210 547.8V372.9l272.7 157.3v313.4zM238.2 321.5l134.7-77.8 138.9 79.7 139.1-79.9 135.2 78-273.9 158-274-158zM814 548.3l-128.8 73.1v139.1l-143.9 83V530.4L814 373.1v175.2z"
+          ></path>
+        </svg>
+      </div>
+    </form>
+  </t-tooltip>
+</template>
+
+<script>
+import { defineComponent, computed, ref } from 'vue';
+import { getCodeSandboxParams } from './getCodeSandboxParams';
+
+export default defineComponent({
+  name: 'Stackblitz',
+  props: {
+    code: String,
+    demoName: String,
+    componentName: String,
+  },
+  setup(props) {
+    const params = computed(() =>
+      getCodeSandboxParams(props.code, {
+        title: `${props.demoName} - ${props.componentName}`,
+      }),
+    );
+    const codeformRef = ref(null);
+
+    const submit = () => {
+      console.log(111);
+      codeformRef.value.submit();
+    };
+    return {
+      params,
+      codeformRef,
+      submit,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/site/src/main.js b/site/src/main.js
@@ -4,6 +4,7 @@ import App from './app.vue';
 import router from './routes';
 
 import Stackblitz from './components/stackblitz/index.vue';
+import CodeSandbox from './components/codeSandbox/index.vue';
 import BaseUsage from './components/base-usage.vue';
 
 // import tdesign style
@@ -27,6 +28,7 @@ registerLocaleChange();
 const app = createApp(App);
 
 app.component('Stackblitz', Stackblitz);
+app.component('CodeSandbox', CodeSandbox);
 app.component('BaseUsage', BaseUsage);
 
 app.use(TDesign).use(router).mount('#app');