el-plus 0.0.113 → 0.0.115

package/docs/overview.md

@@ -1,99 +1,99 @@
-# 组件库总览
-
-本文档是 el-plus 组件库的总入口，包含所有可用的页面类型和组件概览。
-
-## 页面类型
-
-本组件库支持两种页面类型，可自由组合组件实现业务需求：
-
-| 页面类型 | 说明 | 文档 | 核心组件 |
-|---------|------|------|---------|
-| **列表页** | 包含搜索表单、数据表格、操作按钮等 | [pages/list.md](./pages/list.md) | EpSearchListPage |
-| **详情页** | 包含表单、明细表格、附件等 | [pages/detail.md](./pages/detail.md) | EpForm |
-
-## 组件分类
-
-### 页面容器组件
-
-| 组件 | 说明 | 文档 |
-|------|------|------|
-| **EpSearchListPage** | 列表页容器，集成搜索表单和数据表格 | [search-list-page.md](./components/search-list-page.md) |
-| **EpForm** | 表单容器，支持栅格布局和组件自由组合 | [form.md](./components/form.md) |
-
-### 布局组件
-
-| 组件 | 说明 | 文档 |
-|------|------|------|
-| **EpHeader** | 顶部操作栏，用于放置页面级操作按钮 | [header.md](./components/header.md) |
-| **EpTitle** | 标题分组，用于表单内容分组展示 | [title.md](./components/title.md) |
-
-### 弹窗组件
-
-| 组件 | 说明 | 文档 |
-|------|------|------|
-| **EpDialog** | 对话框容器 | [dialog.md](./components/dialog.md) |
-| **useFormDialog** | 表单对话框 Hook，快速实现表单弹窗 | [use-form-dialog.md](./components/use-form-dialog.md) |
-| **useConfirmDialog** | 确认对话框 Hook，用于二次确认操作 | [use-confirm-dialog.md](./components/use-confirm-dialog.md) |
-| **useChooseDialog** | 选择对话框 Hook，用于弹窗选择数据 | [use-choose-dialog.md](./components/use-choose-dialog.md) |
-
-### 表单组件
-
-| 组件 | 说明 | 文档 |
-|------|------|------|
-| **EpInput** | 输入框 | [input.md](./components/input.md) |
-| **EpSelect** | 下拉选择框 | [select.md](./components/select.md) |
-| **EpDatePickerRange** | 日期范围选择 | [date-picker-range.md](./components/date-picker-range.md) |
-
-### 数据展示组件
-
-| 组件 | 说明 | 文档 |
-|------|------|------|
-| **EpTable** | 数据表格 | [table.md](./components/table.md) |
-| **EpCustomColumn** | 自定义列配置，用于表格列的个性化设置 | [custom-column.md](./components/custom-column.md) |
-| **EpLink** | 链接，用于表格内链接跳转 | [link.md](./components/link.md) |
-| **EpFooterInfo** | 底部信息展示 | [footer-info.md](./components/footer-info.md) |
-
-### 操作组件
-
-| 组件 | 说明 | 文档 |
-|------|------|------|
-| **EpButtons** | 按钮组，支持配置多个操作按钮 | [buttons.md](./components/buttons.md) |
-
-### 其他组件
-
-| 组件 | 说明 | 文档 |
-|------|------|------|
-| **EpAttachment** | 附件管理，支持上传、预览、下载 | [attachment.md](./components/attachment.md) |
-
-### Hooks 工具
-
-| Hook | 说明 | 文档 |
-|------|------|------|
-| **useNavigation** | 导航工具，提供路由跳转、标签页管理、模式控制 | [use-navigation.md](./hooks/use-navigation.md) |
-| **useUtils** | 工具函数集合，包含时间处理、文件操作、Cookie管理 | [use-utils.md](./hooks/use-utils.md) |
-
-## 组件组合示例
-
-所有组件都可以在 EpForm 中自由组合：
-
-```typescript
-const formItemList = [
-  { col: 24, type: 'EpHeader', props: { /* ... */ } },
-  { col: 24, type: 'EpTitle', props: { title: '基本信息' } },
-  { type: 'EpInput', props: { /* ... */ } },
-  { type: 'EpSelect', props: { /* ... */ } },
-  { col: 24, type: 'EpTable', props: { /* ... */ } },
-]
-```
-
-## 路由配置
-
-页面生成后需配置路由，参考：[pages/router.md](./pages/router.md)
-
-## 快速开始
-
-根据你的需求选择：
-
-1. **生成列表页** → 阅读 [pages/list.md](./pages/list.md)
-2. **生成详情页** → 阅读 [pages/detail.md](./pages/detail.md)
-3. **了解某个组件** → 查看上方对应组件文档
+# 组件库总览
+
+本文档是 el-plus 组件库的总入口，包含所有可用的页面类型和组件概览。
+
+## 页面类型
+
+本组件库支持两种页面类型，可自由组合组件实现业务需求：
+
+| 页面类型 | 说明 | 文档 | 核心组件 |
+|---------|------|------|---------|
+| **列表页** | 包含搜索表单、数据表格、操作按钮等 | [pages/list.md](./pages/list.md) | EpSearchListPage |
+| **详情页** | 包含表单、明细表格、附件等 | [pages/detail.md](./pages/detail.md) | EpForm |
+
+## 组件分类
+
+### 页面容器组件
+
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| **EpSearchListPage** | 列表页容器，集成搜索表单和数据表格 | [search-list-page.md](./components/search-list-page.md) |
+| **EpForm** | 表单容器，支持栅格布局和组件自由组合 | [form.md](./components/form.md) |
+
+### 布局组件
+
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| **EpHeader** | 顶部操作栏，用于放置页面级操作按钮 | [header.md](./components/header.md) |
+| **EpTitle** | 标题分组，用于表单内容分组展示 | [title.md](./components/title.md) |
+
+### 弹窗组件
+
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| **EpDialog** | 对话框容器 | [dialog.md](./components/dialog.md) |
+| **useFormDialog** | 表单对话框 Hook，快速实现表单弹窗 | [use-form-dialog.md](./components/use-form-dialog.md) |
+| **useConfirmDialog** | 确认对话框 Hook，用于二次确认操作 | [use-confirm-dialog.md](./components/use-confirm-dialog.md) |
+| **useChooseDialog** | 选择对话框 Hook，用于弹窗选择数据 | [use-choose-dialog.md](./components/use-choose-dialog.md) |
+
+### 表单组件
+
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| **EpInput** | 输入框 | [input.md](./components/input.md) |
+| **EpSelect** | 下拉选择框 | [select.md](./components/select.md) |
+| **EpDatePickerRange** | 日期范围选择 | [date-picker-range.md](./components/date-picker-range.md) |
+
+### 数据展示组件
+
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| **EpTable** | 数据表格 | [table.md](./components/table.md) |
+| **EpCustomColumn** | 自定义列配置，用于表格列的个性化设置 | [custom-column.md](./components/custom-column.md) |
+| **EpLink** | 链接，用于表格内链接跳转 | [link.md](./components/link.md) |
+| **EpFooterInfo** | 底部信息展示 | [footer-info.md](./components/footer-info.md) |
+
+### 操作组件
+
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| **EpButtons** | 按钮组，支持配置多个操作按钮 | [buttons.md](./components/buttons.md) |
+
+### 其他组件
+
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| **EpAttachment** | 附件管理，支持上传、预览、下载 | [attachment.md](./components/attachment.md) |
+
+### Hooks 工具
+
+| Hook | 说明 | 文档 |
+|------|------|------|
+| **useNavigation** | 导航工具，提供路由跳转、标签页管理、模式控制 | [use-navigation.md](./hooks/use-navigation.md) |
+| **useUtils** | 工具函数集合，包含时间处理、文件操作、Cookie管理 | [use-utils.md](./hooks/use-utils.md) |
+
+## 组件组合示例
+
+所有组件都可以在 EpForm 中自由组合：
+
+```typescript
+const formItemList = [
+  { col: 24, type: 'EpHeader', props: { /* ... */ } },
+  { col: 24, type: 'EpTitle', props: { title: '基本信息' } },
+  { type: 'EpInput', props: { /* ... */ } },
+  { type: 'EpSelect', props: { /* ... */ } },
+  { col: 24, type: 'EpTable', props: { /* ... */ } },
+]
+```
+
+## 路由配置
+
+页面生成后需配置路由，参考：[pages/router.md](./pages/router.md)
+
+## 快速开始
+
+根据你的需求选择：
+
+1. **生成列表页** → 阅读 [pages/list.md](./pages/list.md)
+2. **生成详情页** → 阅读 [pages/detail.md](./pages/detail.md)
+3. **了解某个组件** → 查看上方对应组件文档

