m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/034-switch/345/274/200/345/205/263.md

@@ -0,0 +1,305 @@
+# Switch
+
+开关用于在两种相反状态之间切换。
+
+## 基本用法
+
+将 `v-model` 绑定到一个 `Boolean` 类型的变量上。
+
+```html
+<template>
+  <e-switch-m v-model="value1" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(true);
+</script>
+```
+
+## 尺寸
+
+```html
+<template>
+  <e-switch-m v-model="value" size="large" active-text="Open" inactive-text="Close" />
+  <br />
+  <e-switch-m v-model="value" active-text="Open" inactive-text="Close" />
+  <br />
+  <e-switch-m v-model="value" size="small" active-text="Open" inactive-text="Close" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(true);
+</script>
+```
+
+## 文字描述
+
+您可以添加 `active-text` 和 `inactive-text` 属性以显示文本。使用 `inline-prompt` 属性来控制文本是否显示在圆点内。
+
+您可以添加 `active-text` 和 `inactive-text` 属性以显示文本。
+
+```html
+<template>
+  <e-switch-m v-model="value1" class="mb-2" active-text="Pay by month" inactive-text="Pay by year" />
+  <br />
+  <e-switch-m
+    v-model="value2"
+    class="mb-2"
+    style="--e-switch-on-color: #13ce66; --e-switch-off-color: #ff4949"
+    active-text="Pay by month"
+    inactive-text="Pay by year"
+  />
+  <br />
+  <e-switch-m v-model="value3" inline-prompt active-text="是" inactive-text="否" />
+  <e-switch-m
+    v-model="value4"
+    class="ml-2"
+    inline-prompt
+    style="--e-switch-on-color: #13ce66; --e-switch-off-color: #ff4949"
+    active-text="Y"
+    inactive-text="N"
+  />
+  <e-switch-m v-model="value6" class="ml-2" width="60" inline-prompt active-text="超出省略" inactive-text="超出省略" />
+  <e-switch-m
+    v-model="value5"
+    class="ml-2"
+    inline-prompt
+    style="--e-switch-on-color: #13ce66; --e-switch-off-color: #ff4949"
+    active-text="完整展示多个内容"
+    inactive-text="多个内容"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(true);
+const value2 = ref(true);
+const value3 = ref(true);
+const value4 = ref(true);
+const value5 = ref(true);
+const value6 = ref(true);
+</script>
+```
+
+## 显示自定义图标和自定义颜色
+
+
+您可以添加 `active-icon` 和 `inactive-icon` 属性以显示图标。使用 `inline-prompt` 属性来控制图标是否显示在开关内。--e-switch-on-color 和 --e-switch-off-color CSS 变量决定了两种状态下的背景颜色。
+
+```html
+<template>
+  <e-switch-m v-model="value1" :active-icon="Check" :inactive-icon="Close" />
+  <br />
+  <e-switch-m
+    v-model="value2"
+    class="mt-2"
+    style="margin-left: 24px"
+    inline-prompt
+    :active-icon="Check"
+    :inactive-icon="Close"
+  />
+  <br />
+  <e-switch-m v-model="value3" class="ml-2" style="--e-switch-on-color: #13ce66; --e-switch-off-color: #ff4949" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { Check, Close } from '@epoint-mfe/eui-icons';
+const value1 = ref(true);
+const value2 = ref(true);
+const value3 = ref(true);
+</script>
+```
+
+## 拓展用法（移动端新增功能）
+
+您可以使用 `show-inner-icon` 属性来控制是否显示在开关圆点处图标。开关开启默认显示图标`Select`、关闭默认显示图标`CloseBold`,您可以添加 `active-inner-icon` 和 `inactive-inner-icon` 属性调整图标。
+
+```html
+<template>
+  <e-switch-m v-model="value1" show-inner-icon active-text="Open" inactive-text="Close" />
+  <br />
+  <e-switch-m v-model="value2" show-inner-icon :active-inner-icon="Edit" :inactive-inner-icon="Menu"/>
+</template>
+
+<script setup>
+import {Edit, Menu } from '@epoint-mfe/eui-icons';
+
+const value1 = ref(true);
+const value2 = ref(true);
+</script>
+```
+
+## 扩展值类型
+
+您可以设置 `active-value` 和 `inactive-value` 属性。它们都接收一个 `Boolean、String` 或 `Number` 类型的值。
+
+```html
+<template>
+  <e-switch-m
+  v-model="value"
+  style="--e-switch-on-color: #13ce66; --e-switch-off-color: #ff4949"
+  active-value="100"
+  inactive-value="0"
+  />
+  <div>Switch value:{{ value7 }}</div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('100');
+</script>
+```
+
+## 禁用
+
+添加 `disabled` 属性会禁用开关。
+
+```html
+<template>
+  <e-switch-m v-model="value1" disabled />
+  <e-switch-m v-model="value2" class="ml-2" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(true);
+const value2 = ref(true);
+</script>
+```
+
+## 加载中
+
+将 `loading` 属性设置为 `true` 表示开关处于加载状态。
+
+```html
+<template>
+  <e-switch-m v-model="value1" loading />
+  <e-switch-m v-model="value2" loading class="ml-2" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(true);
+const value2 = ref(false);
+</script>
+```
+
+## 防止切换
+
+设置 `before-change` 属性，如果返回 `false` 或返回的 `Promise` 被拒绝，将会阻止切换。
+
+```html
+<template>
+  <e-switch-m v-model="value1" :loading="loading1" :before-change="beforeChange1" />
+  <e-switch-m v-model="value2" class="ml-2" :loading="loading2" :before-change="beforeChange2" />
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(false);
+const value2 = ref(false);
+const loading1 = ref(false);
+const loading2 = ref(false);
+
+const beforeChange1 = () => {
+  loading1.value = true;
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      loading1.value = false;
+      ejs.ui.toast('Switch success');
+
+      return resolve(true);
+    }, 1000);
+  });
+};
+
+const beforeChange2 = () => {
+  loading2.value = true;
+
+  return new Promise((_, reject) => {
+    setTimeout(() => {
+      loading2.value = false;
+      ejs.ui.toast('Switch failed');
+
+      return reject(new Error('Error'));
+    }, 1000);
+  });
+};
+</script>
+```
+
+## Switch API
+
+### Switch Attributes
+
+| 属性名                | 描述                                                 | 类型                            | 默认值 |
+| :-------------------- | :----------------------------------------------------------- | :------------------------------ | :------ |
+| model-value / v-model | 绑定的值，它应与 `active-value` 或 `inactive-value` 中的一个等效，默认为 `boolean` 类型 | `boolean` / `string` / `number` | —       |
+| disabled              | 是否禁用开关                                                 | `boolean`                       | false   |
+| loading               | 开关是否处于加载状态                                         | `boolean`                       | false   |
+| size                  | 开关的大小                                                   | `枚举` `'large'\| 'default'\| 'small'`                          | default |
+| width                 | 开关的宽度                                                   | `number` / `string`             | —       |
+| inline-prompt         | 图标或文本是否显示在点内，仅文本的第一个字符将被呈现         | `boolean`                       | false   |
+| active-icon           | 处于 `on` 状态时显示的图标的组件，会覆盖 `active-text`       | `string` / `Component`          | —       |
+| inactive-icon         | 处于 `off` 状态时显示的图标的组件，会覆盖 `inactive-text`    | `string` / `Component`          | —       |
+| active-text           | 处于 `on` 状态时显示的文本                                   | `string`                        | —       |
+| inactive-text         | 处于 `off` 状态时显示的文本                                  | `string`                        | —       |
+| active-value          | 处于 `on` 状态时的开关值                                     | `boolean` / `string` / `number` | true    |
+| inactive-value        | 处于 `off` 状态时的开关值                                    | `boolean` / `string` / `number` | false   |
+| active-color          | 处于 `on` 状态时的背景颜色（已弃用，请改用 CSS 变量 `--e-switch-on-color`） | `string`                        | —       |
+| inactive-color        | 处于 `off` 状态时的背景颜色（已弃用，请改用 CSS 变量 `--e-switch-off-color`） | `string`                        | —       |
+| border-color          | 开关的边框颜色（已弃用，请改用 CSS 变量 `--e-switch-border-color`） | `string`                        | —       |
+| name                  | 开关的输入名称                                               | `string`                        | —       |
+| validate-event        | 是否触发表单验证                                             | `boolean`                       | true    |
+| before-change         | 在开关状态更改之前的钩子函数。如果返回 `false` 或返回的 `Promise` 被拒绝，将会停止切换 | `Function` `() => Promise<boolean> \| boolean`                      | —       |
+| id                    | input 的 id                                                  | `string`                        | —       |
+| tabindex              | input 的 tabindex                                            | `string` / `number`             | —       |
+| show-inner-icon       | 控制是否显示在开关圆点处图标（移动端新增属性）                             | `boolean`                       | false      |
+| active-inner-icon     | 处于 `on` 状态时显示的圆点处图标（移动端新增属性）                              | `string` / `Component`             | Select       |
+| inactive-inner-icon     | 处于 `off` 状态时显示的圆点处图标（移动端新增属性）                           | `string` / `Component`             | CloseBold       |
+
+### Switch Events
+
+| 事件名   | 描述                     | 参数 |
+| :----- | :------------------------------ | :--------- |
+| change | switch 状态发生变化时的回调函数 | `Function` `(val: boolean \| string \| number) => void` |
+
+### Switch Methods
+
+| 方法名   | 描述                     | 参数 |
+| :----- | :------------------------------ | :--------- |
+| focus | 手动 focus 到 switch 组件 | `Function` `() => void` |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-switch-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/035-breadcrumb/351/235/242/345/214/205/345/261/221.md

