UP

public/json/user.json

@@ -20,6 +20,14 @@
 							"title": "拖拽排序"
 						},
 						"component": "vab/drag"
+					},
+					{
+						"path": "/template/chart",
+						"name": "chart",
+						"meta": {
+							"title": "图表 Echarts"
+						},
+						"component": "vab/chart"
 					}
 				]
 			},

src/api/index.js

@@ -1,11 +1,22 @@
 import config from "@/config";
 import http from "@/utils/request";
 
+/**
+ * 所有接口集合
+ * 每个接口对象需含有以下字段
+ * @url 接口的URL地址
+ * @name 接口名称
+ * @get|post 返回请求接口的函数
+ */
 
 const api = {
 	user: {
-		info: async function(){
+		info: {
-			return await http.get(`${config.apiUrl}/json/user.json`);
+			url: `${config.apiUrl}/json/user.json`,
+			name: "登录获取用户菜单和权限",
+			get: async function(){
+				return await http.get(this.url);
+			}
 		}
 	}
 }

src/components/scEcharts/index.vue

@@ -8,6 +8,7 @@
 	echarts.registerTheme('T', T);
 
 	export default {
+		...echarts,
 		name: "scEcharts",
 		props: {
 			height: { type: String, default: "100%" },

src/layout/components/head.vue

@@ -53,7 +53,7 @@
 				</div>
 				<template #dropdown>
 					<el-dropdown-menu>
-						<el-dropdown-item command="userInfo">个人设置</el-dropdown-item>
+						<el-dropdown-item command="uc">个人设置</el-dropdown-item>
 						<el-dropdown-item command="cmd">CMD</el-dropdown-item>
 						<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
 					</el-dropdown-menu>
@@ -100,6 +100,9 @@
 		methods: {
 			//个人信息
 			handleUser(command) {
+				if(command == "uc"){
+					this.$router.push({path: '/usercenter'});
+				}
 				if(command == "outLogin"){
 					this.$router.replace({path: '/login'});
 				}

src/layout/components/tags.vue

@@ -18,6 +18,7 @@
 			<li @click="closeOtherTabs()"><i class="el-icon-folder-delete"></i>关闭其他标签</li>
 			<hr>
 			<li @click="screen()"><i class="el-icon-full-screen"></i>全屏当前标签</li>
+			<li @click="openWindow()"><i class="el-icon-copy-document"></i>在新的窗口中打开</li>
 		</ul>
 	</transition>
 </template>
@@ -193,6 +194,16 @@
 				}
 				var element = document.getElementById('adminui-main')
 				this.$TOOL.screen(element)
+			},
+			//新窗口打开
+			openWindow(){
+				var nowTag = this.contextMenuItem;
+				var url = nowTag.href || '/';
+				if(!nowTag.meta.affix){
+					this.closeSelectedTag(nowTag)
+				}
+				window.open(url);
+				this.contextMenuVisible = false
 			}
 		}
 	}

src/router/index.js

@@ -27,7 +27,15 @@ const routes = [{
 							title: "控制台",
 							affix: true
 						},
-						component: () => import(/* webpackChunkName: "home" */ '@/views/home/index'),
+						component: () => import(/* webpackChunkName: "home" */ '@/views/home'),
+					},
+					{
+						name: "userCenter",
+						path: "/usercenter",
+						meta: {
+							title: "个人信息"
+						},
+						component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
 					}
 				]
 			}

src/style/style.less

