更改了网站名称，优化了搜索点击

xiaoqiu
assets/logo.jpg
components/App/Footer.vue
components/App/Header.vue
components/MySearch/index.vue
nuxt.config.ts
pages/index.vue
public/favicon.ico
--- a/assets/logo.jpg 0 → 100644
查看文件 @5bdbc51
+++ b/assets/logo.jpg 0 → 100644
查看文件 @5bdbc51
--- a/components/App/Footer.vue
查看文件 @5bdbc51
+++ b/components/App/Footer.vue
查看文件 @5bdbc51
 <template>
-  <footer class="bg-gray-800 dark:bg-gray-950 text-white py-12 px-8 mt-auto transition-colors duration-300">
+  <footer
+    class="bg-gray-800 dark:bg-gray-950 text-white py-12 px-8 mt-auto transition-colors duration-300"
+  >
     <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
       <div>
         <h3 class="text-xl font-bold mb-4">
-          {{ webSite.webname.slice(0, 7) }}
+          {{ webSite.webname.split("|")[0] }}
         </h3>
         <p class="text-gray-400">
           提供安全、快速的网址跳转服务，保护您的隐私安全。
--- a/components/App/Header.vue
查看文件 @5bdbc51
+++ b/components/App/Header.vue
查看文件 @5bdbc51
@@ -15,7 +15,7 @@
           {{ webSite.webname }}
         </h1>
         <h2 class="md:text-xl text-base font-bold">
-          {{ webSite.webname.slice(0, 7) }}
+          {{ webSite.webname.split("|")[0] }}
         </h2>
       </NuxtLink>
@@ -29,7 +29,6 @@
 </template>
 <script setup>
-import { Promotion } from "@element-plus/icons-vue";
 const webSite = useState("webSite");
 </script>
--- a/components/MySearch/index.vue
查看文件 @5bdbc51
+++ b/components/MySearch/index.vue
查看文件 @5bdbc51
 <template>
-  <!-- From Uiverse.io by ZAKARIAE48CHELLE -->
-  <div class="input-wrapper">
-    <button class="icon">
+  <div class="input-wrapper" :class="{ active: isExpanded }">
+    <button class="icon" @click="toggleSearch" type="button">
       <svg
         width="25px"
         height="25px"
@@ -25,29 +24,46 @@
       </svg>
     </button>
     <input
+      ref="searchInput"
       v-model="keyWord"
       type="text"
       name="searchKeyword"
       class="input"
       placeholder="输入应用名称回车查找"
       @keyup.enter="onSearch"
+      @blur="handleBlur"
     />
   </div>
 </template>
 <script setup>
 const keyWord = ref("");
+const isExpanded = ref(false);
+const searchInput = ref(null);
+
+function toggleSearch() {
+  isExpanded.value = !isExpanded.value;
+  if (isExpanded.value && searchInput.value) {
+    nextTick(() => {
+      searchInput.value.focus();
+    });
+  }
+}
+
+function handleBlur() {
+  if (!keyWord.value) {
+    isExpanded.value = false;
+  }
+}
+
 function onSearch() {
   if (keyWord.value) {
-    // 跳转到搜索页面
-    // this.$router.push({ path: "/search", query: { q: keyword.value } });
     window.location.href = "/search?keyword=" + keyWord.value;
   }
 }
 </script>
 <style scoped>