@@ -0,0 +1,90 @@
+# Breadcrumb 面包屑
+
+显示当前页面的路径，快速返回之前的任意页面。
+
+## 基础用法
+
+在 `ep-breadcrumb` 中使用 `ep-breadcrumb-item` 标签表示从首页开始的每一级。 该组件接受一个 String 类型的参数 separator来作为分隔符。 默认值为 '/'。
+
+```html
+<template>
+	<e-breadcrumb-m separator="/">
+        <e-breadcrumb-item-m :to="{ path: '/' }">组织架构</e-breadcrumb-item-m>
+        <e-breadcrumb-item-m><a href="/">新点软件</a></e-breadcrumb-item-m>
+        <e-breadcrumb-item-m :to="{ path: '/' }">产品和解决方案体系</e-breadcrumb-item-m>
+        <e-breadcrumb-item-m>中央研究院</e-breadcrumb-item-m>
+	</e-breadcrumb-m>
+<template>
+```
+
+## 图标分隔符
+
+通过设置 `separator-icon` 可使用相应的 iconfont 作为分隔符，注意这将使 `separator` 失效。
+
+```html
+<template>
+	<e-breadcrumb-m :separator-icon="ArrowRight">
+        <e-breadcrumb-item-m :to="{ path: '/' }">组织架构</e-breadcrumb-item-m>
+        <e-breadcrumb-item-m :to="{ path: '/' }">新点软件</e-breadcrumb-item-m>
+        <e-breadcrumb-item-m :to="{ path: '/' }">产品和解决方案体系</e-breadcrumb-item-m>
+        <e-breadcrumb-item-m>中央研究院</e-breadcrumb-item-m>
+	</e-breadcrumb-m>
+<template>
+<script lang="ts" setup>
+import { ArrowRight } from '@epoint-mfe/eui-icons';
+</script>
+```
+
+## API
+
+### Breadcrumb Attributes
+
+| Name           | Description              | Type                   | Default |
+| :------------- | :----------------------- | :--------------------- | :------ |
+| separator      | 分隔符                   | `string`               | /       |
+| separator-icon | 图标分隔符的组件或组件名 | `string` / `Component` | -       |
+
+### Breadcrumb Slots
+
+| Name    | Description    | Subtags         |
+| :------ | :------------- | :-------------- |
+| default | 自定义默认内容 | Breadcrumb Item |
+
+## BreadcrumbItem API
+
+### BreadcrumbItem Attributes
+
+| Name    | Description                                                  | Type                | Default |
+| :------ | :----------------------------------------------------------- | :------------------ | :------ |
+| to      | 路由跳转目标，同 `vue-router` 的 `to` 属性                   | `string` / `object` | ''      |
+| replace | 如果设置该属性为 `true`, 导航将不会留下历史记录， 作用同 `location.replace` | `boolean`           | false   |
+
+### BreadcrumbItem Slots
+
+| Name    | Description    |
+| :------ | :------------- |
+| default | 自定义默认内容 |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-breadcrumb-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/036-empty/347/251/272/347/212/266/346/200/201.md

