📝: 添加 stackblitz
This commit is contained in:
sight
@@ -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>
|
||||
|
||||
@@ -17,7 +17,7 @@ const MAIN_FILE_NAME = "App.vue";
|
||||
* @returns 处理后的代码，URI hsah， playground 链接
|
||||
}
|
||||
*/
|
||||
export const usePlayGround = async (
|
||||
export const openPlayground = async (
|
||||
source: string,
|
||||
convertSetupSugar: boolean
|
||||
) => {
|
||||
@@ -25,7 +25,6 @@ export const usePlayGround = async (
|
||||
const scriptResult = decodeCode.match(scriptRe);
|
||||
|
||||
// 替换 script 标签
|
||||
// $1 正则第一个括号匹配的内容
|
||||
let code: string | undefined = decodeCode;
|
||||
if (convertSetupSugar) {
|
||||
if (scriptResult) {
|
||||
93
package/document-component/src/utils/code-stackblitz.ts
Normal file
93
package/document-component/src/utils/code-stackblitz.ts
Normal file
@@ -0,0 +1,93 @@
|
||||
import stackblitzSdk from "@stackblitz/sdk";
|
||||
|
||||
export const mainCode = `
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import Layui from '@layui/layui-vue'
|
||||
import '@layui/layui-vue/lib/index.css';
|
||||
import './index.css';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(Layui);
|
||||
app.mount('#app');`;
|
||||
|
||||
export const styleCode = `#app { padding: 20px; }`;
|
||||
|
||||
export const htmlCode = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
export const stackblitzRc = `
|
||||
{
|
||||
"installDependencies": false,
|
||||
"startCommand": "turbo && turbo dev"
|
||||
}
|
||||
`;
|
||||
|
||||
export const viteConfigCode = `
|
||||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||||
export default defineConfig({
|
||||
plugins: [vue(), vueJsx()],
|
||||
});
|
||||
`;
|
||||
|
||||
export const packageJSONCode = JSON.stringify(
|
||||
{
|
||||
name: "layui-vue-demo",
|
||||
version: "0.0.1",
|
||||
private: true,
|
||||
type: "module",
|
||||
scripts: {
|
||||
dev: "vite",
|
||||
build: "vite build",
|
||||
preview: "vite preview",
|
||||
},
|
||||
dependencies: {
|
||||
vue: "^3.2.0",
|
||||
"@layui/layui-vue": "latest",
|
||||
},
|
||||
devDependencies: {
|
||||
vite: "^2.9.8",
|
||||
"@vue/compiler-sfc": "^3.2.0",
|
||||
"@vitejs/plugin-vue": "^2.3.2",
|
||||
"@vitejs/plugin-vue-jsx": "^1.3.10",
|
||||
},
|
||||
},
|
||||
null,
|
||||
2
|
||||
);
|
||||
|
||||
export const openStackblitz = (content: string) => {
|
||||
stackblitzSdk.openProject(
|
||||
{
|
||||
title: `layui-vue-demo`,
|
||||
description: "layui-vue-demo",
|
||||
template: "node",
|
||||
files: {
|
||||
"src/App.vue": content,
|
||||
"src/index.css": styleCode,
|
||||
"src/main.js": mainCode,
|
||||
"index.html": htmlCode,
|
||||
"package.json": packageJSONCode,
|
||||
"vite.config.js": viteConfigCode,
|
||||
".stackblitzrc": stackblitzRc,
|
||||
},
|
||||
},
|
||||
{
|
||||
openFile: "src/App.vue",
|
||||
}
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user