Skip to content

Commit

Permalink
feat: Editor full screen with title, close button, and examples (#866)
Browse files Browse the repository at this point in the history 
* feat: 状态管理插件的编辑器全屏加上标题、关闭按钮和示例

* fix: 抽取编辑器全屏头部组件

* fix: 抽取变量
  • Loading branch information
@lichunn
lichunn authored Oct 25, 2024
1 parent add50e9 commit fb00920
Show file tree
Hide file tree
Showing 6 changed files with 188 additions and 123 deletions.
57 changes: 33 additions & 24 deletions packages/common/component/MonacoEditor.vue
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,36 @@
<template>
<div :class="['editor-container', { 'editor-container-full': fullscreen }]">
<div class="toolbar">
<div class="toolbar-start">
<slot name="toolbarStart"></slot>
</div>
<div :class="['buttons', { fullscreen: fullscreen }]">
<slot name="buttons"></slot>
<tiny-tooltip v-if="showFormatBtn && options.language === 'json'" content="格式化" placement="top">
<public-icon name="json" @click="formatCode"></public-icon>
</tiny-tooltip>
<span v-if="showFullScreenBtn">
<tiny-tooltip v-if="!fullscreen" content="全屏" placement="top">
<public-icon name="full-screen" @click="switchFullScreen(true)"></public-icon>
</tiny-tooltip>
<tiny-tooltip v-else content="退出全屏" placement="top">
<public-icon name="cancel-full-screen" @click="switchFullScreen(false)"></public-icon>
<slot v-if="fullscreen" name="fullscreenHead"></slot>
<div class="editor-container-content">
<div class="toolbar">
<div class="toolbar-start">
<slot name="toolbarStart"></slot>
</div>
<div :class="['buttons', { fullscreen: fullscreen }]">
<slot name="buttons"></slot>
<tiny-tooltip v-if="showFormatBtn && options.language === 'json'" content="格式化" placement="top">
<public-icon name="json" @click="formatCode"></public-icon>
</tiny-tooltip>
</span>
<span v-if="showFullScreenBtn">
<tiny-tooltip v-if="!fullscreen" content="全屏" placement="top">
<public-icon name="full-screen" @click="switchFullScreen(true)"></public-icon>
</tiny-tooltip>
<tiny-tooltip v-else content="退出全屏" placement="top">
<public-icon name="cancel-full-screen" @click="switchFullScreen(false)"></public-icon>
</tiny-tooltip>
</span>
</div>
</div>
<monaco-editor
ref="editor"
class="editor"
:value="value"
:options="editorOptions"
language="javascript"
@editorDidMount="$emit('editorDidMount', $event)"
></monaco-editor>
</div>
<monaco-editor
ref="editor"
class="editor"
:value="value"
:options="editorOptions"
language="javascript"
@editorDidMount="$emit('editorDidMount', $event)"
></monaco-editor>
<slot v-if="fullscreen" name="fullscreenFooter"></slot>
</div>
</template>

Expand Down Expand Up @@ -164,6 +168,11 @@ export default {
}
}
.editor-container-content {
flex: 1;
overflow: hidden;
}
.editor {
flex: 1;
overflow: hidden;
Expand Down
70 changes: 42 additions & 28 deletions packages/plugins/state/src/CreateStore.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
<tiny-input v-model="state.storeData.name" placeholder="只能包含数字字母及下划线"></tiny-input>
</tiny-form-item>
<tiny-collapse v-model="state.activeName">
<tiny-collapse-item title="state" name="state">
<tiny-form-item prop="state">
<tiny-collapse-item :title="STATE" :name="STATE">
<tiny-form-item :prop="STATE">
<monaco-editor
ref="variableEditor"
class="store-editor"
Expand All @@ -32,27 +32,34 @@
<template #toolbarStart>
<div class="label-left-wrap"></div>
</template>
<template #fullscreenHead>
<state-fullscreen-head :title="STATE" @close="cancel"></state-fullscreen-head>
</template>
<template #fullscreenFooter>
<div class="fullscreen-footer-content">
<state-tips></state-tips>
</div>
</template>
</monaco-editor>
<div class="tips">
<div>字符串:"string"</div>
<div>数字:123</div>
<div>布尔值:true/false</div>
<div>对象:{"name":"xxx"}</div>
<div>数组:["1","2"]</div>
<div>空值:null</div>
<div>"color":red</div>
<div>"background":"blue"</div>
</div>
<state-tips></state-tips>
</tiny-form-item>
</tiny-collapse-item>
<tiny-collapse-item title="getters" name="getters">
<tiny-form-item prop="getters">
<monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters"> </monaco-editor>
<tiny-collapse-item :title="GETTERS" :name="GETTERS">
<tiny-form-item :prop="GETTERS">
<monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters">
<template #fullscreenHead>
<state-fullscreen-head :title="GETTERS" @close="cancel"></state-fullscreen-head>
</template>
</monaco-editor>
</tiny-form-item>
</tiny-collapse-item>
<tiny-collapse-item title="actions" name="actions">
<tiny-form-item prop="actions">
<monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions"> </monaco-editor>
<tiny-collapse-item :title="ACTIONS" :name="ACTIONS">
<tiny-form-item :prop="ACTIONS">
<monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions">
<template #fullscreenHead>
<state-fullscreen-head :title="ACTIONS" @close="cancel"></state-fullscreen-head>
</template>
</monaco-editor>
</tiny-form-item>
</tiny-collapse-item>
</tiny-collapse>
Expand All @@ -65,10 +72,14 @@ import { Form, FormItem, Input, Collapse as TinyCollapse, CollapseItem as TinyCo
import { MonacoEditor } from '@opentiny/tiny-engine-common'
import { string2Ast, ast2String, insertName } from '@opentiny/tiny-engine-common/js/ast'
import { verifyJsVarName } from '@opentiny/tiny-engine-common/js/verification'
import StateTips from './StateTips.vue'
import StateFullscreenHead from './StateFullscreenHead.vue'
export default {
components: {
MonacoEditor,
StateTips,
StateFullscreenHead,
TinyForm: Form,
TinyFormItem: FormItem,
TinyInput: Input,
Expand All @@ -89,7 +100,11 @@ export default {
type: String
}
},
emits: ['close'],
setup(props, { emit }) {
const STATE = 'state'
const GETTERS = 'getters'
const ACTIONS = 'actions'
const instance = getCurrentInstance()
const isDemoShow = ref(false)
const gettersEditor = ref(null)
Expand Down Expand Up @@ -205,7 +220,14 @@ export default {
return Object.prototype.toString.call(variable) === '[object Object]'
}
const cancel = () => {
emit('close')
}
return {
STATE,
GETTERS,
ACTIONS,
isDemoShow,
state,
getEditor,
Expand All @@ -219,7 +241,8 @@ export default {
actionsEditor,
editorDidMount,
variableEditor,
actions
actions,
cancel
}
}
}
Expand All @@ -229,15 +252,6 @@ export default {
.store-form {
height: calc(100% - 45px);
overflow-y: auto;
.tips {
font-size: 11px;
line-height: 18px;
margin-top: 8px;
border-radius: 4px;
padding: 8px 14px;
background: var(--ti-lowcode-data-source-box-bg);
color: var(--ti-lowcode-datasource-tip-color);
}
:deep(.tiny-collapse-item__wrap) {
padding: 0 12px;
}
Expand Down
117 changes: 46 additions & 71 deletions packages/plugins/state/src/CreateVariable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<tiny-radio-group v-model="state.variableType" :options="VAR_TYPES"></tiny-radio-group>
</tiny-form-item>
<tiny-collapse v-model="state.activeName">
<tiny-collapse-item title="初始值" name="initValue">
<tiny-collapse-item :title="INIT" name="initValue">
<tiny-form-item>
<monaco-editor
ref="variableEditor"
Expand All @@ -29,69 +29,32 @@
:options="state.editorOptions"
@editorDidMount="editorDidMount"
>
<template #toolbarStart>
<div class="label-left-wrap">
<tiny-popover
placement="bottom-start"
effect="dark"
trigger="hover"
popper-class="state-data-example-tips"
>
<div class="tips-content">
<div class="create-content-head">
<div class="create-content-tip">数据写法和JS写法一致</div>
</div>
<div class="create-content-demo">
<ul>
<li>字符串: "string"</li>
<li>数字: 123</li>
<li>布尔值: true/false</li>
<li>对象: {"name": "xxx"}</li>
<li>数组: ["1", "2"]</li>
<li>空值: null</li>
<li>JS表达式: (需要先选择JS表达式类型)</li>
<li class="ml20">示例1： t('i18nkey1')</li>
<li class="ml20">示例2： function fnName() {}</li>
<li class="ml20">示例3： { getValue: () => {} }</li>
</ul>
<div class="create-content-foot">
<div class="create-content-tip">
注意：使用JS表达式定义state变量的时候无法调用state其他变量定义，<br />另由于JS函数定义在变量之后，也无法调用JS面板定义的函数
</div>
</div>
</div>
</div>
</tiny-popover>
</div>
</template>
<template #buttons>
<editor-i18n-tool ref="i18nToolRef" @confirm="insertContent"></editor-i18n-tool>
</template>
<template #fullscreenHead>
<state-fullscreen-head :title="INIT" @close="cancel"></state-fullscreen-head>
</template>
<template #fullscreenFooter>
<div class="fullscreen-footer-content">
<state-tips></state-tips>
</div>
</template>
</monaco-editor>
<div class="tips">
<div>字符串:"string"</div>
<div>数字:123</div>
<div>布尔值:true/false</div>
<div>对象:{"name":"xxx"}</div>
<div>数组:["1","2"]</div>
<div>空值:null</div>
<div>"color":red</div>
<div>"background":"blue"</div>
</div>
<state-tips></state-tips>
</tiny-form-item>
</tiny-collapse-item>
<tiny-collapse-item title="getter" name="getter">
<tiny-collapse-item :title="GETTER" :name="GETTER">
<tiny-form-item>
<monaco-editor ref="getterEditor" class="variable-editor" :options="options" :value="state.getterEditorValue">
<template #toolbarStart>
<div class="label-left-wrap">
<tiny-popover placement="bottom-start" trigger="hover" popper-class="state-data-example-tips">
<div class="tips-content">
<div class="create-content-demo">
<pre><code>{{ getterExample }}</code></pre>
</div>
</div>
</tiny-popover>
<template #fullscreenHead>
<state-fullscreen-head :title="GETTER" @close="cancel"></state-fullscreen-head>
</template>
<template #fullscreenFooter>
<div class="fullscreen-footer-content">
<div class="tips">
<pre><code>{{ getterExample }}</code></pre>
</div>
</div>
</template>
</monaco-editor>
Expand All @@ -100,18 +63,17 @@
</div>
</tiny-form-item>
</tiny-collapse-item>
<tiny-collapse-item title="setter" name="setter">
<tiny-collapse-item :title="SETTER" :name="SETTER">
<tiny-form-item>
<monaco-editor ref="setterEditor" class="variable-editor" :options="options" :value="state.setterEditorValue">
<template #toolbarStart>
<div class="label-left-wrap">
<tiny-popover placement="bottom-start" trigger="hover" popper-class="state-data-example-tips">
<div class="tips-content">
<div class="create-content-demo">
<pre><code>{{ setterExample }}</code></pre>
</div>
</div>
</tiny-popover>
<template #fullscreenHead>
<state-fullscreen-head :title="SETTER" @close="cancel"></state-fullscreen-head>
</template>
<template #fullscreenFooter>
<div class="fullscreen-footer-content">
<div class="tips">
<pre><code>{{ setterExample }}</code></pre>
</div>
</div>
</template>
</monaco-editor>
Expand All @@ -127,7 +89,6 @@
<script>
import { reactive, ref, computed, watch, onBeforeUnmount } from 'vue'
import {
Popover,
Form,
FormItem,
Input,
Expand All @@ -141,14 +102,17 @@ import { initCompletion } from '@opentiny/tiny-engine-common/js/completion'
import * as Monaco from 'monaco-editor'
import { validateMonacoEditorData } from './js/common'
import EditorI18nTool from './EditorI18nTool.vue'
import StateTips from './StateTips.vue'
import StateFullscreenHead from './StateFullscreenHead.vue'
export default {
components: {
MonacoEditor,
StateTips,
StateFullscreenHead,
TinyForm: Form,
TinyFormItem: FormItem,
TinyInput: Input,
TinyPopover: Popover,
TinyRadioGroup: RadioGroup,
EditorI18nTool,
TinyCollapse,
Expand All @@ -168,8 +132,11 @@ export default {
type: String
}
},
emits: ['nameInput'],
setup(props) {
emits: ['nameInput', 'close'],
setup(props, { emit }) {
const INIT = '初始值'
const GETTER = 'getter'
const SETTER = 'setter'
const variableEditor = ref(null)
const getterEditor = ref(null)
const setterEditor = ref(null)
Expand Down Expand Up @@ -390,6 +357,10 @@ export default {
monacoEditor.focus()
}
const cancel = () => {
emit('close')
}
const options = {
lineNumbers: true,
language: 'javascript',
Expand All @@ -403,6 +374,9 @@ export default {
"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
return {
INIT,
GETTER,
SETTER,
state,
VAR_TYPES,
variableEditor,
Expand All @@ -419,7 +393,8 @@ export default {
editorDidMount,
validate,
getFormData,
insertContent
insertContent,
cancel
}
}
}
Expand Down
Loading

0 comments on commit fb00920

Please sign in to comment.