50 lines
1.4 KiB
Vue
50 lines
1.4 KiB
Vue
<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>
|