!23 集成 layui-vue-playground 到文档中

Merge pull request !23 from Sight/develop

example/docs/zh-CN/components/animation.md

@@ -71,6 +71,113 @@ export default {
   }
 }
 </script>
+<style>
+.site-doc-icon {
+  margin-bottom: 50px;
+  font-size: 0;
+}
+
+.site-doc-icon li .doc-icon-name,
+.site-doc-icon li .doc-icon-code {
+  color: #c2c2c2;
+}
+
+.site-doc-icon li .doc-icon-fontclass {
+  height: 40px;
+  line-height: 20px;
+  padding: 0 5px;
+  font-size: 13px;
+  color: #333;
+}
+
+.site-doc-icon li {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16.5%;
+  height: 105px;
+  line-height: 25px;
+  padding: 20px 0;
+  margin-right: -1px;
+  margin-bottom: -1px;
+  border: 1px solid #e2e2e2;
+  font-size: 14px;
+  text-align: center;
+  color: #666;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+}
+
+.site-doc-icon li .layui-icon {
+  display: inline-block;
+  font-size: 32px;
+}
+
+.site-doc-color {
+  margin: 15px 0;
+}
+
+.site-doc-necolor li div {
+  border-radius: 0;
+  color: #000 !important;
+}
+
+.site-doc-color li div {
+  padding: 20px 10px;
+  color: #fff;
+  text-align: center;
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+.site-doc-bgcolor li {
+  padding: 20px 10px;
+}
+.anim .site-doc-icon {
+  margin-bottom: 50px;
+  font-size: 0;
+}
+
+.anim .site-doc-icon li {
+  width: 50%;
+}
+
+.anim .site-doc-anim li {
+  height: auto;
+}
+
+.anim .site-doc-icon li {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16.5%;
+  height: 105px;
+  line-height: 25px;
+  padding: 20px 0;
+  margin-right: -1px;
+  margin-bottom: -1px;
+  border: 1px solid #e2e2e2;
+  font-size: 14px;
+  text-align: center;
+  color: #666;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+}
+
+.anim .site-doc-icon li .layui-anim {
+  width: 125px;
+  height: 125px;
+  line-height: 125px;
+  margin: 0 auto 10px;
+  text-align: center;
+  background-color: #009688;
+  cursor: pointer;
+  color: #fff;
+  border-radius: 50%;
+}
+
+.anim .site-doc-icon li .code {
+  white-space: nowrap;
+}
+</style>
 
 :::
 

example/docs/zh-CN/components/backtop.md

@@ -11,6 +11,9 @@
   <lay-backtop></lay-backtop>
 </template>
 
+<script>
+</script>
+
 :::
 
 :::title 自定义
@@ -35,7 +38,7 @@
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {

example/docs/zh-CN/components/confirm.md

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -39,7 +39,7 @@ export default {
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {

example/docs/zh-CN/components/drawer.md

@@ -90,7 +90,7 @@ export default {
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -125,7 +125,7 @@ export default {
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {

example/docs/zh-CN/components/grid.md

@@ -105,6 +105,19 @@ export default {
   }
 }
 </script>
+<style>
+.grid-demo-bg1 {
+    background-color: #63BA79;
+}
+.grid-demo {
+    padding: 10px;
+    line-height: 50px;
+    border-radius: 2px;
+    text-align: center;
+    background-color: #79C48C;
+    color: #fff;
+}
+</style>
 
 :::
 
@@ -136,6 +149,19 @@ export default {
   }
 }
 </script>
+<style>
+.grid-demo-bg1 {
+    background-color: #63BA79;
+}
+.grid-demo {
+    padding: 10px;
+    line-height: 50px;
+    border-radius: 2px;
+    text-align: center;
+    background-color: #79C48C;
+    color: #fff;
+}
+</style>
 
 :::
 

example/docs/zh-CN/components/layout.md

@@ -7,7 +7,7 @@
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>header</lay-header>
     <lay-body>content</lay-body>
     <lay-footer>footer</lay-footer>
@@ -27,21 +27,21 @@ export default {
 </script>
 
 <style>
-.lay-code .layui-footer,
+.example .layui-footer,
-.lay-code .layui-header {
+.example .layui-header {
   line-height: 60px;
   text-align: center;
   background: #87ca9a;
   color: white;
 }
-.lay-code .layui-side {
+.example .layui-side {
   display: flex;
   background: #77c38c;
   align-items: center;
   justify-content: center;
   color: white;
 }
-.lay-code .layui-body {
+.example .layui-body {
   display: flex;
   background: #5FB878;
   align-items: center;
@@ -58,7 +58,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-side>left</lay-side>
     <lay-body>content</lay-body>
     <lay-side>right</lay-side>
@@ -76,6 +76,29 @@ export default {
   }
 }
 </script>
+<style>
+.example .layui-footer,
+.example .layui-header {
+  line-height: 60px;
+  text-align: center;
+  background: #87ca9a;
+  color: white;
+}
+.example .layui-side {
+  display: flex;
+  background: #77c38c;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.example .layui-body {
+  display: flex;
+  background: #5FB878;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+</style>
 
 :::
 
@@ -85,7 +108,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>header</lay-header>
     <lay-layout>
       <lay-side>side</lay-side>
@@ -105,6 +128,29 @@ export default {
   }
 }
 </script>
+<style>
+.example .layui-footer,
+.example .layui-header {
+  line-height: 60px;
+  text-align: center;
+  background: #87ca9a;
+  color: white;
+}
+.example .layui-side {
+  display: flex;
+  background: #77c38c;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.example .layui-body {
+  display: flex;
+  background: #5FB878;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+</style>
 
 :::
 
@@ -114,7 +160,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-side>side</lay-side>
     <lay-layout>
       <lay-header>header</lay-header>
@@ -123,7 +169,7 @@ export default {
     </lay-layout>
   </lay-layout>
   <hr>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-layout>
       <lay-header>header</lay-header>
       <lay-body>body</lay-body>
@@ -132,7 +178,7 @@ export default {
     <lay-side>side</lay-side>
   </lay-layout>
   <hr>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>Header</lay-header>
     <lay-body>
       <lay-layout>
@@ -143,7 +189,7 @@ export default {
     <lay-footer>Footer</lay-footer>
   </lay-layout>
   <hr>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>Header</lay-header>
     <lay-body>
       <lay-layout>
@@ -166,6 +212,29 @@ export default {
   }
 }
 </script>
+<style>
+.example .layui-footer,
+.example .layui-header {
+  line-height: 60px;
+  text-align: center;
+  background: #87ca9a;
+  color: white;
+}
+.example .layui-side {
+  display: flex;
+  background: #77c38c;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.example .layui-body {
+  display: flex;
+  background: #5FB878;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+</style>
 
 :::
 

example/docs/zh-CN/components/load.md

@@ -16,7 +16,7 @@
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -54,7 +54,7 @@ export default {
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -85,7 +85,7 @@ export default {
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {

example/docs/zh-CN/components/modal.md

@@ -28,7 +28,7 @@ export default {
     return {
         visible1
     };
-  },
+  }
 };
 </script>
 
@@ -61,7 +61,7 @@ export default {
     return {
         visible2
     };
-  },
+  }
 };
 </script>
 
@@ -94,7 +94,7 @@ export default {
     return {
         visible3
     };
-  },
+  }
 };
 </script>
 
@@ -127,7 +127,7 @@ export default {
     return {
         visible4
     };
-  },
+  }
 };
 </script>
 
@@ -160,7 +160,7 @@ export default {
     return {
         visible8
     };
-  },
+  }
 };
 </script>
 
@@ -193,7 +193,7 @@ export default {
         type5,
         visible5
     };
-  },
+  }
 };
 </script>
 
@@ -231,7 +231,7 @@ export default {
         btn6,
         visible6
     };
-  },
+  }
 };
 </script>
 
@@ -264,7 +264,7 @@ export default {
     return {
         visible7
     };
-  },
+  }
 };
 </script>
 
