feat: 第一次生成

2025-05-04 20:37:40 +08:00
commit 5c01df4a93
42 changed files with 12705 additions and 0 deletions
@@ -0,0 +1,147 @@
+<template>
+  <div class="app">
+    <header class="header">
+      <div class="logo-container">
+        <img :src="logoImg" alt="百盘搜" class="logo">
+        <h1 class="site-title">百盘搜</h1>
+      </div>
+      <div class="search-container">
+        <input type="text" placeholder="请输入您要搜索的关键词" v-model="searchKeyword" @keyup.enter="handleSearch">
+        <button @click="handleSearch" class="search-button">
+          <img :src="searchIcon" alt="搜索" class="search-icon">
+        </button>
+      </div>
+    </header>
+    <div class="notice-bar">
+      <span class="notice-icon">📢</span>
+      <span>备用站点：</span>
+      <a href="https://www.feizhupan.com" target="_blank">https://www.feizhupan.com</a>，
+      <a href="https://www.dashengpan.xyz" target="_blank">https://www.dashengpan.xyz</a>，
+      <span>请保存到浏览器书签中。</span>
+    </div>
+    <main class="main-content">
+      <NuxtPage />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import logoImg from '~/assets/logo.png';
+import searchIcon from '~/assets/search-icon.svg';
+
+const router = useRouter();
+const searchKeyword = ref('');
+
+function handleSearch() {
+  if (searchKeyword.value.trim()) {
+    router.push({ path: '/', query: { keyword: searchKeyword.value } });
+  }
+}
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  align-items: center;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  background-color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 1200px;
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  width: 40px;
+  height: 40px;
+  margin-right: 0.5rem;
+}
+
+.site-title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #ff9500;
+}
+
+.search-container {
+  display: flex;
+  width: 50%;
+  max-width: 600px;
+  border: 2px solid #ff9500;
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.search-container input {
+  flex-grow: 1;
+  padding: 0.6rem 1rem;
+  border: none;
+  outline: none;
+  font-size: 1rem;
+}
+
+.search-button {
+  background-color: #ff9500;
+  border: none;
+  padding: 0.6rem 1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.notice-bar {
+  background-color: #fff8e6;
+  padding: 0.5rem 2rem;
+  color: #9e6500;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+  width: 100%;
+  max-width: 1200px;
+}
+
+.notice-bar a {
+  color: #ff9500;
+  text-decoration: none;
+}
+
+.main-content {
+  flex: 1;
+  padding: 2rem;
+  width: 100%;
+  max-width: 1200px;
+}
+</style>