feat: long time no see

Lruihao · Lruihao · commit ab9debcdc345 · 2025-05-21T16:35:12.000+08:00
diff --git a/index.html b/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MMT typeface</title>
+    <title>沐目体</title>
     <meta name="keywords" content="MMT typeface, 沐目体, 手写体, 中文字体">
-    <meta name="description" content="MMT typeface is a hand-drawn Chinese font that is free for personal use.">
+    <meta name="description" content="沐目体字体是一种手绘的中文字体，可供个人免费使用。">
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
@@ -6,13 +6,39 @@ import SectionPreview from './components/SectionPreview.vue'
 </script>
 
 <template>
-  <SectionCover />
-  <SectionPreview />
-  <SectionMusic />
+  <main class="main-container">
+    <SectionCover />
+    <SectionPreview />
+    <SectionMusic />
+  </main>
   <Footer />
 </template>
 
 <style scoped>
+@media (min-width: 1024px) {
+  .main-container {
+    display: grid;
+    grid-template-rows: 1fr auto auto;
+    margin-block-start: 200px;
+    box-shadow: 0 0 20px var(--color-box-shadow, rgba(0, 0, 0, 0.2));
+    border-radius: var(--border-radius);
+  }
+  section {
+    &:first-of-type {
+      border-top-left-radius: var(--border-radius);
+      border-top-right-radius: var(--border-radius);
+    }
+    &:last-of-type {
+      border-bottom-left-radius: var(--border-radius);
+      border-bottom-right-radius: var(--border-radius);
+    }
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .main-container {
+   --color-box-shadow: rgba(255, 255, 255, 0.2);
+  }
+}
 section {
   border: 2px solid var(--color-border);
   &:not(:last-of-type) {
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -3,6 +3,7 @@
   --color-text: #000;;
   --color-background: #ffffff;
   --color-border: rgba(60, 60, 60, 0.12);
+  --border-radius: 0.75rem;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -15,8 +15,6 @@
   }
 
   #app {
-    display: grid;
-    grid-template-rows: 1fr auto auto;
     max-width: 1000px;
   }
 }
diff --git a/src/components/SectionCover.vue b/src/components/SectionCover.vue
@@ -8,8 +8,8 @@
       aria-label="View source on GitHub"
     >
       <svg
-        width="80"
-        height="80"
+        width="50"
+        height="50"
         viewBox="0 0 250 250"
         aria-hidden="true"
       >
@@ -23,6 +23,7 @@
 
 <style scoped>
 .section-cover {
+  position: relative;
   .manuscript {
     width: 100%;
     height: auto;
@@ -77,6 +78,15 @@
   }
 }
 
+@media (min-width: 1024px) {
+  .section-cover {
+    .manuscript {
+      border-top-left-radius: var(--border-radius);
+      border-top-right-radius: var(--border-radius);
+    }
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .github-corner {
     --github-corner-fill: #fff;
diff --git a/src/components/SectionMusic.vue b/src/components/SectionMusic.vue
@@ -23,6 +23,8 @@ const defaultComment: Comment = {
   avatarUrl: '',
 }
 const comment = ref<Comment>(defaultComment)
+const TIME_OUT = 30
+const timer = ref<ReturnType<typeof setInterval> | null>(null)
 
 function getRandomComment() {
   loading.value = true
@@ -50,14 +52,37 @@ function getRandomComment() {
     })
 }
 
-onMounted(() => {
+function refresh() {
   getRandomComment()
+  if (timer.value) {
+    clearInterval(timer.value)
+  }
+  timer.value = setInterval(() => {
+    getRandomComment()
+  }, TIME_OUT * 1000)
+}
+
+onMounted(() => {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        // 进入视口时开始获取评论
+        refresh()
+        // 取消观察
+        observer.disconnect()
+      }
+    })
+  }, { threshold: 0.1 })
+  const target = document.querySelector('.section-music')
+  if (target) {
+    observer.observe(target)
+  }
 })
 </script>
 
 <template>
   <section class="section-music">
-    <div v-if="!loading" class="comment-163" title="随机下一条" @click="getRandomComment">
+    <div v-if="!loading" class="comment-163" title="随机下一条" @click="refresh">
       <span class="pic-backdrop" :style="comment.picUrl ? `background-image: url(${comment.picUrl});` : ''" />
       <div class="commentator">
         <img
