feat: 接入codesandbox、input单元测试增加icon依赖 (#1007)

* fix: input单元测试增加icon依赖

* feat: 接入codesandbox

package.json

@@ -63,6 +63,7 @@
     }
   },
   "dependencies": {
+    "remark-codesandbox": "^0.10.1",
     "sass": "~1.32.0",
     "vue-router": "^4.0.12"
   },

src/packages/__VUE/input/__tests__/input.spec.ts

@@ -1,6 +1,16 @@
-import { mount } from '@vue/test-utils';
+import { config, mount } from '@vue/test-utils';
 import Input from '../index.vue';
-import Icon from '../../icon/index.vue';
+import NutIcon from '../../icon/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
 
 test('base', () => {
   const wrapper = mount(Input, { props: { modelValue: 3 } });

src/sites/doc/components/demo-block/demoBlock.vue

@@ -2,6 +2,13 @@
   <div class="online-code" ref="onlineCode">
     <slot></slot>
     <div class="online-part">
+      <a class="list" :href="jumpHref1" target="_blank">
+        <img
+          class="online-icon"
+          src="https://img13.360buyimg.com/imagetools/jfs/t1/125518/28/24027/2723/6204ae85E8bf8b7e9/af2d55aabeb6bbb6.png"
+        />
+        <div class="online-tips">codesandbox</div>
+      </a>
       <a class="list" :href="jumpHref" target="_blank">
         <img
           class="online-icon"
@@ -22,6 +29,10 @@
 <script>
 import { ref, getCurrentInstance, onMounted, computed } from 'vue';
 import { compressText, copyCodeHtml, decompressText } from './basedUtil';
+
+import { getParameters } from 'codesandbox/lib/api/define';
+import codesandboxPackage from './demoCodePackage.json'; // 引入josn文件
+
 export default {
   setup(props, ctx) {
     const sourceMainReactJsStr = `//import VConsole from "vconsole";
@@ -44,6 +55,12 @@ import "./app.scss";
 import "@nutui/nutui/dist/style.css";
 createApp(App).use(NutUI).mount("#app");`;
 
+    const MainJsStr = `import { createApp } from "vue";
+import App from "./App.vue";
+import NutUI from "@nutui/nutui";
+import "@nutui/nutui/dist/style.css";
+createApp(App).use(NutUI).mount("#app");`;
+
     const onlineCode = ref(null);
     const sourceMainJs = compressText(sourceMainJsStr);
     const mainJs = ref(sourceMainJs);
@@ -52,10 +69,31 @@ createApp(App).use(NutUI).mount("#app");`;
     const mainReactJs = ref(sourceMainReactJs);
 
     const jumpHref = ref(``);
+    const jumpHref1 = ref(``);
     onMounted(() => {
+      console.log('codesandboxPackage', codesandboxPackage);
+      console.log('onlineCode', onlineCode.value.dataset);
+      const sourceValue = decompressText(onlineCode.value.dataset.value);
+      console.log('sourceValue', sourceValue);
+
+      const parameters = getParameters({
+        files: {
+          'package.json': {
+            content: codesandboxPackage
+          },
+          'src/main.js': {
+            content: MainJsStr
+          },
+          'src/App.vue': {
+            content: sourceValue
+          }
+        }
+      });
+
       if (onlineCode.value.dataset.type === 'react') {
         jumpHref.value = `https://codehouse.jd.com/?source=share&type=react&mainJs=${mainReactJs.value}&appValue=${onlineCode.value.dataset.value}&scssValue=`;
       } else {
+        jumpHref1.value = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`;
         jumpHref.value = `https://codehouse.jd.com/?source=share&type=vue&mainJs=${mainJs.value}&appValue=${onlineCode.value.dataset.value}&scssValue=`;
       }
     });
@@ -67,6 +105,7 @@ createApp(App).use(NutUI).mount("#app");`;
     };
     return {
       jumpHref,
+      jumpHref1,
       onlineCode,
       copyCode
     };

src/sites/doc/components/demo-block/demoCodePackage.json

@@ -0,0 +1,47 @@
+{
+  "name": "nutui3-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@nutui/nutui": "3.1.16",
+    "@vue/babel-plugin-jsx": "1.1.1",
+    "core-js": "^3.6.5",
+    "typescript": "4.5.5",
+    "vue": "^3.0.0-0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0-0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0-0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "keywords": [],
+  "description": ""
+}