From 4410040bad52c44da2c57fc1ca0e8121114d4b92 Mon Sep 17 00:00:00 2001
From: sendevia <me@sendevia.top>
Date: Tue, 25 Nov 2025 02:38:14 +0800
Subject: [PATCH] add(appbar): add appbar component with search functionality

---
 .vitepress/theme/components/Appbar.vue        | 334 ++++++++++++++++++
 .vitepress/theme/index.ts                     |   3 +-
 .../theme/styles/_components/appbar.scss      |  93 -----
 .vitepress/theme/styles/main.scss             |   1 -
 4 files changed, 336 insertions(+), 95 deletions(-)
 create mode 100644 .vitepress/theme/components/Appbar.vue
 delete mode 100644 .vitepress/theme/styles/_components/appbar.scss

diff --git a/.vitepress/theme/components/Appbar.vue b/.vitepress/theme/components/Appbar.vue
new file mode 100644
index 0000000..6b47b24
--- /dev/null
+++ b/.vitepress/theme/components/Appbar.vue
@@ -0,0 +1,334 @@
+<script setup lang="ts">
+// todo: 优化输入状态的处理
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { useGlobalData } from "../composables/useGlobalData";
+import { useGlobalScroll } from "../composables/useGlobalScroll";
+import { useAllPosts, type Post } from "../composables/useAllPosts";
+import { handleTabNavigation } from "../utils/tabNavigation";
+
+const { frontmatter } = useGlobalData();
+const { isScrolled } = useGlobalScroll({ threshold: 100 });
+
+const isHome = computed(() => frontmatter.value.home === true);
+
+const appbar = document.querySelector(".appbar") as HTMLInputElement;
+const isSearching = ref(false);
+const postsRef = useAllPosts(true);
+const query = ref("");
+const isTyping = ref(false);
+
+// 计算过滤后的文章列表
+const filteredPosts = computed<Post[]>(() => {
+  const q = query.value.trim().toLowerCase();
+  if (!q) return [];
+  return (postsRef.value ?? []).filter((post) => {
+    const inTitle = post.title?.toLowerCase().includes(q) ?? false;
+    const inDesc = post.description?.toLowerCase().includes(q) ?? false;
+    const inContent = post.content?.toLowerCase().includes(q) ?? false;
+    const inDate = post.date?.toLowerCase().includes(q) ?? false;
+    return inTitle || inDesc || inContent || inDate;
+  });
+});
+
+// 处理搜索输入框焦点事件
+const handleFocus = () => {
+  isSearching.value = true;
+};
+
+// 处理搜索输入框失焦事件
+const handleBlur = () => {
+  if (filteredPosts.value.length === 0) {
+    isSearching.value = false;
+  }
+};
+
+// 处理搜索结果链接点击后事件
+const handleResultClick = () => {
+  setTimeout(() => {
+    clearSearchState();
+  }, 200);
+};
+
+// 清除搜索状态并取消焦点
+const clearSearchState = () => {
+  isSearching.value = false;
+  query.value = "";
+  const searchInput = document.querySelector(".searchInput") as HTMLInputElement;
+  if (searchInput) {
+    searchInput.blur();
+  }
+};
+
+// 处理按键事件
+const handleKeydown = (event: KeyboardEvent) => {
+  const container = document.querySelector(".appbar") as HTMLElement;
+  const items = container?.querySelectorAll(".searchInput, .item");
+
+  if (event.key === "Escape" && isSearching.value) {
+    event.preventDefault();
+    handleTabNavigation(container, items, event.key === "Escape");
+    clearSearchState();
+  }
+
+  if (event.key === "Tab" && isSearching.value && query.value.trim() !== "") {
+    event.preventDefault();
+    handleTabNavigation(container, items, event.shiftKey);
+  }
+};
+
+// 监听页面点击事件，用于处理外部点击
+const handleDocumentClick = (event: Event) => {
+  const target = event.target as HTMLElement;
+
+  // 如果点击的是appbar外部且不是搜索结果
+  if (appbar && !appbar.contains(target) && !target.closest(".searchResult")) {
+    // 没有搜索结果时，可点击空白处退出搜索
+    // 有搜索结果时，只有点击文章链接后才会退出搜索
+    if (filteredPosts.value.length === 0) {
+      clearSearchState();
+    }
+  }
+};
+
+// 处理移动端返回导航（未验证）
+const handlePopState = () => {
+  if (isSearching.value) {
+    clearSearchState();
+  }
+};
+
+onMounted(() => {
+  document.addEventListener("click", handleDocumentClick);
+  document.addEventListener("keydown", handleKeydown);
+  window.addEventListener("popstate", handlePopState);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleDocumentClick);
+  document.removeEventListener("keydown", handleKeydown);
+  window.removeEventListener("popstate", handlePopState);
+});
+</script>
+
+<template>
+  <div class="appbar" :class="{ scroll: isScrolled, homeLayout: isHome, searching: isSearching, typing: isTyping }">
+    <div class="actionArea">
+      <div class="leadingButton">
+        <MaterialButton color="text" icon="menu" size="xs" />
+      </div>
+      <input v-model="query" placeholder="搜索文章" class="searchInput" @focus="handleFocus" @blur="handleBlur" />
+      <div class="authorAvatar">
+        <img src="/assets/images/avatar.webp" alt="logo" />
+      </div>
+    </div>
+    <div v-if="filteredPosts.length" class="searchResult">
+      <a v-for="post in filteredPosts" :key="post.url" :href="post.url" class="item" @click="handleResultClick">
+        <div class="title">
+          <h3>{{ post.title }}</h3>
+          <p v-if="post.date" class="date">{{ post.date }}</p>
+        </div>
+        <p v-if="post.description" class="description">{{ post.description }}</p>
+        <hr v-if="filteredPosts.indexOf(post) !== filteredPosts.length - 1" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use "sass:meta";
+@use "../styles/mixin";
+
+.appbar {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 8px;
+  justify-content: space-between;
+
+  position: fixed;
+  top: -64px;
+
+  height: 64px;
+  width: 100%;
+
+  padding-inline: 4px;
+
+  color: var(--md-sys-color-on-surface);
+
+  background-color: var(--md-sys-color-surface);
+
+  opacity: 0;
+  overflow: hidden;
+  transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
+  visibility: hidden;
+  z-index: 998;
+
+  .actionArea {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: center;
+
+    position: relative;
+
+    height: 64px;
+    width: 100%;
+
+    .leadingButton {
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      justify-content: center;
+
+      position: absolute;
+      left: 0px;
+
+      height: 48px;
+      width: 48px;
+
+      margin-inline: 4px 8px;
+
+      opacity: 1;
+      transition: opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
+      z-index: 0;
+
+      MaterialButton:focus-visible {
+        @include mixin.focus-ring($thickness: 2);
+      }
+    }
+
+    .searchInput {
+      @include mixin.typescale-style("title-medium");
+
+      flex-grow: 1;
+
+      height: 56px;
+      min-width: 0px;
+
+      margin-inline-start: 56px;
+      padding-block: 0px;
+      padding-inline: 24px;
+
+      color: var(--md-sys-color-on-surface-variant);
+      text-overflow: ellipsis;
+
+      border: none;
+      border-radius: var(--md-sys-shape-corner-full);
+
+      background-color: var(--md-sys-color-surface-container);
+
+      transition: margin var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
+      z-index: 1;
+
+      &:focus-visible {
+        @include mixin.focus-ring($thickness: 2);
+      }
+    }
+
+    .authorAvatar {
+      display: flex;
+      align-content: center;
+      flex-direction: column;
+      flex-shrink: 0;
+      flex-wrap: wrap;
+      justify-content: center;
+
+      height: 48px;
+      width: 48px;
+
+      overflow: hidden;
+      z-index: 0;
+
+      img {
+        height: 32px;
+        width: 32px;
+
+        object-fit: cover;
+        -webkit-mask: var(--via-svg-mask) no-repeat 0 / 100%;
+        mask: var(--via-svg-mask) no-repeat 0 / 100%;
+      }
+    }
+  }
+
+  .searchResult {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 8px;
+
+    position: absolute;
+    top: 64px;
+
+    width: 100%;
+
+    padding-inline: 24px;
+    padding-block-start: 12px;
+
+    overflow: scroll;
+
+    .item {
+      width: 100%;
+
+      text-decoration: none;
+
+      border-radius: var(--md-sys-shape-corner-medium);
+
+      .description {
+        margin-block-end: 12px;
+      }
+
+      &:focus-visible {
+        @include mixin.focus-ring($thickness: 2, $offset: 4);
+      }
+    }
+  }
+
+  &.searching {
+    height: 100%;
+
+    .actionArea {
+      .leadingButton {
+        opacity: 0;
+        transition: opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
+      }
+
+      .searchInput {
+        margin-inline-start: 0px;
+
+        transition: margin var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
+      }
+    }
+  }
+
+  &.scroll {
+    background-color: var(--md-sys-color-surface-container);
+
+    .searchInput {
+      background-color: var(--md-sys-color-surface-container-highest);
+    }
+  }
+}
+
+@media screen and (max-width: 1600px) {
+}
+
+@media screen and (max-width: 1200px) {
+}
+
+@media screen and (max-width: 840px) {
+  .appbar {
+    top: 0;
+
+    opacity: 1;
+    visibility: visible;
+
+    .searchResult {
+      height: calc(100% - (80px + 64px));
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+}
+</style>
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index a060736..0f3db14 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -1,7 +1,7 @@
 import type { Theme } from "vitepress";
-
 import Layout from "./layouts/Default.vue";
 
+import AppBar from "./components/Appbar.vue";
 import Button from "./components/Button.vue";
 import Footer from "./components/Footer.vue";
 import Header from "./components/Header.vue";
@@ -16,6 +16,7 @@ import "./styles/main.scss";
 export default {
   Layout,
   enhanceApp({ app }) {
+    app.component("AppBar", AppBar);
     app.component("Footer", Footer);
     app.component("Header", Header);
     app.component("ImageViewer", ImageViewer);
diff --git a/.vitepress/theme/styles/_components/appbar.scss b/.vitepress/theme/styles/_components/appbar.scss
deleted file mode 100644
index a50d913..0000000
--- a/.vitepress/theme/styles/_components/appbar.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-@use "sass:meta";
-@use "../mixin";
-
-// https://m3.material.io/components/top-app-bar/
-
-.appbar {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: 6px;
-  justify-content: space-between;
-
-  position: fixed;
-  top: -64px;
-
-  height: 64px;
-  width: 100%;
-
-  padding: 8px 4px;
-
-  background-color: var(--md-sys-color-surface-container-low);
-
-  opacity: 0;
-  overflow: hidden;
-  transition: var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-standard);
-  visibility: hidden;
-  z-index: 4;
-
-  #appbar-dynamic-title {
-    @include mixin.typescale-style("title-large");
-
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    flex-grow: 1;
-    justify-content: center;
-
-    height: 100%;
-
-    margin: auto;
-
-    text-align: start;
-    text-transform: uppercase;
-
-    span {
-      position: absolute;
-
-      width: calc(100% - 100px);
-
-      line-height: 1;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      overflow: hidden;
-      transition: var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized);
-
-      &:nth-child(1) {
-        transform: translateY(0px);
-        opacity: 1;
-      }
-
-      &:nth-child(2) {
-        transform: translateY(45px);
-        opacity: 0;
-      }
-    }
-  }
-
-  &[scroll="true"] {
-    background-color: var(--md-sys-color-surface-container-high);
-
-    #appbar-dynamic-title {
-      span {
-        &:nth-child(1) {
-          transform: translateY(-45px);
-          opacity: 0;
-        }
-
-        &:nth-child(2) {
-          transform: translateY(0px);
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  @media screen and (max-width: 840px) {
-    top: 0;
-
-    visibility: visible;
-  }
-}
diff --git a/.vitepress/theme/styles/main.scss b/.vitepress/theme/styles/main.scss
index 4c4c48a..501992e 100644
--- a/.vitepress/theme/styles/main.scss
+++ b/.vitepress/theme/styles/main.scss
@@ -8,7 +8,6 @@
 @include meta.load-css("tokens");
 @include meta.load-css("animation");
 
-@include meta.load-css("_components/appbar");
 @include meta.load-css("_components/dialog");
 @include meta.load-css("_components/loading-splash");
 @include meta.load-css("_components/snackbar");