m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/011-dialog/345/274/271/345/207/272/345/261/202.md

@@ -0,0 +1,430 @@
+# Dialog 对话框
+
+在保留当前页面状态的情况下，告知用户并承载相关操作。
+
+## 基本使用
+
+对话框弹出一个对话框，它是可自定义的。
+
+设置 `model-value / v-model` 属性为一个 `Boolean` 值，当它为 `true` 时，对话框显示。此示例为组件调用方式。
+
+##### 有标题
+
+```html
+<template>
+	<div class="van-content">
+		<text class="cell-title">基本使用</text>
+		<div class="flex justify-spacep-between mb-4 flex-wrap gap-4">
+			<e-button-m text @click="dialogVisible1 = true">点击打开dialog</e-button-m>
+			<e-dialog-m v-model="dialogVisible1" title="提示" :show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel">
+				<p>这里是备注提示内容</p>
+			</e-dialog-m>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup>
+	import { ref } from "vue";
+	const dialogVisible1 = ref(false);
+	const handleConfirm = () => {
+		console.log("点击确认按钮时触发");
+	};
+	const handleCancel = () => {
+		console.log("点击取消按钮时触发");
+	};
+</script>
+```
+
+##### 无标题
+
+```html
+<e-dialog-m v-model="dialogVisible10" :show-cancel-button="true">
+	<p>这里是提示内容这里是提示内容</p>
+</e-dialog-m>
+```
+
+##### 重要提示确认
+
+```html
+<e-dialog-m v-model="dialogVisible11" title="提示" confirm-button-text="我知道了">
+	<p>这里是备注提示内容</p>
+</e-dialog-m>
+```
+
+##### 轻提示关闭
+
+```html
+<e-dialog-m v-model="dialogVisible12" title="提示" :show-confirm-button="false" cancel-button-text="关闭" :show-cancel-button="true">
+	<p>这里是备注提示内容</p>
+</e-dialog-m>
+```
+
+## 自定义内容
+
+```html
+<template>
+	<div class="van-content">
+		<text class="cell-title">自定义内容</text>
+		<div class="flex justify-spacep-between mb-4 flex-wrap gap-4">
+			<e-button-m text @click="dialogVisible2 = true">点击打开dialog</e-button-m>
+			<e-dialog-m v-model="dialogVisible2" title="自定义内容自定义内容自定义内容自定义内容">
+				<em-field :border="false" type="textarea" maxlength="50" placeholder="请输入留言" show-word-limit v-model="textareaValue"></em-field>
+			</e-dialog-m>
+		</div>
+	</div>
+</template>
+```
+
+## slot 插槽
+
+`header` 插槽可以用来自定义标题显示区域。
+`footer` 插槽可以用来自定义底部按钮显示区域。
+
+```html
+<template>
+	<div class="van-content">
+		<text class="cell-title">slot插槽</text>
+		<div class="flex justify-spacep-between mb-4 flex-wrap gap-4">
+			<e-button-m text @click="dialogVisible3 = true">点击打开dialog</e-button-m>
+			<e-dialog-m v-model="dialogVisible3" title="slot插槽">
+				<template #header>
+					<span>header插槽</span>
+				</template>
+				<p>内容区域</p>
+				<span>文字文字文字文字</span>
+				<template #footer>
+					<div style="display: flex;padding: 5px 20px;">
+						<e-button-m round block size="small" @click="dialogVisible3 = false">取消</e-button-m>
+						<e-button-m type="primary" block round size="small" @click="dialogVisible3 = false">确认</e-button-m>
+					</div>
+				</template>
+			</e-dialog-m>
+		</div>
+	</div>
+</template>
+```
+
+## 关闭 dialog 前回调
+
+`before-close` 仅在用户点击按钮或背景时有效。函数`done()`用于关闭 Dialog，仅在点击按钮时有效
+
+```html
+<template>
+	<div class="van-content">
+		<text class="cell-title">关闭 dialog 前回调</text>
+		<div class="flex justify-spacep-between mb-4 flex-wrap gap-4">
+			<e-button-m text @click="dialogVisible4 = true">点击打开dialog</e-button-m>
+			<e-dialog-m v-model="dialogVisible4" title="关闭dialog前回调" :show-cancel-button="true" :before-close="handleBeforClose">
+				<p>内容区域</p>
+				<span>文字文字文字文字</span>
+			</e-dialog-m>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup>
+	import { ref } from "vue";
+	import type { CSSProperties } from "vue";
+	// 组件调用
+	const dialogVisible4 = ref(false);
+
+	const handleBeforClose = (done: (flag: boolean) => void) => {
+		ejs.ui.toast("延迟2秒关闭");
+		setTimeout(() => {
+			done(true);
+		}, 2000);
+	};
+</script>
+```
+
+## 延迟关闭、打开
+
+设置`before-close` 属性后，`close-delay`延迟关闭属性将被拦截。
+
+```html
+<template>
+	<div class="van-content">
+		<text class="cell-title">延迟关闭、打开</text>
+		<div class="flex justify-spacep-between mb-4 flex-wrap gap-4">
+			<e-button-m text @click="dialogVisible5 = true">点击打开dialog</e-button-m>
+			<e-dialog-m v-model="dialogVisible5" title="延迟关闭/打开" :show-cancel-button="true" :open-delay="500" :close-delay="500">
+				<p>内容区域</p>
+				<span>文字文字文字文字</span>
+			</e-dialog-m>
+		</div>
+	</div>
+</template>
+```
+
+## 内容区域样式自定义
+
+内容区域默认具备边距，如果是用于展示某些已经有边距的内容，则可能出现预期之外的情况，此时可以自定义边距。
+
+或者当你需要在内容区域上做自己的样式控制，则可以使用下面的几个属性进行定义。
+
+通过`contentCls`属性可以为内容区域添加额外的样式类名。
+
+```html
+<template>
+	<e-dialog-m v-model="dialogVisible6" title="contentCls" :show-cancel-button="true" content-cls="my-dialog-content">
+		<span>文字文字文字文字</span>
+	</e-dialog-m>
+</template>
+<style lang="scss" scoped>
+	::v-deep .my-dialog-content {
+		background-color: red;
+	}
+</style>
+```
+
+通过`contentPadding`属性可以为内容区域添加额外的边距，可以传入 false 关闭边距，也可以传入数字或数组，数字自动加 px，数组按 css 样式规则转换为字符串。
+
+```html
+<template>
+	<e-dialog-m v-model="dialogVisible7" title="contentPadding" :show-cancel-button="true" :content-padding="[10, 20]">
+		<span>文字文字文字文字</span>
+	</e-dialog-m>
+</template>
+```
+
+通过`contentStyle`属性可以为内容区域添加额外的样式，优先级最高。
+
+```html
+<template>
+	<e-dialog-m v-model="dialogVisible8" title="contentStyle" :show-cancel-button="true" :content-style="myStyle">
+		<span>文字文字文字文字</span>
+	</e-dialog-m>
+</template>
+<script lang="ts" setup>
+	import type { CSSProperties } from "vue";
+	// css样式
+	const myStyle = ref<CSSProperties>({
+		color: "blue",
+		fontWeight: "bold",
+		textDecoration: "underline",
+	});
+</script>
+```
+
+使用`show-bg`属性可以为内容区域添加背景色。
+
+```html
+<e-dialog-m v-model="dialogVisible9" title="show-bg" :show-cancel-button="true" :show-bg="true">
+	<span>文字文字文字文字</span>
+</e-dialog-m>
+```
+
+## 全屏展示
+
+```html
+<e-dialog-m v-model="dialogVisible20" :fullscreen="true" title="全屏展示" :show-cancel-button="true">
+	<span>文字文字文字文字</span>
+</e-dialog-m>
+```
+
+## 显示全屏按钮
+
+```html
+<e-dialog-m v-model="dialogVisible21" :showFullscreen="true" title="显示全屏按钮" :show-cancel-button="true">
+	<span>文字文字文字文字</span>
+</e-dialog-m>
+```
+
+## API 方法调用
+
+如果在页面上要进行弹框的操作，直接通过 <e-dialog /> 标签虽然更为灵活，但需要定义较多的控制变量。此时你也可以通过 API 来进行弹窗操作。
+
+通过此方法你可以指定一个 url 用 iframe 打开。
+
+#### 打开 iframe
+
+```html
+<template>
+	<text class="cell-title">API使用:打开链接</text>
+	<e-button-m text @click="clickOpenLink">点击打开dialog</e-button-m>
+</template>
+<script lang="ts" setup>
+	import { openDialog } from "@epoint-mfe/eui-components";
+
+	// 方法调用
+	const clickOpenLink = () => {
+		openDialog({
+			title: "弹窗",
+			width: 300,
+			height: 500,
+			url: "http://192.168.219.170/docs/vue/latest/frame/",
+			closeCallback: (params) => {
+				console.log("close dialog params:", params);
+			},
+		});
+	};
+</script>
+```
+
+#### 打开 iframe，并添加 iframe 回调
+
+组件调用支持的属性，也可以在 API 调用中使用。比如：`width`、`height`、`fullscreen`、`showCancelButton`。
+
+```html
+<template>
+	<text class="cell-title">API使用:打开链接,并获取iframe回调</text>
+	<e-button-m text @click="clickOpenLink2">点击打开dialog</e-button-m>
+</template>
+<script lang="ts" setup>
+	import { openIframeDialog } from "@epoint-mfe/eui-components";
+
+	const clickOpenLink2 = () => {
+		openIframeDialog({
+			title: "弹窗",
+			fullscreen: true,
+			showCancelButton: true,
+			url: "http://192.168.219.170/docs/vue/latest/frame/",
+			closeCallback: (params) => {
+				console.log("close dialog params:", params);
+			},
+			iframeEvents: {
+				onload: () => {
+					console.log("iframe 加载完成");
+				},
+				ondestroy: (action) => {
+					console.log("iframe 销毁", action);
+				},
+			},
+		});
+	};
+</script>
+```
+
+#### 打开组件
+
+也可以打开一个内容为指定组件的弹框页面。
+
+```html
+<template>
+	<text class="cell-title">API使用:打开组件</text>
+	<e-button-m text @click="clickOpenComponent">点击打开dialog</e-button-m>
+</template>
+<script lang="ts" setup>
+	import { openComponentDialog } from "@epoint-mfe/eui-components";
+	import { defineAsyncComponent, h } from "vue";
+
+	const clickOpenComponent = () => {
+		openComponentDialog(
+			{
+				title: "快速显示组件的dialog",
+				width: 300,
+				height: 500,
+				closeCallback: (action) => {
+					console.log("关闭对话框, 回传值为", action);
+				},
+			},
+			() => {
+				return h(defineAsyncComponent(() => import("./ep-button.vue")));
+			}
+		);
+	};
+</script>
+```
+
+## API调用
+
+dialog 组件提供了一些方法：`openDialog` 、`openIframeDialog`、`openComponentDialog`，可以通过调用这些方法来控制 dialog 的显示和关闭。
+
+函数调用支持以下方式：
+
+`openDialog(title: string, url: string, options: IframeDialogOptions)`
+
+`openIframeDialog(title: string, url: string, options: IframeDialogOptions)`
+
+其中 `IframeDialogOptions` 配置项类型定义如下：
+
+```typescript
+type IframeDialogOptions = Partial<DialogProps> & {
+	title: string;
+	url: string;
+	closeCallback?: (params: any) => void;
+	iframeEvents?: {
+		onload?: () => void;
+		ondestroy?: (action: unknown) => void;
+	};
+};
+```
+
+`openComponentDialog(dialogOptions: ComponentDialogOptions, render: () => VNode)`
+
+其中 `ComponentDialogOptions` 类型支持大部分 dialog 属性，并且支持 closeCallback 回调：
+
+```typescript
+// 组件弹框要求配置
+type ComponentDialogOptions = Partial<DialogProps> & {
+	closeCallback?: (action: any) => void;
+};
+```
+
+## 组件调用
+
+| Name                  | Description                                                                               | Type                                   | Default   |
+| --------------------- | ----------------------------------------------------------------------------------------- | -------------------------------------- | --------- |
+| model-value / v-model | Dialog 的可见性                                                                           | boolean                                | —         |
+| title                 | Dialog 的标题                                                                             | string                                 | —         |
+| width                 | Dialog 的宽度                                                                             | string / number                        | `327px`   |
+| height                | Dialog 的高度                                                                             | string / number                        | —         |
+| fullscreen            | Dialog 是否全屏显示                                                                       | boolean                                | `false`   |
+| modal                 | 是否显示遮罩层                                                                            | boolean                                | `true`    |
+| content-cls           | 内容区域的额外样式类名                                                                    | string                                 | —         |
+| content-padding       | 内容区域的边距，false = 0，字符串直接应用，数字自动加 px，数组按 css 样式规则转换为字符串 | `boolean/string/number/ Array<number>` | —         |
+| content-style         | 内容区域的额外样式，优先级最高                                                            | CSSProperties                          | —         |
+| lock-scroll           | 当 Dialog 显示时，是否禁用 body 的滚动                                                    | boolean                                | `true`    |
+| show-bg               | 是否为内容区域添加背景色                                                                  | boolean                                | `false`   |
+| close-delay           | 关闭之前的时间（毫秒）                                                                    | number                                 | `0`       |
+| open-delay            | 打开之前的时间（毫秒）                                                                    | number                                 | `0`       |
+| close-on-click-modal  | 是否可以通过点击遮罩层关闭 Dialog                                                         | boolean                                | `false`   |
+| show-fullscreen       | 是否显示全屏按钮                                                                          | boolean                                | `false`   |
+| before-close          | Dialog 关闭前的回调，它将阻止 Dialog 关闭                                                 | 函数(done) (done 用于关闭 Dialog)      | —         |
+| show-confirm-button   | 是否显示确认按钮                                                                          | boolean                                | `true`   |
+| show-cancel-button    | 是否显示取消按钮                                                                          | boolean                                | `false`    |
+| confirm-button-text   | 确认按钮文字                                                                              | string                                 | `确定`    |
+| cancel-button-text    | 取消按钮文字                                                                              | string                                 | `取消`    |
+| confirm-button-color  | 确认按钮颜色                                                                              | string                                 | `#2e6be5` |
+| cancel-button-color   | 取消按钮颜色                                                                              | string                                 | `#2e3033` |
+
+### Slots
+
+| Name    | Description                               |
+| ------- | ----------------------------------------- |
+| default | 默认插槽，dialog 主体部分                 |
+| header  | Dialog 头部的内容；替换此内容将删除标题。 |
+| footer  | 底部按钮区域插槽，替换按钮区域内容。      |
+
+### Events
+
+| Name    | Description               | Parameters |
+| ------- | ------------------------- | ---------- |
+| open    | Dialog 打开时触发         | —          |
+| opened  | Dialog 打开动画结束时触发 | —          |
+| close   | Dialog 关闭时触发         | —          |
+| closed  | Dialog 关闭动画结束时触发 | —          |
+| confirm | Dialog 点击确定按钮时触发 | —          |
+| cancel  | Dialog 点击取消按钮时触发 | —          |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-dialog-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/015-steps/346/255/245/351/252/244/346/235/241.md

