首页

package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "dayjs": "^1.11.13",
     "hooks": "file:",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",

src/App.vue

@@ -12,13 +12,27 @@ const vClick: ObjectDirective = {
     });
   }
 };
-
 </script>
 
 <template>
+  <div>
+    <router-view v-slot="{ Component }">
+      <transition name="fade" mode="out-in">
+        <component :is="Component" />
+      </transition>
+    </router-view>
     <div v-click="'myClick'">我的是div的内容</div>
+  </div>
 </template>
 
-<style scoped>
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
 
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

src/components/SlideLayout.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="slide-container" 
+       @click.right.prevent="handleNext"
+       @click.left="handlePrev"
+       @keyup.space="handleNext"
+       tabindex="0"
+       ref="container">
+    <div class="animated-background">
+      <div class="gradient-circle circle-1"></div>
+      <div class="gradient-circle circle-2"></div>
+      <div class="gradient-circle circle-3"></div>
+    </div>
+    <div class="slide-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { ref, onMounted, onUnmounted } from 'vue';
+
+const router = useRouter();
+const container = ref<HTMLElement | null>(null);
+
+const handleNext = () => {
+  router.forward();
+};
+
+const handlePrev = () => {
+  router.back();
+};
+
+// 禁用右键菜单
+const handleContextMenu = (e: Event) => {
+  e.preventDefault();
+};
+
+onMounted(() => {
+  // 设置焦点以捕获键盘事件
+  container.value?.focus();
+  
+  // 添加右键菜单事件监听
+  document.addEventListener('contextmenu', handleContextMenu);
+  
+  // 添加键盘事件监听
+  const handleKeyUp = (e: KeyboardEvent) => {
+    if (e.code === 'Space') {
+      handleNext();
+    }
+  };
+  
+  document.addEventListener('keyup', handleKeyUp);
+  
+  // 清理事件监听
+  onUnmounted(() => {
+    document.removeEventListener('contextmenu', handleContextMenu);
+    document.removeEventListener('keyup', handleKeyUp);
+  });
+});
+</script>
+
+<style scoped>
+.slide-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #fafafa;
+  outline: none; /* 移除焦点轮廓 */
+  cursor: default; /* 使用默认光标 */
+}
+
+.animated-background {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.gradient-circle {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(40px);
+  opacity: 0.6;
+}
+
+.circle-1 {
+  width: 50vw;
+  height: 50vw;
+  background: linear-gradient(45deg, rgba(255, 140, 0, 0.3), rgba(255, 200, 0, 0.2));
+  top: -25vw;
+  right: -25vw;
+  animation: float1 15s ease-in-out infinite;
+}
+
+.circle-2 {
+  width: 40vw;
+  height: 40vw;
+  background: linear-gradient(45deg, rgba(255, 140, 0, 0.2), rgba(255, 160, 0, 0.1));
+  bottom: -20vw;
+  left: -20vw;
+  animation: float2 18s ease-in-out infinite;
+}
+
+.circle-3 {
+  width: 30vw;
+  height: 30vw;
+  background: linear-gradient(45deg, rgba(255, 180, 0, 0.2), rgba(255, 140, 0, 0.1));
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: float3 20s ease-in-out infinite;
+}
+
+@keyframes float1 {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  50% {
+    transform: translate(-15%, 15%) rotate(30deg);
+  }
+}
+
+@keyframes float2 {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  50% {
+    transform: translate(15%, -15%) rotate(-30deg);
+  }
+}
+
+@keyframes float3 {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1) rotate(0deg);
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.2) rotate(15deg);
+  }
+}
+
+.slide-content {
+  flex: 1;
+  padding: 2rem;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  z-index: 1;
+}
+</style>

src/main.ts