@@ -73,6 +73,18 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .adminui-main {position: absolute;top:85px;left:0px;right:0px;bottom:0px;overflow: auto;background-color: #f6f8f9;}
 
 
+/* USERCENTER */
+.user-info {padding:20px 40px;}
+.user-info-top {text-align: center;}
+.user-info-top h2 {margin-top:10px;font-size: 24px;}
+.user-info-top p {color: #999;margin-top:5px;}
+.user-info-top button {margin-top:10px;}
+.user-info-main {padding:20px 0;}
+.user-info-main li {list-style-type:none;line-height: 2;font-size: 14px;}
+.user-info-main li i {margin-right: 10px;}
+.user-info-bottom {border-top: 1px solid #e6e6e6;}
+.user-info-bottom h2 {font-size: 14px;margin:15px 0;}
+
 .el-menu {border: none!important;}
 .el-menu-item.is-active {background: #ecf5ff;}
 .el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}

src/views/home/components/C1.vue

@@ -28,10 +28,6 @@
 				tooltip: {
 					trigger: 'axis'
 				},
-				legend: {
-					data: ['支出', '收入'],
-					right: 13,
-				},
 				xAxis: {
 					boundaryGap: false,
 					data: ['周一', '周二', '周三', '周四', '周五', '周六'],
@@ -43,39 +39,29 @@
 						"show": false
 					}
 				}],
-				series: [{
+				series: [
-						name: '支出',
-						type: 'line',
-						symbolSize: 6,
-						smooth: true,
-						lineStyle: {
-							normal: {
-								shadowColor: 'rgba(0,0,0,0.2)',
-								shadowBlur: 15,
-								shadowOffsetY: 20
-							}
-						},
-						'areaStyle': {
-							'opacity': 0.2
-						},
-						data: [35, 10, 36, 5, 5, 20],
-					},
 					{
 						name: '收入',
 						type: 'line',
 						symbolSize: 6,
 						smooth: true,
 						lineStyle: {
-							normal: {
+							width: 8,
-								shadowColor: 'rgba(0,0,0,0.2)',
+							shadowColor: 'rgba(0,0,0,0.2)',
-								shadowBlur: 15,
+							shadowBlur: 15,
-								shadowOffsetY: 20
+							shadowOffsetY: 15,
-							}
+							color: new scEcharts.graphic.LinearGradient(0, 0, 0, 1, [{
+								offset: 0,
+								color: '#409EFF'
+								}, {
+								offset: 1,
+								color: '#36CE9E'
+							}])
 						},
 						'areaStyle': {
-							'opacity': 0.2
+							'opacity': 0
 						},
-						data: [15, 15, -25, 20, 20, 8],
+						data: [15, 15, 35, 5, 35, 15],
 					},
 				],
 			};

src/views/home/index.vue

@@ -59,10 +59,10 @@
 			return {}
 		},
 		mounted(){
-
+			
 		},
 		methods: {
-
+			
 		}
 
 	}

src/views/login.vue

