Skip to content

Z
zeroing-editor
Commit e8227960 authored by rockyl's avatar rockyl
Browse files
Options

重构 

增加mvvm实现
parent 34bbb913
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1405 additions and 1232 deletions
src/components/PropsEditor.vue
View file @ e8227960
<template> <template>
<el-form class="props-editor" v-if="data&&meta" v-model="data.props" size="mini" :label-width="labelWidth" <el-form class="props-editor" v-if="data&&meta" v-model="data" size="mini" :label-width="labelWidth"
label-position="right" @submit.native.prevent> label-position="right" @submit.native.prevent>
<component v-for="(property, key) in meta.props" <component v-for="(property, key) in meta.props"
:is="getInput(property)"
:container="data.props"
:value="data.props[key]"
:propertyName="key"
:property="property"
:key="key" :key="key"
:is="mode + '-input-wrapper'"
:editable="editable" :editable="editable"
:linkable="linkable" :switchable="switchable"
@input="onInput" :mode="mode"
/> :value="data[key]"
:container="data"
:property="property"
:propertyName="key"
@cmd-prop-change="onCmdPropChanged"
>
<component
:is="getInput(property)"
:container="data"
:value="data[key]"
:propertyName="key"
:property="property"
:editable="editable"
@input="onInput"
/>
</component>
</el-form> </el-form>
</template> </template>
...@@ -19,6 +31,7 @@ ...@@ -19,6 +31,7 @@
import { import {
NumberInput, NumberInput,
StringInput, StringInput,
TextInput,
EnumInput, EnumInput,
BooleanInput, BooleanInput,
ColorInput, ColorInput,
...@@ -27,12 +40,17 @@ ...@@ -27,12 +40,17 @@
MapInput, MapInput,
DynamicInput, DynamicInput,
Vector2Input, Vector2Input,
SourceInput,
} from "./inputs"; } from "./inputs";
import {parseType} from 'props-compute' import {parseType} from 'props-compute'
import LinkableInputWrapper from "./inputs/LinkableInputWrapper";
import CmdInputWrapper from "./inputs/CmdInputWrapper";
import SampleInputWrapper from "./inputs/SampleInputWrapper";
const inputMapping = { const inputMapping = {
number: 'NumberInput', number: 'NumberInput',
string: 'StringInput', string: 'StringInput',
text: 'TextInput',
enum: 'EnumInput', enum: 'EnumInput',
boolean: 'BooleanInput', boolean: 'BooleanInput',
color: 'ColorInput', color: 'ColorInput',
...@@ -42,11 +60,13 @@ ...@@ -42,11 +60,13 @@
map: 'MapInput', map: 'MapInput',
vector2: 'Vector2Input', vector2: 'Vector2Input',
array: 'StringInput', array: 'StringInput',
source: 'SourceInput',
}; };
export default { export default {
name: "PropsEditor", name: "PropsEditor",
components: { components: {
SourceInput,
DynamicInput, DynamicInput,
MapInput, MapInput,
NodeSelectInput, NodeSelectInput,
...@@ -56,10 +76,16 @@ ...@@ -56,10 +76,16 @@
EnumInput, EnumInput,
NumberInput, NumberInput,
StringInput, StringInput,
Vector2Input TextInput,
Vector2Input,
LinkableInputWrapper,
CmdInputWrapper,
SampleInputWrapper,
}, },
data() { data() {
return {} return {
}
}, },
props: { props: {
labelWidth: { labelWidth: {
...@@ -70,10 +96,14 @@ ...@@ -70,10 +96,14 @@
type: Boolean, type: Boolean,
default: true default: true
}, },
linkable: { switchable: {
type: Boolean, type: Boolean,
default: false default: false
}, },
mode: {
type: String,
default: 'sample',
},
data: { data: {
type: Object, type: Object,
}, },
...@@ -81,6 +111,11 @@ ...@@ -81,6 +111,11 @@
type: Object, type: Object,
}, },
}, },
watch: {
data(v){
}
},
methods: { methods: {
getInput(property) { getInput(property) {
let {type} = parseType(property.type); let {type} = parseType(property.type);
...@@ -92,6 +127,10 @@ ...@@ -92,6 +127,10 @@
} else { } else {
this.$set(container, propName, value); this.$set(container, propName, value);
} }
this.$emit('input', value, container, propName, oldValue);
},
onCmdPropChanged(value, container, propName, oldValue){
this.$emit('input', value, container, propName, oldValue);
}, },
} }
} }
......
src/components/customSettings/selector/index.vue deleted 100644 → 0
View file @ 34bbb913
<template>
<el-select v-model="selected" :filterable="filterable" allow-create placeholder="请选择">
<el-option
v-for="item in props"
:style="`${optionStyle}${item.value}`"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
import optionMapper from './optionMapper';
export default {
props: {
/*
* fontFamily： 字体
* fontSize： 字体大小选择列表
* borderStyle： 边框类型
* animeCount： 动效次数
*/
optionType: {
type: String,
default: 'fontSize'
},
optionList: Array, // 若有 optionList 则groupType 不起作用
value: [String, Number, Boolean],
filterable: Boolean
},
data() {
return {
selected: this.value || '',
optionMapper
};
},
computed: {
props() {
return this.optionList || this.optionMapper[this.optionType];
},
optionStyle() {
return this.optionType === 'fontFamily' ? 'font-family: ' : '';
}
},
watch: {
selected(v) {
this.$emit('change', v);
}
}
};
</script>
src/components/customSettings/selector/optionMapper.js deleted 100644 → 0
View file @ 34bbb913
import _ from 'lodash'
const rangeStep = (start, step, stop) =>
_.map(
_.range(0, (1 + (stop - start) / step) >>> 0),
(n) => (start + step * n).toFixed(0),
);
export default {
fontFamily: [
{
label: '默认字体',
value: ''
},
{ label: '微软雅黑', value: 'Microsoft Yahei' },
// { label: '方正黑体简体', value: 'FZHei-B01S' },
// { label: '方正楷体简体', value: 'FZKai-Z03S' },
// { label: '方正书宋简体', value: 'FZShuSong-Z01S' },
// { label: '方正仿宋简体', value: 'FZFangSong-Z02S' },
// { label: '思源极细体', value: 'NotoSansSC-Thin' },
// { label: '思源细体', value: 'NotoSansSC-Light' },
// { label: '思源正常', value: 'NotoSansSC-DemiLight' },
// { label: '思源常规', value: 'NotoSansSC-Regular' },
// { label: '思源中等粗体', value: 'NotoSansSC-Medium' },
// { label: '思源粗体', value: 'NotoSansSC-Bold' },
// { label: '思源特粗', value: 'NotoSansSC-Black' },
{ label: '宋体', value: 'SimSun' },
// { label: '黑体', value: 'SimHei' },
{ label: 'fantasy', value: 'fantasy' },
{ label: 'Cursive', value: 'Cursive' }
],
borderStyle: [
{ label: '实线', value: 'solid' },
{ label: '点线', value: 'dotted' },
{ label: '虚线', value: 'dashed' },
{ label: '双线', value: 'double' }
],
backgroundSize: [
{ label: '全覆盖', value: 'cover' },
{ label: '完全显示图片', value: 'contain' }
],
backgroundRepeat: [
{ label: '显示一次', value: 'no-repeat' },
{ label: '重复', value: 'repeat' },
{ label: '水平方向重复', value: 'repeat-x' },
{ label: '垂直方向重复', value: 'repeat-y' }
],
backgroundPosition: [
{ label: '居中', value: 'center' },
{ label: '左上', value: 'top left' },
{ label: '顶部居中', value: 'top center' },
{ label: '右上', value: 'top right' },
{ label: '靠左', value: 'center left' },
{ label: '靠右', value: 'center right' },
{ label: '左下', value: 'bottom left' },
{ label: '底部居中', value: 'bottom center' },
{ label: '右下', value: 'bottom right' }
],
weekIndex: [
{ label: '周日', value: 0 },
{ label: '周一', value: 1 },
{ label: '周二', value: 2 },
{ label: '周三', value: 3 },
{ label: '周四', value: 4 },
{ label: '周五', value: 5 },
{ label: '周六', value: 6 }
],
fontSize: rangeStep(12, 1, 120).map((v) => ({ value: v, label: v })),
animeCount: rangeStep(1, 1, 10)
.map((v) => ({ value: v, label: v }))
.concat({ label: '无限循环', value: true })
};
src/components/customSettings/slider/index.vue deleted 100644 → 0
View file @ 34bbb913
<template>
<el-slider class="zero-slider" v-model="swvalue" :min="min" :max="max" :step="step" show-input :show-input-controls="false" input-size="mini"></el-slider>
</template>
<style>
/* .zero-slider > .el-slider__input > span {
display: none;
}
.zero-slider > .el-slider__input input {
padding: 0 10px;
} */
/* .zero-slider {
position: relative;
}
.zero-slider > .el-slider__input {
position: absolute;
left: 110%;
top: -250%;
width: 60px;
}
.zero-slider > .el-slider__input input {
padding: 0 10px;
} */
</style>
<script>
export default {
props: {
min: Number,
max: Number,
value: [String, Number, Boolean],
step: Number
},
data() {
return {
swvalue: this.value || 0
};
},
watch: {
swvalue(v) {
this.$emit('change', v);
}
}
};
</script>
src/components/customSettings/switch/index.vue deleted 100644 → 0
View file @ 34bbb913
<template>
<el-switch v-model="swvalue"></el-switch>
</template>
<style>
</style>
<script>
export default {
props: {
value: [String, Number, Boolean],
},
data() {
return {
swvalue: true
};
},
mounted() {
console.log('switch created', this.swvalue);
},
watch: {
swvalue(v) {
console.log('switch value change', this.swvalue);
this.$emit('change', v);
}
}
};
</script>
src/components/inputs/AssetInput.vue
View file @ e8227960
<template> <template>
<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName"> <component :is="mode + '-input-wrapper'" :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName">
<el-select :disabled="!editable" :value="editValue" filterable @input="onInput" :placeholder="property.default" class="el-select"> <el-select :disabled="!editable" :value="editValue" filterable @input="onInput" :placeholder="property.default" class="el-select">
<el-option <el-option
v-for="(item, key) in assets" v-for="(item, key) in assets"
...@@ -9,17 +9,18 @@ ...@@ -9,17 +9,18 @@
<span>{{item.name}}</span> <span>{{item.name}}</span>
</el-option> </el-option>
</el-select> </el-select>
</input-wrapper> </component>
</template> </template>
<script> <script>
import {mapMutations} from 'vuex' import {mapMutations} from 'vuex'
import InputWrapper from "./InputWrapper"; import LinkableInputWrapper from "./LinkableInputWrapper";
import CmdInputWrapper from "./CmdInputWrapper";
export default { export default {
name: "AssetInput", name: "AssetInput",
components: {InputWrapper,}, components: {LinkableInputWrapper, CmdInputWrapper},
props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'], props: ['value', 'container', 'property', 'propertyName', 'editable'],
computed: { computed: {
editValue() { editValue() {
return this.value === undefined ? this.property.default : this.value; return this.value === undefined ? this.property.default : this.value;
......
src/components/inputs/BooleanInput.vue
View file @ e8227960
<template> <template>
<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName"> <el-switch :disabled="!editable" :value="editValue" @input="onInput"
<el-switch :disabled="!editable" :value="editValue" @input="onInput" class="picker"></el-switch>
class="picker"></el-switch>
</input-wrapper>
</template> </template>
<script> <script>
import InputWrapper from "./InputWrapper"; import LinkableInputWrapper from "./LinkableInputWrapper";
import CmdInputWrapper from "./CmdInputWrapper";
export default { export default {
name: "BooleanInput", name: "BooleanInput",
components: {InputWrapper}, components: {LinkableInputWrapper, CmdInputWrapper},
props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'], props: ['value', 'container', 'property', 'propertyName', 'editable'],
data() { data() {
return {} return {}
}, },
......
src/components/inputs/CmdInputWrapper.vue 0 → 100644
View file @ e8227960
<template>
<el-form-item class="input-wrapper" :label="propertyName" content-float="right"
:content-width="contentWidth" :labelOffsetTop="labelOffsetTop">
<el-tooltip placement="left" class="label" slot="label" trigger="hover" :open-delay="500" :enterable="false">
<div slot="content" class="property-name-popover">
<p>{{$t('Alias')}}：{{property.alias}}</p>
<p>{{$t('Name')}}：{{propertyName}}</p>
</div>
<div>
<p class="alias">{{property.alias||propertyName}}</p>
<p class="property-name">{{propertyName}}</p>
</div>
</el-tooltip>
<template v-if="cmdMode">
<el-input class="cmd-input" placeholder="exp" :value="cmdValue" @input="onInputCmdValue"
@change="saveCmdValue"></el-input>
</template>
<template v-else>
<slot></slot>
</template>
<el-link style="padding: 3px;" icon="el-icon-link" :underline="false"
v-if="switchable"
:type="cmdMode ? 'success' : 'default'" :disabled="!editable" @click="onClickLink"/>
</el-form-item>
</template>
<script>
import ElFormItem from "./form-item";
import {cmdOldPrefix, cmdPrefix} from "../../utils";
export default {
name: "CmdInputWrapper",
components: {ElFormItem},
props: {
property: Object,
value: {},
container: {},
propertyName: String,
editable: Boolean,
switchable: Boolean,
contentWidth: {
type: String,
default: '65%',
},
labelOffsetTop: {
type: Number,
default: 0,
},
},
data() {
return {
//cmdValue: this.container[this.cmdPropName] || '',
}
},
watch: {
container(v) {
//this.cmdValue = this.container[this.cmdPropName] || '';
},
},
computed: {
cmdValue() {
return this.container[this.cmdPropName] || '';
},
cmdMode() {
return this.container.hasOwnProperty(this.cmdPropName);
},
cmdPropName() {
return cmdPrefix + this.propertyName;
},
cmdOldPropName() {
return cmdOldPrefix + this.propertyName;
},
},
methods: {
onClickLink() {
if (this.cmdMode) {
this.$set(this.container, this.cmdOldPropName, this.cmdValue);
this.$delete(this.container, this.cmdPropName);
} else {
let cmdValue = this.container[this.cmdOldPropName] || '';
this.$set(this.container, this.cmdPropName, cmdValue);
}
},
onInputCmdValue(v) {
this.container[this.cmdPropName] = v;
},
saveCmdValue(v) {
let oldValue = this.container[this.cmdPropName];
//this.cmdValue = v;
this.$set(this.container, this.cmdPropName, v);
this.$emit('cmd-prop-change', v, this.container, this.cmdPropName, oldValue);
},
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/inputs/ColorInput.vue
View file @ e8227960
<template> <template>
<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName" class="color-input-container"> <el-color-picker
<el-color-picker :disabled="!editable"
:disabled="!editable" class="picker"
class="picker" :value="editValue"
:value="editValue" @input="onInput"
@input="onInput" show-alpha
show-alpha :predefine="predefineColors">
:predefine="predefineColors"> </el-color-picker>
</el-color-picker>
</input-wrapper>
</template> </template>
<script> <script>
import InputWrapper from "./InputWrapper"; import LinkableInputWrapper from "./LinkableInputWrapper";
import CmdInputWrapper from "./CmdInputWrapper";
export default { export default {
name: "ColorInput", name: "ColorInput",
components: {InputWrapper,}, components: {LinkableInputWrapper, CmdInputWrapper},
props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'], props: ['value', 'container', 'property', 'propertyName', 'editable'],
data() { data() {
return { return {
predefineColors: [ predefineColors: [
......
src/components/inputs/DynamicInput.vue
View file @ e8227960
<template> <template>
<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" <dynamic-selector style="flex: 1;" :value="value" @input="onChange"
:propertyName="propertyName"> :editable="editable"
<dynamic-selector style="flex: 1;" :value="value" @input="onChange" :container="container"
:editable="editable" :property="property"
:container="container" :propertyName="propertyName"/>
:property="property"
:propertyName="propertyName"/>
</input-wrapper>
</template> </template>
<script> <script>
import InputWrapper from "./InputWrapper"; import LinkableInputWrapper from "./LinkableInputWrapper";
import CmdInputWrapper from "./CmdInputWrapper";
import DynamicSelector from "./DynamicSelector"; import DynamicSelector from "./DynamicSelector";
export default { export default {
name: "DynamicInput", name: "DynamicInput",
components: {DynamicSelector, InputWrapper,}, components: {DynamicSelector, LinkableInputWrapper, CmdInputWrapper},
props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'], props: ['value', 'container', 'property', 'propertyName', 'editable'],
methods: { methods: {
onChange(v){ onChange(v){
this.$emit('input', v, this.container, this.propertyName, this.value); this.$emit('input', v, this.container, this.propertyName, this.value);
......
src/components/inputs/DynamicSelector.vue
View file @ e8227960
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
export default { export default {
name: "DynamicSelector", name: "DynamicSelector",
components: {}, components: {},
props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'], props: ['value', 'container', 'property', 'propertyName', 'editable'],
data() { data() {
let dataTypes = this.$t('dataTypes'); let dataTypes = this.$t('dataTypes');
return { return {
......
src/components/inputs/EnumInput.vue
View file @ e8227960
<template> <template>
<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName"> <el-select :disabled="!editable" :value="editValue" @input="onInput" :placeholder="property.default" class="el-select">
<el-select :disabled="!editable" :value="editValue" @input="onInput" :placeholder="property.default" class="el-select"> <el-option
<el-option v-for="(item, key) in property.enum"
v-for="(item, key) in property.enum" :key="key"
:key="item" :label="typeof item === 'object' ? item.label : item"
:label="item" :value="typeof item === 'object' ? item.value : item">
:value="item"> <span>{{typeof item === 'object' ? item.label : item}}</span>
<span>{{item}}</span> <span class="enum-input-comment">{{typeof item === 'object' ? item.value : item}}</span>
<span class="comment"></span> </el-option>
</el-option> </el-select>
</el-select>
</input-wrapper>
</template> </template>
<script> <script>
import InputWrapper from "./InputWrapper"; import LinkableInputWrapper from "./LinkableInputWrapper";
import CmdInputWrapper from "./CmdInputWrapper";
export default { export default {
name: "EnumInput", name: "EnumInput",
components: {InputWrapper,}, components: {LinkableInputWrapper, CmdInputWrapper},
props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'], props: ['value', 'container', 'property', 'propertyName', 'editable'],
computed: { computed: {
editValue() { editValue() {
return this.value === undefined ? this.property.default : this.value; return this.value === undefined ? this.property.default : this.value;
......
src/components/inputs/InputWrapper.vue → src/components/inputs/LinkableInputWrapper.vue
View file @ e8227960
<template> <template>
<el-form-item class="input-wrapper" :label="propertyName" content-float="right" <el-form-item class="input-wrapper" :label="propertyName" content-float="right"
:content-width="contentWidth" :labelOffsetTop="labelOffsetTop"> :content-width="contentWidth" :labelOffsetTop="labelOffsetTop">
<el-tooltip placement="top" class="label" slot="label" trigger="hover" :open-delay="500" :enterable="false"> <el-tooltip placement="left" class="label" slot="label" trigger="hover" :open-delay="500" :enterable="false">
<div slot="content" class="property-name-popover"> <div slot="content" class="property-name-popover">
<p>{{$t('Alias')}}：{{property.alias}}</p> <p>{{$t('Alias')}}：{{property.alias}}</p>
<p>{{$t('Name')}}：{{propertyName}}</p> <p>{{$t('Name')}}：{{propertyName}}</p>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<slot></slot> <slot></slot>
</template> </template>
<el-popover <el-popover
v-if="linkable" v-if="switchable"
trigger="click" trigger="click"
:disabled="!editable" :disabled="!editable"
> >
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
import ElFormItem from "./form-item"; import ElFormItem from "./form-item";
export default { export default {
name: "InputWrapper", name: "LinkableInputWrapper",
components: {ElFormItem}, components: {ElFormItem},
props: { props: {
property: Object, property: Object,
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
container: {}, container: {},
propertyName: String, propertyName: String,
editable: Boolean, editable: Boolean,
linkable: Boolean, switchable: Boolean,
contentWidth: { contentWidth: {
type: String, type: String,
default: '65%', default: '65%',
......
src/components/inputs/MapInput.vue
View file @ e8227960
<template> <template>
<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" <div style="display: flex;flex: 1;">
:propertyName="propertyName"> <el-popover
<div style="display: flex;flex: 1;"> popper-class="input-area-popover"
<el-popover class="string-input-container"
popper-class="input-area-popover" trigger="manual"
class="string-input-container" v-model="popoverVisible"
trigger="manual" :disabled="!editable"
v-model="popoverVisible" :width="400"
:disabled="!editable" >
:width="400" <div v-if="editValue" class="mapping-list">
> <el-button class="add-button" icon="el-icon-plus" size="mini" circle @click="addMapItem"/>
<div v-if="editValue" class="mapping-list"> <div class="list">
<el-button class="add-button" icon="el-icon-plus" size="mini" circle @click="addMapItem"/> <div class="item" v-for="(item, index) in editValue" :key="index">
<div class="list"> <el-input v-model="item.key" style="width: unset"/>
<div class="item" v-for="(item, index) in editValue" :key="index"> :
<el-input v-model="item.key" style="width: unset"/> <dynamic-selector style="flex: 1;" v-model="item.value"
: :editable="editable"/>
<dynamic-selector style="flex: 1;" v-model="item.value" <el-button class="delete-button" icon="el-icon-minus" size="mini" plain circle type="danger"
:editable="editable"/> @click="deleteMapItem(index)"/>
<el-button class="delete-button" icon="el-icon-minus" size="mini" plain circle type="danger"
@click="deleteMapItem(index)"/>
</div>
</div>
<div class="bottom-bar">
<el-button size="mini" type="primary" @click="close">{{$t('Close')}}</el-button>
<el-button size="mini" type="primary" @click="save">{{$t('Save')}}</el-button>
</div> </div>
</div> </div>
<el-button slot="reference" @click="onClickEdit" :disabled="!editable">{{$t('Edit')}}</el-button> <div class="bottom-bar">
</el-popover> <el-button size="mini" type="primary" @click="close">{{$t('Close')}}</el-button>
<el-button-group> <el-button size="mini" type="primary" @click="save">{{$t('Save')}}</el-button>
<el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button> </div>
</el-button-group> </div>
</div> <el-button slot="reference" @click="onClickEdit" :disabled="!editable">{{$t('Edit')}}</el-button>
</input-wrapper> </el-popover>
<el-button-group>
<el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button>
</el-button-group>
</div>
</template> </template>
<script> <script>
import InputWrapper from "./InputWrapper"; import LinkableInputWrapper from "./LinkableInputWrapper";
import CmdInputWrapper from "./CmdInputWrapper";
import {getInputDefaultValue} from "../../utils"; import {getInputDefaultValue} from "../../utils";
import DynamicSelector from "./DynamicSelector"; import DynamicSelector from "./DynamicSelector";
export default { export default {
name: "MapInput", name: "MapInput",
components: {DynamicSelector, InputWrapper,}, components: {DynamicSelector, LinkableInputWrapper, CmdInputWrapper},
props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'], props: ['value', 'container', 'property', 'propertyName', 'editable'],
data() { data() {
let dataTypes = this.$t('dataTypes'); let dataTypes = this.$t('dataTypes');
return { return {
......
src/components/inputs/NodeSelectInput.vue
View file @ e8227960
<template> <template>
<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" <div style="display: flex;flex: 1;">
:propertyName="propertyName"> <el-popover
<div style="display: flex;flex: 1;"> placement="top"
<el-popover popper-class="node-select-popover"
placement="top" class="node-select-container"
popper-class="node-select-popover" trigger="manual"
class="node-select-container" width="400"
trigger="manual" v-model="popoverVisible"
width="400" >
v-model="popoverVisible" <div>
> <el-input v-model="filterText" prefix-icon="el-icon-search" size="mini" clearable/>
<div> <el-scrollbar class="tree-scrollbar" wrap-class="wrap-x-hidden">
<el-input v-model="filterText" prefix-icon="el-icon-search" size="mini" clearable/> <el-tree
<el-scrollbar class="tree-scrollbar" wrap-class="wrap-x-hidden"> ref="tree"
<el-tree v-if="popoverVisible"
ref="tree" :data="behavior_views"
v-if="popoverVisible" :props="defaultProps"
:data="behavior_views" :expand-on-click-node="false"
:props="defaultProps" draggable
:expand-on-click-node="false" highlight-current
draggable :default-expand-all="true"
highlight-current @node-click="handleNodeClick"
:default-expand-all="true" empty-text=""
@node-click="handleNodeClick" :filter-node-method="filterNodeMethod"
empty-text="" >
:filter-node-method="filterNodeMethod" <div slot-scope="{ node, data }" class="tree-node">
> {{data.name}}
<div slot-scope="{ node, data }" class="tree-node">
{{data.name}}
</div>
</el-tree>
</el-scrollbar>
<div class="bottom-bar">
<div></div>
<div>
<el-button @click="onCancel" plain>Cancel</el-button>
<el-button @click="onConfirm" type="primary">Confirm</el-button>
</div> </div>
</el-tree>
</el-scrollbar>
<div class="bottom-bar">
<div></div>
<div>
<el-button @click="onCancel" plain>Cancel</el-button>
<el-button @click="onConfirm" type="primary">Confirm</el-button>
</div> </div>
</div> </div>
<el-input clearable slot="reference" :value="editValue" @change="onInput" placeholder="unset" </div>
:readonly="!editable"> <el-input clearable slot="reference" :value="editValue" @change="onInput" placeholder="unset"
<template slot="prepend"> :readonly="!editable">
<el-tooltip effect="dark" :content="nodePath" placement="top" :open-delay="500" :disabled="!nodePath"> <template slot="prepend">
<el-button>{{nodeScheme}}</el-button> <el-tooltip effect="dark" :content="nodePath" placement="top" :open-delay="500" :disabled="!nodePath">
</el-tooltip> <el-button>{{nodeScheme}}</el-button>
</template> </el-tooltip>
</el-input> </template>
</el-popover> </el-input>
<el-button-group> </el-popover>
<el-button :icon="editButtonIcon" @click="onClickEdit" :disabled="!editable"></el-button> <el-button-group>
<el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button> <el-button :icon="editButtonIcon" @click="onClickEdit" :disabled="!editable"></el-button>
</el-button-group> <el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button>
</div> </el-button-group>
</input-wrapper> </div>
</template> </template>
<script> <script>
import {mapGetters} from "vuex"; import {mapGetters} from "vuex";
import InputWrapper from "./InputWrapper"; import LinkableInputWrapper from "./LinkableInputWrapper";
import CmdInputWrapper from "./CmdInputWrapper";
import {nodeScheme} from "../../utils"; import {nodeScheme} from "../../utils";
export default { export default {
name: "NodeSelectInput", name: "NodeSelectInput",
components: {InputWrapper,}, components: {LinkableInputWrapper, CmdInputWrapper},
props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'], props: ['value', 'container', 'property', 'propertyName', 'editable'],
data() { data() {
return { return {
nodeScheme: nodeScheme, nodeScheme: nodeScheme,
......
src/components/inputs/NumberInput.vue
View file @ e8227960
<template> <template>
<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName"> <el-input-number :disabled="!editable" :value="editValue" @change="onInput" controls-position="right"
<el-input-number :disabled="!editable" :value="editValue" @input="onInput" controls-position="right" :placeholder="defaultValue"></el-input-number>
:placeholder="defaultValue"></el-input-number>
</input-wrapper>
</template> </template>
<script> <script>
import InputWrapper from "./InputWrapper"; import LinkableInputWrapper from "./LinkableInputWrapper";
import CmdInputWrapper from "./CmdInputWrapper";
import {getInputDefaultValue} from "../../utils"; import {getInputDefaultValue} from "../../utils";
export default { export default {
name: "NumberInput", name: "NumberInput",
components: {InputWrapper,}, components: {LinkableInputWrapper, CmdInputWrapper},
props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'], props: ['value', 'container', 'property', 'propertyName', 'editable'],
computed: { computed: {
editValue() { editValue() {
return this.value === undefined ? this.property.default : this.value; return this.value === undefined ? this.property.default : this.value;
......
src/components/inputs/SampleInputWrapper.vue 0 → 100644
View file @ e8227960
<template>
<el-form-item class="input-wrapper" :label="propertyName" content-float="right"
:content-width="contentWidth" :labelOffsetTop="labelOffsetTop">
<el-tooltip placement="left" class="label" slot="label" trigger="hover" :open-delay="500" :enterable="false">
<div slot="content" class="property-name-popover">
<p>{{$t('Alias')}}：{{property.alias}}</p>
<p>{{$t('Name')}}：{{propertyName}}</p>
</div>
<div>
<p class="alias">{{property.alias||propertyName}}</p>
<p class="property-name">{{propertyName}}</p>
</div>
</el-tooltip>
<template>
<slot></slot>
</template>
</el-form-item>
</template>
<script>
import camelcase from 'camelcase'
import ElFormItem from "./form-item";
export default {
name: "SampleInputWrapper",
components: {ElFormItem},
props: {
property: Object,
value: {},
container: {},
propertyName: String,
editable: Boolean,
switchable: Boolean,
contentWidth: {
type: String,
default: '65%',
},
labelOffsetTop: {
type: Number,
default: 0,
},
},
data() {
return {}
},
watch: {
},
computed: {
},
methods: {
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/customSettings/source/index.vue → src/components/inputs/SourceInput.vue
View file @ e8227960
...@@ -5,70 +5,90 @@ ...@@ -5,70 +5,90 @@
width="auto" width="auto"
:disabled="!legalUrl" :disabled="!legalUrl"
:content="url" :content="url"
class="source-input"
> >
<img style="max-width: 200px;" v-if="url" :src="url" alt=""/> <img style="max-width: 200px;" v-if="url" :src="url" alt=""/>
<el-input v-model="swvalue" slot="reference" @drop.native="drop" @dragover.native="dragOver"> <el-input slot="reference" :disabled="!editable" v-model="editValue" controls-position="right" :placeholder="defaultValue"
@change="onChange" @drop.native="drop" @dragover.native="dragOver">
<el-button slot="append" icon="el-icon-aim" @click="locateAsset"></el-button> <el-button slot="append" icon="el-icon-aim" @click="locateAsset"></el-button>
</el-input> </el-input>
</el-popover> </el-popover>
</template> </template>
<style>
</style>
<script> <script>
import {mapGetters} from 'vuex'
import LinkableInputWrapper from "./LinkableInputWrapper";
import CmdInputWrapper from "./CmdInputWrapper";
import {assetScheme, getInputDefaultValue} from "../../utils";
import events from "@/global-events.js" import events from "@/global-events.js"
import {assetScheme} from "../../../utils";
export default { export default {
props: { name: "SourceInput",
value: [String, Number, Boolean] components: {LinkableInputWrapper, CmdInputWrapper},
}, props: ['value', 'container', 'property', 'propertyName', 'editable'],
data() { data(){
return { return {
swvalue: this.value || '' editValue: this.getEditValue(),
};
},
watch: {
swvalue(v) {
this.$emit('change', v);
} }
}, },
mounted(){
this.editValue = this.getEditValue();
},
computed: {
defaultValue(){
return getInputDefaultValue(this.property);
},
url: function () {
if (this.value) {
if (this.value.indexOf(assetScheme) > -1) {
let uuid = this.value.replace(assetScheme, '');
let _ass = this.assets.find(a => a.uuid === uuid);
return _ass ? _ass.url : '';
} else {
return this.value;
}
} else {
return '';
}
},
legalUrl: function () {
return this.value && this.value.startsWith(assetScheme);
},
...mapGetters(['assets']),
},
methods: { methods: {
getEditValue() {
return this.value === undefined ? this.property.default : this.value;
},
onChange(v) {
if(v !== this.value){
this.$emit('input', v, this.container, this.propertyName, this.value);
}
},
drop(e) { drop(e) {
if (this.$store.state.project.dragUUID) { if (this.$store.state.project.dragUUID) {
console.log('native drop', this.$store.state); console.log('native drop', this.$store.state);
this.swvalue = assetScheme + this.$store.state.project.dragUUID this.onChange(assetScheme + this.$store.state.project.dragUUID)
} }
}, },
dragOver(e) { dragOver(e) {
e.preventDefault(); if(this.editable){
e.preventDefault();
}
}, },
locateAsset() { locateAsset() {
let uuid = this.swvalue ? this.swvalue.split('//')[1] : null; let uuid = this.value ? this.value.replace(assetScheme, '') : null;
if (uuid) { if (uuid) {
let asset = this.$store.state.project.data.assets.find(a => a.uuid === uuid); let asset = this.assets.find(a => a.uuid === uuid);
if (asset) { if (asset) {
events.$emit('select-asset-item', asset); events.$emit('select-asset-item', asset);
} }
} }
}
},
computed: {
url: function () {
if (this.swvalue) {
if (this.swvalue.indexOf(assetScheme) > -1) {
let uuid = this.swvalue.split('//')[1];
let _ass = this.$store.state.project.data.assets.find(a => a.uuid === uuid);
return _ass ? _ass.url : '';
} else {
return this.swvalue;
}
} else {
return '';
}
}, },
legalUrl: function () { },
return (this.swvalue + '').indexOf('//') > -1; }
}
}
};
</script> </script>
<style scoped>
</style>
\ No newline at end of file
src/components/inputs/StringInput.vue
View file @ e8227960
<template> <template>
<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" :propertyName="propertyName"> <div style="display: flex;flex: 1;">
<div style="display: flex;flex: 1;"> <el-popover
<el-popover placement="top"
placement="top" popper-class="input-area-popover"
popper-class="input-area-popover" class="string-input-container"
class="string-input-container" trigger="manual"
trigger="manual" width="400"
width="400" v-model="popoverVisible"
v-model="popoverVisible" :disabled="!editable"
:disabled="!editable" >
> <div>
<div> <el-input
<el-input type="textarea"
type="textarea" v-model="popoverEditValue"
v-model="popoverEditValue" :placeholder="defaultValue"
:placeholder="defaultValue" :rows="6"
:rows="6" >
> </el-input>
</el-input> <div class="bottom-bar">
<div class="bottom-bar"> <el-button @click="onClean" type="danger" plain>Clean</el-button>
<el-button @click="onClean" type="danger" plain>Clean</el-button> <el-button-group>
<el-button-group> <el-button @click="onCancel" plain>Cancel</el-button>
<el-button @click="onCancel" plain>Cancel</el-button> <el-button @click="onConfirm" type="primary" plain>Confirm</el-button>
<el-button @click="onConfirm" type="primary" plain>Confirm</el-button> </el-button-group>
</el-button-group>
</div>
</div> </div>
<el-input clearable slot="reference" :value="editValue" @input="onInput" @change="onChange" :readonly="!editable" </div>
:placeholder="defaultValue"/> <el-input clearable slot="reference" :value="editValue" @input="onInput" @change="onChange" :readonly="!editable"
</el-popover> :placeholder="defaultValue"/>
<el-button-group> </el-popover>
<el-button :icon="editButtonIcon" @click="onClickEdit" :disabled="!editable"></el-button> <el-button-group>
<el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button> <el-button :icon="editButtonIcon" @click="onClickEdit" :disabled="!editable"></el-button>
</el-button-group> <el-button icon="el-icon-delete" @click="onClickClean" :disabled="!editable"></el-button>
</div> </el-button-group>
</input-wrapper> </div>
</template> </template>
<script> <script>
import InputWrapper from "./InputWrapper"; import LinkableInputWrapper from "./LinkableInputWrapper";
import CmdInputWrapper from "./CmdInputWrapper";
import {getInputDefaultValue} from "../../utils"; import {getInputDefaultValue} from "../../utils";
export default { export default {
name: "StringInput", name: "StringInput",
components: {InputWrapper,}, components: {LinkableInputWrapper, CmdInputWrapper},
props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'], props: ['value', 'container', 'property', 'propertyName', 'editable'],
data() { data() {
return { return {
editValueOrigin: this.value, editValueOrigin: this.value,
......
src/components/inputs/TextInput.vue 0 → 100644
View file @ e8227960
<template>
<div style="display: flex;flex: 1;">
<el-input :value="value" readonly/>
</div>
</template>
<script>
import LinkableInputWrapper from "./LinkableInputWrapper";
import CmdInputWrapper from "./CmdInputWrapper";
import {getInputDefaultValue} from "../../utils";
export default {
name: "TextInput",
components: {LinkableInputWrapper, CmdInputWrapper},
props: ['value', 'container', 'property', 'propertyName', 'editable'],
data() {
return {
}
},
computed: {
},
watch: {
},
methods: {
},
}
</script>
<style scoped>
.bottom-bar {
margin-top: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
src/components/inputs/Vector2Input.vue
View file @ e8227960
<template> <template>
<input-wrapper :editable="editable" :linkable="linkable" :value="value" :container="container" :property="property" <div>
:propertyName="propertyName">
<span class="field-label">x</span> <span class="field-label">x</span>
<el-input-number :disabled="!editable" :value="editValue.x" @input="v=>onInput(v, 'x')" controls-position="right" <el-input-number :disabled="!editable" :value="editValue.x" @input="v=>onInput(v, 'x')" controls-position="right"
:placeholder="defaultValue.x"></el-input-number> :placeholder="defaultValue.x"></el-input-number>
<span class="field-label">y</span> <span class="field-label">y</span>
<el-input-number :disabled="!editable" :value="editValue.y" @input="v=>onInput(v, 'y')" controls-position="right" <el-input-number :disabled="!editable" :value="editValue.y" @input="v=>onInput(v, 'y')" controls-position="right"
:placeholder="defaultValue.y"></el-input-number> :placeholder="defaultValue.y"></el-input-number>
</input-wrapper> </div>
</template> </template>
<script> <script>
import {parseVector2} from "props-compute"; import {parseVector2} from "props-compute";
import InputWrapper from "./InputWrapper"; import LinkableInputWrapper from "./LinkableInputWrapper";
import CmdInputWrapper from "./CmdInputWrapper";
export default { export default {
name: "Vector2Input", name: "Vector2Input",
components: {InputWrapper,}, components: {LinkableInputWrapper, CmdInputWrapper},
props: ['value', 'container', 'property', 'propertyName', 'editable', 'linkable'], props: ['value', 'container', 'property', 'propertyName', 'editable'],
data() { data() {
return { return {
editValue: {}, editValue: {},
......
src/components/inputs/index.js
View file @ e8227960
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
export {default as NumberInput} from './NumberInput'; export {default as NumberInput} from './NumberInput';
export {default as StringInput} from './StringInput'; export {default as StringInput} from './StringInput';
export {default as TextInput} from './TextInput';
export {default as EnumInput} from './EnumInput'; export {default as EnumInput} from './EnumInput';
export {default as BooleanInput} from './BooleanInput'; export {default as BooleanInput} from './BooleanInput';
export {default as ColorInput} from './ColorInput'; export {default as ColorInput} from './ColorInput';
...@@ -12,3 +13,4 @@ export {default as NodeSelectInput} from './NodeSelectInput'; ...@@ -12,3 +13,4 @@ export {default as NodeSelectInput} from './NodeSelectInput';
export {default as MapInput} from './MapInput'; export {default as MapInput} from './MapInput';
export {default as DynamicInput} from './DynamicInput'; export {default as DynamicInput} from './DynamicInput';
export {default as Vector2Input} from './Vector2Input'; export {default as Vector2Input} from './Vector2Input';
export {default as SourceInput} from './SourceInput';
src/config.js
View file @ e8227960
...@@ -6,11 +6,11 @@ export let API_HOST; ...@@ -6,11 +6,11 @@ export let API_HOST;
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
//API_HOST = '//10.10.95.74:7777'; //API_HOST = '//10.10.95.74:7777';
//API_HOST = '//192.168.1.16:7777'; //API_HOST = '//192.168.1.16:7777';
API_HOST = '//10.10.93.88:7777'; //API_HOST = '//10.10.93.88:7777';
//API_HOST = '//192.168.0.105:7777'; //API_HOST = '//192.168.0.105:7777';
//API_HOST = '//localhost:3002'; //API_HOST = '//localhost:3002';
//API_HOST = window.__data.apiHost; //API_HOST = window.__data.apiHost;
//API_HOST = ''; API_HOST = 'http://beacon.duiba.com.cn';
} else { } else {
API_HOST = window.__data.apiHost; API_HOST = window.__data.apiHost;
} }
...@@ -23,7 +23,7 @@ export const SSO_VERIFY_PAGE_URL = '/sso/logout'; ...@@ -23,7 +23,7 @@ export const SSO_VERIFY_PAGE_URL = '/sso/logout';
export const DOCK_POINT_OFFSET = 4; export const DOCK_POINT_OFFSET = 4;
export const PROJECT_PAGE_SIZE = 10; export const PROJECT_PAGE_SIZE = 20;
export const HISTORY_PAGE_SIZE = 20; export const HISTORY_PAGE_SIZE = 20;
//文件类型图标 t表示展示缩略图 //文件类型图标 t表示展示缩略图
......
src/locales/zh-CN.json
View file @ e8227960
...@@ -216,6 +216,11 @@ ...@@ -216,6 +216,11 @@
"Are you sure to transform process?": "你确定将此转化为{inlineType}过程吗?", "Are you sure to transform process?": "你确定将此转化为{inlineType}过程吗?",
"Input custom process name": "请输入自定义过程名称", "Input custom process name": "请输入自定义过程名称",
"Invalid name": "无效名称", "Invalid name": "无效名称",
"Store editor": "数据编辑器",
"Store": "数据",
"Operate": "操作",
"Computed": "计算属性",
"Are you sure to close?": "确定关闭吗？",
"eventGroup": { "eventGroup": {
"in": "接收", "in": "接收",
"out": "派发" "out": "派发"
...@@ -357,5 +362,8 @@ ...@@ -357,5 +362,8 @@
"rename": "重命名", "rename": "重命名",
"replace": "替换", "replace": "替换",
"combine": "合并" "combine": "合并"
},
"customCmds": {
"z-for": "循环"
} }
} }
\ No newline at end of file
src/store/modules/editor.js
View file @ e8227960
...@@ -12,7 +12,7 @@ export const editorStore = { ...@@ -12,7 +12,7 @@ export const editorStore = {
state: { state: {
initialized: false, initialized: false,
name: 'Zeroing Editor', name: 'Zeroing Editor',
version: '1.0.3', version: '0.1.0',
templates: { templates: {
builtin: ['blank'], builtin: ['blank'],
custom: [], custom: [],
......
src/store/modules/project.js
View file @ e8227960
...@@ -246,7 +246,7 @@ export const projectStore = { ...@@ -246,7 +246,7 @@ export const projectStore = {
if (view.type) { if (view.type) {
// view.type有值说明修改了节点的类型 // view.type有值说明修改了节点的类型
// 如果修改了节点类型，需要删除无用的属性 // 如果修改了节点类型，需要删除无用的属性
let defaultProps = Object.keys(getCmpProps(view.type)); let defaultProps = Object.keys(getCmpProps(view.type).props);
_.forIn(newView.properties, (value, key) => { _.forIn(newView.properties, (value, key) => {
if (defaultProps.indexOf(key) === -1) { if (defaultProps.indexOf(key) === -1) {
...@@ -481,6 +481,11 @@ export const projectStore = { ...@@ -481,6 +481,11 @@ export const projectStore = {
setMockServeEnabled(state, enabled) { setMockServeEnabled(state, enabled) {
state.mockServeEnabled = enabled; state.mockServeEnabled = enabled;
},
modifyViewStore(state, {view, store}){
view.store = store;
this.commit('makeProjectDirty');
} }
}, },
getters: { getters: {
...@@ -676,15 +681,25 @@ export const projectStore = { ...@@ -676,15 +681,25 @@ export const projectStore = {
return getTopView(node.parent); return getTopView(node.parent);
} }
}; };
let _view = getTopView(data.node);
if (!data.fromPlayground) { if (!data.fromPlayground) {
// 点击视图区域选中节点 // 点击视图区域选中节点
// 则需要切换当前节点所在的最顶层视图 // 则需要切换当前节点所在的最顶层视图
let _view = getTopView(data.node);
if (_view && _view.data) { if (_view && _view.data) {
context.state.activeViews = _view.data.uuid; context.state.activeViews = _view.data.uuid;
} }
} }
if(_view.data === data.data){
if(!data.data.hasOwnProperty('$isRootView')){
Object.defineProperty(data.data, '$isRootView', {
get(){
return true;
}
})
}
}
context.commit('activeComponent', data.data); context.commit('activeComponent', data.data);
}, },
/** /**
......
src/themes/light/behavior.scss
View file @ e8227960
...@@ -473,7 +473,16 @@ $dock-pin-width: 9px; ...@@ -473,7 +473,16 @@ $dock-pin-width: 9px;
} }
} }
.source-input{
flex: 1;
}
.node-select-container { .node-select-container {
flex: 1; flex: 1;
} }
} }
.enum-input-comment{
float: right;
color: $--color-text-secondary;
}
src/themes/light/editor.scss
View file @ e8227960
...@@ -47,6 +47,38 @@ ...@@ -47,6 +47,38 @@
background-color: $--pane-background-color; background-color: $--pane-background-color;
} }
.package-list{
display: flex;
flex-direction: column;
.list {
display: flex;
flex-direction: column;
flex: 1;
margin-bottom: 5px;
.item + .item {
}
.item {
display: flex;
align-items: center;
padding-top: 5px;
&:hover {
& > .delete-button {
visibility: visible;
}
}
&:nth-child(odd){
background-color: #FAFAFA;
}
}
}
}
.mapping-list { .mapping-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -309,6 +341,43 @@ ...@@ -309,6 +341,43 @@
} }
} }
.store-editor-dialog {
.wrapper {
height: 50vh;
.tabs {
height: 100%;
display: flex;
flex-direction: column;
.el-tabs__content {
flex: 1;
& > div {
height: 100%;
}
.editor {
height: 100%;
}
.computed-editor{
.editor{
height: 200px;
}
}
}
}
}
.dialog-footer{
.save-button{
margin-left: 10px;
}
}
}
.px-publish-view { .px-publish-view {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
src/themes/light/index.scss
View file @ e8227960
...@@ -76,8 +76,12 @@ ...@@ -76,8 +76,12 @@
line-height: 30px; line-height: 30px;
} }
.el-collapse-item__content{
padding-bottom: 5px;
}
.el-tabs--border-card > .el-tabs__content { .el-tabs--border-card > .el-tabs__content {
padding: 5px 0 5px 5px; padding: 5px;
} }
.el-input-number.is-controls-right .el-input__inner { .el-input-number.is-controls-right .el-input__inner {
...@@ -98,3 +102,12 @@ ...@@ -98,3 +102,12 @@
padding: 3px; padding: 3px;
align-self: center; align-self: center;
} }
.el-tabs__item {
height: 25px;
line-height: 25px;
}
.el-tab-pane {
height: 100%;
}
src/themes/light/inspector.scss
View file @ e8227960
...@@ -6,45 +6,42 @@ ...@@ -6,45 +6,42 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&>:last-child{ & > :last-child {
flex: 1; flex: 1;
height: 0; height: 0;
} }
.el-tabs__item {
height: 25px;
line-height: 25px;
}
.el-tab-pane{
height: 100%;
}
.zero-inspector-props-form { .zero-inspector-props-form {
height: 100%; height: 100%;
.el-form{ .form {
padding-right: 10px; height: 100%;
display: flex;
flex-direction: column;
} }
.el-input-number.el-input-number--mini, .el-select.el-select--mini { .top-bar {
width: 100%; padding: 5px;
} }
.el-slider.zero-slider { .scrollbar {
width: 180px; flex: 1;
margin-right: -5px;
} }
.zero-slider .el-slider__runway.show-input { .all-form {
width: 100px; padding-right: 10px;
} }
.zero-slider > .el-slider__input { .cmd-input {
width: 60px; .el-input__inner {
color: $--color-primary;
}
} }
.scrollbar{ .add-item-bar {
height: 100%; padding: 10px 0;
text-align: center;
} }
} }
...@@ -53,11 +50,11 @@ ...@@ -53,11 +50,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.add-trigger{ .add-trigger {
align-self: flex-start; align-self: flex-start;
} }
.scrollbar{ .scrollbar {
margin-top: 5px; margin-top: 5px;
height: 100%; height: 100%;
} }
...@@ -66,7 +63,7 @@ ...@@ -66,7 +63,7 @@
margin-left: 5px; margin-left: 5px;
} }
.trigger-list{ .trigger-list {
color: $--color-text-regular; color: $--color-text-regular;
font-size: 12px; font-size: 12px;
padding-right: 10px; padding-right: 10px;
...@@ -74,21 +71,22 @@ ...@@ -74,21 +71,22 @@
.trigger-item + .trigger-item { .trigger-item + .trigger-item {
margin-top: 5px; margin-top: 5px;
} }
.trigger-item { .trigger-item {
border: 1px solid lightgray; border: 1px solid lightgray;
border-radius: 3px; border-radius: 3px;
padding: 3px; padding: 3px;
.el-button{ .el-button {
padding: 3px; padding: 3px;
} }
.top-bar{ .top-bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.name{ .name {
color: $--color-primary; color: $--color-primary;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
...@@ -111,12 +109,12 @@ ...@@ -111,12 +109,12 @@
align-items: center; align-items: center;
margin-top: 2px; margin-top: 2px;
.name-field{ .name-field {
flex: 1; flex: 1;
margin-left: 3px; margin-left: 3px;
} }
.missing-behavior{ .missing-behavior {
color: $--color-danger; color: $--color-danger;
} }
......
src/utils/common.js
View file @ e8227960
...@@ -161,7 +161,7 @@ function completeSelfProps(component) { ...@@ -161,7 +161,7 @@ function completeSelfProps(component) {
let defaultProps = getCmpProps(component.type); let defaultProps = getCmpProps(component.type);
// 把这些属性格式转换成key: value // 把这些属性格式转换成key: value
defaultProps = _.mapValues(defaultProps, o => (o.value)); defaultProps = _.mapValues(defaultProps.props, o => (o.default));
return _.merge(defaultProps, component.properties); return _.merge(defaultProps, component.properties);
} }
...@@ -320,26 +320,25 @@ export const styles = { ...@@ -320,26 +320,25 @@ export const styles = {
} }
} }
const cmpPropsCache = {}; const cmpMetaCache = {};
export function getCmpProps(type) { export function getCmpProps(type) {
if (!type) { if (!type) {
return {} return {}
} else { } else {
let cmpProps = cmpPropsCache[type]; let cmpProps = cmpMetaCache[type];
if (cmpProps) { if (cmpProps) {
cmpProps = _.cloneDeep(cmpProps); cmpProps = _.cloneDeep(cmpProps);
} else { } else {
let typeProps = properties[type]; let typeMeta = _.cloneDeep(properties[type]);
let inherits = [_.cloneDeep(typeProps)]; let inherits = [typeMeta.props];
while (typeProps.base) { let tempMeta = typeMeta;
typeProps = cmpPropsCache.hasOwnProperty(typeProps.base) ? cmpPropsCache[typeProps.base] : properties[typeProps.base]; while (tempMeta.base) {
inherits.unshift(_.cloneDeep(typeProps)); tempMeta = cmpMetaCache.hasOwnProperty(tempMeta.base) ? cmpMetaCache[tempMeta.base] : properties[tempMeta.base];
inherits.unshift(_.cloneDeep(tempMeta.props));
} }
let result = Object.assign({}, ...inherits); typeMeta.props = Object.assign({}, ...inherits);
cmpProps = cmpPropsCache[type] = result; cmpProps = cmpMetaCache[type] = typeMeta;
delete result.base;
delete result.groupName;
} }
return cmpProps; return cmpProps;
......
src/utils/index.js
View file @ e8227960
...@@ -32,6 +32,14 @@ export const pxHostMapping = { ...@@ -32,6 +32,14 @@ export const pxHostMapping = {
prod: "https://activity.m.duiba.com.cn" prod: "https://activity.m.duiba.com.cn"
}; };
export const monacoEditorOptions = {
tabSize: 2,
insertSpaces: false
};
export const cmdPrefix = 'z-';
export const cmdOldPrefix = '//z-';
/** /**
* 节点方案 * 节点方案
* @type {string} * @type {string}
......
src/utils/properties.js
View file @ e8227960
This diff is collapsed.
src/views/Editor.vue
View file @ e8227960
...@@ -122,8 +122,8 @@ ...@@ -122,8 +122,8 @@
methods: { methods: {
prepare() { prepare() {
return Promise.all([ return Promise.all([
this.updateEnv(),
db.open('store'), db.open('store'),
this.updateEnv(),
]) ])
}, },
onKeyPress(e) { onKeyPress(e) {
......
src/views/Editor/Inspector/PropsTab.vue
View file @ e8227960
<template> <template>
<div class="zero-inspector-props-form" v-if="activeComponent.uuid"> <div class="zero-inspector-props-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden"> <el-form class="form" ref="form" size="mini" :model="form" label-width="100px" @submit.native.prevent>
<el-form ref="form" size="mini" :model="form" label-width="100px" @submit.native.prevent> <div class="top-bar" v-if="activeComponent.$isRootView">
<el-form-item label="名称"> <el-button size="mini" @click="clickEditStoreExp">编辑数据</el-button>
<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input> <el-button size="mini" @click="clickEditStoreComputed">计算属性</el-button>
</el-form-item> </div>
<el-form-item label="类型"> <el-form-item label="名称">
<el-select v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型"> <el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
<el-option v-for="(cmp, key) in componentsMap" :key="key" :label="cmp" :value="key"></el-option> </el-form-item>
</el-select> <el-form-item label="类型">
</el-form-item> <el-select v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型">
<template v-for="(p, key) in cmpProps"> <el-option v-for="(cmp, key) in componentsMap" :key="key" :label="cmp" :value="key"></el-option>
<el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title"> </el-select>
<!-- {{key}} --> </el-form-item>
<el-tooltip :disabled="!p.desc" placement="top-start"> <el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<div slot="content">{{p.desc}}</div> <el-collapse v-model="activeNames">
<div> <el-collapse-item title="属性" name="props">
<dynamic-component :component-value="getPropValue(p, key)" :component-props="getPropProps(p)" :component-type="getPropCmpType(p)" @onChange="v => handlePropertiesChange(key, v)"></dynamic-component> <props-editor
</div> class="all-form"
</el-tooltip> ref="propsEditor"
</el-form-item> :editable="true"
</template> :switchable="true"
</el-form> mode="cmd"
</el-scrollbar> :data="form.properties"
</div> :meta="propsMeta"
@input="onInput"
/>
</el-collapse-item>
<el-collapse-item title="自定义指令" name="cmd">
<el-form-item v-for="key in customCmdKeys" :label="customCmdNames[key]" :key="key" label-width="50px">
<el-input class="cmd-input" v-model="activeComponent.properties[key]"></el-input>
</el-form-item>
<div class="add-item-bar">
<el-dropdown trigger="click" @command="addCmd" placement="bottom" size="small">
<el-button size="mini" type="primary" plain>{{$t('Add')}}</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="(cmd, key) of customCmdNames"
:command="key"
:key="key"
:disabled="customCmdKeys.includes(key)"
>{{cmd}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-collapse-item>
</el-collapse>
</el-scrollbar>
</el-form>
<store-editor-dialog ref="storeEditorDialog"/>
</div>
</template> </template>
<script> <script>
import { mapGetters, mapState } from 'vuex'; import {mapGetters, mapState} from 'vuex';
import _ from 'lodash'; import PropsEditor from "../../../components/PropsEditor";
import { getCmpProps } from '../../../utils/common'; import {getCmpProps} from "../../../utils/common";
import dynamicComponent from '../components/dynamicComponent'; import StoreEditorDialog from "./PropsTab/StoreEditorDialog";
const componentMapper = { export default {
switch: { name: 'PropsTab',
component: 'el-switch', components: {StoreEditorDialog, PropsEditor},
props: { data() {
width: 100 const componentsMap = this.$t('view_node_menu');
} const customCmdNames = this.$t('customCmds');
},
select: {
component: 'el-select',
props: {
slotComponent: 'el-option'
}
},
swSelect: {
component: 'sw-select' // 无需传入options
},
source: {
component: 'sw-source'
},
slider: {
component: 'sw-slider'
},
inputNumber: {
component: 'el-input-number',
props: {
size: 'mini',
'controls-position': 'right'
}
},
textArea: {
component: 'el-input',
props: {
type: 'textarea',
autosize: {
minRows: 3,
maxRows: 10
}
}
},
input: {
component: 'el-input'
},
colorPicker: {
component: 'el-color-picker',
props: {
'show-alpha': true
}
}
};
export default { return {
name: 'PropsTab', activeNames: 'props',
components: { 'dynamic-component': dynamicComponent }, componentsMap,
data() { customCmdNames,
const componentsMap = this.$t('view_node_menu'); form: {
return { name: '',
componentsMap, type: '',
form: { properties: {},
name: '', },
type: '', };
properties: {}, },
}, computed: {
}; ...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList']),
}, propsMeta() {
computed: { return getCmpProps(this.activeComponent.type);
...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList']), },
cmpProps: function() { customCmdKeys() {
// 获取properties.js中的默认配置 let cmdNames = Object.keys(this.customCmdNames);
return getCmpProps(this.activeComponent.type); let keys = [];
}, for (let key in this.activeComponent.properties) {
}, if (cmdNames.includes(key)) {
watch: { keys.push(key);
activeComponent: { }
deep: true, }
handler: function(val) { return keys;
this.form.name = val.name || ''; }
this.form.type = val.type || ''; },
this.form.properties = val.properties || {}; watch: {
} activeComponent: {
} deep: true,
}, handler: function (val) {
methods: { this.form.name = val.name || '';
handleChange(label, v) { this.form.type = val.type || '';
let _view = {}; this.form.properties = val.properties || {};
_view[label] = v; }
this.$store.dispatch('modifyActiveView', _view); }
}, },
/** methods: {
* 基础属性发生改变 handleChange(label, v) {
*/ let _view = {};
handlePropertiesChange(key, v) { _view[label] = v;
console.log('handlePropertiesChange', key, v); this.$store.dispatch('modifyActiveView', _view);
},
onInput(value, container, propName, oldValue) {
console.log('propsChange', propName, value);
let _prop = {}; let _prop = {};
_prop[key] = v; _prop[propName] = value;
this.$store.dispatch('modifyProperties', _prop); this.$store.dispatch('modifyProperties', _prop);
}, },
/** clickEditStoreExp() {
* 获取动态组件的类型 this.$refs.storeEditorDialog.edit('exp', this.activeComponent);
*/ },
getPropCmpType(item) { clickEditStoreComputed() {
return componentMapper[item.type].component; this.$refs.storeEditorDialog.edit('computed', this.activeComponent);
}, },
/** addCmd(cmd) {
* 获取动态组件的属性v-bind let props = this.activeComponent.properties;
*/ this.$set(props, cmd, '');
getPropProps(item) { },
let _cmp = componentMapper[item.type]; }
return { };
size: 'mini',
...(_cmp.props || {}),
...item.props,
options: item.options || {}
};
},
/**
* 获取当前选中节点对应的属性的值
*/
getPropValue(item, key) {
let _properties = this.activeComponentCopy.properties;
return _properties[key] === undefined || _properties[key] === null ? item.value : _properties[key];
},
}
};
</script> </script>
<style lang="scss"> <style lang="scss">
.zero-inspector-props-form {
width: 100%;
padding-right: 10px;
.el-divider__text {
background-color: #e9e9e9;
}
.zero-inspector-props-group {
max-height: 500px;
}
}
.script-config-dialog {
height: 350px;
}
</style> </style>
\ No newline at end of file
src/views/Editor/Inspector/PropsTab/StoreEditorDialog.vue 0 → 100644
View file @ e8227960
<template>
<el-dialog
:title="$t('Store editor')"
width="80vw"
:visible.sync="visible"
:append-to-body="true"
:close-on-click-modal="false"
:show-close="false"
:close-on-press-escape="false"
custom-class="store-editor-dialog"
>
<div class="wrapper">
<el-tabs v-model="tab" type="border-card" class="tabs">
<el-tab-pane :label="$t('Store')" name="exp">
<monaco-editor
v-if="showEditor && tab === 'exp'"
class="editor"
v-model="store.exp"
language="javascript"
:options="monacoEditorOptions"
/>
</el-tab-pane>
<el-tab-pane :label="$t('Computed')" name="computed">
<el-table class="computed-editor" :data="store.computed" height="100%" stripe size="mini">
<el-table-column type="expand">
<template slot-scope="scope">
<monaco-editor
class="editor"
v-model="scope.row.script"
language="javascript"
:options="monacoEditorOptions"
/>
</template>
</el-table-column>
<el-table-column
prop="name"
:label="$t('Name')">
<template slot-scope="scope">
<el-input v-model="scope.row.name" size="mini"/>
</template>
</el-table-column>
<el-table-column
width="50"
:label="$t('Operate')">
<template slot-scope="scope">
<el-button circle size="mini" type="danger" icon="el-icon-delete" plain
@click="toDeleteItem(scope.$index)"/>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
<div slot="footer" class="dialog-footer">
<div>
<el-button v-show="tab === 'computed'" size="mini" @click="onAdd">{{$t('Add')}}</el-button>
</div>
<div>
<el-popconfirm @onConfirm="clickClose" placement="top"
:title="$t('Are you sure to close?')">
<el-button slot="reference" size="mini">{{ $t("Close") }}</el-button>
</el-popconfirm>
<el-button class="save-button" type="primary" size="mini" @click="clickSave">{{ $t("Save") }}
</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import {mapMutations} from 'vuex';
import MonacoEditor from "vue-monaco";
import {clonePureObj, monacoEditorOptions} from "../../../../utils";
const storeExp = `return {
}
`;
export default {
name: "StoreEditorDialog",
components: {MonacoEditor},
data() {
return {
visible: false,
tab: 'exp',
monacoEditorOptions,
showEditor: false,
store: {},
}
},
computed: {
},
methods: {
async edit(type, view) {
this.view = view;
console.log(view.storeExp);
this.store = view.store ? clonePureObj(view.store) : {
exp: storeExp,
computed: [],
};
this.visible = true;
this.$nextTick(()=>{
this.showEditor = true;
this.tab = type;
});
},
onAdd() {
this.store.computed.push({
name: '',
script: '',
});
},
onDelete(index) {
this.store.computed.splice(index, 1);
},
toDeleteItem(index) {
this.$confirm(this.$t('Are you sure to delete this item'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Cancel'),
type: 'warning'
}).then(() => {
this.onDelete(index);
}).catch((e) => {
});
},
clickSave() {
this.modifyViewStore({
view: this.view,
store: this.store,
});
this.visible = false;
},
clickClose() {
this.visible = false;
},
...mapMutations(['modifyViewStore'])
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/Editor/Inspector/ScriptsTab.vue
View file @ e8227960
<template> <template>
<div class="zero-inspector-props-form" v-if="activeComponent.uuid"> <div class="zero-inspector-props-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden"> <el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" :model="form" label-width="100px" @submit.native.prevent> <el-form class="all-form" ref="form" size="mini" :model="form" label-width="100px" @submit.native.prevent>
<el-collapse accordion v-if="activeComponent.scripts && activeComponent.scripts.length"> <el-collapse accordion v-if="activeComponent.scripts && activeComponent.scripts.length">
<template v-for="(script, index) in activeComponent.scripts"> <template v-for="(script, index) in activeComponent.scripts">
<el-collapse-item :title="getScriptName(script.script)" :key="script + index"> <el-collapse-item :title="getScriptName(script.script)" :key="script + index">
<template v-for="(p, key) in getScriptOptions(script.script)"> <props-editor
<el-form-item :key="activeComponent.uuid + index + key" :label="p.alias|| key"> ref="propsEditor"
<dynamic-component :component-value="getScriptValue(p, key, index)" :component-props="getScriptProps(p, index)" :component-type="getScriptType(p, index)" @onChange="v => handleScriptChange(index, key, v)"></dynamic-component> :editable="true"
</el-form-item> :data="script.props"
</template> :meta="getScriptOptions(script.script)"
@input="(value, container, propName)=>onInput(index, value, propName)"
/>
<el-form-item label=""> <el-form-item label="">
<el-button @click="deleteNodeScript(index)">删除</el-button> <el-button @click="deleteNodeScript(index)" type="danger" plain>删除</el-button>
</el-form-item> </el-form-item>
</el-collapse-item> </el-collapse-item>
</template> </template>
</el-collapse> </el-collapse>
<div style="padding-top: 15px;text-align: center;">
<el-dropdown trigger="click" @command="handleAddScript" placement="top" size="small">
<el-button size="mini">{{$t('Add')}}</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(script, key) of scriptPackages" :command="script.id" :key="key">{{script.name}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-form> </el-form>
<div class="add-item-bar">
<el-dropdown trigger="click" @command="handleAddScript" placement="bottom" size="small">
<el-button size="mini" type="primary" plain>{{$t('Add')}}</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(script, key) of scriptPackages" :command="script.id" :key="key">{{script.name}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-scrollbar> </el-scrollbar>
</div> </div>
</template> </template>
...@@ -32,41 +34,11 @@ ...@@ -32,41 +34,11 @@
<script> <script>
import { mapGetters, mapState } from 'vuex'; import { mapGetters, mapState } from 'vuex';
import _ from 'lodash'; import _ from 'lodash';
import dynamicComponent from '../components/dynamicComponent'; import PropsEditor from "../../../components/PropsEditor";
const scriptTypeMap = {
number: {
component: 'el-input-number',
props: {
size: 'mini'
}
},
string: {
component: 'el-input'
},
boolean: {
component: 'el-switch',
props: {
width: 40
}
},
color: {
component: 'el-color-picker',
props: {
'show-alpha': true
}
},
select: {
component: 'el-select',
props: {
slotComponent: 'el-option'
}
}
};
export default { export default {
name: 'ScriptsTab', name: 'ScriptsTab',
components: { 'dynamic-component': dynamicComponent }, components: {PropsEditor},
data() { data() {
return { return {
form: { form: {
...@@ -92,7 +64,7 @@ export default { ...@@ -92,7 +64,7 @@ export default {
/** /**
* 事件属性发生改变 * 事件属性发生改变
*/ */
handleScriptChange(index, key, v) { onInput(index, v, key) {
let _props = {}; let _props = {};
_props[key] = v; _props[key] = v;
let _scripts = _.cloneDeep(this.activeComponent.scripts); let _scripts = _.cloneDeep(this.activeComponent.scripts);
...@@ -143,7 +115,7 @@ export default { ...@@ -143,7 +115,7 @@ export default {
}, },
getScriptOptions(id) { getScriptOptions(id) {
let _script = this.scriptPackages[id]; let _script = this.scriptPackages[id];
return _script ? _script.props : {}; return _script ? _script : {};
}, },
/** /**
* 删除节点脚本 * 删除节点脚本
...@@ -163,17 +135,5 @@ export default { ...@@ -163,17 +135,5 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.zero-inspector-props-form {
width: 100%;
padding-right: 10px;
.el-divider__text {
background-color: #e9e9e9;
}
.zero-inspector-props-group {
max-height: 500px;
}
}
.script-config-dialog {
height: 350px;
}
</style> </style>
\ No newline at end of file
src/views/Editor/behavior-editor/ProcessScriptEditor.vue
View file @ e8227960
...@@ -4,13 +4,14 @@ ...@@ -4,13 +4,14 @@
ref="editor" ref="editor"
v-model="meta.script" v-model="meta.script"
language="javascript" language="javascript"
:options="monacoConfig" :options="monacoEditorOptions"
@editorWillMount="editorWillMount" @editorWillMount="editorWillMount"
/> />
</template> </template>
<script> <script>
import MonacoEditor from "vue-monaco"; import MonacoEditor from "vue-monaco";
import {monacoEditorOptions} from "../../../utils";
const typesUrl = [ const typesUrl = [
"http://yun.duiba.com.cn/editor/zeroing/types/types.v2.d.ts", "http://yun.duiba.com.cn/editor/zeroing/types/types.v2.d.ts",
...@@ -36,7 +37,7 @@ $ENV_PROPS$ ...@@ -36,7 +37,7 @@ $ENV_PROPS$
props: ['meta'], props: ['meta'],
data() { data() {
return { return {
monacoConfig: {}, monacoEditorOptions,
} }
}, },
mounted() { mounted() {
......
src/views/Editor/behavior-editor/PropertiesEditor.vue
View file @ e8227960
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<template slot="prepend">{{$t('Name')}}</template> <template slot="prepend">{{$t('Name')}}</template>
</el-input> </el-input>
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="scrollbar-view"> <el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="scrollbar-view">
<props-editor ref="propsEditor" :editable="editable" :linkable="true" :data="process.data" :meta="process.meta"/> <props-editor ref="propsEditor" :editable="editable" :switchable="true" mode="linkable" :data="process.data.props" :meta="process.meta"/>
</el-scrollbar> </el-scrollbar>
<div class="inside-code"> <div class="inside-code">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="scrollbar-view"> <el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="scrollbar-view">
......
src/views/Editor/components/dynamicComponent.vue deleted 100644 → 0
View file @ 34bbb913
<template>
<component v-if="cmpValue !== null" :is="componentType" v-model="cmpValue" v-bind="componentProps" @change="v => handleChange(v)" @input="v=>handleInput(v)">
<d-slot
v-for="oitem in componentProps.options"
:is="componentProps.slotComponent"
:key="oitem.value"
:label="oitem.label || oitem.value"
:value="oitem.value"
>
</d-slot>
</component>
</template>
<script>
import swSlider from '../../../components/customSettings/slider';
import swSelect from '../../../components/customSettings/selector';
import swSource from '../../../components/customSettings/source';
export default {
components: {
swSlider,
swSelect,
swSource
},
props: {
componentValue: [String, Number, Boolean],
componentType: {
type: String,
default: ''
},
componentProps: {
type: Object,
default: () => {}
}
},
data() {
return {
cmpValue: null
};
},
mounted() {
this.cmpValue = this.componentValue;
},
watch: {
componentValue: function(val) {
this.cmpValue = val;
}
},
methods: {
/**
* 组件值发生改变
*/
handleChange(v) {
// console.log('handleChange', v);
this.$emit('onChange', v);
// let _prop = {};
// _prop[this.label] = v;
// this.$store.dispatch('modifyProperties', _prop);
},
handleInput(v) {
if (this.componentType === 'el-input') {
this.handleChange(v);
}
}
}
};
</script>
src/views/Editor/components/viewsTree.vue
View file @ e8227960
...@@ -55,13 +55,13 @@ export default { ...@@ -55,13 +55,13 @@ export default {
}, },
position() { position() {
let _props = this.activeComponentCopy.properties || {}; let _props = this.activeComponentCopy.properties || {};
const _node = properties.node; const props = properties.node.props;
// console.log('********', _props); // console.log('********', _props);
let result = { let result = {
x: _props.x || _node.x.value, x: _props.x || props.x.default,
y: _props.y || _node.y.value, y: _props.y || props.y.default,
w: _props.width || _node.width.value, w: _props.width || props.width.default,
h: _props.height || _node.height.value h: _props.height || props.height.default,
}; };
// console.log('####position', result); // console.log('####position', result);
......
src/views/Editor/components/wrapper.vue
View file @ e8227960
...@@ -127,10 +127,10 @@ export default { ...@@ -127,10 +127,10 @@ export default {
const _node = properties.node; const _node = properties.node;
// console.log('********', _props); // console.log('********', _props);
let result = { let result = {
x: _props.x || _node.x.value, x: _props.x || _node.x.default,
y: _props.y || _node.y.value, y: _props.y || _node.y.default,
w: _props.width || _node.width.value, w: _props.width || _node.width.default,
h: _props.height || _node.height.value h: _props.height || _node.height.default
}; };
console.log('####position', result); console.log('####position', result);
......
src/views/Editor/dialogs/MockEditorDialog.vue
View file @ e8227960
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
class="editor" class="editor"
v-model="props.row.data" v-model="props.row.data"
language="json" language="json"
:options="monacoConfig" :options="monacoEditorOptions"
/> />
</template> </template>
</el-table-column> </el-table-column>
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
<script> <script>
import {mapState, mapMutations, mapActions} from 'vuex' import {mapState, mapMutations, mapActions} from 'vuex'
import EnabledSetter from "../components/EnabledSetter"; import EnabledSetter from "../components/EnabledSetter";
import {clonePureObj} from "../../../utils"; import {clonePureObj, monacoEditorOptions} from "../../../utils";
import MonacoEditor from "vue-monaco"; import MonacoEditor from "vue-monaco";
export default { export default {
...@@ -94,9 +94,7 @@ ...@@ -94,9 +94,7 @@
return { return {
visible: false, visible: false,
mocks: [], mocks: [],
monacoConfig: { monacoEditorOptions,
}
} }
}, },
mounted() { mounted() {
......
src/views/Editor/dialogs/ProcessSearchDialog.vue
View file @ e8227960
<template> <template>
<el-dialog :title="$t('Process Search')" width="80%" :visible.sync="visible" <el-dialog :title="$t('Process Search')" width="80%" :visible.sync="visible"
:append-to-body="true" :append-to-body="true"
:close-on-click-modal="false"
custom-class="meta-search-dialog" custom-class="meta-search-dialog"
> >
<div class="wrapper"> <div class="wrapper">
......
src/views/Editor/dialogs/PxSkinEditor.vue
View file @ e8227960
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
class="editor" class="editor"
v-model="skin.html" v-model="skin.html"
language="html" language="html"
:options="monacoEditorOptions"
/> />
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -40,7 +41,7 @@ ...@@ -40,7 +41,7 @@
<script> <script>
import MonacoEditor from "vue-monaco"; import MonacoEditor from "vue-monaco";
import {clonePureObj} from "../../../utils"; import {clonePureObj, monacoEditorOptions} from "../../../utils";
import ElFormItem from "../../../components/inputs/form-item"; import ElFormItem from "../../../components/inputs/form-item";
export default { export default {
...@@ -52,6 +53,7 @@ ...@@ -52,6 +53,7 @@
pxProjectName: '', pxProjectName: '',
skin: null, skin: null,
operate: 0, operate: 0,
monacoEditorOptions,
rules: { rules: {
name: [ name: [
{required: true, message: this.$t('Skin name required'), trigger: 'blur'}, {required: true, message: this.$t('Skin name required'), trigger: 'blur'},
......
src/views/Editor/dialogs/editors/CustomModuleEditor/PropsEditorDialog.vue
View file @ e8227960
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" <el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden"
view-class="scrollbar-view"> view-class="scrollbar-view">
<props-editor v-if="data" ref="propsEditor" :data="data" :meta="meta" label-width="180px" :linkable="false"/> <props-editor v-if="data" ref="propsEditor" :data="data.props" :meta="meta" label-width="180px"/>
</el-scrollbar> </el-scrollbar>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<div></div> <div></div>
......
src/views/Editor/dialogs/editors/PackageManagerEditor.vue
View file @ e8227960
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<el-tabs style="flex: 1;height: 0;" class="tabs" v-model="activeName"> <el-tabs style="flex: 1;height: 0;" class="tabs" v-model="activeName">
<el-tab-pane v-for="(group, key, index) in packageInfos" :label="$t('dependenciesTypes')[key]" :name="key" :key="key"> <el-tab-pane v-for="(group, key, index) in packageInfos" :label="$t('dependenciesTypes')[key]" :name="key" :key="key">
<el-scrollbar v-if="editData" class="scrollbar" wrap-class="wrap-x-hidden" view-class="view package-manager"> <el-scrollbar v-if="editData" class="scrollbar" wrap-class="wrap-x-hidden" view-class="view package-manager">
<div class="mapping-list"> <div class="package-list">
<div class="list"> <div class="list">
<div class="item" v-for="packageInfo in group" :key="packageInfo.id"> <div class="item" v-for="packageInfo in group" :key="packageInfo.id">
<div style="flex: 1;"> <div style="flex: 1;">
......
src/views/Editor/dialogs/editors/ProjectEditor.vue
View file @ e8227960
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
class="editor" class="editor"
v-model="editData.tpl" v-model="editData.tpl"
language="html" language="html"
:options="monacoConfig" :options="monacoEditorOptions"
/> />
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
<script> <script>
import {mapState, mapGetters, mapMutations} from 'vuex'; import {mapState, mapGetters, mapMutations} from 'vuex';
import {clonePureObj} from "../../../../utils"; import {clonePureObj, monacoEditorOptions} from "../../../../utils";
import MonacoEditor from "vue-monaco"; import MonacoEditor from "vue-monaco";
export default { export default {
...@@ -72,9 +72,7 @@ ...@@ -72,9 +72,7 @@
editData: null, editData: null,
scaleMode, scaleMode,
rendererType, rendererType,
monacoConfig: { monacoEditorOptions,
},
} }
}, },
computed: { computed: {
......
src/views/Home.vue
View file @ e8227960
...@@ -92,7 +92,6 @@ ...@@ -92,7 +92,6 @@
components: {ElFormItem, ProjectHistoryDialog, DuplicateProjectDialog, CreateProjectDialog}, components: {ElFormItem, ProjectHistoryDialog, DuplicateProjectDialog, CreateProjectDialog},
data() { data() {
return { return {
appVersion: 'v1.0.0',
currentPage: 1, currentPage: 1,
pageSize: PROJECT_PAGE_SIZE, pageSize: PROJECT_PAGE_SIZE,
searchWord: '', searchWord: '',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment