el-plus 0.0.87 → 0.0.89

package/dist/index.full.mjs

@@ -1,4 +1,4 @@
-/*! ElPlus v0.0.87 */
+/*! ElPlus v0.0.89 */
 
 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';
@@ -14,8 +14,6 @@ import { merge, cloneDeep } from 'lodash-unified';
 import { useToggle } from '@vueuse/core';
 import { useRouter, useRoute } from 'vue-router';
 import { encode } from 'js-base64';
-import Vue2 from 'vue2';
-import VueRouter3 from 'vue-router3';
 import dayjs from 'dayjs';
 
 const apiProps = {
@@ -4084,7 +4082,19 @@ const uniVueProps = {
   // 组件类型 bpm、 address
 };
 
-const useUniVue = (props, emit) => {
+let Vue2 = null;
+let VueRouter3 = null;
+const loadModules = async () => {
+  if (!Vue2) {
+    const vue2Module = await import('vue2');
+    Vue2 = vue2Module.default;
+  }
+  if (!VueRouter3) {
+    const routerModule = await import('vue-router3');
+    VueRouter3 = routerModule.default;
+  }
+};
+const useUniVue = (props, _emit) => {
   const uniVue = useTemplateRef("uniVue");
   const { type } = props;
   const loading = ref(true);
@@ -4109,7 +4119,6 @@ const useUniVue = (props, emit) => {
       }
     }
   };
-  setupWindow();
   const prepareVueAttributes = () => {
     const events = {};
     const _props = {};
@@ -4195,7 +4204,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)
@@ -4217,6 +4226,8 @@ const useUniVue = (props, emit) => {
     if (instance) {
       return;
     }
+    await loadModules();
+    setupWindow();
     const el = uniVue.value;
     const shadowRoot = el.attachShadow({ mode: "open" });
     const container = document.createElement("div");
@@ -4230,6 +4241,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 +4254,54 @@ 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 +4321,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 +4475,7 @@ var components = [
   EpFooterInfo
 ];
 
-var version = "0.0.87";
+var version = "0.0.89";
 
 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参数，刷新页面后模式会保持