Skip to content

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

实现psd导入功能 

实现视图导出功能
parent 26881ed0
Hide whitespace changes
Inline Side-by-side
Showing with 213 additions and 75 deletions
docs/项目拆分.xmind
View file @ 0a4a6f2f
No preview for this file type
mock/api/project/query/data/index.js
View file @ 0a4a6f2f
......@@ -10,6 +10,7 @@ const data = {
{
name: 'node1',
type: 'node',
uuid: 'aaa',
properties: {
x: 0,
y: 0,
......@@ -25,6 +26,7 @@ const data = {
{
name: 'node2',
type: 'label',
uuid: 'bbb',
properties: {
text: '',
color: 'black',
......@@ -35,6 +37,7 @@ const data = {
{
"name": "node3",
type: 'image',
uuid: 'ccc',
properties: {
source: '',
}
......@@ -42,6 +45,7 @@ const data = {
{
"name": "node4",
type: 'rect',
uuid: 'ddd',
properties: {
fillColor: 'white',
strokeColor: 'black',
......
src/config.js
View file @ 0a4a6f2f
......@@ -2,10 +2,11 @@
* Created by rockyl on 2019-09-19.
*/
export const API_HOST = 'http://10.10.94.31:7777';
export const API_HOST = 'http://10.10.93.73:7777';
//export const API_HOST = 'http://localhost:3002';
export const UPLOAD_FILE_URL = API_HOST + '/api/uploadFile';
export const PARSE_BUNDLE_URL = API_HOST + '/api/parsePSD';
//文件类型图标 t表示展示缩略图
export const fileTypeIcon = {
......
src/store/index.js
View file @ 0a4a6f2f
......@@ -29,6 +29,8 @@ export default new Vuex.Store({
'addAsset',
'deleteAsset',
'modifyAsset',
'importView',
'importAssets',
'addDataMapping',
'deleteDataMapping',
'modifyDataMapping',
......
src/store/modules/project.js
View file @ 0a4a6f2f
......@@ -2,11 +2,13 @@
* Created by rockyl on 2019-09-19.
*/
import Vue from "vue";
import JSZip from "jszip";
import {projectApi} from "../../api";
import {compoleteComponentData} from '../../utils/compoleteCmpData';
import path from "path";
import generateUUID from "uuid/v4";
import {saveAs} from "../../utils";
export const projectStore = {
state: {
......@@ -88,11 +90,17 @@ export const projectStore = {
state.data.views.push(child);
}
},
importView(state, view){
state.data.views.push(view);
},
deleteNode(state, {node, parentNode}) {
const index = parentNode.children.indexOf(node);
parentNode.children.splice(index, 1);
const parentChildren = parentNode.children || parentNode;
const index = parentChildren.indexOf(node);
parentChildren.splice(index, 1);
},
importAssets(state, assets){
state.data.assets.push(...assets);
},
addAsset(state, {url, file}) {
const ext = path.extname(file.name);
state.data.assets.push({
......@@ -229,6 +237,12 @@ export const projectStore = {
commit('activeComponent', data);
},
exportView({state}, view) {
let zip = new JSZip();
zip.file('view.json', JSON.stringify(view));
zip.generateAsync({type:"blob"}).then(function(content) {
saveAs(content, `view-${view.name}.zrv`);
});
},
},
};
src/themes/light/editor.scss
View file @ 0a4a6f2f
......@@ -2,6 +2,7 @@
@import "pane";
@import "views";
@import "assets";
@import "behavior";
.editor {
display: flex;
......
src/themes/light/views.scss
View file @ 0a4a6f2f
......@@ -9,13 +9,20 @@
.header-bar{
padding: 1px;
border-bottom: 1px solid $--pane-border-color;
display: flex;
flex-direction: row;
a{
padding: 0 5px;
}
a:not(:first-child){
.menu-item + .menu-item{
border-left: 2px solid $--pane-border-color;
}
.import-file{
}
}
.tree-scrollbar {
......@@ -25,7 +32,7 @@
.el-tree-node__content:hover{
& > .tree-node > .more-button{
display: block;
visibility: visible;
}
}
......@@ -37,10 +44,14 @@
.node-name{
flex: 1;
width: 0;
text-overflow: ellipsis;
overflow: hidden;
font-size: 14px;
}
.more-button{
display: none;
visibility: hidden;
}
}
}
......
src/utils/index.js
View file @ 0a4a6f2f
......@@ -2,7 +2,7 @@
* Created by rockyl on 2019-09-19.
*/
import { Message, Loading } from "element-ui";
import {Message, Loading} from "element-ui";
import i18n from '../i18n'
import generateUUID from "uuid/v4";
......@@ -45,3 +45,22 @@ export function strEllipsis(str, maxLength = 0, rightOffset = 0) {
return result;
}
export function saveAs(blob, fileName) {
if ('msSaveOrOpenBlob' in navigator) {
navigator.msSaveOrOpenBlob(blob, fileName);
} else {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
setTimeout(()=>{
URL.revokeObjectURL(url);
}, 500);
}
}
src/views/BehaviorEditorWrapper.vue 0 → 100644
View file @ 0a4a6f2f
<template>
<behavior-editor></behavior-editor>
</template>
<script>
import BehaviorEditor from "./Editor/behavior-editor/BehaviorEditor";
export default {
name: "BehaviorEditorWrapper",
components: {BehaviorEditor}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/Editor/Views.vue
View file @ 0a4a6f2f
......@@ -2,9 +2,17 @@
<pane class="views" icon="el-icon-s-grid" :title="$t('panes.Views')">
<div class="container">
<div class="header-bar">
<el-link @click="toAddView">{{$t('Add')}}</el-link>
<el-link @click="toImportView">{{$t('Import')}}</el-link>
<el-link @click="toExportView">{{$t('Export')}}</el-link>
<el-link class="menu-item" @click="toAddView">{{$t('Add')}}</el-link>
<el-upload
class="menu-item import-file"
:action="importFileUrl"
name="file"
:show-file-list="false"
:on-success="uploadFileSuccess"
:on-error="uploadFileError"
>
<el-link @click="toImportView">{{$t('Import')}}</el-link>
</el-upload>
</div>
<el-scrollbar class="tree-scrollbar" wrap-class="wrap-x-hidden">
<el-tree
......@@ -16,10 +24,11 @@
:default-expand-all="true"
@node-click="handleNodeClick"
empty-text=""
:allow-drag="allowDrag"
>
<div slot-scope="{ node, data }" class="tree-node">
<div class="node-name">
<span>{{data.name}}</span>
{{data.name}}
</div>
<el-dropdown class="more-button" size="mini" trigger="click"
......@@ -27,6 +36,8 @@
<el-link icon="el-icon-more" :underline="false" @click.stop/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="delete">{{$t('Delete')}}</el-dropdown-item>
<el-dropdown-item command="export" divided v-if="!node.parent.parent">{{$t('Export')}}
</el-dropdown-item>
<el-dropdown-item v-for="(type, key, index) in $t('view_node_menu')"
:key="key"
:command="'add_node_' + key"
......@@ -43,68 +54,100 @@
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import Pane from '../../components/Pane';
import {mapState, mapMutations, mapActions} from 'vuex';
import Pane from '../../components/Pane';
import {PARSE_BUNDLE_URL} from "../../config";
export default {
name: 'Views',
components: {Pane},
data() {
return {
defaultProps: {
children: 'children',
label: 'name'
}
};
},
computed: {
importFileUrl() {
return PARSE_BUNDLE_URL;
},
...mapState({
views: state => state.project.data.views
})
},
methods: {
allowDrag(draggingNode) {
return draggingNode.parent.parent;
},
/**
* 点击左侧视图列表
*/
handleNodeClick(data) {
this.$store.commit('activeComponent', data);
},
toAddView() {
this.$prompt(this.$t('Input view name'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Cancel'),
inputPattern: /^.{1,64}$/,
inputErrorMessage: this.$t('Invalid view name')
})
.then(({value}) => {
this.addNode({
name: value,
type: 'node'
});
})
.catch(() => {
});
},
toImportView() {
},
selectNode(data, node, target) {
},
onMoreMenu(command, data, node) {
switch (command) {
case 'delete':
this.deleteNode({
node: data,
parentNode: node.parent.data
});
break;
case 'export':
this.exportView(data);
break;
default:
if (command.startsWith('add_node_')) {
const type = command.substr('add_node_'.length);
this.addNode({
node: data,
type,
name: 'node'
});
}
break;
}
},
uploadFileSuccess(response, file) {
if (response.success) {
console.log('upload success', response);
const {view, assets} = response.data;
export default {
name: 'Views',
components: { Pane },
data() {
return {
defaultProps: {
children: 'children',
label: 'name'
}
};
},
computed: {
...mapState({
views: state => state.project.data.views
})
},
methods: {
/**
* 点击左侧视图列表
*/
handleNodeClick(data) {
this.$store.commit('activeComponent', data);
},
toAddView() {
this.$prompt(this.$t('Input view name'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Cancel'),
inputPattern: /^.{1,64}$/,
inputErrorMessage: this.$t('Invalid view name')
})
.then(({ value }) => {
this.addNode({
name: value,
type: 'node'
});
})
.catch(() => {});
},
toImportView() {},
toExportView() {},
selectNode(data, node, target) {},
onMoreMenu(command, data, node) {
if (command === 'delete') {
this.deleteNode({
node: data,
parentNode: node.parent.data
});
} else if (command.startsWith('add_node_')) {
const type = command.substr('add_node_'.length);
this.addNode({
node: data,
type,
name: 'node'
});
}
},
...mapMutations(['deleteNode', 'addNode'])
}
};
this.importView(view);
this.importAssets(assets);
} else {
this.uploadFileError();
}
},
uploadFileError() {
console.log('upload error')
},
...mapMutations(['importView', 'importAssets', 'deleteNode', 'addNode']),
...mapActions(['exportView']),
}
};
</script>
<style scoped>
......
yarn.lock
View file @ 0a4a6f2f
......@@ -3956,6 +3956,11 @@ ignore@^4.0.3:
resolved "https://registry.npm.taobao.org/ignore/download/ignore-4.0.6.tgz?cache=0&sync_timestamp=1565775199290&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fignore%2Fdownload%2Fignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
integrity sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=
immediate@~3.0.5:
version "3.0.6"
resolved "https://registry.npm.taobao.org/immediate/download/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
import-cwd@^2.0.0:
version "2.1.0"
resolved "https://registry.npm.taobao.org/import-cwd/download/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
......@@ -4520,6 +4525,16 @@ jsprim@^1.2.2:
json-schema "0.2.3"
verror "1.10.0"
jszip@^3.2.2:
version "3.2.2"
resolved "https://registry.npm.taobao.org/jszip/download/jszip-3.2.2.tgz#b143816df7e106a9597a94c77493385adca5bd1d"
integrity sha1-sUOBbffhBqlZepTHdJM4WtylvR0=
dependencies:
lie "~3.3.0"
pako "~1.0.2"
readable-stream "~2.3.6"
set-immediate-shim "~1.0.1"
killable@^1.0.1:
version "1.0.1"
resolved "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
......@@ -4578,6 +4593,13 @@ lcid@^2.0.0:
dependencies:
invert-kv "^2.0.0"
lie@~3.3.0:
version "3.3.0"
resolved "https://registry.npm.taobao.org/lie/download/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
integrity sha1-3Pgt7lRfRgdNryAMfBxaCOD0D2o=
dependencies:
immediate "~3.0.5"
lines-and-columns@^1.1.6:
version "1.1.6"
resolved "https://registry.npm.taobao.org/lines-and-columns/download/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
......@@ -5592,7 +5614,7 @@ p-try@^2.0.0:
resolved "https://registry.npm.taobao.org/p-try/download/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
integrity sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=
pako@~1.0.5:
pako@~1.0.2, pako@~1.0.5:
version "1.0.10"
resolved "https://registry.npm.taobao.org/pako/download/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
integrity sha1-Qyi621CGpCaqkPVBl31JVdpclzI=
......@@ -6861,6 +6883,11 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
resolved "https://registry.npm.taobao.org/set-blocking/download/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
set-immediate-shim@~1.0.1:
version "1.0.1"
resolved "https://registry.npm.taobao.org/set-immediate-shim/download/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
set-value@^2.0.0, set-value@^2.0.1:
version "2.0.1"
resolved "https://registry.npm.taobao.org/set-value/download/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
......
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