Skip to content

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

修复打包问题

parent 1e272d27
Hide whitespace changes
Inline Side-by-side
Showing with 357 additions and 247 deletions
src/code-sync-serve.js
View file @ efa3717a
......@@ -8,6 +8,7 @@ import events from './global-events';
let socket;
export let codeSyncServeEnabled = false;
export let codeSyncServeConnected = false;
export function startCodeSyncServe(config) {
if (socket) {
......@@ -20,25 +21,33 @@ export function startCodeSyncServe(config) {
socket.on('edit-save', onEditSave);
events.$on('edit-open', editCode);
codeSyncServeEnabled = true;
events.$emit('code-sync-status', true);
}
export function stop() {
export function stopCodeSyncServe() {
if (socket) {
socket.close();
}
codeSyncServeEnabled = false;
events.$emit('code-sync-status', false);
}
export function editCode(code) {
if(socket && socket.connected){
if (socket && socket.connected) {
socket.emit('edit-open', code);
}
}
function onConnect(t) {
codeSyncServeEnabled = true;
codeSyncServeConnected = true;
events.$emit('code-sync-start');
}
function onDisconnect() {
codeSyncServeEnabled = false;
codeSyncServeConnected = false;
events.$emit('code-sync-stop');
}
......
src/locales/zh-CN.json
View file @ efa3717a
......@@ -20,12 +20,17 @@
"Delete": "删除",
"Delete all": "删除全部",
"Not delete": "不删除",
"History": "历史",
"Duplicate": "拷贝",
"Import": "导入",
"Export": "导出",
"Importing project": "项目导入中",
"Exporting project": "项目导出中",
"Upload": "上传",
"Uploading": "上传中",
"Auto launch": "自动启动",
"Running status": "运行状态",
"Stop status": "停止状态",
"Edit": "编辑",
"EditEnv": "编辑环境",
"EditCustomModule": "编辑自定义模块",
......@@ -34,6 +39,7 @@
"ID": "ID",
"Mock Editor": "Mock编辑器",
"Enable mock serve": "启用Mock服务",
"Events": "事件",
"Name": "名字",
"Alias": "别名",
"Output": "输出",
......@@ -90,6 +96,7 @@
"Scale Mode": "缩放模式",
"Renderer Type": "渲染模式",
"Props Editor": "属性编辑器",
"Events details": "事件详情",
"Trigger once": "触发一次",
"Meta Editor": "过程元配置",
"Env editor": "环境编辑器",
......@@ -161,6 +168,10 @@
"Import single": "导入单",
"Import multi": "导入多",
"Import view success": "视图导入成功",
"eventGroup": {
"in": "接收",
"out": "派发"
},
"menu": {
"save": {
"label": "保存"
......
src/store/modules/env.js
View file @ efa3717a
......@@ -22,6 +22,7 @@ export const envStore = {
scripts: [],
customs: [],
codeSyncServeConfig: {
autoLaunch: false,
ip: 'localhost',
port: 7788,
}
......
src/themes/light/editor.scss
View file @ efa3717a
......@@ -164,10 +164,48 @@
flex: 1;
}
}
}
.dialog-footer {
display: flex;
justify-content: space-between;
.dialog-footer {
display: flex;
justify-content: space-between;
}
.props-editor-dialog{
.scrollbar{
height: 40vh;
}
}
.events-details-dialog{
.scrollbar{
height: 40vh;
.collapse{
margin-right: 10px;
.group{
margin-left: 10px;
.data-item{
max-width: 300px;
display: flex;
justify-content: space-between;
}
.data-item + .data-item{
margin-top: 5px;
}
}
}
}
}
.code-sync-serve-dialog{
.dialog-footer{
.status{
font-size: 14px;
color: $--color-text-primary;
}
}
}
src/themes/light/index.scss
View file @ efa3717a
......@@ -59,6 +59,11 @@
height: 100%;
}
.el-collapse-item__header{
height: 30px;
line-height: 30px;
}
.el-tabs--border-card > .el-tabs__content {
padding: 5px 0 5px 5px;
}
......
src/themes/light/inspector.scss
View file @ efa3717a
......@@ -11,11 +11,6 @@
height: 0;
}
.el-collapse-item__header{
height: 25px;
line-height: 25px;
}
.el-tabs__item {
height: 25px;
line-height: 25px;
......
src/utils/index.js
View file @ efa3717a
......@@ -182,6 +182,10 @@ export function newScriptEl(url) {
return `<script src="${url}"></script>`
}
export function newScriptContent(content) {
return `<script>${content}</script>`
}
export function getMockServeEnabled(projectID) {
let enabled = localStorage.getItem('mock-enabled-' + projectID);
if (enabled) {
......
src/utils/properties.js
View file @ efa3717a
......@@ -52,13 +52,13 @@ export default {
value: undefined
},
horizonCenter: {
title: '水平偏移',
title: '水平居中偏移',
type: 'inputNumber',
value: undefined,
//desc: '相对于父元素中心点的水平偏移，0为正中心'
},
verticalCenter: {
title: '垂直偏移',
title: '垂直居中偏移',
type: 'inputNumber',
value: undefined,
//desc: '相对于父元素中心点的垂直偏移，0为正中心'
......
src/views/Editor.vue
View file @ efa3717a
......@@ -90,9 +90,11 @@
await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
console.log(e);
});
setTimeout(() => {
//startCodeSyncServe(this.codeSyncServeConfig);
}, 100);
if(this.codeSyncServeConfig.autoLaunch){
setTimeout(() => {
startCodeSyncServe(this.codeSyncServeConfig);
}, 100);
}
this.loadProject().catch(e => {
console.log(e);
......
src/views/Editor/BottomBar/CodeSyncIndicator.vue
View file @ efa3717a
......@@ -6,13 +6,13 @@
<script>
import events from "../../../global-events";
import {codeSyncServeEnabled} from "../../../code-sync-serve";
import {codeSyncServeConnected} from "../../../code-sync-serve";
export default {
name: "CodeSyncIndicator",
data() {
return {
enabled: codeSyncServeEnabled,
enabled: codeSyncServeConnected,
}
},
mounted() {
......
src/views/Editor/Inspector/BehaviorTab2.vue deleted 100644 → 0
View file @ 1e272d27
<template>
<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'">
<div>{{events[key]}}</div>
<div >
<!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
</el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button>
</div>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="isPreview => handleBehaviorsChange(isPreview)" ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
import events from "@/global-events.js"
export default {
name: 'BehaviorTab2',
data() {
let eventsObj = {};
const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = {
once: false,
behaviors: []
};
});
return {
events,
eventsObj,
behaviors: [],
currentEvent: ''
};
},
components: { BehaviorEditorDialog },
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
showBehaviorEditor(evn, key) {
this.currentEvent = key;
this.behaviors = evn.behaviors || [];
this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
},
/**
* 当前选中组件发生变化时，更新eventsObj的数据
*/
updateEventsObj() {
let _events = this.activeComponent.events || {};
_.forIn(this.eventsObj, (value, key) => {
if (_events[key]) {
this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
} else {
value.once = false;
value.behaviors = [];
}
});
},
/**
* 是否只执行一次
*/
handleOnceChange(key, v) {
let _event = this.eventsObj[key];
// 如果没有behavior，once没有用处，则不执行
if (_event.behaviors && _event.behaviors.length) {
let event = {};
event[key] = {
once: v,
behaviors: _event.behaviors
};
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
}
},
/**
* 行为发生变化，同步数据
*/
handleBehaviorsChange(isPreview) {
if (this.currentEvent /* && v && v.length*/) {
let event = {};
let currentEvent = this.eventsObj[this.currentEvent];
event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
this.updateEventsObj();
}
if(isPreview){
events.$emit('saveAndPreview')
}
},
/**
* 删除行为
*/
deleteBehavior(key) {
let _events = this.activeComponent.events || {};
delete _events[key];
this.$store.dispatch('modifyActiveView', {
events: _events
});
this.updateEventsObj();
}
},
watch: {
'activeComponent.uuid': function() {
this.updateEventsObj();
console.log('activeComponent.uuid change');
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/Editor/Inspector/PropsTab.vue
View file @ efa3717a
<template>
<div class="zero-inspector-props-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
<el-form ref="form" size="mini" :model="form" label-width="100px" @submit.native.prevent>
<el-form-item label="名称">
<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
</el-form-item>
......
src/views/Editor/behavior-editor/MetaEditorDialog.vue
View file @ efa3717a
......@@ -99,25 +99,25 @@
:options="cmOptions"
@cursorActivity="onCodeChange"
/>-->
<!--<monaco-editor
<monaco-editor
ref="codeEditor"
v-if="meta"
:code="meta.script"
:options="monacoConfig"
/>-->
<code-editor v-if="meta" v-model="meta.script"/>
/>
<!-- <code-editor v-if="meta" v-model="meta.script" /> -->
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<div>
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta"
>PasteMeta</el-button
>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
</div>
<div class="button-bar">
<el-button size="mini" plain @click="cancel">{{
$t("Cancel")
}}</el-button>
......@@ -133,7 +133,7 @@
<script>
import PropsEditorDialog from "./PropsEditorDialog";
//import MonacoEditor from "../components/MonacoEditor";
import MonacoEditor from "../components/MonacoEditor";
import copy from "copy-to-clipboard";
import { clonePureObj } from "../../../utils";
import events from "../../../global-events";
......@@ -148,7 +148,7 @@ export default {
CodeEditor,
CodeSyncIndicator,
PropsEditorDialog,
//"monaco-editor": MonacoEditor
"monaco-editor": MonacoEditor
},
data() {
return {
......@@ -222,9 +222,10 @@ export default {
this.$t("Alert")
).catch(e => {});
} else {
//this.meta.script = this.$refs.codeEditor.editor.getValue();
this.meta.script = this.$refs.codeEditor.editor.getValue();
this.$emit("input", this.meta, isPreview);
this.visible = false;
this.meta = null;
}
} else {
return false;
......@@ -233,6 +234,7 @@ export default {
},
cancel() {
this.visible = false;
this.meta = null;
},
copyMeta() {
copy(JSON.stringify(this.meta));
......
src/views/Editor/behavior-editor/MetaSearchDialog.vue
View file @ efa3717a
......@@ -12,6 +12,7 @@
</div>
</div>
<div slot="footer" class="dialog-footer">
<div></div>
<el-button size="mini" plain @click="close">{{$t('Close')}}</el-button>
</div>
</el-dialog>
......
src/views/Editor/behavior-editor/PropsEditorDialog.vue
View file @ efa3717a
......@@ -71,6 +71,7 @@
</el-scrollbar>
</div>
<div slot="footer" class="dialog-footer">
<div></div>
<div class="button-bar">
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
......
src/views/Editor/components/MonacoEditor.vue
View file @ efa3717a
<template>
<div id="container"></div>
<div id="container"></div>
</template>
<script>
import * as monaco from "monaco-editor";
export default {
name: "MonacoEditor",
props: {
options: Object,
code: String
},
async mounted() {
const { options, code } = this;
const res = await fetch(
"http://yun.duiba.com.cn/editor/zeroing/types/types.d.ts"
);
const types = await res.text();
import * as monaco from "monaco-editor";
const defaultConfig = {
language: "javascript",
value: "",
minimap: {
enabled: false
}
};
const typesUrl = [
"http://yun.duiba.com.cn/editor/zeroing/types/types.d.ts",
"http://yun.duiba.com.cn/editor/zeroing/types/process-context.v4.d.ts",
];
// compiler options
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES6,
allowNonTsExtensions: true,
allowJs: true
});
// extra libraries
monaco.languages.typescript.javascriptDefaults.addExtraLib(
[types].join("\n")
);
const config = Object.assign({}, defaultConfig, options, { value: code });
this.editor = monaco.editor.create(
document.getElementById("container"),
config
);
}
};
export default {
name: "MonacoEditor",
props: {
options: Object,
code: String
},
async mounted() {
const {options, code} = this;
const types = await Promise.all(typesUrl.map(async url => {
const res = await fetch(url);
return res.text();
}));
const defaultConfig = {
language: "javascript",
value: "",
minimap: {
enabled: false
}
};
// compiler options
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES6,
allowNonTsExtensions: true,
allowJs: true
});
// extra libraries
monaco.languages.typescript.javascriptDefaults.addExtraLib(
types.join("\n")
);
const config = Object.assign({}, defaultConfig, options, {value: code});
this.editor = monaco.editor.create(
document.getElementById("container"),
config
);
},
destroyed() {
this.editor.dispose();
}
};
</script>
<style lang="scss" scoped>
#container {
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
}
</style>
src/views/Editor/dialogs/BehaviorEditorDialog.vue
View file @ efa3717a
......@@ -4,8 +4,11 @@
:append-to-body="true" custom-class="flex-dialog behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save And Close')}}</el-button>
<div></div>
<div>
<el-button size="mini" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save And Close')}}</el-button>
</div>
</div>
</el-dialog>
</template>
......
src/views/Editor/dialogs/CodeSyncServeDialog.vue
View file @ efa3717a
<template>
<el-dialog :title="$t('CodeSyncServe')" width="70%" :visible.sync="visible"
:append-to-body="true"
custom-class=""
custom-class="code-sync-serve-dialog"
>
<div>
<el-form label-position="right" label-width="50px" size="mini">
<el-form label-position="right" label-width="100px" size="mini">
<el-form-item :label="$t('Auto launch')">
<el-switch v-model="config.autoLaunch"/>
</el-form-item>
<el-form-item label="IP">
<el-input v-model="config.ip"/>
</el-form-item>
......@@ -15,7 +18,8 @@
</div>
<div slot="footer" class="dialog-footer">
<div>
<el-switch :value="enabled" @input="onEnableServer"/>
<span class="status">{{$t(status)}}</span>
</div>
<div>
<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
......@@ -29,7 +33,8 @@
import {mapMutations, mapState} from 'vuex'
import EnabledSetter from "../components/EnabledSetter";
import {clonePureObj} from "../../../utils";
import {startCodeSyncServe} from "../../../code-sync-serve";
import {codeSyncServeEnabled, startCodeSyncServe, stopCodeSyncServe} from "../../../code-sync-serve";
import events from '../../../global-events';
export default {
name: "CodeSyncServeDialog",
......@@ -38,12 +43,19 @@
return {
visible: false,
config: {},
enabled: codeSyncServeEnabled,
}
},
mounted() {
events.$on('code-sync-status', this.onStatusChange);
},
destroyed() {
events.$off('code-sync-status', this.onStatusChange);
},
computed: {
status() {
return this.enabled ? 'Running status' : 'Stop status';
},
...mapState({
codeSyncServeConfig(state) {
return state.env.codeSyncServeConfig;
......@@ -57,12 +69,22 @@
},
onSave() {
this.saveCodeSyncServeConfig(this.config);
startCodeSyncServe(this.config);
this.visible = false;
},
onClose() {
this.visible = false;
},
onStatusChange(v) {
this.enabled = v;
},
onEnableServer(v) {
if (v) {
startCodeSyncServe(this.config);
} else {
stopCodeSyncServe();
}
this.enabled = v;
},
...mapMutations([
'saveCodeSyncServeConfig',
]),
......
src/views/Editor/dialogs/DetailsDialog.vue
View file @ efa3717a
......@@ -21,8 +21,11 @@
</el-tab-pane>
</el-tabs>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
<div></div>
<div>
<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
</div>
</div>
</el-dialog>
</template>
......
src/views/Editor/dialogs/PackResultDialog.vue
View file @ efa3717a
......@@ -14,9 +14,12 @@
</el-collapse>
</div>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
<el-button size="mini" @click="copy">{{$t('Copy template to clipboard')}}</el-button>
<el-button size="mini" type="primary" @click="openInNewTab">{{$t('Open in new tab')}}</el-button>
<div></div>
<div>
<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
<el-button size="mini" @click="copy">{{$t('Copy template to clipboard')}}</el-button>
<el-button size="mini" type="primary" @click="openInNewTab">{{$t('Open in new tab')}}</el-button>
</div>
</div>
</el-dialog>
</template>
......
src/views/Editor/dialogs/SelectAssetDialog.vue
View file @ efa3717a
......@@ -8,6 +8,7 @@
<asset-list @click-item="onClickItem"/>
</el-scrollbar>
<div slot="footer" class="dialog-footer">
<div></div>
<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
</div>
</el-dialog>
......
src/views/Editor/dialogs/editors/AssetMappingEditorDialog.vue
View file @ efa3717a
......@@ -40,8 +40,11 @@
</div>
</el-scrollbar>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
<div></div>
<div>
<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
</div>
</div>
<select-asset-dialog ref="selectAssetDialog" @select="onSelectReplace"/>
</el-dialog>
......
src/views/Editor/dialogs/editors/CustomModuleEditor.vue
View file @ efa3717a
......@@ -17,6 +17,28 @@
:label="$t('Name')"
width="200">
</el-table-column>
<el-table-column
prop="desc"
:label="$t('Desc')"
width="60">
<template slot-scope="scope">
<el-popover
:title="scope.row.meta.name"
width="200"
trigger="click"
:content="scope.row.meta.desc">
<el-button slot="reference" size="mini" icon="el-icon-document" circle type="primary" plain/>
</el-popover>
</template>
</el-table-column>
<el-table-column
prop="events"
:label="$t('Events')"
width="60">
<template slot-scope="scope">
<el-button size="mini" icon="el-icon-guide" circle type="primary" plain @click="showEvents(scope.row)"/>
</template>
</el-table-column>
<el-table-column
prop="assets"
:label="$t('Assets')"
......@@ -45,6 +67,7 @@
</el-table-column>
<asset-mapping-editor-dialog ref="assetMappingEditorDialog" @save="onSaveAssetMapping"/>
<props-editor-dialog ref="propsEditorDialog"/>
<events-details-dialog ref="eventsDetailsDialog"/>
</el-table>
</template>
......@@ -53,10 +76,11 @@
import {clonePureObj} from "../../../../utils";
import AssetMappingEditorDialog from "./AssetMappingEditorDialog";
import PropsEditorDialog from "./CustomModuleEditor/PropsEditorDialog";
import EventsDetailsDialog from "./CustomModuleEditor/EventsDetailsDialog";
export default {
name: "CustomModuleEditor",
components: {PropsEditorDialog, AssetMappingEditorDialog},
components: {EventsDetailsDialog, PropsEditorDialog, AssetMappingEditorDialog},
data() {
return {
visible: false,
......@@ -112,6 +136,9 @@
onSaveAssetMapping(mid, assetMapping) {
this.customMetas.find(item => item.id === mid).assetMapping = assetMapping;
},
showEvents(item){
this.$refs.eventsDetailsDialog.show(item.meta);
},
...mapMutations([
'modifyCustoms',
]),
......
src/views/Editor/dialogs/editors/CustomModuleEditor/EventsDetailsDialog.vue 0 → 100644
View file @ efa3717a
<template>
<el-dialog :title="$t('Events details')" width="70%" :visible.sync="visible"
:close-on-click-modal="false"
:append-to-body="true"
custom-class="events-details-dialog"
>
<el-scrollbar v-if="meta" class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
<el-collapse class="collapse">
<el-collapse-item v-for="(group, groupName) in meta.events" :key="groupName" :title="$t('eventGroup')[groupName]" :name="groupName">
<el-collapse-item class="group" v-for="(item, key) in group" :key="key" :title="key + (item.alias ? ` (${item.alias})` : '')" :name="key">
<div class="data-item" v-for="(alias, field) of item.data">
<el-tag size="small" type="primary">{{field}}</el-tag>
<el-tag size="small" type="success">{{alias}}</el-tag>
</div>
</el-collapse-item>
</el-collapse-item>
</el-collapse>
</el-scrollbar>
<div slot="footer" class="dialog-footer">
<div></div>
<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: "EventsDetailsDialog",
data() {
return {
visible: false,
meta: null,
}
},
methods: {
show(meta) {
this.meta = meta;
this.visible = true;
},
onClose() {
this.visible = false;
},
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/Editor/dialogs/editors/CustomModuleEditor/PropsEditorDialog.vue
View file @ efa3717a
......@@ -3,6 +3,7 @@
:close-on-click-modal="false"
:append-to-body="true"
:show-close="false"
custom-class="props-editor-dialog"
>
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden"
......@@ -10,8 +11,11 @@
<props-editor v-if="data" ref="propsEditor" :data="data" :meta="meta" :linkable="false"/>
</el-scrollbar>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
<div></div>
<div>
<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
</div>
</div>
</el-dialog>
</template>
......
src/views/Home.vue
View file @ efa3717a
......@@ -22,7 +22,7 @@
</el-table-column>
<el-table-column
fixed="right"
width="180">
width="350">
<template slot="header" slot-scope="scope">
<el-checkbox
v-model="onlyMine"
......@@ -33,28 +33,28 @@
<el-button
@click.native.prevent="selectProject(scope.row)"
type="primary" icon="el-icon-edit"
size="small" circle plain>
</el-button>
size="mini" plain
>{{$t('Edit')}}</el-button>
<el-button
@click.native.prevent="selectFromHistory(scope.row)"
type="primary" icon="el-icon-coin"
size="small" circle plain>
</el-button>
icon="el-icon-coin"
size="mini" plain
>{{$t('History')}}</el-button>
<el-button
@click.native.prevent="showDuplicateProjectDialog(scope.row)"
type="success" icon="el-icon-document-copy"
size="small" circle plain>
</el-button>
icon="el-icon-document-copy"
size="mini" plain
>{{$t('Duplicate')}}</el-button>
<el-button
@click.native.prevent="exportProject(scope.row)"
type="warning" icon="icon-download"
size="small" circle plain>
</el-button>
icon="icon-download"
size="mini" plain
>{{$t('Export')}}</el-button>
<el-button
v-if="showDeleteButton"
@click.native.prevent="onDeleteProject(scope.row)"
type="danger" icon="el-icon-delete"
size="small" circle plain>
size="mini" circle plain>
</el-button>
</template>
</el-table-column>
......
src/views/Home/CreateProjectDialog.vue
View file @ efa3717a
......@@ -22,8 +22,11 @@
</el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
<el-button size="mini" type="primary" @click="doCreateProject">{{$t('Create')}}</el-button>
<div></div>
<div>
<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
<el-button size="mini" type="primary" @click="doCreateProject">{{$t('Create')}}</el-button>
</div>
</div>
</el-dialog>
</template>
......
src/views/Home/DuplicateProjectDialog.vue
View file @ efa3717a
......@@ -6,8 +6,11 @@
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
<el-button size="mini" type="primary" @click="doCreateProject">{{$t('Create')}}</el-button>
<div></div>
<div>
<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
<el-button size="mini" type="primary" @click="doCreateProject">{{$t('Create')}}</el-button>
</div>
</div>
</el-dialog>
</template>
......
src/views/Home/ProjectHistoryDialog.vue
View file @ efa3717a
......@@ -55,6 +55,7 @@
</el-pagination>
</div>
<div slot="footer" class="dialog-footer">
<div></div>
<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
</div>
</el-dialog>
......
src/views/Preview.vue
View file @ efa3717a
<template>
<div class="wrapper">
<iframe v-if="flag" ref="iframe" class="player-wrapper"></iframe>
<!--<el-dropdown class="side-bar" trigger="click" size="mini" @command="onCommand">
<el-button style="opacity: 0.5" circle plain class="micro" icon="el-icon-ice-cream-round" :underline="false"/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="refresh">刷新</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>-->
<!--<iframe ref="proxyIframe" id="proxyIframe"
src="http://activity.m.duibadev.com.cn/projectx/p7c3b4fa4/index.html?__proxy_mode1__"
@load="onProxyIframeLoaded"></iframe>-->
<el-button style="opacity: 0.5" circle plain class="side-bar micro" icon="el-icon-refresh" :underline="false"
@click="reload"/>
</div>
</template>
<script>
import {applyMock} from "./Preview/mock-serve";
import db from "../utils/db-storage";
import {newScriptEl} from "../utils";
import {newScriptContent, newScriptEl} from "../utils";
export default {
name: "Preview",
......@@ -16,6 +27,7 @@
return {
ts: '',
flag: false,
proxyReady: true,
}
},
async mounted() {
......@@ -43,6 +55,13 @@
this.buildPage();
}, 300);
},
onCommand(command) {
switch (command) {
case 'refresh':
this.reload();
break;
}
},
onVisibilityChange(e) {
if (!document.hidden) {
let ts = localStorage.getItem('preview-ts');
......@@ -56,6 +75,9 @@
}
},
async buildPage() {
if (!this.proxyReady) {
return;
}
const {projectID} = this.$route.params;
const {data, codes} = await db.get('preview', projectID);
......@@ -77,6 +99,7 @@
}
scripts.push(newScriptEl(url));
}
scripts.push(newScriptContent('var proxy_mode=true;'));
this.codes = codes;
const dataUrl = URL.createObjectURL(new Blob([JSON.stringify(data)]));
......@@ -93,8 +116,16 @@
const win = this.$refs.iframe.contentWindow;
doc.write(tpl);
//win.proxy_window = this.$refs.proxyIframe.contentWindow;
applyMock(projectID, win);
},
onProxyIframeLoaded() {
this.proxyReady = true;
//this.$refs.proxyIframe.contentWindow.postMessage('hello', '*');
this.buildPage();
},
}
}
</script>
......@@ -103,12 +134,20 @@
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.side-bar {
position: absolute;
right: 3px;
bottom: 3px;
}
.player-wrapper {
border: 0;
width: 100%;
height: 100%;
flex: 1;
}
.mock-button {
......@@ -116,4 +155,12 @@
right: 10px;
bottom: 10px;
}
#proxyIframe {
/*display: none;*/
position: absolute;
top: 0;
width: 100px;
height: 100px;
}
</style>
\ No newline at end of file
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