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 into dev

Browse Source
This commit is contained in:
dap 2025-03-27 19:27:26 +08:00
commit c0476613d7
6 changed files with 278 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
apps/web-antd/src/adapter/component/index.ts
View File

@ -44,6 +44,7 @@ import { FileUpload, ImageUpload } from '#/components/upload';
const withDefaultPlaceholder = <T extends Component>(
component: T,
type: 'input' | 'select',
componentProps: Recordable<any> = {},
) => {
return defineComponent({
inheritAttrs: false,
@ -74,7 +75,13 @@ const withDefaultPlaceholder = <T extends Component>(
return () =>
h(
component,
{ ...props, ...attrs, placeholder: placeholder.value, ref: innerRef },
{
...componentProps,
placeholder: placeholder.value,
...props,
...attrs,
ref: innerRef,
},
slots,
);
},
@ -118,38 +125,20 @@ async function initComponentAdapter() {
// 如果你的组件体积比较大，可以使用异步加载
// Button: () =>
// import('xxx').then((res) => res.Button),
ApiSelect: (props, { attrs, slots }) => {
return h(
ApiComponent,
{
placeholder: $t('ui.placeholder.select'),
...props,
...attrs,
ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
component: Select,
loadingSlot: 'suffixIcon',
visibleEvent: 'onDropdownVisibleChange',
modelPropName: 'value',
},
slots,
);
},
ApiTreeSelect: (props, { attrs, slots }) => {
return h(
ApiComponent,
{
placeholder: $t('ui.placeholder.select'),
...props,
...attrs,
}),
ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
component: TreeSelect,
fieldNames: { label: 'label', value: 'value', children: 'children' },
loadingSlot: 'suffixIcon',
modelPropName: 'value',
optionsPropName: 'treeData',
visibleEvent: 'onVisibleChange',
},
slots,
);
},
}),
AutoComplete,
Checkbox,
CheckboxGroup,
@ -159,19 +148,11 @@ async function initComponentAdapter() {
return h(Button, { ...props, attrs, type: 'default' }, slots);
},
Divider,
IconPicker: (props, { attrs, slots }) => {
return h(
IconPicker,
{
IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
iconSlot: 'addonAfter',
inputComponent: Input,
modelValueProp: 'value',
...props,
...attrs,
},
slots,
);
},
}),
Input: withDefaultPlaceholder(Input, 'input'),
InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
InputPassword: withDefaultPlaceholder(InputPassword, 'input'),

161
packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
View File

