提交

index.html

@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@400;500;600;700&display=block"
+    />
     <title>DevToolkit — Developer Utilities</title>
     <meta name="description" content="A curated collection of developer tools for formatting, encoding, converting, and testing. All in one place." />
   </head>

src/components/ToolCard.vue

@@ -1,7 +1,6 @@
 <!-- @AI-Begin F6T3V 20260612 @@Qoder -->
 <template>
   <div class="tool-card" :style="{ '--tool-color': tool.color }" @click="navigate" role="button" tabindex="0" @keydown.enter="navigate" @keydown.space.prevent="navigate">
-    <div class="tool-card__glow" />
     <div class="tool-card__inner">
       <div class="tool-card__icon-wrap">
         <component :is="iconComponent" class="tool-card__icon" :size="24" />
@@ -50,17 +49,12 @@ function navigate() {
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   cursor: pointer;
-  overflow: hidden;
+  transition: border-color var(--transition), background var(--transition);
-  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
 }
 
 .tool-card:hover {
   border-color: var(--tool-color, var(--accent));
-  transform: translateY(-2px);
+  background: var(--bg-card-hover);
-  /* 使用 color-mix 为卡片整体添加对应颜色的外发光阴影 */
-  box-shadow: 0 12px 40px color-mix(in srgb, var(--tool-color, var(--accent)) 25%, transparent), 
-              0 0 0 1px var(--tool-color, var(--accent));
-  z-index: 1;
 }
 
 .tool-card:focus-visible {
@@ -68,20 +62,6 @@ function navigate() {
   outline-offset: 2px;
 }
 
-.tool-card__glow {
-  position: absolute;
-  inset: 0;
-  /* 增强卡片内部的渐变发光效果 */
-  background: radial-gradient(circle at top right, color-mix(in srgb, var(--tool-color, var(--accent)) 15%, transparent), transparent 60%);
-  opacity: 0;
-  transition: opacity var(--transition);
-  pointer-events: none;
-}
-
-.tool-card:hover .tool-card__glow {
-  opacity: 1;
-}
-
 .tool-card__inner {
   position: relative;
   display: flex;

src/style.css

@@ -1,6 +1,4 @@
 /* @AI-Begin C5W8R 20260612 @@Qoder */
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
-
 :root {
   --bg-primary: #020617;
   --bg-secondary: #0F172A;

src/views/HomeView.vue

@@ -1,7 +1,7 @@
 <!-- @AI-Begin G1H7S 20260612 @@Qoder -->
 <template>
-    <div ref="homeRef" class="home">
+    <div class="home">
-        <!-- Header -->
+        <!-- Header 不参与淡入，避免 sticky + 父级 opacity 导致掉帧 -->
         <header class="header">
             <div class="header__inner container">
                 <div class="header__logo">
@@ -18,6 +18,7 @@
             </div>
         </header>
 
+        <div class="home__body" :class="{ 'home__body--visible': isVisible }">
         <!-- Hero -->
         <section class="hero container">
             <div class="hero__badge">
@@ -105,28 +106,24 @@
                         v-for="i in 3"
                         :key="i"
                         class="footer__dot"
-                        :style="{ animationDelay: `${i * 0.3}s` }"
                     />
                 </div>
             </div>
         </footer>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
 // @AI-Begin K4M8P 20250615 @@Qoder
-import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
+import { ref, computed, onMounted } from "vue";
-import { gsap } from "gsap";
 import { Search, SearchX, X, Wrench, Sparkles } from "@lucide/vue";
 import ToolCard from "../components/ToolCard.vue";
 import { tools, CATEGORIES } from "../data/tools";
 
-const homeRef = ref<HTMLElement | null>(null);
+const isVisible = ref(false);
 const searchQuery = ref("");
 const activeCategory = ref("全部");
-
-let mm: gsap.MatchMedia | null = null;
-let isInitialLoad = true;
 // @AI-End K4M8P 20250615 @@Qoder
 
 const filteredTools = computed(() => {
@@ -157,150 +154,30 @@ function reset() {
 }
 
 // @AI-Begin N2R7T 20250615 @@Qoder
-function animateFilteredContent() {
+const FONT_SPECS = [
-    if (!homeRef.value) return;
+    '400 16px "Fira Sans"',
+    '500 16px "Fira Sans"',
+    '600 15px "Fira Code"',
+    '700 48px "Fira Code"',
+];
 
-    const cards = homeRef.value.querySelectorAll(".grid__inner > *");
+async function ensureFonts() {
-    const emptyEl = homeRef.value.querySelector(".empty");
+    await Promise.all(
-
+        FONT_SPECS.map((spec) => document.fonts.load(spec).catch(() => undefined)),
-    if (cards.length > 0) {
+    );
-        gsap.from(cards, {
+    await document.fonts.ready;
-            autoAlpha: 0,
-            y: 28,
-            scale: 0.94,
-            duration: 0.45,
-            stagger: { amount: 0.35, from: "start" },
-            ease: "power3.out",
-            overwrite: "auto",
-        });
-    } else if (emptyEl) {
-        gsap.from(emptyEl.children, {
-            autoAlpha: 0,
-            y: 16,
-            scale: 0.96,
-            duration: 0.4,
-            stagger: 0.08,
-            ease: "power2.out",
-            overwrite: "auto",
-        });
-    }
 }
 
-onMounted(() => {
+onMounted(async () => {
-    const root = homeRef.value;
+    const reduceMotion = window.matchMedia(
-    if (!root) return;
+        "(prefers-reduced-motion: reduce)",
+    ).matches;
 
-    mm = gsap.matchMedia();
+    if (!reduceMotion) {
-    mm.add(
+        await ensureFonts();
-        { reduceMotion: "(prefers-reduced-motion: reduce)" },
+    }
-        (context) => {
-            const reduceMotion = context.conditions?.reduceMotion ?? false;
 
-            gsap.context(() => {
+    isVisible.value = true;
-                if (reduceMotion) {
-                    gsap.set(
-                        ".header, .hero__badge, .hero__title--accent, .hero__subtitle, .search-wrap, .category-btn, .footer",
-                        { autoAlpha: 1, clearProps: "transform" },
-                    );
-                    isInitialLoad = false;
-                    return;
-                }
-
-                const tl = gsap.timeline({
-                    defaults: { ease: "power3.out" },
-                    onComplete: () => {
-                        isInitialLoad = false;
-                    },
-                });
-
-                tl.from(".header", { y: -24, autoAlpha: 0, duration: 0.5 })
-                    .from(
-                        ".logo-icon",
-                        {
-                            rotation: -90,
-                            scale: 0,
-                            duration: 0.6,
-                            ease: "back.out(1.7)",
-                        },
-                        "<0.15",
-                    )
-                    .from(
-                        ".hero__badge",
-                        {
-                            y: 16,
-                            autoAlpha: 0,
-                            scale: 0.9,
-                            duration: 0.5,
-                            ease: "back.out(1.4)",
-                        },
-                        "-=0.25",
-                    )
-                    .from(
-                        ".hero__title--accent",
-                        { y: 40, autoAlpha: 0, duration: 0.7 },
-                        "-=0.3",
-                    )
-                    .from(
-                        ".hero__subtitle",
-                        { y: 20, autoAlpha: 0, duration: 0.5 },
-                        "-=0.45",
-                    )
-                    .from(
-                        ".search-wrap",
-                        {
-                            y: 24,
-                            autoAlpha: 0,
-                            scale: 0.96,
-                            duration: 0.6,
-                        },
-                        "-=0.35",
-                    )
-                    .from(
-                        ".category-btn",
-                        {
-                            y: 12,
-                            autoAlpha: 0,
-                            stagger: { amount: 0.4, from: "start" },
-                            duration: 0.4,
-                        },
-                        "-=0.2",
-                    )
-                    .call(animateFilteredContent, undefined, "-=0.05")
-                    .from(
-                        ".footer",
-                        { autoAlpha: 0, y: 12, duration: 0.5 },
-                        "-=0.15",
-                    );
-
-                gsap.to(".hero__title--accent", {
-                    y: -4,
-                    duration: 2.5,
-                    repeat: -1,
-                    yoyo: true,
-                    ease: "sine.inOut",
-                    delay: 1.2,
-                });
-
-                gsap.to(".footer__dot", {
-                    scale: 1.25,
-                    autoAlpha: 0.85,
-                    duration: 0.75,
-                    stagger: { each: 0.15, repeat: -1, yoyo: true },
-                    ease: "sine.inOut",
-                    delay: 1.5,
-                });
-            }, root);
-        },
-    );
-});
-
-watch([searchQuery, activeCategory], () => {
-    if (isInitialLoad) return;
-    nextTick(() => animateFilteredContent());
-});
-
-onUnmounted(() => {
-    mm?.revert();
 });
 // @AI-End N2R7T 20250615 @@Qoder
 </script>
@@ -312,39 +189,51 @@ onUnmounted(() => {
     display: flex;
     flex-direction: column;
     position: relative;
-    overflow: hidden;
 }
 
-/* 页面背景氛围光 */
+.home__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    visibility: hidden;
+}
+
+.home__body--visible {
+    visibility: visible;
+    animation: home-fade-in 0.35s ease-out both;
+}
+
+@keyframes home-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .home__body--visible {
+        animation: none;
+        opacity: 1;
+    }
+}
+
+/* 页面背景氛围光 — 纯渐变，无 blur 滤镜 */
 .home::before {
     content: "";
     position: absolute;
-    top: -20%;
+    top: 0;
-    left: 50%;
+    left: 0;
-    transform: translateX(-50%);
+    right: 0;
-    width: 80vw;
+    height: 480px;
-    height: 50vh;
     background: radial-gradient(
-        ellipse at center,
+        ellipse 70% 60% at 50% 0%,
-        rgba(34, 197, 94, 0.15) 0%,
+        rgba(34, 197, 94, 0.07) 0%,
-        rgba(59, 130, 246, 0.05) 40%,
         transparent 70%
     );
-    filter: blur(60px);
     pointer-events: none;
     z-index: 0;
-    animation: bg-pulse 8s ease-in-out infinite alternate;
-}
-
-@keyframes bg-pulse {
-    0% {
-        opacity: 0.5;
-        transform: translateX(-50%) scale(1);
-    }
-    100% {
-        opacity: 1;
-        transform: translateX(-50%) scale(1.1);
-    }
 }
 
 .container {
@@ -361,9 +250,7 @@ onUnmounted(() => {
     position: sticky;
     top: 0;
     z-index: 100;
-    background: rgba(2, 6, 23, 0.7);
+    background: rgba(2, 6, 23, 0.85);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
 }
 
@@ -390,7 +277,6 @@ onUnmounted(() => {
     align-items: center;
     justify-content: center;
     color: var(--accent);
-    box-shadow: 0 0 15px var(--accent-glow);
 }
 
 .logo-text {
@@ -431,7 +317,6 @@ onUnmounted(() => {
     margin-bottom: 24px;
     letter-spacing: 0.05em;
     text-transform: uppercase;
-    box-shadow: 0 0 20px var(--accent-glow);
 }
 
 .hero__title {
@@ -439,14 +324,13 @@ onUnmounted(() => {
     font-size: clamp(36px, 5vw, 64px);
     font-weight: 700;
     line-height: 1.1;
+    min-height: calc(clamp(36px, 5vw, 64px) * 1.1);
     color: var(--text-primary);
     margin-bottom: 16px;
     letter-spacing: -0.03em;
 }
 
 .hero__title--accent {
-    color: var(--accent);
-    text-shadow: 0 0 40px var(--accent-glow);
     display: inline-block;
     background: linear-gradient(135deg, #22c55e, #10b981);
     -webkit-background-clip: text;
@@ -467,11 +351,6 @@ onUnmounted(() => {
     position: relative;
     max-width: 520px;
     margin: 0 auto;
-    transition: transform var(--transition);
-}
-
-.search-wrap:focus-within {
-    transform: translateY(-2px);
 }
 
 .search-icon {
@@ -491,16 +370,14 @@ onUnmounted(() => {
 .search-input {
     width: 100%;
     height: 56px;
-    background: rgba(30, 41, 59, 0.6);
+    background: var(--bg-card);
-    backdrop-filter: blur(10px);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 0 48px;
     font-size: 16px;
     color: var(--text-primary);
     outline: none;
-    transition: all var(--transition);
+    transition: border-color var(--transition), box-shadow var(--transition);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 }
 
 .search-input::placeholder {
@@ -508,11 +385,8 @@ onUnmounted(() => {
 }
 
 .search-input:focus {
-    background: var(--bg-card);
     border-color: var(--accent);
-    box-shadow:
+    box-shadow: 0 0 0 1px var(--accent);
-        0 8px 32px var(--accent-glow),
-        inset 0 0 0 1px var(--accent);
 }
 
 .search-kbd {
@@ -574,14 +448,12 @@ onUnmounted(() => {
     font-size: 14px;
     font-weight: 500;
     color: var(--text-secondary);
-    background: rgba(30, 41, 59, 0.5);
+    background: var(--bg-card);
-    backdrop-filter: blur(10px);
     border: 1px solid var(--border);
     white-space: nowrap;
     cursor: pointer;
-    transition: all var(--transition);
+    transition: color var(--transition), border-color var(--transition), background var(--transition);
     position: relative;
-    overflow: hidden;
 }
 
 .category-btn__inner {
@@ -595,66 +467,12 @@ onUnmounted(() => {
 .category-btn:hover {
     color: var(--text-primary);
     border-color: var(--border-hover);
-    background: var(--bg-card);
-    transform: translateY(-1px);
 }
 
 .category-btn.active {
     color: var(--accent);
-    background: var(--bg-card);
-    border-color: transparent;
-    animation: active-border-solid 0.6s linear forwards;
-}
-
-.category-btn.active::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 150%;
-    height: 300%;
-    background: conic-gradient(from 0deg, transparent 70%, var(--accent) 100%);
-    transform: translate(-50%, -50%);
-    animation: spin-once 0.6s linear forwards;
-    z-index: 0;
-}
-
-.category-btn.active::after {
-    content: "";
-    position: absolute;
-    inset: 1px;
     background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
-    border-radius: 99px;
+    border-color: var(--accent);
-    z-index: 1;
-}
-
-@keyframes spin-once {
-    0% {
-        transform: translate(-50%, -50%) rotate(0deg);
-        opacity: 1;
-    }
-    99% {
-        transform: translate(-50%, -50%) rotate(360deg);
-        opacity: 1;
-    }
-    100% {
-        transform: translate(-50%, -50%) rotate(360deg);
-        opacity: 0;
-    }
-}
-
-@keyframes active-border-solid {
-    0%,
-    99% {
-        box-shadow:
-            0 4px 16px var(--accent-glow),
-            inset 0 0 0 0 transparent;
-    }
-    100% {
-        box-shadow:
-            0 4px 16px var(--accent-glow),
-            inset 0 0 0 1px var(--accent);
-    }
 }
 
 .category-btn__count {
@@ -722,12 +540,11 @@ onUnmounted(() => {
     background: var(--accent-dim);
     border: 1px solid rgba(34, 197, 94, 0.25);
     cursor: pointer;
-    transition: all var(--transition);
+    transition: background var(--transition);
 }
 
 .empty__reset:hover {
     background: rgba(34, 197, 94, 0.2);
-    box-shadow: 0 0 12px var(--accent-glow);
 }
 
 /* Footer */
@@ -760,8 +577,7 @@ onUnmounted(() => {
     height: 6px;
     border-radius: 50%;
     background: var(--accent);
-    opacity: 0.4;
+    opacity: 0.5;
-    transform: scale(0.85);
 }
 
 /* Responsive */