From 8ffb6723d1d30e0dbc255ae4064cfd3677020e79 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Tue, 28 Jun 2022 14:07:44 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D:=20chore:=20=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../document-layer/src/assets/css/index.css   |   2 +-
 .../src/components/Children2.vue              |   2 +-
 .../document-layer/src/components/LayCode.vue |  11 ++
 .../src/composable/usePlayground.ts           | 147 ++++++++++++++++++
 .../document-layer/src/document/zh-CN/demo.md |   4 +-
 package/layer/src/component/index.vue         | 121 +++++++++-----
 6 files changed, 242 insertions(+), 45 deletions(-)
 create mode 100644 package/document-layer/src/composable/usePlayground.ts

diff --git a/package/document-layer/src/assets/css/index.css b/package/document-layer/src/assets/css/index.css
index 134350bc..ebe02b4e 100644
--- a/package/document-layer/src/assets/css/index.css
+++ b/package/document-layer/src/assets/css/index.css
@@ -6,7 +6,7 @@ button + button {
 button {
   height: 38px;
   line-height: 36px;
-  padding: 0 18px;
+  padding: 0 18px !important;
   color: #fff;
   font-size: 14px;
   text-align: center;
diff --git a/package/document-layer/src/components/Children2.vue b/package/document-layer/src/components/Children2.vue
index c0c7d11a..e98c09da 100644
--- a/package/document-layer/src/components/Children2.vue
+++ b/package/document-layer/src/components/Children2.vue
@@ -5,7 +5,7 @@
   </form>
 </template>
 <script setup>
-const emit = defineEmits("add", "sub");
+const emit = defineEmits(["add", "sub"]);
 
 const add = () => {
   emit("add");
diff --git a/package/document-layer/src/components/LayCode.vue b/package/document-layer/src/components/LayCode.vue
index 1acc8d71..7179c551 100644
--- a/package/document-layer/src/components/LayCode.vue
+++ b/package/document-layer/src/components/LayCode.vue
@@ -12,6 +12,7 @@
       </div>
     </div>
     <div :class="{ 'is-fixed': isFixContorl }" class="control">
+      <i class="layui-icon layui-icon-play btn" @click="onPlayground" />
       <i class="layui-icon layui-icon-file btn" @click="copy"></i>
       <i class="layui-icon layui-icon-fonts-code btn" @click="toggle"></i>
     </div>
@@ -20,6 +21,7 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch } from "vue";
+import { usePlayGround } from "../composable/usePlayground";
 
 const meta = ref<HTMLElement>({} as HTMLElement);
 const isFixContorl = ref(false);
@@ -31,6 +33,13 @@ const toggle = function () {
   show.value = !show.value;
 };
 
+const onPlayground = async function () {
+  const foundCode = meta.value.querySelector(".language-html");
+  const sourceCode = foundCode?.textContent ?? "";
+  const { link } = await usePlayGround(sourceCode, true);
+  window.open(link);
+};
+
 const copy = function () {
   const foundCodes = meta.value.getElementsByClassName("language-html");
   const foundCode = foundCodes[0];
@@ -64,7 +73,9 @@ const copy = function () {
   }
 
   if (successful) {
+    window.alert("复制成功");
   } else {
+    window.alert("复制失败");
   }
 };
 
diff --git a/package/document-layer/src/composable/usePlayground.ts b/package/document-layer/src/composable/usePlayground.ts
new file mode 100644
index 00000000..e5b2d502
--- /dev/null
+++ b/package/document-layer/src/composable/usePlayground.ts
@@ -0,0 +1,147 @@
+import type { BuiltInParserName } from "prettier";
+import { zlibSync, unzlibSync, strToU8, strFromU8 } from "fflate";
+import extraCss from "../assets/css/index.css?raw";
+
+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*[\"|\'][^\;\"\']*[\"|\']/;
+
+const MAIN_FILE_NAME = "App.vue";
+
+/**
+ * 将代码编码为 URI hash, 生成 playground 链接
+ * @param source 源码
+ * @param convertSetupSugar 转换 setup，仅字符串替换，没有做任何语法分析
+ * @returns 处理后的代码，URI hsah， playground 链接
+  }
+ */
+export const usePlayGround = async (
+  source: string,
+  convertSetupSugar: boolean
+) => {
+  const decodeCode = source;
+  const scriptResult = decodeCode.match(scriptRe);
+
+  // 替换 script 标签
+  // $1 正则第一个括号匹配的内容
+  let code: string | undefined = decodeCode;
+  if (convertSetupSugar) {
+    if (scriptResult) {
+      code = decodeCode.replace(
+        scriptRe,
+        `<script lang="ts" setup>$1
+        </script>`
+      );
+    } else {
+      code = `${decodeCode}
+      <script lang="ts" setup>
+
+      </script>`;
+    }
+
+    // 去除 export default,保留其中的内容
+    const exportDefaultResult = code.match(exportDefaultRe);
+    if (exportDefaultResult) {
+      code = code.replace(
+        exportDefaultRe,
+        trimBr(exportDefaultResult[1] + `</script>`).trim()
+      );
+      // console.log("export",code);
+    }
+    // 去除 setup 函数,保留其中的内容
+    const setupResult = code.match(setupRe);
+    if (setupResult) {
+      code = code.replace(setupRe, trimBr(setupResult[1]));
+      // console.log("setup",code);
+    }
+  }
+  // 替换 layer 引入语句
+  // playground 中使用最新版 layer 请从 @layui/layer-vue 引入
+  if (code.match(layerRe)) {
+    code = code.replace(layerRe, `import { layer } from "@layui/layer-vue"`);
+    // console.log("layer",code);
+  }
+
+  code = await formatCode(MAIN_FILE_NAME, code);
+  const originCode = {
+    [MAIN_FILE_NAME]: code,
+    "index.css": extraCss,
+  };
+
+  const encoded = utoa(JSON.stringify(originCode));
+  const link = `https://layui-vue.gitee.io/sandbox-vue/#${encoded}`;
+  return {
+    code,
+    encoded,
+    link,
+  };
+};
+
+/**
+ *
+ * @returns 格式化代码
+ */
+async function formatCode(filename: string, data: string) {
+  const [format, parserHtml, parserTypeScript, parserBabel, parserPostcss] =
+    await Promise.all([
+      import("prettier/standalone").then((r) => r.format),
+      import("prettier/parser-html").then((m) => m.default),
+      import("prettier/parser-typescript").then((m) => m.default),
+      import("prettier/parser-babel").then((m) => m.default),
+      import("prettier/parser-postcss").then((m) => m.default),
+    ]);
+  let code = data;
+  let parser: BuiltInParserName;
+  if (filename.endsWith(".vue")) {
+    parser = "vue";
+  } else if (filename.endsWith(".js")) {
+    parser = "babel";
+  } else if (filename.endsWith(".ts")) {
+    parser = "typescript";
+  } else if (filename.endsWith(".json")) {
+    parser = "json";
+  } else {
+    return;
+  }
+  code = format(code, {
+    parser,
+    plugins: [parserHtml, parserTypeScript, parserBabel, parserPostcss],
+    semi: false, // 语句末尾打印分号
+    singleQuote: true, // 使用单引号
+    vueIndentScriptAndStyle: false, // 是否缩进 Vue 文件中的 script 和 style 标签
+  });
+
+  return code;
+}
+
+/**
+ * 去除字符串两端的空白行
+ * @param str
+ * @returns
+ */
+function trimBr(str: string): string {
+  return str.replace(/(^[\r\n]*)|([\r\n]*$)/, "");
+}
+
+export function utoa(data: string): string {
+  const buffer = strToU8(data);
+  const zipped = zlibSync(buffer, { level: 9 });
+  const binary = strFromU8(zipped, true);
+  return btoa(binary);
+}
+
+export function atou(base64: string): string {
+  const binary = atob(base64);
+
+  // zlib header (x78), level 9 (xDA)
+  if (binary.startsWith("\x78\xDA")) {
+    const buffer = strToU8(binary, true);
+    const unzipped = unzlibSync(buffer);
+    return strFromU8(unzipped);
+  }
+
+  // old unicode hacks for backward compatibility
+  // https://base64.guru/developers/javascript/examples/unicode-strings
+  return decodeURIComponent(escape(binary));
+}
diff --git a/package/document-layer/src/document/zh-CN/demo.md b/package/document-layer/src/document/zh-CN/demo.md
index 864f6fe6..869b3d1a 100644
--- a/package/document-layer/src/document/zh-CN/demo.md
+++ b/package/document-layer/src/document/zh-CN/demo.md
@@ -358,7 +358,7 @@ const closeAll = function() {
     <legend>通讯</legend>
 </fieldset>
 
-::: demo 👉 查看 [Children1.vue](https://gitee.com/layui-vue/layer-vue/blob/master/example/src/components/Children1.vue), 通过 h() 函数的第二个参数向 Children1.vue 传递响应式变量。
+::: demo 👉 查看 [Children1.vue](https://layui-vue.gitee.io/sandbox-vue/#eNqdUkGO00AQ/ErLFyeSY5OrSaJFK87LA3yZtTub2R3PjGba0UaWD5w4cUTiCDwA+AGfQZH4BT127HXEjZu7XNVTXd1t9Mba9NhglEcbwtoqQbgrNMDmviEyGm5KJcunbREZi/rW1NZo1LQuot3508/zx++bbCAOIqltQ0Ani6wgfKYiguOqNhUqBipBInVYC/fEeMaSTTY9CoXm2pdOWgIl9EPo4JnnkRrLXMlvO4IWHIqS5BETOCRceKOOODmDDvbO1BDzUPFMpMQJ3fTzhstGZj24umLeHqSqHOo7jRdumo3YOiTFVOi9lkZ7gjATbCdPizb8HmbMIf796+v5/Y84KXS3fNFcR8nqxRK2O+ilvaU0MIZWACRJIfc6f/nw59vn0Cug3IlYncNhMbOc8KS9o2554fmDqFi9F8pjDwUjXUh+iJqDjZJoGH5VC5s+eqP5GtriAvIK8rbrmHQVw78Hszeu7r/+4w5Ykl30s5N4uYfxBsYEsZbEuVW4lxrfcuEXcSmUwiqe5WydsX6ivQvVEGowkMPd/SOWNK5mFkh4l04KwZe8iIqR4G3YjxVVJfVDDutX9vn1GGVg76LuL+G7LGU=), 通过 h() 函数的第二个参数向 Children1.vue 传递响应式变量。
 
 <template>
   <button @click="openComponent1">数据</button>
@@ -384,7 +384,7 @@ const openComponent1 = () => {
 
 :::
 
-::: demo 👉 查看 [Children2.vue](https://gitee.com/layui-vue/layer-vue/blob/master/example/src/components/Children2.vue), 通过 h() 函数的第二个参数声明 onXxx() 形式的函数完成 Children2.vue 的事件监听。 
+::: demo 👉 查看 [Children2.vue](https://layui-vue.gitee.io/sandbox-vue/#eNqNksFum0AQhl9lxAWsYmPnSG2UKOoTtLfSA4Yh3hZ2VzC4sRDnSO2h1x6jPkQP7esklfoWnQXWAaWHcGJmv5n9d+ZvnSutV8cGndDZEpa6SAijWAJs9w2RknCZFiL9tIsdpVFeq1IriZIuYid6+PX14ffPbTCAQ5GQuiGgk0auILyl2IHjslQZFpyQTbnnRMDsNpjcxmGdVkITFIm8MZU1YzVSo/lU8J0VQQsVJimJI/pw8DnIoYO8UiW4rN+dcEVywup8eMlhI4I+uZyR1wdRZBXKd5/VyK4Cm7swQ2E0lqmSNYGulIbdWYLXdgt7ZF7VH+XeZr1ec96ezEfGjLeAXQStGVWvZ2UIr48BSFCBIbh/7u/+/vju+kOWOxFXh3DwJnr9oYn5jLKRBVDyKsu8CuvFEwC9wtUxKRpkDZPgFWws1E1avG32L26xfN6iW/Q/ZkCdWfSwWl6k4zvD5JdlolcfayXZdW08JnnlYdt1DM128NyYuarK/u/JpKPhhoitczZtkmXs1Mcv9zObvqCwbtip0ePdt7m/g/HymX2tea1h7fqxFMTTyjAXEt9wUHvvXVbk+i63dz9MnMLZuT2gr/Z6fBikRbn0/6jpadHJ1I0+OhUIdcpuyzhj3jCUam4v5E0Im7W+fW33ZejI6f4B7opkgw==), 通过 h() 函数的第二个参数声明 onXxx() 形式的函数完成 Children2.vue 的事件监听。 
 
 <template>
   <button @click="openComponent2">事件</button>
diff --git a/package/layer/src/component/index.vue b/package/layer/src/component/index.vue
index ad19893f..eae12570 100644
--- a/package/layer/src/component/index.vue
+++ b/package/layer/src/component/index.vue
@@ -57,18 +57,18 @@ export interface LayModalProps {
   move?: boolean | string;
   resize?: boolean | string;
   type?:
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | "dialog"
-  | "page"
-  | "iframe"
-  | "loading"
-  | "drawer"
-  | "photos";
+    | 0
+    | 1
+    | 2
+    | 3
+    | 4
+    | 5
+    | "dialog"
+    | "page"
+    | "iframe"
+    | "loading"
+    | "drawer"
+    | "photos";
   content?: string | Function | object | VNodeTypes;
   isHtmlFragment?: boolean;
   shade?: boolean | string;
@@ -112,9 +112,9 @@ const props = withDefaults(defineProps<LayModalProps>(), {
   resize: false,
   isHtmlFragment: false,
   isOutAnim: true,
-  destroy: () => { },
-  success: () => { },
-  end: () => { },
+  destroy: () => {},
+  success: () => {},
+  end: () => {},
   yesText: "确定",
   isFunction: false,
   isMessage: false,
@@ -172,8 +172,8 @@ const firstOpenDelayCalculation = function () {
         props
       );
     }
-    if (props.isHtmlFragment && props.area === 'auto') {
-      area.value = ['auto', 'auto'];
+    if (props.isHtmlFragment && props.area === "auto") {
+      area.value = ["auto", "auto"];
     }
     offset.value = calculateOffset(props.offset, area.value, props.type);
     w.value = area.value[0];
@@ -404,28 +404,32 @@ const styles = computed<any>(() => {
     height: h.value,
     zIndex: index.value,
   };
-  if (props.isHtmlFragment && props.area === 'auto') {
+  if (props.isHtmlFragment && props.area === "auto") {
     // @ts-ignore
-    style.maxWidth = 'calc(100% - 2px)';
+    style.maxWidth = "calc(100% - 2px)";
     // @ts-ignore
-    style.maxHeight = 'calc(100% - 51px)';
-    style.top = '50%';
-    style.left = '50%';
+    style.maxHeight = "calc(100% - 51px)";
+    style.top = "50%";
+    style.left = "50%";
     if (Array.isArray(offset.value)) {
-      if (offset.value[0].indexOf('px') > -1) {
+      if (offset.value[0].indexOf("px") > -1) {
         style.top = offset.value[0];
       }
-      if (offset.value[1].indexOf('px') > -1) {
+      if (offset.value[1].indexOf("px") > -1) {
         style.left = offset.value[1];
       }
-      if (offset.value[0].indexOf('%') > -1 || offset.value[1].indexOf('%') > -1) {
+      if (
+        offset.value[0].indexOf("%") > -1 ||
+        offset.value[1].indexOf("%") > -1
+      ) {
         // @ts-ignore
-        style.transform = `translate(-${style.left.indexOf('%')>-1?style.left:0},-${style.top.indexOf('%')>-1?style.top:0})`;
+        style.transform = `translate(-${
+          style.left.indexOf("%") > -1 ? style.left : 0
+        },-${style.top.indexOf("%") > -1 ? style.top : 0})`;
       }
     }
-
   }
-  return style
+  return style;
 });
 
 /**
@@ -592,15 +596,33 @@ defineExpose({ reset, open, close });
 <template>
   <div>
     <!-- 遮盖层 -->
-    <Shade :index="index" :visible="shadeVisible" :opacity="shadeOpacity" @shadeClick="shadeHandle"></Shade>
+    <Shade
+      :index="index"
+      :visible="shadeVisible"
+      :opacity="shadeOpacity"
+      @shadeClick="shadeHandle"
+    ></Shade>
     <!-- 动画容器 -->
-    <transition :enter-active-class="enterActiveClass" :leave-active-class="leaveActiveClass">
+    <transition
+      :enter-active-class="enterActiveClass"
+      :leave-active-class="leaveActiveClass"
+    >
       <!-- 弹出层 -->
-      <div ref="layero" class="layui-layer layui-layer-border" :class="boxClasses" :style="styles" v-if="visible">
+      <div
+        ref="layero"
+        class="layui-layer layui-layer-border"
+        :class="boxClasses"
+        :style="styles"
+        v-if="visible"
+      >
         <!-- 标题 -->
         <Title v-if="showTitle" :title="title"></Title>
         <!-- 内容 -->
-        <div class="layui-layer-content" :style="{ height: contentHeight }" :class="contentClasses">
+        <div
+          class="layui-layer-content"
+          :style="{ height: contentHeight }"
+          :class="contentClasses"
+        >
           <template v-if="type === 0 || type === 1 || type === 4">
             <i v-if="icon" :class="iconClass"></i>
             <slot v-if="slots.default"></slot>
@@ -612,26 +634,43 @@ defineExpose({ reset, open, close });
             </template>
           </template>
           <Iframe v-if="type === 2" :src="props.content"></Iframe>
-          <Photos v-if="type === 5" :imgList="props.imgList" :startIndex="props.startIndex"
-            @resetCalculationPohtosArea="resetCalculationPohtosArea"></Photos>
+          <Photos
+            v-if="type === 5"
+            :imgList="props.imgList"
+            :startIndex="props.startIndex"
+            @resetCalculationPohtosArea="resetCalculationPohtosArea"
+          ></Photos>
         </div>
         <!-- 工具栏 -->
         <span class="layui-layer-setwin" v-if="type != 3 && type != 5">
-          <a v-if="maxmin && !max" class="layui-layer-min" :class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
-            href="javascript:;" @click="minHandle">
+          <a
+            v-if="maxmin && !max"
+            class="layui-layer-min"
+            :class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
+            href="javascript:;"
+            @click="minHandle"
+          >
             <cite v-if="!min"></cite>
           </a>
-          <a v-if="maxmin && !min" class="layui-layer-ico layui-layer-max" :class="[max ? 'layui-layer-maxmin' : '']"
-            href="javascript:;" @click="maxHandle"></a>
+          <a
+            v-if="maxmin && !min"
+            class="layui-layer-ico layui-layer-max"
+            :class="[max ? 'layui-layer-maxmin' : '']"
+            href="javascript:;"
+            @click="maxHandle"
+          ></a>
           <CloseBtn v-if="closeBtn" @closeHandle="closeHandle"></CloseBtn>
         </span>
         <!-- 操作栏 -->
-        <div v-if="((btn && btn.length > 0) || type === 0) && !isMessage" class="layui-layer-btn"
-          :class="[`layui-layer-btn-${btnAlign}`]">
+        <div
+          v-if="((btn && btn.length > 0) || type === 0) && !isMessage"
+          class="layui-layer-btn"
+          :class="[`layui-layer-btn-${btnAlign}`]"
+        >
           <template v-if="btn && btn.length > 0">
             <template v-for="(b, index) in btn" :key="index">
               <a :class="[`layui-layer-btn${index}`]" @click="b.callback(id)">{{
-                  b.text
+                b.text
               }}</a>
             </template>
           </template>