@@ -0,0 +1,250 @@
+# Steps 步骤导航
+
+可以用于页面头部导航步骤，显示流程步骤以及支持切换事件。
+
+## 基本使用
+
+使用 `active` 属性设置为 `Number` 类型，表示步骤的索引，从 `0` 开始。您可以在步骤的宽度需要固定时设置 `space` 属性，它接受 `Number`  类型。`space` 属性的单位是 `px`。如果不设置，它将自适应。设置 `finish-status` 属性可以更改已完成步骤的状态。
+
+```html
+<template>
+  <e-steps-m :active="active" finish-status="success">
+    <e-step-m title="Step 1" />
+    <e-step-m title="Step 2" />
+    <e-step-m title="Step 3" />
+  </e-steps-m>
+  <e-button-m style="margin-top: 12px" @click="next"
+    >Next step</e-button-m
+  >
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  const active = ref(0);
+
+  const next = () => {
+    if (active.value++ > 2) active.value = 0;
+  };
+</script>
+```
+
+## 包含状态的步骤条
+
+可以通过设置 `finish-status` 属性来改变已完成步骤的状态。
+
+```html
+<template>
+  <e-steps-m :space="200" :active="1" finish-status="success">
+    <e-step-m title="Done" />
+    <e-step-m title="Processing" />
+    <e-step-m title="Step 3" />
+  </e-steps-m>
+</template>
+```
+
+## 居中
+
+标题和描述可以居中显示。
+
+```html
+<template>
+  <e-steps-m :active="2" align-center>
+    <e-step-m title="Step 1" description="Some description" />
+    <e-step-m title="Step 2" description="Some description" />
+    <e-step-m title="Step 3" description="Some description" />
+    <e-step-m title="Step 4" description="Some description" />
+  </e-steps-m>
+</template>
+```
+
+
+
+## 带有描述的步骤条
+
+可以通过 `description` 属性来添加步骤的描述信息。
+
+```html
+<template>
+  <e-steps-m :active="1">
+    <e-step-m title="Step 1" description="Some description" />
+    <e-step-m title="Step 2" description="Some description" />
+    <e-step-m title="Step 3" description="Some description" />
+  </e-steps-m>
+</template>
+```
+
+## 带有图标的步骤条
+
+可以通过 `icon` 属性来设置步骤的图标。
+
+```html
+<template>
+  <e-steps-m :active="1">
+    <e-step-m title="Step 1" icon="Edit" />
+    <e-step-m title="Step 2" icon="Upload" />
+    <e-step-m title="Step 3" icon="Picture" />
+  </e-steps-m>
+</template>
+```
+
+## 竖直步骤条
+
+可以通过设置 `direction` 属性为 `vertical` 来改变步骤条的显示方向。
+
+```html
+<template>
+  <div style="height: 300px">
+    <e-steps-m direction="vertical" :active="1">
+      <e-step-m title="Step 1" />
+      <e-step-m title="Step 2" />
+      <e-step-m title="Step 3" />
+    </e-steps-m>
+  </div>
+</template>
+```
+
+## 简单步骤条
+
+简单的步骤条，align-center、description、direction 和 space 将被忽略。
+
+```html
+<template>
+  <e-steps-m :space="200" :active="1" simple>
+    <e-step-m title="Step 1" icon="Edit" />
+    <e-step-m title="Step 2" icon="UploadFilled" />
+    <e-step-m title="Step 3" icon="Picture" />
+  </e-steps-m>
+
+  <e-steps-m
+    :active="1"
+    finish-status="success"
+    simple
+    style="margin-top: 20px"
+  >
+    <e-step-m title="Step 1" />
+    <e-step-m title="Step 2" />
+    <e-step-m title="Step 3" />
+  </e-steps-m>
+</template>
+```
+
+## 节点为小圆点的步骤条
+
+可以使用 `dot` 属性来设置节点为小圆点的步骤条。
+
+```html
+<template>
+	<div class="steps-container-item">
+      <e-steps-m :active="active" finish-status="success" dot align-center>
+        <e-step-m title="Step 1" description="This is a description" />
+        <e-step-m title="Step 2" description="This is a description" />
+        <e-step-m title="Step 3" description="This is a description" />
+      </e-steps-m>
+    </div>
+	<div class="steps-container-item-vertical">
+      <e-steps-m
+        :active="active"
+        finish-status="success"
+        dot
+        direction="vertical"
+        style="height: 300px"
+        align-center
+      >
+        <e-step-m title="Step 1" status="success" description="This is a description" />
+        <e-step-m title="Step 2" status="error" description="This is a description" />
+        <e-step-m title="Step 3" status="wait" description="This is a description" />
+      </e-steps-m>
+    </div>
+  <e-button-m style="margin-top: 12px" @click="next">Next step</e-button-m>
+</template>
+
+<script lang="ts" setup>
+  const active = ref(0);
+
+  const next = () => {
+    if (active.value++ > 2) active.value = 0;
+  };
+</script>
+<style lang="scss" scoped>
+.steps-container-item {
+  margin-bottom: 40px;
+}
+
+.steps-container-item-vertical {
+  display: flex;
+  gap: 100px;
+  justify-content: center;
+  align-items: center;
+}
+</style>
+```
+
+
+
+## Steps API
+
+### Steps Attributes
+
+| **Name**       | **Description**                                    | **Type**                                                     | **Default**    |
+| -------------- | -------------------------------------------------- | ------------------------------------------------------------ | -------------- |
+| space          | 每个步骤之间的间距，如果省略则自适应。支持百分比。 | `number` / `string`                                          | `''`           |
+| direction      | 显示方向，可选值为 `vertical`                      | `enum` `'vertical' \|'horizontal'`                           | `'horizontal'` |
+| active         | 当前激活的步骤                                     | `number`                                                     | `0`            |
+| process-status | 当前步骤的状态                                     | `enum` `'wait' \|'process' \|'finish' \|'error' \|'success'` | `'process'`    |
+| finish-status  | 最后一步的状态                                     | `enum` `'wait' \|'process' \|'finish' \|'error' \|'success'` | `'finish'`     |
+| align-center   | 居中显示标题和描述                                 | `boolean`                                                    | `false`        |
+| simple         | 是否应用简单主题                                   | `boolean`                                                    | `false`        |
+| dot            | 是否显示小圆点                                     | `boolean`                                                    | `false`        |
+
+
+
+### Steps Slots
+
+| Name    | **Description** | **Subtags** |
+| ------- | --------------- | ----------- |
+| default | 自定义默认内容  | Step        |
+
+
+
+## Step API
+
+### Step Attributes
+
+| **Name**    | **Description**                              | **Type**                                                     | **Default** |
+| ----------- | -------------------------------------------- | ------------------------------------------------------------ | ----------- |
+| title       | 步骤标题                                     | `string`                                                     | `''`        |
+| description | 步骤描述                                     | `string`                                                     | `''`        |
+| icon        | 步骤自定义图标。图标也可以通过命名插槽传递。 | `string` / `Component`                                       | —           |
+| status      | 当前状态。如果未配置，将由 Steps 自动设置。  | `enum` `'wait' \| 'process' \| 'finish' \| 'error' \| 'success'` | `''`        |
+
+### Step Slots
+
+| **Name**    | **Description** |
+| ----------- | --------------- |
+| icon        | 自定义图标      |
+| title       | 步骤表体        |
+| description | 步骤描述        |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-steps-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>