forked from opentiny/tiny-engine
Gene
GitHub
parent
6a59dacfd6
commit
e9a67b9de0
|
|
@ -1,6 +1,9 @@
|
|||
<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">
|
||||
|
|
@ -8,17 +11,17 @@
|
|||
</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"
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -124,41 +132,45 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.toolbar {
|
||||
.editor-container {
|
||||
display: flex;
|
||||
margin-bottom: 4px;
|
||||
justify-content: flex-end;
|
||||
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);
|
||||
}
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
}
|
||||
.iniline {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.fullscreen {
|
||||
|
||||
.editor-container-full {
|
||||
position: fixed;
|
||||
top: var(--base-top-panel-height);
|
||||
bottom: 0;
|
||||
left: calc(var(--base-nav-panel-width) + 1px);
|
||||
left: calc(var(--base-nav-panel-width) + var(--base-left-panel-width));
|
||||
right: var(--base-left-panel-width);
|
||||
z-index: 2500;
|
||||
z-index: 10;
|
||||
padding: 10px 16px 16px 16px;
|
||||
background-color: var(--ti-lowcode-common-component-bg);
|
||||
height: auto !important;
|
||||
}
|
||||
.public-icon {
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
margin-bottom: 4px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
color: var(--ti-lowcode-component-svg-button-color);
|
||||
cursor: pointer;
|
||||
:hover {
|
||||
color: var(--ti-lowcode-component-svg-button-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--ti-lowcode-state-management-monaco-editor-border-color);
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>国际化</title>
|
||||
<g id="国际化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组" transform="translate(2.000000, 2.000000)" stroke="#191919">
|
||||
<circle id="椭圆形" cx="6" cy="6" r="6"></circle>
|
||||
<path d="M1.61538462,6.69230769 C3.61538462,5.76923077 5.61538462,5.30769231 7.61538462,5.30769231 C9.61538462,5.30769231 11.6153846,5.76923077 13.6153846,6.69230769" id="直线" transform="translate(7.615385, 6.000000) rotate(90.000000) translate(-7.615385, -6.000000) "></path>
|
||||
<path d="M-1.61538462,6.69230769 C0.384615385,5.76923077 2.38461538,5.30769231 4.38461538,5.30769231 C6.38461538,5.30769231 8.38461538,5.76923077 10.3846154,6.69230769" id="直线备份" transform="translate(4.384615, 6.000000) scale(-1, 1) rotate(90.000000) translate(-4.384615, -6.000000) "></path>
|
||||
<path d="M0.461538462,4.61538462 C2.30769231,4.30769231 4.15384615,4.15384615 6,4.15384615 C7.84615385,4.15384615 9.69230769,4.30769231 11.5384615,4.61538462" id="直线-13" stroke-linecap="round" transform="translate(6.000000, 4.384615) scale(1, -1) translate(-6.000000, -4.384615) "></path>
|
||||
<path d="M0.461538462,7.84615385 C2.30769231,7.53846154 4.15384615,7.38461538 6,7.38461538 C7.84615385,7.38461538 9.69230769,7.53846154 11.5384615,7.84615385" id="直线-13备份" stroke-linecap="round"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -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"
|
||||
|
|
@ -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'
|
||||
|
|
@ -112,6 +117,15 @@ export default {
|
|||
renderLineHighlightOnlyWhenFocus: true
|
||||
}
|
||||
|
||||
watch(
|
||||
() => state.storeData.name,
|
||||
() => {
|
||||
variableEditor.value?.switchFullScreen(false)
|
||||
gettersEditor.value?.switchFullScreen(false)
|
||||
actionsEditor.value?.switchFullScreen(false)
|
||||
}
|
||||
)
|
||||
|
||||
const validateName = (rule, name, callback) => {
|
||||
let errorMessage = ''
|
||||
let isSameState = Object.keys(props.dataSource).includes(name)
|
||||
|
|
@ -221,67 +235,39 @@ 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 {
|
||||
font-size: 12px;
|
||||
color: var(--ti-lowcode-common-primary-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>
|
||||
|
|
|
|||
|
|
@ -16,99 +16,93 @@
|
|||
></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="初始值类型" class="var-type-item">
|
||||
<tiny-button-group
|
||||
class="variable-type"
|
||||
:data="VAR_TYPES"
|
||||
size="mini"
|
||||
v-model="state.variableType"
|
||||
@change="state.variableType = $event"
|
||||
></tiny-button-group>
|
||||
<tiny-radio-group v-model="state.variableType" :options="VAR_TYPES"></tiny-radio-group>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item class="monaco-form-item init-value-item">
|
||||
<template #label>
|
||||
<div class="label-left-wrap">
|
||||
<div>初始值</div>
|
||||
<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面板定义的函数
|
||||
<tiny-form-item>
|
||||
<monaco-editor
|
||||
ref="variableEditor"
|
||||
class="variable-editor"
|
||||
:value="editorCode"
|
||||
:showFormatBtn="true"
|
||||
:options="state.editorOptions"
|
||||
@editorDidMount="editorDidMount"
|
||||
>
|
||||
<template #toolbarStart>
|
||||
<div class="label-left-wrap">
|
||||
<div>初始值</div>
|
||||
<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>
|
||||
</div>
|
||||
<template #reference>
|
||||
<div class="create-content-description">查看示例</div>
|
||||
</template>
|
||||
</tiny-popover>
|
||||
</div>
|
||||
</template>
|
||||
<div class="create-content">
|
||||
<monaco-editor
|
||||
ref="variableEditor"
|
||||
class="create-content-editor"
|
||||
:value="editorCode"
|
||||
:showFormatBtn="true"
|
||||
:options="state.editorOptions"
|
||||
@editorDidMount="editorDidMount"
|
||||
>
|
||||
<template #buttons>
|
||||
<editor-i18n-tool ref="i18nToolRef" @confirm="insertContent"></editor-i18n-tool>
|
||||
</template>
|
||||
</monaco-editor>
|
||||
</div>
|
||||
<template #reference>
|
||||
<div class="create-content-description">查看示例</div>
|
||||
</template>
|
||||
</tiny-popover>
|
||||
</div>
|
||||
</template>
|
||||
<template #buttons>
|
||||
<editor-i18n-tool ref="i18nToolRef" @confirm="insertContent"></editor-i18n-tool>
|
||||
</template>
|
||||
</monaco-editor>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item v-if="state.hasAccessor" class="store-form-item monaco-form-item">
|
||||
<template #label>
|
||||
<div class="label-left-wrap">
|
||||
<div>getter</div>
|
||||
<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>
|
||||
<tiny-form-item v-if="state.hasAccessor">
|
||||
<monaco-editor ref="getterEditor" class="variable-editor" :options="options" :value="state.getterEditorValue">
|
||||
<template #toolbarStart>
|
||||
<div class="label-left-wrap">
|
||||
<div>getter</div>
|
||||
<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>
|
||||
</div>
|
||||
<template #reference>
|
||||
<div class="create-content-description">查看示例</div>
|
||||
</template>
|
||||
</tiny-popover>
|
||||
</div>
|
||||
</template>
|
||||
<monaco-editor ref="getterEditor" class="variable-editor" :options="options" :value="state.getterEditorValue" />
|
||||
<template #reference>
|
||||
<div class="create-content-description">查看示例</div>
|
||||
</template>
|
||||
</tiny-popover>
|
||||
</div>
|
||||
</template>
|
||||
</monaco-editor>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item v-if="state.hasAccessor" class="store-form-item monaco-form-item">
|
||||
<template #label>
|
||||
<div class="label-left-wrap">
|
||||
<div>setter</div>
|
||||
<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>
|
||||
<tiny-form-item v-if="state.hasAccessor">
|
||||
<monaco-editor ref="setterEditor" class="variable-editor" :options="options" :value="state.setterEditorValue">
|
||||
<template #toolbarStart>
|
||||
<div class="label-left-wrap">
|
||||
<div>setter</div>
|
||||
<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>
|
||||
</div>
|
||||
<template #reference>
|
||||
<div class="create-content-description">查看示例</div>
|
||||
</template>
|
||||
</tiny-popover>
|
||||
</div>
|
||||
</template>
|
||||
<monaco-editor ref="setterEditor" class="variable-editor" :options="options" :value="state.setterEditorValue" />
|
||||
<template #reference>
|
||||
<div class="create-content-description">查看示例</div>
|
||||
</template>
|
||||
</tiny-popover>
|
||||
</div>
|
||||
</template>
|
||||
</monaco-editor>
|
||||
</tiny-form-item>
|
||||
<div class="show-advanced" @click="state.hasAccessor = !state.hasAccessor">
|
||||
{{ (state.hasAccessor ? '移除' : '添加') + '高级属性' }}
|
||||
|
|
@ -118,7 +112,7 @@
|
|||
|
||||
<script>
|
||||
import { reactive, ref, computed, watch, onBeforeUnmount } from 'vue'
|
||||
import { Popover, Form, FormItem, Input, ButtonGroup } from '@opentiny/vue'
|
||||
import { Popover, Form, FormItem, Input, RadioGroup } from '@opentiny/vue'
|
||||
import { MonacoEditor } from '@opentiny/tiny-engine-common'
|
||||
import { verifyJsVarName } from '@opentiny/tiny-engine-controller/js/verification'
|
||||
import { initCompletion } from '@opentiny/tiny-engine-controller/js/completion'
|
||||
|
|
@ -133,7 +127,7 @@ export default {
|
|||
TinyFormItem: FormItem,
|
||||
TinyInput: Input,
|
||||
TinyPopover: Popover,
|
||||
TinyButtonGroup: ButtonGroup,
|
||||
TinyRadioGroup: RadioGroup,
|
||||
EditorI18nTool
|
||||
},
|
||||
props: {
|
||||
|
|
@ -177,8 +171,8 @@ export default {
|
|||
JS: 'javascript'
|
||||
}
|
||||
const VAR_TYPES = [
|
||||
{ text: 'JSON类型', value: LANG_TYPES.JSON },
|
||||
{ text: 'JS表达式类型', value: LANG_TYPES.JS }
|
||||
{ text: 'JSON类型', label: LANG_TYPES.JSON },
|
||||
{ text: 'JS表达式类型', label: LANG_TYPES.JS }
|
||||
]
|
||||
const getVarType = () => (props.createData.variable?.type === 'JSExpression' ? LANG_TYPES.JS : LANG_TYPES.JSON)
|
||||
|
||||
|
|
@ -213,7 +207,6 @@ export default {
|
|||
() => props.createData.variable,
|
||||
() => {
|
||||
state.errorMessage = ''
|
||||
state.createData = getPropsCreateData()
|
||||
state.hasAccessor = isAccessorData(props.createData?.variable)
|
||||
state.getterEditorValue = props.createData.variable?.accessor?.getter?.value || DEFAULT_GETTER
|
||||
state.setterEditorValue = props.createData.variable?.accessor?.setter?.value || DEFAULT_SETTER
|
||||
|
|
@ -224,6 +217,22 @@ export default {
|
|||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => [props.createData.name, props.createData.variable],
|
||||
() => {
|
||||
state.createData = getPropsCreateData()
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.createData.name,
|
||||
() => {
|
||||
variableEditor.value?.switchFullScreen(false)
|
||||
getterEditor.value?.switchFullScreen(false)
|
||||
setterEditor.value?.switchFullScreen(false)
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => state.variableType,
|
||||
() => {
|
||||
|
|
@ -394,54 +403,21 @@ export default {
|
|||
<style lang="less" scoped>
|
||||
.create-form {
|
||||
padding: 12px;
|
||||
height: calc(100% - 50px);
|
||||
height: calc(100% - 45px);
|
||||
overflow-y: auto;
|
||||
|
||||
.error-tip {
|
||||
color: var(--ti-lowcode-error-tip-color);
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tiny-form-item:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.init-value-item {
|
||||
margin-top: -22px;
|
||||
}
|
||||
|
||||
.tiny-form-item {
|
||||
&.var-type-item {
|
||||
:deep(.tiny-button-group ul.tiny-group-item li.active button:not(.disabled)) {
|
||||
background: var(--ti-lowcode-data-radio-group-active-bg);
|
||||
}
|
||||
:deep(.tiny-button-group ul.tiny-group-item li button:not(.disabled)) {
|
||||
background: var(--ti-lowcode-data-radio-group-bg);
|
||||
border: 0px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
&.monaco-form-item {
|
||||
margin-bottom: 24px;
|
||||
:deep(.tiny-form-item__label) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -58px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.tiny-form-item__label) {
|
||||
color: var(--ti-lowcode-toolbar-icon-color);
|
||||
.label-left-wrap {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.create-content {
|
||||
color: var(--ti-lowcode-create-color);
|
||||
.label-left-wrap {
|
||||
color: var(--ti-lowcode-toolbar-icon-color);
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
|
|
@ -478,32 +454,18 @@ export default {
|
|||
}
|
||||
|
||||
.create-content-description {
|
||||
color: var(--ti-lowcode-description-color);
|
||||
font-size: 12px;
|
||||
color: var(--ti-lowcode-common-primary-color);
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.create-content-editor {
|
||||
height: 230px;
|
||||
.monaco-editor {
|
||||
height: 200px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.variable-editor {
|
||||
height: 230px;
|
||||
:deep(.toolbar) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.monaco-editor {
|
||||
height: 200px !important;
|
||||
}
|
||||
}
|
||||
:deep(.tiny-form-item__label) {
|
||||
height: unset;
|
||||
height: 270px;
|
||||
}
|
||||
|
||||
.show-advanced {
|
||||
font-size: 12px;
|
||||
margin-top: 40px;
|
||||
color: var(--ti-lowcode-data-advanced-text-color);
|
||||
&:hover {
|
||||
color: var(--ti-lowcode-data-advanced-text-hover-color);
|
||||
|
|
@ -516,11 +478,19 @@ export default {
|
|||
.tiny-popover.tiny-popper.state-data-example-tips {
|
||||
background-color: var(--ti-lowcode-data-example-bg-color);
|
||||
color: var(--ti-lowcode-data-example-color);
|
||||
.popper__arrow {
|
||||
|
||||
&[x-placement^='bottom'] .popper__arrow {
|
||||
&,
|
||||
&::after {
|
||||
border-bottom-color: var(--ti-lowcode-data-example-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^='top'] .popper__arrow {
|
||||
&,
|
||||
&::after {
|
||||
border-top-color: var(--ti-lowcode-data-example-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="data-source-list">
|
||||
<ul>
|
||||
<li v-for="key in filteredKey" :key="key" class="data-source-list-item">
|
||||
<li v-for="key in filteredKey" :key="key" :class="['data-source-list-item', { selected: key === selectedKey }]">
|
||||
<div class="item-head">
|
||||
<div class="item-head-left">
|
||||
<span class="protocal"> {{ stateScope === STATE.CURRENT_STATE ? 'state.' : 'stores.' }}</span>
|
||||
|
|
@ -45,6 +45,9 @@ export default {
|
|||
},
|
||||
stateScope: {
|
||||
type: String
|
||||
},
|
||||
selectedKey: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
emits: ['openPanel', 'remove', 'removeStore'],
|
||||
|
|
@ -118,6 +121,7 @@ export default {
|
|||
font-size: 12px;
|
||||
}
|
||||
.data-source-list-item {
|
||||
&.selected,
|
||||
&:hover {
|
||||
background: var(--ti-lowcode-common-component-hover-bg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,107 +0,0 @@
|
|||
<template>
|
||||
<tiny-popover
|
||||
v-model="state.showPopover"
|
||||
trigger="manual"
|
||||
width="600"
|
||||
height="330"
|
||||
:visible-arrow="false"
|
||||
popper-class="lowcode"
|
||||
@hide="onClosePopover"
|
||||
>
|
||||
<div class="popover-content">
|
||||
<icon-close class="icon-close" @click="state.showPopover = false"></icon-close>
|
||||
<monaco-editor
|
||||
ref="functionEditor"
|
||||
:showFullScreenBtn="false"
|
||||
class="function-editor"
|
||||
:value="state.editorValue"
|
||||
:options="{
|
||||
language: 'javascript',
|
||||
lineNumbers: true
|
||||
}"
|
||||
></monaco-editor>
|
||||
<div class="editor-buttons">
|
||||
<tiny-button @click="insertFunction">插入JS方法</tiny-button>
|
||||
</div>
|
||||
</div>
|
||||
<template #reference>
|
||||
<tiny-tooltip content="插入JS函数" placement="top">
|
||||
<icon-js class="button-icon" @click="state.showPopover = true"></icon-js>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
</tiny-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { Button, Popover, Tooltip } from '@opentiny/vue'
|
||||
import { iconClose, iconJs } from '@opentiny/vue-icon'
|
||||
import { MonacoEditor } from '@opentiny/tiny-engine-common'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPopover: Popover,
|
||||
TinyButton: Button,
|
||||
TinyTooltip: Tooltip,
|
||||
IconClose: iconClose(),
|
||||
IconJs: iconJs(),
|
||||
MonacoEditor
|
||||
},
|
||||
emits: ['confirm'],
|
||||
setup(props, { emit }) {
|
||||
const functionEditor = ref(null)
|
||||
|
||||
const state = reactive({
|
||||
showPopover: false,
|
||||
editorValue: 'function fnName() {\r\n \r\n}'
|
||||
})
|
||||
|
||||
const onClosePopover = () => {}
|
||||
|
||||
const insertFunction = () => {
|
||||
const fnCode = functionEditor.value?.getEditor?.().getValue() || ''
|
||||
emit(
|
||||
'confirm',
|
||||
`{
|
||||
"type": "JSExpression",
|
||||
"value": ${JSON.stringify(fnCode)}
|
||||
}`
|
||||
)
|
||||
state.showPopover = false
|
||||
}
|
||||
|
||||
return {
|
||||
functionEditor,
|
||||
state,
|
||||
onClosePopover,
|
||||
insertFunction
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.popover-content {
|
||||
text-align: right;
|
||||
.icon-close {
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.function-editor {
|
||||
height: 250px;
|
||||
margin-top: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
.editor-buttons {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
.button-icon {
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<template #reference>
|
||||
<tiny-tooltip content="插入国际化词条" placement="top">
|
||||
<icon-language class="button-icon" @click="openPopover"></icon-language>
|
||||
<svg-icon name="internationalization" @click="openPopover"></svg-icon>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
</tiny-popover>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
<script>
|
||||
import { reactive, ref, computed } from 'vue'
|
||||
import { Button, Popover, Tooltip } from '@opentiny/vue'
|
||||
import { iconLanguage, iconClose } from '@opentiny/vue-icon'
|
||||
import { iconClose } from '@opentiny/vue-icon'
|
||||
import { BindI18n } from '@opentiny/tiny-engine-common'
|
||||
import { useTranslate } from '@opentiny/tiny-engine-controller'
|
||||
|
||||
|
|
@ -47,7 +47,6 @@ export default {
|
|||
TinyButton: Button,
|
||||
TinyTooltip: Tooltip,
|
||||
TinyPopover: Popover,
|
||||
IconLanguage: iconLanguage(),
|
||||
IconClose: iconClose(),
|
||||
BindI18n
|
||||
},
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
:modelValue="Object.keys(state.dataSource)"
|
||||
:stateScope="activeName"
|
||||
:query="query"
|
||||
:selectedKey="selectedKey"
|
||||
@openPanel="openPanel"
|
||||
@remove="remove"
|
||||
@removeStore="removeStore"
|
||||
|
|
@ -62,7 +63,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, ref, computed, onActivated } from 'vue'
|
||||
import { reactive, ref, computed, onActivated, watch } from 'vue'
|
||||
import { Button, Search, Tabs, TabItem } from '@opentiny/vue'
|
||||
import {
|
||||
useCanvas,
|
||||
|
|
@ -118,6 +119,11 @@ export default {
|
|||
variable: ''
|
||||
}
|
||||
})
|
||||
const selectedKey = ref(null)
|
||||
|
||||
watch(activeName, () => {
|
||||
selectedKey.value = null
|
||||
})
|
||||
|
||||
const openPanel = (flagValue, key = '') => {
|
||||
updateKey.value = key
|
||||
|
|
@ -139,11 +145,13 @@ export default {
|
|||
}
|
||||
|
||||
isPanelShow.value = true
|
||||
selectedKey.value = flagValue === OPTION_TYPE.UPDATE ? key : null
|
||||
}
|
||||
|
||||
const cancel = () => {
|
||||
errorMessage.value = ''
|
||||
isPanelShow.value = false
|
||||
selectedKey.value = null
|
||||
}
|
||||
|
||||
const add = (name, variable) => {
|
||||
|
|
@ -345,6 +353,7 @@ export default {
|
|||
flag,
|
||||
updateKey,
|
||||
activeName,
|
||||
selectedKey,
|
||||
tabClick,
|
||||
STATE,
|
||||
removeStore,
|
||||
|
|
@ -410,7 +419,7 @@ export default {
|
|||
border-right: 1px solid var(--ti-lowcode-toolbar-border-color);
|
||||
background: var(--ti-lowcode-common-component-bg);
|
||||
position: absolute;
|
||||
left: calc(var(--base-left-panel-width) - 6px);
|
||||
left: var(--base-left-panel-width);
|
||||
top: 0;
|
||||
|
||||
.header {
|
||||
|
|
|
|||
|
|
@ -407,6 +407,8 @@
|
|||
--ti-lowcode-state-management-screen-icon-color: #fff;
|
||||
// 状态管理搜索无结果显示颜色
|
||||
--ti-lowcode-state-management-query-color: #fff;
|
||||
// 状态管理代码编辑器边框颜色
|
||||
--ti-lowcode-state-management-monaco-editor-border-color: transparent;
|
||||
|
||||
// Popover提示框
|
||||
--ti-lowcode-popover-color: var(--ti-lowcode-breadcrumb-color);
|
||||
|
|
|
|||
|
|
@ -375,6 +375,8 @@
|
|||
--ti-lowcode-state-management-screen-icon-color: #404040;
|
||||
// 状态管理搜索无结果显示颜色
|
||||
--ti-lowcode-state-management-query-color: #404040;
|
||||
// 状态管理代码编辑器边框颜色
|
||||
--ti-lowcode-state-management-monaco-editor-border-color: var(--ti-lowcode-base-gray-40);
|
||||
|
||||
// Popover提示框
|
||||
--ti-lowcode-popover-color: var(--ti-lowcode-base-text-color);
|
||||
|
|
|
|||
Loading…
Reference in New Issue