el-plus 0.0.87 → 0.0.88

package/dist/index.full.mjs

@@ -1,4 +1,4 @@
-/*! ElPlus v0.0.87 */
+/*! ElPlus v0.0.88 */
 
 import { useAttrs, getCurrentInstance, inject, provide, ref, nextTick, defineComponent, computed, createVNode, Fragment, withDirectives, resolveComponent, mergeProps, resolveDirective, useTemplateRef, reactive, onBeforeUpdate, createTextVNode, h, mergeModels, useModel, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createCommentVNode, withCtx, renderSlot, renderList, createBlock, vShow, toDisplayString, useSlots, watch, onMounted, createSlots, normalizeProps, guardReactiveProps, markRaw, Transition, shallowReactive, isVNode, render, createElementVNode, toRaw } from 'vue';
 import { buttonProps, useLocale as useLocale$1, ElLoading, ElMessage, ElMessageBox, formProps as formProps$1, formEmits as formEmits$1, ElTooltip, formItemProps as formItemProps$1, ElFormItem, ElForm, ElRow, ElCol, inputProps as inputProps$1, inputEmits as inputEmits$1, configProviderContextKey, ElConfigProvider, ElDialog, ElButton, ElTable, ElIcon, selectProps as selectProps$1, selectEmits as selectEmits$1, ElPageHeader, datePickerProps, linkProps as linkProps$1, ElSkeleton } from 'element-plus';
@@ -4084,7 +4084,7 @@ const uniVueProps = {
   // 组件类型 bpm、 address
 };
 
