失忆
3 months ago
committed by
GitHub
GitHub
380 changed files with 11029 additions and 6486 deletions
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"singleQuote": true |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
--- |
||||
|
'@vben/styles': patch |
||||
|
'@vben-core/form-ui': patch |
||||
|
'@vben/web-naive': patch |
||||
|
--- |
||||
|
|
||||
|
feat(@core/form-ui): 新增 useVbenForm 数组编辑器 VbenFormFieldArray |
||||
@ -1 +1 @@ |
|||||
22.22.0 |
24.16.0 |
||||
|
|||||
@ -1,3 +1,11 @@ |
|||||
{ |
{ |
||||
"extends": "./.nitro/types/tsconfig.json" |
"$schema": "https://json.schemastore.org/tsconfig", |
||||
|
"extends": "@vben/tsconfig/node.json", |
||||
|
"compilerOptions": { |
||||
|
"paths": { |
||||
|
"~/*": ["./*"] |
||||
|
} |
||||
|
}, |
||||
|
"include": ["**/*.ts", "**/.*.ts"], |
||||
|
"exclude": ["node_modules", "dist", ".nitro"] |
||||
} |
} |
||||
|
|||||
@ -1,3 +1,4 @@ |
|||||
export * from './auth'; |
export * from './auth'; |
||||
export * from './menu'; |
export * from './menu'; |
||||
|
export * from './upload'; |
||||
export * from './user'; |
export * from './user'; |
||||
|
|||||
@ -0,0 +1,25 @@ |
|||||
|
import { requestClient } from '#/api/request'; |
||||
|
|
||||
|
interface UploadFileParams { |
||||
|
file: File; |
||||
|
onError?: (error: Error) => void; |
||||
|
onProgress?: (progress: { percent: number }) => void; |
||||
|
onSuccess?: (data: any, file: File) => void; |
||||
|
} |
||||
|
export async function upload_file({ |
||||
|
file, |
||||
|
onError, |
||||
|
onProgress, |
||||
|
onSuccess, |
||||
|
}: UploadFileParams) { |
||||
|
try { |
||||
|
onProgress?.({ percent: 0 }); |
||||
|
|
||||
|
const data = await requestClient.upload('/upload', { file }); |
||||
|
|
||||
|
onProgress?.({ percent: 100 }); |
||||
|
onSuccess?.(data, file); |
||||
|
} catch (error) { |
||||
|
onError?.(error instanceof Error ? error : new Error(String(error))); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,123 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { Page } from '@vben/common-ui'; |
||||
|
|
||||
|
import { NButton, NCard, useMessage } from 'naive-ui'; |
||||
|
|
||||
|
import { useVbenForm } from '#/adapter/form'; |
||||
|
|
||||
|
const message = useMessage(); |
||||
|
|
||||
|
const [Form, formApi] = useVbenForm({ |
||||
|
layout: 'vertical', |
||||
|
wrapperClass: 'grid-cols-1', |
||||
|
handleSubmit: (values) => { |
||||
|
message.success(`提交成功：${JSON.stringify(values)}`); |
||||
|
}, |
||||
|
schema: [ |
||||
|
{ |
||||
|
component: 'Input', |
||||
|
fieldName: 'projectName', |
||||
|
label: '项目名称', |
||||
|
rules: 'required', |
||||
|
}, |
||||
|
{ |
||||
|
component: 'VbenFormFieldArray', |
||||
|
fieldName: 'members', |
||||
|
label: '项目成员', |
||||
|
// 初始化为空数组，供内部 useFieldArray 使用 |
||||
|
defaultValue: [], |
||||
|
componentProps: { |
||||
|
min: 1, |
||||
|
max: 5, |
||||
|
createRow: () => ({ |
||||
|
name: null, |
||||
|
age: null, |
||||
|
role: null, |
||||
|
joinDate: null, |
||||
|
active: true, |
||||
|
}), |
||||
|
// 每一列就是一个子字段，复用 vbenForm 的所有编辑组件 |
||||
|
schema: [ |
||||
|
{ |
||||
|
component: 'Input', |
||||
|
fieldName: 'name', |
||||
|
label: '姓名', |
||||
|
rules: 'required', |
||||
|
componentProps: { placeholder: '请输入姓名' }, |
||||
|
}, |
||||
|
{ |
||||
|
component: 'InputNumber', |
||||
|
fieldName: 'age', |
||||
|
label: '年龄', |
||||
|
componentProps: { min: 0, max: 150 }, |
||||
|
}, |
||||
|
{ |
||||
|
component: 'Select', |
||||
|
fieldName: 'role', |
||||
|
label: '角色', |
||||
|
rules: 'selectRequired', |
||||
|
componentProps: { |
||||
|
placeholder: '请选择', |
||||
|
options: [ |
||||
|
{ label: '前端', value: 'fe' }, |
||||
|
{ label: '后端', value: 'be' }, |
||||
|
{ label: '测试', value: 'qa' }, |
||||
|
{ label: '产品', value: 'pm' }, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
component: 'DatePicker', |
||||
|
fieldName: 'joinDate', |
||||
|
label: '入职日期', |
||||
|
}, |
||||
|
{ |
||||
|
component: 'Switch', |
||||
|
fieldName: 'active', |
||||
|
label: '在职', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}); |
||||
|
|
||||
|
function setFormValues() { |
||||
|
formApi.setValues({ |
||||
|
projectName: 'Vben Admin', |
||||
|
members: [ |
||||
|
{ name: '张三', age: 28, role: 'fe', joinDate: Date.now(), active: true }, |
||||
|
{ |
||||
|
name: '李四', |
||||
|
age: 32, |
||||
|
role: 'be', |
||||
|
joinDate: Date.now(), |
||||
|
active: false, |
||||
|
}, |
||||
|
], |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
async function getFormValues() { |
||||
|
const values = await formApi.getValues(); |
||||
|
message.info(JSON.stringify(values)); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<Page |
||||
|
description="基于 useVbenForm 的数组编辑器（VbenFormFieldArray）：可增删行，每个单元格复用 vbenForm 注册的编辑组件，并享受逐格校验。" |
||||
|
title="数组编辑器表单" |
||||
|
> |
||||
|
<NCard title="数组编辑器"> |
||||
|
<template #header-extra> |
||||
|
<NButton class="mr-2" @click="setFormValues">设置表单值</NButton> |
||||
|
<NButton class="mr-2" @click="getFormValues">获取表单值</NButton> |
||||
|
<NButton type="primary" @click="formApi.submitForm()"> |
||||
|
提交校验 |
||||
|
</NButton> |
||||
|
</template> |
||||
|
<Form /> |
||||
|
</NCard> |
||||
|
</Page> |
||||
|
</template> |
||||
@ -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）。::: |
||||
@ -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` | - | |
||||
@ -0,0 +1,18 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { VbenDescriptions } from '@vben/common-ui'; |
||||
|
|
||||
|
const items = [ |
||||
|
{ content: 'Vben', label: '用户名' }, |
||||
|
{ content: '13800138000', label: '手机号' }, |
||||
|
{ content: '中国 · 杭州', label: '居住地' }, |
||||
|
{ content: '前端工程师', label: '职位' }, |
||||
|
{ |
||||
|
content: '这是一段较长的备注信息，用于演示跨列展示。', |
||||
|
label: '备注', |
||||
|
span: 3, |
||||
|
}, |
||||
|
]; |
||||
|
</script> |
||||
|
<template> |
||||
|
<VbenDescriptions :items="items" /> |
||||
|
</template> |
||||
@ -0,0 +1,22 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { VbenDescriptions } from '@vben/common-ui'; |
||||
|
|
||||
|
const items = [ |
||||
|
{ content: 'Vben', label: '用户名' }, |
||||
|
{ content: '13800138000', label: '手机号' }, |
||||
|
{ content: '正常', label: '状态' }, |
||||
|
{ content: '中国 · 杭州', label: '居住地' }, |
||||
|
{ |
||||
|
content: '浙江省杭州市西湖区某某街道某某小区 1 幢 2 单元', |
||||
|
label: '地址', |
||||
|
span: 3, |
||||
|
}, |
||||
|
]; |
||||
|
</script> |
||||
|
<template> |
||||
|
<VbenDescriptions bordered title="用户信息" :items="items"> |
||||
|
<template #extra> |
||||
|
<span style="color: #1677ff; cursor: pointer">编辑</span> |
||||
|
</template> |
||||
|
</VbenDescriptions> |
||||
|
</template> |
||||
@ -0,0 +1,17 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { VbenDescriptions, VbenDescriptionsItem } from '@vben/common-ui'; |
||||
|
</script> |
||||
|
<template> |
||||
|
<!-- 通过子组件 VbenDescriptionsItem 声明列表项 --> |
||||
|
<VbenDescriptions bordered :column="2"> |
||||
|
<VbenDescriptionsItem label="用户名">Vben</VbenDescriptionsItem> |
||||
|
<VbenDescriptionsItem label="状态"> |
||||
|
<span style="color: #52c41a">● 正常</span> |
||||
|
</VbenDescriptionsItem> |
||||
|
<VbenDescriptionsItem label="备注" :span="2"> |
||||
|
<template #content> |
||||
|
<span style="color: #888">通过 #content 插槽自定义内容</span> |
||||
|
</template> |
||||
|
</VbenDescriptionsItem> |
||||
|
</VbenDescriptions> |
||||
|
</template> |
||||
@ -0,0 +1,35 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { VbenDescriptions } from '@vben/common-ui'; |
||||
|
|
||||
|
const items = [ |
||||
|
{ content: 'Vben', label: '用户名' }, |
||||
|
{ content: '13800138000', label: '手机号' }, |
||||
|
{ content: '中国 · 杭州', label: '居住地' }, |
||||
|
{ content: '前端工程师', label: '职位' }, |
||||
|
]; |
||||
|
</script> |
||||
|
<template> |
||||
|
<div style="display: flex; flex-direction: column; gap: 16px"> |
||||
|
<VbenDescriptions |
||||
|
size="small" |
||||
|
bordered |
||||
|
title="Small" |
||||
|
:column="2" |
||||
|
:items="items" |
||||
|
/> |
||||
|
<VbenDescriptions |
||||
|
size="middle" |
||||
|
bordered |
||||
|
title="Middle" |
||||
|
:column="2" |
||||
|
:items="items" |
||||
|
/> |
||||
|
<VbenDescriptions |
||||
|
size="large" |
||||
|
bordered |
||||
|
title="Large" |
||||
|
:column="2" |
||||
|
:items="items" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
@ -0,0 +1,15 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { VbenDescriptions } from '@vben/common-ui'; |
||||
|
|
||||
|
const items = [ |
||||
|
{ content: '1', label: 'A' }, |
||||
|
{ content: '2（span: 2）', label: 'B', span: 2 }, |
||||
|
{ content: '3', label: 'C' }, |
||||
|
{ content: '占满当前行剩余空间', label: 'D（span: filled）', span: 'filled' }, |
||||
|
{ content: '5', label: 'E' }, |
||||
|
]; |
||||
|
</script> |
||||
|
<template> |
||||
|
<!-- 列数随断点变化：xs 1 列、sm 2 列、md 及以上 3 列 --> |
||||
|
<VbenDescriptions bordered :column="{ md: 3, sm: 2, xs: 1 }" :items="items" /> |
||||
|
</template> |
||||
@ -0,0 +1,13 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { VbenDescriptions } from '@vben/common-ui'; |
||||
|
|
||||
|
const items = [ |
||||
|
{ content: 'Vben', label: '用户名' }, |
||||
|
{ content: '13800138000', label: '手机号' }, |
||||
|
{ content: '中国 · 杭州', label: '居住地' }, |
||||
|
{ content: '这是一段较长的备注信息。', label: '备注', span: 3 }, |
||||
|
]; |
||||
|
</script> |
||||
|
<template> |
||||
|
<VbenDescriptions bordered layout="vertical" :items="items" /> |
||||
|
</template> |
||||
@ -0,0 +1,28 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import type { ActionItem } from '@vben/common-ui'; |
||||
|
|
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
import { VbenTableAction } from '@vben/common-ui'; |
||||
|
|
||||
|
const last = ref('无'); |
||||
|
|
||||
|
const actions: ActionItem[] = [ |
||||
|
{ key: 'edit', onClick: () => (last.value = '编辑'), text: '编辑' }, |
||||
|
{ key: 'detail', onClick: () => (last.value = '详情'), text: '详情' }, |
||||
|
{ |
||||
|
danger: true, |
||||
|
key: 'delete', |
||||
|
onClick: () => (last.value = '删除'), |
||||
|
text: '删除', |
||||
|
}, |
||||
|
]; |
||||
|
</script> |
||||
|
<template> |
||||
|
<div> |
||||
|
<VbenTableAction :actions="actions" align="start" divider /> |
||||
|
<p style="margin-top: 8px; font-size: 13px; opacity: 0.7"> |
||||
|
最近点击：{{ last }} |
||||
|
</p> |
||||
|
</div> |
||||
|
</template> |
||||
@ -0,0 +1,44 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import type { ActionItem } from '@vben/common-ui'; |
||||
|
|
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
import { VbenTableAction } from '@vben/common-ui'; |
||||
|
|
||||
|
const last = ref('无'); |
||||
|
|
||||
|
const actions: ActionItem[] = [ |
||||
|
{ key: 'edit', onClick: () => (last.value = '编辑'), text: '编辑' }, |
||||
|
]; |
||||
|
|
||||
|
const dropdownActions: ActionItem[] = [ |
||||
|
{ key: 'copy', onClick: () => (last.value = '复制'), text: '复制' }, |
||||
|
{ key: 'export', onClick: () => (last.value = '导出'), text: '导出' }, |
||||
|
{ |
||||
|
danger: true, |
||||
|
key: 'remove', |
||||
|
// 下拉项同样支持气泡确认 |
||||
|
popConfirm: { |
||||
|
cancelText: '取消', |
||||
|
confirm: () => (last.value = '已移除'), |
||||
|
okText: '确认', |
||||
|
title: '确定移除吗？', |
||||
|
}, |
||||
|
text: '移除', |
||||
|
}, |
||||
|
]; |
||||
|
</script> |
||||
|
<template> |
||||
|
<div> |
||||
|
<VbenTableAction |
||||
|
:actions="actions" |
||||
|
:dropdown-actions="dropdownActions" |
||||
|
align="start" |
||||
|
divider |
||||
|
more-text="更多" |
||||
|
/> |
||||
|
<p style="margin-top: 8px; font-size: 13px; opacity: 0.7"> |
||||
|
最近点击：{{ last }} |
||||
|
</p> |
||||
|
</div> |
||||
|
</template> |
||||
@ -0,0 +1,28 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import type { ActionItem } from '@vben/common-ui'; |
||||
|
|
||||
|
import { VbenTableAction } from '@vben/common-ui'; |
||||
|
|
||||
|
// 模拟当前用户拥有的权限码 |
||||
|
const allow = new Set(['user:detail', 'user:edit']); |
||||
|
|
||||
|
function hasPermission(auth?: string | string[]) { |
||||
|
if (!auth) return true; |
||||
|
const codes = Array.isArray(auth) ? auth : [auth]; |
||||
|
return codes.some((code) => allow.has(code)); |
||||
|
} |
||||
|
|
||||
|
const actions: ActionItem[] = [ |
||||
|
{ auth: 'user:edit', key: 'edit', text: '编辑' }, |
||||
|
{ auth: 'user:detail', key: 'detail', text: '详情' }, |
||||
|
// 无 user:delete 权限，按钮被隐藏 |
||||
|
{ auth: 'user:delete', danger: true, key: 'delete', text: '删除（无权限）' }, |
||||
|
]; |
||||
|
</script> |
||||
|
<template> |
||||
|
<VbenTableAction |
||||
|
:actions="actions" |
||||
|
:has-permission="hasPermission" |
||||
|
align="start" |
||||
|
/> |
||||
|
</template> |
||||
@ -0,0 +1,32 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import type { ActionItem } from '@vben/common-ui'; |
||||
|
|
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
import { VbenTableAction } from '@vben/common-ui'; |
||||
|
|
||||
|
const last = ref('无'); |
||||
|
|
||||
|
const actions: ActionItem[] = [ |
||||
|
{ key: 'edit', onClick: () => (last.value = '编辑'), text: '编辑' }, |
||||
|
{ |
||||
|
danger: true, |
||||
|
key: 'delete', |
||||
|
popConfirm: { |
||||
|
cancelText: '取消', |
||||
|
confirm: () => (last.value = '已删除'), |
||||
|
okText: '确认', |
||||
|
title: '确定删除这一行吗？', |
||||
|
}, |
||||
|
text: '删除', |
||||
|
}, |
||||
|
]; |
||||
|
</script> |
||||
|
<template> |
||||
|
<div> |
||||
|
<VbenTableAction :actions="actions" align="start" /> |
||||
|
<p style="margin-top: 8px; font-size: 13px; opacity: 0.7"> |
||||
|
最近操作：{{ last }} |
||||
|
</p> |
||||
|
</div> |
||||
|
</template> |
||||
@ -0,0 +1,17 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import type { ActionItem } from '@vben/common-ui'; |
||||
|
|
||||
|
import { VbenTableAction } from '@vben/common-ui'; |
||||
|
|
||||
|
const actions: ActionItem[] = [ |
||||
|
{ key: 'edit', text: '编辑', tooltip: '编辑这一行' }, |
||||
|
{ |
||||
|
key: 'detail', |
||||
|
text: '详情', |
||||
|
tooltip: { content: '查看详情', side: 'top' }, |
||||
|
}, |
||||
|
]; |
||||
|
</script> |
||||
|
<template> |
||||
|
<VbenTableAction :actions="actions" align="start" /> |
||||
|
</template> |
||||
@ -0,0 +1,102 @@ |
|||||
|
--- |
||||
|
outline: deep |
||||
|
--- |
||||
|
|
||||
|
# Vben Descriptions |
||||
|
|
||||
|
`Descriptions` displays a group of read-only fields, commonly used on detail pages and information previews. It is built on shadcn-ui with an API modeled after Ant Design Vue's Descriptions, supporting responsive columns, column spanning, borders, and vertical layout. |
||||
|
|
||||
|
> If the documentation does not cover the details you need, please refer to the online examples. |
||||
|
|
||||
|
::: info Before you start |
||||
|
|
||||
|
The component supports two usages: data-driven via `items` (recommended), or declaring entries with the `VbenDescriptionsItem` child component. `items` takes precedence when both are provided. ::: |
||||
|
|
||||
|
## Basic Usage |
||||
|
|
||||
|
Pass an array of fields via `items`, each with a `label` and `content`. Columns adapt to breakpoints by default (1 column on `xs`, 2 on `sm`, 3 on `md` and above). |
||||
|
|
||||
|
<DemoPreview dir="demos/vben-descriptions/basic" /> |
||||
|
|
||||
|
## Bordered |
||||
|
|
||||
|
Set `bordered` for a bordered style, combined with the `title` prop and the `#extra` slot (an action area on the right of the title). |
||||
|
|
||||
|
<DemoPreview dir="demos/vben-descriptions/bordered" /> |
||||
|
|
||||
|
## Vertical Layout |
||||
|
|
||||
|
Use `layout="vertical"` to place labels above their content. |
||||
|
|
||||
|
<DemoPreview dir="demos/vben-descriptions/vertical" /> |
||||
|
|
||||
|
## Sizes |
||||
|
|
||||
|
Use `size` to switch between `small`, `middle`, and `large`. |
||||
|
|
||||
|
<DemoPreview dir="demos/vben-descriptions/size" /> |
||||
|
|
||||
|
## Span & Responsive |
||||
|
|
||||
|
Set `span` on an item to span multiple columns; `'filled'` fills the remaining space of the current row. `column` accepts a breakpoint-keyed object for responsive columns. |
||||
|
|
||||
|
<DemoPreview dir="demos/vben-descriptions/span" /> |
||||
|
|
||||
|
## Child Component Usage |
||||
|
|
||||
|
When `items` is omitted, declare entries with `VbenDescriptionsItem` in the default slot. Content can be customized via the default slot or the `#content` slot. |
||||
|
|
||||
|
<DemoPreview dir="demos/vben-descriptions/custom" /> |
||||
|
|
||||
|
## API |
||||
|
|
||||
|
### Descriptions Props |
||||
|
|
||||
|
| Prop | Description | Type | Default | |
||||
|
| --- | --- | --- | --- | |
||||
|
| items | Data-driven entries; reads the default slot when omitted | `DescriptionsItemType[]` | - | |
||||
|
| bordered | Whether to show borders | `boolean` | `false` | |
||||
|
| column | Columns per row, supports breakpoint config | `number \| Partial<Record<Breakpoint, number>>` | `{ xs: 1, sm: 2, md: 3, xxxl: 4 }` | |
||||
|
| layout | Layout direction | `'horizontal' \| 'vertical'` | `'horizontal'` | |
||||
|
| size | Size | `'small' \| 'middle' \| 'large'` | `'middle'` | |
||||
|
| colon | Show colon (only for non-bordered horizontal layout) | `boolean` | `true` | |
||||
|
| title | Title | `string` | - | |
||||
|
| extra | Action area on the right of the title | `string` | - | |
||||
|
| labelStyle | Shared label style | `CSSProperties` | - | |
||||
|
| contentStyle | Shared content style | `CSSProperties` | - | |
||||
|
| class | Custom class for the root node | `string` | - | |
||||
|
|
||||
|
### Descriptions Slots |
||||
|
|
||||
|
| Slot | Description | |
||||
|
| ------- | ------------------------------------- | |
||||
|
| title | Custom title | |
||||
|
| extra | Custom action area beside the title | |
||||
|
| default | Place `VbenDescriptionsItem` children | |
||||
|
|
||||
|
### DescriptionsItem |
||||
|
|
||||
|
Each entry in `items`, or the props of the `VbenDescriptionsItem` child component. |
||||
|
|
||||
|
| Prop | Description | Type | Default | |
||||
|
| --- | --- | --- | --- | |
||||
|
| label | Label | `string \| number \| (() => VNode) \| Component` | - | |
||||
|
| content | Content | `string \| number \| (() => VNode) \| Component` | - | |
||||
|
| span | Columns to span, `'filled'` fills the rest of the row | `number \| 'filled' \| Partial<Record<Breakpoint, number>>` | `1` | |
||||
|
| labelStyle | Label style | `CSSProperties` | - | |
||||
|
| contentStyle | Content style | `CSSProperties` | - | |
||||
|
| key | Unique key | `string \| number` | - | |
||||
|
|
||||
|
### DescriptionsItem Slots |
||||
|
|
||||
|
Available only for the child component usage. |
||||
|
|
||||
|
| Slot | Description | |
||||
|
| ------- | --------------------------------- | |
||||
|
| default | Content (equivalent to `content`) | |
||||
|
| content | Custom content | |
||||
|
| label | Custom label | |
||||
|
|
||||
|
::: tip Breakpoint |
||||
|
|
||||
|
The responsive `Breakpoint` is one of `'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'`, with pixel values aligned with Ant Design (`sm` 576, `md` 768, `lg` 992, `xl` 1200, `xxl` 1600, `xxxl` 2000). ::: |
||||
@ -0,0 +1,165 @@ |
|||||
|
--- |
||||
|
outline: deep |
||||
|
--- |
||||
|
|
||||
|
# Vben TableAction |
||||
|
|
||||
|
`TableAction` renders a group of action buttons for table operation columns, inspired by the TableAction component from vben2. Built on shadcn-ui, it supports permission control, popconfirm, tooltips, a "more" dropdown, and dividers, and can be reused inside or outside tables. |
||||
|
|
||||
|
> If the documentation does not cover the details you need, please refer to the online examples. |
||||
|
|
||||
|
::: info Before you start |
||||
|
|
||||
|
The component carries no business logic (it does not read the permission store directly); permissions are handled by injecting `hasPermission`, keeping the core layer decoupled and reusable across frameworks. Inside vxe-table, the recommended approach is to render it via a column slot (`slots: { default: 'action' }`) on the page, without changing the table's original rendering mechanism. ::: |
||||
|
|
||||
|
## Basic Usage |
||||
|
|
||||
|
Pass an array of action items via `actions`, each with `text`, `onClick`, etc. `danger` marks destructive actions, and `divider` shows separators between buttons. |
||||
|
|
||||
|
<DemoPreview dir="demos/vben-table-action/basic" /> |
||||
|
|
||||
|
## Tooltip |
||||
|
|
||||
|
Add a tooltip to an action via `tooltip`, accepting a string or a `{ content, side }` object. |
||||
|
|
||||
|
<DemoPreview dir="demos/vben-table-action/tooltip" /> |
||||
|
|
||||
|
## PopConfirm |
||||
|
|
||||
|
Use `popConfirm` to require confirmation before the action runs, commonly used for destructive actions like delete. |
||||
|
|
||||
|
<DemoPreview dir="demos/vben-table-action/popconfirm" /> |
||||
|
|
||||
|
## More Dropdown |
||||
|
|
||||
|
Use `dropdownActions` to collapse secondary actions into a "more" dropdown. `moreText` customizes the button label. |
||||
|
|
||||
|
<DemoPreview dir="demos/vben-table-action/dropdown" /> |
||||
|
|
||||
|
## Permission Control |
||||
|
|
||||
|
Set an `auth` code on an action and inject a `hasPermission` resolver; actions without permission are hidden. |
||||
|
|
||||
|
<DemoPreview dir="demos/vben-table-action/permission" /> |
||||
|
|
||||
|
## Usage with vxe-table |
||||
|
|
||||
|
Without changing vxe-table's rendering mechanism, declare a slot in the column config and render it on the page. |
||||
|
|
||||
|
::: tip Recommended: use the adapter-wrapped version The project's `#/adapter/vxe-table` re-wraps `VbenTableAction` and injects `hasPermission` internally (based on `useAccess().hasAccessByCodes`). So when you import it from the adapter, **you no longer need to pass `:has-permission`** — just declare permission codes via the `auth` field of each action. ::: |
||||
|
|
||||
|
```ts |
||||
|
// data.ts — declare a slot in the column config |
||||
|
{ |
||||
|
align: 'center', |
||||
|
field: 'operation', |
||||
|
fixed: 'right', |
||||
|
slots: { default: 'action' }, |
||||
|
title: $t('system.user.operation'), |
||||
|
width: 180, |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
```vue |
||||
|
<!-- list.vue — import from the adapter; permission is auto-injected, no has-permission needed --> |
||||
|
<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> |
||||
|
``` |
||||
|
|
||||
|
If you import the core component directly from `@vben/common-ui` (without going through the adapter), the component carries no business logic and you need to inject `hasPermission` yourself: |
||||
|
|
||||
|
```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 |
||||
|
|
||||
|
| Prop | Description | Type | Default | |
||||
|
| --- | --- | --- | --- | |
||||
|
| actions | Main action buttons | `ActionItem[]` | `[]` | |
||||
|
| dropdownActions | Actions inside the "more" dropdown | `ActionItem[]` | `[]` | |
||||
|
| align | Alignment | `'start' \| 'center' \| 'end'` | `'end'` | |
||||
|
| divider | Whether to show separators between buttons | `boolean` | `false` | |
||||
|
| moreText | Label for the "more" button (shown beside the icon) | `string` | - | |
||||
|
| hasPermission | Permission resolver; returning `false` hides the action with that `auth` (auto-injected when imported from `#/adapter/vxe-table`, no need to pass manually) | `(auth?: string \| string[]) => boolean` | - | |
||||
|
| class | Custom class for the root node | `string` | - | |
||||
|
|
||||
|
### ActionItem |
||||
|
|
||||
|
| Prop | Description | Type | Default | |
||||
|
| --- | --- | --- | --- | |
||||
|
| text | Button text | `string` | - | |
||||
|
| icon | Icon component | `string` \| `VbenIcon` | - | |
||||
|
| onClick | Click callback | `() => void` | - | |
||||
|
| auth | Permission code, filtered by `hasPermission` | `string \| string[]` | - | |
||||
|
| ifShow | Whether to show | `boolean \| (() => boolean)` | `true` | |
||||
|
| disabled | Whether disabled | `boolean` | `false` | |
||||
|
| loading | Loading state | `boolean` | `false` | |
||||
|
| danger | Destructive action (red text) | `boolean` | `false` | |
||||
|
| tooltip | Tooltip | `string \| { content: string; side?: 'top' \| 'bottom' \| 'left' \| 'right' }` | - | |
||||
|
| popConfirm | PopConfirm | `TableActionPopConfirm` | - | |
||||
|
| variant | Button variant | `ButtonVariants['variant']` | `'link'` | |
||||
|
| size | Button size | `ButtonVariants['size']` | `'sm'` | |
||||
|
| key | Unique key | `string \| number` | - | |
||||
|
|
||||
|
### TableActionPopConfirm |
||||
|
|
||||
|
| Prop | Description | Type | Default | |
||||
|
| --- | --- | --- | --- | |
||||
|
| title | Confirm title | `string` | `'Are you sure?'` | |
||||
|
| okText | Confirm button text | `string` | `'OK'` | |
||||
|
| cancelText | Cancel button text | `string` | `'Cancel'` | |
||||
|
| confirm | Confirm callback; falls back to `action.onClick` if omitted | `() => void` | - | |
||||
@ -0,0 +1,6 @@ |
|||||
|
// eslint-disable-next-line n/no-extraneous-import
|
||||
|
import type { UserConfig } from '@commitlint/types'; |
||||
|
|
||||
|
declare const userConfig: UserConfig; |
||||
|
|
||||
|
export default userConfig; |
||||
@ -1,44 +0,0 @@ |
|||||
import type { Linter } from 'eslint'; |
|
||||
|
|
||||
import { interopDefault } from '../util'; |
|
||||
|
|
||||
const rulesCoveredByOxlint = new Set([ |
|
||||
'unicorn/consistent-function-scoping', |
|
||||
'unicorn/no-process-exit', |
|
||||
'unicorn/prefer-global-this', |
|
||||
'unicorn/prefer-module', |
|
||||
]); |
|
||||
|
|
||||
export async function unicorn(): Promise<Linter.Config[]> { |
|
||||
const pluginUnicorn = await interopDefault(import('eslint-plugin-unicorn')); |
|
||||
const recommendedRules = Object.fromEntries( |
|
||||
Object.entries(pluginUnicorn.configs.recommended.rules ?? {}).filter( |
|
||||
([ruleName]) => !rulesCoveredByOxlint.has(ruleName), |
|
||||
), |
|
||||
); |
|
||||
|
|
||||
return [ |
|
||||
{ |
|
||||
plugins: { |
|
||||
unicorn: pluginUnicorn, |
|
||||
}, |
|
||||
rules: { |
|
||||
...recommendedRules, |
|
||||
|
|
||||
'unicorn/better-regex': 'off', |
|
||||
'unicorn/consistent-destructuring': 'off', |
|
||||
'unicorn/expiring-todo-comments': 'off', |
|
||||
'unicorn/filename-case': 'off', |
|
||||
'unicorn/import-style': 'off', |
|
||||
'unicorn/no-array-for-each': 'off', |
|
||||
'unicorn/no-null': 'off', |
|
||||
'unicorn/no-useless-undefined': 'off', |
|
||||
'unicorn/prefer-at': 'off', |
|
||||
'unicorn/prefer-dom-node-text-content': 'off', |
|
||||
'unicorn/prefer-export-from': ['error', { ignoreUsedVariables: true }], |
|
||||
'unicorn/prefer-top-level-await': 'off', |
|
||||
'unicorn/prevent-abbreviations': 'off', |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
} |
|
||||
@ -1,7 +1,24 @@ |
|||||
import type { OxlintConfig } from 'oxlint'; |
import type { OxlintConfig } from 'oxlint'; |
||||
|
|
||||
const plugins: OxlintConfig = { |
const plugins: OxlintConfig = { |
||||
plugins: ['import', 'node', 'oxc', 'typescript', 'unicorn', 'vitest', 'vue'], |
/** |
||||
|
* oxlint 支持的插件，将默认开启的也显示配置 |
||||
|
* type: eslint | react | unicorn | typescript | oxc | |
||||
|
* import | jsdoc | jest | vitest | jsx-a11y | nextjs | |
||||
|
* react-perf | promise | node | vue |
||||
|
* |
||||
|
* Default: eslint,typescript,unicorn,oxc |
||||
|
*/ |
||||
|
plugins: [ |
||||
|
'eslint', |
||||
|
'import', |
||||
|
'node', |
||||
|
'oxc', |
||||
|
'typescript', |
||||
|
'unicorn', |
||||
|
'vitest', |
||||
|
'vue', |
||||
|
], |
||||
}; |
}; |
||||
|
|
||||
export { plugins }; |
export { plugins }; |
||||
|
|||||
@ -1,6 +1,6 @@ |
|||||
{ |
{ |
||||
"$schema": "https://json.schemastore.org/tsconfig", |
"$schema": "https://json.schemastore.org/tsconfig", |
||||
"extends": "@vben/tsconfig/node.json", |
"extends": "@vben/tsconfig/node.json", |
||||
"include": ["src"], |
"include": ["src", "tsdown.config.ts"], |
||||
"exclude": ["node_modules"] |
"exclude": ["node_modules"] |
||||
} |
} |
||||
|
|||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue