refactor: update type of theme (doocs#369)

* chore: add csstype and es-toolkit * chore: add @types/prettier * refactor: update config file to use TypeScript * refactor: update type of theme
wsadczh · Aug 30, 2024 · 7592506 · 7592506
1 parent fed75b3
commit 7592506
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,9 @@
     "core-js": "^3.38.1",
     "cos-js-sdk-v5": "^1.8.4",
     "crypto-js": "^4.2.0",
+    "csstype": "^3.1.3",
     "element-plus": "^2.8.0",
+    "es-toolkit": "^1.16.0",
     "form-data": "4.0.0",
     "highlight.js": "^11.10.0",
     "juice": "^8.0.0",
@@ -52,6 +54,7 @@
     "@types/codemirror": "^5.60.15",
     "@types/marked": "^4.0.0",
     "@types/node": "^22.4.1",
+    "@types/prettier": "^2.7.3",
     "@unocss/eslint-plugin": "^0.62.2",
     "@vitejs/plugin-vue": "^5.1.2",
     "autoprefixer": "^10.4.20",

diff --git a/src/config/index.js → src/config/index.ts b/src/config/index.js → src/config/index.ts
@@ -1,12 +1,10 @@
-import CodeMirror from 'codemirror'
-
 export * from './api'
 export * from './style'
 export * from './theme'
 
 export const prefix = `MD`
 
-const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault
+const isMac = window.navigator.platform === `MacIntel`
 
 export const ctrlKey = isMac ? `Cmd` : `Ctrl`
 export const altKey = `Alt`

diff --git a/src/config/theme.ts b/src/config/theme.ts
@@ -1,35 +1,17 @@
-interface Theme {
-  base: Record<string, string | number>
-  block: Record<string, Record<string, string | number>>
-  inline: Record<string, Record<string, string | number>>
-}
+import { toMerged } from 'es-toolkit'
 
-const baseColor = `#3f3f3f`
+import type { Theme } from '@/types'
 
-function mergeTheme(defaultTheme: Theme, newTheme: Theme): Theme {
-  const merge = (defaultObj: Record<string, any>, newObj: Record<string, any>) => {
-    const result: Record<string, any> = {}
-    for (const key in defaultObj) {
-      result[key] = { ...defaultObj[key], ...newObj?.[key] }
-    }
-    return result
-  }
-
-  return {
-    base: { ...defaultTheme.base, ...newTheme.base },
-    block: merge(defaultTheme.block, newTheme.block),
-    inline: merge(defaultTheme.inline, newTheme.inline),
-  }
-}
+const baseColor = `#3f3f3f`
 
-const defaultTheme = {
+const defaultTheme: Theme = {
   base: {
     '--md-primary-color': `#000000`,
     'text-align': `left`,
     'line-height': `1.75`,
   },
   block: {
-    // 一级标题样式
+    // 一级标题
     h1: {
       'display': `table`,
       'padding': `0 1em`,
@@ -41,7 +23,7 @@ const defaultTheme = {
       'text-align': `center`,
     },
 
-    // 二级标题样式
+    // 二级标题
     h2: {
       'display': `table`,
       'padding': `0 0.2em`,
@@ -53,7 +35,7 @@ const defaultTheme = {
       'text-align': `center`,
     },
 
-    // 三级标题样式
+    // 三级标题
     h3: {
       'padding-left': `8px`,
       'border-left': `3px solid var(--md-primary-color)`,
@@ -64,23 +46,23 @@ const defaultTheme = {
       'line-height': `1.2`,
     },
 
-    // 四级标题样式
+    // 四级标题
     h4: {
       'margin': `2em 8px 0.5em`,
       'color': `var(--md-primary-color)`,
       'font-size': `1em`,
       'font-weight': `bold`,
     },
 
-    // 段落样式
+    // 段落
     p: {
       'margin': `1.5em 8px`,
       'letter-spacing': `0.1em`,
       'color': `var(--el-text-color-regular)`,
       'text-align': `justify`,
     },
 
-    // 引用样式
+    // 引用
     blockquote: {
       'font-style': `normal`,
       'border-left': `none`,
@@ -91,12 +73,15 @@ const defaultTheme = {
       'margin': `2em 8px`,
     },
 
+    // 引用内容
     blockquote_p: {
       'display': `block`,
       'font-size': `1em`,
       'letter-spacing': `0.1em`,
       'color': `rgb(80, 80, 80)`,
     },
+
+    // 代码块
     code_pre: {
       'font-size': `14px`,
       'overflow-x': `auto`,
@@ -105,25 +90,30 @@ const defaultTheme = {
       'line-height': `1.5`,
       'margin': `10px 8px`,
     },
+
+    // 行内代码
     code: {
       'margin': 0,
       'white-space': `nowrap`,
       'font-family': `Menlo, Operator Mono, Consolas, Monaco, monospace`,
     },
 
+    // 图片
     image: {
       'display': `block`,
       'width': `100% !important`,
       'margin': `0.1em auto 0.5em`,
       'border-radius': `4px`,
     },
 
+    // 有序列表
     ol: {
       'padding-left': `1em`,
       'margin-left': `0`,
       'color': `var(--el-text-color-regular)`,
     },
 
+    // 无序列表
     ul: {
       'list-style': `circle`,
       'padding-left': `1em`,
@@ -216,7 +206,7 @@ const defaultTheme = {
   },
 }
 
-const graceTheme = mergeTheme(defaultTheme, {
+const graceTheme = toMerged(defaultTheme, {
   base: {
   },
   block: {
@@ -284,6 +274,14 @@ const graceTheme = mergeTheme(defaultTheme, {
       'padding-left': `1.5em`,
     },
 
+    footnotes: {
+
+    },
+
+    figure: {
+
+    },
+
     hr: {
       height: `1px`,
       border: `none`,
@@ -329,6 +327,10 @@ const graceTheme = mergeTheme(defaultTheme, {
     footnote: {
       color: `rgba(0,0,0,0.5)`,
     },
+
+    figcaption: {
+
+    },
   },
 })
 

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -1,3 +1,14 @@
+import type { PropertiesHyphen } from 'csstype'
+
+type Block = `h1` | `h2` | `h3` | `h4` | `p` | `blockquote` | `blockquote_p` | `code_pre` | `code` | `image` | `ol` | `ul` | `footnotes` | `figure` | `hr`
+type Inline = `listitem` | `codespan` | `link` | `wx_link` | `strong` | `table` | `thead` | `td` | `footnote` | `figcaption`
+
+export interface Theme {
+  base: PropertiesHyphen & { [`--md-primary-color`]?: string }
+  block: Record<Block, PropertiesHyphen>
+  inline: Record<Inline, PropertiesHyphen>
+}
+
 export interface IConfigOption {
   label: string
   value: string