-const useUniVue = (props, emit) => {
+const useUniVue = (props, _emit) => {
   const uniVue = useTemplateRef("uniVue");
   const { type } = props;
   const loading = ref(true);
@@ -4195,7 +4195,7 @@ const useUniVue = (props, emit) => {
     const cssPromises = [];
     if (!isBpm) {
       cssPromises.push(
-        http.request("/element-ui.css", {
+        http.request("/index.css", {
           responseReturn: "raw",
           baseURL: ""
         }).then((res) => res.data)
@@ -4230,6 +4230,12 @@ const useUniVue = (props, emit) => {
         const style = document.createElement("style");
         style.textContent = css;
         shadowRoot.appendChild(style);
+        if (isAddress && !document.querySelector("style[data-hx-address-style]")) {
+          const headStyle = document.createElement("style");
+          headStyle.textContent = css;
+          headStyle.setAttribute("data-hx-address-style", "true");
+          document.head.appendChild(headStyle);
+        }
       } catch (error) {
         console.log(error);
       } finally {
@@ -4237,55 +4243,55 @@ const useUniVue = (props, emit) => {
       }
     }
     shadowRoot.appendChild(container);
-    console.log(prepareVueAttributes());
-    const baseEvents = {
-      ...prepareVueAttributes().on,
-      "input": (newVal) => {
-        console.log(newVal, "input", props.name);
-        emit("update:modelValue", newVal);
-      },
-      "update:dialogFormData": (newVal) => {
-        console.log(newVal, "update:dialogFormData");
-        emit("update:dialogFormData", newVal);
-      },
-      "update:visible": (newVal) => {
-        console.log(newVal, "update:visible");
-        emit("update:visible", newVal);
-      }
-    };
     instance = new Vue2({
       el: container,
       // @ts-expect-error 缺少类型定义
       router: new VueRouter3(),
-      render: (h) => h(props.name, {
-        props: {
-          ...prepareVueAttributes().props
-        },
-        on: baseEvents
-      })
+      render: (h) => {
+        const { on: vue2Events, props: vue2Props } = prepareVueAttributes();
+        return h(props.name, {
+          props: vue2Props,
+          on: vue2Events
+        });
+      }
     });
   };
+  const updateVue2Instance = () => {
+    if (!instance) return;
+    const child = instance.$children[0];
+    if (child) {
+      const { props: vue2Props } = prepareVueAttributes();
+      Object.assign(child.$options.propsData, vue2Props);
+      if (child._props) {
+        Object.keys(vue2Props).forEach((key) => {
+          const newValue = vue2Props[key];
+          const oldValue = child._props[key];
+          if (newValue === oldValue && typeof newValue === "object" && newValue !== null) {
+            const temp = {};
+            child._props[key] = temp;
+          }
+          child._props[key] = newValue;
+        });
+      }
+      child.$forceUpdate();
+    }
+    instance.$forceUpdate();
+  };
   Object.keys(attrs).forEach((key) => {
-    console.log(key, 8);
     if (!key.startsWith("on")) {
       watch(
         () => attrs[key],
-        (newVal) => {
+        () => {
+          console.log(key, "key");
           nextTick(() => {
             try {
-              console.log(props.name, newVal, "watch", key, instance);
-              let vue2Prop = key;
-              if (key === "modelValue") {
-                vue2Prop = "value";
-              }
-              instance.$children[0][vue2Prop] = newVal;
+              updateVue2Instance();
             } catch (e) {
             }
           });
         },
         {
-          deep: true,
-          immediate: true
+          deep: true
         }
       );
     }
@@ -4305,12 +4311,10 @@ var _sfc_main$1 = /* @__PURE__ */ defineComponent({
   },
   __name: "uni-vue",
   props: uniVueProps,
-  emits: ["update:modelValue", "update:dialogFormData", "update:visible"],
   setup(__props, { emit: __emit }) {
     const bem = createNameSpace("uni-vue");
     const props = __props;
-    const emit = __emit;
-    const { loading } = useUniVue(props, emit);
+    const { loading } = useUniVue(props);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(unref(ElSkeleton), {
@@ -4461,7 +4465,7 @@ var components = [
   EpFooterInfo
 ];
 
-var version = "0.0.87";
+var version = "0.0.88";
 
 var globalProperties = {
   install(app) {

package/docs/components/buttons.md

@@ -14,19 +14,55 @@ const buttons = [
   {
     name: '新增',
     prop: 'add',
-    type: 'primary',
-    onClick: () => {},
+    onClick: () => {
+      // 新增逻辑
+    },
   },
   {
     name: '删除',
     prop: 'delete',
-    type: 'danger',
-    onClick: () => {},
+    onClick: () => {
+      // 删除逻辑
+    },
   },
 ]
 </script>
 ```
 
+## 在 Form 中使用
+
+```tsx
+const formItemList = ref<FormProps['formItemList']>([
+  {
+    col: 24,
+    type: 'EpButtons',
+    props: {
+      list: [
+        {
+          name: '提交审批',
+          type: 'primary',
+          onClick: () => {
+            // 提交审批逻辑
+          },
+        },
+        {
+          name: '取消审批',
+          onClick: () => {
+            // 取消审批逻辑
+          },
+        },
+        {
+          name: '作废',
+          onClick: () => {
+            // 作废逻辑
+          },
+        },
+      ],
+    },
+  },
+])
+```
+
 ## Props
 
 | 属性 | 说明 | 类型 | 默认值 |
@@ -38,18 +74,19 @@ const buttons = [
 
 ## ButtonProps 配置
 
-| 属性 | 说明 | 类型 |
-|------|------|------|
-| name | 按钮文本 | `string` |
-| prop | 唯一标识 | `string` |
-| type | 按钮类型 | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` |
-| plain | 朴素按钮 | `boolean` |
-| disabled | 是否禁用 | `boolean \| () => boolean` |
-| visible | 是否显示 | `boolean \| () => boolean` |
-| permission | 权限标识 | `string` |
-| confirm | 是否需要确认 | `boolean` |
-| confirmText | 确认提示文本 | `string` |
-| onClick | 点击回调 | `(e: MouseEvent \| TableScope) => void` |
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| name | 按钮文本 | `string` | - |
+| prop | 唯一标识 | `string` | - |
+| type | 按钮类型 | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | - |
+| plain | 朴素按钮 | `boolean` | `false` |
+| disabled | 是否禁用 | `boolean \| () => boolean` | `false` |
+| show | 是否显示（支持函数） | `boolean \| () => boolean` | `true` |
+| hide | 是否隐藏（支持函数） | `boolean \| () => boolean` | `false` |
+| permission | 权限标识 | `string` | - |
+| confirm | 是否需要确认 | `boolean` | `false` |
+| confirmText | 确认提示文本 | `string` | `'确定要${name}吗？'` |
+| onClick | 点击回调 | `(e: MouseEvent \| TableScope) => void` | - |
 
 ## 带确认弹窗
 
@@ -58,9 +95,7 @@ const buttons = [
   {
     name: '删除',
     prop: 'delete',
-    type: 'danger',
     confirm: true,
-    confirmText: '确定要删除吗？',
     onClick: () => {
       // 删除逻辑
     },
@@ -68,6 +103,18 @@ const buttons = [
 ]
 ```
 
+> **⚠️ 注意：需要确认弹窗时，必须使用 `confirm: true` 属性，禁止手动编写 `ElMessageBox.confirm`**
+>
+> **正确做法**：
+> ```tsx
+> { name: '取消审批', confirm: true, onClick: () => { ElMessage.success('成功') } }
+> ```
+>
+> **错误做法**：
+> ```tsx
+> { name: '取消审批', onClick: () => { ElMessageBox.confirm(...).then(...) } }
+> ```
+
 ## 权限控制
 
 ```tsx
@@ -101,7 +148,7 @@ const buttons = [
   {
     name: '审核',
     prop: 'audit',
-    visible: () => formData.status === 'pending',
+    show: () => formData.status === 'pending',
     onClick: () => {},
   },
 ]

package/docs/components/form.md

@@ -42,10 +42,28 @@ const formItemList = ref<FormProps['formItemList']>([
 ```
 ## 表单数据
 
-- 表单数据：不需要预定义所有字段，reactive({}) 即可
-- 仅以下类型需要预定义：
-  - dateRange：需定义开始/结束字段
-  - 表格数组、附件数组等复杂类型
+**不需要预定义表单字段**，`reactive({})` 即可，组件会自动管理字段值。
+
+```typescript
+// ✅ 正确：无需预定义字段
+const formData = reactive({})
+
+// ❌ 错误：不需要提前声明所有字段
+const formData = reactive({
+  name: '',
+  status: '',
+  applicant: '',
+  // ...
+})
+```
+
+**仅需预定义以下特殊字段：**
+
+| 场景 | 需预定义的字段 | 示例 |
+|------|---------------|------|
+| 日期范围 | 开始和结束两个独立字段 | `orderDateStart: ''`, `orderDateEnd: ''` |
+| 表格数组 | 空数组 | `detailList: []` |
+| 附件数组 | 空数组 | `fileList: []` |
 
 ## Props
 
@@ -72,7 +90,8 @@ const formItemList = ref<FormProps['formItemList']>([
 | label | 标签文本 | `string` | - |
 | col | 占用列数 | `number` | - |
 | disabled | 是否禁用 | `boolean` | `false` |
-| visible | 是否显示 | `boolean` | `true` |
+| show | 是否显示（支持函数） | `boolean \| () => boolean` | `true` |
+| hide | 是否隐藏（支持函数） | `boolean \| () => boolean` | `false` |
 | required | 是否必填 | `boolean` | `false` |
 | rules | 校验规则 | `FormItemRule[]` | - |
 | props | 传递给组件的属性 | `object` | - |

package/docs/components/header.md

@@ -92,3 +92,26 @@ const attachmentProps: HeaderProps['attachmentProps'] = {
 }
 </script>
 ```
+
+## 在 Form 中使用
+
+EpHeader 也可以作为表单项放入 EpForm 中，作为表单的一部分：
+
+```tsx
+const formItemList = ref<FormProps['formItemList']>([
+  {
+    col: 24,
+    type: 'EpHeader',
+    props: {
+      buttons: [
+        { name: '提交审批', type: 'primary', onClick: () => {} },
+        { name: '取消审批', onClick: () => {} },
+        { name: '作废', onClick: () => {} },
+      ],
+      isShowAttachmentButton: true,
+      fileList: formData.fileList,
+    },
+  },
+  // 其他表单项...
+])
+```

package/docs/components/search-list-page.md

@@ -57,7 +57,7 @@ const handleAdd = () => {}
 | reqParams | URL 参数 | `object` | `{}` |
 | reqBefore | 请求前处理 | `(reqData) => reqData` | - |
 | reqAfter | 响应后处理 | `(res) => data` | - |
-| formData | 表单数据 | `object` | `{}` |
+| formData | 表单数据，参考 [EpForm 表单数据说明](./form.md#表单数据) | `object` | `{}` |
 | formItemList | 搜索表单配置 | [`FormItemProps[]`](./form.md#formitemprops-配置) | `[]` |
 | columns | 表格列配置（有customColumnModule就不需要定义列） | [`TableColumn[]`](./table.md#tablecolumn-配置) | `[]` |
 | leftButtons | 左侧按钮 | [`ButtonProps[]`](./buttons.md#buttonprops-配置) | `[]` |
@@ -77,5 +77,15 @@ const handleAdd = () => {}
 | buttonsProps | 按钮组额外属性 | `object` | - |
 | name | 权限前缀 | `string` | - |
 | customColumnModule | 自定义列模块 | `string \| number` | - |
+
+::: warning 互斥关系
+`customColumnModule` 和以下配置是**互斥**的：
+- `columns`：设置了 `customColumnModule` 后会忽略 `columns`
+- `leftButtons` 中的"自定义列设置"按钮：组件会自动内置该按钮
+
+**正确用法**：
+- 启用自定义列：`customColumnModule: "moduleName"`（无需配 columns 和自定义列按钮）
+- 固定列模式：不设置 `customColumnModule`，使用 `columns` 配置
+:::
 | customColumnApi | 自定义列接口 | `string` | - |
 | customColumnSaveApi | 自定义列保存接口 | `string` | - |

package/docs/components/table.md

@@ -78,7 +78,8 @@ const actionButtons = [
 | headerRender | 自定义表头渲染 | `() => VNode` |
 | required | 是否必填 | `boolean \| () => boolean` |
 | disabled | 是否禁用 | `boolean \| (scope) => boolean` |
-| visible | 是否显示 | `boolean \| () => boolean` |
+| show | 是否显示（支持函数） | `boolean \| () => boolean` |
+| hide | 是否隐藏（支持函数） | `boolean \| () => boolean` |
 | filter | 显示筛选 | `boolean` |
 | editable | 可批量编辑 | `boolean` |
 

package/docs/components/use-form-dialog.md

@@ -13,14 +13,13 @@
 <script setup lang="tsx">
 import { useFormDialog } from 'el-plus'
 
-const formItemList = [
-  { prop: 'name', label: '姓名', required: true },
-  { prop: 'age', label: '年龄' },
-]
 
 const FormDialog = useFormDialog({
   title: '用户信息',
-  formItemList,
+  formItemList:[
+    { prop: 'name', label: '姓名', required: true },
+    { prop: 'age', label: '年龄' },
+  ],
   dialogProps: {
     destroyOnClose: true, // 关闭时销毁对话框内容
   },

package/docs/hooks/use-navigation.md

@@ -0,0 +1,131 @@
+# useNavigation 导航
+
+提供路由导航、标签页管理和页面模式控制等功能。
+
+## 基本用法
+
+```vue
+<template>
+  <div>
+    <el-button @click="handleEdit">编辑</el-button>
+    <el-button @click="handleGoto">跳转新页面</el-button>
+    <el-button @click="handleClose">关闭当前页</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNavigation } from 'el-plus'
+
+const { $goto, $closeTag, mode, setMode, isBrowse, isEdit, isAdd } = useNavigation({
+  onModeChange: (newMode) => {
+    console.log('模式变化:', newMode)
+  }
+})
+
+// 编辑模式
+const handleEdit = () => {
+  setMode('edit')
+}
+
+// 跳转到新页面
+const handleGoto = () => {
+  $goto({
+    name: 'detail',
+    query: { id: '123' }
+  })
+}
+
+// 关闭当前标签页
+const handleClose = () => {
+  $closeTag()
+}
+</script>
+```
+
+## 参数
+
+### Config 配置
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| onModeChange | 模式变化时的回调函数 | `(mode: PageMode) => void` | - |
+
+## 返回值
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| $goto | 打开新窗口或跳转路由 | `(config: NavigationConfig) => void` |
+| $closeTag | 关闭当前标签页 | `() => void` |
+| mode | 当前页面模式 | `ComputedRef<PageMode>` |
+| isBrowse | 是否为浏览模式 | `ComputedRef<boolean>` |
+| isEdit | 是否为编辑模式 | `ComputedRef<boolean>` |
+| isAdd | 是否为新增模式 | `ComputedRef<boolean>` |
+| setMode | 设置页面模式 | `(mode: PageMode, callback?: (mode: PageMode) => void) => void` |
+
+## 类型定义
+
+### PageMode
+
+```ts
+type PageMode = 'add' | 'edit' | 'browse'
+```
+
+### NavigationConfig
+
+```ts
+interface NavigationConfig {
+  id?: number | string    // 菜单id
+  name?: string           // 路由模块name，适用于内部跳转
+  title?: string          // 菜单名称，适用于传外部url跳转
+  url?: string            // 菜单url
+  query?: Record<string, any>  // url参数
+}
+```
+
+## 功能说明
+
+### $goto 路由跳转
+
+支持两种跳转方式：
+
+**内部路由跳转**
+
+```ts
+$goto({
+  name: 'userDetail',
+  query: { id: '123', mode: 'browse' }
+})
+```
+
+**外部URL跳转**
+
+```ts
+$goto({
+  url: 'https://example.com',
+  title: '外部链接'
+})
+```
+
+### setMode 模式切换
+
+用于详情页的模式切换，自动更新URL参数并触发回调。
+
+```ts
+// 切换到编辑模式
+setMode('edit')
+
+// 切换并执行回调
+setMode('edit', (mode) => {
+  console.log('已切换到编辑模式')
+})
+```
+
+### $closeTag 关闭标签页
+
+关闭当前标签页并自动切换到前一个标签页，需要在支持标签页管理的环境中使用。
+
+## 注意事项
+
+- 该 hook 依赖 `vue-router`，必须在路由环境中使用
+- `$closeTag` 方法依赖父窗口的标签页管理功能
+- `setMode` 会修改URL的query参数，刷新页面后模式会保持

package/docs/hooks/use-utils.md

@@ -0,0 +1,144 @@
+# useUtils 工具函数
+
+提供常用的工具函数集合，包括时间处理、文件操作、Cookie管理等。
+
+## 基本用法
+
+```vue
+<script setup lang="ts">
+import { useUtils } from 'el-plus'
+
+const {
+  getUnifyTime,
+  dayjs,
+  importFile,
+  downloadFile,
+  previewFile,
+  Cookies
+} = useUtils()
+
+// 时间格式化
+const time = getUnifyTime('2024-01-01')
+const formatted = dayjs().format('YYYY-MM-DD HH:mm:ss')
+
+// 文件导入
+importFile().then(file => {
+  console.log('导入的文件:', file)
+})
+
+// 文件下载
+downloadFile({ url: '/api/download', filename: 'test.xlsx' })
+
+// 文件预览
+previewFile('/files/document.pdf')
+
+// Cookie 操作
+Cookies.set('token', 'xxx')
+const token = Cookies.get('token')
+</script>
+```
+
+## 返回值
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| getUnifyTime | 统一时间处理函数 | `(time: string \| number \| Date) => string` |
+| dayjs | Day.js 实例 | `typeof dayjs` |
+| importFile | 文件导入函数 | `() => Promise<File>` |
+| downloadFile | 文件下载函数 | `(config: DownloadConfig) => void` |
+| previewFile | 文件预览函数 | `(url: string) => void` |
+| Cookies | Cookie 操作对象 | `CookiesStatic` |
+
+## 功能说明
+
+### getUnifyTime 时间处理
+
+统一时间格式处理函数。
+
+```ts
+// 时间戳转格式化字符串
+const time1 = getUnifyTime(1609459200000)
+
+// Date对象转格式化字符串
+const time2 = getUnifyTime(new Date())
+
+// 字符串转格式化字符串
+const time3 = getUnifyTime('2024-01-01')
+```
+
+### dayjs 日期处理
+
+提供 Day.js 的所有功能，用于日期格式化和计算。
+
+```ts
+// 格式化当前时间
+const now = dayjs().format('YYYY-MM-DD HH:mm:ss')
+
+// 日期计算
+const tomorrow = dayjs().add(1, 'day')
+const lastMonth = dayjs().subtract(1, 'month')
+
+// 日期比较
+const isBefore = dayjs('2024-01-01').isBefore(dayjs())
+```
+
+### importFile 文件导入
+
+打开文件选择器，返回选择的文件对象。
+
+```ts
+importFile().then(file => {
+  console.log('文件名:', file.name)
+  console.log('文件大小:', file.size)
+  console.log('文件类型:', file.type)
+})
+```
+
+### downloadFile 文件下载
+
+触发文件下载。
+
+```ts
+downloadFile({
+  url: '/api/export',
+  filename: '导出数据.xlsx',
+  params: { id: '123' }  // 可选的请求参数
+})
+```
+
+### previewFile 文件预览
+
+在新窗口中预览文件。
+
+```ts
+// PDF预览
+previewFile('/files/document.pdf')
+
+// 图片预览
+previewFile('/images/photo.jpg')
+```
+
+### Cookies Cookie管理
+
+提供 Cookie 的增删改查操作。
+
+```ts
+// 设置 Cookie
+Cookies.set('token', 'xxx', { expires: 7 }) // 7天后过期
+
+// 获取 Cookie
+const token = Cookies.get('token')
+
+// 删除 Cookie
+Cookies.remove('token')
+
+// 获取所有 Cookie
+const allCookies = Cookies.get()
+```
+
+## 注意事项
+
+- `importFile` 会打开系统文件选择器
+- `downloadFile` 支持跨域下载，会自动处理 blob 响应
+- `previewFile` 会打开新窗口或标签页
+- `Cookies` 基于 js-cookie 库，支持所有其配置选项