chore: 升级 shadcn-vue 组件到v4最新版 (#7972)
* fix: useStore is deprecated * chore: update deps * feat: 升级shadcn-ui v4 * fix: workbench style * feat: 升级shadcn-ui v4 step2 * feat: 升级shadcn-ui v4 step3 * chore: 升级shadcn v4 * fix: pagination * fix: dark style * fix: doc import * feat: 增加详情组件，参考 antdv-next * docs: descriptions docs * docs: Browser Support * feat: add table action * feat: icon use vbenIcon * fix: type error * fix: dropdown popConfirm * feat: 使用默认的文字交互 * feat: 优化渲染性能
This commit is contained in:
xingyu
102
docs/src/components/common-ui/vben-descriptions.md
Normal file
102
docs/src/components/common-ui/vben-descriptions.md
Normal file
@@ -0,0 +1,102 @@
|
||||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Vben Descriptions 描述列表
|
||||
|
||||
`Descriptions` 用于成组展示只读的字段信息，常用于详情页、信息预览等场景。组件基于 shadcn-ui 构建，API 参考 Ant Design Vue 的 Descriptions，支持响应式列数、跨列、边框、垂直布局等能力。
|
||||
|
||||
> 如果文档内没有覆盖到你需要的细节，可以结合在线示例一起查看。
|
||||
|
||||
::: info 写在前面
|
||||
|
||||
组件提供两种使用方式：通过 `items` 数据驱动（推荐），或通过子组件 `VbenDescriptionsItem` 声明列表项。两者可按需选择，`items` 优先级更高。:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
通过 `items` 传入字段数组，每项包含 `label` 与 `content`。默认按断点自适应列数（`xs` 1 列、`sm` 2 列、`md` 及以上 3 列）。
|
||||
|
||||
<DemoPreview dir="demos/vben-descriptions/basic" />
|
||||
|
||||
## 带边框
|
||||
|
||||
设置 `bordered` 展示边框样式，配合 `title` 标题与 `#extra` 插槽（位于标题右侧的操作区域）。
|
||||
|
||||
<DemoPreview dir="demos/vben-descriptions/bordered" />
|
||||
|
||||
## 垂直布局
|
||||
|
||||
通过 `layout="vertical"` 让标签位于内容上方。
|
||||
|
||||
<DemoPreview dir="demos/vben-descriptions/vertical" />
|
||||
|
||||
## 不同尺寸
|
||||
|
||||
通过 `size` 设置 `small`、`middle`、`large` 三种尺寸。
|
||||
|
||||
<DemoPreview dir="demos/vben-descriptions/size" />
|
||||
|
||||
## 跨列与响应式
|
||||
|
||||
单项通过 `span` 设置跨列数，`'filled'` 表示占满当前行剩余空间；`column` 支持传入按断点配置的对象实现响应式列数。
|
||||
|
||||
<DemoPreview dir="demos/vben-descriptions/span" />
|
||||
|
||||
## 子组件用法
|
||||
|
||||
不传 `items` 时，可在默认插槽中使用 `VbenDescriptionsItem` 声明列表项，内容支持默认插槽或 `#content` 插槽自定义。
|
||||
|
||||
<DemoPreview dir="demos/vben-descriptions/custom" />
|
||||
|
||||
## API
|
||||
|
||||
### Descriptions Props
|
||||
|
||||
| 属性名 | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| items | 数据驱动的列表项；不传则读取默认插槽 | `DescriptionsItemType[]` | - |
|
||||
| bordered | 是否展示边框 | `boolean` | `false` |
|
||||
| column | 一行的列数，支持按断点配置 | `number \| Partial<Record<Breakpoint, number>>` | `{ xs: 1, sm: 2, md: 3, xxxl: 4 }` |
|
||||
| layout | 布局方式 | `'horizontal' \| 'vertical'` | `'horizontal'` |
|
||||
| size | 尺寸 | `'small' \| 'middle' \| 'large'` | `'middle'` |
|
||||
| colon | 是否显示冒号（仅非边框的水平布局生效） | `boolean` | `true` |
|
||||
| title | 标题 | `string` | - |
|
||||
| extra | 标题右侧的操作区域 | `string` | - |
|
||||
| labelStyle | 统一的标签样式 | `CSSProperties` | - |
|
||||
| contentStyle | 统一的内容样式 | `CSSProperties` | - |
|
||||
| class | 根节点自定义类名 | `string` | - |
|
||||
|
||||
### Descriptions Slots
|
||||
|
||||
| 插槽名 | 描述 |
|
||||
| ------- | ---------------------------------- |
|
||||
| title | 自定义标题 |
|
||||
| extra | 自定义标题右侧操作区域 |
|
||||
| default | 放置 `VbenDescriptionsItem` 子组件 |
|
||||
|
||||
### DescriptionsItem
|
||||
|
||||
`items` 数组中的每一项，或子组件 `VbenDescriptionsItem` 的属性。
|
||||
|
||||
| 属性名 | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| label | 标签 | `string \| number \| (() => VNode) \| Component` | - |
|
||||
| content | 内容 | `string \| number \| (() => VNode) \| Component` | - |
|
||||
| span | 跨列数，`'filled'` 占满当前行剩余 | `number \| 'filled' \| Partial<Record<Breakpoint, number>>` | `1` |
|
||||
| labelStyle | 标签样式 | `CSSProperties` | - |
|
||||
| contentStyle | 内容样式 | `CSSProperties` | - |
|
||||
| key | 唯一标识 | `string \| number` | - |
|
||||
|
||||
### DescriptionsItem Slots
|
||||
|
||||
仅子组件用法可用。
|
||||
|
||||
| 插槽名 | 描述 |
|
||||
| ------- | ------------------------ |
|
||||
| default | 内容（等价于 `content`） |
|
||||
| content | 自定义内容 |
|
||||
| label | 自定义标签 |
|
||||
|
||||
::: tip Breakpoint
|
||||
|
||||
响应式断点 `Breakpoint` 取值为 `'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'`，断点像素与 Ant Design 一致（`sm` 576、`md` 768、`lg` 992、`xl` 1200、`xxl` 1600、`xxxl` 2000）。:::
|
||||
165
docs/src/components/common-ui/vben-table-action.md
Normal file
165
docs/src/components/common-ui/vben-table-action.md
Normal file
@@ -0,0 +1,165 @@
|
||||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Vben TableAction 表格操作
|
||||
|
||||
`TableAction` 用于在表格操作列中渲染一组操作按钮，参考 vben2 的 TableAction 设计。基于 shadcn-ui 构建，支持权限控制、气泡确认、提示、下拉「更多」、分割线等能力，可在表格内外任意场景复用。
|
||||
|
||||
> 如果文档内没有覆盖到你需要的细节，可以结合在线示例一起查看。
|
||||
|
||||
::: info 写在前面
|
||||
|
||||
组件本身不依赖任何业务逻辑（不直接读取权限 store），权限通过注入 `hasPermission` 实现，从而保持核心层零耦合、可跨框架复用。在 vxe-table 中推荐通过列插槽（`slots: { default: 'action' }`）在页面里渲染，不改变表格原有的渲染机制。:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
通过 `actions` 传入操作项数组，每项包含 `text`、`onClick` 等；`danger` 标记危险操作，`divider` 显示按钮间分割线。
|
||||
|
||||
<DemoPreview dir="demos/vben-table-action/basic" />
|
||||
|
||||
## 提示
|
||||
|
||||
通过 `tooltip` 为操作项添加提示，支持字符串或 `{ content, side }` 配置。
|
||||
|
||||
<DemoPreview dir="demos/vben-table-action/tooltip" />
|
||||
|
||||
## 气泡确认
|
||||
|
||||
通过 `popConfirm` 开启点击前的气泡确认，常用于删除等危险操作。
|
||||
|
||||
<DemoPreview dir="demos/vben-table-action/popconfirm" />
|
||||
|
||||
## 更多下拉
|
||||
|
||||
通过 `dropdownActions` 将次要操作收纳到「更多」下拉中，`moreText` 可自定义按钮文案。
|
||||
|
||||
<DemoPreview dir="demos/vben-table-action/dropdown" />
|
||||
|
||||
## 权限控制
|
||||
|
||||
为操作项设置 `auth` 权限码，并注入 `hasPermission` 判断函数，无权限的操作会被隐藏。
|
||||
|
||||
<DemoPreview dir="demos/vben-table-action/permission" />
|
||||
|
||||
## 在 vxe-table 中使用
|
||||
|
||||
不改变 vxe-table 原有渲染方式，推荐在列配置中声明插槽，在页面通过插槽渲染。
|
||||
|
||||
::: tip 推荐：使用适配器封装的版本项目的 `#/adapter/vxe-table` 已对 `VbenTableAction` 做了二次封装，内部统一注入了 `hasPermission`（基于 `useAccess().hasAccessByCodes`）。因此从适配器引入时**无需再传入 `:has-permission`**，只需通过操作项的 `auth` 字段声明权限码即可。:::
|
||||
|
||||
```ts
|
||||
// data.ts —— 列配置声明插槽
|
||||
{
|
||||
align: 'center',
|
||||
field: 'operation',
|
||||
fixed: 'right',
|
||||
slots: { default: 'action' },
|
||||
title: $t('system.user.operation'),
|
||||
width: 180,
|
||||
}
|
||||
```
|
||||
|
||||
```vue
|
||||
<!-- list.vue —— 从适配器引入，权限自动注入，无需传入 has-permission -->
|
||||
<script setup lang="ts">
|
||||
import { VbenTableAction } from '#/adapter/vxe-table';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Grid>
|
||||
<template #action="{ row }">
|
||||
<template #action="{ row }">
|
||||
<VbenTableAction
|
||||
:actions="[
|
||||
{
|
||||
text: $t('common.detail'),
|
||||
icon: 'lucide:eye',
|
||||
onClick: () => onDetail(row),
|
||||
},
|
||||
{
|
||||
text: $t('common.edit'),
|
||||
icon: 'lucide:edit',
|
||||
onClick: () => onEdit(row),
|
||||
},
|
||||
]"
|
||||
:dropdown-actions="[
|
||||
{
|
||||
text: $t('common.delete'),
|
||||
icon: 'lucide:trash-2',
|
||||
danger: true,
|
||||
onClick: () => onDelete(row),
|
||||
auth: ['AC_100100'],
|
||||
},
|
||||
]"
|
||||
align="center"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</Grid>
|
||||
</template>
|
||||
```
|
||||
|
||||
若直接从 `@vben/common-ui` 引入核心组件（不经过适配器），组件不依赖任何业务逻辑，需自行注入 `hasPermission`：
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useAccess } from '@vben/access';
|
||||
import { VbenTableAction } from '@vben/common-ui';
|
||||
|
||||
const { hasAccessByCodes } = useAccess();
|
||||
function hasPermission(auth?: string | string[]) {
|
||||
if (!auth) return true;
|
||||
return hasAccessByCodes(Array.isArray(auth) ? auth : [auth]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VbenTableAction
|
||||
v-bind="useActions(row, onActionClick)"
|
||||
:has-permission="hasPermission"
|
||||
align="center"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### TableAction Props
|
||||
|
||||
| 属性名 | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| actions | 主操作按钮 | `ActionItem[]` | `[]` |
|
||||
| dropdownActions | 「更多」下拉中的操作 | `ActionItem[]` | `[]` |
|
||||
| align | 对齐方式 | `'start' \| 'center' \| 'end'` | `'end'` |
|
||||
| divider | 按钮之间是否显示分割线 | `boolean` | `false` |
|
||||
| moreText | 「更多」按钮文案（提供时显示在图标右侧） | `string` | - |
|
||||
| hasPermission | 权限判断函数，返回 `false` 则隐藏对应 `auth` 的操作（从 `#/adapter/vxe-table` 引入时已自动注入，无需手动传入） | `(auth?: string \| string[]) => boolean` | - |
|
||||
| class | 根节点自定义类名 | `string` | - |
|
||||
|
||||
### ActionItem
|
||||
|
||||
| 属性名 | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| text | 按钮文本 | `string` | - |
|
||||
| icon | 图标组件 | `string`\| `VbenIcon` | - |
|
||||
| onClick | 点击回调 | `() => void` | - |
|
||||
| auth | 权限码，配合 `hasPermission` 过滤 | `string \| string[]` | - |
|
||||
| ifShow | 是否显示 | `boolean \| (() => boolean)` | `true` |
|
||||
| disabled | 是否禁用 | `boolean` | `false` |
|
||||
| loading | 加载状态 | `boolean` | `false` |
|
||||
| danger | 危险操作（红色文字） | `boolean` | `false` |
|
||||
| tooltip | 提示 | `string \| { content: string; side?: 'top' \| 'bottom' \| 'left' \| 'right' }` | - |
|
||||
| popConfirm | 气泡确认 | `TableActionPopConfirm` | - |
|
||||
| variant | 按钮样式变体 | `ButtonVariants['variant']` | `'link'` |
|
||||
| size | 按钮尺寸 | `ButtonVariants['size']` | `'sm'` |
|
||||
| key | 唯一标识 | `string \| number` | - |
|
||||
|
||||
### TableActionPopConfirm
|
||||
|
||||
| 属性名 | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| title | 提示标题 | `string` | `'Are you sure?'` |
|
||||
| okText | 确认按钮文案 | `string` | `'OK'` |
|
||||
| cancelText | 取消按钮文案 | `string` | `'Cancel'` |
|
||||
| confirm | 确认回调；未提供时回退到 `action.onClick` | `() => void` | - |
|
||||
Reference in New Issue
Block a user