<script setup lang="ts">
import { NButton, NCard, NFlex, NTag, NText, NA } from 'naive-ui';
import { useMessage } from 'naive-ui';

const message = useMessage();

function handleAdd() {
  message.info('新增 API 扩展');
}
</script>

<template>
  <NFlex vertical :gap="20">
    <NText tag="h2" style="font-size: 20px; font-weight: 600; margin: 0">API 扩展</NText>

    <NCard :bordered="true" style="max-width: 760px">
      <NFlex :gap="16" align="flex-start">
        <NFlex
          align="center"
          justify="center"
          style="
            width: 52px;
            height: 52px;
            border-radius: 12px;
            background: var(--n-color-embedded);
            flex-shrink: 0;
          "
        >
          <span style="font-size: 24px">📤</span>
        </NFlex>
        <NFlex vertical :gap="6">
          <NText style="font-size: 14px; line-height: 1.6">
            API 扩展提供了一个集中式的 API 管理，在此统一添加 API 配置后，方便在 Dify
            上的各类应用中直接使用。
          </NText>
          <NA href="#" style="font-size: 13px"> 了解如何开发您自己的 API 扩展。↗ </NA>
        </NFlex>
      </NFlex>
    </NCard>

    <NButton
      secondary
      style="max-width: 760px; width: 100%; justify-content: center"
      @click="handleAdd"
    >
      + 新增 API 扩展
    </NButton>
  </NFlex>
</template>
