From 36e7ca19a119a505d109e527f73c5e063156ccc4 Mon Sep 17 00:00:00 2001 From: Vben Date: Wed, 28 Aug 2024 22:26:35 +0800 Subject: [PATCH] perf: improve modal and drawer component documentation and fix known problems (#4264) * feat: improve modal and drawer component documentation and fix known problems * chore: update ci --- .github/labeler.yml | 16 +++ .github/release-drafter.yml | 2 +- .github/workflows/ci.yml | 6 +- .github/workflows/deploy.yml | 26 +++- .github/workflows/labeler.yml | 21 ++++ docs/.vitepress/config/zh.mts | 6 +- docs/src/components/common-ui/vben-drawer.md | 108 ++++++++++++++++ docs/src/components/common-ui/vben-modal.md | 115 ++++++++++++++---- docs/src/components/introduction.md | 2 +- .../demos/vben-drawer/auto-height/drawer.vue | 45 +++++++ .../demos/vben-drawer/auto-height/index.vue | 21 ++++ docs/src/demos/vben-drawer/basic/index.vue | 11 ++ docs/src/demos/vben-drawer/dynamic/drawer.vue | 26 ++++ docs/src/demos/vben-drawer/dynamic/index.vue | 30 +++++ docs/src/demos/vben-drawer/extra/drawer.vue | 8 ++ docs/src/demos/vben-drawer/extra/index.vue | 21 ++++ .../demos/vben-drawer/shared-data/drawer.vue | 26 ++++ .../demos/vben-drawer/shared-data/index.vue | 26 ++++ .../demos/vben-modal/auto-height/index.vue | 21 ++++ .../demos/vben-modal/auto-height/modal.vue | 45 +++++++ docs/src/demos/vben-modal/basic/index.vue | 4 +- docs/src/demos/vben-modal/draggable/index.vue | 21 ++++ docs/src/demos/vben-modal/draggable/modal.vue | 10 ++ docs/src/demos/vben-modal/dynamic/index.vue | 30 +++++ docs/src/demos/vben-modal/dynamic/modal.vue | 38 ++++++ docs/src/demos/vben-modal/extra/index.vue | 5 +- docs/src/demos/vben-modal/extra/modal.vue | 2 +- .../demos/vben-modal/shared-data/index.vue | 26 ++++ .../demos/vben-modal/shared-data/modal.vue | 26 ++++ docs/src/guide/introduction/quick-start.md | 18 ++- docs/src/guide/introduction/vben.md | 18 ++- docs/src/guide/introduction/why.md | 16 ++- .../eslint-config/src/configs/vue.ts | 4 - .../src/design-tokens/default/index.css | 2 +- .../ui-kit/popup-ui/src/drawer/drawer-api.ts | 7 +- .../ui-kit/popup-ui/src/drawer/drawer.vue | 21 +++- .../ui-kit/popup-ui/src/modal/modal-api.ts | 2 +- .../@core/ui-kit/popup-ui/src/modal/modal.ts | 6 +- .../@core/ui-kit/popup-ui/src/modal/modal.vue | 83 ++++++------- .../popup-ui/src/modal/use-modal-draggable.ts | 32 +---- .../src/components/spinner/loading.vue | 2 +- .../components/ui/dialog/DialogContent.vue | 2 +- .../common-ui/src/components/page/page.vue | 2 + .../ui/authentication/login-expired-modal.vue | 2 +- packages/stores/shim-pinia.d.ts | 2 +- packages/stores/src/modules/tabbar.ts | 1 - .../src/helpers/generate-routes-backend.ts | 2 +- playground/src/views/examples/doc-button.vue | 16 +++ .../examples/drawer/auto-height-demo.vue | 21 ++-- .../src/views/examples/drawer/base-demo.vue | 8 -- .../src/views/examples/drawer/index.vue | 7 +- .../views/examples/modal/auto-height-demo.vue | 24 ++-- .../src/views/examples/modal/base-demo.vue | 8 -- playground/src/views/examples/modal/index.vue | 8 +- 54 files changed, 882 insertions(+), 176 deletions(-) create mode 100644 .github/labeler.yml create mode 100644 .github/workflows/labeler.yml create mode 100644 docs/src/components/common-ui/vben-drawer.md create mode 100644 docs/src/demos/vben-drawer/auto-height/drawer.vue create mode 100644 docs/src/demos/vben-drawer/auto-height/index.vue create mode 100644 docs/src/demos/vben-drawer/basic/index.vue create mode 100644 docs/src/demos/vben-drawer/dynamic/drawer.vue create mode 100644 docs/src/demos/vben-drawer/dynamic/index.vue create mode 100644 docs/src/demos/vben-drawer/extra/drawer.vue create mode 100644 docs/src/demos/vben-drawer/extra/index.vue create mode 100644 docs/src/demos/vben-drawer/shared-data/drawer.vue create mode 100644 docs/src/demos/vben-drawer/shared-data/index.vue create mode 100644 docs/src/demos/vben-modal/auto-height/index.vue create mode 100644 docs/src/demos/vben-modal/auto-height/modal.vue create mode 100644 docs/src/demos/vben-modal/draggable/index.vue create mode 100644 docs/src/demos/vben-modal/draggable/modal.vue create mode 100644 docs/src/demos/vben-modal/dynamic/index.vue create mode 100644 docs/src/demos/vben-modal/dynamic/modal.vue create mode 100644 docs/src/demos/vben-modal/shared-data/index.vue create mode 100644 docs/src/demos/vben-modal/shared-data/modal.vue create mode 100644 playground/src/views/examples/doc-button.vue diff --git a/.github/labeler.yml b/.github/labeler.yml new file mode 100644 index 00000000..7cef0938 --- /dev/null +++ b/.github/labeler.yml @@ -0,0 +1,16 @@ +# Add 'feature' label to any PR where the head branch name starts with `feature` or has a `feature` section in the name +feature: + - head-branch: ["^feat", "feat"] + +bug: + - head-branch: ["^fix", "fix"] + +chore: + - head-branch: ["^chore", "chore"] + +perf: + - head-branch: ["^perf", "perf"] + +documentation: + - changed-files: + - any-glob-to-any-file: ["**/*.md", "docs/**"] diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml index 3bc19a62..8cd7a1c8 100644 --- a/.github/release-drafter.yml +++ b/.github/release-drafter.yml @@ -13,13 +13,13 @@ categories: - title: "🚀 Features" labels: - "feature" - - "enhancement" - title: "🐞 Bug Fixes" labels: - "bug" - title: "📈 Performance" labels: - "perf" + - "enhancement" - title: 📝 Documentation labels: - "documentation" diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7357f361..fca9570d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -23,7 +23,7 @@ jobs: matrix: os: - ubuntu-latest - - macos-latest + # - macos-latest - windows-latest timeout-minutes: 20 steps: @@ -62,7 +62,7 @@ jobs: matrix: os: - ubuntu-latest - - macos-latest + # - macos-latest - windows-latest steps: @@ -85,7 +85,7 @@ jobs: matrix: os: - ubuntu-latest - - macos-latest + # - macos-latest - windows-latest steps: - name: Checkout code diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index ffffc48e..5ddc14d6 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -6,7 +6,7 @@ on: - main jobs: - deploy-push-playground-ftp: + deploy-playground-ftp: name: Deploy Push Playground Ftp if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') runs-on: ubuntu-latest @@ -27,7 +27,7 @@ jobs: uses: ./.github/actions/setup-node - name: Build - run: pnpm build:play && pnpm build:docs + run: pnpm build:play - name: Sync Playground files uses: SamKirkland/FTP-Deploy-Action@v4.3.5 @@ -37,6 +37,22 @@ jobs: password: ${{ secrets.WEB_PLAYGROUND_FTP_PWSSWORD }} local-dir: ./playground/dist/ + deploy-docs-ftp: + name: Deploy Push Docs Ftp + if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup Node + uses: ./.github/actions/setup-node + + - name: Build + run: pnpm build:docs + - name: Sync Docs files uses: SamKirkland/FTP-Deploy-Action@v4.3.5 with: @@ -45,7 +61,7 @@ jobs: password: ${{ secrets.WEBSITE_FTP_PASSWORD }} local-dir: ./docs/.vitepress/dist/ - deploy-push-antd-ftp: + deploy-antd-ftp: name: Deploy Push Antd Ftp if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') runs-on: ubuntu-latest @@ -76,7 +92,7 @@ jobs: password: ${{ secrets.WEB_ANTD_FTP_PASSWORD }} local-dir: ./apps/web-antd/dist/ - deploy-push-ele-ftp: + deploy-ele-ftp: name: Deploy Push Element Ftp if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') runs-on: ubuntu-latest @@ -107,7 +123,7 @@ jobs: password: ${{ secrets.WEB_ELE_FTP_PASSWORD }} local-dir: ./apps/web-ele/dist/ - deploy-push-naive-ftp: + deploy-naive-ftp: name: Deploy Push Naive Ftp if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]') runs-on: ubuntu-latest diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml new file mode 100644 index 00000000..6ccb456d --- /dev/null +++ b/.github/workflows/labeler.yml @@ -0,0 +1,21 @@ +name: PR Labeler + +on: + pull_request: + types: [opened, edited, synchronize] + +jobs: + label: + permissions: + contents: read + pull-requests: write + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Label PR based on title or file changes + uses: actions/labeler@v5 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + configuration-path: .github/labeler.yml diff --git a/docs/.vitepress/config/zh.mts b/docs/.vitepress/config/zh.mts index 7e334ee1..2a1772f3 100644 --- a/docs/.vitepress/config/zh.mts +++ b/docs/.vitepress/config/zh.mts @@ -154,7 +154,11 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] { items: [ { link: 'common-ui/vben-modal', - text: 'Modal 弹窗', + text: 'Vben Modal 模态框', + }, + { + link: 'common-ui/vben-drawer', + text: 'Vben Drawer 抽屉', }, ], }, diff --git a/docs/src/components/common-ui/vben-drawer.md b/docs/src/components/common-ui/vben-drawer.md new file mode 100644 index 00000000..1c0f0310 --- /dev/null +++ b/docs/src/components/common-ui/vben-drawer.md @@ -0,0 +1,108 @@ +--- +outline: deep +--- + +# Vben Drawer 抽屉 + +框架提供的抽屉组件，支持`自动高度`、`loading`等功能。 + +## 基础用法 + +使用 `useVbenDrawer` 创建最基础的模态框。 + + + +## 组件抽离 + +Drawer 内的内容一般业务中，会比较复杂，所以我们可以将 drawer 内的内容抽离出来，也方便复用。通过 `connectedComponent` 参数，可以将内外组件进行连接，而不用其他任何操作。 + + + +## 自动计算高度 + +弹窗会自动计算内容高度，超过一定高度会出现滚动条，同时结合 `loading` 效果以及使用 `prepend-footer` 插槽。 + + + +## 使用 Api + +通过 `drawerApi` 可以调用 drawer 的方法以及使用 `setState` 更新 drawer 的状态。 + + + +## 数据共享 + +如果你使用了 `connectedComponent` 参数，那么内外组件会共享数据，比如一些表单回填等操作。可以用 `drawerApi` 来获取数据和设置数据，配合 `onOpenChange`，可以满足大部分的需求。 + + + +::: info 注意 + +- `VbenDrawer` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenDrawer参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。 +- 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenDrawer`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onComfirm`，那么以内部的 `onComfirm` 为准。`onOpenChange`事件除外，内外都会触发。 + +::: + +## API + +```ts +// Drawer 为弹窗组件 +// drawerApi 为弹窗的方法 +const [Drawer, drawerApi] = useVbenDrawer({ + // 属性 + // 事件 +}); +``` + +### Props + +所有属性都可以传入 `useVbenDrawer` 的第一个参数中。 + +| 属性名 | 描述 | 类型 | 默认值 | +| ------------------ | ------------------- | --------------- | ------- | +| title | 标题 | `string\|slot` | - | +| titleTooltip | 标题提示信息 | `string\|slot` | - | +| description | 描述信息 | `string\|slot` | - | +| isOpen | 弹窗打开状态 | `boolean` | `false` | +| loading | 弹窗加载状态 | `boolean` | `false` | +| closable | 显示关闭按钮 | `boolean` | `true` | +| modal | 显示遮罩 | `boolean` | `true` | +| header | 显示header | `boolean` | `true` | +| footer | 显示footer | `boolean\|slot` | `true` | +| confirmLoading | 确认按钮loading状态 | `boolean` | `false` | +| closeOnClickModal | 点击遮罩关闭弹窗 | `boolean` | `true` | +| closeOnPressEscape | esc 关闭弹窗 | `boolean` | `true` | +| confirmText | 确认按钮文本 | `boolean\|slot` | `确认` | +| cancelText | 取消按钮文本 | `boolean\|slot` | `取消` | + +### Event + +以下事件，只有在 `useVbenDrawer({onCancel:()=>{}})` 中传入才会生效。 + +| 事件名 | 描述 | 类型 | +| --- | --- | --- | +| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` | +| onCancel | 点击取消按钮触发 | `()=>void` | +| onConfirm | 点击确认按钮触发 | `()=>void` | +| onOpenChange | 关闭或者打开弹窗时触发 | `(isOpen:boolean)=>void` | + +### Slots + +除了上面的属性类型包含`slot`，还可以通过插槽来自定义弹窗的内容。 + +| 插槽名 | 描述 | +| -------------- | ------------------- | +| default | 默认插槽 - 弹窗内容 | +| prepend-footer | 取消按钮左侧 | +| append-footer | 取消按钮右侧 | + +### modalApi + +| 事件名 | 描述 | 类型 | +| --- | --- | --- | +| setState | 动态设置弹窗状态属性 | `setState(props) \| setState((prev)=>(props))` | +| open | 打开弹窗 | `()=>void` | +| close | 关闭弹窗 | `()=>void` | +| setData | 设置共享数据 | `(data:T)=>void` | +| getData | 获取共享数据 | `()=>T` | +| useStore | 获取可响应式状态 | - | diff --git a/docs/src/components/common-ui/vben-modal.md b/docs/src/components/common-ui/vben-modal.md index f1d6c157..f2df3441 100644 --- a/docs/src/components/common-ui/vben-modal.md +++ b/docs/src/components/common-ui/vben-modal.md @@ -2,44 +2,117 @@ outline: deep --- -# vben-modal +# Vben Modal 模态框 -::: tip - -文档还在完善中，敬请期待。 - -::: - -框架提供的模态框组件，支持`拖拽`、`全屏`、`自定义`等功能。 +框架提供的模态框组件，支持`拖拽`、`全屏`、`自动高度`、`loading`等功能。 ## 基础用法 -使用 `useVbenModal` 创建最基于的模态框。 +使用 `useVbenModal` 创建最基础的模态框。 ## 组件抽离 -modal 内的内容一般业务中，会比较复杂，所以我们可以将 modal 内的内容抽离出来。 +Modal 内的内容一般业务中，会比较复杂，所以我们可以将 modal 内的内容抽离出来，也方便复用。通过 `connectedComponent` 参数，可以将内外组件进行连接，而不用其他任何操作。 +## 开启拖拽 + +通过 `draggable` 参数，可开启拖拽功能。 + + + +## 自动计算高度 + +弹窗会自动计算内容高度，超过一定高度会出现滚动条，同时结合 `loading` 效果以及使用 `prepend-footer` 插槽。 + + + +## 使用 Api + +通过 `modalApi` 可以调用 modal 的方法以及使用 `setState` 更新 modal 的状态。 + + + +## 数据共享 + +如果你使用了 `connectedComponent` 参数，那么内外组件会共享数据，比如一些表单回填等操作。可以用 `modalApi` 来获取数据和设置数据，配合 `onOpenChange`，可以满足大部分的需求。 + + + +::: info 注意 + +- `VbenModal` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenModal参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。 +- 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenModal`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onComfirm`，那么以内部的 `onComfirm` 为准。`onOpenChange`事件除外，内外都会触发。 + +::: + ## API -### 属性 +```ts +// Modal 为弹窗组件 +// modalApi 为弹窗的方法 +const [Modal, modalApi] = useVbenModal({ + // 属性 + // 事件 +}); +``` -| 属性名 | 描述 | 类型 | 默认值 | -| ------ | ----- | -------- | ------ | -| title | 标题. | `string` | — | +### Props -### 事件 +所有属性都可以传入 `useVbenModal` 的第一个参数中。 + +| 属性名 | 描述 | 类型 | 默认值 | +| ------------------ | ------------------- | --------------- | ------- | +| title | 标题 | `string\|slot` | - | +| titleTooltip | 标题提示信息 | `string\|slot` | - | +| description | 描述信息 | `string\|slot` | - | +| isOpen | 弹窗打开状态 | `boolean` | `false` | +| loading | 弹窗加载状态 | `boolean` | `false` | +| fullscreen | 全屏显示 | `boolean` | `false` | +| fullscreenButton | 显示全屏按钮 | `boolean` | `true` | +| draggable | 可拖拽 | `boolean` | `false` | +| closable | 显示关闭按钮 | `boolean` | `true` | +| centered | 居中显示 | `boolean` | `false` | +| modal | 显示遮罩 | `boolean` | `true` | +| header | 显示header | `boolean` | `true` | +| footer | 显示footer | `boolean\|slot` | `true` | +| confirmLoading | 确认按钮loading状态 | `boolean` | `false` | +| closeOnClickModal | 点击遮罩关闭弹窗 | `boolean` | `true` | +| closeOnPressEscape | esc 关闭弹窗 | `boolean` | `true` | +| confirmText | 确认按钮文本 | `boolean\|slot` | `确认` | +| cancelText | 取消按钮文本 | `boolean\|slot` | `取消` | + +### Event + +以下事件，只有在 `useVbenModal({onCancel:()=>{}})` 中传入才会生效。 | 事件名 | 描述 | 类型 | -| ------ | ---- | ---- | -| TODO | TODO | TODO | +| --- | --- | --- | +| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` | +| onCancel | 点击取消按钮触发 | `()=>void` | +| onConfirm | 点击确认按钮触发 | `()=>void` | +| onOpenChange | 关闭或者打开弹窗时触发 | `(isOpen:boolean)=>void` | -### 插槽 +### Slots -| 插槽名 | 描述 | -| ------- | ---- | -| default | xx. | +除了上面的属性类型包含`slot`，还可以通过插槽来自定义弹窗的内容。 + +| 插槽名 | 描述 | +| -------------- | ------------------- | +| default | 默认插槽 - 弹窗内容 | +| prepend-footer | 取消按钮左侧 | +| append-footer | 取消按钮右侧 | + +### modalApi + +| 事件名 | 描述 | 类型 | +| --- | --- | --- | +| setState | 动态设置弹窗状态属性 | `setState(props) \| setState((prev)=>(props))` | +| open | 打开弹窗 | `()=>void` | +| close | 关闭弹窗 | `()=>void` | +| setData | 设置共享数据 | `(data:T)=>void` | +| getData | 获取共享数据 | `()=>T` | +| useStore | 获取可响应式状态 | - | diff --git a/docs/src/components/introduction.md b/docs/src/components/introduction.md index 8fc96205..66e416fb 100644 --- a/docs/src/components/introduction.md +++ b/docs/src/components/introduction.md @@ -1,6 +1,6 @@ # 介绍 -::: tip README +::: info README 该文档介绍的是框架组件的使用方法、属性、事件等。如果你觉得组件封装的不好，或者不符合你的需求，你可以直接使用原生的组件，或者自己封装一个组件，不需要拘泥于框架提供的组件。我们只是提供了一些常用的组件，方便你快速开发。是否使用，取决于你的需求。 diff --git a/docs/src/demos/vben-drawer/auto-height/drawer.vue b/docs/src/demos/vben-drawer/auto-height/drawer.vue new file mode 100644 index 00000000..9ab433cc --- /dev/null +++ b/docs/src/demos/vben-drawer/auto-height/drawer.vue @@ -0,0 +1,45 @@ + + diff --git a/docs/src/demos/vben-drawer/auto-height/index.vue b/docs/src/demos/vben-drawer/auto-height/index.vue new file mode 100644 index 00000000..59294e53 --- /dev/null +++ b/docs/src/demos/vben-drawer/auto-height/index.vue @@ -0,0 +1,21 @@ + + + diff --git a/docs/src/demos/vben-drawer/basic/index.vue b/docs/src/demos/vben-drawer/basic/index.vue new file mode 100644 index 00000000..bd7d9275 --- /dev/null +++ b/docs/src/demos/vben-drawer/basic/index.vue @@ -0,0 +1,11 @@ + + diff --git a/docs/src/demos/vben-drawer/dynamic/drawer.vue b/docs/src/demos/vben-drawer/dynamic/drawer.vue new file mode 100644 index 00000000..50f62831 --- /dev/null +++ b/docs/src/demos/vben-drawer/dynamic/drawer.vue @@ -0,0 +1,26 @@ + + diff --git a/docs/src/demos/vben-drawer/dynamic/index.vue b/docs/src/demos/vben-drawer/dynamic/index.vue new file mode 100644 index 00000000..ad7e6565 --- /dev/null +++ b/docs/src/demos/vben-drawer/dynamic/index.vue @@ -0,0 +1,30 @@ + + + diff --git a/docs/src/demos/vben-drawer/extra/drawer.vue b/docs/src/demos/vben-drawer/extra/drawer.vue new file mode 100644 index 00000000..e84c1939 --- /dev/null +++ b/docs/src/demos/vben-drawer/extra/drawer.vue @@ -0,0 +1,8 @@ + + diff --git a/docs/src/demos/vben-drawer/extra/index.vue b/docs/src/demos/vben-drawer/extra/index.vue new file mode 100644 index 00000000..59294e53 --- /dev/null +++ b/docs/src/demos/vben-drawer/extra/index.vue @@ -0,0 +1,21 @@ + + + diff --git a/docs/src/demos/vben-drawer/shared-data/drawer.vue b/docs/src/demos/vben-drawer/shared-data/drawer.vue new file mode 100644 index 00000000..629199b6 --- /dev/null +++ b/docs/src/demos/vben-drawer/shared-data/drawer.vue @@ -0,0 +1,26 @@ + + diff --git a/docs/src/demos/vben-drawer/shared-data/index.vue b/docs/src/demos/vben-drawer/shared-data/index.vue new file mode 100644 index 00000000..04885f15 --- /dev/null +++ b/docs/src/demos/vben-drawer/shared-data/index.vue @@ -0,0 +1,26 @@ + + + diff --git a/docs/src/demos/vben-modal/auto-height/index.vue b/docs/src/demos/vben-modal/auto-height/index.vue new file mode 100644 index 00000000..2addf2e9 --- /dev/null +++ b/docs/src/demos/vben-modal/auto-height/index.vue @@ -0,0 +1,21 @@ + + + diff --git a/docs/src/demos/vben-modal/auto-height/modal.vue b/docs/src/demos/vben-modal/auto-height/modal.vue new file mode 100644 index 00000000..8757d5ef --- /dev/null +++ b/docs/src/demos/vben-modal/auto-height/modal.vue @@ -0,0 +1,45 @@ + + diff --git a/docs/src/demos/vben-modal/basic/index.vue b/docs/src/demos/vben-modal/basic/index.vue index 038d6268..9f899708 100644 --- a/docs/src/demos/vben-modal/basic/index.vue +++ b/docs/src/demos/vben-modal/basic/index.vue @@ -5,7 +5,7 @@ const [Modal, modalApi] = useVbenModal(); diff --git a/docs/src/demos/vben-modal/draggable/index.vue b/docs/src/demos/vben-modal/draggable/index.vue new file mode 100644 index 00000000..2addf2e9 --- /dev/null +++ b/docs/src/demos/vben-modal/draggable/index.vue @@ -0,0 +1,21 @@ + + + diff --git a/docs/src/demos/vben-modal/draggable/modal.vue b/docs/src/demos/vben-modal/draggable/modal.vue new file mode 100644 index 00000000..ecca497b --- /dev/null +++ b/docs/src/demos/vben-modal/draggable/modal.vue @@ -0,0 +1,10 @@ + + diff --git a/docs/src/demos/vben-modal/dynamic/index.vue b/docs/src/demos/vben-modal/dynamic/index.vue new file mode 100644 index 00000000..718e532b --- /dev/null +++ b/docs/src/demos/vben-modal/dynamic/index.vue @@ -0,0 +1,30 @@ + + + diff --git a/docs/src/demos/vben-modal/dynamic/modal.vue b/docs/src/demos/vben-modal/dynamic/modal.vue new file mode 100644 index 00000000..d4612896 --- /dev/null +++ b/docs/src/demos/vben-modal/dynamic/modal.vue @@ -0,0 +1,38 @@ + + diff --git a/docs/src/demos/vben-modal/extra/index.vue b/docs/src/demos/vben-modal/extra/index.vue index 1fa74cd6..2addf2e9 100644 --- a/docs/src/demos/vben-modal/extra/index.vue +++ b/docs/src/demos/vben-modal/extra/index.vue @@ -4,7 +4,7 @@ import { useVbenModal, VbenButton } from '@vben/common-ui'; import ExtraModal from './modal.vue'; const [Modal, modalApi] = useVbenModal({ - // 链接抽离的组件 + // 连接抽离的组件 connectedComponent: ExtraModal, }); @@ -16,7 +16,6 @@ function openModal() { diff --git a/docs/src/demos/vben-modal/extra/modal.vue b/docs/src/demos/vben-modal/extra/modal.vue index 68ceb5ee..488fd4a0 100644 --- a/docs/src/demos/vben-modal/extra/modal.vue +++ b/docs/src/demos/vben-modal/extra/modal.vue @@ -4,5 +4,5 @@ import { useVbenModal } from '@vben/common-ui'; const [Modal] = useVbenModal(); diff --git a/docs/src/demos/vben-modal/shared-data/index.vue b/docs/src/demos/vben-modal/shared-data/index.vue new file mode 100644 index 00000000..58c35e24 --- /dev/null +++ b/docs/src/demos/vben-modal/shared-data/index.vue @@ -0,0 +1,26 @@ + + + diff --git a/docs/src/demos/vben-modal/shared-data/modal.vue b/docs/src/demos/vben-modal/shared-data/modal.vue new file mode 100644 index 00000000..806585d9 --- /dev/null +++ b/docs/src/demos/vben-modal/shared-data/modal.vue @@ -0,0 +1,26 @@ + + diff --git a/docs/src/guide/introduction/quick-start.md b/docs/src/guide/introduction/quick-start.md index 852414f6..44efcd46 100644 --- a/docs/src/guide/introduction/quick-start.md +++ b/docs/src/guide/introduction/quick-start.md @@ -72,6 +72,8 @@ pnpm install ### 运行项目 +#### 选择项目 + 执行以下命运行项目: ```bash @@ -84,12 +86,24 @@ pnpm dev ```bash │ ◆ Select the app you need to run [dev]: -│ ● @vben/web-antd +│ ○ @vben/web-antd │ ○ @vben/web-ele │ ○ @vben/web-naive │ ○ @vben/docs -│ ○ @vben/playground +│ ● @vben/playground └ ``` 现在，你可以在浏览器访问 `http://localhost:5555` 查看项目。 + +#### 运行指定项目 + +如果你不想选择项目，可以直接运行以下命令运行你需要的应用： + +```bash +pnpm run dev:antd +pnpm run dev:ele +pnpm run dev:naive +pnpm run dev:docs +pnpm run dev:play +``` diff --git a/docs/src/guide/introduction/vben.md b/docs/src/guide/introduction/vben.md index d6ffd65c..90dae052 100644 --- a/docs/src/guide/introduction/vben.md +++ b/docs/src/guide/introduction/vben.md @@ -2,27 +2,27 @@ ::: info 你正在阅读的是 [Vben Admin](https://github.com/vbenjs/vue-vben-admin) `5.0`版本的文档！ -- Vben Admin 2.x 目前已经存档，只修复一些严重的问题。 +- Vben Admin 2.x 目前已存档，仅进行重大问题修复。 - 新版本与旧版本不兼容，如果你使用的是旧版本（v2、v3），请查看 [Vue Vben Admin 2.x 文档](https://doc.vvbin.cn) -- 如发现文档有误，欢迎提提交 Issue 帮助我们改进。 -- 如果你只是想体验一下，你可以查看 [快速开始](./quick-start.md)。 +- 如发现文档有误，欢迎提交 [issue](https://github.com/vbenjs/vue-vben-admin/issues) 帮助我们改进。 +- 如果你只是想体验一下，你可以查看[快速开始](./quick-start.md)。 ::: -[Vben Admin](https://github.com/vbenjs/vue-vben-admin) 是一个基于 [Vue3.0](https://github.com/vuejs/core)、[Vite](https://github.com/vitejs/vite)、 [TypeScript](https://www.typescriptlang.org/) 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 `vue3`、`vite`、`ts` 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。 +[Vben Admin](https://github.com/vbenjs/vue-vben-admin) 是一个基于 [Vue3.0](https://github.com/vuejs/core)、[Vite](https://github.com/vitejs/vite)、 [TypeScript](https://www.typescriptlang.org/) 的中后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模板，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 `vue3`、`vite`、`ts` 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。 ## 特点 - **最新技术栈**：使用 `Vue3`、`Vite`、`TypeScript` 等前端前沿技术开发。 - **国际化**：内置完善的国际化方案，支持多语言切换。 - **权限验证**：完善的权限验证方案，按钮级别权限控制。 -- **多主题**：内置多种主题配置&黑暗模式，满足个性化需求。 +- **多主题**：内置多种主题配置和黑暗模式，满足个性化需求。 - **动态菜单**：支持动态菜单，可以根据权限配置显示菜单。 - **Mock 数据**：基于 Nitro 的本地高性能 Mock 数据方案。 - **组件丰富**：提供了丰富的组件，可以满足大部分的业务需求。 - **规范**：代码规范，使用 `ESLint`、`Prettier`、`Stylelint`、`Publint`、`CSpell` 等工具保证代码质量。 - **工程化**：使用 `Pnpm Monorepo`、`TurboRepo`、`Changeset` 等工具，提高开发效率。 -- **多UI库支持**：支持 `Ant Design Vue`、`Element Plus`、`Vuetify` 等主流 UI 库，不再限制于特定框架。 +- **多UI库支持**：支持 `Ant Design Vue`、`Element Plus`、`Naive` 等主流 UI 库，不再限制于特定框架。 ## 浏览器支持 @@ -32,17 +32,15 @@ | [IE](http://godban.github.io/browsers-support-badges/)IE | [ Edge](http://godban.github.io/browsers-support-badges/)Edge | [Firefox](http://godban.github.io/browsers-support-badges/)Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)Chrome | [Safari](http://godban.github.io/browsers-support-badges/)Safari | | :-: | :-: | :-: | :-: | :-: | -| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions | +| 不支持 | last 2 versions | last 2 versions | last 2 versions | last 2 versions | ## 贡献 - [Vben Admin](https://github.com/vbenjs/vue-vben-admin) 还在持续更新中，本项目欢迎您的参与，共同维护，逐步完善，打造更好的中后台解决方案。 -- 如果你想加入我们，可以多提供一些好的建议或者提交 pr，我们会根据你的活跃度邀请你加入。 +- 如果你想加入我们，可以提供有价值的建议或者参与讨论，协助解决 issue，- 如果你想加入我们，可以提供有价值的建议或者参与讨论，协助解决 issue，我们会根据你的活跃度邀请你加入。。 ::: info 加入我们 -如果你想加入我们，你可以从以下几个方面开始，我们会根据你的活跃度邀请你加入： - - 长期提交 `PR`。 - 提供一些好的建议。 - 参与讨论，帮助解决一些 `issue`。 diff --git a/docs/src/guide/introduction/why.md b/docs/src/guide/introduction/why.md index 28f4cb84..4191b3ef 100644 --- a/docs/src/guide/introduction/why.md +++ b/docs/src/guide/introduction/why.md @@ -1,9 +1,23 @@ # 为什么选择我们? -首先，我们不会去和其他框架做比较。我们认为每个框架都有自己的特点，适合不同的场景。我们的目标是提供一个简单、易用的框架，让开发者可以快速上手，专注于业务逻辑的开发。所以我们只会不断完善和优化我们的框架，提供更好的体验。 +::: info 写在前面 + +我们不会去和其他框架做比较。我们认为每个框架都有自己的特点，适合不同的场景。我们的目标是提供一个简单、易用的框架，让开发者可以快速上手，专注于业务逻辑的开发。所以我们只会不断完善和优化我们的框架，提供更好的体验。 + +::: + +我们致力于为开发者提供一个高效、现代、易用的前端框架。我们的解决方案基于最新的技术栈，如 Vue3、Vite 和 TypeScript，确保您在构建项目时始终走在技术的前沿。同时，我们注重代码的质量与规范，通过严格的工具链保证代码的一致性和可维护性。无论是初创项目还是企业级应用，我们的框架都能帮助您快速构建、迭代和部署。 ## 框架历程 从 Vue Vben Admin 1.x 版本开始，框架经历了许多迭代和优化。从一开始使用 `Vite 0.x` 版本，没有现成的插件，开发了很多自定义插件来弥合 Webpack 和 Vite 之间的差异。虽然很多现在已经被代替，但是我们的初衷一直没有变，就是提供一个简单、易用的框架。 虽然中间有段时间由社区维护，但我们一直密切关注 Vue Vben Admin 的发展。见证了许多开发者使用 Vben Admin，并提供了许多宝贵的建议和反馈。非常感谢大家的支持和贡献，这些都是我们持续改进 Vben Admin 的动力。新版本中，我们持续收集用户反馈，重新开始，不断优化框架，以提供更好的用户体验。我们的目标是让开发者能够快速上手，专注于业务逻辑的开发。 + +## 单元测试 + +单元测试是确保代码质量的基石。在开发过程中编写和执行单元测试，以捕捉潜在的错误并提升代码的可靠性。框架核心逻辑使用 `vitest` 做了单元测试，并在逐步增加覆盖率。通过单元测试，可以放心地进行代码重构，减少回归问题，从而提高整体开发效率。 + +## 质量与规范 + +我们始终高度重视代码的质量与规范。通过使用 ESLint、Prettier、Stylelint、Publint、CSpell 等工具来确保代码质量。我们的代码规范基于 Vue3、Vite、TypeScript 等现代前端技术制定，旨在提供一个简洁、易用的框架，使开发者能够快速上手并专注于业务逻辑的开发。 diff --git a/internal/lint-configs/eslint-config/src/configs/vue.ts b/internal/lint-configs/eslint-config/src/configs/vue.ts index 41bb8baa..8c45e8ad 100644 --- a/internal/lint-configs/eslint-config/src/configs/vue.ts +++ b/internal/lint-configs/eslint-config/src/configs/vue.ts @@ -15,10 +15,6 @@ export async function vue(): Promise { { files: ['**/*.vue'], languageOptions: { - globals: { - // TODO: 等待插件正式支持后删除 - defineModel: true, - }, parser: parserVue, parserOptions: { ecmaFeatures: { diff --git a/packages/@core/base/design/src/design-tokens/default/index.css b/packages/@core/base/design/src/design-tokens/default/index.css index 5394902c..d9652e42 100644 --- a/packages/@core/base/design/src/design-tokens/default/index.css +++ b/packages/@core/base/design/src/design-tokens/default/index.css @@ -77,7 +77,7 @@ /* ============= custom ============= */ /* 遮罩颜色 */ - --overlay: 0deg 0% 0% / 30%; + --overlay: 0 0% 0% / 30%; /* 基本文字大小 */ --font-size-base: 16px; diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts index b969bdee..9bfb00f5 100644 --- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts +++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts @@ -38,7 +38,6 @@ export class DrawerApi { isOpen: false, loading: false, modal: true, - sharedData: {}, title: '', }; @@ -93,7 +92,11 @@ export class DrawerApi { * 取消操作 */ onCancel() { - this.api.onCancel?.(); + if (this.api.onCancel) { + this.api.onCancel?.(); + } else { + this.close(); + } } /** diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue index 5d8a904d..1a562426 100644 --- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue +++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue @@ -1,6 +1,8 @@ + + diff --git a/playground/src/views/examples/drawer/auto-height-demo.vue b/playground/src/views/examples/drawer/auto-height-demo.vue index d3f14309..0c327340 100644 --- a/playground/src/views/examples/drawer/auto-height-demo.vue +++ b/playground/src/views/examples/drawer/auto-height-demo.vue @@ -5,6 +5,8 @@ import { useVbenDrawer } from '@vben/common-ui'; import { Button, message } from 'ant-design-vue'; +const list = ref([]); + const [Drawer, drawerApi] = useVbenDrawer({ onCancel() { drawerApi.close(); @@ -13,14 +15,19 @@ const [Drawer, drawerApi] = useVbenDrawer({ message.info('onConfirm'); // drawerApi.close(); }, + onOpenChange(isOpen) { + if (isOpen) { + handleUpdate(10); + } + }, }); -const list = ref([]); - -list.value = Array.from({ length: 10 }, (_v, k) => k + 1); - -function handleUpdate() { - list.value = Array.from({ length: 6 }, (_v, k) => k + 1); +function handleUpdate(len: number) { + drawerApi.setState({ loading: true }); + setTimeout(() => { + list.value = Array.from({ length: len }, (_v, k) => k + 1); + drawerApi.setState({ loading: false }); + }, 2000); } diff --git a/playground/src/views/examples/drawer/base-demo.vue b/playground/src/views/examples/drawer/base-demo.vue index b01ee8d6..ffa5e390 100644 --- a/playground/src/views/examples/drawer/base-demo.vue +++ b/playground/src/views/examples/drawer/base-demo.vue @@ -11,14 +11,6 @@ const [Drawer, drawerApi] = useVbenDrawer({ message.info('onConfirm'); // drawerApi.close(); }, - onOpenChange(isOpen) { - if (isOpen) { - drawerApi.setState({ loading: true }); - setTimeout(() => { - drawerApi.setState({ loading: false }); - }, 2000); - } - }, });