package/docs/pages/detail.md

@@ -1,66 +1,66 @@
-# 详情页面
-
-详情页面用于展示和编辑单条数据，组件自由组合。
-
-## 页面结构
-
-详情页无固定结构，根据业务需求自由组合以下组件：
-> 查看所有可用组件：[组件文档索引](../overview.md)
-
-## 完整示例
-
-```vue
-<template>    
-  <EpForm
-    ref="epForm"
-    :formItemList="formItemList"
-    v-model="formData"
-    labelPosition="left"
-  ></EpForm>
-</template>
-
-<script setup lang="tsx">
-import type { FormProps, HeaderProps } from 'el-plus'
-import { useNavigation } from 'el-plus'
-import { reactive, ref, computed, useTemplateRef } from 'vue'
-import { useRoute } from 'vue-router'
-
-defineOptions({
-  name: 'DemoDetail'
-})
-
-const route = useRoute()
-const epForm = useTemplateRef('epForm')
-const { isEdit } = useNavigation()
-const id = route.query.id
-
-
-const formData = reactive({
-  detailList: [] as Record<string, any>[],  // 明细表格
-  fileList: [] as Record<string, any>[],    // 附件列表
-})
-
-// 表单配置 - 组件自由组合，参考各组件文档
-const formItemList = ref<FormProps['formItemList']>([
-  // 组件类似下面这样自由组合
-  { col: 24, type: 'EpHeader', props: { buttons: [
-    { name: '提交审批', type: 'primary', onClick: () => {} }
-  ] } },
-  { col: 24, type: 'EpTitle', props: { title: '基本信息' } },
-])
-
-// 保存
-const handleSave = async () => {
-  const valid = await epForm.value?.validate()
-  if (valid) {
-    // TODO: 调用保存接口
-  }
-}
-
-// 加载数据
-if (isEdit.value && id) {
-  // TODO: 调用接口获取详情
-}
-</script>
-```
-
+# 详情页面
+
+详情页面用于展示和编辑单条数据，组件自由组合。
+
+## 页面结构
+
+详情页无固定结构，根据业务需求自由组合以下组件：
+> 查看所有可用组件：[组件文档索引](../overview.md)
+
+## 完整示例
+
+```vue
+<template>    
+  <EpForm
+    ref="epForm"
+    :formItemList="formItemList"
+    v-model="formData"
+    labelPosition="left"
+  ></EpForm>
+</template>
+
+<script setup lang="tsx">
+import type { FormProps, HeaderProps } from 'el-plus'
+import { useNavigation } from 'el-plus'
+import { reactive, ref, computed, useTemplateRef } from 'vue'
+import { useRoute } from 'vue-router'
+
+defineOptions({
+  name: 'DemoDetail'
+})
+
+const route = useRoute()
+const epForm = useTemplateRef('epForm')
+const { isEdit } = useNavigation()
+const id = route.query.id
+
+
+const formData = reactive({
+  detailList: [] as Record<string, any>[],  // 明细表格
+  fileList: [] as Record<string, any>[],    // 附件列表
+})
+
+// 表单配置 - 组件自由组合，参考各组件文档
+const formItemList = ref<FormProps['formItemList']>([
+  // 组件类似下面这样自由组合
+  { col: 24, type: 'EpHeader', props: { buttons: [
+    { name: '提交审批', type: 'primary', onClick: () => {} }
+  ] } },
+  { col: 24, type: 'EpTitle', props: { title: '基本信息' } },
+])
+
+// 保存
+const handleSave = async () => {
+  const valid = await epForm.value?.validate()
+  if (valid) {
+    // TODO: 调用保存接口
+  }
+}
+
+// 加载数据
+if (isEdit.value && id) {
+  // TODO: 调用接口获取详情
+}
+</script>
+```
+

