m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/045-ewebeditor/345/257/214/346/226/207/346/234/254/347/274/226/350/276/221/345/231/250.md

@@ -0,0 +1,236 @@
+# EwebEditor 富文本编辑器
+
+EwebEditor 是一个功能丰富的富文本编辑器，支持多种自定义配置和事件，基于`uniapp`的`editor`组件封装
+
+## 基本使用
+
+- 通过 `v-model` 进行富文本编辑器的赋值、获取。
+- 通过 `@change` 事件监听内容变化
+
+```html
+<template>
+    <e-eweb-editor-m
+        id="ewebeditor"
+        v-model="simpleEditorContent"
+        @change="onChange"
+        ref="ewebeditor"
+    />
+    <div class="btn-groups">
+        <e-button-m type="primary" @click="getValue">获取值</e-button-m>
+        <e-button-m type="primary" @click="setValue">设置值</e-button-m>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const simpleEditorContent = ref('');
+const getValue = () => {
+    console.log('getValue', simpleEditorContent.value);
+};
+const setValue = () => {
+    simpleEditorContent.value = 'EwebEditor Hello！';
+};
+const onChange = (editorInstance,editorId) => {
+    console.log(`onchagned: ${editorId}`, editorInstance);
+};
+</script>
+```
+
+## 进阶使用
+
+**使用config属性传入自定义配置**
+
+- 使用`height`设置编辑器高度
+- 使用`autoHeight`设置编辑器自适应高度
+- `readonly`设置编辑器只读
+- `skin`设置编辑器亮色暗色主题
+- 更多方法调用
+- 更多监听事件
+
+```html
+<template>
+    <e-eweb-editor-m
+        id="ewebeditor"
+        v-model="editorContent"
+        :config="editorConfig"
+        :autoHeight="true"
+        :height="600"
+        :style="['font-size:24px']"
+        skin="dark"
+        lang="zh-tw"
+        :readonly="false"
+        @ready="onReady"
+        @change="onChange"
+        @remove="onRemove"
+        @paste="onPaste"
+        @all="onAll"
+        ref="ewebeditor"
+    />
+    <div class="btn-groups">
+        <e-button-m type="primary" @click="getCount">获取文本长度</e-button-m>
+        <e-button-m type="primary" @click="getHtml">获取HTML内容</e-button-m>
+        <e-button-m type="primary" @click="getText">获取纯文本内容</e-button-m>
+        <e-button-m type="primary" @click="setHtml">设置HTML内容</e-button-m>
+        <e-button-m type="primary" @click="getSelectedElement">获取选中的元素</e-button-m>
+        <e-button-m type="primary" @click="getSelectedHtml">获取选中的HTML</e-button-m>
+        <e-button-m type="primary" @click="getSelectedText">获取选中的文本</e-button-m>
+        <e-button-m type="primary" @click="setReadOnly">设置只读</e-button-m>
+        <e-button-m type="primary" @click="update">更新内容</e-button-m>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+const editorContent = ref('');
+// ref变量
+const ewebeditor = ref();
+// editorConfig 额外参数配置
+const editorConfig = reactive({
+    placeholder: '请输入内容'
+});
+
+//获取文本长度
+const getCount = () => {
+    let data = ewebeditor.value.getCount(); //获取当前字数
+    console.log('getCount', data);
+};
+
+//获取HTML内容
+const getHtml = () => {
+    let data = ewebeditor.value.getHtml();
+    console.log('getHtml', data);
+};
+//获取纯文本内容
+const getText = () => {
+    let data = ewebeditor.value.getText();
+    console.log('getText', data);
+};
+//设置HTML内容
+const setHtml = () => {
+    ewebeditor.value.setHtml('<p>2025年6月30日18:21:37</p>');
+};
+//获取选中的元素
+const getSelectedElement = () => {
+    let data = ewebeditor.value.getSelectedElement();
+    console.log('getSelectedElement', data);
+};
+
+//获取选中的HTML
+const getSelectedHtml = () => {
+    let data = ewebeditor.value.getSelectedHtml();
+    console.log('getSelectedHtml', data);
+};
+//获取选中的文本
+const getSelectedText = () => {
+    let data = ewebeditor.value.getSelectedText();
+    console.log('getSelectedText', data);
+};
+//设置只读
+const setReadOnly = () => {
+    ewebeditor.value.setReadOnly(true);
+};
+
+//更新内容
+const update = () => {
+    ewebeditor.value.update();
+};
+
+// 监听变化
+const onChange = (editorInstance,editorId) => {
+    console.log(`onchagned: ${editorId}`, editorInstance);
+};
+// 监听初始化完成
+const onReady = (editorInstance) => {
+    console.log('onReady', editorInstance);
+};
+//监听onRemove 编辑器移除
+const onRemove = (editorInstance, editorId) => {
+    console.log('onRemove', editorInstance, editorId);
+};
+//监听编辑器的粘贴功能
+const onPaste = (editorInstance, editorId) => {
+    console.log('onPaste', editorInstance, editorId);
+};
+//监听所有事件
+const onAll = (eventName, editorInstance, editorId) => {
+    console.log('onAll', eventName, editorInstance, editorId);
+};
+</script>
+```
+
+
+
+## API
+
+### Attributes
+
+| Name    | Description        | Type | Default |
+| --------------------- | ------------------------------ | ---------------------------------------------------------- | -------------- |
+| model-value / v-model | 绑定值，编辑器内容             | `string`                                                   | —              |
+| config                | 编辑器额外配置                 | `EditorConfig`                                             | `{}`           |
+| autoHeight         | 是否自适应高度          | `boolean`                                           | `false`     |
+| height            | 编辑器高度（默认单位：px）      | `number`                                                   | `400`         |
+| style    | 自定义样式               | `string`/`object`/`array` | —          |
+| skin         | 主题色（light/dark）           | `enum` `'light'丨'dark'`                           | `'light'`      |
+| lang           | 指定语言             | `enum` `'zh-cn'丨'zh-tw'丨'en'`                     | `'zh-cn'` |
+| readonly      | 设置编辑器为只读模式。<br/>`1`：带状态栏;`2`：不带状态栏 | `enum` `1丨2`                                          | `false`       |
+
+#### EditorConfig
+
+| Name        | Description                                                  | Type     | Default       |
+| ----------- | ------------------------------------------------------------ | -------- | ------------- |
+| id          | 编辑器唯一标识id                                             | `string` | `'my-editor'` |
+| placeholder | 占位符                                                       | `string` | —             |
+| maxlength   | 最大字数限制，-1 时不限制                                    | `number` | `-1`          |
+| —           | 更多入参，参考[`富文本插件文档`](https://sonvee.github.io/sv-app-docs/docs-github/src/plugins/sp-editor/sp-editor.html) | -        | -             |
+
+
+
+### Events
+
+| Name   | Description              | Type                                                         |
+| ------ | ------------------------ | ------------------------------------------------------------ |
+| ready  | 编辑器初始化完成时触发   | `(editorInstance:any) => void`                               |
+| change | 内容变化时触发           | `(editorInstance:any,editorId:string) => void`               |
+| remove | 编辑器被销毁时触发       | `(editorInstance:any, editorId:string) => void`              |
+| paste  | 当内容粘贴进编辑器时触发 | `(editorInstance:any, editorId:string) => void`              |
+| all    | 所有事件触发监听         | `(eventName:string, editorInstance:any, editorId:string) => void` |
+
+### Exposes
+
+| Name               | Description                                                  | Type                            |
+| ------------------ | ------------------------------------------------------------ | ------------------------------- |
+| getCount           | 获取内容文本长度                                             | `() => number`                  |
+| getHtml            | 获取 HTML 内容                                               | `() => string`                  |
+| getText            | 获取纯文本内容                                               | `() => string`                  |
+| setHtml            | 设置 HTML 内容                                               | `(html: string) => void`        |
+| getSelectedElement | 获得已选中元素                                               | `() => string`                  |
+| getSelectedHtml    | 获取选中的 HTML 内容                                         | `() => string`                  |
+| getSelectedText    | 获得已选中文本                                               | `() => string`                  |
+| setReadOnly        | 设置是否只读状态                                             | `(isReadOnly: boolean) => void` |
+| update             | 更新编辑器渲染内容                                           | `() => void`                    |
+| ……                 | 更多可调用方法，可通过 `onReady`返回的`editorInstance`富文本编辑器实例调用。<br/>[`editor-组件的接口方法`](https://uniapp.dcloud.net.cn/api/media/editor-context) <br/>[`富文本编辑器 sp-editor`](https://sonvee.github.io/sv-app-docs/docs-github/src/plugins/sp-editor/sp-editor.html) | `() => void`                    |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-eweb-editor-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/046-tabs/346/240/207/347/255/276/351/241/265.md

@@ -0,0 +1,388 @@
+# Tabs 选项卡
+
+将相关联但属于不同类型的数据集合进行划分。
+
+## 基础用法
+
+简单且简洁的选项卡。
+
+选项卡提供选择性卡片功能。默认情况下，第一个选项卡被选为活动状态，您可以通过设置 `value` 属性来激活任何选项卡。
+
+```html
+<template>
+  <e-tabs-m v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <e-tab-pane-m label="User" name="first">User</e-tab-pane-m>
+    <e-tab-pane-m label="Config" name="second">Config</e-tab-pane-m>
+    <e-tab-pane-m label="Role" name="third">Role</e-tab-pane-m>
+    <e-tab-pane-m label="Task" name="fourth">Task</e-tab-pane-m>
+  </e-tabs-m>
+</template>
+<script setup>
+import { ref } from 'vue';
+const activeName = ref('first');
+const handleClick = (tab, event) => {
+  console.log(tab, event);
+};
+</script>
+```
+
+## Iframe 选项卡
+
+在选项卡上配置 url 可以自定生成 Iframe 并加载对应地址的页面。
+
+```html
+<template>
+  <e-button-m type="primary" @click="reload">刷新选项卡</e-button-m>
+  <e-tabs-m ref="tabs" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <e-tab-pane-m
+      ref="firstRef"
+      label="EUI-Vue"
+      name="first"
+      url="http://192.168.219.170/docs/vue/latest/component/component/button.html"
+      @load="onload"
+    />
+    <e-tab-pane-m
+      class="second"
+      ref="secondRef"
+      label="EUI-F9"
+      name="second"
+      url="http://192.168.219.170/showcase/eui3/components/"
+      lazy
+      @load="onload"
+    />
+  </e-tabs-m>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+const activeName = ref('first');
+const tabs = ref(null);
+const firstRef = ref();
+const secondRef = ref();
+const handleClick = (tab, event) => {
+  console.log('标签点击:', tab);
+};
+const onload = (pane) => {
+  console.log('标签加载:', pane);
+};
+const reload = () => {
+  if (activeName.value === 'first' && firstRef.value && firstRef.value.reload instanceof Function) {
+    firstRef.value.reload();
+    return;
+  } else if (activeName.value === 'second' && secondRef.value && firstRef.value.reload instanceof Function) {
+    secondRef.value.reload();
+    return;
+  }
+  if (tabs.value && activeName.value) {
+    const tabPane = tabs.value.getTabPane(activeName.value);
+    if (tabPane && typeof tabPane.reload === 'function') {
+      tabPane.reload();
+      return;
+    }
+  }
+};
+</script>
+```
+
+## 卡片风格
+
+具有卡片样式的选项卡。
+
+将 `type` 设置为 `card` 可以得到卡片样式的选项卡。
+
+```html
+<template>
+  <e-tabs-m v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
+    <e-tab-pane-m label="User" name="first">User</e-tab-pane-m>
+    <e-tab-pane-m label="Config" name="second">Config</e-tab-pane-m>
+    <e-tab-pane-m label="Role" name="third">Role</e-tab-pane-m>
+    <e-tab-pane-m label="Task" name="fourth">Task</e-tab-pane-m>
+  </e-tabs-m>
+</template>
+<script setup>
+import { ref } from 'vue';
+const activeName = ref('first');
+const handleClick = (tab, event) => {
+  console.log(tab, event);
+};
+</script>
+```
+
+## 边框卡片
+
+带边框的卡片选项卡。
+
+将 `type` 设置为 `border-card`。
+
+```html
+<template>
+  <e-tabs-m type="border-card">
+    <e-tab-pane-m label="User">User</e-tab-pane-m>
+    <e-tab-pane-m label="Config">Config</e-tab-pane-m>
+    <e-tab-pane-m label="Role">Role</e-tab-pane-m>
+    <e-tab-pane-m label="Task">Task</e-tab-pane-m>
+  </e-tabs-m>
+</template>
+```
+
+## 选项卡位置
+
+您可以使用 `tab-position` 属性设置选项卡的位置。
+
+您可以从两个方向中选择：tabPosition="top|bottom"
+
+```html
+<template>
+    <e-radio-group-m v-model="tabPosition" style="margin-bottom: 30px">
+        <e-radio-button-m value="top">top</e-radio-button-m>
+        <e-radio-button-m value="bottom">bottom</e-radio-button-m>
+    </e-radio-group-m>
+    <e-tabs-m :tab-position="tabPosition" style="height: 200px" class="demo-tabs">
+        <e-tab-pane-m label="User">User</e-tab-pane-m>
+        <e-tab-pane-m label="Config">Config</e-tab-pane-m>
+        <e-tab-pane-m label="Role">Role</e-tab-pane-m>
+        <e-tab-pane-m label="Task">Task</e-tab-pane-m>
+    </e-tabs-m>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const tabPosition = ref('top');
+</script>
+```
+
+## 自定义选项卡
+
+您可以使用命名插槽来自定义选项卡标签内容。
+
+```html
+<template>
+  <e-tabs-m>
+    <e-tab-pane-m >
+       <template #label>
+        <span class="custom-tabs-label">
+          <e-icon-m name="User"/>
+          <span>User</span>
+        </span>
+      </template>
+      User
+    </e-tab-pane-m>
+    <e-tab-pane-m label="Config">Config</e-tab-pane-m>
+    <e-tab-pane-m label="Role">Role</e-tab-pane-m>
+    <e-tab-pane-m label="Task">Task</e-tab-pane-m>
+  </e-tabs-m>
+</template>
+```
+
+
+
+## 添加 & 关闭选项卡
+
+选项卡支持可添加 & 可关闭。
+
+```html
+<template>
+  <div style="margin-bottom: 20px">
+    <e-button-m size="small" @click="addTab"> add tab </e-button-m>
+  </div>
+  <e-tabs-m v-model="editableTabsValue" type="card" class="demo-tabs" closable @tab-remove="removeTab">
+    <e-tab-pane-m v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
+      {{ item.content }}
+    </e-tab-pane-m>
+  </e-tabs-m>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+let tabIndex = 2;
+const editableTabsValue = ref('2');
+const editableTabs = ref([
+  {
+    title: 'Tab 1',
+    name: '1',
+    content: 'Tab 1 content',
+  },
+  {
+    title: 'Tab 2',
+    name: '2',
+    content: 'Tab 2 content',
+  },
+]);
+
+const addTab = () => {
+  const newTabName = `${++tabIndex}`;
+  editableTabs.value.push({
+    title: 'New Tab',
+    name: newTabName,
+    content: 'New Tab content',
+  });
+  editableTabsValue.value = newTabName;
+};
+const removeTab = (targetName) => {
+  const tabs = editableTabs.value;
+  let activeName = editableTabsValue.value;
+  if (activeName === targetName) {
+    tabs.forEach((tab, index) => {
+      if (tab.name === targetName) {
+        const nextTab = tabs[index + 1] || tabs[index - 1];
+        if (nextTab) {
+          activeName = nextTab.name;
+        }
+      }
+    });
+  }
+
+  editableTabsValue.value = activeName;
+  editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
+};
+</script>
+```
+
+## 自定义新选项卡的触发按钮
+
+```html
+<template>
+  <div style="margin-bottom: 20px">
+    <e-button-m size="small" @click="addTab"> add tab </e-button-m>
+  </div>
+  <e-tabs-m v-model="editableTabsValue" type="card" class="demo-tabs" closable @tab-remove="removeTab">
+    <e-tab-pane-m v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
+      {{ item.content }}
+    </e-tab-pane-m>
+  </e-tabs-m>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+
+let tabIndex = 2;
+const editableTabsValue = ref('2');
+const editableTabs = ref([
+  {
+    title: 'Tab 1',
+    name: '1',
+    content: 'Tab 1 content',
+  },
+  {
+    title: 'Tab 2',
+    name: '2',
+    content: 'Tab 2 content',
+  },
+]);
+
+const addTab = () => {
+  const newTabName = `${++tabIndex}`;
+  editableTabs.value.push({
+    title: 'New Tab',
+    name: newTabName,
+    content: 'New Tab content',
+  });
+  editableTabsValue.value = newTabName;
+};
+const removeTab = (targetName) => {
+  const tabs = editableTabs.value;
+  let activeName = editableTabsValue.value;
+  if (activeName === targetName) {
+    tabs.forEach((tab, index) => {
+      if (tab.name === targetName) {
+        const nextTab = tabs[index + 1] || tabs[index - 1];
+        if (nextTab) {
+          activeName = nextTab.name;
+        }
+      }
+    });
+  }
+
+  editableTabsValue.value = activeName;
+  editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
+};
+</script>
+```
+
+
+
+## Tabs API
+
+### Tabs Attributes
+
+| Name                  | Description                                                  | Type                                            | Default            |
+| :-------------------- | :----------------------------------------------------------- | :---------------------------------------------- | :----------------- |
+| model-value / v-model | 绑定值，选中选项卡的名称                                     | `string` / `number`                             | 第一个选项卡的名称 |
+| type                  | 选项卡的类型                                                 | `line` / `card`/`border-card`                   | line               |
+| closable              | 选项卡是否可关闭                                             | `boolean`                                       | false              |
+| addable               | 选项卡是否可添加                                             | `boolean`                                       | false              |
+| editable              | 选项卡是否可添加和关闭                                       | `boolean`                                       | false              |
+| tab-position          | 选项卡的位置                                                 | `string`                                        | top                |
+| stretch               | 选项卡宽度是否自动适应其容器                                 | `boolean`                                       | false              |
+| before-leave          | 切换选项卡前的钩子函数。如果返回 `false` 或返回 `Promise` 并且被拒绝，将阻止切换 | `(name, oldname) => boolean \|Promise<boolean>` | —                  |
+
+### Tabs Events
+
+| Name       | Description                              | **Parameters**                                               |
+| :--------- | :--------------------------------------- | :----------------------------------------------------------- |
+| tab-click  | 点击选项卡时触发                         | (pane:{name: `PaneName`,title: `paneLabel`} ,ev: `Event`)    |
+| tab-change | 当前激活的 tab 变更时触发                | (name: `PaneName`)                                           |
+| tab-remove | 点击选项卡移除按钮时触发                 | (name: `PaneName`)                                           |
+| tab-add    | 点击选项卡添加按钮时触发                 | —                                                            |
+| edit       | 点击选项卡添加按钮或选项卡移除按钮时触发 | (paneName: `TabPaneName \|undefined`, action: `'remove' \|'add'`) |
+
+### Tabs Slots
+
+| Name    | Description | **Parameters** |
+| :------ | :---------- | :------------- |
+| default | 标签页内容  | ep-tab-pane    |
+
+## Tab-pane API
+
+### Tab-pane Attributes
+
+| Name     | Description                                    | Type                | Default                                                  |
+| :------- | :--------------------------------------------- | :------------------ | :------------------------------------------------------- |
+| label    | 选项卡的标题                                   | `string`            | —                                                        |
+| disabled | 选项卡是否禁用                                 | `boolean`           | false                                                    |
+| name     | 对应于选项卡名称的标识符，代表选项卡面板的别名 | `string` / `number` | 选项卡面板在序列中的序数编号，例如第一个选项卡面板为 '0' |
+| closable | 选项卡是否可关闭                               | `boolean`           | false                                                    |
+| lazy     | 选项卡是否懒加载                               | `boolean`           | false                                                    |
+| url      | iframe 路径地址                                | `string`            | null                                                     |
+
+### Tab-pane Slots
+
+| Name    | Description      |
+| :------ | :--------------- |
+| default | 选项卡面板的内容 |
+| label   | 选项卡面板的标签 |
+
+### Tab-pane Events
+
+| Name | Description                            | **Parameters**                                               |
+| :--- | :------------------------------------- | :----------------------------------------------------------- |
+| load | 带有 url 的 pane，iframe加载完成后出发 | (pane:{name: `paneName\|undefined`, title: `'Label'`,disabled:`<boolean>`}) |
+
+### Tab-pane Methods
+
+| Name   | Description    | **Parameters** |
+| :----- | :------------- | :------------- |
+| reload | 刷新iframe页面 | —              |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-tabs-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>