<script lang="ts" setup>
  import { Tabs } from 'ant-design-vue';
  import { ref } from 'vue';
  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
  import BasicConfiguration from './BasicConfiguration.vue';
  import VisualConfiguration from './VisualConfiguration.vue';
  import VisualOptions from './VisualOptions.vue';
  const activeKey = ref('1');
</script>

<template>
  <BasicModal v-bind="$attrs" title="自定义组件" width="70%">
    <section>
      <Tabs type="card" v-model:activeKey="activeKey">
        <Tabs.TabPane key="1" tab="基础配置">
          <BasicConfiguration />
        </Tabs.TabPane>
        <Tabs.TabPane key="2" tab="可视化配置">
          <VisualConfiguration />
        </Tabs.TabPane>
        <Tabs.TabPane key="3" tab="可视化选项">
          <VisualOptions />
        </Tabs.TabPane>
      </Tabs>
    </section>
  </BasicModal>
</template>