'新增dashboard,移除readme.vue'

README.md

@@ -37,15 +37,18 @@
 	|           |-- Header.vue           // 公共头部
 	|           |-- Home.vue           	 // 公共路由入口
 	|           |-- Sidebar.vue          // 公共左边栏
+	|           |-- Tags.vue           	 // 页面切换标签组件
 	|		|-- page                   	 // 主要路由页面
+	|           |-- 403.vue
+	|           |-- 404.vue
 	|           |-- BaseCharts.vue       // 基础图表
 	|           |-- BaseForm.vue         // 基础表单
 	|           |-- BaseTable.vue        // 基础表格
+	|           |-- DashBoard.vue        // 系统首页
 	|           |-- DragList.vue         // 拖拽列表组件
 	|           |-- Login.vue          	 // 登录
 	|           |-- Markdown.vue         // markdown组件
 	|           |-- Premission.vue       // 权限测试组件
-	|           |-- Readme.vue           // 自述组件
 	|           |-- Upload.vue           // 图片上传
 	|           |-- VueEditor.vue        // 富文本编辑器
 	|   |-- App.vue                      // 页面入口文件

README_EN.md

@@ -31,15 +31,18 @@ The scheme as a set of multi-function background frame templates, suitable for m
 	|           |-- Header.vue           // Header component
 	|           |-- Home.vue           	 // Home component
 	|           |-- Sidebar.vue          // Sidebar component
+	|           |-- Tags.vue
 	|		|-- page                   	 // Router page
+	|           |-- 403.vue
+	|           |-- 404.vue
 	|           |-- BaseCharts.vue       // BaseCharts
 	|           |-- BaseForm.vue         // BaseForm
 	|           |-- BaseTable.vue        // BaseTable
 	|           |-- Login.vue          	 // Login
+	|           |-- Dashboard.vue
 	|           |-- DragList.vue
 	|           |-- Markdown.vue         // Markdown
 	|           |-- Premission.vue
-	|           |-- Readme.vue           // Readme
 	|           |-- Upload.vue           // Upload
 	|           |-- VueEditor.vue        // VueEditor
 	|   |-- App.vue                      // Main component

src/components/common/Sidebar.vue

