m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/040-skeleton/351/252/250/346/236/266/345/261/217.md

@@ -0,0 +1,284 @@
+# Skeleton 骨架屏
+
+当加载数据并需要为最终用户提供富有视觉和交互体验时，您可以选择 `skeleton`。
+
+## 基本用法
+
+基本的骨架屏。
+
+```html
+<template>
+  <e-skeleton-m />
+  <br />
+  <e-skeleton-m style="--e-skeleton-circle-size: 100px">
+    <template #template>
+      <e-skeleton-item-m variant="circle" />
+    </template>
+  </e-skeleton-m>
+</template>
+```
+
+## 可配置的行数
+
+您可以自己配置行数，以获得更精确的渲染效果。实际渲染的行数将始终比给定的行数多 1 行，因为我们正在渲染一个标题行，其宽度为其他行的 33%。
+
+```html
+<template>
+  <e-skeleton-m :rows="5" />
+</template>
+```
+
+## 动画
+
+我们提供了一个开关标志，指示是否显示加载动画，称为 `animated`，当为 `true` 时，`ep-skeleton` 的所有子元素都会显示动画。
+
+```html
+<template>
+  <e-skeleton-m :rows="5" animated />
+</template>
+```
+
+## 自定义模板
+
+您可以使用名为 `template` 的插槽来完成此工作。
+
+此外，我们还提供了不同类型的骨架屏单元，您可以进行选择。有关更详细的信息，请向下滚动到本页底部查看 API 描述。此外，在构建自定义骨架结构时，您应尽量使其与真实 DOM 结构接近，以避免由高度差异引起的 DOM 弹跳。
+
+```html
+<template>
+  <e-skeleton-m style="width: 240px">
+    <template #template>
+      <e-skeleton-item-m variant="image" style="width: 240px; height: 240px" />
+      <div style="padding: 14px">
+        <e-skeleton-item-m variant="p" style="width: 50%" />
+        <div style="display: flex; align-items: center; justify-items: space-between">
+          <e-skeleton-item-m variant="text" style="margin-right: 16px" />
+          <e-skeleton-item-m variant="text" style="width: 30%" />
+        </div>
+      </div>
+    </template>
+  </e-skeleton-m>
+</template>
+```
+
+## 加载状态
+
+当 `Loading` 结束时，我们始终需要向最终用户显示带有数据的真实 UI。使用 `loading` 属性，我们可以控制是否显示 DOM。您还可以使用插槽 `default` 来构建真实的 DOM 元素。
+
+```html
+<template>
+  <e-space-m direction="vertical" alignment="flex-start">
+    <div>
+      <label style="margin-right: 16px">Switch Loading</label>
+      <e-switch-m v-model="loading" />
+    </div>
+    <e-skeleton-m style="width: 240px" :loading="loading" animated>
+      <template #template>
+        <e-skeleton-item-m variant="image" style="width: 240px; height: 240px" />
+        <div style="padding: 14px">
+          <e-skeleton-item-m variant="h3" style="width: 50%" />
+          <div style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px">
+            <e-skeleton-item-m variant="text" style="margin-right: 16px" />
+            <e-skeleton-item-m variant="text" style="width: 30%" />
+          </div>
+        </div>
+      </template>
+      <template #default>
+        <e-card-m :body-style="{ padding: '0px', marginBottom: '1px' }">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px">
+            <span>Delicious hamburger</span>
+            <div class="bottom card-header">
+              <div class="time">{{ currentDate }}</div>
+              <e-button-m text class="button">Operation button</e-button-m>
+            </div>
+          </div>
+        </e-card-m>
+      </template>
+    </e-skeleton-m>
+  </e-space-m>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const loading = ref(true);
+const currentDate = new Date().toDateString();
+</script>
+```
+
+## 渲染数据列表
+
+大多数情况下，骨架屏用作渲染尚未从服务器获取的数据列表的指示器，然后我们需要创建一堆骨架屏，使其看起来像正在加载。使用 `count` 属性，您可以控制需要向浏览器渲染多少此类模板。
+
+**TIP:** 我们不建议向浏览器渲染大量虚假 UI，这仍会导致性能问题，还需要更长的时间来销毁骨架屏。保持 `count` 尽可能小，以提供更好的用户体验。
+
+```html
+<template>
+  <e-space-m direction="vertical" alignment="flex-start">
+    <e-button-m @click="setLoading">Click me to reload</e-button-m>
+    <e-skeleton-m style="width: 240px" :loading="loading" animated :count="3">
+      <template #template>
+        <e-skeleton-item-m variant="image" style="width: 400px; height: 267px" />
+        <div style="padding: 14px">
+          <e-skeleton-item-m variant="h3" style="width: 50%" />
+          <div style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px">
+            <e-skeleton-item-m variant="text" style="margin-right: 16px" />
+            <e-skeleton-item-m variant="text" style="width: 30%" />
+          </div>
+        </div>
+      </template>
+      <template #default>
+        <e-card-m v-for="item in lists" :key="item.name" :body-style="{ padding: '0px', marginBottom: '1px' }">
+          <img :src="item.imgUrl" class="image multi-content" />
+          <div style="padding: 14px">
+            <span>{{ item.name }}</span>
+            <div class="bottom card-header">
+              <div class="time">{{ currentDate }}</div>
+              <e-button-m text class="button">Operation button</e-button-m>
+            </div>
+          </div>
+        </e-card-m>
+      </template>
+    </e-skeleton-m>
+  </e-space-m>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+interface ListItem {
+  imgUrl: string;
+  name: string;
+}
+
+const loading = ref(true);
+const lists = ref<ListItem[]>([]);
+const currentDate = new Date().toDateString();
+
+const setLoading = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 2000);
+};
+
+onMounted(() => {
+  loading.value = false;
+  lists.value = [
+    {
+      imgUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+      name: 'Deer',
+    },
+    {
+      imgUrl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+      name: 'Horse',
+    },
+    {
+      imgUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+      name: 'Mountain Lion',
+    },
+  ];
+});
+</script>
+```
+## 避免渲染跳动
+
+有时 API 响应非常快，当发生这种情况时，骨架屏只是被渲染到 DOM，然后它需要切换回真实 DOM，这会导致突然的闪烁。为了避免这种情况，您可以使用 `throttle` 属性。
+
+```html
+<template>
+  <e-space-m direction="vertical" alignment="flex-start">
+    <div>
+      <label style="margin-right: 16px">Switch Loading</label>
+      <e-switch-m v-model="loading" />
+    </div>
+    <e-skeleton-m style="width: 240px" :loading="loading" animated :throttle="500">
+      <template #template>
+        <e-skeleton-item-m variant="image" style="width: 240px; height: 240px" />
+        <div style="padding: 14px">
+          <e-skeleton-item-m variant="h3" style="width: 50%" />
+          <div style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px">
+            <e-skeleton-item-m variant="text" style="margin-right: 16px" />
+            <e-skeleton-item-m variant="text" style="width: 30%" />
+          </div>
+        </div>
+      </template>
+      <template #default>
+        <e-card-m :body-style="{ padding: '0px', marginBottom: '1px' }">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px">
+            <span>Delicious hamburger</span>
+            <div class="bottom card-header">
+              <div class="time">{{ currentDate }}</div>
+              <e-button-m text class="button">operation button</e-button-m>
+            </div>
+          </div>
+        </e-card-m>
+      </template>
+    </e-skeleton-m>
+  </e-space-m>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const loading = ref(false);
+const currentDate = new Date().toDateString();
+</script>
+```
+
+
+
+## Skeleton API
+
+### Skeleton Attributes
+| Name     | Description                                 | Type      | Default |
+| :------- | :------------------------------------------ | :-------- | :------ |
+| animated | 是否使用动画                                | `boolean` | false   |
+| count    | 渲染多少个 template, 建议使用尽可能小的数字 | `number`  | 1       |
+| loading  | 是否显示加载结束后的 DOM 结构               | `boolean` | false   |
+| rows     | 骨架屏段落数量                              | `number`  | 3       |
+| throttle | 渲染延迟（以毫秒为单位）                    | `number`  | 0       |
+### Skeleton Slots
+| Name     | Description              | Scope                      |
+| :------- | :----------------------- | :------------------------- |
+| default  | 真正渲染的 DOM           | `object`-`$attrs`          |
+| template | 渲染 skeleton 模板的内容 | `object`-`{ key: number }` |
+## SkeletonItem API
+
+### SkeletonItem Attributes
+
+| Name    | Description            | Type                                                         | Default |
+| :------ | :--------------------- | :----------------------------------------------------------- | :------ |
+| variant | 当前渲染 skeleton 类型 | `enum`-`p \| text\| h1 \| h3 \| caption \| button \| image \| circle \| rect` | text    |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-skeleton-m"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+</iframe>
+::: endif
+
+<style>
+ .ui-showcase-iframe {
+    position: fixed;
+    right: 3.5vw;
+    top: 17%;
+    width: 375px;
+    height: 75vh;
+    box-shadow: 0 0 12px 6px #eee;
+    border-radius: 15px;
+ }
+ .main .markdown-body {
+    padding: 45px;
+    width: calc(97vw - 661px);
+}
+ </style>

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/041-loading/345/212/240/350/275/275.md

