<script setup lang="ts">
import { NButton } from 'naive-ui'
import { ref } from 'vue'

import ProxyPanel from '@/components/proxy/ProxyPanel.vue'

const panel = ref<InstanceType<typeof ProxyPanel> | null>(null)
</script>

<template>
  <div class="flex flex-col gap-4 p-6 pb-8 max-md:p-3">
    <div class="flex items-center gap-2.5">
      <h1 class="page-title">代理</h1>
      <span class="truncate text-[13px] text-ink-3">出站代理管理</span>
      <div class="ml-auto flex flex-none items-center gap-2">
        <NButton size="medium" @click="panel?.openImport()">批量导入</NButton>
        <NButton size="medium" type="primary" @click="panel?.openCreate()">新增代理</NButton>
      </div>
    </div>
    <ProxyPanel ref="panel" />
  </div>
</template>