@@ -32,8 +32,8 @@
                 items: [
                     {
                         icon: 'el-icon-setting',
-                        index: 'readme',
-                        title: '自述文件'
+                        index: 'dashboard',
+                        title: '系统首页'
                     },
                     {
                         icon: 'el-icon-tickets',

src/components/common/Tags.vue

@@ -40,14 +40,13 @@
                 if (item) {
                     delItem.path === this.$route.path && this.$router.push(item.path);
                 }else{
-                    this.$router.push('/readme');
+                    this.$router.push('/');
                 }
             },
             // 关闭全部标签
             closeAll(){
-                console.log(1111);
                 this.tagsList = [];
-                this.$router.push('/readme');
+                this.$router.push('/');
             },
             // 关闭其他标签
             closeOther(){

src/components/page/403.vue

@@ -3,7 +3,7 @@
       <div class="error-code">4<span>0</span>3</div>
       <div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
       <div class="error-handle">
-          <router-link to="/readme">
+          <router-link to="/">
             <el-button type="primary" size="large">返回首页</el-button>
           </router-link>
           <el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>

src/components/page/404.vue

@@ -3,7 +3,7 @@
       <div class="error-code">4<span>0</span>4</div>
       <div class="error-desc">啊哦~ 你所访问的页面不存在</div>
       <div class="error-handle">
-          <router-link to="/readme">
+          <router-link to="/">
             <el-button type="primary" size="large">返回首页</el-button>
           </router-link>
           <el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>

src/components/page/Dashboard.vue

@@ -0,0 +1,247 @@
+<template>
+    <div>
+        <el-row :gutter="20">
+            <el-col :span="8">
+                <el-row>
+                    <el-col>
+                        <el-card shadow="hover" class="mgb20">
+                            <div class="user-info">
+                                <img src="static/img/img.jpg" class="user-avator" alt="">
+                                <div class="user-info-cont">
+                                    <div class="user-info-name">{{name}}</div>
+                                    <div>{{role}}</div>
+                                </div>
+                            </div>
+                            <div class="user-info-list">上次登录时间：<span>2018-01-01</span></div>
+                            <div class="user-info-list">上次登录地点：<span>东莞</span></div>
+                        </el-card>
+                        <el-card shadow="hover">
+                            <div slot="header" class="clearfix">
+                                <span>语言详情</span>
+                            </div>
+                            Vue
+                            <el-progress :percentage="57.2" color="#42b983"></el-progress>
+                            JavaScript
+                            <el-progress :percentage="29.8" color="#f1e05a"></el-progress>
+                            CSS
+                            <el-progress :percentage="11.9"></el-progress>
+                            HTML
+                            <el-progress :percentage="1.1" color="#f56c6c"></el-progress>
+                        </el-card>
+                    </el-col>
+                </el-row>
+            </el-col>
+            <el-col :span="16">
+                <el-row :gutter="20" class="mgb20">
+                    <el-col :span="8">
+                        <el-card shadow="hover" :body-style="{padding: '0px'}">
+                            <div class="grid-content grid-con-1">
+                                <i class="el-icon-view grid-con-icon"></i>
+                                <div class="grid-cont-right">
+                                    <div class="grid-num">1234</div>
+                                    <div>用户访问量</div>
+                                </div>
+                            </div>
+                        </el-card>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-card shadow="hover" :body-style="{padding: '0px'}">
+                            <div class="grid-content grid-con-2">
+                                <i class="el-icon-message grid-con-icon"></i>
+                                <div class="grid-cont-right">
+                                    <div class="grid-num">321</div>
+                                    <div>系统消息</div>
+                                </div>
+                            </div>
+                        </el-card>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-card shadow="hover" :body-style="{padding: '0px'}">
+                            <div class="grid-content grid-con-3">
+                                <i class="el-icon-goods grid-con-icon"></i>
+                                <div class="grid-cont-right">
+                                    <div class="grid-num">5000</div>
+                                    <div>数量</div>
+                                </div>
+                            </div>
+                        </el-card>
+                    </el-col>
+                </el-row>
+                <el-card shadow="hover" :body-style="{ height: '304px'}">
+                    <div slot="header" class="clearfix">
+                        <span>待办事项</span>
+                        <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
+                    </div>
+                    <el-table :data="todoList" :show-header="false" height="304" style="width: 100%;font-size:14px;">
+                        <el-table-column width="40">
+                            <template slot-scope="scope">
+                                <el-checkbox v-model="scope.row.status"></el-checkbox>
+                            </template>
+                        </el-table-column>
+                        <el-table-column>
+                            <template slot-scope="scope">
+                                <div class="todo-item" :class="{'todo-item-del': scope.row.status}">{{scope.row.title}}</div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column width="60">
+                            <template slot-scope="scope">
+                                <i class="el-icon-edit"></i>
+                                <i class="el-icon-delete"></i>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-card>
+
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: localStorage.getItem('ms_username'),
+                todoList: [
+                    {
+                        title: '今天要修复100个bug',
+                        status: false,
+                    },
+                    {
+                        title: '今天要修复100个bug',
+                        status: false,
+                    },
+                    {
+                        title: '今天要写100行代码加几个bug吧',
+                        status: false,
+                    }, {
+                        title: '今天要修复100个bug',
+                        status: false,
+                    },
+                    {
+                        title: '今天要修复100个bug',
+                        status: true,
+                    },
+                    {
+                        title: '今天要写100行代码加几个bug吧',
+                        status: true,
+                    }
+                ]
+            }
+        },
+        computed: {
+            role() {
+                return this.name === 'admin' ? '超级管理员' : '普通用户';
+            }
+        }
+    }
+
+</script>
+
+
+<style scoped>
+    .el-row {
+        margin-bottom: 20px;
+    }
+
+    .grid-content {
+        display: flex;
+        align-items: center;
+        height: 100px;
+    }
+
+    .grid-cont-right {
+        flex: 1;
+        text-align: center;
+        font-size: 12px;
+        color: #999;
+    }
+
+    .grid-num {
+        font-size: 30px;
+        font-weight: bold;
+    }
+
+    .grid-con-icon {
+        font-size: 50px;
+        width: 100px;
+        height: 100px;
+        text-align: center;
+        line-height: 100px;
+        color: #fff;
+    }
+
+    .grid-con-1 .grid-con-icon {
+        background: rgb(45, 140, 240);
+    }
+
+    .grid-con-1 .grid-num {
+        color: rgb(45, 140, 240);
+    }
+
+    .grid-con-2 .grid-con-icon {
+        background: rgb(100, 213, 114);
+    }
+
+    .grid-con-2 .grid-num {
+        color: rgb(45, 140, 240);
+    }
+
+    .grid-con-3 .grid-con-icon {
+        background: rgb(242, 94, 67);
+    }
+
+    .grid-con-3 .grid-num {
+        color: rgb(242, 94, 67);
+    }
+
+    .user-info {
+        display: flex;
+        align-items: center;
+        padding-bottom: 20px;
+        border-bottom: 2px solid #ccc;
+        margin-bottom: 20px;
+    }
+
+    .user-avator {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+    }
+
+    .user-info-cont {
+        padding-left: 50px;
+        flex: 1;
+        font-size: 14px;
+        color: #999;
+    }
+
+    .user-info-cont div:first-child {
+        font-size: 30px;
+        color: #222;
+    }
+
+    .user-info-list {
+        font-size: 14px;
+        color: #999;
+        line-height: 25px;
+    }
+
+    .user-info-list span {
+        margin-left: 70px;
+    }
+
+    .mgb20 {
+        margin-bottom: 20px;
+    }
+
+    .todo-item {
+        font-size: 14px;
+    }
+
+    .todo-item-del {
+        text-decoration: line-through;
+        color: #999;
+    }
+
+</style>