@@ -0,0 +1,183 @@
+# Loading 加载
+
+加载数据时显示动效。
+
+## 区域加载
+
+在需要的时候展示加载动画，防止页面失去响应提高用户体验（例如表格）。
+
+EUI4 提供了两种调用 Loading 的方法：指令和服务。 对于自定义指令 `v-loading`，只需要绑定 `boolean` 值即可。 默认状况下，Loading 遮罩会插入到绑定元素的子节点。 通过添加 `body` 修饰符，可以使遮罩插入至 Dom 中的 body 上。
+
+```html
+<template>
+    <div v-loading="loading">
+        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    const loading = ref(true);
+</script>
+
+<style></style>
+```
+
+## 自定义加载中组件内容
+
+你可以自定义加载中组件的文字，图标，以及背景颜色。
+
+在绑定了 `v-loading` 指令的元素上添加 `loading-text` 属性，其值会被渲染为加载文案，并显示在加载图标的下方。 类似地，`loading-spinner` 、`loading-background` 和 `loading-svg` 属性分别用来设定 svg 图标、背景色值、加载图标。
+
+```html
+<template>
+    <div
+        v-loading="loading"
+        loading-text="Loading..."
+        :loading-spinner="svg"
+        loading-svg-view-box="0 0 400 400"
+        loading-background="rgba(122, 122, 122, 0.8)"
+    >
+        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
+    </div>
+    <div v-loading="loading" :loading-svg="svg" class="custom-loading-svg" loading-svg-view-box="0 0 400 400">
+        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    import { useTableDataSource } from '@epoint-fe/eui-hooks';
+    const loading = ref(true);
+    const svg = `
+<g><path fill="#3472d7" d="M219.91,190.42v119.54h-39.99V190.42h20H219.91z" /><path fill="#3472d7" d="M143.44,237.17L228.28,322L200,350.28l-84.83-84.83l14.14-14.14L143.44,237.17z" /><path fill="#3472d7" d="M284.83,265.45L200,350.28L171.72,322l84.83-84.83l14.14,14.14L284.83,265.45z" /><path fill="#4E5463" d="M342.36,171.17c-12.12-12.58-27.07-21.57-43.46-26.33c0.29-2.88,0.44-5.79,0.44-8.71 c0-47.24-38.43-85.67-85.68-85.67c-43.92,0-80.23,33.22-85.11,75.85c-54.97,3.95-98.49,49.94-98.49,105.9 c0,56.45,44.29,102.75,99.94,105.99v-40.11c-33.58-3.15-59.94-31.49-59.94-65.87c0-36.49,29.69-66.18,66.18-66.18 c3.22,0,6.5,0.24,9.75,0.72l27.14,4l-4.49-27.06c-0.42-2.54-0.63-5.08-0.63-7.56c0-25.19,20.49-45.67,45.67-45.67 c25.19,0,45.68,20.49,45.68,45.67c0,5.97-1.14,11.78-3.39,17.27l-10.8,26.4l28.5,1.16c31.58,1.28,56.31,27.05,56.31,58.67 c0,32.39-26.35,58.74-58.74,58.74c-0.41,0-0.81-0.01-1.22-0.02v39.99c0.41,0,0.81,0.03,1.22,0.03 c54.45,0,98.74-44.29,98.74-98.74C369.96,213.97,360.16,189.66,342.36,171.17z" /></g>`;
+</script>
+
+<style></style>
+```
+
+**warning**
+
+虽然 `loading-spinner` / `loading-svg` 属性支持传入的 HTML 片段，但是动态在网站上渲染任意的 HTML 是非常危险的，因为很容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting). 请确保 `loading-spinner` / `loading-svg` 的内容是可信的， **不要**将用户提交的内容赋值给 `loading-spinner` / `loading-svg` 属性。
+
+## 让加载组件铺满整个屏幕
+
+加载数据时显示全屏动画。
+
+当使用指令方式时，全屏遮罩需要添加 `fullscreen` 修饰符（遮罩会插入至 body 上） 此时若需要锁定屏幕的滚动，可以使用 `lock` 修饰符； 当使用服务方式时，遮罩默认即为全屏，无需额外设置。
+
+```html
+<template>
+    <e-button-m v-loading.fullscreen.lock="fullscreenLoading" type="primary" @click="openFullScreen1">
+        As a directive
+    </e-button-m>
+    <e-button-m type="primary" @click="openFullScreen2"> As a service </e-button-m>
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    import { EpLoading } from '@epoint-mfe/eui-components';
+
+    const fullscreenLoading = ref(false);
+    const openFullScreen1 = () => {
+        fullscreenLoading.value = true;
+        setTimeout(() => {
+            fullscreenLoading.value = false;
+        }, 2000);
+    };
+
+    const openFullScreen2 = () => {
+        const loading = EpLoading.service({
+            lock: true,
+            text: 'Loading',
+            background: 'rgba(0, 0, 0, 0.7)'
+        });
+        setTimeout(() => {
+            loading.close();
+        }, 2000);
+    };
+</script>
+```
+
+## 以服务的方式来调用
+
+Loading 还可以以服务的方式调用。 你可以像这样引入 Loading 服务：
+
+```tsx
+import { EpLoading } from '@epoint-mfe/eui-components';
+```
+
+在你需要的时候通过下面的方式调用：
+
+```tsx
+EpLoading.service(options);
+```
+
+其中 `options` 参数为 Loading 的配置项，具体见下表。 `LoadingService` 会返回一个 `Loading` 实例，可通过调用该实例的 `close` 方法来关闭它：
+
+```tsx
+const loadingInstance = EpLoading.service(options);
+nextTick(() => {
+    // 这里只是一个模拟 实际上你可以在数据加载完成后调用 loadingInstance.close() 来关闭 Loading
+    loadingInstance.close();
+});
+```
+
+需要注意的是，以服务的方式调用的全屏 `Loading` 是单例的。 若在前一个全屏 `Loading` 关闭前再次调用全屏 `Loading`，并不会创建一个新的 `Loading` 实例，而是返回现有全屏 `Loading` 的实例：
+
+```tsx
+const loadingInstance1 = EpLoading.service({ fullscreen: true });
+const loadingInstance2 = EpLoading.service({ fullscreen: true });
+console.log(loadingInstance1 === loadingInstance2); // true
+```
+
+此时调用它们中任意一个的 `close` 方法都能关闭这个全屏 `Loading` 。
+
+## API
+
+### Options
+
+| Name        | Description                                                                                                                                   | Type                     | Default       |
+| :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------- | :------------ |
+| target      | Loading 需要覆盖的 DOM 节点。 可传入一个 DOM 对象或字符串； 若传入字符串，则会将其作为参数传入 `document.querySelector` 以获取到对应 DOM 节点 | `string` / `HTMLElement` | document.body |
+| body        | 同 `v-loading` 指令中的 `body` 修饰符                                                                                                         | `boolean`                | false         |
+| fullscreen  | 同 `v-loading` 指令中的 `fullscreen` 修饰符                                                                                                   | `boolean`                | true          |
+| lock        | 同 `v-loading` 指令中的 `lock` 修饰符                                                                                                         | `boolean`                | false         |
+| text        | 显示在加载图标下方的加载文案                                                                                                                  | `string`                 | —             |
+| spinner     | 自定义加载图标类名                                                                                                                            | `string`                 | —             |
+| background  | 遮罩背景色                                                                                                                                    | `string`                 | —             |
+| customClass | Loading 的自定义类名                                                                                                                          | `string`                 | —             |
+
+### Directives
+
+| Name               | Description                              | Type                  |
+| :----------------- | :--------------------------------------- | :-------------------- |
+| v-loading          | 是否显示动画                             | `boolean` / `Options` |
+| loading-text       | 显示在加载图标下方的加载文案             | `string`              |
+| loading-spinner    | 自定义加载图标                           | `string`              |
+| loading-svg        | 自定义加载图标 (与 loading-spinner 相同) | `string`              |
+| loading-background | 背景遮罩的颜色                           | `string`              |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-loading-m"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+</iframe>
+::: endif
+
+<style>
+ .ui-showcase-iframe {
+    position: fixed;
+    right: 3.5vw;
+    top: 17%;
+    width: 375px;
+    height: 75vh;
+    box-shadow: 0 0 12px 6px #eee;
+    border-radius: 15px;
+ }
+ .main .markdown-body {
+    padding: 45px;
+    width: calc(97vw - 661px);
+}
+ </style>

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/042-verifycode/351/252/214/350/257/201/347/240/201.md

