by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

Browse Source
This commit is contained in:
dap 2024-11-30 20:03:53 +08:00
commit 839e2e4321
23 changed files with 117 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/ISSUE_TEMPLATE/bug-report.yml vendored
View File

@ -62,7 +62,7 @@ body:
description: Before submitting the issue, please make sure you do the following
# description: By submitting this issue, you agree to follow our [Code of Conduct](https://example.com).
options:
- label: Read the [docs](https://anncwb.github.io/vue-vben-admin-doc/)
- label: Read the [docs](https://doc.vben.pro/)
required: true
- label: Ensure the code is up to date. (Some issues have been fixed in the latest version)
required: true

2
.github/ISSUE_TEMPLATE/feature-request.yml vendored
View File

@ -62,7 +62,7 @@ body:
label: Validations
description: Before submitting the issue, please make sure you do the following
options:
- label: Read the [docs](https://anncwb.github.io/vue-vben-admin-doc/)
- label: Read the [docs](https://doc.vben.pro/)
required: true
- label: Ensure the code is up to date. (Some issues have been fixed in the latest version)
required: true

15
apps/web-ele/src/views/demos/element/index.vue
View File

@ -1,4 +1,6 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import {
@ -6,6 +8,7 @@ import {
ElCard,
ElMessage,
ElNotification,
ElSegmented,
ElSpace,
ElTable,
} from 'element-plus';
@ -47,6 +50,10 @@ const tableData = [
{ prop1: '5', prop2: 'E' },
{ prop1: '6', prop2: 'F' },
];
const segmentedValue = ref('Mon');
const segmentedOptions = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
</script>
<template>
@ -84,6 +91,14 @@ const tableData = [
<ElButton type="success" @click="notify('success')"> 成功 </ElButton>
</ElSpace>
</ElCard>
<ElCard class="mb-5">
<template #header> Segmented </template>
<ElSegmented
v-model="segmentedValue"
:options="segmentedOptions"
size="large"
/>
</ElCard>
<ElCard class="mb-5">
<ElTable :data="tableData" stripe>
<ElTable.TableColumn label="测试列1" prop="prop1" />

1
docs/src/components/common-ui/vben-drawer.md
View File

@ -88,6 +88,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
| closeOnPressEscape | esc 关闭弹窗 | `boolean` | `true` |
| confirmText | 确认按钮文本 | `string\|slot` | `确认` |
| cancelText | 取消按钮文本 | `string\|slot` | `取消` |
| placement | 抽屉弹出位置 | `'left'\|'right'\|'top'\|'bottom'` | `right` |
| showCancelButton | 显示取消按钮 | `boolean` | `true` |
| showConfirmButton | 显示确认按钮文本 | `boolean` | `true` |
| class | modal的class，宽度通过这个配置 | `string` | - |

3
docs/src/components/common-ui/vben-modal.md
View File

@ -93,13 +93,14 @@ const [Modal, modalApi] = useVbenModal({
| modal | 显示遮罩 | `boolean` | `true` |
| header | 显示header | `boolean` | `true` |
| footer | 显示footer | `boolean\|slot` | `true` |
| confirmDisabled | 禁用确认按钮 | `boolean` | `false` |
| confirmLoading | 确认按钮loading状态 | `boolean` | `false` |
| closeOnClickModal | 点击遮罩关闭弹窗 | `boolean` | `true` |
| closeOnPressEscape | esc 关闭弹窗 | `boolean` | `true` |
| confirmText | 确认按钮文本 | `string\|slot` | `确认` |
| cancelText | 取消按钮文本 | `string\|slot` | `取消` |
| showCancelButton | 显示取消按钮 | `boolean` | `true` |
| showConfirmButton | 显示确认按钮文本 | `boolean` | `true` |
| showConfirmButton | 显示确认按钮 | `boolean` | `true` |
| class | modal的class，宽度通过这个配置 | `string` | - |
| contentClass | modal内容区域的class | `string` | - |
| footerClass | modal底部区域的class | `string` | - |

2
packages/@core/base/design/package.json
View File

@ -28,7 +28,7 @@
".": {
"types": "./src/index.ts",
"development": "./src/index.ts",
"default": "./dist/style.css"
"default": "./dist/design.css"
}
},
"publishConfig": {

2
packages/@core/base/design/src/design-tokens/dark.css
View File

@ -58,6 +58,8 @@
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
--accent: 216 5% 19%;
--accent-dark: 240 0% 22%;
--accent-darker: 240 0% 26%;
--accent-lighter: 216 5% 12%;
--accent-hover: 216 5% 24%;
--accent-foreground: 0 0% 98%;

2
packages/@core/base/design/src/design-tokens/default.css
View File

@ -58,6 +58,8 @@
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
--accent: 240 5% 96%;
--accent-dark: 216 14% 93%;
--accent-darker: 216 11% 91%;
--accent-lighter: 240 0% 98%;
--accent-hover: 200deg 10% 90%;
--accent-foreground: 240 6% 10%;

2
packages/@core/ui-kit/form-ui/src/form-api.ts
View File

@ -185,7 +185,7 @@ export class FormApi {
const fieldSet = new Set(fields);
const schema = this.state?.schema ?? [];
const filterSchema = schema.filter((item) => fieldSet.has(item.fieldName));
const filterSchema = schema.filter((item) => !fieldSet.has(item.fieldName));
this.setState({
schema: filterSchema,

1
packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
View File

@ -41,6 +41,7 @@ export class DrawerApi {
loading: false,
modal: true,
openAutoFocus: false,
placement: 'right',
showCancelButton: true,
showConfirmButton: true,
title: '',

8
packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
View File

@ -4,6 +4,8 @@ import type { DrawerApi } from './drawer-api';
import type { Component, Ref } from 'vue';
export type DrawerPlacement = 'bottom' | 'left' | 'right' | 'top';
export interface DrawerProps {
/**
* 取消按钮文字
@ -72,6 +74,12 @@ export interface DrawerProps {
* 是否自动聚焦
*/
openAutoFocus?: boolean;
/**
* 抽屉位置
* @default right
*/
placement?: DrawerPlacement;
/**
* 是否显示取消按钮
* @default true

5
packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
View File

@ -62,6 +62,7 @@ const {
loading: showLoading,
modal,
openAutoFocus,
placement,
showCancelButton,
showConfirmButton,
title,
@ -119,11 +120,13 @@ function handleFocusOutside(e: Event) {
<SheetContent
:class="
cn('flex w-[520px] flex-col', drawerClass, {
'!w-full': isMobile,
'!w-full': isMobile || placement === 'bottom' || placement === 'top',
'max-h-[100vh]': placement === 'bottom' || placement === 'top',
})
"
:modal="modal"
:open="state?.isOpen"
:side="placement"
@close-auto-focus="handleFocusOutside"
@escape-key-down="escapeKeyDown"
@focus-outside="handleFocusOutside"

1
packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
View File

@ -41,6 +41,7 @@ export class ModalApi {
class: '',
closeOnClickModal: true,
closeOnPressEscape: true,
confirmDisabled: false,
confirmLoading: false,
contentClass: '',
draggable: false,

4
packages/@core/ui-kit/popup-ui/src/modal/modal.ts
View File

@ -35,6 +35,10 @@ export interface ModalProps {
* @default true
*/
closeOnPressEscape?: boolean;
/**
* 禁用确认按钮
*/
confirmDisabled?: boolean;
/**
* 确定按钮 loading
* @default false

4
packages/@core/ui-kit/popup-ui/src/modal/modal.vue
View File

@ -59,6 +59,7 @@ const {
closable,
closeOnClickModal,
closeOnPressEscape,
confirmDisabled,
confirmLoading,
confirmText,
contentClass,
@ -235,7 +236,7 @@ function handleFocusOutside(e: Event) {
ref="wrapperRef"
:class="
cn('relative min-h-40 flex-1 overflow-y-auto p-3', contentClass, {
'overflow-hidden': showLoading,
'pointer-events-none overflow-hidden': showLoading,
})
"
>
@ -285,6 +286,7 @@ function handleFocusOutside(e: Event) {
<component
:is="components.PrimaryButton || VbenButton"
v-if="showConfirmButton"
:disabled="confirmDisabled"
:loading="confirmLoading"
@click="() => modalApi?.onConfirm()"
>

46
packages/effects/common-ui/src/components/ellipsis-text/__tests__/ellipsis-text.test.ts
View File

@ -1,46 +0,0 @@
import { mount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';
import { EllipsisText } from '..';
describe('ellipsis-text.vue', () => {
it('renders the correct content and truncates text', async () => {
const wrapper = mount(EllipsisText, {
props: {
line: 1,
title: 'Test Title',
},
slots: {
default: 'This is a very long text that should be truncated.',
},
});
expect(wrapper.text()).toContain('This is a very long text');
// 检查 ellipsis 是否应用了正确的 class
const ellipsis = wrapper.find('.truncate');
expect(ellipsis.exists()).toBe(true);
});
it('expands text on click if expand is true', async () => {
const wrapper = mount(EllipsisText, {
props: {
expand: true,
line: 1,
},
slots: {
default: 'This is a very long text that should be truncated.',
},
});
const ellipsis = wrapper.find('.truncate');
// 点击 ellipsis，应该触发 expandChange，参数为 false
await ellipsis.trigger('click');
expect(wrapper.emitted('expandChange')).toBeTruthy();
expect(wrapper.emitted('expandChange')?.[0]).toEqual([true]);
// 再次点击，应该触发 expandChange，参数为 false
await ellipsis.trigger('click');
expect(wrapper.emitted('expandChange')?.length).toBe(2);
expect(wrapper.emitted('expandChange')?.[1]).toEqual([false]);
});
});

3
packages/effects/hooks/src/use-design-tokens.ts
View File

@ -260,6 +260,9 @@ export function useElementPlusDesignTokens() {
'--el-fill-color-light': getCssVariableValue('--accent'),
'--el-fill-color-lighter': getCssVariableValue('--accent-lighter'),
'--el-fill-color-dark': getCssVariableValue('--accent-dark'),
'--el-fill-color-darker': getCssVariableValue('--accent-darker'),
// 解决ElLoading背景色问题
'--el-mask-color': isDark.value
? 'rgba(0,0,0,.8)'

6
packages/effects/plugins/src/vxe-table/extends.ts
View File

@ -43,7 +43,11 @@ function extendProxyOption(
const data = await configFn(
params,
{
...customValues,
/**
* 开启toolbarConfig.refresh功能
* 点击刷新按钮 这里的值为PointerEvent 会携带错误参数
*/
...(customValues instanceof PointerEvent ? {} : customValues),
...formValues,
},
...args,

26
playground/src/views/demos/access/button-control.vue
View File

@ -79,17 +79,17 @@ async function changeAccount(role: string) {
<Card class="mb-5" title="组件形式控制 - 权限码">
<AccessControl :codes="['AC_100100']" type="code">
<Button class="mr-4"> Super 账号可见 ["AC_1000001"] </Button>
<Button class="mr-4"> Super 账号可见 ["AC_100100"] </Button>
</AccessControl>
<AccessControl :codes="['AC_100030']" type="code">
<Button class="mr-4"> Admin 账号可见 ["AC_100010"] </Button>
<Button class="mr-4"> Admin 账号可见 ["AC_100030"] </Button>
</AccessControl>
<AccessControl :codes="['AC_1000001']" type="code">
<Button class="mr-4"> User 账号可见 ["AC_1000001"] </Button>
</AccessControl>
<AccessControl :codes="['AC_100100', 'AC_100010']" type="code">
<AccessControl :codes="['AC_100100', 'AC_100030']" type="code">
<Button class="mr-4">
Super & Admin 账号可见 ["AC_100100","AC_1000001"]
Super & Admin 账号可见 ["AC_100100","AC_100030"]
</Button>
</AccessControl>
</Card>
@ -115,35 +115,35 @@ async function changeAccount(role: string) {
<Card class="mb-5" title="函数形式控制">
<Button v-if="hasAccessByCodes(['AC_100100'])" class="mr-4">
Super 账号可见 ["AC_1000001"]
Super 账号可见 ["AC_100100"]
</Button>
<Button v-if="hasAccessByCodes(['AC_100030'])" class="mr-4">
Admin 账号可见 ["AC_100010"]
Admin 账号可见 ["AC_100030"]
</Button>
<Button v-if="hasAccessByCodes(['AC_1000001'])" class="mr-4">
User 账号可见 ["AC_1000001"]
</Button>
<Button v-if="hasAccessByCodes(['AC_100100', 'AC_1000001'])" class="mr-4">
Super & Admin 账号可见 ["AC_100100","AC_1000001"]
<Button v-if="hasAccessByCodes(['AC_100100', 'AC_100030'])" class="mr-4">
Super & Admin 账号可见 ["AC_100100","AC_100030"]
</Button>
</Card>
<Card class="mb-5" title="指令方式 - 权限码">
<Button class="mr-4" v-access:code="['AC_100100']">
Super 账号可见 ["AC_1000001"]
Super 账号可见 ["AC_100100"]
</Button>
<Button class="mr-4" v-access:code="['AC_100030']">
Admin 账号可见 ["AC_100010"]
Admin 账号可见 ["AC_100030"]
</Button>
<Button class="mr-4" v-access:code="['AC_1000001']">
User 账号可见 ["AC_1000001"]
</Button>
<Button class="mr-4" v-access:code="['AC_100100', 'AC_1000001']">
Super & Admin 账号可见 ["AC_100100","AC_1000001"]
<Button class="mr-4" v-access:code="['AC_100100', 'AC_100030']">
Super & Admin 账号可见 ["AC_100100","AC_100030"]
</Button>
</Card>
<Card class="mb-5" title="指令方式 - 角色">
<Card v-if="accessMode === 'frontend'" class="mb-5" title="指令方式 - 角色">
<Button class="mr-4" v-access:role="['super']"> Super 角色可见 </Button>
<Button class="mr-4" v-access:role="['admin']"> Admin 角色可见 </Button>
<Button class="mr-4" v-access:role="['user']"> User 角色可见 </Button>

11
playground/src/views/demos/features/icons/index.vue
View File

@ -60,6 +60,17 @@ import IconPicker from './icon-picker.vue';
</div>
</Card>
<Card class="mb-5" title="Tailwind CSS">
<div class="flex items-center gap-5 text-3xl">
<span class="icon-[ant-design--alipay-circle-outlined]"></span>
<span class="icon-[ant-design--account-book-filled]"></span>
<span class="icon-[ant-design--container-outlined]"></span>
<span class="icon-[svg-spinners--wind-toy]"></span>
<span class="icon-[svg-spinners--blocks-wave]"></span>
<span class="icon-[line-md--compass-filled-loop]"></span>
</div>
</Card>
<Card class="mb-5" title="图标选择器(Iconify)">
<div class="flex items-center gap-5">
<IconPicker width="300px" />

17
playground/src/views/examples/drawer/index.vue
View File

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Page, useVbenDrawer } from '@vben/common-ui';
import { type DrawerPlacement, Page, useVbenDrawer } from '@vben/common-ui';
import { Button, Card } from 'ant-design-vue';
@ -13,6 +13,7 @@ import SharedDataDemo from './shared-data-demo.vue';
const [BaseDrawer, baseDrawerApi] = useVbenDrawer({
// 连接抽离的组件
connectedComponent: BaseDemo,
// placement: 'left',
});
const [AutoHeightDrawer, autoHeightDrawerApi] = useVbenDrawer({
@ -31,7 +32,8 @@ const [FormDrawer, formDrawerApi] = useVbenDrawer({
connectedComponent: FormDrawerDemo,
});
function openBaseDrawer() {
function openBaseDrawer(placement: DrawerPlacement = 'right') {
baseDrawerApi.setState({ placement });
baseDrawerApi.open();
}
@ -81,7 +83,16 @@ function openFormDrawer() {
<Card class="mb-4" title="基本使用">
<p class="mb-3">一个基础的抽屉示例</p>
<Button type="primary" @click="openBaseDrawer">打开抽屉</Button>
<Button type="primary" @click="openBaseDrawer('right')">右侧打开</Button>
<Button class="ml-2" type="primary" @click="openBaseDrawer('bottom')">
底部打开
</Button>
<Button class="ml-2" type="primary" @click="openBaseDrawer('left')">
左侧打开
</Button>
<Button class="ml-2" type="primary" @click="openBaseDrawer('top')">
顶部打开
</Button>
</Card>
<Card class="mb-4" title="内容高度自适应滚动">

4
playground/src/views/examples/modal/auto-height-demo.vue
View File

@ -22,10 +22,10 @@ const [Modal, modalApi] = useVbenModal({
});
function handleUpdate(len: number) {
modalApi.setState({ loading: true });
modalApi.setState({ confirmDisabled: true, loading: true });
setTimeout(() => {
list.value = Array.from({ length: len }, (_v, k) => k + 1);
modalApi.setState({ loading: false });
modalApi.setState({ confirmDisabled: false, loading: false });
}, 2000);
}
</script>

44
pnpm-workspace.yaml
View File

@ -13,7 +13,7 @@ packages:
- docs
- playground
catalog:
'@ast-grep/napi': ^0.30.0
'@ast-grep/napi': ^0.30.1
'@changesets/changelog-github': ^0.5.0
'@changesets/cli': ^2.27.10
'@changesets/git': ^3.0.2
@ -23,7 +23,7 @@ catalog:
'@ctrl/tinycolor': ^4.1.0
'@eslint/js': ^9.15.0
'@faker-js/faker': ^9.2.0
'@iconify/json': ^2.2.275
'@iconify/json': ^2.2.276
'@iconify/tailwind': ^1.1.3
'@iconify/vue': ^4.1.2
'@intlify/core-base': ^10.0.4
@ -36,24 +36,24 @@ catalog:
'@stylistic/stylelint-plugin': ^3.1.1
'@tailwindcss/nesting': 0.0.0-insiders.565cd3e
'@tailwindcss/typography': ^0.5.15
'@tanstack/vue-query': ^5.61.3
'@tanstack/vue-store': ^0.5.7
'@tanstack/vue-query': ^5.61.4
'@tanstack/vue-store': ^0.6.0
'@types/archiver': ^6.0.3
'@types/eslint': ^9.6.1
'@types/html-minifier-terser': ^7.0.2
'@types/jsonwebtoken': ^9.0.7
'@types/lodash.clonedeep': ^4.5.9
'@types/node': ^22.9.3
'@types/node': ^22.10.0
'@types/nprogress': ^0.2.3
'@types/postcss-import': ^14.0.3
'@types/qrcode': ^1.5.5
'@types/sortablejs': ^1.15.8
'@typescript-eslint/eslint-plugin': ^8.15.0
'@typescript-eslint/parser': ^8.15.0
'@typescript-eslint/eslint-plugin': ^8.16.0
'@typescript-eslint/parser': ^8.16.0
'@vee-validate/zod': ^4.14.7
'@vite-pwa/vitepress': ^0.5.3
'@vitejs/plugin-vue': ^5.2.0
'@vitejs/plugin-vue-jsx': ^4.1.0
'@vitejs/plugin-vue': ^5.2.1
'@vitejs/plugin-vue-jsx': ^4.1.1
'@vue/reactivity': ^3.5.13
'@vue/shared': ^3.5.13
'@vue/test-utils': ^2.4.6
@ -62,18 +62,18 @@ catalog:
ant-design-vue: ^4.2.6
archiver: ^7.0.1
autoprefixer: ^10.4.20
axios: ^1.7.7
axios: ^1.7.8
axios-mock-adapter: ^2.1.0
cac: ^6.7.14
chalk: ^5.3.0
cheerio: 1.0.0
circular-dependency-scanner: ^2.3.0
class-variance-authority: ^0.7.0
class-variance-authority: ^0.7.1
clsx: ^2.1.1
commitlint-plugin-function-rules: ^4.0.1
consola: ^3.2.3
cross-env: ^7.0.3
cspell: 8.16.0
cspell: ^8.16.1
cssnano: ^7.0.6
cz-git: ^1.11.0
czg: ^1.11.0
@ -84,11 +84,11 @@ catalog:
echarts: ^5.5.1
element-plus: ^2.8.8
eslint: ^9.15.0
eslint-config-turbo: ^2.3.1
eslint-config-turbo: ^2.3.3
eslint-plugin-command: ^0.2.6
eslint-plugin-eslint-comments: ^3.2.0
eslint-plugin-import-x: ^4.4.3
eslint-plugin-jsdoc: ^50.5.0
eslint-plugin-jsdoc: ^50.6.0
eslint-plugin-jsonc: ^2.18.2
eslint-plugin-n: ^17.14.0
eslint-plugin-no-only-tests: ^3.3.0
@ -112,9 +112,9 @@ catalog:
jsonwebtoken: ^9.0.2
lint-staged: ^15.2.10
lodash.clonedeep: ^4.5.0
lucide-vue-next: ^0.460.0
lucide-vue-next: ^0.461.0
medium-zoom: ^1.1.0
naive-ui: ^2.40.1
naive-ui: ^2.40.2
nitropack: ^2.10.4
nprogress: ^0.2.0
ora: ^8.1.1
@ -128,7 +128,7 @@ catalog:
postcss-import: ^16.1.0
postcss-preset-env: ^10.1.1
postcss-scss: ^4.0.9
prettier: ^3.3.3
prettier: ^3.4.1
prettier-plugin-tailwindcss: ^0.6.9
publint: ^0.2.12
qrcode: ^1.5.4
@ -148,16 +148,16 @@ catalog:
stylelint-order: ^6.0.4
stylelint-prettier: ^5.0.2
stylelint-scss: ^6.10.0
tailwind-merge: ^2.5.4
tailwind-merge: ^2.5.5
tailwindcss: ^3.4.15
tailwindcss-animate: ^1.0.7
theme-colors: ^0.1.0
turbo: ^2.3.1
turbo: ^2.3.3
typescript: 5.6.3
unbuild: ^3.0.0-rc.11
unplugin-element-plus: ^0.8.0
vee-validate: ^4.14.7
vite: ^5.4.11
vite: ^6.0.1
vite-plugin-compression: ^0.5.1
vite-plugin-dts: 4.2.1
vite-plugin-html: ^3.2.2
@ -166,11 +166,11 @@ catalog:
vite-plugin-vue-devtools: ^7.6.4
vitepress: ^1.5.0
vitepress-plugin-group-icons: ^1.3.0
vitest: ^2.1.5
vitest: ^2.1.6
vue: ^3.5.13
vue-eslint-parser: ^9.4.3
vue-i18n: ^10.0.4
vue-router: ^4.4.5
vue-router: ^4.5.0
vue-tsc: ^2.1.10
vxe-pc-ui: ^4.3.4
vxe-table: 4.9.5