spin 组件引起的布局bug

[jaedenzhu]

• I'm sure this does not appear in the issue list of the repository

基本信息

• 依赖包名 及 版本: @arco-design/[email protected]
• 浏览器版本: chrome131.0.0.0

预期结果

一个简单的示例，点击任意开关可以查看布局变化。当只有一个input或switch时，grid布局失效。当删除spin时，布局不受影响

复现步骤

<template>
  <div class="header">
    <a-space>
      <a-switch v-model="display1" @change="!display1"></a-switch>
      <a-switch v-model="display2" @change="!display2"></a-switch>
      <a-switch v-model="display3" @change="!display3"></a-switch>
    </a-space>
  </div>
  <div class="content">
    <a-spin>
      <a-row align="center" justify="center">
        <a-col :span="2">
          <icon-minus-circle-fill :style="{ cursor: 'pointer', fontSize: '24px', color: 'rgb(var(--red-6))' }" />
        </a-col>
        <a-col :span="22">
          <a-select v-if="display1" placeholder="select">
            <a-option v-for="item in [1, 2, 3]" :key="item" :value="item">
              {{ item }}
            </a-option>
          </a-select>
          <a-input v-if="display2" placeholder="test" allow-clear>
            <template #prefix>
              <icon-pen />
            </template>
            <template #suffix>
              <a-switch type="round" />
            </template>
          </a-input>
          <a-input v-if="display3" placeholder="test" allow-clear>
            <template #prefix>
              <icon-common />
            </template>
          </a-input>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const display1 = ref(true);
  const display2 = ref(true);
  const display3 = ref(true);
</script>

<style scoped lang="less">
  .header {
    display: flex;
    padding: 20px;
  }

  .content {
    width: 500px;
    padding: 20px;
    background: skyblue;
  }
</style>