Skip to content

Commit fb00920

Browse files
lichunnlichunn
authored
feat: Editor full screen with title, close button, and examples (opentiny#866)
* feat: 状态管理插件的编辑器全屏加上标题、关闭按钮和示例 * fix: 抽取编辑器全屏头部组件 * fix: 抽取变量
1 parent add50e9 commit fb00920

6 files changed

Lines changed: 188 additions & 123 deletions

File tree

‎packages/common/component/MonacoEditor.vue‎

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,36 @@
11
<template>
22
<div :class="['editor-container', { 'editor-container-full': fullscreen }]">
3-
<div class="toolbar">
4-
<div class="toolbar-start">
5-
<slot name="toolbarStart"></slot>
6-
</div>
7-
<div :class="['buttons', { fullscreen: fullscreen }]">
8-
<slot name="buttons"></slot>
9-
<tiny-tooltip v-if="showFormatBtn && options.language === 'json'" content="格式化" placement="top">
10-
<public-icon name="json" @click="formatCode"></public-icon>
11-
</tiny-tooltip>
12-
<span v-if="showFullScreenBtn">
13-
<tiny-tooltip v-if="!fullscreen" content="全屏" placement="top">
14-
<public-icon name="full-screen" @click="switchFullScreen(true)"></public-icon>
15-
</tiny-tooltip>
16-
<tiny-tooltip v-else content="退出全屏" placement="top">
17-
<public-icon name="cancel-full-screen" @click="switchFullScreen(false)"></public-icon>
3+
<slot v-if="fullscreen" name="fullscreenHead"></slot>
4+
<div class="editor-container-content">
5+
<div class="toolbar">
6+
<div class="toolbar-start">
7+
<slot name="toolbarStart"></slot>
8+
</div>
9+
<div :class="['buttons', { fullscreen: fullscreen }]">
10+
<slot name="buttons"></slot>
11+
<tiny-tooltip v-if="showFormatBtn && options.language === 'json'" content="格式化" placement="top">
12+
<public-icon name="json" @click="formatCode"></public-icon>
1813
</tiny-tooltip>
19-
</span>
14+
<span v-if="showFullScreenBtn">
15+
<tiny-tooltip v-if="!fullscreen" content="全屏" placement="top">
16+
<public-icon name="full-screen" @click="switchFullScreen(true)"></public-icon>
17+
</tiny-tooltip>
18+
<tiny-tooltip v-else content="退出全屏" placement="top">
19+
<public-icon name="cancel-full-screen" @click="switchFullScreen(false)"></public-icon>
20+
</tiny-tooltip>
21+
</span>
22+
</div>
2023
</div>
24+
<monaco-editor
25+
ref="editor"
26+
class="editor"
27+
:value="value"
28+
:options="editorOptions"
29+
language="javascript"
30+
@editorDidMount="$emit('editorDidMount', $event)"
31+
></monaco-editor>
2132
</div>
22-
<monaco-editor
23-
ref="editor"
24-
class="editor"
25-
:value="value"
26-
:options="editorOptions"
27-
language="javascript"
28-
@editorDidMount="$emit('editorDidMount', $event)"
29-
></monaco-editor>
33+
<slot v-if="fullscreen" name="fullscreenFooter"></slot>
3034
</div>
3135
</template>
3236

@@ -164,6 +168,11 @@ export default {
164168
}
165169
}
166170
171+
.editor-container-content {
172+
flex: 1;
173+
overflow: hidden;
174+
}
175+
167176
.editor {
168177
flex: 1;
169178
overflow: hidden;

‎packages/plugins/state/src/CreateStore.vue‎

Lines changed: 42 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
<tiny-input v-model="state.storeData.name" placeholder="只能包含数字字母及下划线"></tiny-input>
1414
</tiny-form-item>
1515
<tiny-collapse v-model="state.activeName">
16-
<tiny-collapse-item title="state" name="state">
17-
<tiny-form-item prop="state">
16+
<tiny-collapse-item :title="STATE" :name="STATE">
17+
<tiny-form-item :prop="STATE">
1818
<monaco-editor
1919
ref="variableEditor"
2020
class="store-editor"
@@ -32,27 +32,34 @@
3232
<template #toolbarStart>
3333
<div class="label-left-wrap"></div>
3434
</template>
35+
<template #fullscreenHead>
36+
<state-fullscreen-head :title="STATE" @close="cancel"></state-fullscreen-head>
37+
</template>
38+
<template #fullscreenFooter>
39+
<div class="fullscreen-footer-content">
40+
<state-tips></state-tips>
41+
</div>
42+
</template>
3543
</monaco-editor>
36-
<div class="tips">
37-
<div>字符串:"string"</div>
38-
<div>数字:123</div>
39-
<div>布尔值:true/false</div>
40-
<div>对象:{"name":"xxx"}</div>
41-
<div>数组:["1","2"]</div>
42-
<div>空值:null</div>
43-
<div>"color":red</div>
44-
<div>"background":"blue"</div>
45-
</div>
44+
<state-tips></state-tips>
4645
</tiny-form-item>
4746
</tiny-collapse-item>
48-
<tiny-collapse-item title="getters" name="getters">
49-
<tiny-form-item prop="getters">
50-
<monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters"> </monaco-editor>
47+
<tiny-collapse-item :title="GETTERS" :name="GETTERS">
48+
<tiny-form-item :prop="GETTERS">
49+
<monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters">
50+
<template #fullscreenHead>
51+
<state-fullscreen-head :title="GETTERS" @close="cancel"></state-fullscreen-head>
52+
</template>
53+
</monaco-editor>
5154
</tiny-form-item>
5255
</tiny-collapse-item>
53-
<tiny-collapse-item title="actions" name="actions">
54-
<tiny-form-item prop="actions">
55-
<monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions"> </monaco-editor>
56+
<tiny-collapse-item :title="ACTIONS" :name="ACTIONS">
57+
<tiny-form-item :prop="ACTIONS">
58+
<monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions">
59+
<template #fullscreenHead>
60+
<state-fullscreen-head :title="ACTIONS" @close="cancel"></state-fullscreen-head>
61+
</template>
62+
</monaco-editor>
5663
</tiny-form-item>
5764
</tiny-collapse-item>
5865
</tiny-collapse>
@@ -65,10 +72,14 @@ import { Form, FormItem, Input, Collapse as TinyCollapse, CollapseItem as TinyCo
6572
import { MonacoEditor } from '@opentiny/tiny-engine-common'
6673
import { string2Ast, ast2String, insertName } from '@opentiny/tiny-engine-common/js/ast'
6774
import { verifyJsVarName } from '@opentiny/tiny-engine-common/js/verification'
75+
import StateTips from './StateTips.vue'
76+
import StateFullscreenHead from './StateFullscreenHead.vue'
6877
6978
export default {
7079
components: {
7180
MonacoEditor,
81+
StateTips,
82+
StateFullscreenHead,
7283
TinyForm: Form,
7384
TinyFormItem: FormItem,
7485
TinyInput: Input,
@@ -89,7 +100,11 @@ export default {
89100
type: String
90101
}
91102
},
103+
emits: ['close'],
92104
setup(props, { emit }) {
105+
const STATE = 'state'
106+
const GETTERS = 'getters'
107+
const ACTIONS = 'actions'
93108
const instance = getCurrentInstance()
94109
const isDemoShow = ref(false)
95110
const gettersEditor = ref(null)
@@ -205,7 +220,14 @@ export default {
205220
return Object.prototype.toString.call(variable) === '[object Object]'
206221
}
207222
223+
const cancel = () => {
224+
emit('close')
225+
}
226+
208227
return {
228+
STATE,
229+
GETTERS,
230+
ACTIONS,
209231
isDemoShow,
210232
state,
211233
getEditor,
@@ -219,7 +241,8 @@ export default {
219241
actionsEditor,
220242
editorDidMount,
221243
variableEditor,
222-
actions
244+
actions,
245+
cancel
223246
}
224247
}
225248
}
@@ -229,15 +252,6 @@ export default {
229252
.store-form {
230253
height: calc(100% - 45px);
231254
overflow-y: auto;
232-
.tips {
233-
font-size: 11px;
234-
line-height: 18px;
235-
margin-top: 8px;
236-
border-radius: 4px;
237-
padding: 8px 14px;
238-
background: var(--ti-lowcode-data-source-box-bg);
239-
color: var(--ti-lowcode-datasource-tip-color);
240-
}
241255
:deep(.tiny-collapse-item__wrap) {
242256
padding: 0 12px;
243257
}

‎packages/plugins/state/src/CreateVariable.vue‎

Lines changed: 46 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<tiny-radio-group v-model="state.variableType" :options="VAR_TYPES"></tiny-radio-group>
2020
</tiny-form-item>
2121
<tiny-collapse v-model="state.activeName">
22-
<tiny-collapse-item title="初始值" name="initValue">
22+
<tiny-collapse-item :title="INIT" name="initValue">
2323
<tiny-form-item>
2424
<monaco-editor
2525
ref="variableEditor"
@@ -29,69 +29,32 @@
2929
:options="state.editorOptions"
3030
@editorDidMount="editorDidMount"
3131
>
32-
<template #toolbarStart>
33-
<div class="label-left-wrap">
34-
<tiny-popover
35-
placement="bottom-start"
36-
effect="dark"
37-
trigger="hover"
38-
popper-class="state-data-example-tips"
39-
>
40-
<div class="tips-content">
41-
<div class="create-content-head">
42-
<div class="create-content-tip">数据写法和JS写法一致</div>
43-
</div>
44-
<div class="create-content-demo">
45-
<ul>
46-
<li>字符串: "string"</li>
47-
<li>数字: 123</li>
48-
<li>布尔值: true/false</li>
49-
<li>对象: {"name": "xxx"}</li>
50-
<li>数组: ["1", "2"]</li>
51-
<li>空值: null</li>
52-
<li>JS表达式: (需要先选择JS表达式类型)</li>
53-
<li class="ml20">示例1： t('i18nkey1')</li>
54-
<li class="ml20">示例2： function fnName() {}</li>
55-
<li class="ml20">示例3： { getValue: () => {} }</li>
56-
</ul>
57-
<div class="create-content-foot">
58-
<div class="create-content-tip">
59-
注意：使用JS表达式定义state变量的时候无法调用state其他变量定义，<br />另由于JS函数定义在变量之后，也无法调用JS面板定义的函数
60-
</div>
61-
</div>
62-
</div>
63-
</div>
64-
</tiny-popover>
65-
</div>
66-
</template>
6732
<template #buttons>
6833
<editor-i18n-tool ref="i18nToolRef" @confirm="insertContent"></editor-i18n-tool>
6934
</template>
35+
<template #fullscreenHead>
36+
<state-fullscreen-head :title="INIT" @close="cancel"></state-fullscreen-head>
37+
</template>
38+
<template #fullscreenFooter>
39+
<div class="fullscreen-footer-content">
40+
<state-tips></state-tips>
41+
</div>
42+
</template>
7043
</monaco-editor>
71-
<div class="tips">
72-
<div>字符串:"string"</div>
73-
<div>数字:123</div>
74-
<div>布尔值:true/false</div>
75-
<div>对象:{"name":"xxx"}</div>
76-
<div>数组:["1","2"]</div>
77-
<div>空值:null</div>
78-
<div>"color":red</div>
79-
<div>"background":"blue"</div>
80-
</div>
44+
<state-tips></state-tips>
8145
</tiny-form-item>
8246
</tiny-collapse-item>
83-
<tiny-collapse-item title="getter" name="getter">
47+
<tiny-collapse-item :title="GETTER" :name="GETTER">
8448
<tiny-form-item>
8549
<monaco-editor ref="getterEditor" class="variable-editor" :options="options" :value="state.getterEditorValue">
86-
<template #toolbarStart>
87-
<div class="label-left-wrap">
88-
<tiny-popover placement="bottom-start" trigger="hover" popper-class="state-data-example-tips">
89-
<div class="tips-content">
90-
<div class="create-content-demo">
91-
<pre><code>{{ getterExample }}</code></pre>
92-
</div>
93-
</div>
94-
</tiny-popover>
50+
<template #fullscreenHead>
51+
<state-fullscreen-head :title="GETTER" @close="cancel"></state-fullscreen-head>
52+
</template>
53+
<template #fullscreenFooter>
54+
<div class="fullscreen-footer-content">
55+
<div class="tips">
56+
<pre><code>{{ getterExample }}</code></pre>
57+
</div>
9558
</div>
9659
</template>
9760
</monaco-editor>
@@ -100,18 +63,17 @@
10063
</div>
10164
</tiny-form-item>
10265
</tiny-collapse-item>
103-
<tiny-collapse-item title="setter" name="setter">
66+
<tiny-collapse-item :title="SETTER" :name="SETTER">
10467
<tiny-form-item>
10568
<monaco-editor ref="setterEditor" class="variable-editor" :options="options" :value="state.setterEditorValue">
106-
<template #toolbarStart>
107-
<div class="label-left-wrap">
108-
<tiny-popover placement="bottom-start" trigger="hover" popper-class="state-data-example-tips">
109-
<div class="tips-content">
110-
<div class="create-content-demo">
111-
<pre><code>{{ setterExample }}</code></pre>
112-
</div>
113-
</div>
114-
</tiny-popover>
69+
<template #fullscreenHead>
70+
<state-fullscreen-head :title="SETTER" @close="cancel"></state-fullscreen-head>
71+
</template>
72+
<template #fullscreenFooter>
73+
<div class="fullscreen-footer-content">
74+
<div class="tips">
75+
<pre><code>{{ setterExample }}</code></pre>
76+
</div>
11577
</div>
11678
</template>
11779
</monaco-editor>
@@ -127,7 +89,6 @@
12789
<script>
12890
import { reactive, ref, computed, watch, onBeforeUnmount } from 'vue'
12991
import {
130-
Popover,
13192
Form,
13293
FormItem,
13394
Input,
@@ -141,14 +102,17 @@ import { initCompletion } from '@opentiny/tiny-engine-common/js/completion'
141102
import * as Monaco from 'monaco-editor'
142103
import { validateMonacoEditorData } from './js/common'
143104
import EditorI18nTool from './EditorI18nTool.vue'
105+
import StateTips from './StateTips.vue'
106+
import StateFullscreenHead from './StateFullscreenHead.vue'
144107
145108
export default {
146109
components: {
147110
MonacoEditor,
111+
StateTips,
112+
StateFullscreenHead,
148113
TinyForm: Form,
149114
TinyFormItem: FormItem,
150115
TinyInput: Input,
151-
TinyPopover: Popover,
152116
TinyRadioGroup: RadioGroup,
153117
EditorI18nTool,
154118
TinyCollapse,
@@ -168,8 +132,11 @@ export default {
168132
type: String
169133
}
170134
},
171-
emits: ['nameInput'],
172-
setup(props) {
135+
emits: ['nameInput', 'close'],
136+
setup(props, { emit }) {
137+
const INIT = '初始值'
138+
const GETTER = 'getter'
139+
const SETTER = 'setter'
173140
const variableEditor = ref(null)
174141
const getterEditor = ref(null)
175142
const setterEditor = ref(null)
@@ -390,6 +357,10 @@ export default {
390357
monacoEditor.focus()
391358
}
392359
360+
const cancel = () => {
361+
emit('close')
362+
}
363+
393364
const options = {
394365
lineNumbers: true,
395366
language: 'javascript',
@@ -403,6 +374,9 @@ export default {
403374
"function setter() {\r\n // const [firstName, lastName] = this.state.name.split(' ')\r\n // this.emit('update:firstName', firstName)\r\n // this.emit('update:lastName', lastName)\r\n}" // eslint-disable-line
404375
405376
return {
377+
INIT,
378+
GETTER,
379+
SETTER,
406380
state,
407381
VAR_TYPES,
408382
variableEditor,
@@ -419,7 +393,8 @@ export default {
419393
editorDidMount,
420394
validate,
421395
getFormData,
422-
insertContent
396+
insertContent,
397+
cancel
423398
}
424399
}
425400
}

0 commit comments

Comments
 (0)