blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-05 19:41:37 +08:00
Code Issues Projects Releases Wiki Activity

优化page布局；

Browse Source 
新增工作台Workplace；
更新vue-antd-ui版本：1.0.1；
This commit is contained in:
iczer 2018-07-31 16:08:13 +08:00
parent 31faa8ccb8
commit 25e297fe86
10 changed files with 334 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -18,7 +18,7 @@
"moment": "^2.22.2",
"viser-vue": "^2.2.5",
"vue": "^2.5.2",
"vue-antd-ui": "^1.0.0",
"vue-antd-ui": "^1.0.1",
"vue-router": "^3.0.1"
},
"devDependencies": {

212
src/components/dashboard/WorkPlace.vue Normal file
View File

@ -0,0 +1,212 @@
<template>
<page-layout>
<div slot="desc" class="desc">
<div class="avatar">
<a-avatar size="large" shape="circle" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
</div>
<div class="content">
<div class="title">早安，ICZER，祝你开心每一天！</div>
<div>交互专家 | 蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED</div>
</div>
</div>
<div slot="extra">
<a-row>
<a-col :sm="8" :xs="24">
<head-info title="项目数" content="56" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="团队内排名" content="8/24" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="项目访问" content="2,223"/>
</a-col>
</a-row>
</div>
<div>
<a-row style="margin: 0 -12px">
<a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
<a-card style="margin-bottom: 24px;" :bordered="false" title="进行中的项目" :body-style="{padding: 0}">
<a slot="extra">全部项目</a>
<a-card-grid :key="n" v-for="n in 6">
<a-card :bordered="false" :body-style="{padding: 0}">
<a-card-meta description="那是一种内在的东西，他们到达不了，也无法触及的">
<div slot="title" class="card-title">
<a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png" />
<a>Alipay</a>
</div>
</a-card-meta>
<div class="project-item">
<a href="/#/">科学搬砖组</a>
<span class="datetime">9小时前</span>
</div>
</a-card>
</a-card-grid>
</a-card>
<a-card title="动态" :bordered="false">
<a-list>
<a-list-item :key="n" v-for="n in 6">
<a-list-item-meta>
<a-avatar slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
<div slot="title">
曲丽丽 在 <a>高逼格设计天团</a> 新建项目 <a>六月迭代</a>
</div>
<div slot="description">9小时前</div>
</a-list-item-meta>
</a-list-item>
</a-list>
</a-card>
</a-col>
<a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
<div class="item-group">
<a>操作一</a>
<a>操作二</a>
<a>操作三</a>
<a>操作四</a>
<a>操作五</a>
<a>操作六</a>
<a-button size="small" type="primary" ghost icon="plus">添加</a-button>
</div>
</a-card>
<a-card title="XX指数" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
<div style="min-height: 400px;"></div>
</a-card>
<a-card title="团队" :bordered="false">
<a-row>
<a-col :span="12" v-for="n in 5" :key="n">
<a class="member">
<a-avatar size="small" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
<span>程序员日常</span>
</a>
</a-col>
</a-row>
</a-card>
</a-col>
</a-row>
</div>
</page-layout>
</template>
<script>
import PageHeader from '../page/PageHeader'
import PageLayout from '../layout/PageLayout'
import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
import HeadInfo from '../tool/HeadInfo'
import ARow from 'vue-antd-ui/es/grid/Row'
import ACol from 'vue-antd-ui/es/grid/Col'
import ACard from 'vue-antd-ui/es/card/Card'
import ACardGrid from 'vue-antd-ui/es/card/Grid'
import ACardMeta from 'vue-antd-ui/es/card/Meta'
import AList from 'vue-antd-ui/es/list/index'
import AListItem from 'vue-antd-ui/es/list/Item'
import AButton from 'vue-antd-ui/es/button/button'
import AIcon from 'vue-antd-ui/es/icon/icon'
const AListItemMeta = AListItem.Meta
export default {
name: 'WorkPlace',
components: {
AIcon,
AButton,
AListItemMeta,
AListItem,
AList,
ACardMeta,
ACardGrid,
ACard,
ACol,
ARow,
HeadInfo,
AAvatar,
PageLayout,
PageHeader}
}
</script>
<style lang="less" scoped>
.desc{
display: flex;
.avatar {
flex: 0 1 72px;
margin-bottom: 8px;
& > span {
border-radius: 72px;
display: block;
width: 72px;
height: 72px;
}
}
.content {
position: relative;
top: 4px;
flex: 1 1 auto;
color: rgba(0, 0, 0, 0.45);
line-height: 22px;
.title {
font-size: 20px;
line-height: 28px;
font-weight: 500;
margin-bottom: 12px;
}
}
}
.card-title {
font-size: 0;
a {
color: rgba(0, 0, 0, 0.85);
margin-left: 12px;
line-height: 24px;
height: 24px;
display: inline-block;
vertical-align: top;
font-size: 14px;
&:hover {
color: #1890ff;
}
}
}
.project-item {
display: flex;
margin-top: 8px;
overflow: hidden;
font-size: 12px;
height: 20px;
line-height: 20px;
a {
color: rgba(0, 0, 0, 0.45);
display: inline-block;
flex: 1 1 0;
&:hover {
color: #1890ff;
}
}
.datetime {
color: rgba(0, 0, 0, 0.25);
flex: 0 0 auto;
float: right;
}
}
.item-group{
padding: 20px 0 8px 24px;
font-size: 0;
a{
color: rgba(0, 0, 0, 0.65);
display: inline-block;
font-size: 14px;
margin-bottom: 13px;
width: 25%;
}
}
.member{
display: block;
margin: 12px 0;
line-height: 24px;
height: 24px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
}
</style>

29
src/components/layout/PageLayout.vue
View File

@ -1,10 +1,20 @@
<template>
<div style="margin: -24px -24px 0px">
<page-header :breadcrumb="breadcrumb" :title="title">
<div slot="content">{{desc}}</div>
<div slot="content">
<template v-if="this.$slots.desc">
<slot name="desc"></slot>
</template>
<template v-else>
{{desc}}
</template>
</div>
<div slot="extra">
<slot name="extra"></slot>
</div>
</page-header>
<div style="margin: 24px 24px 0px">
<router-view ref="page"/>
<div ref="page" style="margin: 24px 24px 0px">
<slot ></slot>
</div>
</div>
</template>
@ -14,24 +24,21 @@ import PageHeader from '../page/PageHeader'
export default {
name: 'PageLayout',
components: {PageHeader},
props: ['desc', 'title'],
data () {
return {
title: '',
breadcrumb: [],
desc: ''
breadcrumb: []
}
},
mounted () {
this.getPageHeaderInfo()
this.getBreadcrumb()
},
beforeUpdate () {
this.getPageHeaderInfo()
this.getBreadcrumb()
},
methods: {
getPageHeaderInfo () {
this.title = this.$route.name
getBreadcrumb () {
this.breadcrumb = this.$route.matched
this.desc = this.$refs.page.desc
}
}
}

36
src/components/layout/PageView.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<page-layout :desc="desc">
<router-view ref="page"/>
</page-layout>
</template>
<script>
import PageHeader from '../page/PageHeader'
import PageLayout from './PageLayout'
export default {
name: 'PageView',
components: {PageLayout, PageHeader},
data () {
return {
title: '',
desc: ''
}
},
mounted () {
this.getPageHeaderInfo()
},
beforeUpdate () {
this.getPageHeaderInfo()
},
methods: {
getPageHeaderInfo () {
this.title = this.$route.name
this.desc = this.$refs.page.desc
}
}
}
</script>
<style scoped>
</style>

2
src/components/layout/RouterLayout.vue → src/components/layout/RouteView.vue
View File

@ -4,7 +4,7 @@
<script>
export default {
name: 'RouterLayout'
name: 'RouteView'
}
</script>

23
src/components/list/CardList.vue
View File

@ -1,5 +1,5 @@
<template>
<div >
<div class="card-list">
<a-list
:grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
:dataSource="dataSource"
@ -12,9 +12,10 @@
</template>
<template v-else>
<a-card :hoverable="true">
<a-card-meta :title="item.title" :description="item.content">
<a-card-meta >
<div style="margin-bottom: 3px" slot="title">{{item.title}}</div>
<a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large" />
<div slot="description">{{item.content}}</div>
<div class="meta-content" slot="description">{{item.content}}</div>
</a-card-meta>
<ul class="ant-card-actions" slot="actions">
<li><a >操作一</a></li>
@ -37,15 +38,15 @@ import AButton from 'vue-antd-ui/es/button/button'
import AIcon from 'vue-antd-ui/es/icon/icon'
const dataSource = []
for (let i = 0; i < 11 ; i++) {
dataSource.push(null)
for (let i = 0; i < 11; i++) {
dataSource.push({
title: 'Alipay',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
})
}
dataSource.push(null)
export default {
name: 'CardList',
components: {AIcon, AButton, AAvatar, ACardMeta, ACard, AListItem, AList},
@ -91,4 +92,14 @@ export default {
width: 100%;
height: 188px;
}
.meta-content{
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
height: 64px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>

26
src/components/page/PageHeader.vue
View File

@ -9,6 +9,7 @@
<div class="detail">
<h1 v-if="title" class="title">{{title}}</h1>
<div class="content"><slot name="content"></slot></div>
<div class="extra"><slot name="extra"></slot></div>
</div>
</div>
</template>
@ -41,13 +42,24 @@ export default {
.breadcrumb{
margin-bottom: 16px;
}
.title{
font-size: 20px;
font-weight: 500;
color: rgba(0,0,0,.85);
}
.content{
margin-bottom: 16px;
.detail{
display: flex;
.title{
font-size: 20px;
font-weight: 500;
color: rgba(0,0,0,.85);
}
.content{
margin-bottom: 16px;
flex: auto;
}
.extra
{
flex: 0 1 auto;
margin-left: 88px;
min-width: 450px;
float: right;
}
}
}
</style>

1
src/components/tool/HeadInfo.vue
View File

@ -17,6 +17,7 @@ export default {
.head-info{
position: relative;
text-align: center;
padding: 0 32px;
span{
color: rgba(0,0,0,.45);
display: inline-block;

35
src/router/index.js
View File

@ -5,7 +5,8 @@ import Exception from '@/components/exception/Exception'
import NotFound from '@/components/exception/404'
import NotPermit from '@/components/exception/403'
import ServerError from '@/components/exception/500'
import PageLayout from '@/components/layout/PageLayout'
import PageView from '@/components/layout/PageView'
import RouteView from '@/components/layout/RouteView'
import BasicForm from '@/components/form/BasicForm'
import StepForm from '@/components/form/stepForm/StepForm'
import AdvancedForm from '@/components/form/advancedForm/AdvancedForm'
@ -16,21 +17,37 @@ import StandardList from '@/components/list/StandardList'
import CardList from '@/components/list/CardList'
import SearchLayout from '@/components/list/SearchLayout'
import ArticleList from '@/components/list/ArticleList'
import WorkPlace from '@/components/dashboard/WorkPlace'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
icon: 'dashboard'
path: '/',
name: 'dashboard',
component: RouteView,
icon: 'dashboard',
children: [
{
path: '/workplace',
name: '工作台',
component: WorkPlace,
alias: '/',
icon: 'none'
},
{
path: '/dashboard',
name: '分析页',
component: Dashboard,
icon: 'none'
}
]
},
{
path: '/form',
name: '表单页',
component: PageLayout,
component: PageView,
icon: 'form',
children: [
{
@ -56,7 +73,7 @@ export default new Router({
{
path: '/list',
name: '列表页',
component: PageLayout,
component: PageView,
icon: 'table',
children: [
{
@ -97,7 +114,7 @@ export default new Router({
path: '/detail',
name: '详情页',
icon: 'profile',
component: PageLayout,
component: PageView,
children: [
{
path: '/detail/basic',
@ -117,7 +134,7 @@ export default new Router({
path: '/result',
name: '结果页',
icon: 'check-circle-o',
component: PageLayout,
component: PageView,
children: [
{
path: '/result/success',

6
yarn.lock
View File

@ -8027,9 +8027,9 @@ vm-browserify@0.0.4:
dependencies:
indexof "0.0.1"
vue-antd-ui@^1.0.0:
version "1.0.0"
resolved "http://registry.npm.taobao.org/vue-antd-ui/download/vue-antd-ui-1.0.0.tgz#b7fd61c3b3c9f3334f313a34a28e58e5a0e3ff8d"
vue-antd-ui@^1.0.1:
version "1.0.1"
resolved "http://registry.npm.taobao.org/vue-antd-ui/download/vue-antd-ui-1.0.1.tgz#ac45c1121137b742a112cbfafa32444dc001d8b9"
dependencies:
add-dom-event-listener "^1.0.2"
array-tree-filter "^2.1.0"