@@ -0,0 +1,128 @@
+# VerifyCode 验证码
+
+滑块验证码控件。
+
+## 基本用法
+
+使用 `action` 指定验证码加载数据和验证的请求地址，通过 `validate` 事件来获取到验证的结果
+
+```html
+<template>
+  <e-verify-code-m action="https://fe.epoint.com.cn/mock/752/eui-vue/initAndCheckCaptcha" @validate="onValidate" />
+  <p>验证状态：{{ isValidate ? '成功' : '失败' }}</p>
+  <p>validateCode: {{ validateCode }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const isValidate = ref<boolean>(false);
+const validateCode = ref<string>('');
+
+const onValidate = (e) => {
+  isValidate.value = e.isValid;
+  validateCode.value = e.validateCode;
+};
+</script>
+```
+
+## trigger 模式
+
+通过将 `type` Name指定为 `trigger` 开启 trigger 模式
+
+```html
+<template>
+  <e-verify-code-m action="https://fe.epoint.com.cn/mock/752/eui-vue/initAndCheckCaptcha" type="trigger" />
+</template>
+
+<script setup lang="ts"></script>
+```
+
+## dialog 模式
+
+通过与 `Dialog` 组件结合可以实现弹窗验证的效果
+
+```html
+<template>
+  <e-button-m @click="showDialog"> 打开验证码 </e-button-m>
+  <e-dialog-m v-model="dialogVisible" title="请完成安全验证" :width="340">
+    <e-verify-code-m
+      ref="verifyCodeRef"
+      action="https://fe.epoint.com.cn/mock/752/eui-vue/initAndCheckCaptcha"
+      @validate="onValidate"
+    />
+  </e-dialog-m>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const verifyCodeRef = ref();
+
+const dialogVisible = ref<boolean>(false);
+const isValidate = ref<boolean>(false);
+const validateCode = ref<string>('');
+
+const showDialog = () => {
+  dialogVisible.value = true;
+  verifyCodeRef.value?.reload();
+};
+const onValidate = (e) => {
+  isValidate.value = e.isValid;
+  validateCode.value = e.validateCode;
+
+  if (e.isValid) {
+    setTimeout(() => {
+      dialogVisible.value = false;
+    }, 1000);
+  }
+};
+</script>
+```
+
+## API
+
+### Attributes
+
+| Name         | Description                                           | Type                      | Default  |
+| :----------- | :---------------------------------------------------- | :------------------------ | :------- |
+| action       | 接口地址                                              | `string`                  | ''       |
+| type         | 展示的Type                                            | `enum`-`'normal' \| 'trigger'` |'normal' |
+| width        | 宽                                                    | `number`                  | 300      |
+| http-request | 覆盖默认的 xhr 行为，允许你实现自己的初始化和验证请求 | `function`-`(options:VerifyRequestHandler) => XMLHttpRequest \| Promise<unknown>` | —        |
+
+### Events
+
+| Name     | Description    | Type       |
+| :------- | :------------- | :--------- |
+| validate | 验证完成后触发 | `function`-`(evt: { isValid： boolean, validateCode?: string, errorMsg:? string }) => void` |
+
+### Exposes
+
+| Name   | Description    | Type          |
+| :----- | :------------- | :------------ |
+| reload | 重新加载验证码 | `function`-`() => void` |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-verifycode-m"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+</iframe>
+::: endif
+
+<style>
+ .ui-showcase-iframe {
+    position: fixed;
+    right: 3.5vw;
+    top: 17%;
+    width: 375px;
+    height: 75vh;
+    box-shadow: 0 0 12px 6px #eee;
+    border-radius: 15px;
+ }
+ .main .markdown-body {
+    padding: 45px;
+    width: calc(97vw - 661px);
+}
+ </style>