feat(template): 支持暗黑模式 (#137)

<!--
Thanks for sending a pull request!
Before submitting your pull request, please make sure the checklist
below is confirmed.
Your pull requests will be merged after one of the collaborators
approve.
-->

### What type of PR is this?

<!--
Add one of the following kinds:
/kind feat
/kind bug
/kind cleanup
/kind doc

Optionally add one or more of the following kinds if applicable:
/kind api-change
/kind deprecation
/kind failing-test
/kind flake
/kind regression
-->

### What this PR does?

### Which issue(s) this PR fixes:
<!--
*Automatically closes linked issue when PR is merged.
Usage: `Fixes #<issue number>`, or `Fixes (paste link of issue)`.
_If PR is about `failing-tests or flakes`, please post the related
issues/tests in a comment and do not use `Fixes`_*
-->
Fixes #

#### Does this PR introduce a user-facing change?
<!--
If no, just write "NONE" in the release-note block below.
If yes, a release note is required:
Enter your extended release note in the block below. If the PR requires
additional action from users switching to the new release, include the
string "action required".
-->
```release-note

```

web/src/components/Data/DataInput/child/DingTemplateEditor.tsx

@@ -1,11 +1,13 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { useRef, useState, useEffect } from 'react'
 
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
-import { theme } from 'antd'
+import { GlobalToken, theme } from 'antd'
 import './userWorker'
 
 import './style.css'
+import { GlobalContext, ThemeType } from '@/context'
+import { defaultTheme } from './color'
 
 export interface DingTemplateEditorProps {
     value?: string
@@ -263,7 +265,7 @@ const modelUri = monaco.Uri.parse('./json/ding.json')
 
 const model = monaco.editor.createModel('', DingTemplate, modelUri)
 
-const init = () => {
+const init = (token: GlobalToken, theme?: ThemeType) => {
     monaco.languages.setMonarchTokensProvider(DingTemplate, {
         tokenizer: {
             root: [[/\{\{[ ]*\.[ ]*[^}]*[ ]*\}\}/, 'keyword']]
@@ -409,14 +411,7 @@ const init = () => {
     })
 
     // Define a new theme that contains only rules that match this language
-    monaco.editor.defineTheme(DingTemplateTheme, {
-        base: 'vs',
-        inherit: false,
-        rules: [{ token: 'keyword', foreground: 'F55D04', fontStyle: 'bold' }],
-        colors: {
-            'editor.foreground': '#000000'
-        }
-    })
+    monaco.editor.defineTheme(DingTemplateTheme, defaultTheme(token, theme))
 
     monaco.languages.registerCompletionItemProvider(DingTemplate, {
         provideCompletionItems: provideCompletionItems
@@ -435,6 +430,7 @@ export const DingTemplateEditor: React.FC<DingTemplateEditorProps> = (
     } = props
 
     const { token } = useToken()
+    const { sysTheme } = useContext(GlobalContext)
 
     const [editor, setEditor] =
         useState<monaco.editor.IStandaloneCodeEditor | null>(null)
@@ -467,7 +463,7 @@ export const DingTemplateEditor: React.FC<DingTemplateEditorProps> = (
     }, [defaultValue, editor, monacoEl, onChange, value])
 
     useEffect(() => {
-        init()
+        init(token, sysTheme)
     }, [])
 
     return (

web/src/components/Data/DataInput/child/EmailTemplateEditor.tsx

@@ -1,11 +1,13 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { useRef, useState, useEffect } from 'react'
 
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
-import { theme } from 'antd'
+import { GlobalToken, theme } from 'antd'
 import './userWorker'
 
 import './style.css'
+import { GlobalContext, ThemeType } from '@/context'
+import { defaultTheme } from './color'
 
 export interface EmailTemplateEditorProps {
     value?: string
@@ -128,7 +130,7 @@ const provideCompletionItems = (
     }
 }
 
-const init = () => {
+const init = (token: GlobalToken, theme?: ThemeType) => {
     monaco.languages.register({ id: emailNotifyTemplate })
     // Register a tokens provider for the language
     monaco.languages.setMonarchTokensProvider(emailNotifyTemplate, {
@@ -138,14 +140,10 @@ const init = () => {
     })
 
     // Define a new theme that contains only rules that match this language
-    monaco.editor.defineTheme(emailNotifyTemplateTheme, {
-        base: 'vs',
-        inherit: false,
-        rules: [{ token: 'keyword', foreground: 'F55D04', fontStyle: 'bold' }],
-        colors: {
-            'editor.foreground': '#000000'
-        }
-    })
+    monaco.editor.defineTheme(
+        emailNotifyTemplateTheme,
+        defaultTheme(token, theme)
+    )
 
     monaco.languages.registerCompletionItemProvider(emailNotifyTemplate, {
         provideCompletionItems: provideCompletionItems
@@ -164,6 +162,7 @@ export const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = (
     } = props
 
     const { token } = useToken()
+    const { sysTheme } = useContext(GlobalContext)
 
     const [editor, setEditor] =
         useState<monaco.editor.IStandaloneCodeEditor | null>(null)
@@ -195,7 +194,7 @@ export const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = (
     }, [defaultValue, editor, monacoEl, onChange, value])
 
     useEffect(() => {
-        init()
+        init(token, sysTheme)
     }, [])
 
     return (

web/src/components/Data/DataInput/child/FeishuTemplateEditor.tsx

@@ -1,11 +1,13 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { useRef, useState, useEffect } from 'react'
 
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
-import { theme } from 'antd'
+import { GlobalToken, theme } from 'antd'
 import './userWorker'
 
 import './style.css'
+import { defaultTheme } from './color'
+import { GlobalContext, ThemeType } from '@/context'
 
 export interface FeishuTemplateEditorProps {
     value?: string
@@ -279,7 +281,7 @@ const i18nJsonSchema = {
     }
 }
 
-const init = () => {
+const init = (token: GlobalToken, theme?: ThemeType) => {
     monaco.languages.setMonarchTokensProvider(FeishuTemplate, {
         tokenizer: {
             root: [[/\{\{[ ]*\.[ ]*[^}]*[ ]*\}\}/, 'keyword']]
@@ -418,14 +420,7 @@ const init = () => {
     })
 
     // Define a new theme that contains only rules that match this language
-    monaco.editor.defineTheme(FeishuTemplateTheme, {
-        base: 'vs',
-        inherit: false,
-        rules: [{ token: 'keyword', foreground: 'F55D04', fontStyle: 'bold' }],
-        colors: {
-            'editor.foreground': '#000000'
-        }
-    })
+    monaco.editor.defineTheme(FeishuTemplateTheme, defaultTheme(token, theme))
 
     monaco.languages.registerCompletionItemProvider(FeishuTemplate, {
         provideCompletionItems: provideCompletionItems
@@ -444,6 +439,7 @@ export const FeishuTemplateEditor: React.FC<FeishuTemplateEditorProps> = (
     } = props
 
     const { token } = useToken()
+    const { sysTheme } = useContext(GlobalContext)
 
     const [editor, setEditor] =
         useState<monaco.editor.IStandaloneCodeEditor | null>(null)
@@ -476,7 +472,7 @@ export const FeishuTemplateEditor: React.FC<FeishuTemplateEditorProps> = (
     }, [defaultValue, editor, monacoEl, onChange, value])
 
     useEffect(() => {
-        init()
+        init(token, sysTheme)
     }, [])
 
     return (

web/src/components/Data/DataInput/child/JsonTemplateEditor.tsx

@@ -1,11 +1,13 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { useRef, useState, useEffect } from 'react'
 
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
-import { theme } from 'antd'
+import { GlobalToken, theme } from 'antd'
 import './userWorker'
 
 import './style.css'
+import { GlobalContext, ThemeType } from '@/context'
+import { defaultTheme } from './color'
 
 export interface JsonTemplateEditorProps {
     value?: string
@@ -131,7 +133,7 @@ const modelUri = monaco.Uri.parse('./json/other.json')
 
 const model = monaco.editor.createModel('', JsonTemplate, modelUri)
 
-const init = () => {
+const init = (token: GlobalToken, theme?: ThemeType) => {
     monaco.languages.setMonarchTokensProvider(JsonTemplate, {
         tokenizer: {
             root: [[/\{\{[ ]*\.[ ]*[^}]*[ ]*\}\}/, 'keyword']]
@@ -153,14 +155,7 @@ const init = () => {
     })
 
     // Define a new theme that contains only rules that match this language
-    monaco.editor.defineTheme(JsonTemplateTheme, {
-        base: 'vs',
-        inherit: false,
-        rules: [{ token: 'keyword', foreground: 'F55D04', fontStyle: 'bold' }],
-        colors: {
-            'editor.foreground': '#000000'
-        }
-    })
+    monaco.editor.defineTheme(JsonTemplateTheme, defaultTheme(token, theme))
 
     monaco.languages.registerCompletionItemProvider(JsonTemplate, {
         provideCompletionItems: provideCompletionItems
@@ -179,6 +174,7 @@ export const JsonTemplateEditor: React.FC<JsonTemplateEditorProps> = (
     } = props
 
     const { token } = useToken()
+    const { sysTheme } = useContext(GlobalContext)
 
     const [editor, setEditor] =
         useState<monaco.editor.IStandaloneCodeEditor | null>(null)
@@ -211,7 +207,7 @@ export const JsonTemplateEditor: React.FC<JsonTemplateEditorProps> = (
     }, [defaultValue, editor, monacoEl, onChange, value])
 
     useEffect(() => {
-        init()
+        init(token, sysTheme)
     }, [])
 
     return (

web/src/components/Data/DataInput/child/WechatTemplateEditor.tsx

@@ -1,11 +1,13 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { useRef, useState, useEffect } from 'react'
 
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
-import { theme } from 'antd'
+import { GlobalToken, theme } from 'antd'
 import './userWorker'
 
 import './style.css'
+import { GlobalContext, ThemeType } from '@/context'
+import { defaultTheme } from './color'
 
 export interface WechatTemplateEditorProps {
     value?: string
@@ -331,7 +333,7 @@ const modelUri = monaco.Uri.parse('./json/wechat.json')
 
 const model = monaco.editor.createModel('', WechatNotifyTemplate, modelUri)
 
-const init = () => {
+const init = (token: GlobalToken, theme?: ThemeType) => {
     monaco.languages.setMonarchTokensProvider(WechatNotifyTemplate, {
         tokenizer: {
             root: [[/\{\{[ ]*\.[ ]*[^}]*[ ]*\}\}/, 'keyword']]
@@ -561,14 +563,10 @@ const init = () => {
     })
 
     // Define a new theme that contains only rules that match this language
-    monaco.editor.defineTheme(WechatNotifyTemplateTheme, {
-        base: 'vs',
-        inherit: false,
-        rules: [{ token: 'keyword', foreground: 'F55D04', fontStyle: 'bold' }],
-        colors: {
-            'editor.foreground': '#000000'
-        }
-    })
+    monaco.editor.defineTheme(
+        WechatNotifyTemplateTheme,
+        defaultTheme(token, theme)
+    )
 
     monaco.languages.registerCompletionItemProvider(WechatNotifyTemplate, {
         provideCompletionItems: provideCompletionItems
@@ -587,6 +585,7 @@ export const WechatTemplateEditor: React.FC<WechatTemplateEditorProps> = (
     } = props
 
     const { token } = useToken()
+    const { sysTheme } = useContext(GlobalContext)
 
     const [editor, setEditor] =
         useState<monaco.editor.IStandaloneCodeEditor | null>(null)
@@ -619,7 +618,7 @@ export const WechatTemplateEditor: React.FC<WechatTemplateEditorProps> = (
     }, [defaultValue, editor, monacoEl, onChange, value])
 
     useEffect(() => {
-        init()
+        init(token, sysTheme)
     }, [])
 
     return (

web/src/components/Data/DataInput/child/color.ts

@@ -0,0 +1,27 @@
+import { ThemeType } from '@/context'
+import { GlobalToken } from 'antd'
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
+
+export const foregroundColor = '#fa541c'
+export const tokenForegroundColor = '#9254de'
+
+export const defaultTheme = (
+    token: GlobalToken,
+    theme?: ThemeType
+): monaco.editor.IStandaloneThemeData => {
+    return {
+        base: theme == 'dark' ? 'vs-dark' : 'vs',
+        inherit: false,
+        rules: [
+            {
+                token: 'keyword',
+                foreground: tokenForegroundColor,
+                fontStyle: 'bold'
+            }
+        ],
+        colors: {
+            'editor.foreground': foregroundColor,
+            'editor.background': token.colorBgContainer
+        }
+    }
+}

web/src/components/Data/DataInput/child/style.css

@@ -3,7 +3,7 @@
     box-sizing: border-box;
     margin: 0;
     padding: 4px 11px;
-    color: rgba(0, 0, 0, 0.88);
+    /* color: rgba(0, 0, 0, 0.88); */
     font-size: 14px;
     line-height: 1.5714285714285714;
     list-style: none;
@@ -15,11 +15,11 @@
     display: inline-block;
     width: 100%;
     min-width: 0;
-    background-color: #ffffff;
+    /* background-color: #ffffff; */
     background-image: none;
     border-width: 1px;
     border-style: solid;
-    border-color: #d9d9d9;
+    /* border-color: #d9d9d9; */
     border-radius: 6px 0 0 6px;
     transition: all 0.2s;
     &:hover {