@@ -0,0 +1,80 @@
+# Empty 空状态
+
+空状态时的占位提示。
+
+## 基础用法
+
+```html
+<e-empty-m description="暂无数据" />
+```
+
+## 自定义图片
+
+通过设置 `image` 属性传入图片 URL。
+
+```html
+<e-empty-m
+  description="自定义图片显示"
+  image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+/>
+```
+
+## 图片尺寸
+
+通过使用 `image-size` 属性来控制图片大小。
+
+```html
+<e-empty-m description="设置图片大小" :image-size="120" />
+```
+
+## 底部内容
+
+使用默认插槽可在底部插入内容。
+
+```html
+<e-empty-m>
+  <e-button-m type="primary" size="small">添加数据</e-button-m>
+</e-empty-m>
+```
+
+## API
+
+### Attributes
+
+| Name        | Description                  | Type   | Default |
+| ----------- | ---------------------------- | ------ | ------- |
+| image       | empty 组件的图像地址         | string | ''      |
+| image-size  | empty 组件的图像尺寸（宽度） | number | —       |
+| description | empty 组件的描述信息         | string | ''      |
+
+### Slots
+
+| Name        | Description        |
+| ----------- | ------------------ |
+| default     | 作为底部内容的内容 |
+| image       | 作为图像的内容     |
+| description | 作为描述的内容     |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-empty-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/037-colorpalette/350/260/203/350/211/262/346/235/277.md

