Skip to content

Commit

Permalink
feat: 状态管理代码编辑UI优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@gene9831
gene9831 committed Mar 4, 2024
1 parent bf2bc18 commit ad9f74c
Show file tree
Hide file tree
Showing 6 changed files with 204 additions and 348 deletions.
61 changes: 36 additions & 25 deletions packages/common/component/MonacoEditor.vue
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
<template>
<div>
<div :class="['toolbar', { _full: fullscreen }]">
<div :class="['editor-container', { 'editor-container-full': fullscreen }]">
<div class="toolbar">
<div class="toolbar-start">
<slot name="toolbarStart"></slot>
</div>
<div class="buttons">
<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="fullscreen = true"></public-icon>
<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="fullscreen = false"></public-icon>
<public-icon name="cancel-full-screen" @click="switchFullScreen(false)"></public-icon>
</tiny-tooltip>
</span>
</div>
</div>
<monaco-editor
ref="editor"
:class="fullscreen ? 'fullscreen' : 'iniline'"
class="editor"
:value="value"
:options="editorOptions"
language="javascript"
Expand Down Expand Up @@ -110,12 +113,17 @@ export default {
editor.value.getEditor().dispose()
})
const switchFullScreen = (value) => {
fullscreen.value = value
}
return {
editorOptions,
editor,
getEditor,
getEditorValue,
fullscreen,
switchFullScreen,
getValue,
formatCode
}
Expand All @@ -124,38 +132,41 @@ export default {
</script>
<style lang="less" scoped>
.editor-container {
display: flex;
flex-direction: column;
padding: 0;
}
.editor-container-full {
position: fixed;
top: var(--base-top-panel-height);
bottom: 0;
left: calc(var(--base-nav-panel-width)+var(--base-left-panel-width));
right: var(--base-left-panel-width);
z-index: 10;
background-color: var(--ti-lowcode-common-component-bg);
height: auto !important;
}
.toolbar {
display: flex;
margin-bottom: 4px;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
z-index: 3000 !important;
.buttons {
color: var(--ti-lowcode-component-svg-button-color);
cursor: pointer;
&:hover {
color: var(--ti-lowcode-component-svg-button-hover-color);
}
}
&._full {
position: fixed;
top: var(--base-top-panel-height);
z-index: 1;
padding-right: 15px;
right: var(--base-left-panel-width);
}
}
.iniline {
height: 100%;
width: 100%;
}
.fullscreen {
position: fixed;
top: var(--base-top-panel-height);
bottom: 0;
left: calc(var(--base-nav-panel-width) + 1px);
right: var(--base-left-panel-width);
z-index: 2500;
.editor {
flex: 1;
overflow: hidden;
border: 1px solid var(--ti-lowcode-plugin-panel-border-right-color);
}
.public-icon {
font-size: 18px;
Expand Down
123 changes: 53 additions & 70 deletions packages/plugins/data/src/CreateStore.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,7 @@
<tiny-form-item label="stores" prop="name">
<tiny-input v-model="state.storeData.name" placeholder="只能包含数字字母及下划线"></tiny-input>
</tiny-form-item>
<tiny-form-item prop="state" class="monaco-form-item">
<template #label>
<div class="label-left-wrap">
<span>state</span>
<tiny-popover placement="bottom-start" effect="dark" trigger="hover" popper-class="state-data-example-tips">
<div class="tips-content">
<div class="create-content-demo">
<ul>
<li>state为对象(一个对象内可包含多个属性): {"name": "xxx"}</li>
<li>actions/getters为函数(可写多个函数): function count(){}</li>
</ul>
</div>
</div>
<template #reference>
<div class="create-content-description">查看示例</div>
</template>
</tiny-popover>
</div>
</template>
<tiny-form-item prop="state">
<monaco-editor
ref="variableEditor"
class="store-editor"
Expand All @@ -45,19 +27,42 @@
}"
@editorDidMount="editorDidMount"
@change="editorDidMount"
/>
>
<template #toolbarStart>
<div class="label-left-wrap">
<span>state</span>
<tiny-popover placement="bottom-start" effect="dark" trigger="hover" popper-class="state-data-example-tips">
<div class="tips-content">
<div class="create-content-demo">
<ul>
<li>state为对象(一个对象内可包含多个属性): {"name": "xxx"}</li>
<li>actions/getters为函数(可写多个函数): function count(){}</li>
</ul>
</div>
</div>
<template #reference>
<div class="create-content-description">查看示例</div>
</template>
</tiny-popover>
</div>
</template>
</monaco-editor>
</tiny-form-item>
<tiny-form-item label="getters" prop="getters" class="store-form-item monaco-form-item">
<monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters" />
<tiny-form-item prop="getters">
<monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters">
<template #toolbarStart><label>getters</label></template>
</monaco-editor>
</tiny-form-item>
<tiny-form-item label="actions" prop="actions" class="store-form-item monaco-form-item">
<monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions" />
<tiny-form-item prop="actions">
<monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions">
<template #toolbarStart><label>actions</label></template>
</monaco-editor>
</tiny-form-item>
</tiny-form>
</template>

<script>
import { getCurrentInstance, reactive, ref, computed } from 'vue'
import { getCurrentInstance, reactive, ref, computed, watch } from 'vue'
import { Form, FormItem, Input, Popover } from '@opentiny/vue'
import { MonacoEditor } from '@opentiny/tiny-engine-common'
import { theme } from '@opentiny/tiny-engine-controller/adapter'
Expand Down Expand Up @@ -112,6 +117,13 @@ export default {
renderLineHighlightOnlyWhenFocus: true
}
watch(
() => state.storeData.name,
() => {
variableEditor.value.switchFullScreen(false)
}
)
const validateName = (rule, name, callback) => {
let errorMessage = ''
let isSameState = Object.keys(props.dataSource).includes(name)
Expand Down Expand Up @@ -221,67 +233,38 @@ export default {
<style lang="less" scoped>
.store-form {
padding: 12px;
height: calc(100%-45px);
overflow-y: auto;
.error-tip {
color: var(--ti-lowcode-error-tip-color);
margin-top: 4px;
font-size: 12px;
}
.textarea-warp {
display: flex;
justify-content: flex-start;
align-items: center;
.tiny-form-item:not(:last-child) {
margin-bottom: 12px;
}
:deep(.tiny-form-item__label) {
color: var(--ti-lowcode-toolbar-icon-color);
}
&-item {
margin-top: 30px;
}
.tiny-form-item {
:deep(.tiny-form-item__label) {
color: var(--ti-lowcode-toolbar-icon-color);
.label-left-wrap {
display: flex;
}
}
&.monaco-form-item {
:deep(.tiny-form-item__label) {
position: relative;
z-index: 1;
margin-bottom: -36px;
}
&.is-required {
:deep(.tiny-form-item__label) {
.label-left-wrap {
margin-left: 10px;
}
&::before {
position: absolute;
}
}
}
}
.create-content-description {
color: var(--ti-lowcode-description-color);
margin-left: 8px;
cursor: pointer;
}
.label-left-wrap {
color: var(--ti-lowcode-toolbar-icon-color);
display: flex;
}
}
.create-content-description {
color: var(--ti-lowcode-description-color);
margin-left: 8px;
cursor: pointer;
}
.create-content-demo {
padding: 12px;
font-size: 12px;
font-size: 14px;
li + li {
margin-top: 8px;
}
}
.store-editor {
height: 200px;
height: 270px;
}
</style>
Loading

0 comments on commit ad9f74c

Please sign in to comment.