diff --git a/components/common/Footer.vue b/components/common/Footer.vue
new file mode 100644
index 0000000..0039533
--- /dev/null
+++ b/components/common/Footer.vue
@@ -0,0 +1,18 @@
+<template>
+  <footer class="text-gray-800 h-[10vh] bg-[#F1F3F4] dark:text-white  dark:bg-[#5b77af]">
+    <div class="max-w-4xl mx-auto py-4 px-4 flex justify-between items-center">
+      <div class="text-sm">
+        © 2024 Whois查询. All rights reserved.
+      </div>
+      <div class="flex items-center space-x-4">
+        <NuxtLink to="/api.html" class="hover:underline">API文档</NuxtLink>
+        <NuxtLink to="https://github.com/7836246/Nuxt-Whois" class="hover:underline">
+          <Icon name="ant-design:github-outlined" class="h-6 w-6" />
+        </NuxtLink>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 70af954..c9deb65 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -56,7 +56,7 @@ const timeStore = useTimeStore()
 </script>
 
 <template>
-  <div class="w-full  min-h-screen text-xs bg-[#F1F3F4] dark:bg-transparent">
+  <div class="w-full h-[90vh] text-xs bg-[#F1F3F4] dark:bg-transparent">
     <div class=" max-w-screen-lg mx-auto pt-[25vh] px-[1em] pb-[10vh] ">
       <nav class=" w-full text-[#464747] h-5 dark:bg-gray-700">
         <NuxtLink class="mb-3 font-bold text-2xl inline-block text-current no-underline dark:text-white"
@@ -121,6 +121,7 @@ const timeStore = useTimeStore()
       <slot />
     </div>
   </div>
+  <CommonFooter />
 </template>
 
 <style scoped>
diff --git a/layouts/empty.vue b/layouts/empty.vue
new file mode 100644
index 0000000..ec069fc
--- /dev/null
+++ b/layouts/empty.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="w-full h-[90vh]  text-xs bg-[#F1F3F4] dark:bg-transparent">
+      <div class="max-w-screen-lg mx-auto pt-[15vh] px-[1em] pb-[10vh] ">
+        <slot />
+      </div>
+    </div>
+    <CommonFooter />
+</template>
+<style scoped>
+
+</style>
diff --git a/pages/api.html.vue b/pages/api.html.vue
new file mode 100644
index 0000000..89742e5
--- /dev/null
+++ b/pages/api.html.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'empty',
+})
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto py-8 px-4">
+    <div class="overflow-hidden shadow-md rounded-lg">
+      <div class="px-6 py-4 bg-red-500 text-white font-bold uppercase">
+        <div class="flex items-center justify-between">
+          <NuxtLink to="/" class="hover:text-white">
+            <Icon name="ic:outline-home" class="h-6 w-6" /> <!-- 调整图标大小 -->
+          </NuxtLink>
+          <span>Whois关键信息提取API</span>
+          <span></span> <!-- 占位符以保持标题居中 -->
+        </div>
+      </div>
+
+    <div class="p-6">
+        <div class="grid grid-cols-3 gap-4 mb-4">
+          <div class="font-semibold">接口地址</div>
+          <div class="col-span-2">/api/whois</div>
+        </div>
+<!--        <div class="grid grid-cols-3 gap-4 mb-4">-->
+<!--          <div class="font-semibold">累计调用</div>-->
+<!--          <div class="col-span-2"><span class="count">156</span> 次</div>-->
+<!--        </div>-->
+        <div class="grid grid-cols-3 gap-4 mb-4">
+          <div class="font-semibold">请求方式</div>
+          <div class="col-span-2">POST</div>
+        </div>
+        <div class="grid grid-cols-3 gap-4 mb-4">
+          <div class="font-semibold">返回格式</div>
+          <div class="col-span-2">String</div>
+        </div>
+      </div>
+      <div class="px-6 py-4 border-t border-gray-200">
+        <div class="font-bold mb-2">输入参数</div>
+        <div class="grid grid-cols-3 gap-4 mb-4">
+          <div class="font-semibold">名称</div>
+          <div class="font-semibold">类型</div>
+          <div class="font-semibold">描述</div>
+        </div>
+        <!-- 参数列表 -->
+        <div class="grid grid-cols-3 gap-4 mb-4">
+          <div>domain</div>
+          <div>string</div>
+          <div>(必选) 域名</div>
+        </div>
+<!--        <div class="grid grid-cols-3 gap-4 mb-4">-->
+<!--          <div>whois</div>-->
+<!--          <div>string</div>-->
+<!--          <div>(必选) 域名的whois信息</div>-->
+<!--        </div>-->
+<!--        <div class="grid grid-cols-3 gap-4">-->
+<!--          <div>lang</div>-->
+<!--          <div>string</div>-->
+<!--          <div>(可选) 语言代码 ISO 639-1，例: "zh"、"en"</div>-->
+<!--        </div>-->
+<!--        <div class="grid grid-cols-3 gap-4 mb-4">-->
+<!--          <div>time_zone</div>-->
+<!--          <div>string</div>-->
+<!--          <div>(可选) 时区，例: "8"、"-3"</div>-->
+<!--        </div>-->
+      </div>
+      <div class="px-6 py-4 border-t border-gray-200">
+        <div class="font-bold">输出参数</div>
+        <div class="mt-2">返回处理后的whois字符串</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>