@@ -0,0 +1,201 @@
+# ColorPalette 调色板
+
+ColorPalette 是一个支持多种颜色格式的调色板。
+
+## 基本使用
+
+ColorPalette 需要一个字符串类型的变量绑定到 v-model。
+
+```html
+<template>
+   <div class="demo-color-palette">
+        <div class="demo-color-block">
+            <span class="demonstration">有默认值</span>
+            <e-color-palette-m v-model="color1" />
+        </div>
+        <div class="demo-color-block">
+            <span class="demonstration">无默认值</span>
+            <e-color-palette-m v-model="color2" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const color1 = ref('#409EFF');
+const color2 = ref();
+</script>
+<style lang="scss" scoped>
+.demo-color {
+    &-palette {
+        display: flex;
+        flex-direction: column;
+    }
+    &-block {
+        width: 100%;
+        flex: 1;
+        margin: 10px;
+        display: flex;
+        flex-direction: column;
+        .demonstration {
+            width: 100%;
+            display: block;
+            margin-bottom: 10px;
+            font-size: 12px;
+        }
+    }
+}
+</style>
+```
+
+## 透明度
+
+ColorPalette 支持选择透明通道。要激活透明通道选择，只需添加 `show-alpha` 属性。
+
+```html
+<template>
+    <e-color-palette-m v-model="color3" :show-alpha="true" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const color3 = ref('rgba(236, 29, 15, 0.8)');
+</script>
+```
+
+## 预设自定义颜色
+
+ColorPalette 支持预定义的颜色选项。
+
+```html
+<template>
+    <div>
+        <e-radio-group-m class="custom-radio-group" v-model="paletteType" @change="paletteTypeChange">
+            <e-radio-m value="1" size="small">默认</e-radio-m>
+            <e-radio-m value="2" size="small">自定义-一行</e-radio-m>
+            <e-radio-m value="3" size="small">自定义-多行</e-radio-m>
+        </e-radio-group-m>
+        <e-color-palette-m v-model="color4" :predefine="predefineColors" show-alpha enable-predefine />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const color4 = ref('#009688');
+const paletteType = ref('1');
+const predefineColors = ref<string[] | string[][] | undefined>(undefined);
+const paletteTypeChange = (val: string) => {
+  switch (val) {
+    case '1':
+      predefineColors.value = undefined;
+      break;
+    case '2':
+      predefineColors.value = ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'];
+      break;
+    case '3':
+      predefineColors.value = [
+        ['#B71C1C', '#C62828', '#D32F2F', '#E53935', '#F44336', '#EF5350', '#E57373', '#EF9A9A'],
+        ['#F57F17', '#F9A825', '#FBC02D'],
+        ['#004D40', '#00695C', '#00796B', '#00897B', '#009688', '#26A69A'],
+      ];
+      break;
+    default:
+      break;
+  }
+};
+</script>
+<style lang="scss" scoped>
+// 自定义按钮组
+.custom-radio-group{
+    padding-left: 10px;
+    .ep-radio,.ep-radio.radio-size-small{
+        height: 24px;
+        font-size: 12px;
+    }
+}
+</style>
+```
+
+## 历史记录
+
+ColorPalette 支持历史记录的颜色选项。
+
+```html
+<template>
+    <div>
+        <e-color-palette-m ref="colorPaletteRef" v-model="color5" show-alpha enable-predefine enable-history />
+        <e-button-m type="primary" size="small" plain style="margin-top: 30px" @click="getValue">
+            获取当前颜色
+        </e-button-m>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const color5 = ref('rgba(255, 69, 0, 0.68)');
+const colorPaletteRef = ref();
+const getValue = () => {
+  let color = colorPaletteRef.value?.color.value;
+  // 这里以弹窗和控制台输出为例
+  ejs.ui.toast(color);
+  console.log('当前颜色=>', color);
+};
+</script>
+```
+
+
+
+## API
+
+### Attributes
+
+| **Name**              | **Description**    | **Type**                                                     | **Default** |
+| --------------------- | ------------------ | ------------------------------------------------------------ | ----------- |
+| model-value / v-model | 绑定值，当前颜色   | `string`                                                     | —           |
+| show-alpha            | 是否显示透明滑块   | `boolean`                                                    | false       |
+| color-format          | v-model 的颜色格式 | `'hsl'、'hsv'、'hex'、'rgb'、'hex'（当 show-alpha 为 false 时）、'rgb'（当 show-alpha 为 true 时）` | —           |
+| predefine             | 预设颜色数组       | `string[]丨string[][]`                                       | —           |
+| enable-predefine      | 是否启用预设色     | `boolean`                                                    | false       |
+| enable-history        | 是否启用历史记录   | `boolean`                                                    | false       |
+| validate-event        | 是否触发表单验证   | `boolean`                                                    | true        |
+| id                    | ColorPalette 的 id | `string`                                                     | —           |
+
+### Events
+
+| Name          | **Description**        | **Type**                  |
+| ------------- | ---------------------- | ------------------------- |
+| active-change | 当前活动颜色改变时触发 | `(value: string) => void` |
+
+### Exposes
+
+| 方法名            | 说明                  | 类型         |
+| ----------------- | --------------------- | ------------ |
+| color             | 当前颜色对象          | `Color`      |
+| show              | 手动显示 ColorPalette | `() => void` |
+| hide              | 手动隐藏 ColorPalette | `() => void` |
+| updateSliderPanel | 手动更新滑块面板      | `() => void` |
+| resetColor        | 重置颜色为初始值      | `() => void` |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-color-palette-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>