m8-framework-mcp 1.0.0 → 1.0.3

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/060-avatar/345/244/264/345/203/217.md

@@ -1,294 +0,0 @@
-# Avatar 头像
-
-头像组件可用于表示人物或对象。它支持图片、图标或文字。
-
-## 基础用法
-
-使用 `shape` 和 `size` 属性来设置头像的形状和大小。
-
-```html
-<template>
-  <div class="container">
-    <e-avatar-m size="50" :src="circleUrl" />
-    <e-avatar-m shape="square" size="50" :src="squareUrl" />
-  </div>
-</template>
-<script setup lang="ts">
-  import { reactive, toRefs } from "vue";
-
-  const state = reactive({
-    circleUrl:
-      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
-    squareUrl:
-      "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
-  });
-
-  const { circleUrl,squareUrl } = toRefs(state);
-</script>
-```
-
-## 类型
-
-支持图片、图标或文字。
-
-```html
-<template>
-  <div class="container">
-    <e-avatar-m :icon="UserFilled" />
-    <e-avatar-m
-      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-    />
-    <e-avatar-m> user </e-avatar-m>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { UserFilled } from "@epoint-mfe/eui-icons";
-</script>
-```
-
-## 加载失败
-
-图片加载失败时的回退显示。
-
-```html
-<template>
-  <div class="container">
-    <div class="block">
-      <e-avatar-m size="60" src="https://empty" @error="errorHandler">
-        <img
-          src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
-        />
-      </e-avatar-m>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  const errorHandler = () => true;
-</script>
-<style scoped lang="scss">
-  .ep-avatar > img {
-    display: block;
-    height: 100%;
-  }
-</style>
-```
-
-## 适应容器
-
-设置图片如何适应容器框，与 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) 属性相同。
-
-```html
-<template>
-  <div class="container">
-    <div v-for="fit in fits" :key="fit" class="flex">
-      <span class="title">{{ fit }}</span>
-      <e-avatar-m shape="square" :fit="fit" :src="url" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { reactive, toRefs } from "vue";
-
-  const state = reactive({
-    fits: ["fill", "contain", "cover", "none", "scale-down"],
-    url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-  });
-
-  const { fits, url } = toRefs(state);
-</script>
-```
-
-## 徽标
-
-头像组件可以与徽标（Badge）一起使用，用于显示计数或状态指示。
-
-您可以使用 `count` 属性设置徽标的数值，或使用 `is-dot` 属性显示一个小圆点。当数值超过 `max` 值时，将显示为 `{max}+`。
-
-```html
-<template>
-  <div class="container">
-    <e-avatar-m
-      shape="square"
-      count="10"
-      src="https://picsum.photos/200/200/?random=1"
-      alt="用户头像"
-    />
-    <e-avatar-m
-      shape="square"
-      is-dot
-      src="https://picsum.photos/200/200/?random=2"
-      alt="用户头像"
-    />
-    <e-avatar-m shape="square" count="100">张三</e-avatar-m>
-
-    <e-avatar-m
-      count="10"
-      src="https://picsum.photos/200/200/?random=1"
-      alt="用户头像"
-    />
-    <e-avatar-m
-      is-dot
-      src="https://picsum.photos/200/200/?random=2"
-      alt="用户头像"
-    />
-    <e-avatar-m count="100">张三</e-avatar-m>
-  </div>
-</template>
-```
-
-## 大小
-
-头像组件支持多种尺寸设置，以适应不同的界面需求。
-
-您可以通过 `size` 属性设置头像的大小，该属性接受以下值：
-
-- 预设尺寸：`large(50px)`、`default(42px)`、`small(38px)` 或 `compact(30px)`
-- 自定义数值：直接传入数字（单位为像素）
-
-```html
-<template>
-  <div class="container">
-    <e-avatar-m
-      shape="square"
-      size="compact"
-      src="https://picsum.photos/200/200/?random=1"
-      alt="用户头像"
-    />
-    <e-avatar-m
-      shape="square"
-      size="small"
-      src="https://picsum.photos/200/200/?random=2"
-      alt="用户头像"
-    />
-    <e-avatar-m shape="square">张三</e-avatar-m>
-    <e-avatar-m shape="square" size="large" :icon="UserFilled" alt="用户头像" />
-
-    <e-avatar-m
-      shape="circle"
-      size="compact"
-      src="https://picsum.photos/200/200/?random=1"
-      alt="用户头像"
-    />
-    <e-avatar-m
-      shape="circle"
-      size="small"
-      src="https://picsum.photos/200/200/?random=2"
-      alt="用户头像"
-    />
-    <e-avatar-m shape="circle">张三</e-avatar-m>
-    <e-avatar-m shape="circle" size="large" :icon="UserFilled" alt="用户头像" />
-  </div>
-</template>
-<script setup lang="ts">
-  import { UserFilled } from "@epoint-mfe/eui-icons";
-</script>
-```
-
-## 头像组
-
-头像组件提供了强大的头像组功能，能够以紧凑美观的方式展示多个用户头像。
-
-通过 `avatarList` 属性传入头像数据数组，每个元素可包含 `src`、`alt`、`text` 或 `icon` 属性。
-
-当头像数量超过 `maxCount` 设置的阈值时，会自动显示 `+n` 的溢出指示器，溢出指示器会计算并显示未展示的头像数量。
-
-默认情况下，溢出指示器显示在头像组的末尾，添加 `before-order` 属性可将溢出指示器放置在头像组的开头。
-
-```html
-<template>
-  <div class="container">
-    <e-avatar-group-m :avatar-list="avatarList" before-order />
-    <e-avatar-group-m :avatar-list="avatarList" />
-    <e-avatar-group-m :avatar-list="avatarList" :max-count="3" />
-    <e-avatar-group-m shape="circle" :avatar-list="avatarList2" />
-    <e-avatar-group-m shape="square" :avatar-list="avatarList2" />
-    <e-avatar-group-m shape="square" :avatar-list="avatarList2" :max-count="3" />
-  </div>
-</template>
-
-<script setup lang="ts">
-  const avatarList = [
-    { src: "https://picsum.photos/200/200/?random=1", alt: "用户头像" },
-    { src: "https://picsum.photos/200/200/?random=2", alt: "用户头像" },
-    { src: "https://picsum.photos/200/200/?random=3", alt: "用户头像" },
-    { src: "https://picsum.photos/200/200/?random=4", alt: "用户头像" },
-    { src: "https://picsum.photos/200/200/?random=5", alt: "用户头像" },
-    { src: "https://picsum.photos/200/200/?random=6", alt: "用户头像" },
-    { src: "https://picsum.photos/200/200/?random=7", alt: "用户头像" },
-    { src: "https://picsum.photos/200/200/?random=8", alt: "用户头像" },
-  ];
-
-  const avatarList2 = [
-    { src: "https://picsum.photos/200/200/?random=1", alt: "用户头像" },
-    { src: "https://picsum.photos/200/200/?random=2", alt: "用户头像" },
-    { src: "https://picsum.photos/200/200/?random=3", alt: "用户头像" },
-    { src: "https://picsum.photos/200/200/?random=4", alt: "用户头像" },
-  ];
-</script>
-```
-
-## API
-
-### 属性
-
-| Name    | Description                                    | Type                                                     | Default |
-| ------- | ---------------------------------------------- | -------------------------------------------------------- | ------- |
-| icon    | 设置头像的图标类型，更多信息请参考 Icon 组件。 | `string` / [Component]                                   | —       |
-| size    | 设置头像的大小。                               | `number` / 'large' \| 'default' \| 'small' \| 'compact'  | default |
-| shape   | 设置头像的形状。                               | 'circle' \| 'square'                                     | circle  |
-| src     | 图片头像的资源地址。                           | `string`                                                 | —       |
-| src-set | 图片头像的原生 `srcset` 属性。                 | `string`                                                 | —       |
-| alt     | 图片头像的原生 `alt` 属性。                    | `string`                                                 | —       |
-| fit     | 设置图片如何适应容器框。                       | 'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down' | cover   |
-| count   | 显示头像右上角的徽标数字。                     | `number`                                                 | —       |
-| is-dot  | 显示头像右上角的徽标点。                       | `boolean`                                                | false   |
-
-### 事件
-
-| Name  | Description        | Type                          |
-| ----- | ------------------ | ----------------------------- |
-| error | 图片加载失败时触发 | `Function (val: any) => void` |
-
-### 插槽
-
-| Name    | Description    |
-| ------- | -------------- |
-| default | 自定义头像内容 |
-
-### 头像组 API
-
-## 属性
-
-| Name         | Description                                      | Type                                                                | Default |
-| ------------ | ------------------------------------------------ | ------------------------------------------------------------------- | ------- |
-| avatarList   | 头像组数据，用于展示多个头像。                   | `Array<{src?: string, alt?: string, text?: string, icon?: string}>` | —       |
-| maxCount     | 头像组最大显示数量，超出部分将以 +n 的形式显示。 | `number`                                                            | 5       |
-| before-order | 是否将溢出指示器放置在头像组的开头。             | `boolean`                                                           | false   |
-| shape        | 设置头像的形状（头像组没有溢出的情况下生效）。   | 'circle' \| 'square'                                                | circle  |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-avatar-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/061-affix/345/233/272/351/222/211.md

