init

mock/api/project/details.json

+{
+	"success": true,
+	"data": {
+		"id": "6e1c9eadf8e28",
+		"name": "测试",
+		"creator": "卞龙亭",
+		"operator": "卞龙亭",
+		"create_time": "2019-09-19T06:56:01.000Z",
+		"update_time": "2019-09-19T06:56:01.000Z",
+		"data": {
+			"views": [
+				{
+					"name": "view1",
+					"children": [
+						{
+							"name": "label"
+						},
+						{
+							"name": "image"
+						}
+					]
+				},
+				{
+					"name": "view2"
+				}
+			],
+			"assets": [
+				{
+					"name": "bg.jpg",
+					"url": "/bg.jpg"
+				},
+				{
+					"name": "btn-join.png",
+					"url": "/btn-join.png"
+				}
+			]
+		}
+	}
+}

src/api/common.js

@@ -49,7 +49,7 @@ export async function fetchApi(uri, {params, method, contentType, errMessage} =
 
 	const response = await fetch(url, options);
 	const jsonObj = await response.json();
-	console.log(jsonObj);
+	//console.log(jsonObj);
 
 	if (jsonObj.success) {
 		return jsonObj.data;

src/api/project.js

@@ -39,7 +39,7 @@ export async function deleteOne(id) {
 }
 
 export async function getOne(id) {
-	return await fetchApi('/api/project/detail', {
+	return await fetchApi('/api/project/details', {
 		params: {id},
 		method: 'get',
 		errMessage: 'Failed to get project',

src/locales/en.json

@@ -2,12 +2,16 @@
   "Alert": "Alert",
   "Confirm": "Confirm",
   "Cancel": "Cancel",
+  "Save": "Save",
+  "Failed to fetch": "Network error!",
   "In processing": "In processing",
   "Projects": "Projects",
   "copy": "copy",
   "No projects": "No projects",
   "Create": "Create",
+  "Project details": "Project details",
   "Project name": "Project name",
+  "Data mapping": "Data mapping",
   "Template": "Template",
   "Preparing": "Preparing…",
   "Create project": "Create project",

src/router.js

@@ -5,7 +5,7 @@ import Home from './views/Home.vue'
 Vue.use(Router);
 
 export default new Router({
-	mode: 'history',
+	//mode: 'history',
 	base: process.env.BASE_URL,
 	routes: [
 		{
@@ -14,7 +14,7 @@ export default new Router({
 			component: Home
 		},
 		{
-			path: '/editor',
+			path: '/editor/:projectID',
 			name: 'editor',
 			// route level code-splitting
 			// this generates a separate chunk (about.[hash].js) for this route

src/store/modules/project.js

@@ -9,15 +9,25 @@ export const projectStore = {
 		id: '',
 		name: '',
 		creator: '',
-		views: [],
-		assets: [],
+		data: {
+			views: [],
+			assets: [],
+			dataMapping: [],
+		}
 	},
 	mutations: {
 		updateProject(state, project) {
-			const {id, name, creator} = project;
-			state.id = id;
-			state.name = name;
-			state.creator = creator;
+			Object.assign(state, project);
+			const {data} = state;
+			if(!data.views){
+				data.views = [];
+			}
+			if(!data.assets){
+				data.assets = [];
+			}
+			if(!data.dataMapping){
+				data.dataMapping = [];
+			}
 		},
 	},
 	actions: {

src/themes/light/base.scss

@@ -12,3 +12,13 @@ html, body, #app {
 
 	font-family: Arial, sans-serif;
 }
+
+.modal-layer{
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0,0,0,0.7);
+	z-index: 2;
+}

src/themes/light/editor.scss

 @import "splitspanes";
 @import "pane";
+@import "views";
+@import "assets";
 
 .editor {
 	display: flex;
@@ -7,12 +9,15 @@
 	flex-direction: column;
 
 	.tool-bar {
+		display: flex;
+		align-items: center;
 		background-color: $--pane-background-color;
 		margin-bottom: 1px;
+		padding: 5px 10px;
+		font-size: 13px;
 
 		.menu{
-			padding: 5px 10px;
-
+			flex: 1;
 			a:not(:first-child){
 				margin-left: 10px;
 			}
@@ -20,7 +25,7 @@
 	}
 
 	.pane-container {
-		height: 100%;
+		flex: 1;
 	}
 }
 

src/themes/light/index.scss

@@ -8,3 +8,20 @@
 @import "./editor.scss";
 
 @import "~element-ui/packages/theme-chalk/src/index.scss";
+
+.el-tree {
+	background: transparent;
+}
+
+.wrap-x-hidden {
+	overflow-x: hidden;
+}
+
+.wrap-y-hidden {
+	overflow-y: hidden;
+}
+
+.el-tree-node__content > .el-tree-node__expand-icon{
+	padding: 6px 0;
+}
+

src/themes/light/var.scss

@@ -23,8 +23,8 @@ $--background-color-base: #F5F5F5;
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
 //customs
-$--pane-background-color: mix($--background-color-base, $--color-black, 90%);
-$--pane-border-color: mix($--background-color-base, $--color-black, 80%);
+$--pane-background-color: mix($--background-color-base, $--color-black, 95%);
+$--pane-border-color: mix($--background-color-base, $--color-black, 90%);
 
 $main-border-color: mix($--background-color-base, $--color-white, 80%);
 

src/themes/light/views.scss

+@import "var";
+
+.views{
+	.container{
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+
+		.header-bar{
+			padding: 1px;
+			border-bottom: 1px solid $--pane-border-color;
+
+			a{
+				padding: 0 5px;
+			}
+			a:not(:first-child){
+				border-left: 2px solid $--pane-border-color;
+			}
+		}
+
+		.tree-scrollbar {
+			width: 100%;
+			flex: 1;
+		}
+	}
+}
\ No newline at end of file

src/views/Editor.vue

@@ -11,20 +11,28 @@
 			</split-panes>
 			<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
 		</split-panes>
+		<project-details-dialog ref="projectDialogsDialog"/>
+		<data-mapping-dialog ref="dataMappingDialog"/>
 	</div>
 </template>
 
 <script>
+	import {mapState, mapActions} from 'vuex'
 	import SplitPanes from 'splitpanes'
 	import ToolBar from "./Editor/ToolBar";
 	import Inspector from "./Editor/Inspector";
 	import Views from "./Editor/Views";
 	import Playground from "./Editor/Playground";
 	import Assets from "./Editor/Assets";
+	import ProjectDetailsDialog from "./Editor/dialogs/ProjectDetailsDialog";
+	import DataMappingDialog from "./Editor/dialogs/DataMappingDialog";
+	import {playWaiting} from "../utils";
 
 	export default {
 		name: 'Editor',
 		components: {
+			DataMappingDialog,
+			ProjectDetailsDialog,
 			Assets,
 			Playground,
 			Views,
@@ -39,6 +47,8 @@
 			}
 		},
 		mounted() {
+			const {projectID} = this.$route.params;
+			playWaiting(this.updateProject(projectID), this.$t('Preparing')).catch(e => {});
 		},
 		methods: {
 			getSize(id, side) {
@@ -51,7 +61,18 @@
 			},
 			clickMenu(menuItem){
 				console.log(menuItem);
-			}
+				switch(menuItem){
+					case 'details':
+						this.$refs.projectDialogsDialog.show();
+						break;
+					case 'data-mapping':
+						this.$refs.dataMappingDialog.show();
+						break;
+				}
+			},
+			...mapActions([
+				'updateProject'
+			])
 		}
 	}
 </script>

src/views/Editor/ToolBar.vue

 <template>
 	<div class="tool-bar">
 		<sample-menu :data="menu" @click-menu="clickMenu"/>
+		<div>
+			[{{project.name}}]
+		</div>
 	</div>
 </template>
 
 <script>
+	import {mapState, mapActions} from 'vuex'
 	import SampleMenu from "../../components/SampleMenu";
 
 	export default {
@@ -20,6 +24,11 @@
 				menu,
 			}
 		},
+		computed: {
+			...mapState([
+				'project'
+			])
+		},
 		methods: {
 			clickMenu(menuItem) {
 				this.$emit('click-menu', menuItem);

src/views/Editor/Views.vue

 <template>
-	<pane icon="el-icon-s-grid" :title="$t('panes.Views')">
-
+	<pane class="views" icon="el-icon-s-grid" :title="$t('panes.Views')">
+		<div class="container">
+			<div class="header-bar">
+				<el-link>导入</el-link>
+				<el-link>导出</el-link>
+			</div>
+			<el-scrollbar class="tree-scrollbar" wrap-class="wrap-x-hidden">
+				<el-tree
+					:data="views"
+					:props="defaultProps"
+					:expand-on-click-node="false"
+					highlight-current
+					empty-text=""
+				/>
+			</el-scrollbar>
+		</div>
 	</pane>
 </template>
 
 <script>
+	import {mapState, mapActions} from 'vuex'
 	import Pane from "../../components/Pane";
+
 	export default {
 		name: "Views",
-		components: {Pane}
+		components: {Pane},
+		data() {
+			return {
+				defaultProps: {
+					children: 'children',
+					label: 'name'
+				},
+			}
+		},
+		computed: {
+			...mapState({
+				views: state => state.project.data.views
+			}),
+		}
 	}
 </script>
 

src/views/Editor/dialogs/DataMappingDialog.vue

+<template>
+	<el-dialog :title="$t('Data mapping')" width="70%" :visible.sync="visible" @open="onOpen"
+	           :append-to-body="true">
+
+		<div slot="footer" class="dialog-footer">
+			<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
+			<el-button size="mini" type="primary" @click="onConfirm">{{$t('Save')}}</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		name: "DataMappingDialog",
+		data() {
+			return {
+				visible: false,
+			}
+		},
+		methods: {
+			show(){
+				this.visible = true;
+			},
+			onConfirm(){
+
+			},
+			onOpen(){
+
+			},
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Editor/dialogs/ProjectDetailsDialog.vue

+<template>
+	<el-dialog :title="$t('Project details')" width="70%" :visible.sync="visible" @open="onOpen"
+	           :append-to-body="true">
+
+		<div slot="footer" class="dialog-footer">
+			<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
+			<el-button size="mini" type="primary" @click="onConfirm">{{$t('Save')}}</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		name: "ProjectDetailsDialog",
+		data() {
+			return {
+				visible: false,
+			}
+		},
+		methods: {
+			show(){
+				this.visible = true;
+			},
+			onConfirm(){
+
+			},
+			onOpen(){
+
+			},
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Home.vue

@@ -104,7 +104,7 @@
 				this.editProject(projectID);
 			},
 			editProject(projectID) {
-				this.$router.push({name: 'editor', projectID});
+				this.$router.push({name: 'editor', params: {projectID}});
 			},
 			deleteAlert(project) {
 				return this.$confirm(this.$t('This action will permanently delete project', {projectName: project.name}), this.$t('Alert'), {

src/views/Home/CreateProjectDialog.vue

 <template>
-	<el-dialog :title="$t('Create project')" width="70%" :visible.sync="createDialogVisible" @open="onOpen"
+	<el-dialog :title="$t('Create project')" width="70%" :visible.sync="visible" @open="onOpen"
 	           :append-to-body="true">
 		<el-form ref="form" :model="project" :rules="rules" size="mini" label-position="right" label-width="110px" @submit.native.prevent>
 			<el-form-item :label="$t('Project name')" prop="name">
@@ -22,7 +22,7 @@
 			</el-form-item>
 		</el-form>
 		<div slot="footer" class="dialog-footer">
-			<el-button size="mini" @click="createDialogVisible=false">{{$t('Cancel')}}</el-button>
+			<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
 			<el-button size="mini" type="primary" @click="doCreateProject">{{$t('Create')}}</el-button>
 		</div>
 	</el-dialog>
@@ -36,7 +36,7 @@
 		name: "CreateProjectDialog",
 		data() {
 			return {
-				createDialogVisible: false,
+				visible: false,
 				project: {
 					name: ''
 				},
@@ -56,7 +56,7 @@
 		watch: {},
 		methods: {
 			async show() {
-				this.createDialogVisible = true;
+				this.visible = true;
 			},
 			doCreateProject() {
 				this.$refs.form.validate(async (valid) => {
@@ -64,7 +64,7 @@
 						try {
 							const project = await playWaiting(this.createProject(this.project), this.$t('Creating project'));
 
-							this.createDialogVisible = false;
+							this.visible = false;
 							this.$message({
 								message: this.$t('Create project success'),
 								type: 'success'

src/views/Home/DuplicateProjectDialog.vue

@@ -6,7 +6,7 @@
 			</el-form-item>
 		</el-form>
 		<div slot="footer" class="dialog-footer">
-			<el-button size="mini" @click="createDialogVisible=false">{{$t('Cancel')}}</el-button>
+			<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
 			<el-button size="mini" type="primary" @click="doCreateProject">{{$t('Create')}}</el-button>
 		</div>
 	</el-dialog>
@@ -20,7 +20,7 @@
 		name: "DuplicateProjectDialog",
 		data() {
 			return {
-				createDialogVisible: false,
+				visible: false,
 				project: {
 					name: ''
 				},