u

code/base-project/base-vue/packages/ao-design/src/space/demo.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <h3>水平 wrap + 不同间距 + align</h3>
+  <ASpace wrap :size="[10, 20]" align="start" style="width: 300px; border:1px solid #ccc;">
+    <div style="width:120px;height:40px;background:#eee;">
+      1
+    </div>
+    <div style="width:120px;height:40px;background:#ccc;">
+      2
+    </div>
+    <div style="width:120px;height:40px;background:#aaa;">
+      3
+    </div>
+    <div style="width:120px;height:40px;background:#f0f;">
+      4
+    </div>
+  </ASpace>
+
+  <h3>垂直排列 + align</h3>
+  <ASpace :size="[20, 10]" style="border:1px solid #ccc;" separator>
+    <div style="width:120px;height:40px;background:#eee;">
+      1
+    </div>
+    <div style="width:120px;height:40px;background:#ccc;">
+      2
+    </div>
+    <div style="width:120px;height:40px;background:#aaa;">
+      3
+    </div>
+  </ASpace>
+
+  <h3>默认 small/middle/large 间距</h3>
+  <ASpace size="small" align="baseline">
+    <div style="width:60px;height:40px;background:#eee;">
+      A
+    </div>
+
+    <div style="width:60px;height:40px;background:#ccc;">
+      B
+    </div>
+    <div style="width:60px;height:40px;background:#aaa;">
+      C
+    </div>
+  </ASpace>
+  <div>
+    <AButton>测试</AButton>
+    <ASeparator layout="vertical" />
+    <AButton>测试</AButton>
+  </div>
+</template>

code/base-project/base-vue/packages/ao-design/src/space/index.scss

@@ -0,0 +1,33 @@
+@use '../_styles/_variables.scss' as *;
+@use 'sass:color';
+
+$space-prefix: '#{$prefix}-space';
+
+.#{$space-prefix} {
+  display: inline-flex;
+
+  &.#{$space-prefix}-direction-horizontal {
+    flex-direction: row;
+  }
+
+  &.#{$space-prefix}-direction-vertical {
+    flex-direction: column;
+  }
+
+  &.#{$space-prefix}-align-start {
+    align-items: flex-start;
+  }
+  &.#{$space-prefix}-align-end {
+    align-items: flex-end;
+  }
+  &.#{$space-prefix}-align-center {
+    align-items: center;
+  }
+  &.#{$space-prefix}-align-baseline {
+    align-items: baseline;
+  }
+
+  &.#{$space-prefix}-wrap {
+    flex-wrap: wrap;
+  }
+}

code/base-project/base-vue/packages/ao-design/src/space/index.tsx

@@ -0,0 +1,75 @@
+import type { PropType, VNode } from 'vue'
+import { defineComponent } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
+import Separator from '../separator/index'
+
+const sizeMap = {
+  small: 8,
+  middle: 16,
+  large: 24,
+}
+
+export default defineComponent({
+  name: 'ASpace',
+  props: {
+    size: {
+      type: [String, Number, Array] as PropType<'small' | 'middle' | 'large' | number | [number, number]>,
+      default: 'middle',
+    },
+    direction: {
+      type: String as () => 'horizontal' | 'vertical',
+      default: 'horizontal',
+    },
+    align: {
+      type: String as () => 'start' | 'center' | 'end' | 'baseline',
+      default: 'center',
+    },
+    wrap: { type: Boolean, default: false },
+    separator: { type: Boolean, default: false },
+    class: { type: [String, Array, Object], default: '' },
+    style: { type: Object, default: () => ({}) },
+  },
+  setup(props, { slots }) {
+    const prefixCls = getPrefixCls('space')
+
+    const getGap = (): [number, number] => {
+      if (Array.isArray(props.size))
+        return props.size
+      if (typeof props.size === 'string' && sizeMap[props.size as keyof typeof sizeMap]) {
+        const val = sizeMap[props.size as keyof typeof sizeMap]
+        return [val, val]
+      }
+      return [props.size as number, props.size as number]
+    }
+
+    return () => {
+      const [rowGap, colGap] = getGap()
+      const isHorizontal = props.direction === 'horizontal'
+
+      const children = slots.default?.() || []
+      const items: VNode[] = []
+      children.forEach((child, index) => {
+        items.push(child)
+        if (props.separator && index < children.length - 1) {
+          items.push(
+            <Separator
+              layout={isHorizontal ? 'vertical' : 'horizontal'}
+            />,
+          )
+        }
+      })
+
+      return (
+        <div
+          class={[prefixCls, props.class, `${prefixCls}-align-${props.align}`, `${prefixCls}-direction-${props.direction}`, props.wrap && `${prefixCls}-wrap`]}
+          style={{
+            gap: isHorizontal ? `${rowGap}px ${colGap}px` : `${rowGap}px`,
+            ...props.style,
+          }}
+        >
+          {items}
+        </div>
+      )
+    }
+  },
+})