@ -4,7 +4,9 @@ import type { FlattenedItem } from 'radix-vue';
import type { ClassType, Recordable } from '@vben-core/typings';
import { onMounted, ref, watch, watchEffect } from 'vue';
import type { TreeProps } from './types';
import { onMounted, ref, watchEffect } from 'vue';
import { ChevronRight, IconifyIcon } from '@vben-core/icons';
import { cn, get } from '@vben-core/shared/utils';
@ -14,46 +16,13 @@ import { TreeItem, TreeRoot } from 'radix-vue';
import { Checkbox } from '../checkbox';
interface TreeProps {
/** 单选时允许取消已有选项 */
allowClear?: boolean;
/** 显示边框 */
bordered?: boolean;
/** 取消父子关联选择 */
checkStrictly?: boolean;
/** 子级字段名 */
childrenField?: string;
/** 默认展开的键 */
defaultExpandedKeys?: Array<number | string>;
/** 默认展开的级别（优先级高于defaultExpandedKeys） */
defaultExpandedLevel?: number;
/** 默认值 */
defaultValue?: Arrayable<number | string>;
/** 禁用 */
disabled?: boolean;
/** 自定义节点类名 */
getNodeClass?: (item: FlattenedItem<Recordable<any>>) => string;
iconField?: string;
/** label字段 */
labelField?: string;
/** 当前值 */
modelValue?: Arrayable<number | string>;
/** 是否多选 */
multiple?: boolean;
/** 显示由iconField指定的图标 */
showIcon?: boolean;
/** 启用展开收缩动画 */
transition?: boolean;
/** 树数据 */
treeData: Recordable<any>[];
/** 值字段 */
valueField?: string;
}
const props = withDefaults(defineProps<TreeProps>(), {
allowClear: false,
autoCheckParent: true,
bordered: false,
checkStrictly: false,
defaultExpandedKeys: () => [],
defaultExpandedLevel: 0,
disabled: false,
expanded: () => [],
iconField: 'icon',
@ -61,7 +30,7 @@ const props = withDefaults(defineProps<TreeProps>(), {
modelValue: () => [],
multiple: false,
showIcon: true,
transition: false,
transition: true,
valueField: 'value',
childrenField: 'children',
});
@ -72,28 +41,36 @@ const emits = defineEmits<{
'update:modelValue': [value: Arrayable<Recordable<any>>];
}>();
interface InnerFlattenItem<T = Recordable<any>> {
interface InnerFlattenItem<T = Recordable<any>, P = number | string> {
hasChildren: boolean;
level: number;
parents: P[];
value: T;
}
function flatten<T = Recordable<any>>(
function flatten<T = Recordable<any>, P = number | string>(
items: T[],
childrenField: string = 'children',
level = 0,
): InnerFlattenItem<T>[] {
const result: InnerFlattenItem<T>[] = [];
parents: P[] = [],
): InnerFlattenItem<T, P>[] {
const result: InnerFlattenItem<T, P>[] = [];
items.forEach((item) => {
const children = get(item, childrenField) as Array<T>;
const val = {
hasChildren: Array.isArray(children) && children.length > 0,
level,
parents: [...parents],
value: item,
};
result.push(val);
if (val.hasChildren)
result.push(...flatten(children, childrenField, level + 1));
result.push(
...flatten(children, childrenField, level + 1, [
...parents,
get(item, props.valueField),
]),
);
});
return result;
}
@ -133,14 +110,6 @@ function updateTreeValue() {
: getItemByValue(val);
}
watch(
modelValue,
() => {
updateTreeValue();
},
{ deep: true, immediate: true },
);
function updateModelValue(val: Arrayable<Recordable<any>>) {
modelValue.value = Array.isArray(val)
? val.map((v) => get(v, props.valueField))
@ -186,7 +155,33 @@ function collapseAll() {
function onToggle(item: FlattenedItem<Recordable<any>>) {
emits('expand', item);
}
function onSelect(item: FlattenedItem<Recordable<any>>) {
function onSelect(item: FlattenedItem<Recordable<any>>, isSelected: boolean) {
if (
!props.checkStrictly &&
props.multiple &&
props.autoCheckParent &&
isSelected
) {
flattenData.value
.find((i) => {
return (
get(i.value, props.valueField) === get(item.value, props.valueField)
);
})
?.parents?.forEach((p) => {
if (Array.isArray(modelValue.value) && !modelValue.value.includes(p)) {
modelValue.value.push(p);
}
});
} else {
if (Array.isArray(modelValue.value)) {
const index = modelValue.value.indexOf(get(item.value, props.valueField));
if (index !== -1) {
modelValue.value.splice(index, 1);
}
}
}
updateTreeValue();
emits('select', item);
}
@ -224,6 +219,11 @@ defineExpose({
<div class="w-full" v-if="$slots.header">
<slot name="header"> </slot>
</div>
<TransitionGroup
:name="transition ? 'fade' : ''"
mode="out-in"
class="container"
>
<TreeItem
v-for="item in flattenItems"
v-slot="{
@ -246,7 +246,7 @@ defineExpose({
if (event.detail.originalEvent.type === 'click') {
// event.preventDefault();
}
onSelect(item);
onSelect(item, event.detail.isSelected);
}
"
@toggle="
@ -263,7 +263,12 @@ defineExpose({
v-if="item.hasChildren"
class="size-4 cursor-pointer transition"
:class="{ 'rotate-90': isExpanded }"
@click.stop="handleToggle"
@click.stop="
() => {
handleToggle();
onToggle(item);
}
"
/>
<div v-else class="h-4 w-4">
<!-- <IconifyIcon v-if="item.value.icon" :icon="item.value.icon" /> -->
@ -272,15 +277,21 @@ defineExpose({
v-if="multiple"
:checked="isSelected"
:indeterminate="isIndeterminate"
@click.stop="handleSelect"
@click="
() => {
handleSelect();
// onSelect(item, !isSelected);
}
"
/>
<div
class="flex items-center gap-1 pl-2"
@click="
($event) => {
$event.stopPropagation();
$event.preventDefault();
(_event) => {
// $event.stopPropagation();
// $event.preventDefault();
handleSelect();
// onSelect(item, !isSelected);
}
"
>
@ -294,8 +305,44 @@ defineExpose({
</slot>
</div>
</TreeItem>
</TransitionGroup>
<div class="w-full" v-if="$slots.footer">
<slot name="footer"> </slot>
</div>
</TreeRoot>
</template>
<style lang="scss" scoped>
.container {
position: relative;
padding: 0;
list-style-type: none;
}
.item {
box-sizing: border-box;
width: 100%;
height: 30px;
background-color: #f3f3f3;
border: 1px solid #666;
}
/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: scaleY(0.01) translate(30px, 0);
}
/* 3. 确保离开的项目被移除出了布局流
以便正确地计算移动时的动画效果。 */
.fade-leave-active {
position: absolute;
}
</style>

42
packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts Normal file
View File

@ -0,0 +1,42 @@
import type { Arrayable } from '@vueuse/core';
import type { FlattenedItem } from 'radix-vue';
import type { Recordable } from '@vben-core/typings';
export interface TreeProps {
/** 单选时允许取消已有选项 */
allowClear?: boolean;
/** 非关联选择时，自动选中上级节点 */
autoCheckParent?: boolean;
/** 显示边框 */
bordered?: boolean;
/** 取消父子关联选择 */
checkStrictly?: boolean;
/** 子级字段名 */
childrenField?: string;
/** 默认展开的键 */
defaultExpandedKeys?: Array<number | string>;
/** 默认展开的级别（优先级高于defaultExpandedKeys） */
defaultExpandedLevel?: number;
/** 默认值 */
defaultValue?: Arrayable<number | string>;
/** 禁用 */
disabled?: boolean;
/** 自定义节点类名 */
getNodeClass?: (item: FlattenedItem<Recordable<any>>) => string;
iconField?: string;
/** label字段 */
labelField?: string;
/** 当前值 */
modelValue?: Arrayable<number | string>;
/** 是否多选 */
multiple?: boolean;
/** 显示由iconField指定的图标 */
showIcon?: boolean;
/** 启用展开收缩动画 */
transition?: boolean;
/** 树数据 */
treeData: Recordable<any>[];
/** 值字段 */
valueField?: string;
}

21
packages/effects/common-ui/src/components/api-component/api-component.vue
View File

@ -84,7 +84,7 @@ const emit = defineEmits<{
const modelValue = defineModel({ default: '' });
const attrs = useAttrs();
const innerParams = ref({});
const refOptions = ref<OptionsItem[]>([]);
const loading = ref(false);
// 首次是否加载过了
@ -175,8 +175,15 @@ async function handleFetchForVisible(visible: boolean) {
}
}
const params = computed(() => {
return {
...props.params,
...unref(innerParams),
};
});
watch(
() => props.params,
params,
(value, oldValue) => {
if (isEqual(value, oldValue)) {
return;
@ -189,12 +196,22 @@ watch(
function emitChange() {
emit('optionsChange', unref(getOptions));
}
const componentRef = ref();
defineExpose({
/** 获取被包装的组件实例 */
getComponentRef: <T = any,>() => componentRef.value as T,
/** 更新Api参数 */
updateParam(newParams: Record<string, any>) {
innerParams.value = newParams;
},
});
</script>
<template>
<component
:is="component"
v-bind="bindProps"
:placeholder="$attrs.placeholder"
ref="componentRef"
>
<template v-for="item in Object.keys($slots)" #[item]="data">
<slot :name="item" v-bind="data || {}"></slot>

45
playground/src/adapter/component/index.ts
View File

@ -41,6 +41,7 @@ import {
const withDefaultPlaceholder = <T extends Component>(
component: T,
type: 'input' | 'select',
componentProps: Recordable<any> = {},
) => {
return defineComponent({
inheritAttrs: false,
@ -63,7 +64,11 @@ const withDefaultPlaceholder = <T extends Component>(
}
});
return () =>
h(component, { ...props, ...attrs, placeholder, ref: innerRef }, slots);
h(
component,
{ ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
slots,
);
},
});
};
@ -103,38 +108,20 @@ async function initComponentAdapter() {
// Button: () =>
// import('xxx').then((res) => res.Button),
ApiSelect: (props, { attrs, slots }) => {
return h(
ApiComponent,
{
placeholder: $t('ui.placeholder.select'),
...props,
...attrs,
ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
component: Select,
loadingSlot: 'suffixIcon',
modelPropName: 'value',
visibleEvent: 'onVisibleChange',
},
slots,
);
},
ApiTreeSelect: (props, { attrs, slots }) => {
return h(
ApiComponent,
{
placeholder: $t('ui.placeholder.select'),
...props,
...attrs,
}),
ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
component: TreeSelect,
fieldNames: { label: 'label', value: 'value', children: 'children' },
loadingSlot: 'suffixIcon',
modelPropName: 'value',
optionsPropName: 'treeData',
visibleEvent: 'onVisibleChange',
},
slots,
);
},
}),
AutoComplete,
Checkbox,
CheckboxGroup,
@ -144,19 +131,11 @@ async function initComponentAdapter() {
return h(Button, { ...props, attrs, type: 'default' }, slots);
},
Divider,
IconPicker: (props, { attrs, slots }) => {
return h(
IconPicker,
{
IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
iconSlot: 'addonAfter',
inputComponent: Input,
modelValueProp: 'value',
...props,
...attrs,
},
slots,
);
},
}),
Input: withDefaultPlaceholder(Input, 'input'),
InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
InputPassword: withDefaultPlaceholder(InputPassword, 'input'),

2
playground/src/views/system/role/modules/form.vue
View File

@ -98,7 +98,7 @@ function getNodeClass(node: Recordable<any>) {
<Drawer :title="getDrawerTitle">
<Form>
<template #permissions="slotProps">
<Spin :spinning="loadingPermissions">
<Spin :spinning="loadingPermissions" wrapper-class-name="w-full">
<VbenTree
:tree-data="permissions"
multiple