feat: add ai-assistant link & add home button & add a qrcode (#68)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

package.json

@@ -18,6 +18,7 @@
     "@unhead/vue": "^1.8.11",
     "@vueuse/core": "^10.9.0",
     "date-fns": "^3.3.1",
+    "floating-vue": "^5.2.2",
     "github-markdown-css": "^5.5.1",
     "vite-ssg": "^0.23.6",
     "vue": "^3.4.21",

src/App.vue

@@ -8,6 +8,7 @@ useHead({
 
 <template>
   <app-header />
+  <ai-assistant />
   <router-view v-slot="{ Component }">
     <Transition>
       <component :is="Component" />

src/components/ai-assistant.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const isShow = useLocalStorage('display-ai-assistant', true)
+</script>
+
+<template>
+  <div
+    flex="~ col"
+    fixed
+    bottom-10
+    right-10
+    cursor-pointer
+    items-center
+    justify-center
+  >
+    <div v-if="isShow" flex="~ col" justify-center>
+      <div flex>
+        <a
+          class="ai-assistant-img"
+          w-70px
+          target="_blank"
+          href="https://chatglm.cn/main/gdetail/65d70a301e6bc1f647c934e3"
+        >
+          <img w-80px alt="AI Assistant" src="/static/ai-assistant.png" />
+        </a>
+        <div i-carbon-close-outline @click="isShow = false" />
+      </div>
+      <a
+        target="_blank"
+        mr-8px
+        href="https://chatglm.cn/main/gdetail/65d70a301e6bc1f647c934e3"
+        >AI 小助手</a
+      >
+    </div>
+
+    <span
+      v-else
+      bg="#d4ebcb"
+      border="1px [var(--text-color)]"
+      h-7
+      w-7
+      rounded-full
+      text-center
+      color-black
+      @click="isShow = true"
+      >AI</span
+    >
+  </div>
+</template>

src/components/app-footer.vue

@@ -20,6 +20,19 @@
       <a href="https://github.com/kang8" target="_blank">Kang</a>
       and <a href="https://github.com/sxzz" target="_blank">三咲智子</a>
     </p>
+    <p text-sm>
+      <a
+        text="AI小助手"
+        target="_blank"
+        href="https://mastergo.com/community/resource/9252?from=card"
+      />
+      by
+      <a
+        text="「知识共享 - 署名 4.0」"
+        target="_blank"
+        href="https://creativecommons.org/licenses/by/4.0/"
+      />
+    </p>
     <p>
       Made by
       <a href="https://github.com/sxzz" target="_blank">三咲智子</a> with ❤️

src/components/app-header.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { Menu } from 'floating-vue'
+import 'floating-vue/dist/style.css'
+
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
 </script>
@@ -64,6 +67,19 @@ const toggleDark = useToggle(isDark)
         <a target="_blank" href="https://music.163.com/#/djradio?id=1001312291">
           <img h-20px alt="NetEase Music" src="/static/netease-music.svg" />
         </a>
+
+        <Menu>
+          <div text="#2aae67" i-carbon-logo-wechat cursor-pointer text-20px />
+          <template #popper>
+            <div flex="~ col" m-10px>
+              <img
+                h-150px
+                alt="Weixin Offcial Accounts Platform"
+                src="/static/we-chat.jpeg"
+              />扫一扫 关注微信公众号
+            </div>
+          </template>
+        </Menu>
       </div>
     </div>
     <div
@@ -75,5 +91,11 @@ const toggleDark = useToggle(isDark)
       text="black 2xl"
       @click="toggleDark()"
     />
+
+    <router-link to="/">
+      <div absolute left-5 top-5 cursor-pointer text="black 2xl">
+        <div i-carbon-home text="[var(--text-color)]" />
+      </div>
+    </router-link>
   </header>
 </template>

src/typings/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AiAssistant: typeof import('./../components/ai-assistant.vue')['default']
     AppFooter: typeof import('./../components/app-footer.vue')['default']
     AppHeader: typeof import('./../components/app-header.vue')['default']
     Badge: typeof import('./../components/badge.vue')['default']