From c8363194d80a3f2664d707f4aab1393ec6460550 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=A7=E6=A1=90?= <1058165620@qq.com> Date: Sun, 28 Apr 2024 22:43:10 +0800 Subject: [PATCH 1/4] feat: wecaht hook template --- .../home/monitor/strategy-group/strategy/options.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/web/src/pages/home/monitor/strategy-group/strategy/options.tsx b/web/src/pages/home/monitor/strategy-group/strategy/options.tsx index 49bc69da..8c87a88b 100644 --- a/web/src/pages/home/monitor/strategy-group/strategy/options.tsx +++ b/web/src/pages/home/monitor/strategy-group/strategy/options.tsx @@ -1088,6 +1088,14 @@ export const bindNotifyTemplateDataFormOptions = ( } } break + case NotifyTemplateType.NotifyTemplateTypeWeChatWork: + defaultContentType.dataProps = { + type: 'wechat-emplate-editor', + parentProps: { + height: 300 + } + } + break default: defaultContentType.dataProps = { type: 'template-auto-complete', From 45371305b1304f12c235abd8145a2838f7691dfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=A7=E6=A1=90?= <1058165620@qq.com> Date: Mon, 29 Apr 2024 17:30:57 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E6=9A=97?= =?UTF-8?q?=E9=BB=91=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DataInput/child/DingTemplateEditor.tsx | 20 ++++++-------- .../DataInput/child/EmailTemplateEditor.tsx | 23 ++++++++-------- .../DataInput/child/FeishuTemplateEditor.tsx | 20 ++++++-------- .../DataInput/child/JsonTemplateEditor.tsx | 20 ++++++-------- .../DataInput/child/WechatTemplateEditor.tsx | 23 ++++++++-------- .../components/Data/DataInput/child/color.ts | 27 +++++++++++++++++++ .../components/Data/DataInput/child/style.css | 6 ++--- 7 files changed, 76 insertions(+), 63 deletions(-) create mode 100644 web/src/components/Data/DataInput/child/color.ts 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 { From cdf3faa46e68714b077463700da6f2f40bb0aebc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=A7=E6=A1=90?= <1058165620@qq.com> Date: Mon, 29 Apr 2024 17:35:38 +0800 Subject: [PATCH 3/4] feat(temp): template --- web/src/pages/home/monitor/strategy-group/strategy/options.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/pages/home/monitor/strategy-group/strategy/options.tsx b/web/src/pages/home/monitor/strategy-group/strategy/options.tsx index 8c87a88b..4da402f3 100644 --- a/web/src/pages/home/monitor/strategy-group/strategy/options.tsx +++ b/web/src/pages/home/monitor/strategy-group/strategy/options.tsx @@ -1090,7 +1090,7 @@ export const bindNotifyTemplateDataFormOptions = ( break case NotifyTemplateType.NotifyTemplateTypeWeChatWork: defaultContentType.dataProps = { - type: 'wechat-emplate-editor', + type: 'wechat-template-editor', parentProps: { height: 300 } From 49eab46dc5246ae80b139cf6fa63c4ee18661465 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=A7=E6=A1=90?= <1058165620@qq.com> Date: Mon, 29 Apr 2024 17:38:22 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix(temp):=20=E7=A7=BB=E9=99=A4=E9=87=8D?= =?UTF-8?q?=E5=A4=8D=E7=9A=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../home/monitor/strategy-group/strategy/options.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/web/src/pages/home/monitor/strategy-group/strategy/options.tsx b/web/src/pages/home/monitor/strategy-group/strategy/options.tsx index 4da402f3..49bc69da 100644 --- a/web/src/pages/home/monitor/strategy-group/strategy/options.tsx +++ b/web/src/pages/home/monitor/strategy-group/strategy/options.tsx @@ -1088,14 +1088,6 @@ export const bindNotifyTemplateDataFormOptions = ( } } break - case NotifyTemplateType.NotifyTemplateTypeWeChatWork: - defaultContentType.dataProps = { - type: 'wechat-template-editor', - parentProps: { - height: 300 - } - } - break default: defaultContentType.dataProps = { type: 'template-auto-complete',