refactor: migrate spacing utilities to tailwind v4 syntax

packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue

@@ -57,7 +57,7 @@ li {
 }
 
 li a {
-  @apply bg-accent text-muted-foreground relative mr-9 flex h-7 items-center py-0 pr-2 pl-[5px] text-[13px];
+  @apply bg-accent text-muted-foreground relative mr-9 flex h-7 items-center py-0 pr-2 pl-1.25 text-[13px];
 }
 
 li a > span {
@@ -69,7 +69,7 @@ li:first-child a > span {
 }
 
 li:first-child a {
-  @apply rounded-[4px_0_0_4px] pl-[15px];
+  @apply rounded-l-sm pl-3.75;
 }
 
 li:first-child a::before {
@@ -77,7 +77,7 @@ li:first-child a::before {
 }
 
 li:last-child a {
-  @apply rounded-[0_4px_4px_0] pr-[15px];
+  @apply rounded-r-sm pr-3.75;
 }
 
 li:last-child a::after {
@@ -86,7 +86,7 @@ li:last-child a::after {
 
 li a::before,
 li a::after {
-  @apply border-accent absolute top-0 h-0 w-0 border-[.875rem] border-solid content-[''];
+  @apply border-accent absolute top-0 h-0 w-0 border-14 border-solid content-[''];
 }
 
 li a::before {

packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue

@@ -75,7 +75,7 @@ function onTransitionEnd() {
     <div
       :class="{ paused: !renderSpinner }"
       v-if="renderSpinner"
-      class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:top-[60px] before:left-0 before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:top-0 after:left-0 after:h-full after:w-full after:rounded after:content-['']"
+      class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:top-15 before:left-0 before:h-1.25 before:w-12 before:rounded-full before:content-[''] after:absolute after:top-0 after:left-0 after:h-full after:w-full after:rounded after:content-['']"
     ></div>
   </div>
 </template>

packages/@core/ui-kit/tabs-ui/src/tabs-view.vue

@@ -65,7 +65,7 @@ useTabsDrag(props, emit);
 
     <div
       :class="{
-        'pt-[3px]': styleType === 'chrome',
+        'pt-0.75': styleType === 'chrome',
       }"
       class="size-full flex-1 overflow-hidden"
     >

packages/effects/common-ui/src/components/icon-picker/icon-picker.vue

@@ -246,7 +246,7 @@ defineExpose({ toggleOpenState, open, close });
     </div>
 
     <template v-if="paginationList.length > 0">
-      <div class="grid max-h-[360px] w-full grid-cols-6 justify-items-center">
+      <div class="grid max-h-90 w-full grid-cols-6 justify-items-center">
         <VbenIconButton
           v-for="(item, index) in paginationList"
           :key="index"
@@ -309,7 +309,7 @@ defineExpose({ toggleOpenState, open, close });
     </template>
 
     <template v-else>
-      <div class="flex-col-center min-h-[150px] w-full text-muted-foreground">
+      <div class="flex-col-center min-h-37.5 w-full text-muted-foreground">
         <EmptyIcon class="size-10" />
         <div class="mt-1 text-sm">{{ $t('common.noData') }}</div>
       </div>

packages/effects/common-ui/src/ui/authentication/dingding-login.vue

@@ -25,7 +25,7 @@ const [Modal, modalApi] = useVbenModal({
   header: false,
   footer: false,
   fullscreenButton: false,
-  class: 'w-[302px] h-[302px] dingding-qrcode-login-modal',
+  class: 'size-75.5 dingding-qrcode-login-modal',
   onOpened() {
     handleQrCodeLogin();
   },

packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue

@@ -78,7 +78,7 @@ function calcZIndex() {
       :fullscreen-button="false"
       :header="false"
       :z-index="getZIndex"
-      class="border-none px-10 py-6 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset]"
+      class="border-none px-10 py-6 text-center shadow-xl sm:w-150 sm:rounded-2xl md:h-[unset]"
     >
       <VbenAvatar :src="avatar" class="mx-auto mb-6 size-20" />
       <Slot

packages/effects/layouts/src/widgets/global-search/global-search.vue

@@ -101,7 +101,7 @@ onMounted(() => {
   <div>
     <Modal
       :fullscreen-button="false"
-      class="w-[600px]"
+      class="w-150"
       header-class="py-2 border-b"
     >
       <template #title>

packages/effects/layouts/src/widgets/global-search/search-panel.vue

@@ -223,7 +223,7 @@ onMounted(() => {
 
 <template>
   <VbenScrollbar>
-    <div class="flex! h-full justify-center px-2 sm:max-h-[450px]">
+    <div class="flex! h-full justify-center px-2 sm:max-h-112.5">
       <!-- 无搜索结果 -->
       <div
         v-if="keyword && searchResults.length === 0"

packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue

@@ -103,7 +103,7 @@ useScrollLock();
         <div class="flex-center size-full">
           <div class="flex w-full justify-center gap-4 px-4 sm:gap-6 md:gap-8">
             <div
-              class="relative flex-center h-[140px] w-[140px] rounded-xl bg-accent text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
+              class="relative flex-center h-35 w-35 rounded-xl bg-accent text-[36px] sm:h-40 sm:w-40 sm:text-[42px] md:h-50 md:w-50 md:text-[72px]"
             >
               <span
                 class="absolute top-3 left-3 text-xs font-semibold sm:text-sm md:text-xl"
@@ -113,7 +113,7 @@ useScrollLock();
               {{ hour }}
             </div>
             <div
-              class="flex-center h-[140px] w-[140px] rounded-xl bg-accent text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
+              class="flex-center h-35 w-35 rounded-xl bg-accent text-[36px] sm:h-40 sm:w-40 sm:text-[42px] md:h-50 md:w-50 md:text-[72px]"
             >
               {{ minute }}
             </div>
@@ -128,7 +128,7 @@ useScrollLock();
         class="flex-center size-full"
         @keydown.enter.prevent="handleSubmit"
       >
-        <div class="mb-10 flex-col-center w-[90%] max-w-[300px] px-4">
+        <div class="mb-10 flex-col-center w-[90%] max-w-75 px-4">
           <VbenAvatar :src="avatar" class="enter-x mb-6 size-20" />
           <div class="enter-x mb-2 w-full items-center">
             <Form />

packages/effects/layouts/src/widgets/notification/notification.vue

@@ -89,7 +89,7 @@ function navigateTo(
 <template>
   <VbenPopover
     v-model:open="open"
-    content-class="relative right-2 w-[360px] p-0"
+    content-class="relative right-2 w-90 p-0"
   >
     <template #trigger>
       <div class="mr-2 flex-center h-full" @click.stop="toggle()">
@@ -115,7 +115,7 @@ function navigateTo(
         </VbenIconButton>
       </div>
       <VbenScrollbar v-if="notifications.length > 0">
-        <ul class="flex! max-h-[360px] w-full flex-col">
+        <ul class="flex! max-h-90 w-full flex-col">
           <template v-for="item in notifications" :key="item.id ?? item.title">
             <li
               class="relative flex w-full cursor-pointer items-start gap-5 border-t border-border p-3 hover:bg-accent"
@@ -173,7 +173,7 @@ function navigateTo(
       </VbenScrollbar>
 
       <template v-else>
-        <div class="flex-center min-h-[150px] w-full text-muted-foreground">
+        <div class="flex-center min-h-37.5 w-full text-muted-foreground">
           {{ $t('common.noData') }}
         </div>
       </template>

packages/effects/layouts/src/widgets/preferences/blocks/checkbox-item.vue

@@ -53,7 +53,7 @@ const slots = useSlots();
     </span>
     <VbenCheckButtonGroup
       v-model="inputValue"
-      class="h-8 w-[165px]"
+      class="h-8 w-41.25"
       :options="items"
       :disabled="disabled"
       :multiple="multiple"

packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue

@@ -50,7 +50,7 @@ const slots = useSlots();
     <div class="relative">
       <Input
         v-model="inputValue"
-        class="h-8 w-[165px]"
+        class="h-8 w-41.25"
         :placeholder="placeholder"
       />
       <CircleX

packages/effects/layouts/src/widgets/preferences/blocks/layout/content.vue

@@ -38,7 +38,7 @@ function activeClass(theme: string): string[] {
   <div class="flex w-full gap-5">
     <template v-for="theme in PRESET" :key="theme.name">
       <div
-        class="flex w-[100px] cursor-pointer flex-col"
+        class="flex w-25 cursor-pointer flex-col"
         @click="modelValue = theme.type"
       >
         <div :class="activeClass(theme.type)" class="outline-box flex-center">

packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue

@@ -89,7 +89,7 @@ function activeClass(theme: string): string[] {
   <div class="flex w-full flex-wrap gap-5">
     <template v-for="theme in PRESET" :key="theme.name">
       <div
-        class="flex w-[100px] cursor-pointer flex-col"
+        class="flex w-25 cursor-pointer flex-col"
         @click="modelValue = theme.type"
       >
         <div :class="activeClass(theme.type)" class="outline-box flex-center">

packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue

@@ -63,7 +63,7 @@ const slots = useSlots();
       </VbenTooltip>
     </span>
 
-    <NumberField v-model="inputValue" v-bind="$attrs" class="w-[165px]">
+    <NumberField v-model="inputValue" v-bind="$attrs" class="w-41.25">
       <NumberFieldContent>
         <NumberFieldDecrement />
         <NumberFieldInput />

packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue

@@ -55,7 +55,7 @@ const slots = useSlots();
       </VbenTooltip>
     </span>
     <Select v-model="selectValue">
-      <SelectTrigger class="h-8 w-[165px]">
+      <SelectTrigger class="h-8 w-41.25">
         <SelectValue :placeholder="placeholder" />
       </SelectTrigger>
       <SelectContent>

packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue

@@ -203,7 +203,7 @@ if (enableShortcutKey.value) {
         </div>
       </div>
     </DropdownMenuTrigger>
-    <DropdownMenuContent class="mr-2 min-w-[240px] p-0 pb-1">
+    <DropdownMenuContent class="mr-2 min-w-60 p-0 pb-1">
       <div ref="refContent">
         <DropdownMenuLabel class="flex items-center p-3">
           <VbenAvatar

playground/src/views/demos/badge/index.vue

@@ -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 }"

playground/src/views/demos/features/clipboard/index.vue

@@ -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>

playground/src/views/demos/features/icons/index.vue

@@ -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>

playground/src/views/demos/features/vue-query/index.vue

@@ -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 />

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

@@ -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>

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

@@ -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] }"

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

@@ -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>

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

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

playground/src/views/examples/modal/index.vue

@@ -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>

playground/src/views/system/menu/modules/form.vue

@@ -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>