From 737ddb1a8efff3aa7cf724e4417974fe91dcd1ae Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Mon, 28 Feb 2022 18:15:56 +0800 Subject: [PATCH 1/9] =?UTF-8?q?feat:=20code=E7=BC=96=E8=BE=91=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +- src/components/formFields/code/index.less | 24 +++++ src/components/formFields/code/index.tsx | 122 ++++++++++++++++++++++ src/components/formFields/index.tsx | 4 +- 4 files changed, 151 insertions(+), 2 deletions(-) create mode 100644 src/components/formFields/code/index.less create mode 100644 src/components/formFields/code/index.tsx diff --git a/package.json b/package.json index d7c4298..90fe131 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ }, "dependencies": { "@ant-design/icons": "^4.3.0", + "@monaco-editor/react": "^4.3.1", "@types/react-router-dom": "^5.1.5", "antd": "^4.14.1", "axios": "^0.20.0", @@ -82,4 +83,4 @@ "react": "^16.13.1", "react-dom": "^16.13.1" } -} \ No newline at end of file +} diff --git a/src/components/formFields/code/index.less b/src/components/formFields/code/index.less new file mode 100644 index 0000000..bab1126 --- /dev/null +++ b/src/components/formFields/code/index.less @@ -0,0 +1,24 @@ +.editor-page { + .header-wrapper { + padding: 5px 20px 5px 0; + text-align: right; + } + .header-wrapper-vs-dark { + color: #fff; + background-color: #474747; + } + .header-wrapper-light { + color: #000; + background-color: #f3f3f3; + } + .editor-fullscreen { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100000; + } +} \ No newline at end of file diff --git a/src/components/formFields/code/index.tsx b/src/components/formFields/code/index.tsx new file mode 100644 index 0000000..be72375 --- /dev/null +++ b/src/components/formFields/code/index.tsx @@ -0,0 +1,122 @@ +import React from 'react' +import { Tooltip, Button, Space } from 'antd' +import { CodeField } from 'ccms' +import { FullscreenOutlined, FullscreenExitOutlined, UndoOutlined } from '@ant-design/icons'; +import Editor, { loader } from "@monaco-editor/react"; +import { ICodeField, CodeFieldConfig } from 'ccms/dist/src/components/formFields/code' +import styles from './index.less' + +loader.config({ paths: { vs: "https://storage.360buyimg.com/swm-plus/monaco-editor-0.28.1" } }); + +interface State { + fullScreenStatus: boolean // 编辑器是不是处于全屏状态 + codeValue: string, + wait: boolean +} + +export default class CodeFieldComponent extends CodeField { + state= { + fullScreenStatus: false, + codeValue: '', + wait: false + } + editorInstance: any + timer: NodeJS.Timeout | null = null + + handleEditorDidMount = (editor, monaco) => { + this.editorInstance = editor + this.editorInstance.defaultCodeValue = editor.getValue() + } + + keydownCallback = (e) => { + const keyCode = e.keyCode || e.which || e.charCode; + const ctrlKey = e.ctrlKey || e.metaKey; + if (this.props.config.fullScreen) { + if ((e.key === 'j' || keyCode === 74) && ctrlKey) { + this.enterFull() + } else if ((e.key === 'Escape' || keyCode === 27)) { + this.exitFull() + } + } + } + + enterFull = () => { + const editorDom = document.getElementById('editor-wrapper') + this.setState({fullScreenStatus: true}) + } + + exitFull = () => { + this.setState({fullScreenStatus: false}) + } + + resetValue = () => { + this.setState({codeValue: this.editorInstance.defaultCodeValue}) + this.props.onValueSet('', this.editorInstance.defaultCodeValue, true) + } + + inputCode = (value: string) => { + this.setState({ + codeValue: value, + wait: true + }) + } + + renderComponent = (props: ICodeField) => { + const { + value, + codeType, + theme, + fullScreen, // 是否支持全屏的配置项 + height, + onChange, + } = props + const { wait, codeValue, fullScreenStatus } = this.state + return ( +
+
+
+ + ele.parentElement || document.body}> + + + { fullScreenStatus && fullScreen + ? ele.parentElement || document.body}> + + + : null + } + { !fullScreenStatus && fullScreen + ? ele.parentElement || document.body}> + + + : null + } + +
+ { + if (v === undefined) { + v = '' + } + this.inputCode(v) + if (this.timer !== null) clearTimeout(this.timer) + this.timer = setTimeout(() => { + this.setState({ + wait: false + }) + v !== undefined && onChange(v) + }, 100) + }} + /> +
+
+ ) + } +} diff --git a/src/components/formFields/index.tsx b/src/components/formFields/index.tsx index c756b3c..39395aa 100644 --- a/src/components/formFields/index.tsx +++ b/src/components/formFields/index.tsx @@ -20,6 +20,7 @@ import MultipleTextField from './multipleText' import CustomField from './custom' import ImportSubformField from './importSubform' import AnyField from './any' +import CodeField from './code' import TextDisplayComponent from './text/display' import LongTextDisplayComponent from './longtext/display' @@ -55,7 +56,8 @@ export default { multiple_text: MultipleTextField, custom: CustomField, import_subform: ImportSubformField, - any: AnyField + any: AnyField, + code: CodeField } export const display = { -- Gitee From bde5c00094e3c7c4ccfe2f5f6773741ed0498e55 Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Tue, 1 Mar 2022 14:00:19 +0800 Subject: [PATCH 2/9] =?UTF-8?q?refactor:=20=E5=88=A0=E9=99=A4=E9=98=B2?= =?UTF-8?q?=E6=8A=96=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/code/index.tsx | 27 ++++-------------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/src/components/formFields/code/index.tsx b/src/components/formFields/code/index.tsx index be72375..227f814 100644 --- a/src/components/formFields/code/index.tsx +++ b/src/components/formFields/code/index.tsx @@ -10,18 +10,13 @@ loader.config({ paths: { vs: "https://storage.360buyimg.com/swm-plus/monaco-edit interface State { fullScreenStatus: boolean // 编辑器是不是处于全屏状态 - codeValue: string, - wait: boolean } export default class CodeFieldComponent extends CodeField { state= { - fullScreenStatus: false, - codeValue: '', - wait: false + fullScreenStatus: false } editorInstance: any - timer: NodeJS.Timeout | null = null handleEditorDidMount = (editor, monaco) => { this.editorInstance = editor @@ -50,16 +45,9 @@ export default class CodeFieldComponent extends CodeField { } resetValue = () => { - this.setState({codeValue: this.editorInstance.defaultCodeValue}) this.props.onValueSet('', this.editorInstance.defaultCodeValue, true) } - inputCode = (value: string) => { - this.setState({ - codeValue: value, - wait: true - }) - } renderComponent = (props: ICodeField) => { const { @@ -70,7 +58,7 @@ export default class CodeFieldComponent extends CodeField { height, onChange, } = props - const { wait, codeValue, fullScreenStatus } = this.state + const { fullScreenStatus } = this.state return (
@@ -99,20 +87,13 @@ export default class CodeFieldComponent extends CodeField { defaultLanguage={codeType} language={codeType} defaultValue={value} - value={!wait && value ? value : codeValue} + value={value} onMount={this.handleEditorDidMount} onChange={ (v)=> { if (v === undefined) { v = '' } - this.inputCode(v) - if (this.timer !== null) clearTimeout(this.timer) - this.timer = setTimeout(() => { - this.setState({ - wait: false - }) - v !== undefined && onChange(v) - }, 100) + onChange(v) }} />
-- Gitee From c0b9a057e17ab45d7858aa2ddb3d9c430f5e746c Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Tue, 1 Mar 2022 18:30:39 +0800 Subject: [PATCH 3/9] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96code=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8=E4=BA=A4=E4=BA=92=E9=80=BB=E8=BE=91=E5=88=B0?= =?UTF-8?q?renderContainer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/code/index.less | 4 +- src/components/formFields/code/index.tsx | 121 ++++++++++------------ 2 files changed, 57 insertions(+), 68 deletions(-) diff --git a/src/components/formFields/code/index.less b/src/components/formFields/code/index.less index bab1126..76dca94 100644 --- a/src/components/formFields/code/index.less +++ b/src/components/formFields/code/index.less @@ -3,11 +3,11 @@ padding: 5px 20px 5px 0; text-align: right; } - .header-wrapper-vs-dark { + .header-wrapper-black { color: #fff; background-color: #474747; } - .header-wrapper-light { + .header-wrapper-white { color: #000; background-color: #f3f3f3; } diff --git a/src/components/formFields/code/index.tsx b/src/components/formFields/code/index.tsx index 227f814..f8c957e 100644 --- a/src/components/formFields/code/index.tsx +++ b/src/components/formFields/code/index.tsx @@ -1,21 +1,18 @@ import React from 'react' -import { Tooltip, Button, Space } from 'antd' +import { Tooltip, Space } from 'antd' import { CodeField } from 'ccms' -import { FullscreenOutlined, FullscreenExitOutlined, UndoOutlined } from '@ant-design/icons'; -import Editor, { loader } from "@monaco-editor/react"; -import { ICodeField, CodeFieldConfig } from 'ccms/dist/src/components/formFields/code' +import { FullscreenOutlined, FullscreenExitOutlined, UndoOutlined } from '@ant-design/icons' +import Editor, { loader } from '@monaco-editor/react' +import { ICodeFieldContainer, ICodeField } from 'ccms/dist/src/components/formFields/code' import styles from './index.less' -loader.config({ paths: { vs: "https://storage.360buyimg.com/swm-plus/monaco-editor-0.28.1" } }); - -interface State { - fullScreenStatus: boolean // 编辑器是不是处于全屏状态 -} +loader.config({ paths: { vs: 'https://storage.360buyimg.com/swm-plus/monaco-editor-0.28.1' } }) export default class CodeFieldComponent extends CodeField { state= { fullScreenStatus: false } + editorInstance: any handleEditorDidMount = (editor, monaco) => { @@ -23,81 +20,73 @@ export default class CodeFieldComponent extends CodeField { this.editorInstance.defaultCodeValue = editor.getValue() } - keydownCallback = (e) => { - const keyCode = e.keyCode || e.which || e.charCode; - const ctrlKey = e.ctrlKey || e.metaKey; - if (this.props.config.fullScreen) { - if ((e.key === 'j' || keyCode === 74) && ctrlKey) { - this.enterFull() - } else if ((e.key === 'Escape' || keyCode === 27)) { - this.exitFull() - } - } - } - - enterFull = () => { - const editorDom = document.getElementById('editor-wrapper') - this.setState({fullScreenStatus: true}) - } - - exitFull = () => { - this.setState({fullScreenStatus: false}) - } - - resetValue = () => { - this.props.onValueSet('', this.editorInstance.defaultCodeValue, true) - } - - - renderComponent = (props: ICodeField) => { + renderContainer = (props: ICodeFieldContainer) => { const { - value, - codeType, + fullScreen, + fullScreenStatus, theme, - fullScreen, // 是否支持全屏的配置项 - height, - onChange, + children, + onResetValue, + keydownCallback, + enterFull, + exitFull } = props - const { fullScreenStatus } = this.state + return (
-
+
{ keydownCallback(e) }}>
- ele.parentElement || document.body}> - + ele.parentElement || document.body}> + { onResetValue(this.editorInstance.defaultCodeValue) } }/> { fullScreenStatus && fullScreen - ? ele.parentElement || document.body}> - + ? ele.parentElement || document.body}> + exitFull}/> - : null + : null } - { !fullScreenStatus && fullScreen - ? ele.parentElement || document.body}> - + { !fullScreenStatus && fullScreen + ? ele.parentElement || document.body}> + enterFull}/> : null }
- { - if (v === undefined) { - v = '' - } - onChange(v) - }} - /> + {children}
) } + + renderComponent = (props: ICodeField) => { + const { + value, + codeType, + theme, + height, + onChange + } = props + const { fullScreenStatus } = this.state + const editorTheme = theme === 'white' ? 'light' : 'vs-dark' + const editorExpectValue = Object.prototype.toString.call(value) === '[object Object]' ? '' : value + + return ( + { + if (v === undefined) { + v = '' + } + onChange(v) + }} + /> + ) + } } -- Gitee From 34f0a376c2ba60bacbe2791903ade5ae6963817a Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Wed, 2 Mar 2022 10:38:32 +0800 Subject: [PATCH 4/9] =?UTF-8?q?fix:=20enterfull=E6=9C=AA=E8=B0=83=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/code/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/formFields/code/index.tsx b/src/components/formFields/code/index.tsx index f8c957e..1707ff8 100644 --- a/src/components/formFields/code/index.tsx +++ b/src/components/formFields/code/index.tsx @@ -42,13 +42,13 @@ export default class CodeFieldComponent extends CodeField { { fullScreenStatus && fullScreen ? ele.parentElement || document.body}> - exitFull}/> + { exitFull() }}/> : null } { !fullScreenStatus && fullScreen ? ele.parentElement || document.body}> - enterFull}/> + { enterFull() }}/> : null } @@ -64,11 +64,12 @@ export default class CodeFieldComponent extends CodeField { const { value, codeType, + fullScreenStatus, theme, height, onChange } = props - const { fullScreenStatus } = this.state + const editorTheme = theme === 'white' ? 'light' : 'vs-dark' const editorExpectValue = Object.prototype.toString.call(value) === '[object Object]' ? '' : value -- Gitee From bcd7550657c556bb2e680439d01ae0468c7320ee Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Thu, 3 Mar 2022 11:03:33 +0800 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E9=A1=B9?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0custom=E7=BB=84=E4=BB=B6=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/tableColumns/custom/index.tsx | 4 ++++ src/components/tableColumns/index.tsx | 4 +++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/components/tableColumns/custom/index.tsx diff --git a/src/components/tableColumns/custom/index.tsx b/src/components/tableColumns/custom/index.tsx new file mode 100644 index 0000000..350f10f --- /dev/null +++ b/src/components/tableColumns/custom/index.tsx @@ -0,0 +1,4 @@ +import { CustomColumn } from 'ccms' + +export default class CustomColumnComponent extends CustomColumn { +} diff --git a/src/components/tableColumns/index.tsx b/src/components/tableColumns/index.tsx index 1afffa9..7f8b942 100644 --- a/src/components/tableColumns/index.tsx +++ b/src/components/tableColumns/index.tsx @@ -6,6 +6,7 @@ import NumberRangeColumn from './numberRange' import MultirowColumn from './multirowText' import EnumColumn from './enum' import ImageColumn from './image' +import CustomColumn from './custom' export default { text: TextColumns, @@ -15,5 +16,6 @@ export default { numberRange: NumberRangeColumn, multirowText: MultirowColumn, Aenum: EnumColumn, - image: ImageColumn + image: ImageColumn, + custom: CustomColumn } -- Gitee From fbae1c07087f5803bd413eb006a646907a333023 Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Mon, 7 Mar 2022 16:13:58 +0800 Subject: [PATCH 6/9] =?UTF-8?q?feat:=20diffCode=E7=BC=96=E8=BE=91=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/diffCode/index.less | 24 ++++++ src/components/formFields/diffCode/index.tsx | 76 +++++++++++++++++++ src/components/formFields/index.tsx | 4 +- 3 files changed, 103 insertions(+), 1 deletion(-) create mode 100644 src/components/formFields/diffCode/index.less create mode 100644 src/components/formFields/diffCode/index.tsx diff --git a/src/components/formFields/diffCode/index.less b/src/components/formFields/diffCode/index.less new file mode 100644 index 0000000..76dca94 --- /dev/null +++ b/src/components/formFields/diffCode/index.less @@ -0,0 +1,24 @@ +.editor-page { + .header-wrapper { + padding: 5px 20px 5px 0; + text-align: right; + } + .header-wrapper-black { + color: #fff; + background-color: #474747; + } + .header-wrapper-white { + color: #000; + background-color: #f3f3f3; + } + .editor-fullscreen { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100000; + } +} \ No newline at end of file diff --git a/src/components/formFields/diffCode/index.tsx b/src/components/formFields/diffCode/index.tsx new file mode 100644 index 0000000..6f1ea8d --- /dev/null +++ b/src/components/formFields/diffCode/index.tsx @@ -0,0 +1,76 @@ +import React from 'react' +import { Tooltip, Space } from 'antd' +import { DiffCodeField } from 'ccms' +import { FullscreenOutlined, FullscreenExitOutlined, UndoOutlined } from '@ant-design/icons' +import { loader, DiffEditor } from '@monaco-editor/react' +import { IDiffCodeFieldContainer, IDiffCodeField } from 'ccms/dist/src/components/formFields/diffCode' +import styles from './index.less' + +loader.config({ paths: { vs: 'https://storage.360buyimg.com/swm-plus/monaco-editor-0.28.1' } }) + +export default class DiffCodeFieldComponent extends DiffCodeField { + state= { + fullScreenStatus: false + } + + + renderContainer = (props: IDiffCodeFieldContainer) => { + const { + fullScreen, + fullScreenStatus, + theme, + children, + keydownCallback, + enterFull, + exitFull + } = props + + return ( +
+
{ keydownCallback(e) }}> +
+ + { fullScreenStatus && fullScreen + ? ele.parentElement || document.body}> + { exitFull() }}/> + + : null + } + { !fullScreenStatus && fullScreen + ? ele.parentElement || document.body}> + { enterFull() }}/> + + : null + } + +
+ {children} +
+
+ ) + } + + renderComponent = (props: IDiffCodeField) => { + const { + codeType, + fullScreenStatus, + theme, + height, + originalCode, + modifiedCode + } = props + + const editorTheme = theme === 'white' ? 'light' : 'vs-dark' + + return ( + + ) + } +} diff --git a/src/components/formFields/index.tsx b/src/components/formFields/index.tsx index 39395aa..5a848cc 100644 --- a/src/components/formFields/index.tsx +++ b/src/components/formFields/index.tsx @@ -21,6 +21,7 @@ import CustomField from './custom' import ImportSubformField from './importSubform' import AnyField from './any' import CodeField from './code' +import DiffCodeField from './diffCode' import TextDisplayComponent from './text/display' import LongTextDisplayComponent from './longtext/display' @@ -57,7 +58,8 @@ export default { custom: CustomField, import_subform: ImportSubformField, any: AnyField, - code: CodeField + code: CodeField, + diffcode: DiffCodeField } export const display = { -- Gitee From 2c89131c801c14002ec764ec19f551c53adc0cb8 Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Fri, 11 Mar 2022 16:18:44 +0800 Subject: [PATCH 7/9] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9code=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8loader=E5=8A=A0=E8=BD=BD=E8=B5=84=E6=BA=90?= =?UTF-8?q?=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/code/index.tsx | 2 +- src/components/formFields/diffCode/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/formFields/code/index.tsx b/src/components/formFields/code/index.tsx index 1707ff8..e6ac468 100644 --- a/src/components/formFields/code/index.tsx +++ b/src/components/formFields/code/index.tsx @@ -6,7 +6,7 @@ import Editor, { loader } from '@monaco-editor/react' import { ICodeFieldContainer, ICodeField } from 'ccms/dist/src/components/formFields/code' import styles from './index.less' -loader.config({ paths: { vs: 'https://storage.360buyimg.com/swm-plus/monaco-editor-0.28.1' } }) +loader.config({ paths: { vs: 'https://storage.360buyimg.com/swm-plus/monaco-editor-0.28.1/min/vs' } }) export default class CodeFieldComponent extends CodeField { state= { diff --git a/src/components/formFields/diffCode/index.tsx b/src/components/formFields/diffCode/index.tsx index 6f1ea8d..d16cc50 100644 --- a/src/components/formFields/diffCode/index.tsx +++ b/src/components/formFields/diffCode/index.tsx @@ -6,7 +6,7 @@ import { loader, DiffEditor } from '@monaco-editor/react' import { IDiffCodeFieldContainer, IDiffCodeField } from 'ccms/dist/src/components/formFields/diffCode' import styles from './index.less' -loader.config({ paths: { vs: 'https://storage.360buyimg.com/swm-plus/monaco-editor-0.28.1' } }) +loader.config({ paths: { vs: 'https://storage.360buyimg.com/swm-plus/monaco-editor-0.28.1/min/vs' } }) export default class DiffCodeFieldComponent extends DiffCodeField { state= { -- Gitee From 7a09d5d7cb18723be1cba325b5aa02beb5c62761 Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Tue, 29 Mar 2022 11:28:28 +0800 Subject: [PATCH 8/9] =?UTF-8?q?fix:=20amd=E6=8A=A5=E9=94=99=E5=8F=8Aloadin?= =?UTF-8?q?g=E6=96=87=E5=AD=97=E6=9B=B4=E4=B8=BA=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/code/index.less | 65 +++++++++++++++++++ src/components/formFields/code/index.tsx | 24 ++++++- src/components/formFields/diffCode/index.less | 64 ++++++++++++++++++ src/components/formFields/diffCode/index.tsx | 21 ++++++ 4 files changed, 171 insertions(+), 3 deletions(-) diff --git a/src/components/formFields/code/index.less b/src/components/formFields/code/index.less index 76dca94..7e94f30 100644 --- a/src/components/formFields/code/index.less +++ b/src/components/formFields/code/index.less @@ -21,4 +21,69 @@ height: 100%; z-index: 100000; } + + .sp-cube-wrapper { + position: absolute; + left:50%; + top:50%; + -webkit-animation: translate(-50%, -50%); + transform: translate(-50%, -50%); + z-index: 4; + border-radius: 4px; + } + .sp-cube { + transform: scale(.3); + } + .sp-cube * { + position: absolute; + width: 96px; + height: 96px; + box-sizing: border-box; + } + .sp-cube .sp-sides * { + border: 10px solid #757678; + border-radius: 8px; + } + .sp-cube .sp-sides { + -webkit-animation: sp-cube-rotate 2s linear infinite; + animation: sp-cube-rotate 2s linear infinite; + animation-fill-mode: forwards; + transform-style: preserve-3d; + } + @-webkit-keyframes sp-cube-rotate { + from { + -webkit-transform: rotateX(-25.5deg) rotateY(45deg); + transform: rotateX(-25.5deg) rotateY(45deg); + } + to { + -webkit-transform: rotateX(-25.5deg) rotateY(405deg); + transform: rotateX(-25.5deg) rotateY(405deg); + } + } + .sp-cube .sp-sides .sp-top { + transform: rotateX(90deg) translateZ(44px); + transform-origin: 50% 50%; + } + + .sp-cube .sp-sides .sp-right { + transform: rotateY(90deg) translateZ(44px); + transform-origin: 50% 50%; + } + .sp-cube .sp-sides .sp-bottom { + transform: rotateX(-90deg) translateZ(44px); + transform-origin: 50% 50%; + } + .sp-cube .sp-sides .sp-left { + transform: rotateY(-90deg) translateZ(44px); + transform-origin: 50% 50%; + } + + .sp-cube .sp-sides .sp-front { + transform: rotateY(0deg) translateZ(44px); + transform-origin: 50% 50%; + } + .sp-cube .sp-sides .sp-back { + transform: rotateY(-180deg) translateZ(44px); + transform-origin: 50% 50%; + } } \ No newline at end of file diff --git a/src/components/formFields/code/index.tsx b/src/components/formFields/code/index.tsx index e6ac468..5ee7afa 100644 --- a/src/components/formFields/code/index.tsx +++ b/src/components/formFields/code/index.tsx @@ -7,13 +7,25 @@ import { ICodeFieldContainer, ICodeField } from 'ccms/dist/src/components/formFi import styles from './index.less' loader.config({ paths: { vs: 'https://storage.360buyimg.com/swm-plus/monaco-editor-0.28.1/min/vs' } }) - +declare global { + interface Window { + define: unknown + codeEditorDefine: unknown + } +} export default class CodeFieldComponent extends CodeField { state= { fullScreenStatus: false } - editorInstance: any + + componentWillUnmount () { + window.codeEditorDefine = window.define + window.define = undefined + } + handleEditorbeforeMount = () => { + if (window.codeEditorDefine) window.define = window.codeEditorDefine + } handleEditorDidMount = (editor, monaco) => { this.editorInstance = editor @@ -72,15 +84,21 @@ export default class CodeFieldComponent extends CodeField { const editorTheme = theme === 'white' ? 'light' : 'vs-dark' const editorExpectValue = Object.prototype.toString.call(value) === '[object Object]' ? '' : value - return ( +
+
+
+
} height= { fullScreenStatus ? document.body.clientHeight : Number(height) } theme={editorTheme} defaultLanguage={codeType} language={codeType} value={ editorExpectValue } onMount={this.handleEditorDidMount} + beforeMount = {this.handleEditorbeforeMount} onChange={ (v) => { if (v === undefined) { v = '' diff --git a/src/components/formFields/diffCode/index.less b/src/components/formFields/diffCode/index.less index 76dca94..22bb565 100644 --- a/src/components/formFields/diffCode/index.less +++ b/src/components/formFields/diffCode/index.less @@ -21,4 +21,68 @@ height: 100%; z-index: 100000; } + .sp-cube-wrapper { + position: absolute; + left:50%; + top:50%; + -webkit-animation: translate(-50%, -50%); + transform: translate(-50%, -50%); + z-index: 4; + border-radius: 4px; + } + .sp-cube { + transform: scale(.3); + } + .sp-cube * { + position: absolute; + width: 96px; + height: 96px; + box-sizing: border-box; + } + .sp-cube .sp-sides * { + border: 10px solid #757678; + border-radius: 8px; + } + .sp-cube .sp-sides { + -webkit-animation: sp-cube-rotate 2s linear infinite; + animation: sp-cube-rotate 2s linear infinite; + animation-fill-mode: forwards; + transform-style: preserve-3d; + } + @-webkit-keyframes sp-cube-rotate { + from { + -webkit-transform: rotateX(-25.5deg) rotateY(45deg); + transform: rotateX(-25.5deg) rotateY(45deg); + } + to { + -webkit-transform: rotateX(-25.5deg) rotateY(405deg); + transform: rotateX(-25.5deg) rotateY(405deg); + } + } + .sp-cube .sp-sides .sp-top { + transform: rotateX(90deg) translateZ(44px); + transform-origin: 50% 50%; + } + + .sp-cube .sp-sides .sp-right { + transform: rotateY(90deg) translateZ(44px); + transform-origin: 50% 50%; + } + .sp-cube .sp-sides .sp-bottom { + transform: rotateX(-90deg) translateZ(44px); + transform-origin: 50% 50%; + } + .sp-cube .sp-sides .sp-left { + transform: rotateY(-90deg) translateZ(44px); + transform-origin: 50% 50%; + } + + .sp-cube .sp-sides .sp-front { + transform: rotateY(0deg) translateZ(44px); + transform-origin: 50% 50%; + } + .sp-cube .sp-sides .sp-back { + transform: rotateY(-180deg) translateZ(44px); + transform-origin: 50% 50%; + } } \ No newline at end of file diff --git a/src/components/formFields/diffCode/index.tsx b/src/components/formFields/diffCode/index.tsx index d16cc50..edb50ee 100644 --- a/src/components/formFields/diffCode/index.tsx +++ b/src/components/formFields/diffCode/index.tsx @@ -7,12 +7,26 @@ import { IDiffCodeFieldContainer, IDiffCodeField } from 'ccms/dist/src/component import styles from './index.less' loader.config({ paths: { vs: 'https://storage.360buyimg.com/swm-plus/monaco-editor-0.28.1/min/vs' } }) +declare global { + interface Window { + define: unknown + diffCodeEditorDefine: unknown + } +} export default class DiffCodeFieldComponent extends DiffCodeField { state= { fullScreenStatus: false } + componentWillUnmount () { + window.diffCodeEditorDefine = window.define + window.define = undefined + } + + handleEditorbeforeMount = () => { + if (window.diffCodeEditorDefine) window.define = window.codeEditorDefine + } renderContainer = (props: IDiffCodeFieldContainer) => { const { @@ -64,12 +78,19 @@ export default class DiffCodeFieldComponent extends DiffCodeField { return ( +
+
+
+
} height= { fullScreenStatus ? document.body.clientHeight : Number(height) } theme={editorTheme} language={codeType} original={originalCode} modified={modifiedCode} options={{readOnly: true}} + beforeMount = {this.handleEditorbeforeMount} /> ) } -- Gitee From 4b4825612506d835980204b80e76ee4df4c083a5 Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Tue, 29 Mar 2022 11:46:45 +0800 Subject: [PATCH 9/9] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8F=96=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/diffCode/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/formFields/diffCode/index.tsx b/src/components/formFields/diffCode/index.tsx index edb50ee..d183947 100644 --- a/src/components/formFields/diffCode/index.tsx +++ b/src/components/formFields/diffCode/index.tsx @@ -25,7 +25,7 @@ export default class DiffCodeFieldComponent extends DiffCodeField { } handleEditorbeforeMount = () => { - if (window.diffCodeEditorDefine) window.define = window.codeEditorDefine + if (window.diffCodeEditorDefine) window.define = window.diffCodeEditorDefine } renderContainer = (props: IDiffCodeFieldContainer) => { -- Gitee