fix(space): review and enhance Space component

- Add ConfigProvider size inheritance (sm/md/lg -> small/middle/large)
- Add RTL support via useConfigInject
- Add $attrs passthrough with inheritAttrs: false
- Add wrap mode with negative marginBottom
- Add empty children handling (return null if no valid children)
- Use filterEmpty for VNode filtering with Fragment support

- Add RTL support
- Add $attrs passthrough
- Add nested SpaceCompact detection via provide/inject
- Add default size ('md')
- Add align prop support

- Internal component for providing context to children
- Support nested SpaceCompact detection
- Provide isFirstItem/isLastItem context

- Add GLOBAL_SIZE_MAP for ConfigProvider size conversion
- Add spaceCompactContextKey for nested detection
- Enhance filterEmpty to handle Fragment children
- Export SizeType

- Add RTL styles for Space and SpaceCompact
- Update selectors for CompactItem wrapper
- Add align styles for SpaceCompact

- Add tests for RTL support
- Add tests for ConfigProvider size inheritance
- Add tests for align prop
- Add tests for Space.Compact static property
- Update snapshots

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: OPBR

packages/ui/src/components/space/CompactItem.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { provide, inject } from 'vue'
+import { spaceCompactItemContextKey, spaceCompactContextKey } from './types'
+import type { SizeType, SpaceCompactItemContext } from './types'
+
+const props = defineProps<{
+  compactSize?: SizeType
+  compactDirection?: 'horizontal' | 'vertical'
+  isFirstItem: boolean
+  isLastItem: boolean
+}>()
+
+// Detect if we're inside a nested SpaceCompact
+const hasParentCompact = inject(spaceCompactContextKey, false)
+
+// If nested, inherit isFirstItem/isLastItem from parent context
+const parentContext = inject<SpaceCompactItemContext | undefined>(spaceCompactItemContextKey, undefined)
+
+// Use parent's isFirstItem/isLastItem if nested, otherwise use own props
+const resolvedIsFirstItem = hasParentCompact && parentContext ? parentContext.isFirstItem : props.isFirstItem
+const resolvedIsLastItem = hasParentCompact && parentContext ? parentContext.isLastItem : props.isLastItem
+
+// Provide context for child components (Button, Input, Select etc.)
+provide(spaceCompactItemContextKey, {
+  get compactSize() {
+    return props.compactSize
+  },
+  get compactDirection() {
+    return props.compactDirection
+  },
+  get isFirstItem() {
+    return resolvedIsFirstItem
+  },
+  get isLastItem() {
+    return resolvedIsLastItem
+  },
+})
+</script>
+
+<template>
+  <div class="ant-space-compact-item">
+    <slot />
+  </div>
+</template>

packages/ui/src/components/space/Space.vue

@@ -1,71 +1,124 @@
 <script setup lang="ts">
-import { computed, useSlots } from 'vue'
+import { computed, useSlots, useAttrs, type VNode, type CSSProperties } from 'vue'
 import type { SpaceProps, SpaceSlots, SpaceSize, SpaceSizePreset } from './types'
-import { spaceDefaultProps, SPACE_SIZE_MAP } from './types'
+import { spaceDefaultProps, SPACE_SIZE_MAP, GLOBAL_SIZE_MAP, filterEmpty } from './types'
+import { useConfigInject } from '@/hooks'
 
-defineOptions({ name: 'ASpace' })
+defineOptions({ name: 'ASpace', inheritAttrs: false })
 const props = withDefaults(defineProps<SpaceProps>(), spaceDefaultProps)
 defineSlots<SpaceSlots>()
+
 const slots = useSlots()
+const attrs = useAttrs()
+
+// Support global size from ConfigProvider and RTL direction
+const { size: globalSize, direction: rtlDirection } = useConfigInject()
 