@@ -1,120 +0,0 @@
-# Affix 固钉
-
-将元素固定到特定的可见区域。
-
-## 基本用法
-
-默认情况下，Affix 固定在页面顶部。
-您可以设置 `偏移属性` 以更改偏移顶部，默认值为 `0`。
-
-```html
-<template>
-  <div class="container">
-    <div class="cell-title">默认情况</div>
-    <div>
-      <e-affix-m :offset="40">
-        <e-button-m type="primary">Offset top 40px</e-button-m>
-      </e-affix-m>
-    </div>
-  </div>
-</template>
-```
-
-## 目标容器
-
-您可以设置 `target` 属性，使词缀始终保持在容器中。如果超出范围，它将被隐藏。
-
-**请注意，容器避免使用滚动条。**
-
-```html
-<template>
-  <div class="container">
-    <div class="cell-title">目标容器</div>
-    <div>
-      <div class="affix-container">
-        <e-affix-m target=".affix-container" :offset="80">
-          <template #default>
-            <e-button-m type="primary">Target container</e-button-m>
-          </template>
-        </e-affix-m>
-      </div>
-    </div>
-  </div>
-</template>
-```
-
-## 固定位置
-
-粘贴组件提供两个固定位置： `顶部` 和 `底部` 。
-
-您可以设置 `position` 属性来更改固定位置，默认值为 `top`。
-
-```html
-<template>
-  <div class="container">
-    <div class="cell-title">固定位置</div>
-    <div>
-      <div class="affix-container">
-        <e-affix-m position="bottom" :offset="20">
-          <e-button-m type="primary">Offset bottom 20px</e-button-m>
-        </e-affix-m>
-      </div>
-    </div>
-  </div>
-</template>
-```
-
-## API
-
-### Attributes
-
-| Name     | Description | Type                       | Default |
-| :------- | :---------- | :------------------------- | :------ |
-| offset   | 偏移距离    | `number`                   | 0       |
-| position | 固钉位置    | `enum`-`'top' \| 'bottom'` | 'top'   |
-| target   | 目标容器    | `String`                   | —       |
-| z-index  | 固钉层级    | `number`                   | 100     |
-
-### Events
-
-| Name   | Description          | Type                                                      |
-| :----- | :------------------- | :-------------------------------------------------------- |
-| change | 当固定状态改变时触发 | `(fixed: boolean) => void`                                |
-| scroll | 滚动时触发           | `(value: { scrollTop: number, fixed: boolean }) => void ` |
-
-### Exposes
-
-| Name       | Description    | Type         |
-| :--------- | :------------- | :----------- |
-| update     | 手动更新 affix | `() => void` |
-| updateRoot | 手动更新根元素 | `() => void` |
-
-### Slots
-
-| Name    | Description      |
-| :------ | :--------------- |
-| default | 自定义默认内容。 |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-affix-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/062-popconfirm/346/260/224/346/263/241/347/241/256/350/256/244/346/241/206.md

