feat: 前端文档完善

mineadmin · Oct 31, 2024 · fbbd722 · fbbd722
1 parent c785671
commit fbbd722
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 32 deletions.
diff --git a/.vitepress/src/zh/sidebars.ts b/.vitepress/src/zh/sidebars.ts
@@ -173,10 +173,6 @@ const sidebar:DefaultTheme.Sidebar = {
           text: 'MaEcharts',
           link: '/zh/front/component/ma-echarts'
         },
-        {
-          text: 'MaDialog',
-          link: '/zh/front/component/ma-dialog'
-        }
       ]
     }
   ],

diff --git a/.vitepress/theme/components/layout.vue b/.vitepress/theme/components/layout.vue
@@ -29,6 +29,14 @@ giscusTalk({
 
 <template>
   <ElConfigProvider :locale="{ zhCn }">
-    <Layout />
+    <div class="relative">
+      <div class="sticky top-65px z-999 hidden lg:block mx-auto text-center w-8/12">
+        <el-alert type="success" effect="dark" center>
+          ⭐ 开源不易，如果觉得本项目对您的工作还是有帮助的话，请帮忙在 <a target="_blank" href="https://github.com/mineadmin/mineadmin">GitHub</a> 点个会Star ⭐
+        </el-alert>
+      </div>
+      <Layout>
+      </Layout>
+    </div>
   </ElConfigProvider>
 </template>
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -36,6 +36,7 @@ import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
 import './styles/var.css'
 import './styles/element.css'
 import { baiduPlugin } from "./plugin/baidu";
+import initEcharts from "./plugin/echarts";
 
 import "virtual:uno.css";
 
@@ -64,6 +65,7 @@ export default {
     app.component('DemoPreview', DemoPreview)
 
     baiduPlugin()
+    initEcharts(app)
   },
   extends: DefaultTheme,
   Layout,

diff --git a/.vitepress/theme/plugin/echarts.ts b/.vitepress/theme/plugin/echarts.ts
@@ -0,0 +1,40 @@
+import * as echarts from 'echarts/core'
+import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts'
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
+import {
+  DataZoomComponent,
+  GraphicComponent,
+  GridComponent,
+  LegendComponent,
+  PolarComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+} from 'echarts/components'
+
+import {App} from "vue"
+
+const { use } = echarts
+
+use([
+  PieChart,
+  BarChart,
+  LineChart,
+  RadarChart,
+  CanvasRenderer,
+  SVGRenderer,
+  GridComponent,
+  TitleComponent,
+  PolarComponent,
+  LegendComponent,
+  GraphicComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+])
+
+export default function initEcharts(app: App) {
+  app.config.globalProperties.$echarts = echarts
+}
diff --git a/docs/demos/ma-dialog/index.vue b/docs/demos/ma-dialog/index.vue
diff --git a/docs/demos/ma-search/index.vue b/docs/demos/ma-search/index.vue
@@ -1,9 +1,31 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import { ref } from 'vue'
+import {MaSearchItem} from "@mineadmin/search";
+import {ElMessage} from "element-plus";
 
+const searchItem = ref<MaSearchItem>([
+  { label: '账户', prop: 'username', render: 'input' },
+  { label: '昵称', prop: 'nickname', render: 'input' },
+  { label: '状态', prop: 'status',
+    render: () => (
+      <el-radio-group>
+        <el-radio label="启用" value="1" />
+        <el-radio label="停用" value="2" />
+      </el-radio-group>
+    )
+  },
+])
 </script>
 
 <template>
-  待完善演示。。。
+  <ma-search
+    :options="{ fold: true }"
+    :form-options="{ labelWidth: '80px'}"
+    :search-items="searchItem"
+    @search="(form) => {
+      ElMessage.success('提交的数据：' + JSON.stringify(form))
+    }"
+  />
 </template>
 
 <style scoped>

diff --git a/docs/zh/front/component/ma-dialog.md b/docs/zh/front/component/ma-dialog.md
diff --git a/docs/zh/front/component/ma-echarts.md b/docs/zh/front/component/ma-echarts.md
@@ -1 +1,9 @@
 # MaEcharts
+
+基于 [echarts](https://echarts.apache.org/zh/index.html) 的封装，提供更简单的使用方式。
+
+:::tip 说明
+如果单独使用 `@mineadmin/echarts` 依赖的话，需要将 `echarts` 对象注册绑定到 `app.config.globalProperties.$echarts` 上。但在 `MineAdmin` 中已经自动注册了。 
+:::
+
+## 使用
diff --git a/docs/zh/front/component/ma-form.md b/docs/zh/front/component/ma-form.md
@@ -56,18 +56,18 @@
 
 ### MaFormItem
 
-| 参数             | 说明                                                                                                                                                                              | 类型                                                                                                 | 默认值     | 版本    |
-|----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|---------|-------|
-| `label`        | 增强原生参数，添加支持函数类型                                                                                                                                                                 | `string, () => string`                                                                             | -       | 1.0.0 |
-| `prop`         | 增强原生参数，添加支持函数类型                                                                                                                                                                 | `string, () => string`                                                                             | -       | 1.0.0 |
-| `hide`   | <el-tooltip content="是否隐藏该项，隐藏后还是有数据的，默认: `false`，自定义组件下可能无效">`鼠标放上查看`</el-tooltip>                                                                                             | <el-tooltip content="boolean, (item: MaFormItem, model: MaModel) => boolean">`鼠标放上查看`</el-tooltip> | `false` | 1.0.0 |
-| `show` | <el-tooltip content="是否显示该项，不显示后实际不渲染，也没有数据，默认: `true`，自定义组件下可能无效">`鼠标放上查看`</el-tooltip>                                                                                        | <el-tooltip content="boolean, (item: MaFormItem, model: MaModel) => boolean">`鼠标放上查看`</el-tooltip> | `true`  | 1.0.0 |
-| `cols` | 在 `options.layout 为 flex` 下生效                                                                                                                                                   | [el-col文档](https://element-plus.org/zh-CN/component/layout.html#col-attributes)                    | -       | 1.0.0 |
-| `itemProps` | `el-form-item` 原生属性                                                                                                                                                             | [表单项属性](https://element-plus.org/zh-CN/component/form.html#formitem-attributes)                    | -       | 1.0.0 |
-| `itemSlots` | `el-form-item` 原生插槽                                                                                                                                                             | [表单项插槽](https://element-plus.org/zh-CN/component/form.html#formitem-slots)                         | -       | 1.0.0 |
-| `render` | 渲染单元格：<el-tooltip content="设置要渲染的组件，可设置 `element plus` 的所有 `form` 组件，例如：`input`, `datePicker`，也可以传入 `tsx`, `jsx` 语法的虚拟dom，也可以传入一个组件，函数式，例如：() => ElInput">`鼠标放上查看`</el-tooltip> | `string, (data) => any`                                                                            | -       | 1.0.0 |
-| `renderProps` | 被渲染组件的 `props` 属性                                                                                                                                                               | `Record<string, any>`                                                                              | -       | 1.0.0 |
-| `renderSlots` | 被渲染组件的插槽  | `Record<string, (...args) => {}>`                                                                  | -       | 1.0.0 |
+| 参数             | 说明                                                                                                                                                                             | 类型                                                                                                 | 默认值     | 版本    |
+|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|---------|-------|
+| `label`        | 增强原生参数，添加支持函数类型                                                                                                                                                                | `string, () => string`                                                                             | -       | 1.0.0 |
+| `prop`         | 增强原生参数，添加支持函数类型                                                                                                                                                                | `string, () => string`                                                                             | -       | 1.0.0 |
+| `hide`   | <el-tooltip content="是否隐藏该项，隐藏后还是有数据的，默认: `false`，自定义组件下可能无效">`鼠标放上查看`</el-tooltip>                                                                                            | <el-tooltip content="boolean, (item: MaFormItem, model: MaModel) => boolean">`鼠标放上查看`</el-tooltip> | `false` | 1.0.0 |
+| `show` | <el-tooltip content="是否显示该项，不显示后实际不渲染，也没有数据，默认: `true`，自定义组件下可能无效">`鼠标放上查看`</el-tooltip>                                                                                       | <el-tooltip content="boolean, (item: MaFormItem, model: MaModel) => boolean">`鼠标放上查看`</el-tooltip> | `true`  | 1.0.0 |
+| `cols` | 在 `options.layout 为 flex` 下生效                                                                                                                                                  | [el-col文档](https://element-plus.org/zh-CN/component/layout.html#col-attributes)                    | -       | 1.0.0 |
+| `itemProps` | `el-form-item` 原生属性                                                                                                                                                            | [表单项属性](https://element-plus.org/zh-CN/component/form.html#formitem-attributes)                    | -       | 1.0.0 |
+| `itemSlots` | `el-form-item` 原生插槽                                                                                                                                                            | [表单项插槽](https://element-plus.org/zh-CN/component/form.html#formitem-slots)                         | -       | 1.0.0 |
+| `render` | 渲染组件：<el-tooltip content="设置要渲染的组件，可设置 `element plus` 的所有 `form` 组件，例如：`input`, `datePicker`，也可以传入 `tsx`, `jsx` 语法的虚拟dom，也可以传入一个组件，函数式，例如：() => ElInput">`鼠标放上查看`</el-tooltip> | `string, (data) => any`                                                                            | -       | 1.0.0 |
+| `renderProps` | 被渲染组件的 `props` 属性                                                                                                                                                              | `Record<string, any>`                                                                              | -       | 1.0.0 |
+| `renderSlots` | 被渲染组件的插槽                                                                                                                                                                       | `Record<string, (...args) => {}>`                                                                  | -       | 1.0.0 |
 
 ## Slot
 

diff --git a/docs/zh/front/component/ma-search.md b/docs/zh/front/component/ma-search.md
@@ -56,6 +56,14 @@
 | `offset` | 间隔大小                   | `number` | 0   | 1.0.0 |
 | ...      | 其余都是 `ma-form-item` 参数 | -        | -   | 1.0.0 |
 
+## Event
+
+| 名称              | 说明       | 参数                       |
+|-----------------|----------|--------------------------|
+| `search`       | 提交搜索     | `(formData: any) => {}`               |
+| `reset`        | 重置搜索     | `(formData: any) => {}`  |
+| `fold`        | 折叠、展开时触发 | `(state: boolean) => {}` |
+
 ## Slot
 
 | 名称              | 说明                                   | 参数 |
@@ -65,7 +73,6 @@
 | `beforeActions`        | 在`操作按钮`前面插入内容插槽                      | -  |
 | `afterActions`        | 在`操作按钮`后面追加内容插槽                      | -  |
 
-
 ## Expose
 | 名称                | 说明                 | 参数                    | 返回值                   |
 |-------------------|--------------------|-----------------------|-----------------------|