feat(AppFooter): 底部布局开发

src/components/AppFooter.vue

@@ -0,0 +1,52 @@
+<template>
+  <footer class="fixed bottom-0 w-full">
+    <UDivider :avatar="{ src: '/logo.svg' }" />
+    <div
+      class="flex justify-between items-center px-4 md:px-8 lg:px-32 py-3 max-sm:flex-col -mt-2.5"
+    >
+      <!-- icp 备案 -->
+      <ULink
+        to="https://beian.miit.gov.cn/#/Integrated/index"
+        target="_blank"
+        active-class="text-primary"
+        inactive-class="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+      >
+        <div class="flex items-center gap-2">
+          <NuxtImg
+            src="/icp.png"
+            alt="粤ICP备2023007649号-3"
+            class="w-4"
+          />
+          粤ICP备2023007649号-3
+        </div>
+      </ULink>
+      <!-- 社交图标 -->
+      <div class="max-sm:order-first">
+        <!-- github -->
+        <SocialButton
+          icon="i-ri-github-line"
+          url="https://github.com/baiwumm"
+          tip="Github"
+        />
+        <!-- 微信 -->
+        <SocialButton
+          icon="i-ri-wechat-line"
+          url="https://wechat.baiwumm.com/"
+          tip="微信"
+        />
+        <!-- 电子邮箱 -->
+        <SocialButton
+          icon="i-ri-mail-line"
+          url="mailto:[email protected]"
+          tip="Email"
+        />
+        <!-- 博客 -->
+        <SocialButton
+          icon="i-ri-quill-pen-line"
+          url="https://baiwumm.com"
+          tip="博客"
+        />
+      </div>
+    </div>
+  </footer>
+</template>

src/components/Header/Social.vue

@@ -3,16 +3,10 @@
     <!-- 夜间模式 -->
     <AppColorMode />
     <!-- github -->
-    <HeaderSocialButton
+    <SocialButton
       icon="i-simple-icons-github"
-      url="https://github.com/baiwumm"
+      url="https://github.com/baiwumm/dream-site"
       tip="Github"
     />
-    <!-- 博客 -->
-    <HeaderSocialButton
-      icon="i-ri-quill-pen-line"
-      url="https://baiwumm.com"
-      tip="访问博客"
-    />
   </div>
 </template>

src/layouts/default.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
+    <!-- header -->
     <AppHeader />
+    <!-- main -->
     <slot />
+    <!-- footer -->
+    <AppFooter />
   </div>
 </template>

src/pages/index.vue

@@ -1,3 +1,8 @@
 <template>
-  <div class="flex justify-center" />
+  <div
+    class="flex justify-center items-center font-black text-5xl"
+    style="height: calc(100vh - 8rem)"
+  >
+    Hello World!
+  </div>
 </template>