@@ -98,7 +123,7 @@ onMounted(() => {
     position: relative;
     border: 1px solid #f5f5f5;
     padding: 0.75em;
-    border-radius: 0.75rem;
+    border-radius: var(--border-radius);
     color: var(--color-comment, #272626);
     cursor: pointer;
     height: 100%;
@@ -113,7 +138,7 @@ onMounted(() => {
     filter: blur(10px);
     background-size: cover;
     background-position: center;
-    border-radius: 0.75rem;
+    border-radius: var(--border-radius);
     z-index: -1;
     opacity: 0.75;
   }
diff --git a/src/components/SectionPreview.vue b/src/components/SectionPreview.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 const message = ref<string>('')
 const fontSize = ref<number>(24)
 const fontWeight = ref<number>(400)
 const fontWeightOptions = [400, 500, 600, 700, 800, 900]
+const defaultMessage = ref<string>('')
 
 const style = computed(() => {
   const size = fontSize.value < 20 ? 20 : fontSize.value
@@ -14,13 +15,54 @@ const style = computed(() => {
   }
 })
 
+function typeIt() {
+  const text = '沐目之，湘也。\n\n字字珠玑，见字如面。'
+  let index = 0
+  let interval: ReturnType<typeof setInterval> | undefined
+  const _typeIt = (observer: IntersectionObserver) => {
+    interval = setInterval(() => {
+      defaultMessage.value += text[index]
+      index++
+      if (index >= text.length) {
+        // 停止定时器
+        clearInterval(interval)
+        // 取消观察
+        observer.disconnect()
+      }
+    }, 100)
+  }
+  const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+    entries.forEach((entry: IntersectionObserverEntry) => {
+      // 如果元素在视口中可见，触发打字效果
+      if (entry.isIntersecting) {
+        _typeIt(observer)
+      }
+      else {
+        clearInterval(interval)
+      }
+    })
+  }, { threshold: 0.1 })
+  const target = document.querySelector('.live-content')
+  if (target) {
+    observer.observe(target)
+  }
+}
+
+onMounted(() => {
+  typeIt()
+})
+
 if (window.innerWidth < 768) {
   fontSize.value = 20
 }
 
 // ————“沐目之，湘也。”
 // 取字于大学时初恋的名字，这个字体也是为她而写。
+// 从下笔到停笔，从开始到结束，它见证了我们稚嫩到成熟。
 // 沐目体和红人馆的那首《最甜情歌》有着类似的遭遇。
+// 故事的开头极具温柔，但结局不尽人意。
+// 那些忘不掉的人和事，岁月都已替我轻描淡写。
+//
 // 事隔经年，淡然写下。
 </script>
 
@@ -46,7 +88,7 @@ if (window.innerWidth < 768) {
     </header>
     <main>
       <p class="live-content">
-        {{ message || '「沐目之，湘也」\n 从下笔到停笔，从开始到结束，沐目体见证了我们稚嫩到成熟。\n故事的开头往往极具温柔，但结局常常不尽人意。\n那些忘不掉的人和事，岁月都已替我轻描淡写。' }}
+        {{ message || defaultMessage }}
       </p>
       <textarea v-model="message" class="live-textarea" placeholder="中文测试器，你可以在这里写任何字来测试字体！" />
     </main>
@@ -97,7 +139,7 @@ if (window.innerWidth < 768) {
     .live-content {
       font-family: MMT;
       font-weight: var(--live-font-weight);
-      line-height: 1.25;
+      line-height: 26px;
       width: 50%;
       min-height: 120px;
       max-height: 400px;
@@ -107,11 +149,12 @@ if (window.innerWidth < 768) {
         linear-gradient(1turn, var(--color-border) 3%, transparent 0);
       background-size: 24px 24px;
       background-position: center;
+      white-space: pre-wrap;
     }
     .live-textarea {
       width: 50%;
       padding: 0.5rem;
-      border-radius: 0.75rem;
+      border-radius: var(--border-radius);
       resize: vertical;
       border: 1px solid var(--color-border);
       background-color: var(--color-background);

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`--color-text: #000;;`
`4`	`4`	`--color-background: #ffffff;`
`5`	`5`	`--color-border: rgba(60, 60, 60, 0.12);`
	`6`	`+ --border-radius: 0.75rem;`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`@media (prefers-color-scheme: dark) {`
Original file line number	Diff line number	Diff line change
`@@ -15,8 +15,6 @@`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`#app {`
`18`		`- display: grid;`
`19`		`- grid-template-rows: 1fr auto auto;`
`20`	`18`	`max-width: 1000px;`
`21`	`19`	`}`
`22`	`20`	`}`