在vue3，ts语法下，要求使用ant-design组件帮我绘制一个页面，页面布局为有着四列的a-list组件，第一列title为空，四行内容分别为1，2，3，4，第二列，title为‘筛选字段来源’，四行内容分别为四个下拉列表

，第三列，title为‘筛选方式’，四行内容分别为四个单选框，第四列，title为‘筛选条件’，四行内容分别为四个输入框。以下是代码实现：

<template>
  <div class="page">
    <a-list bordered>
      <a-list-item :style="{ gridColumn: '2 / 3' }"></a-list-item>
      <a-list-item :style="{ gridColumn: '3 / 4' }">筛选字段来源</a-list-item>
      <a-list-item :style="{ gridColumn: '4 / 5' }">筛选方式</a-list-item>
      <a-list-item :style="{ gridColumn: '5 / 6' }">筛选条件</a-list-item>

      <a-list-item :style="{ gridColumn: '2 / 3' }">1</a-list-item>
      <a-list-item :style="{ gridColumn: '3 / 4' }">
        <a-select v-model="select1">
          <a-select-option value="option1">Option 1</a-select-option>
          <a-select-option value="option2">Option 2</a-select-option>
          <a-select-option value="option3">Option 3</a-select-option>
          <a-select-option value="option4">Option 4</a-select-option>
        </a-select>
      </a-list-item>
      <a-list-item :style="{ gridColumn: '4 / 5' }">
        <a-radio-group v-model="radio1">
          <a-radio value="radio1">Radio 1</a-radio>
          <a-radio value="radio2">Radio 2</a-radio>
          <a-radio value="radio3">Radio 3</a-radio>
          <a-radio value="radio4">Radio 4</a-radio>
        </a-radio-group>
      </a-list-item>
      <a-list-item :style="{ gridColumn: '5 / 6' }">
        <a-input v-model="input1" />
      </a-list-item>

      <a-list-item :style="{ gridColumn: '2 / 3' }">2</a-list-item>
      <a-list-item :style="{ gridColumn: '3 / 4' }">
        <a-select v-model="select2">
          <a-select-option value="option1">Option 1</a-select-option>
          <a-select-option value="option2">Option 2</a-select-option>
          <a-select-option value="option3">Option 3</a-select-option>
          <a-select-option value="option4">Option 4</a-select-option>
        </a-select>
      </a-list-item>
      <a-list-item :style="{ gridColumn: '4 / 5' }">
        <a-radio-group v-model="radio2">
          <a-radio value="radio1">Radio 1</a-radio>
          <a-radio value="radio2">Radio 2</a-radio>
          <a-radio value="radio3">Radio 3</a-radio>
          <a-radio value="radio4">Radio 4</a-radio>
        </a-radio-group>
      </a-list-item>
      <a-list-item :style="{ gridColumn: '5 / 6' }">
        <a-input v-model="input2" />
      </a-list-item>

      <a-list-item :style="{ gridColumn: '2 / 3' }">3</a-list-item>
      <a-list-item :style="{ gridColumn: '3 / 4' }">
        <a-select v-model="select3">
          <a-select-option value="option1">Option 1</a-select-option>
          <a-select-option value="option2">Option 2</a-select-option>
          <a-select-option value="option3">Option 3</a-select-option>
          <a-select-option value="option4">Option 4</a-select-option>
        </a-select>
      </a-list-item>
      <a-list-item :style="{ gridColumn: '4 / 5' }">
        <a-radio-group v-model="radio3">
          <a-radio value="radio1">Radio 1</a-radio>
          <a-radio value="radio2">Radio 2</a-radio>
          <a-radio value="radio3">Radio 3</a-radio>
          <a-radio value="radio4">Radio 4</a-radio>
        </a-radio-group>
      </a-list-item>
      <a-list-item :style="{ gridColumn: '5 / 6' }">
        <a-input v-model="input3" />
      </a-list-item>

      <a-list-item :style="{ gridColumn: '2 / 3' }">4</a-list-item>
      <a-list-item :style="{ gridColumn: '3 / 4' }">
        <a-select v-model="select4">
          <a-select-option value="option1">Option 1</a-select-option>
          <a-select-option value="option2">Option 2</a-select-option>
          <a-select-option value="option3">Option 3</a-select-option>
          <a-select-option value="option4">Option 4</a-select-option>
        </a-select>
      </a-list-item>
      <a-list-item :style="{ gridColumn: '4 / 5' }">
        <a-radio-group v-model="radio4">
          <a-radio value="radio1">Radio 1</a-radio>
          <a-radio value="radio2">Radio 2</a-radio>
          <a-radio value="radio3">Radio 3</a-radio>
          <a-radio value="radio4">Radio 4</a-radio>
        </a-radio-group>
      </a-list-item>
      <a-list-item :style="{ gridColumn: '5 / 6' }">
        <a-input v-model="input4" />
      </a-list-item>
    </a-list>
  </div>
</template>

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

export default defineComponent({
  name: 'MyPage',
  data() {
    return {
      select1: 'option1',
      select2: 'option2',
      select3: 'option3',
      select4: 'option4',
      radio1: 'radio1',
      radio2: 'radio2',
      radio3: 'radio3',
      radio4: 'radio4',
      input1: '',
      input2: '',
      input3: '',
      input4: '',
    };
  },
});
</script>

<style scoped>
.page {
  display: flex;
  justify-content: center;
}

a-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 80%;
  margin-top: 20px;
}

a-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
</style>