feat(nine): 为文字添加田字格

EAGzzyCSL · Jan 10, 2025 · 7b0640b · 7b0640b
1 parent a81908d
commit 7b0640b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/site/apps/WinterNine/parts/CharBlock.module.scss b/packages/site/apps/WinterNine/parts/CharBlock.module.scss
@@ -1,7 +1,9 @@
 .char-block {
+  position: relative;
   display: block;
   width: 100%;
   height: 100%;
+  background: rgb(255 255 255 / 60%);
 
   .canvas {
     width: 100%;

diff --git a/packages/site/apps/WinterNine/parts/CharBlock.tsx b/packages/site/apps/WinterNine/parts/CharBlock.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable import/extensions */
 import React, { useRef, useEffect } from 'react'
 
+import MiSquare from '@/share/MiSquare'
 import { sleep } from '@/utils'
 
 import char亭 from '../data/亭.json'
@@ -35,7 +36,7 @@ const TRACK_STROKE_SIZE = 200
 /**
  * chrome的clip没有抗锯齿，因此使用红色和灰色模糊边缘的锯齿（目前的组合效果便不错）
  */
-const colorPlaceholder = '#bbb'
+const colorPlaceholder = '#E5DEC6'
 const colorFill = '#c33'
 
 class CharWriter {
@@ -253,7 +254,9 @@ const CharBlock = ({
   })
   return (
     <section className={styles.charBlock}>
-      <canvas ref={tablet} className={styles.canvas} />
+      <MiSquare noBorderTop={charIndex > 2} noBorderLeft={charIndex % 3 !== 0}>
+        <canvas ref={tablet} className={styles.canvas} />
+      </MiSquare>
     </section>
   )
 }