@@ -283,7 +283,7 @@ export default {
 
 <script>
 import { ref, watch } from "vue";
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 import { useRoute, useRouter } from "vue-router";
 export default {
   setup() {
@@ -307,7 +307,7 @@ export default {
         close,
         closeAll
     };
-  },
+  }
 };
 </script>
 

example/docs/zh-CN/components/msg.md

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -42,7 +42,7 @@ export default {
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {

example/docs/zh-CN/components/select.md

@@ -46,7 +46,6 @@ export default {
 import { ref } from 'vue'
 
 export default {
-  name:'selectChange',
   setup() {
     const value = ref(null);
     var i = 1;

example/docs/zh-CN/components/splitPanel.md

@@ -18,11 +18,6 @@
 </template>
 
 <script>
-
-export default {
-  setup() {
-  }
-}
 </script>
 
 :::
@@ -44,11 +39,6 @@ export default {
 </template>
 
 <script>
-
-export default {
-  setup() {
-  }
-}
 </script>
 
 :::
@@ -70,11 +60,6 @@ export default {
 </template>
 
 <script>
-
-export default {
-  setup() {
-  }
-}
 </script>
 
 :::
@@ -100,11 +85,6 @@ export default {
 </template>
 
 <script>
-
-export default {
-  setup() {
-  }
-}
 </script>
 
 :::

example/src/components/LayCode.vue

@@ -12,8 +12,9 @@
       </div>
     </div>
     <div :class="{ 'is-fixed': isFixContorl }" class="control">
-      <i class="layui-icon layui-icon-file" @click="copy" />
+      <i class="layui-icon layui-icon-play btn" @click="onPlayground" title="在 Playground 中打开" />
-      <i class="layui-icon layui-icon-fonts-code" @click="toggle" />
+      <i class="layui-icon layui-icon-file btn" @click="copy" title="复制代码" />
+      <i class="layui-icon layui-icon-fonts-code btn" @click="toggle"  title="查看代码"/>
     </div>
   </div>
 </template>
@@ -22,6 +23,8 @@
 import { layer } from '@layui/layer-vue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
+import { usePlayGround } from '../plugin/usePlayground'
+
 const meta = ref<HTMLElement>({} as HTMLElement)
 const isFixContorl = ref(false)
 const codeAreaHeight = ref(0)
@@ -32,6 +35,15 @@ const toggle = function () {
   show.value = !show.value
 }
 
+const onPlayground = function(){
+  const foundCodes = meta.value.getElementsByClassName('language-html')
+  const foundCode = foundCodes[0];
+  const text = foundCode.textContent || "";
+  
+  const { link } = usePlayGround(text)
+  window.open(link)
+}
+
 const copy = function () {
   const foundCodes = meta.value.getElementsByClassName('language-html')
   const foundCode = foundCodes[0];
@@ -186,4 +198,7 @@ function handleScroll() {
   padding-left: 10px;
   padding-right: 10px;
 }
+.btn:hover::before {
+  color: #5FB878;
+}
 </style>

example/src/plugin/usePlayground.ts

@@ -0,0 +1,85 @@
+const scriptRe = /<script[^>]*>([\s\S]*)<\/script>/;
+const exportDefaultRe = /export\s*default\s*\{([\s\S]*)\}\;?\s*<\/script>/;
+const setupRe = /setup\s*\(\)\s*\{([\s\S]*)return\s*\{([\s\S]*)\}\;?\s*\}\;?/;
+const layerRe = /import\s?\{\s?layer\s?\}\s?from\s?[\"|\']\@layui\/layer-vue[\"|\']/;
+
+// danger: 以下字符串拼接代码不可改动缩进或换行,否则会影响 URI hash 解码后代码的排版
+const MAIN_FILE_NAME = 'App.vue';
+// 用于全局引入 layui
+const SETUP_CODE = `import { setupLayuiVue } from './layui-vue.js'
+setupLayuiVue()`;
+
+/**
+ * √方案一:转换为setup语法糖 
+ * 方案二:和文档代码保持一致,仅在 setup() 中添加 setupLayuiVue(),全局引入 layui
+ * 方案三:<script> 和 <script setup> 标签同时存在,文档中的代码都在<script>中, <script setup>仅用来设置 layui
+ * @param source 
+ * @returns 
+ */
+export const usePlayGround = (source: string) => {
+  const decodeCode = source;
+  const result = decodeCode.match(scriptRe)
+  
+  // 替换 script 标签
+  // $1 正则第一个括号匹配的内容
+  let code: string
+  if (result) {
+    code = decodeCode.replace(
+      scriptRe,
+      `<script lang="ts" setup>
+${SETUP_CODE}
+$1
+</script>`
+    )
+  } else {
+    code = `${decodeCode}
+<script lang="ts" setup>
+${SETUP_CODE}
+</script>
+`
+  }
+
+  // 去除 export default,保留其中的内容
+  const exportDefaultResult = code.match(exportDefaultRe)
+  if(exportDefaultResult){
+    code = code.replace(exportDefaultRe,trim(trimBr(exportDefaultResult[1]+`</script>`)))
+     // console.log("export",code);
+  }
+  // 去除 setup 函数,保留其中的内容
+  const setupResult = code.match(setupRe)
+  if(setupResult){
+    code = code.replace(setupRe,trimBr(setupResult[1]))
+     // console.log("setup",code);
+  }
+  // TODO 这是临时方案,需要在 playground 中支持 @layui/layer-vue
+  // 替换 layer 引入语句  
+  if(code.match(layerRe)){
+    code = code.replace(layerRe,`import { layer } from "@layui/layui-vue"`)
+     // console.log("layer",code);
+  }
+  const originCode = {
+    [MAIN_FILE_NAME]: code,
+  }
+
+  const encoded = utoa(JSON.stringify(originCode))
+  const link = `https://layui-vue.gitee.io/layui-vue-playground/#${encoded}`
+  return {
+    encoded,
+    link,
+  }
+}
+
+//编码
+function utoa(data: string): string {
+  return btoa(unescape(encodeURIComponent(data)));
+}
+
+// 去除字符串两端的空白行
+function trimBr(str: string): string{
+  return str.replace(/(^[\r\n]*)|([\r\n]*$)/,"")
+}
+
+// 去除字符串两端的空格 
+function trim(str: string): string { 
+return str.replace(/(^\s*)|(\s*$)/g, ""); 
+}