auto-vue-manual 0.0.30 → 0.0.32

package/README.md

@@ -43,6 +43,64 @@ app.mount('#app');
 [UploadImage](#uploadimage)  
 [UploadImages](#uploadimages) 
 
+## Button
+
+### 组件列表
+- OpenButton 新建按钮
+- RefreshButton 刷新按钮
+- SearchButton 搜索按钮
+- ResetButton 重置按钮
+
+### 通用 Props
+| 属性名    | 类型    | 说明           | 默认值   |
+|-----------|---------|----------------|----------|
+| type      | string  | 按钮类型       | 'primary'（Open/Search），'default'（Refresh），'warning'（Reset）|
+| size      | string  | 按钮尺寸       | 'default'|
+| showIcon  | boolean | 是否显示图标   | true     |
+| circle    | boolean | 是否圆形按钮   | true     |
+| plain     | boolean | 是否朴素按钮   | false    |
+| disabled  | boolean | 是否禁用      | false    |
+| loading   | boolean | 是否加载中     | false    |
+| t         | string  | 按钮文本      | ''      |
+
+### OpenButton
+- 用于新建操作，蓝色圆形加号图标。
+- 事件：`@open` 点击触发
+
+### RefreshButton
+- 用于刷新操作，圆形刷新图标。
+- 事件：`@refresh` 点击触发
+- 支持 loading 状态自定义
+
+### SearchButton
+- 用于搜索操作，蓝色圆形放大镜图标。
+- 事件：`@search` 点击触发
+
+### ResetButton
+- 用于重置操作，橙色圆形刷新图标。
+- 事件：`@reset` 点击触发
+
+### 示例代码
+```vue
+<template>
+  <OpenButton @open="onOpen" />
+  <RefreshButton :loading="loading" @refresh="onRefresh" />
+  <SearchButton t="搜索" @search="onSearch" />
+  <ResetButton t="重置" @reset="onReset" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OpenButton, RefreshButton, SearchButton, ResetButton } from 'auto-vue-manual';
+const loading = ref(false);
+const onOpen = () => { /* 新建逻辑 */ };
+const onRefresh = () => {
+  loading.value = true;
+  setTimeout(() => loading.value = false, 1000);
+};
+const onSearch = () => { /* 搜索逻辑 */ };
+const onReset = () => { /* 重置逻辑 */ };
+</script>
+```
 
 # Document
 
@@ -250,167 +308,76 @@ const onRowDblclick = (row: RowEventHandlerParams) => {
 </script>
 ```
 
-## Modal
+## Modal 弹窗/抽屉
+
+### 统一说明
+- 所有弹窗类组件（BasicDialog、FormDialog、TableDialog）均基于 BasicDialog 实现，props/事件/用法风格统一。
+- 所有抽屉类组件均基于 BasicDrawer 实现。
+- 支持 v-bind 透传 Element Plus Dialog/Drawer 的所有原生属性。
+
+### 通用 Props
+| 属性名         | 类型      | 说明           | 默认值   |
+|----------------|-----------|----------------|----------|
+| visible        | boolean   | 是否显示       | false    |
+| showClose      | boolean   | 是否显示关闭按钮 | true   |
+| title          | string    | 标题           | Title    |
+| width          | string    | 宽度           | 520px    |
+| top            | string    | 顶部距离       | 15vh     |
+| dialogProps    | object    | 透传 Dialog/Drawer 属性 | {} |
+| appendToBody   | boolean   | 是否插入 body  | true     |
+| lockScroll     | boolean   | 是否锁定滚动   | true     |
+| closeOnClickModal | boolean | 点击遮罩关闭   | false    |
 
 ### BasicDialog
+- 通用弹窗基类，支持所有通用 props 和事件。
+- 事件：`@update:visible`、`@closed`、`@submit`
 
-#### Props 参数说明
+### BasicDrawer
+- 通用抽屉基类，支持所有通用 props 和事件。
+- 事件：`@update:visible`、`@closed`
 
-| 属性名 | 类型 | 说明 | 默认值 |
-| ------ | ---- | ---- | ------ |
-| **visible** | `boolean`  | 是否显示 | false |
-| **show-close** | `boolean`  | 是否显示关闭按钮 | true |
-| **title** | `string`  | 标题 | Title |
-| **width** | `string`  | 宽度 | 520px |
-| **top** | `string`  | 顶部距离 | 15vh |
-| **dialog-props** | `object`  | 对话框属性 | {} |
+### FormDialog
+- 基于 BasicDialog 扩展，内置底部按钮，适合表单场景。
+- 额外 props：`executing`（是否执行中）、`footer`（是否显示底部）、`btnSize`、`okText`、`cancelText`
+- 事件：`@submit`、`@closed`、`@before-close`
 
-#### Event 事件说明
-
-| 事件名 | 说明 | 参数 |
-| ------ | ---- | ---- |
-| **@closed** | 关闭事件 | - |
-| **@submit** | 确定事件 | - |
-
-#### 示例代码
+### TableDialog
+- 基于 BasicDialog 扩展，适合表格弹窗场景。
+- 额外 props：`requesting`（是否请求中）
 
+### 示例代码
 ```vue
 <template>
-  <BasicDialog ref="basicDialogRef" :visible="visible" title="user.name" width="520px" @closed="onClosed" @submit="onSubmit" />
+  <OpenButton @open="visible = true" />
+  <BasicDialog :visible="visible" title="标题" width="520px" @update:visible="visible = $event" @closed="onClosed">
+    <template #default>内容区域</template>
+  </BasicDialog>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
-import BasicDialog from "auto-vue-manual";
-
-const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
+import { ref } from 'vue';
+import { BasicDialog, OpenButton } from 'auto-vue-manual';
 const visible = ref(false);
-
-const onClosed = () => {
-  console.log("onClosed");
-};
-const onSubmit = () => {
-  console.log("onSubmit");
-};
+const onClosed = () => { visible.value = false; };
 </script>
 ```
 
-## BasicDrawer
-
-#### Props 参数说明
-
-| 属性名 | 类型 | 说明 | 默认值 |
-| ------ | ---- | ---- | ------ |
-| **visible** | `boolean`  | 是否显示 | false |
-| **show-close** | `boolean`  | 是否显示关闭按钮 | true |
-| **title** | `string`  | 标题 | Title |
-| **width** | `string`  | 宽度 | 520px |
-| **dialog-props** | `object`  | 对话框属性 | {} |
-
-#### Event 事件说明
-
-| 事件名 | 说明 | 参数 |
-| ------ | ---- | ---- |
-| **@closed** | 关闭事件 | - |
-
-#### 示例代码
-
+### FormDialog 示例
 ```vue
 <template>
-  <BasicDrawer ref="basicDrawerRef" :visible="visible" title="user.name" width="520px" @closed="onClosed" />
-</template>
-<script setup lang="ts">
-import { ref } from "vue";
-import BasicDrawer from "auto-vue-manual";
-
-const basicDrawerRef = ref<InstanceType<typeof BasicDrawer>>();
-const visible = ref(false);
-
-const onClosed = () => {
-  console.log("onClosed");
-};
-</script>
-```
-
-## FormDialog
-
-#### Props 参数说明
-
-| 属性名 | 类型 | 说明 | 默认值 |
-| ------ | ---- | ---- | ------ |
-| **executing** | `boolean`  | 是否执行中 | false |
-| **footer** | `boolean`  | 是否显示底部 | true |
-| **btn-size** | `string`  | 按钮大小 | default |
-| **ok-text** | `string`  | 确定按钮文本 | base.submit |
-| **cancel-text** | `string`  | 取消按钮文本 | base.cancel |
-
-其余同 [BasicDialog](#basicdialog)
-
-#### Event 事件说明
-
-| 事件名 | 说明 | 参数 |
-| ------ | ---- | ---- |
-| **@closed** | 关闭事件 | - |
-| **@submit** | 确定事件 | - |
-| **@before-close** | 关闭前事件 | - |
-
-#### 示例代码
-
-```vue
-<template>
-  <FormDialog ref="formDialogRef" :visible="visible" title="user.name" width="520px" @closed="onClosed" @submit="onSubmit" @before-close="onBeforeClose" />
+  <OpenButton @open="visible = true" />
+  <FormDialog :visible="visible" title="表单弹窗" @update:visible="visible = $event" @submit="onSubmit">
+    <template #default>
+      <el-input v-model="form.name" placeholder="请输入名称" />
+    </template>
+  </FormDialog>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
-import FormDialog from "auto-vue-manual";
-
-const formDialogRef = ref<InstanceType<typeof FormDialog>>();
+import { ref } from 'vue';
+import { FormDialog, OpenButton } from 'auto-vue-manual';
 const visible = ref(false);
-
-const onClosed = () => {
-  console.log("onClosed");
-};
-const onSubmit = () => {
-  console.log("onSubmit");
-};
-const onBeforeClose = () => {
-  console.log("onBeforeClose");
-};
+const form = ref({ name: '' });
+const onSubmit = () => { /* 提交逻辑 */ };
 </script>
-``` 
-
-## TableDialog
-
-#### Props 参数说明
-
-| 属性名 | 类型 | 说明 | 默认值 |
-| ------ | ---- | ---- | ------ |
-| **requesting** | `boolean`  | 是否请求中 | false |
-
-其余同 [BasicDialog](#basicdialog)
-
-#### Event 事件说明
-
-| 事件名 | 说明 | 参数 |
-| ------ | ---- | ---- |
-| **@closed** | 关闭事件 | - |
-
-#### 示例代码
-
-```vue
-<template>
-  <TableDialog ref="tableDialogRef" :visible="visible" title="user.name" width="520px" @closed="onClosed" />
-</template>
-<script setup lang="ts">
-import { ref } from "vue";
-import TableDialog from "auto-vue-manual";
-
-const tableDialogRef = ref<InstanceType<typeof TableDialog>>();
-const visible = ref(false);
-
-const onClosed = () => {
-  console.log("onClosed");
-};
-</script> 
 ```
 
 ## Upload
@@ -479,4 +446,42 @@ import UploadImages from "auto-vue-manual";
 
 const uploadImagesRef = ref<InstanceType<typeof UploadImages>>();
 const images = ref<FileList[]>([]);
-</script>
+</script>
+```
+
+## Tinymce 富文本编辑器
+
+### 组件说明
+基于 tinymce 封装的富文本编辑器，支持图片上传、字数统计、代码高亮等常用功能，适用于内容管理、文章编辑等场景。
+
+### Props 参数说明
+| 属性名   | 类型    | 说明                 | 默认值         |
+|----------|---------|----------------------|----------------|
+| url      | string  | 图片上传接口         | /upload/image  |
+| content  | string  | 编辑器内容（v-model）| ''             |
+| height   | number  | 编辑器高度           | 600            |
+| disabled | boolean | 是否禁用编辑         | false          |
+
+### 事件
+| 事件名           | 说明               | 参数         |
+|------------------|--------------------|--------------|
+| update:content   | 内容变更时触发     | value: string|
+
+### 功能特性
+- 支持图片粘贴/上传，自动调用 `url` 接口
+- 支持字数统计、代码高亮、列表、字体样式等
+- 支持自定义高度、禁用状态
+- 默认中文界面
+
+### 示例代码
+```vue
+<template>
+  <Tinymce v-model:content="content" :height="400" :url="'/upload/image'" />
+  <p>内容：{{ content }}</p>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Tinymce from 'auto-vue-manual';
+const content = ref('<p>初始内容</p>');
+</script>
+```