diff --git a/web/src/components/Data/DataInput/child/DingTemplateEditor.tsx b/web/src/components/Data/DataInput/child/DingTemplateEditor.tsx index 73b59e2e..5e073690 100644 --- a/web/src/components/Data/DataInput/child/DingTemplateEditor.tsx +++ b/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 = ( } = props const { token } = useToken() + const { sysTheme } = useContext(GlobalContext) const [editor, setEditor] = useState(null) @@ -467,7 +463,7 @@ export const DingTemplateEditor: React.FC = ( }, [defaultValue, editor, monacoEl, onChange, value]) useEffect(() => { - init() + init(token, sysTheme) }, []) return ( diff --git a/web/src/components/Data/DataInput/child/EmailTemplateEditor.tsx b/web/src/components/Data/DataInput/child/EmailTemplateEditor.tsx index ac83eb6a..4e20a2c2 100644 --- a/web/src/components/Data/DataInput/child/EmailTemplateEditor.tsx +++ b/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 = ( } = props const { token } = useToken() + const { sysTheme } = useContext(GlobalContext) const [editor, setEditor] = useState(null) @@ -195,7 +194,7 @@ export const EmailTemplateEditor: React.FC = ( }, [defaultValue, editor, monacoEl, onChange, value]) useEffect(() => { - init() + init(token, sysTheme) }, []) return ( diff --git a/web/src/components/Data/DataInput/child/FeishuTemplateEditor.tsx b/web/src/components/Data/DataInput/child/FeishuTemplateEditor.tsx index eb49c23c..05889473 100644 --- a/web/src/components/Data/DataInput/child/FeishuTemplateEditor.tsx +++ b/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 = ( } = props const { token } = useToken() + const { sysTheme } = useContext(GlobalContext) const [editor, setEditor] = useState(null) @@ -476,7 +472,7 @@ export const FeishuTemplateEditor: React.FC = ( }, [defaultValue, editor, monacoEl, onChange, value]) useEffect(() => { - init() + init(token, sysTheme) }, []) return ( diff --git a/web/src/components/Data/DataInput/child/JsonTemplateEditor.tsx b/web/src/components/Data/DataInput/child/JsonTemplateEditor.tsx index b659fc84..41da8330 100644 --- a/web/src/components/Data/DataInput/child/JsonTemplateEditor.tsx +++ b/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 = ( } = props const { token } = useToken() + const { sysTheme } = useContext(GlobalContext) const [editor, setEditor] = useState(null) @@ -211,7 +207,7 @@ export const JsonTemplateEditor: React.FC = ( }, [defaultValue, editor, monacoEl, onChange, value]) useEffect(() => { - init() + init(token, sysTheme) }, []) return ( diff --git a/web/src/components/Data/DataInput/child/WechatTemplateEditor.tsx b/web/src/components/Data/DataInput/child/WechatTemplateEditor.tsx index 90bb04da..a26c38ee 100644 --- a/web/src/components/Data/DataInput/child/WechatTemplateEditor.tsx +++ b/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 = ( } = props const { token } = useToken() + const { sysTheme } = useContext(GlobalContext) const [editor, setEditor] = useState(null) @@ -619,7 +618,7 @@ export const WechatTemplateEditor: React.FC = ( }, [defaultValue, editor, monacoEl, onChange, value]) useEffect(() => { - init() + init(token, sysTheme) }, []) return ( diff --git a/web/src/components/Data/DataInput/child/color.ts b/web/src/components/Data/DataInput/child/color.ts new file mode 100644 index 00000000..dd26926f --- /dev/null +++ b/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 + } + } +} diff --git a/web/src/components/Data/DataInput/child/style.css b/web/src/components/Data/DataInput/child/style.css index 3c4d33da..1b173caa 100644 --- a/web/src/components/Data/DataInput/child/style.css +++ b/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 {