lq/lgp-admin-plus
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

refactor: migrate spacing utilities to tailwind v4 syntax

Browse Source
This commit is contained in:
xingyu4j
2026-03-14 18:27:16 +08:00
parent b9467b2bc3
commit 2823848fae
27 changed files with 45 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
playground/src/views/demos/badge/index.vue
View File

@@ -99,7 +99,7 @@ function updateMenuBadge() {
>
<div
:title="color.label"
class="flex h-[14px] w-[50px] items-center justify-start"
class="flex h-3.5 w-12.5 items-center justify-start"
>
<MenuBadge
v-bind="{ ...badgeProps, badgeVariants: color.value }"

2
playground/src/views/demos/features/clipboard/index.vue
View File

@@ -17,7 +17,7 @@ const { copy, text } = useClipboard({ legacy: true, source });
Current copied: <code>{{ text || 'none' }}</code>
</p>
<div class="flex">
<Input v-model:value="source" class="mr-3 flex w-[200px]" />
<Input v-model:value="source" class="mr-3 flex w-50" />
<Button type="primary" @click="copy(source)"> Copy </Button>
</div>
</Card>

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

@@ -81,11 +81,11 @@ const inputComponent = h(Input);
<Card class="mb-5" title="图标选择器">
<div class="mb-5 flex items-center gap-5">
<span>原始样式(Iconify):</span>
<IconPicker v-model="iconValue1" class="w-[200px]" />
<IconPicker v-model="iconValue1" class="w-50" />
</div>
<div class="mb-5 flex items-center gap-5">
<span>原始样式(svg):</span>
<IconPicker v-model="iconValue2" class="w-[200px]" prefix="svg" />
<IconPicker v-model="iconValue2" class="w-50" prefix="svg" />
</div>
<div class="mb-5 flex items-center gap-5">
<span>自定义Input:</span>

2
playground/src/views/demos/features/vue-query/index.vue
View File

@@ -19,7 +19,7 @@ const showCaching = refAutoReset(true, 1000);
<PaginatedQueries />
</Card>
<Card title="无限滚动">
<InfiniteQueries class="h-[300px] overflow-auto" />
<InfiniteQueries class="h-75 overflow-auto" />
</Card>
<Card title="错误重试">
<QueryRetries />

2
playground/src/views/examples/drawer/auto-height-demo.vue
View File

@@ -35,7 +35,7 @@ function handleUpdate(len: number) {
<div
v-for="item in list"
: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 }}
</div>

2
playground/src/views/examples/form/modules/two-fields.vue
View File

@@ -15,7 +15,7 @@ function onChange() {
<div class="flex w-full gap-1">
<Select
v-model:value="modelValue[0]"
class="w-[80px]"
class="w-20"
placeholder="类型"
allow-clear
:class="{ 'valid-success': !!modelValue[0] }"

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

@@ -38,7 +38,7 @@ function handleUpdate(len?: number) {
<div
v-for="item in list"
: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 }}
</div>

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

@@ -20,7 +20,7 @@ const value = ref();
<template>
<Modal
append-to-main
class="w-[600px]"
class="w-150"
title="基础弹窗示例"
title-tooltip="标题提示内容"
>

20
playground/src/views/examples/modal/index.vue
View File

@@ -191,21 +191,21 @@ async function openPrompt() {
<NestedModal />
<BlurModal />
<Flex wrap="wrap" class="w-full" gap="10">
<Card class="w-[300px]" title="基本使用">
<Card class="w-75" title="基本使用">
<p>一个基础的弹窗示例</p>
<template #actions>
<Button type="primary" @click="openBaseModal">打开弹窗</Button>
</template>
</Card>
<Card class="w-[300px]" title="指定容器+关闭后不销毁">
<Card class="w-75" title="指定容器+关闭后不销毁">
<p>在内容区域打开弹窗的示例</p>
<template #actions>
<Button type="primary" @click="openInContentModal">打开弹窗</Button>
</template>
</Card>
<Card class="w-[300px]" title="内容高度自适应">
<Card class="w-75" title="内容高度自适应">
<p>可根据内容并自动调整高度</p>
<template #actions>
<Button type="primary" @click="openAutoHeightModal">
@@ -214,14 +214,14 @@ async function openPrompt() {
</template>
</Card>
<Card class="w-[300px]" title="可拖拽示例">
<Card class="w-75" title="可拖拽示例">
<p>配置 draggable 可开启拖拽功能</p>
<template #actions>
<Button type="primary" @click="openDragModal"> 打开弹窗 </Button>
</template>
</Card>
<Card class="w-[300px]" title="动态配置示例">
<Card class="w-75" title="动态配置示例">
<p>通过 setState 动态调整弹窗数据</p>
<template #extra>
<Button type="link" @click="openDynamicModal">打开弹窗</Button>
@@ -233,7 +233,7 @@ async function openPrompt() {
</template>
</Card>
<Card class="w-[300px]" title="内外数据共享示例">
<Card class="w-75" title="内外数据共享示例">
<p>通过共享 sharedData 来进行数据交互</p>
<template #actions>
<Button type="primary" @click="openSharedModal">
@@ -242,27 +242,27 @@ async function openPrompt() {
</template>
</Card>
<Card class="w-[300px]" title="表单弹窗示例">
<Card class="w-75" title="表单弹窗示例">
<p>弹窗与表单结合</p>
<template #actions>
<Button type="primary" @click="openFormModal"> 打开表单弹窗 </Button>
</template>
</Card>
<Card class="w-[300px]" title="嵌套弹窗示例">
<Card class="w-75" title="嵌套弹窗示例">
<p>在已经打开的弹窗中再次打开弹窗</p>
<template #actions>
<Button type="primary" @click="openNestedModal">打开嵌套弹窗</Button>
</template>
</Card>
<Card class="w-[300px]" title="遮罩模糊示例">
<Card class="w-75" title="遮罩模糊示例">
<p>遮罩层应用类似毛玻璃的模糊效果</p>
<template #actions>
<Button type="primary" @click="openBlurModal">打开弹窗</Button>
</template>
</Card>
<Card class="w-[300px]" title="轻量提示弹窗">
<Card class="w-75" title="轻量提示弹窗">
<template #extra>
<DocButton path="/components/common-ui/vben-alert" />
</template>

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

@@ -498,7 +498,7 @@ const getDrawerTitle = computed(() =>
);
</script>
<template>
<Drawer class="w-full max-w-[800px]" :title="getDrawerTitle">
<Drawer class="w-full max-w-200" :title="getDrawerTitle">
<Form class="mx-4" :layout="isHorizontal ? 'horizontal' : 'vertical'" />
</Drawer>
</template>