src/components/page/Login.vue

@@ -41,7 +41,7 @@
                 this.$refs[formName].validate((valid) => {
                     if (valid) {
                         localStorage.setItem('ms_username',this.ruleForm.username);
-                        this.$router.push('/readme');
+                        this.$router.push('/');
                     } else {
                         console.log('error submit!!');
                         return false;

src/components/page/Readme.vue

@@ -1,88 +0,0 @@
-<template>
-    <div>
-        <div class="crumbs">
-            <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-setting"></i> 自述</el-breadcrumb-item>
-            </el-breadcrumb>
-        </div>
-        <div class="ms-doc">
-            <h3>README.md</h3>
-            <article>
-                <h1>manage-system</h1>
-                <p>基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案</p>
-                <h2>前言</h2>
-                <p>之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。</p>
-                <p>该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。</p>
-                <h2>功能</h2>
-                <el-checkbox disabled checked>Element UI</el-checkbox>
-                <br>
-                <el-checkbox disabled checked>登录/注销</el-checkbox>
-                <br>
-                <el-checkbox disabled checked>表格</el-checkbox>
-                <br>
-                <el-checkbox disabled checked>表单</el-checkbox>
-                <br>
-                <el-checkbox disabled checked>图表</el-checkbox>
-                <br>
-                <el-checkbox disabled checked>富文本编辑器</el-checkbox>
-                <br>
-                <el-checkbox disabled checked>markdown编辑器</el-checkbox>
-                <br>
-                <el-checkbox disabled checked>图片拖拽/裁剪上传</el-checkbox>
-                <br>
-                <el-checkbox disabled checked>支持切换主题色</el-checkbox>
-                <br>
-                <el-checkbox disabled checked>列表拖拽排序</el-checkbox>
-                <br>
-            </article>
-        </div>
-
-    </div>
-</template>
-
-<style scoped>
-    .ms-doc{
-        width:100%;
-        max-width: 980px;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-    }
-    .ms-doc h3{
-        padding: 9px 10px 10px;
-        margin: 0;
-        font-size: 14px;
-        line-height: 17px;
-        background-color: #f5f5f5;
-        border: 1px solid #d8d8d8;
-        border-bottom: 0;
-        border-radius: 3px 3px 0 0;
-    }
-    .ms-doc article{
-        padding: 45px;
-        word-wrap: break-word;
-        background-color: #fff;
-        border: 1px solid #ddd;
-        border-bottom-right-radius: 3px;
-        border-bottom-left-radius: 3px;
-    }
-    .ms-doc article h1{
-        font-size:32px;
-        padding-bottom: 10px;
-        margin-bottom: 15px;
-        border-bottom: 1px solid #ddd;
-    }
-    .ms-doc article h2 {
-        margin: 24px 0 16px;
-        font-weight: 600;
-        line-height: 1.25;
-        padding-bottom: 7px;
-        font-size: 24px;
-        border-bottom: 1px solid #eee;
-    }
-    .ms-doc article p{
-        margin-bottom: 15px;
-        line-height: 1.5;
-    }
-    .ms-doc article .el-checkbox{
-        margin-bottom: 5px;
-    }
-</style>

src/main.js

@@ -12,8 +12,10 @@ Vue.prototype.$axios = axios;
 
 //使用钩子函数对路由进行权限跳转
 router.beforeEach((to, from, next) => {
-    if(to.meta.permission){
-        const role = localStorage.getItem('ms_username');
+    const role = localStorage.getItem('ms_username');
+    if(!role){
+        next('/login');
+    }else if(to.meta.permission){
         // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
         role === 'admin' ? next() : next('/403');
     }else{

src/router/index.js

@@ -7,17 +7,17 @@ export default new Router({
     routes: [
         {
             path: '/',
-            redirect: '/login'
+            redirect: '/dashboard'
         },
         {
-            path: '/readme',
+            path: '/',
             component: resolve => require(['../components/common/Home.vue'], resolve),
             meta: { title: '自述文件' },
             children:[
                 {
-                    path: '/',
-                    component: resolve => require(['../components/page/Readme.vue'], resolve),
-                    meta: { title: '自述文件' }
+                    path: '/dashboard',
+                    component: resolve => require(['../components/page/Dashboard.vue'], resolve),
+                    meta: { title: '系统首页' }
                 },
                 {
                     path: '/table',

static/css/main.css

@@ -103,13 +103,6 @@ a {
     padding-bottom: 0;
 }
 
-/*Readme*/
-
-.ms-doc .el-checkbox__input.is-disabled+.el-checkbox__label {
-    color: #333;
-    cursor: pointer;
-}
-
 /*Upload*/
 
 .pure-button {