-/* From Uiverse.io by ZAKARIAE48CHELLE */
 .input-wrapper {
   display: flex;
   align-items: center;
@@ -72,8 +88,9 @@ function onSearch() {
 .input::placeholder,
 .input {
-  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
-    "Lucida Sans", Arial, sans-serif;
+  font-family:
+    "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
+    Arial, sans-serif;
   font-size: 17px;
 }
@@ -93,13 +110,12 @@ function onSearch() {
   outline: none;
   border-style: none;
   border-radius: 50%;
-  pointer-events: painted;
   background-color: transparent;
   transition: 0.2s linear;
+  z-index: 10;
 }
-.icon:focus ~ .input,
-.input:focus {
+.input-wrapper.active .input {
   box-shadow: none;
   width: 250px;
   border-radius: 0px;
@@ -108,29 +124,28 @@ function onSearch() {
   transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
 }
-/* 当最大宽度为768pxs时 */
 @media (max-width: 768px) {
   .input-wrapper {
     width: 200px;
     gap: 10px;
   }
   .icon {
-    width: 35px;
-    height: 35px;
+    width: 44px;
+    height: 44px;
   }
   .input {
-    width: 35px;
-    height: 35px;
-    padding-right: 35px;
+    width: 44px;
+    height: 44px;
+    padding-right: 44px;
   }
   .input::placeholder,
   .input {
-    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
-      "Lucida Sans", Arial, sans-serif;
+    font-family:
+      "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
+      Arial, sans-serif;
     font-size: 14px;
   }
-  .icon:focus ~ .input,
-  .input:focus {
+  .input-wrapper.active .input {
     box-shadow: none;
     width: 180px;
     border-radius: 0px;
--- a/nuxt.config.ts
查看文件 @5bdbc51
+++ b/nuxt.config.ts
查看文件 @5bdbc51
@@ -67,8 +67,8 @@ export default defineNuxtConfig({
   ],
   app: {
     head: {
-      title: 'Annie网站 - 优质 AI 工具集合、AI 资源网站、AI 导航平台',
-      titleTemplate: '%s | Annie网站',
+      title: 'AI工具盒 - 优质 AI 工具集合、AI 资源网站、AI 导航平台',
+      titleTemplate: '%s | AI工具盒',
       htmlAttrs: {
         lang: 'zh-CN'
       },
@@ -78,18 +78,18 @@ export default defineNuxtConfig({
         { name: "force-rendering", content: "webkit"},
         { "http-equiv":"X-UA-Compatible", content:"IE=edge, chrome=1" },
         { name: 'viewport', content:"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" },
-        { name: 'description', content: 'Annie网站是专业的AI工具导航平台，汇集全网优质AI工具，包含AI写作、AI绘画、AI视频、AI对话、AI代码、AI设计、AI办公等各类AI资源，让你快速找到好用的AI工具。' },
+        { name: 'description', content: 'AI工具盒是专业的AI工具导航平台，汇集全网优质AI工具，包含AI写作、AI绘画、AI视频、AI对话、AI代码、AI设计、AI办公等各类AI资源，让你快速找到好用的AI工具。' },
         { name: 'keywords', content: 'AI工具,AI导航,AI资源,AI写作,AI绘画,AI视频,AI对话,ChatGPT,AI代码,AI设计,人工智能工具' },
-        { name: 'author', content: 'Annie网站' },
+        { name: 'author', content: 'AI工具盒' },
         { name:'robots', content:'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1'},
         { name: 'googlebot', content: 'index, follow' },
         { name: 'format-detection', content: 'telephone=no' },
         { name: 'referrer', content: 'origin-when-cross-origin' },
         { property: 'og:type', content: 'website' },
-        { property: 'og:site_name', content: 'Annie网站' },
+        { property: 'og:site_name', content: 'AI工具盒' },
         { property: 'og:locale', content: 'zh_CN' },
         { property: 'twitter:card', content: 'summary_large_image' },
-        { property: 'twitter:site', content: '@Annie网站' }
+        { property: 'twitter:site', content: '@AI工具盒' }
       ],
       link: [
         { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
--- a/pages/index.vue
查看文件 @5bdbc51
+++ b/pages/index.vue
查看文件 @5bdbc51
@@ -61,7 +61,7 @@ useHead({
     { property: "og:locale", content: "zh_CN" },
     {
       property: "og:title",
-      content: "Annie网站 - 优质 AI 工具集合、AI 资源网站、AI 导航平台",
+      content: "AI工具盒 - 优质 AI 工具集合、AI 资源网站、AI 导航平台",
     },
     {
       property: "og:description",
@@ -69,12 +69,12 @@ useHead({
         "专业 AI 工具导航网站，汇集全网优质 AI 工具，包含 AI 写作、AI 绘画、AI 视频、AI 对话、AI 代码、AI 设计、AI 办公等各类 AI 资源，让你快速找到好用的 AI 工具。",
     },
     { property: "og:url", content: "https://aiboxgo.com/" },
-    { property: "og:site_name", content: "Annie网站" },
+    { property: "og:site_name", content: "AI工具盒" },
     { property: "og:type", content: "website" },
     { property: "twitter:card", content: "summary_large_image" },
     {
       property: "twitter:title",
-      content: "Annie网站 - 优质 AI 工具集合、AI 资源网站、AI 导航平台",
+      content: "AI工具盒 - 优质 AI 工具集合、AI 资源网站、AI 导航平台",
     },
     {
       property: "twitter:description",
--- a/public/favicon.ico
查看文件 @5bdbc51
+++ b/public/favicon.ico
查看文件 @5bdbc51