yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: checkpoint tailwind spacing updates

pull/337/head^2
xingyu4j 2026-03-14 18:11:08 +08:00
parent 90dc8cf997
commit fa190e0975
24 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-ele/src/views/demos/form/basic.vue
View File

@ -175,7 +175,7 @@ function setFormValues() {
description="我们重新包装了CheckboxGroup、RadioGroup、Select，可以通过options属性传入选项属性数组以自动生成选项" description="我们重新包装了CheckboxGroup、RadioGroup、Select，可以通过options属性传入选项属性数组以自动生成选项"
title="表单演示" title="表单演示"
> >
<Drawer class="w-[600px]" title="基础表单示例"> <Drawer class="w-150" title="基础表单示例">
<Form /> <Form />
</Drawer> </Drawer>
<ElCard> <ElCard>

2
docs/src/demos/vben-drawer/auto-height/drawer.vue
View File

@ -32,7 +32,7 @@ function handleUpdate(len: number) {
<div <div
v-for="item in list" v-for="item in list"
:key="item" :key="item"
class="flex-center h-[220px] w-full bg-muted even:bg-heavy" class="flex-center h-55 w-full bg-muted even:bg-heavy"
> >
{{ item }} {{ item }}
</div> </div>

2
docs/src/demos/vben-drawer/basic/index.vue
View File

@ -6,6 +6,6 @@ const [Drawer, drawerApi] = useVbenDrawer();
<template> <template>
<div> <div>
<VbenButton @click="() => drawerApi.open()">Open</VbenButton> <VbenButton @click="() => drawerApi.open()">Open</VbenButton>
<Drawer class="w-[600px]" title="基础示例"> drawer content </Drawer> <Drawer class="w-150" title="基础示例"> drawer content </Drawer>
</div> </div>
</template> </template>

4
docs/src/demos/vben-modal/animation-type/index.vue
View File

@ -25,11 +25,11 @@ function openScaleModal() {
<VbenButton @click="openScaleModal">缩放动画</VbenButton> <VbenButton @click="openScaleModal">缩放动画</VbenButton>
</div> </div>
<SlideModal title="滑动动画示例" class="w-[500px]"> <SlideModal title="滑动动画示例" class="w-125">
<p>这是使用滑动动画的弹窗，从顶部向下滑动进入。</p> <p>这是使用滑动动画的弹窗，从顶部向下滑动进入。</p>
</SlideModal> </SlideModal>
<ScaleModal title="缩放动画示例" class="w-[500px]"> <ScaleModal title="缩放动画示例" class="w-125">
<p>这是使用缩放动画的弹窗，以缩放淡入淡出的方式显示。</p> <p>这是使用缩放动画的弹窗，以缩放淡入淡出的方式显示。</p>
</ScaleModal> </ScaleModal>
</div> </div>

2
docs/src/demos/vben-modal/auto-height/modal.vue
View File

@ -32,7 +32,7 @@ function handleUpdate(len: number) {
<div <div
v-for="item in list" v-for="item in list"
:key="item" :key="item"
class="flex-center h-[220px] w-full bg-muted even:bg-heavy" class="flex-center h-55 w-full bg-muted even:bg-heavy"
> >
{{ item }} {{ item }}
</div> </div>

2
docs/src/demos/vben-modal/basic/index.vue
View File

@ -6,6 +6,6 @@ const [Modal, modalApi] = useVbenModal();
<template> <template>
<div> <div>
<VbenButton @click="() => modalApi.open()">Open</VbenButton> <VbenButton @click="() => modalApi.open()">Open</VbenButton>
<Modal class="w-[600px]" title="基础示例"> modal content </Modal> <Modal class="w-150" title="基础示例"> modal content </Modal>
</div> </div>
</template> </template>

2
docs/src/demos/vben-vxe-table/tree/index.vue
View File

@ -67,7 +67,7 @@ const collapseAll = () => {
</script> </script>
<template> <template>
<div class="vp-raw h-[300px] w-full"> <div class="vp-raw h-75 w-full">
<Grid> <Grid>
<template #toolbar-tools> <template #toolbar-tools>
<Button class="mr-2" type="primary" @click="expandAll"> <Button class="mr-2" type="primary" @click="expandAll">

2
docs/src/demos/vben-vxe-table/virtual/index.vue
View File

@ -58,7 +58,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="vp-raw h-[500px] w-full"> <div class="vp-raw h-125 w-full">
<Grid /> <Grid />
</div> </div>
</template> </template>

2
packages/@core/base/design/src/css/global.css
View File

@ -360,7 +360,7 @@
/* Only adjust scrollbar for non-macOS */ /* Only adjust scrollbar for non-macOS */
html:not([data-platform='macOs']) { html:not([data-platform='macOs']) {
::-webkit-scrollbar { ::-webkit-scrollbar {
@apply h-[10px] w-[10px]; @apply h-2.5 w-2.5;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {

4
packages/@core/base/design/src/css/nprogress.css
View File

@ -6,12 +6,12 @@
} }
#nprogress .bar { #nprogress .bar {
@apply bg-primary fixed top-0 left-0 z-1031 h-[2px] w-full; @apply bg-primary fixed top-0 left-0 z-1031 h-0.5 w-full;
} }
/* Fancy blur effect */ /* Fancy blur effect */
#nprogress .peg { #nprogress .peg {
@apply absolute right-0 block h-full w-[100px]; @apply absolute right-0 block h-full w-25;
box-shadow: box-shadow:
0 0 10px hsl(var(--primary)), 0 0 10px hsl(var(--primary)),

4
packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
View File

@ -21,11 +21,11 @@ const props = defineProps<Props>();
<template> <template>
<FormLabel :class="cn('flex items-center', props.class)"> <FormLabel :class="cn('flex items-center', props.class)">
<span v-if="required" class="mr-[2px] text-destructive">*</span> <span v-if="required" class="mr-0.5 text-destructive">*</span>
<slot></slot> <slot></slot>
<VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1"> <VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
<VbenRenderContent :content="help" /> <VbenRenderContent :content="help" />
</VbenHelpTooltip> </VbenHelpTooltip>
<span v-if="colon && label" class="ml-[2px]">:</span> <span v-if="colon && label" class="ml-0.5">:</span>
</FormLabel> </FormLabel>
</template> </template>

2
packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
View File

@ -374,7 +374,7 @@ onUnmounted(() => {
<div <div
v-if="draggable" v-if="draggable"
ref="dragBarRef" ref="dragBarRef"
class="absolute inset-y-0 -right-px z-1000 w-[2px] cursor-col-resize hover:bg-primary" class="absolute inset-y-0 -right-px z-1000 w-0.5 cursor-col-resize hover:bg-primary"
@mousedown="handleDragSidebar" @mousedown="handleDragSidebar"
></div> ></div>
</aside> </aside>

2
packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
View File

@ -10,7 +10,7 @@ function toggleFixed() {
<template> <template>
<div <div
class="absolute right-3 bottom-2 z-10 flex-center cursor-pointer rounded-sm bg-accent p-[5px] text-foreground/60 transition-all duration-300 hover:bg-accent-hover hover:text-foreground" class="absolute right-3 bottom-2 z-10 flex-center cursor-pointer rounded-sm bg-accent p-1.25 text-foreground/60 transition-all duration-300 hover:bg-accent-hover hover:text-foreground"
@click="toggleFixed" @click="toggleFixed"
> >
<PinOff v-if="!expandOnHover" class="size-3.5" /> <PinOff v-if="!expandOnHover" class="size-3.5" />

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

@ -147,7 +147,7 @@ async function handleOpenChange(val: boolean) {
:class=" :class="
cn( cn(
containerClass, containerClass,
'inset-x-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-[520px] sm:max-w-[80%] sm:rounded-(--radius)', 'inset-x-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-130 sm:max-w-[80%] sm:rounded-(--radius)',
{ {
'border border-border': bordered, 'border border-border': bordered,
'shadow-3xl': !bordered, 'shadow-3xl': !bordered,
@ -174,7 +174,7 @@ async function handleOpenChange(val: boolean) {
</div> </div>
</AlertDialogTitle> </AlertDialogTitle>
<AlertDialogDescription> <AlertDialogDescription>
<div class="m-4 min-h-[30px]"> <div class="m-4 min-h-7.5">
<VbenRenderContent :content="content" render-br /> <VbenRenderContent :content="content" render-br />
</div> </div>
<VbenLoading v-if="loading && contentMasking" :spinning="loading" /> <VbenLoading v-if="loading && contentMasking" :spinning="loading" />

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

@ -185,7 +185,7 @@ const getForceMount = computed(() => {
<SheetContent <SheetContent
:append-to="getAppendTo" :append-to="getAppendTo"
:class=" :class="
cn('flex w-[520px] flex-col', drawerClass, { cn('flex w-130 flex-col', drawerClass, {
'w-full!': isMobile || placement === 'bottom' || placement === 'top', 'w-full!': isMobile || placement === 'bottom' || placement === 'top',
'max-h-screen': placement === 'bottom' || placement === 'top', 'max-h-screen': placement === 'bottom' || placement === 'top',
hidden: isClosed, hidden: isClosed,
@ -224,7 +224,7 @@ const getForceMount = computed(() => {
v-if="closable && closeIconPlacement === 'left'" v-if="closable && closeIconPlacement === 'left'"
as-child as-child
:disabled="submitting" :disabled="submitting"
class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary" class="ml-0.5 cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary"
> >
<slot name="close-icon"> <slot name="close-icon">
<VbenIconButton> <VbenIconButton>
@ -265,7 +265,7 @@ const getForceMount = computed(() => {
v-if="closable && closeIconPlacement === 'right'" v-if="closable && closeIconPlacement === 'right'"
as-child as-child
:disabled="submitting" :disabled="submitting"
class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary" class="ml-0.5 cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary"
> >
<slot name="close-icon"> <slot name="close-icon">
<VbenIconButton> <VbenIconButton>

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

@ -240,7 +240,7 @@ function handleClosed() {
:append-to="getAppendTo" :append-to="getAppendTo"
:class=" :class="
cn( cn(
'inset-x-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0', 'inset-x-0 top-[10vh] mx-auto flex max-h-[80%] w-130 flex-col p-0',
shouldFullscreen ? 'sm:rounded-none' : 'sm:rounded-(--radius)', shouldFullscreen ? 'sm:rounded-none' : 'sm:rounded-(--radius)',
modalClass, modalClass,
{ {

4
packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
View File

@ -37,7 +37,7 @@ const tabsIndicatorStyle = computed(() => {
}); });
function activeClass(tab: string): string[] { function activeClass(tab: string): string[] {
return tab === activeTab.value ? ['!font-bold', 'text-primary'] : []; return tab === activeTab.value ? ['font-bold!', 'text-primary'] : [];
} }
</script> </script>
@ -45,7 +45,7 @@ function activeClass(tab: string): string[] {
<Tabs v-model="activeTab" :default-value="getDefaultValue"> <Tabs v-model="activeTab" :default-value="getDefaultValue">
<TabsList <TabsList
:style="tabsStyle" :style="tabsStyle"
class="bg-accent !outline-heavy relative grid w-full !outline !outline-2" class="bg-accent outline-heavy! relative grid w-full outline! outline-2!"
> >
<TabsIndicator :style="tabsIndicatorStyle" /> <TabsIndicator :style="tabsIndicatorStyle" />
<template v-for="tab in tabs" :key="tab.value"> <template v-for="tab in tabs" :key="tab.value">

2
packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
View File

@ -16,7 +16,7 @@ const style = computed(() => {
}); });
</script> </script>
<template> <template>
<div :style="style" class="vben-spine-text !bg-clip-text text-transparent"> <div :style="style" class="vben-spine-text bg-clip-text! text-transparent">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>

4
packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
View File

@ -33,8 +33,8 @@ const delegatedProps = computed(() => {
cn( cn(
'bg-background text-muted-foreground absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-xs', 'bg-background text-muted-foreground absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-xs',
props.orientation === 'vertical' props.orientation === 'vertical'
? 'w-[1px] px-1 py-2' ? 'w-0.25 px-1 py-2'
: 'h-[1px] px-2 py-1', : 'h-0.25 px-2 py-1',
) )
" "
> >

2
packages/@core/ui-kit/shadcn-ui/src/ui/textarea/Textarea.vue
View File

@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
v-model="modelValue" v-model="modelValue"
:class=" :class="
cn( cn(
'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50', 'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-15 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
props.class, props.class,
) )
" "

16
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@ -116,17 +116,17 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150" class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150"
> >
<div <div
class="tabs-chrome__background-content h-full rounded-tl-(--gap) rounded-tr-(--gap) duration-150 group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent" class="tabs-chrome__background-content h-full rounded-tl-(--gap) rounded-tr-(--gap) duration-150 group-[.is-active]:bg-primary/15 group-[.is-active]:dark:bg-accent"
></div> ></div>
<svg <svg
class="tabs-chrome__background-before absolute bottom-0 -left-px fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent" class="tabs-chrome__background-before absolute bottom-0 -left-px fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 group-[.is-active]:dark:fill-accent"
height="7" height="7"
width="7" width="7"
> >
<path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" /> <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
</svg> </svg>
<svg <svg
class="tabs-chrome__background-after absolute -right-px bottom-0 fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent" class="tabs-chrome__background-after absolute -right-px bottom-0 fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 group-[.is-active]:dark:fill-accent"
height="7" height="7"
width="7" width="7"
> >
@ -141,7 +141,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<!-- close-icon --> <!-- close-icon -->
<X <X
v-show="!tab.affixTab && tabsView.length > 1 && tab.closable" v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
class="mt-[2px] size-3 cursor-pointer rounded-full stroke-accent-foreground/80 text-accent-foreground/80 transition-all group-[.is-active]:text-accent-foreground hover:bg-accent hover:stroke-accent-foreground" class="mt-0.5 size-3 cursor-pointer rounded-full stroke-accent-foreground/80 text-accent-foreground/80 transition-all group-[.is-active]:text-accent-foreground hover:bg-accent hover:stroke-accent-foreground"
@click.stop="() => emit('close', tab.key)" @click.stop="() => emit('close', tab.key)"
/> />
<Pin <Pin
@ -153,7 +153,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<!-- tab-item-main --> <!-- tab-item-main -->
<div <div
class="tabs-chrome__item-main z-2 mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 pl-2 text-accent-foreground duration-150 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground" class="tabs-chrome__item-main z-2 mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 pl-2 text-accent-foreground duration-150 group-[.is-active]:text-primary group-[.is-active]:dark:text-accent-foreground"
> >
<VbenIcon <VbenIcon
v-if="showIcon" v-if="showIcon"
@ -191,12 +191,12 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
.tabs-chrome__item:not(.dragging):hover:not(.is-active) .tabs-chrome__item:not(.dragging):hover:not(.is-active)
.tabs-chrome__background { .tabs-chrome__background {
@apply pb-[2px]; @apply pb-0.5;
} }
.tabs-chrome__item:not(.dragging):hover:not(.is-active) .tabs-chrome__item:not(.dragging):hover:not(.is-active)
.tabs-chrome__background-content { .tabs-chrome__background-content {
@apply bg-accent mx-[2px] rounded-md; @apply bg-accent mx-0.5 rounded-md;
} }
.tabs-chrome__item:not(.dragging).is-active { .tabs-chrome__item:not(.dragging).is-active {
@ -206,6 +206,6 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
.tabs-chrome__item:not(.dragging).is-active .tabs-chrome__item:not(.dragging).is-active
+ .tabs-chrome__item + .tabs-chrome__item
.tabs-chrome__divider { .tabs-chrome__divider {
@apply !opacity-0; @apply opacity-0!;
} }
</style> </style>

6
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
View File

@ -115,19 +115,19 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<!-- close-icon --> <!-- close-icon -->
<X <X
v-show="!tab.affixTab && tabsView.length > 1 && tab.closable" v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
class="size-3 cursor-pointer rounded-full stroke-accent-foreground/80 transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground" class="size-3 cursor-pointer rounded-full stroke-accent-foreground/80 transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:dark:text-accent-foreground"
@click.stop="() => emit('close', tab.key)" @click.stop="() => emit('close', tab.key)"
/> />
<Pin <Pin
v-show="tab.affixTab && tabsView.length > 1 && tab.closable" v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
class="mt-px size-3.5 cursor-pointer rounded-full transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground" class="mt-px size-3.5 cursor-pointer rounded-full transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:dark:text-accent-foreground"
@click.stop="() => emit('unpin', tab)" @click.stop="() => emit('unpin', tab)"
/> />
</div> </div>
<!-- tab-item-main --> <!-- tab-item-main -->
<div <div
class="mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 text-accent-foreground transition-all duration-300 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground" class="mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 text-accent-foreground transition-all duration-300 group-[.is-active]:text-primary group-[.is-active]:dark:text-accent-foreground"
> >
<VbenIcon <VbenIcon
v-if="showIcon" v-if="showIcon"

4
packages/effects/layouts/src/basic/header/header.vue
View File

@ -165,7 +165,7 @@ function clearPreferencesAndLogout() {
/> />
</template> </template>
<template v-else-if="slot.name === 'theme-toggle'"> <template v-else-if="slot.name === 'theme-toggle'">
<ThemeToggle class="mt-[2px] mr-1" /> <ThemeToggle class="mt-0.5 mr-1" />
</template> </template>
<template v-else-if="slot.name === 'language-toggle'"> <template v-else-if="slot.name === 'language-toggle'">
<LanguageToggle class="mr-1" /> <LanguageToggle class="mr-1" />
@ -174,7 +174,7 @@ function clearPreferencesAndLogout() {
<VbenFullScreen class="mr-1" /> <VbenFullScreen class="mr-1" />
</template> </template>
<template v-else-if="slot.name === 'timezone'"> <template v-else-if="slot.name === 'timezone'">
<TimezoneButton class="mt-[2px] mr-1" /> <TimezoneButton class="mt-0.5 mr-1" />
</template> </template>
</slot> </slot>
</template> </template>

2
playground/src/views/examples/modal/base-demo.vue
View File

@ -27,7 +27,7 @@ function lockModal() {
} }
</script> </script>
<template> <template>
<Modal class="w-[600px]" title="基础弹窗示例" title-tooltip="标题提示内容"> <Modal class="w-150" title="基础弹窗示例" title-tooltip="标题提示内容">
base demo base demo
<Button type="primary" @click="lockModal">锁定弹窗</Button> <Button type="primary" @click="lockModal">锁定弹窗</Button>
</Modal> </Modal>