refactor(zitie): 加深打印字帖时的颜色

FuckDoctors · Sep 2, 2024 · d6961db · d6961db
1 parent 222a60e
commit d6961db
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 3 deletions.
diff --git a/docs/.vuepress/theme/components/hanzi/Zitie.vue b/docs/.vuepress/theme/components/hanzi/Zitie.vue
@@ -3,7 +3,14 @@ import { onMounted, ref } from 'vue'
 
 import cnchar from 'cnchar'
 
-import { PRINT_STROKE_WIDTH, WRITING_WIDTH } from './constants'
+import {
+  BORDER_COLOR,
+  LINE_COLOR,
+  OUTLINE_COLOR,
+  PRINT_STROKE_WIDTH,
+  STROKE_COLOR,
+  WRITING_WIDTH,
+} from './constants'
 
 const props = defineProps({
   zi: String,
@@ -36,11 +43,15 @@ onMounted(() => {
     style: {
       length: PRINT_STROKE_WIDTH,
       showOutline: false,
+      outlineColor: OUTLINE_COLOR,
+      strokeColor: STROKE_COLOR,
     },
     line: {
       lineCross: false,
       lineStraight: false,
       borderWidth: 0,
+      lineColor: LINE_COLOR,
+      borderColor: BORDER_COLOR,
     },
   })
 
@@ -51,9 +62,13 @@ onMounted(() => {
         length: WRITING_WIDTH,
         showCharacter: true,
         showOutline: true,
+        outlineColor: OUTLINE_COLOR,
+        strokeColor: STROKE_COLOR,
       },
       line: {
         lineCross: false,
+        lineColor: LINE_COLOR,
+        borderColor: BORDER_COLOR,
       },
       onComplete: () => cloneElement(heiRef.value, props.hei),
     })
@@ -66,9 +81,13 @@ onMounted(() => {
         length: WRITING_WIDTH,
         showCharacter: false,
         showOutline: true,
+        outlineColor: OUTLINE_COLOR,
+        strokeColor: STROKE_COLOR,
       },
       line: {
         lineCross: false,
+        lineColor: LINE_COLOR,
+        borderColor: BORDER_COLOR,
       },
       onComplete: () => cloneElement(huiRef.value, props.hui),
     })
@@ -81,9 +100,13 @@ onMounted(() => {
         length: WRITING_WIDTH,
         showCharacter: false,
         showOutline: false,
+        outlineColor: OUTLINE_COLOR,
+        strokeColor: STROKE_COLOR,
       },
       line: {
         lineCross: false,
+        lineColor: LINE_COLOR,
+        borderColor: BORDER_COLOR,
       },
       onComplete: () => cloneElement(kongRef.value, props.kong),
     })

diff --git a/docs/.vuepress/theme/components/hanzi/constants.js b/docs/.vuepress/theme/components/hanzi/constants.js
@@ -14,3 +14,13 @@ export const TIAN_KONG = 5
 
 /** 拼音格 宽/高 */
 export const PINYIN_GE_RATIO = 1.57
+
+/** 灰色字颜色 */
+export const OUTLINE_COLOR = '#bbb'
+/** 笔画的颜色 */
+export const STROKE_COLOR = '#555'
+
+/** 田字格 内线颜色 */
+export const LINE_COLOR = '#bbb'
+/** 田字格 外线颜色 */
+export const BORDER_COLOR = '#bbb'
diff --git a/docs/posts/edu/xiaoxue-yuwen-1-xia.md b/docs/posts/edu/xiaoxue-yuwen-1-xia.md
@@ -21,7 +21,7 @@ head:
 :::info
 为了发音迅速，优先使用浏览器自带的特性实现，推荐使用最新的 Edge 浏览器。
 
-点击打印可作为练字帖使用。
+点击打印可作为练字帖使用，打印时建议缩放 70%。
 :::
 
 ## 1.春夏秋冬

diff --git a/docs/posts/edu/xiaoxue-yuwen-2-shang.md b/docs/posts/edu/xiaoxue-yuwen-2-shang.md
@@ -21,7 +21,7 @@ head:
 :::info
 为了发音迅速，优先使用浏览器自带的特性实现，推荐使用最新的 Edge 浏览器。
 
-点击打印可作为练字帖使用。
+点击打印可作为练字帖使用，打印时建议缩放 70%。
 :::
 
 ## 1.小蝌蚪找妈妈