@@ -99,7 +99,7 @@
 				})
 			},
 			login: async function() {
-				var userInfo = await this.$API.user.info();
+				var userInfo = await this.$API.user.info.get();
 				this.$TOOL.data.set("user", userInfo.data);
 				this.$router.replace({
 					path: '/'

src/views/other/cmd.vue

@@ -17,6 +17,9 @@
 			<el-tab-pane label="config">
 				<pre class="code">{{json.config}}</pre>
 			</el-tab-pane>
+			<el-tab-pane label="api">
+				<pre class="code">{{json.api}}</pre>
+			</el-tab-pane>
 		 </el-tabs>
 
 
@@ -32,7 +35,8 @@
 				json: {
 					user: null,
 					grid: null,
-					config: null
+					config: null,
+					api: null,
 				}
 			}
 		},
@@ -40,6 +44,7 @@
 			this.json.user = this.$TOOL.data.get("user");
 			this.json.grid = this.$TOOL.data.get("grid")||'null';
 			this.json.config = this.$CONFIG;
+			this.json.api = this.$API;
 		},
 		methods: {
 			clear_all(){

src/views/template/list.vue

@@ -90,7 +90,7 @@
 			Show
 		},
 		async created() {
-			var userInfo = await this.$API.user.info();
+			var userInfo = await this.$API.user.info.get();
 			var _this = this;
 			setTimeout(function() {
 				_this.tableData = userInfo.data.menuList;

src/views/userCenter/index.vue

@@ -0,0 +1,115 @@
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :span="8">
+				<el-card shadow="never">
+					<div class="user-info">
+						<div class="user-info-top">
+							<el-avatar :size="80" src="images/avatar.jpg"></el-avatar>
+							<h2>{{ form.name||'-' }}</h2>
+							<p>{{ form.about||'无签名' }}</p>
+							<el-button type="primary" round icon="el-icon-collection-tag" size="medium">Administrator</el-button>
+						</div>
+						<div class="user-info-main">
+							<ul>
+								<li><label><i class="el-icon-user"></i></label><span>81883387@qq.com</span></li>
+								<li><label><i class="el-icon-present"></i></label><span>1988-05-07</span></li>
+								<li><label><i class="el-icon-male"></i></label><span>男</span></li>
+								<li><label><i class="el-icon-location-outline"></i></label><span>中国/上海/金山</span></li>
+								<li><label><i class="el-icon-office-building"></i></label><span>集团/上海分公司/软件研发部/摸鱼组</span></li>
+								<li><label><i class="el-icon-coin"></i></label><span>超级管理员</span></li>
+							</ul>
+						</div>
+						<div class="user-info-bottom">
+							<h2>标签</h2>
+							<el-space wrap>
+								<el-tag>HTML</el-tag>
+								<el-tag>CSS</el-tag>
+								<el-tag>JavaScript</el-tag>
+								<el-tag>NodeJs</el-tag>
+								<el-tag>Vue</el-tag>
+								<el-tag>Photoshop</el-tag>
+							</el-space>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+			<el-col :span="16">
+				<el-card shadow="never">
+					<el-tabs tab-position="top">
+						<el-tab-pane label="基本信息">
+							<el-form ref="form" :model="form" label-width="80px" style="width: 460px;margin-top:20px;">
+								<el-form-item label="账号">
+									<el-input v-model="form.user" disabled></el-input>
+								</el-form-item>
+								<el-form-item label="姓名">
+									<el-input v-model="form.name"></el-input>
+								</el-form-item>
+								<el-form-item label="性别">
+									<el-select v-model="form.sex" placeholder="请选择">
+										<el-option label="保密" value="0"></el-option>
+										<el-option label="男" value="1"></el-option>
+										<el-option label="女" value="2"></el-option>
+									</el-select>
+								</el-form-item>
+								<el-form-item label="个性签名">
+									<el-input v-model="form.about" type="textarea"></el-input>
+								</el-form-item>
+								<el-form-item>
+									<el-button type="primary">保存</el-button>
+								</el-form-item>
+							</el-form>
+						</el-tab-pane>
+						<el-tab-pane label="个人设置">
+							<el-form ref="form" :model="form" label-width="120px" style="width: 460px;margin-top:20px;">
+								<el-form-item label="布局">
+									<el-select v-model="config.theme" placeholder="请选择">
+										<el-option label="常规" value="0"></el-option>
+										<el-option label="分栏" value="1"></el-option>
+									</el-select>
+								</el-form-item>
+								<el-form-item label="控制台自由布局">
+									<el-switch v-model="config.diy"></el-switch>
+								</el-form-item>
+								<el-form-item label="多标签">
+									<el-switch v-model="config.tags"></el-switch>
+								</el-form-item>
+								<el-form-item label="系统通知">
+									<el-switch v-model="config.msg"></el-switch>
+								</el-form-item>
+								<el-form-item>
+									<el-button type="primary">保存</el-button>
+								</el-form-item>
+							</el-form>
+						</el-tab-pane>
+					</el-tabs>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'userCenter',
+		data() {
+			return {
+				form: {
+					user: "81883387@qq.com",
+					name: "Sakuya",
+					sex: "1",
+					about: "正所谓富贵险中求"
+				},
+				config: {
+					theme: '1',
+					diy: true,
+					tags: true,
+					msg: true
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/vab/chart.vue

@@ -0,0 +1,62 @@
+<template>
+	<el-main>
+		<el-alert title="感谢百度Echarts组件, SCUI经过封装后在VUE里使用更方便而且暴露Echarts所有方法,具体请查看本文件" type="success" style="margin-bottom:20px;"></el-alert>
+		<el-card shadow="never">
+			<scEcharts height="300px" :option="option"></scEcharts>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	import scEcharts from '@/components/scEcharts';
+
+	/**
+	 * 引入组件 @/components/scEcharts
+	 * 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
+	 * 支持props包括 height，width，option
+	 * 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
+	 */
+
+	export default {
+		name: 'chart',
+		components: {
+			scEcharts
+		},
+		data() {
+			return {
+				option: {
+					title: {
+						text: 'Echarts Demo',
+						subtext: '优雅的经过scEcharts组件封装',
+					},
+					grid: {
+						top: '80px'
+					},
+					tooltip: {
+						trigger: 'axis'
+					},
+					xAxis: {
+						type: 'category',
+						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+					},
+					yAxis: {
+						type: 'value'
+					},
+					series: [{
+						data: [120, 200, 150, 80, 70, 110, 130],
+						type: 'bar',
+						barWidth: '20px',
+					},
+					{
+						data: [110, 180, 120, 120, 60, 90, 110],
+						type: 'bar',
+						barWidth: '20px',
+					}]
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>