-function resolveSize(size: SpaceSize): number {
+function resolveSize(size: SpaceSize | undefined): number {
+  if (size === undefined) return 0
   return typeof size === 'string' ? SPACE_SIZE_MAP[size as SpaceSizePreset] ?? 0 : size
 }
 
+// Convert ConfigProvider size (sm/md/lg) to Space size (small/middle/large)
+function normalizeGlobalSize(size: string): SpaceSizePreset {
+  return GLOBAL_SIZE_MAP[size] ?? 'small'
+}
+
+// Merge prop size with global size (prop takes precedence)
+const mergedSize = computed(() => {
+  if (props.size !== undefined) return props.size
+  const global = globalSize.value
+  // Handle ConfigProvider size format (sm/md/lg)
+  if (typeof global === 'string' && global in GLOBAL_SIZE_MAP) {
+    return normalizeGlobalSize(global)
+  }
+  return 'small'
+})
+
 const gap = computed(() => {
-  if (Array.isArray(props.size)) {
-    return [resolveSize(props.size[0]), resolveSize(props.size[1])] as [number, number]
+  const size = mergedSize.value
+  if (Array.isArray(size)) {
+    return [resolveSize(size[0]), resolveSize(size[1])] as [number, number]
   }
-  const s = resolveSize(props.size!)
+  const s = resolveSize(size as SpaceSize)
   return [s, s] as [number, number]
 })
 
 const hasSplit = computed(() => !!slots.split)
 
+// Add RTL support
+const isRtl = computed(() => rtlDirection.value === 'rtl')
+
 const classes = computed(() => ({
   'ant-space': true,
   [`ant-space-${props.direction}`]: true,
+  'ant-space-rtl': isRtl.value,
   'ant-space-align-center': !props.align && props.direction === 'horizontal',
   [`ant-space-align-${props.align}`]: !!props.align,
 }))
 
 const containerStyle = computed(() => {
   const [h, v] = gap.value
-  const style: Record<string, string> = {}
+  const style: CSSProperties = {}
 
   if (!hasSplit.value) {
     style.columnGap = `${h}px`
     style.rowGap = `${v}px`
   }
 
+  // wrap 模式下添加负 marginBottom
   if (props.wrap) {
     style.flexWrap = 'wrap'
+    style.marginBottom = `${-v}px`
   }
 
   return style
 })
 
 const splitItemGap = computed(() => {
   const [h, v] = gap.value
-  return {
+  const style: CSSProperties = {
     columnGap: `${h / 2}px`,
     rowGap: `${v}px`,
   }
+  if (props.wrap) {
+    style.flexWrap = 'wrap'
+    style.marginBottom = `${-v}px`
+  }
+  return style
 })
+
+// Filter empty children
+function getValidChildren(children: VNode[] | undefined): VNode[] {
+  return filterEmpty(children)
+}
+
+// Get valid children for rendering
+const validChildren = computed(() => getValidChildren(slots.default?.()))
+
+// Return null if no children
+const shouldRender = computed(() => validChildren.value.length > 0)
 </script>
 
 <template>
-  <div :class="classes" :style="hasSplit ? splitItemGap : containerStyle">
+  <div
+    v-if="shouldRender"
+    :class="[classes, attrs.class]"
+    :style="[hasSplit ? splitItemGap : containerStyle, attrs.style as CSSProperties]"
+  >
     <template v-if="hasSplit">
-      <template v-for="(child, index) in $slots.default?.()" :key="index">
+      <template v-for="(child, index) in validChildren" :key="child.key ?? index">
         <div class="ant-space-item">
           <component :is="child" />
         </div>
-        <div v-if="index < ($slots.default?.()?.length ?? 0) - 1" class="ant-space-item-split">
+        <span
+          v-if="index < validChildren.length - 1"
+          class="ant-space-item-split"
+        >
           <slot name="split" />
-        </div>
+        </span>
       </template>
     </template>
     <slot v-else />
   </div>
-</template>
+</template>

packages/ui/src/components/space/SpaceCompact.vue

@@ -1,25 +1,52 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import { computed, useSlots, useAttrs, provide, type VNode } from 'vue'
 import type { SpaceCompactProps } from './types'
-import { spaceCompactDefaultProps, spaceCompactContextKey } from './types'
+import { spaceCompactDefaultProps, filterEmpty, spaceCompactContextKey } from './types'
+import { useConfigInject } from '@/hooks'
+import CompactItem from './CompactItem.vue'
 
-defineOptions({ name: 'ASpaceCompact' })
+defineOptions({ name: 'ASpaceCompact', inheritAttrs: false })
 const props = withDefaults(defineProps<SpaceCompactProps>(), spaceCompactDefaultProps)
 
-provide(spaceCompactContextKey, {
-  compactSize: computed(() => props.size) as any,
-  compactDirection: computed(() => props.direction) as any,
-})
+const slots = useSlots()
+const attrs = useAttrs()
+
+// Provide context to mark we're inside a SpaceCompact (for nested detection)
+provide(spaceCompactContextKey, true)
+
+// Add RTL support
+const { direction: rtlDirection } = useConfigInject()
+const isRtl = computed(() => rtlDirection.value === 'rtl')
 
 const classes = computed(() => ({
   'ant-space-compact': true,
   [`ant-space-compact-${props.direction}`]: true,
   'ant-space-compact-block': props.block,
+  'ant-space-compact-rtl': isRtl.value,
+  [`ant-space-compact-align-${props.align}`]: !!props.align,
 }))
+
+// Get valid children and filter empty ones
+function getValidChildren(): VNode[] {
+  const children = slots.default?.() || []
+  return filterEmpty(children)
+}
+
+// Pre-compute children to avoid repeated calls in template
+const validChildren = computed(() => getValidChildren())
 </script>
 
 <template>
-  <div :class="classes" role="group">
-    <slot />
+  <div v-if="validChildren.length > 0" :class="[classes, attrs.class]" :style="attrs.style" role="group">
+    <CompactItem
+      v-for="(child, index) in validChildren"
+      :key="child.key ?? index"
+      :compact-size="props.size"
+      :compact-direction="props.direction"
+      :is-first-item="index === 0"
+      :is-last-item="index === validChildren.length - 1"
+    >
+      <component :is="child" />
+    </CompactItem>
   </div>
-</template>
+</template>