@@ -1,139 +0,0 @@
-# Popconfirm 气泡确认框
-
-气泡确认框用于对用户的操作行为进行二次确认，常用于危险操作的场景。
-
-
-
-
-## 基本用法
-
-点击按钮弹出气泡确认框。
-
-Popconfirm 中只有 `title` 属性可用，`content` 将被忽略。
-
-```html
-<template>
-  <e-popconfirm-m title="Are you sure to delete this?">
-    <template #reference>
-      <e-button-m type="default">Delete</e-button-m>
-    </template>
-  </e-popconfirm-m>
-</template>
-```
-
-
-
-## 自定义
-
-可以自定义气泡确认框的内容、按钮文案、图标等。
-
-```html
-<template>
-  <e-popconfirm-m
-    title="Are you sure to delete this?"
-    width="280"
-    confirm-button-text="OK"
-    cancel-button-text="No, Thanks"
-    icon="InfoFilled"
-    icon-color="#626AEF"
-  >
-    <template #reference>
-      <e-button-m type="default">Delete</e-button-m>
-    </template>
-  </e-popconfirm-m>
-</template>
-```
-
-
-
-## 触发事件
-
-单击按钮以触发事件
-
-- `confirm`：点击确认按钮时触发，回调参数为事件对象。
-- `cancel`：点击取消按钮时触发，回调参数为事件对象。
-
-```html
-<template>
-  <e-popconfirm-m
-    title="Are you sure to delete this?"
-    @confirm="onConfirm"
-    @cancel="onCancel"
-  >
-    <template #reference>
-      <e-button-m type="default">Delete</e-button-m>
-    </template>
-  </e-popconfirm-m>
-</template>
-
-<script setup lang="ts">
-const onConfirm = (e) => {
-  console.log('confirm!', e);
-};
-const onCancel = (e) => {
-  console.log('cancel!', e);
-};
-</script>
-```
-
-
-
-
-## API
-
-### Attributes
-
-| **Name**               | **Description**                   | **Type**                                                     | **Default**        |
-| ---------------------- | --------------------------------- | ------------------------------------------------------------ | ------------------ |
-| title                  | 标题内容                          | `string`                                                     | —                  |
-| confirm-button-text    | 确认按钮文案                      | `string`                                                     | —                  |
-| cancel-button-text     | 取消按钮文案                      | `string`                                                     | —                  |
-| confirm-button-type    | 确认按钮类型                      | `enum` `'primary' ｜ 'success' ｜ 'warning' ｜ 'danger'｜'default'` | `'primary'`        |
-| cancel-button-type     | 取消按钮类型                      | `enum` `'primary' ｜ 'success' ｜ 'warning' ｜ 'danger'｜'default'` | `'default'`        |
-| icon                   | 标题左侧图标                      | `string` / `Component`                                       | `'QuestionFilled'` |
-| icon-color             | 图标颜色                          | `string`                                                     | `'#f90'`           |
-| hide-icon              | 是否隐藏图标                      | `boolean`                                                    | `false`            |
-| hide-after             | 关闭延迟(ms)                      | `number`                                                     | `200`              |
-| width                  | 弹窗宽度                          | `string` / `number`                                          | `295`              |
-| close-on-click-modal | 是否可以通过点击遮罩层关闭 Dialog | `boolean`                                                    | `true`             |
-
-
-
-### Events
-
-| Name    | **Description**    | **Type**                               |
-| ------- | ------------------ | -------------------------------------- |
-| confirm | 点击确认按钮时触发 | `Function` `(e: PointerEvent) => void` |
-| cancel  | 点击取消按钮时触发 | `Function` `(e: PointerEvent) => void` |
-
-
-
-### Slots
-
-| Name      | Description                  |
-| --------- | ---------------------------- |
-| reference | 触发 Popconfirm 的 HTML 元素 |
-
-::: ifdef M84
-<iframe
- src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-popconfirm-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>