用vue ant 在新增一个采集端口的配置页面，主要包括名称、端口、状态，可以选择对应的端口名称开启采集，支持多选

好的，那我来给你提供一下实现思路。

首先，你需要在 Vue 中使用 Ant Design Vue 的组件库来实现页面的样式和交互功能。你可以在页面中使用 `Form`、`Input`、`Checkbox`、`Button` 等组件来构建界面。

对于多选的实现，你可以使用 `Checkbox.Group` 组件，并将它的 `options` 属性设置为一个数组，数组中每个元素都是一个对象，包含了选项的 `label` 和 `value`。你可以根据你的需求自定义 `label` 和 `value` 的值。用户在选择多个选项后，组件会将选择的值以数组的形式返回给你，你可以将这个数组保存到数据源中。

代码示例：

<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item label="名称" required>
      <a-input v-model="name" />
    </a-form-item>
    <a-form-item label="端口" required>
      <a-input-number v-model="port" />
    </a-form-item>
    <a-form-item label="状态">
      <a-switch v-model="status" />
    </a-form-item>
    <a-form-item label="选择端口" required>
      <a-checkbox-group v-model="selectedPorts">
        <a-checkbox-group-option v-for="(option, index) in portOptions" :key="index" :label="option.value" :value="option.label">
          {{ option.label }}
        </a-checkbox-group-option>
      </a-checkbox-group>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">保存</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      name: '',
      port: null,
      status: false,
      portOptions: [
        { label: '端口1', value: 'port1' },
        { label: '端口2', value: 'port2' },
        { label: '端口3', value: 'port3' },
      ],
      selectedPorts: [],
    }
  },
  methods: {
    handleSubmit() {
      const { validateFields } = this.form
      validateFields((errors, values) => {
        if (errors) {
          return
        }
        console.log(values)
      })
    },
  },
}
</script>

以上代码中，我们使用了 `a-form` 组件来包裹整个表单，`a-form-item` 组件用于包裹每个表单项，`a-input` 和 `a-input-number` 组件用于输入名称和端口，`a-switch` 组件用于选择状态。最重要的是 `a-checkbox-group` 和 `a-checkbox-group-option` 组件，它们实现了多选功能。

在 `handleSubmit` 方法中，我们使用了 `validateFields` 方法来进行表单验证，并将表单数据打印到控制台上。你可以根据自己的需求修改这个方法，例如将数据保存到数据库中。