素材面板拆分成左右，并加入属性子面板

mock/api/project/query/data/index.js

@@ -2,7 +2,7 @@
  * Created by rockyl on 2019-09-23.
  */
 
-const data1 = {
+const data = {
 	"views": [
 		{
 			"name": "view1",
@@ -71,7 +71,7 @@ const data1 = {
 		}
 	]
 };
-const data = {
+const data1 = {
 	"views": [
 	],
 	"assets": [

src/themes/light/assets.scss

 @import "var";
 
 .assets {
-	.container {
+	.wrapper {
 		display: flex;
 		flex: 1;
 		flex-direction: column;
@@ -19,6 +19,39 @@
 			}
 		}
 
+		.container{
+			display: flex;
+			flex: 1;
+		}
+
+		.properties{
+			width: 30%;
+			padding: 3px;
+			font-size: 12px;
+			line-height: 14px;
+			color: $--color-text-primary;
+			border-right: 1px solid $--border-color-base;
+
+			.item{
+				border-bottom: 1px solid $--border-color-base;
+			}
+
+			p{
+				word-break: break-all;
+				margin: 0;
+			}
+
+			.name{
+				font-size: 16px;
+				line-height: 22px;
+				width: 100%;
+			}
+			.ext{
+				color: $--color-text-regular;
+			}
+
+		}
+
 		.file-list {
 			display: flex;
 			flex: 1;
@@ -104,7 +137,7 @@
 			.file-uploader {
 				width: 60px;
 				height: 60px;
-				margin: 5px 5px 5px;
+				margin: 4px;
 				border: 1px dashed $--color-text-secondary;
 				border-radius: 6px;
 				cursor: pointer;

src/themes/light/base.scss

@@ -20,5 +20,5 @@ html, body, #app {
 	right: 0;
 	bottom: 0;
 	background-color: rgba(0,0,0,0.7);
-	z-index: 2;
+	z-index: 2000;
 }

src/views/Editor/Assets.vue

 <template>
 	<pane class="assets" icon="el-icon-s-shop" :title="$t('panes.Assets')">
-		<div class="container">
+		<div class="wrapper">
 			<!--<div class="header-bar">
 				<el-link>{{$t('Upload')}}</el-link>
 			</div>-->
-			<el-scrollbar class="assets-scrollbar" wrap-class="wrap-x-hidden" view-class="scrollbar-view">
+			<div class="container">
+				<div class="properties">
+					<template v-if="currentItem">
+						<div class="item">
+							<p class="name">{{currentItem.name}}</p>
+							<p class="ext">{{currentItem.ext}}</p>
+						</div>
+
+						<div class="item">
+							<p v-for="(field, index) in showFields" :key="index">
+								<span>{{field}}</span>:
+								<span>{{currentItem[field]}}</span>
+							</p>
+						</div>
+					</template>
+				</div>
+				<el-scrollbar class="assets-scrollbar" wrap-class="wrap-x-hidden"
+				              view-class="scrollbar-view">
 					<div class="file-list">
 						<el-upload
 							class="file-uploader"
@@ -17,10 +34,12 @@
 						>
 							<i class="el-icon-plus file-uploader-icon"></i>
 						</el-upload>
-					<file-item v-for="(file, index) in assets" :data="file" :key="index" @show-file-details="showFileDetails"/>
+						<file-item v-for="(asset, index) in assets" :data="asset" :key="index" @show-file-details="showFileDetails"
+						           @click="onItemClick(asset)"/>
 					</div>
 				</el-scrollbar>
 			</div>
+		</div>
 		<assets-show ref="assetsShow"/>
 	</pane>
 </template>
@@ -31,40 +50,47 @@
 	import FileItem from "./Assets/FileItem";
 	import AssetsShow from "./Assets/AssetsShow";
 	import {UPLOAD_FILE_URL} from "../../config";
+	import SplitPanes from 'splitpanes'
 
 	export default {
 		name: "Assets",
-		components: {AssetsShow, FileItem, Pane},
+		components: {AssetsShow, FileItem, Pane, SplitPanes},
 		data() {
-			return {}
+			return {
+				showFields: ['url', 'uuid'],
+				currentItem: null,
+			}
 		},
 		computed: {
-			uploadFileUrl(){
+			uploadFileUrl() {
 				return UPLOAD_FILE_URL;
 			},
 			...mapState({
 				assets: state => state.project.data.assets
 			}),
 		},
-		mounted(){
-
+		mounted() {
+			this.currentItem = null;
 		},
 		methods: {
-			showFileDetails(file){
+			showFileDetails(file) {
 				this.$refs.assetsShow.show(file);
 			},
-			uploadFileSuccess(response, file){
-				if(response.success){
+			onItemClick(asset) {
+				this.currentItem = asset;
+			},
+			uploadFileSuccess(response, file) {
+				if (response.success) {
 					//console.log('upload success', response, file);
 					this.addAsset({
 						url: response.url,
 						file,
 					})
-				}else{
+				} else {
 					this.uploadFileError();
 				}
 			},
-			uploadFileError(){
+			uploadFileError() {
 				console.log('upload error')
 			},
 			...mapMutations([

src/views/Editor/Assets/AssetsShow.vue

@@ -12,13 +12,9 @@
 				<div class="wrapper">
 					<el-button class="close-button" size="mini" circle icon="el-icon-close" @click="hide"></el-button>
 					<div class="name-bar">
-						<el-input size="mini" class="item" v-model="file.name" readonly>
-							<template slot="prepend"><span class="field">name</span></template>
-							<el-button slot="append" icon="el-icon-document-copy" @click="copyValue('name')"></el-button>
-						</el-input>
-						<el-input size="mini" class="item" v-model="file.url" readonly>
-							<template slot="prepend"><span class="field">url</span></template>
-							<el-button slot="append" icon="el-icon-document-copy" @click="copyValue('url')"></el-button>
+						<el-input v-for="(field, index) in showFields" :key="index" size="mini" class="item" v-model="file[field]" readonly>
+							<template slot="prepend"><span class="field">{{field}}</span></template>
+							<el-button slot="append" icon="el-icon-document-copy" @click="copyValue(field)"></el-button>
 						</el-input>
 					</div>
 					<el-image class="big-image" :src="imageUrl" fit="contain" @load="onImageLoaded"/>
@@ -45,6 +41,7 @@
 				visible: false,
 				file: null,
 				size: '',
+				showFields: ['name', 'url', 'uuid'],
 			}
 		},
 		watch: {

src/views/Editor/Assets/FileItem.vue

 <template>
-	<div class="file-item">
+	<div class="file-item" @click="$emit('click', $event)">
 		<div class="icon">
 			<i v-if="!showThumbnail" draggable="true" class="file-icon" :class="fileIcon"></i>
 			<img @dragstart="assetDragStart(data)" v-if="showThumbnail" draggable="true" class="thumbnail" :src="thumbnailUrl" alt="thumb" @dblclick="onDbclick()">
@@ -34,7 +34,8 @@
 		},
 		computed: {
 			fileIcon() {
-				return 'icon-' + fileTypeIcon[this.data.ext];
+				let icon = fileTypeIcon[this.data.ext];
+				return 'icon-' + (icon ? fileTypeIcon[this.data.ext] : fileTypeIcon['']);
 			},
 			showThumbnail() {
 				return fileTypeIcon[this.data.ext] === 't';