package/docs/pages/list.md

@@ -1,74 +1,74 @@
-# 列表页面
-
-列表页面是最常见的业务页面类型，使用 EpSearchListPage 组件实现。
-
-## 页面结构
-
-- **EpSearchListPage**: 列表页容器组件，集成搜索表单和数据表格
-- 组件自由组合，参考各组件文档配置
-
-## 完整示例
-
-```vue
-<template>
-  <EpSearchListPage
-    :form-item-list="formItemList"
-    :form-data="formData"
-    :columns="columns"
-    :left-buttons="leftButtons"
-    api="/api/your-api/page"
-    :add="handleAdd"
-    show-selection-col
-    :action-buttons="actionButtons"
-  />
-</template>
-
-<script setup lang="tsx">
-import { ref, reactive } from 'vue'
-import { useNavigation } from 'el-plus'
-import type { SearchListPageProps } from 'el-plus'
-
-defineOptions({
-  name: 'DemoList'
-})
-
-const { $goto } = useNavigation()
-
-const formData = reactive({
-  orderDateStart: '',
-  orderDateEnd: '',
-})
-
-// 搜索表单配置 - 组件自由组合
-const formItemList = ref<SearchListPageProps['formItemList']>([
-  // 参考EpForm和各组件文档配置
-])
-
-// 表格列配置
-const columns:SearchListPageProps['columns'] = [
-  // 参考 EpTable 文档
-]
-
-// 左侧按钮配置
-const leftButtons:SearchListPageProps['leftButtons']=[
-  // 按钮配置
-]
-
-// 行操作按钮
-const actionButtons:SearchListPageProps['actionButtons']=[
-  // 操作按钮配置
-]
-
-// 新增
-const handleAdd = () => {
-  $goto({
-    name: 'DemoDetail',
-    query: { mode: 'add' }
-  })
-}
-</script>
-```
-
-## 组件文档
-
-> 查看所有可用组件：[组件文档索引](../overview.md)
+# 列表页面
+
+列表页面是最常见的业务页面类型，使用 EpSearchListPage 组件实现。
+
+## 页面结构
+
+- **EpSearchListPage**: 列表页容器组件，集成搜索表单和数据表格
+- 组件自由组合，参考各组件文档配置
+
+## 完整示例
+
+```vue
+<template>
+  <EpSearchListPage
+    :form-item-list="formItemList"
+    :form-data="formData"
+    :columns="columns"
+    :left-buttons="leftButtons"
+    api="/api/your-api/page"
+    :add="handleAdd"
+    show-selection-col
+    :action-buttons="actionButtons"
+  />
+</template>
+
+<script setup lang="tsx">
+import { ref, reactive } from 'vue'
+import { useNavigation } from 'el-plus'
+import type { SearchListPageProps } from 'el-plus'
+
+defineOptions({
+  name: 'DemoList'
+})
+
+const { $goto } = useNavigation()
+
+const formData = reactive({
+  orderDateStart: '',
+  orderDateEnd: '',
+})
+
+// 搜索表单配置 - 组件自由组合
+const formItemList = ref<SearchListPageProps['formItemList']>([
+  // 参考EpForm和各组件文档配置
+])
+
+// 表格列配置
+const columns:SearchListPageProps['columns'] = [
+  // 参考 EpTable 文档
+]
+
+// 左侧按钮配置
+const leftButtons:SearchListPageProps['leftButtons']=[
+  // 按钮配置
+]
+
+// 行操作按钮
+const actionButtons:SearchListPageProps['actionButtons']=[
+  // 操作按钮配置
+]
+
+// 新增
+const handleAdd = () => {
+  $goto({
+    name: 'DemoDetail',
+    query: { mode: 'add' }
+  })
+}
+</script>
+```
+
+## 组件文档
+
+> 查看所有可用组件：[组件文档索引](../overview.md)