@@ -1,5 +1,8 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import router from './router'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(router)
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'Introduction',
+    component: () => import('../views/IntroductionView.vue')
+  },
+  {
+    path: '/history',
+    name: 'History',
+    component: () => import('../views/HistoryView.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

src/style.css

@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
 a {
   font-weight: 500;
   color: #646cff;
@@ -23,7 +35,6 @@ a:hover {
 }
 
 body {
-  margin: 0;
   display: flex;
   place-items: center;
   min-width: 320px;
@@ -59,6 +70,9 @@ button:focus-visible {
 }
 
 #app {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;

src/views/HistoryView.vue

@@ -0,0 +1,138 @@
+<template>
+  <SlideLayout>
+    <div class="content">
+      <h1 class="title animate-slide-down">Hooks 的历史</h1>
+      <div class="timeline">
+        <div class="timeline-item animate-fade-in" v-for="(item, index) in history" :key="index" :style="{ animationDelay: `${index * 0.2}s` }">
+          <div class="timeline-date">{{ item.date }}</div>
+          <div class="timeline-content">
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.description }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </SlideLayout>
+</template>
+
+<script setup lang="ts">
+import SlideLayout from '../components/SlideLayout.vue';
+
+const history = [
+  {
+    date: '2016',
+    title: 'Mixins 时代',
+    description: 'Vue2 主要使用 Mixins 来复用组件逻辑，但存在命名冲突和数据来源不清晰的问题。'
+  },
+  {
+    date: '2019',
+    title: 'React Hooks 发布',
+    description: 'React 16.8 发布 Hooks，展示了一种全新的逻辑复用方式。'
+  },
+  {
+    date: '2020',
+    title: 'Vue3 Composition API',
+    description: 'Vue3 正式发布，引入 Composition API，提供了类似 Hooks 的能力。'
+  },
+  {
+    date: '现在',
+    title: 'Hooks 生态繁荣',
+    description: 'Vue 社区出现了大量优秀的 Hooks 库，极大提升了开发效率。'
+  }
+];
+</script>
+
+<style scoped>
+.content {
+  padding: 2rem;
+}
+
+.title {
+  color: #ff8c00;
+  font-size: 3rem;
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.timeline {
+  max-width: 800px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 2px;
+  height: 100%;
+  background-color: #ff8c00;
+}
+
+.timeline-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+  opacity: 0;
+}
+
+.timeline-item:nth-child(odd) {
+  flex-direction: row-reverse;
+}
+
+.timeline-date {
+  width: 120px;
+  padding: 0.5rem;
+  background-color: #ff8c00;
+  color: white;
+  text-align: center;
+  border-radius: 4px;
+  position: relative;
+  z-index: 1;
+}
+
+.timeline-content {
+  width: calc(50% - 80px);
+  padding: 1rem;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.timeline-content h3 {
+  color: #ff8c00;
+  margin-bottom: 0.5rem;
+}
+
+/* Animations */
+.animate-slide-down {
+  animation: slideDown 1s ease;
+}
+
+.animate-fade-in {
+  animation: fadeIn 1s ease both;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

src/views/IntroductionView.vue

@@ -0,0 +1,107 @@
+<template>
+  <SlideLayout>
+    <div class="content">
+      <div class="header animate-slide-down">
+        <h1 class="title">VueHooks</h1>
+        <div class="subtitle">优雅的代码复用方案</div>
+      </div>
+      <div class="presenter-info animate-fade-in">
+        <div class="info-text">
+          专业服务开发部 · 燕陇琪 · {{ formatDate() }}
+        </div>
+      </div>
+    </div>
+  </SlideLayout>
+</template>
+
+<script setup lang="ts">
+import SlideLayout from '../components/SlideLayout.vue';
+
+const formatDate = () => {
+  const date = new Date('2025-01-03T12:06:33+08:00');
+  return `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, '0')}月${String(date.getDate()).padStart(2, '0')}日`;
+};
+</script>
+
+<style scoped>
+.content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 3rem;
+}
+
+.header {
+  text-align: center;
+}
+
+.title {
+  color: #ff8c00;
+  font-size: 8rem;
+  font-weight: bold;
+  margin-bottom: 2rem;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+  letter-spacing: 4px;
+}
+
+.subtitle {
+  font-size: 2.5rem;
+  color: #666;
+  letter-spacing: 2px;
+}
+
+.presenter-info {
+  position: fixed;
+  bottom: 2rem;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  padding: 1rem;
+}
+
+.info-text {
+  font-size: 1.2rem;
+  color: #666;
+  letter-spacing: 1px;
+  display: inline-block;
+  padding: 0.5rem 2rem;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  border-radius: 50px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Animations */
+.animate-slide-down {
+  animation: slideDown 1s ease;
+}
+
+.animate-fade-in {
+  animation: fadeIn 1s ease 0.5s both;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

yarn.lock

@@ -333,6 +333,11 @@
     de-indent "^1.0.2"
     he "^1.2.0"
 
+"@vue/devtools-api@^6.6.4":
+  version "6.6.4"
+  resolved "https://mirrors.yuchat.top/repository/npmjs/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
+
 "@vue/language-core@2.2.0":
   version "2.2.0"
   resolved "https://mirrors.yuchat.top/repository/npmjs/@vue/language-core/-/language-core-2.2.0.tgz#e48c54584f889f78b120ce10a050dfb316c7fcdf"
@@ -476,7 +481,8 @@ he@^1.2.0:
 "hooks@file:.":
   version "0.0.0"
   dependencies:
-    hooks "file:C:/Users/Administrator/AppData/Local/Yarn/Cache/v6/npm-hooks-0.0.0-02bdcb68-002e-4d83-9f65-7dd5aa63d929-1735441352086/node_modules/hooks"
+    dayjs "^1.11.13"
+    hooks "file:C:/Users/yanlongqi/AppData/Local/Yarn/Cache/v6/npm-hooks-0.0.0-3bade944-d2d2-4129-9022-13077f5d891c-1735875890338/node_modules/hooks"
     vue "^3.5.13"
 
 magic-string@^0.30.11:
@@ -576,6 +582,13 @@ vscode-uri@^3.0.8:
   resolved "https://mirrors.yuchat.top/repository/npmjs/vscode-uri/-/vscode-uri-3.0.8.tgz#1770938d3e72588659a172d0fd4642780083ff9f"
   integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
 
+vue-router@4:
+  version "4.5.0"
+  resolved "https://mirrors.yuchat.top/repository/npmjs/vue-router/-/vue-router-4.5.0.tgz#58fc5fe374e10b6018f910328f756c3dae081f14"
+  integrity sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==
+  dependencies:
+    "@vue/devtools-api" "^6.6.4"
+
 vue-tsc@^2.2.0:
   version "2.2.0"
   resolved "https://mirrors.yuchat.top/repository/npmjs/vue-tsc/-/vue-tsc-2.2.0.tgz#dd06c56636f760d7534b7a7a0f6669ba93c217b8"