Skip to content

A
ant-design-pro-vue
Commit 65970af1 by Sendya
Options

fixed layout

parent fc584f4e
Showing with 795 additions and 157 deletions
.editorconfig 0 → 100644
[*]
charset=utf-8
end_of_line=crlf
insert_final_newline=false
indent_style=space
indent_size=2
[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
indent_style=space
indent_size=2
[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
indent_style=space
indent_size=2
[{.babelrc,.stylelintrc,jest.config,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
indent_style=space
indent_size=2
[*.svg]
indent_style=space
indent_size=2
[*.js.map]
indent_style=space
indent_size=2
[*.less]
indent_style=space
indent_size=2
[*.vue]
indent_style=space
indent_size=2
[{.analysis_options,*.yml,*.yaml}]
indent_style=space
indent_size=2
src/components/chart/Radar.vue 0 → 100644
<template>
<v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
<v-tooltip />
<v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
<v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
<v-legend dataKey="user" marker="circle" :offset="30" />
<v-coord type="polar" radius="0.8" />
<v-line position="item*score" color="user" :size="2" />
<v-point position="item*score" color="user" :size="4" shape="circle" />
</v-chart>
</template>
<script>
const DataSet = require('@antv/data-set')
const sourceData = [
{item: '引用', a: 70, b: 30, c: 40},
{item: '口碑', a: 60, b: 70, c: 40},
{item: '产量', a: 50, b: 60, c: 40},
{item: '贡献', a: 40, b: 50, c: 40},
{item: '热度', a: 60, b: 70, c: 40},
{item: '引用', a: 70, b: 50, c: 40}
]
const dv = new DataSet.View().source(sourceData)
dv.transform({
type: 'fold',
fields: ['a', 'b', 'c'],
key: 'user',
value: 'score'
})
const scale = [
{
dataKey: 'score',
min: 0,
max: 80
},/* {
dataKey: 'user',
type: 'cat',
values: ['个人', '团队', '部门'],
alias: '类型'
}*/
]
const data = dv.rows
const axis1Opts = {
dataKey: 'item',
line: null,
tickLine: null,
grid: {
lineStyle: {
lineDash: null
},
hideFirstLine: false
}
}
const axis2Opts = {
dataKey: 'score',
line: null,
tickLine: null,
grid: {
type: 'polygon',
lineStyle: {
lineDash: null
}
}
}
export default {
name: 'Radar',
data () {
return {
sourceData,
data,
axis1Opts,
axis2Opts,
scale
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/GlobalView.vue → src/components/layout/LayoutBaseView.vue
<template> <template>
<layout-view> <layout-main>
<route-view /> <route-view/>
</layout-view> </layout-main>
</template> </template>
<script> <script>
import LayoutView from './LayoutView' import LayoutMain from './LayoutMain'
import RouteView from './RouteView' import RouteView from './RouteView'
export default { export default {
name: "GlobalView", name: "GlobalView",
components: { components: {
LayoutView, LayoutMain,
RouteView RouteView
} }
} }
......
src/components/LayoutHeader.vue → src/components/layout/LayoutHeader.vue
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</span> </span>
<a-dropdown> <a-dropdown>
<span class="action ant-dropdown-link user-dropdown-menu"> <span class="action ant-dropdown-link user-dropdown-menu">
<a-avatar class="avatar" size="small" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"/> <a-avatar class="avatar" size="small" :src="avatar()"/>
<span>{{ nickname() }}</span> <span>{{ nickname() }}</span>
</span> </span>
<a-menu slot="overlay" class="user-dropdown-menu-wrapper"> <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
...@@ -22,8 +22,10 @@ ...@@ -22,8 +22,10 @@
<span>个人中心</span> <span>个人中心</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="1"> <a-menu-item key="1">
<a-icon type="setting"/> <router-link :to="{ name: 'my' }">
<span>账户设置</span> <a-icon type="setting"/>
<span>账户设置</span>
</router-link>
</a-menu-item> </a-menu-item>
<a-menu-item key="2" disabled> <a-menu-item key="2" disabled>
<a-icon type="setting"/> <a-icon type="setting"/>
...@@ -63,7 +65,7 @@ ...@@ -63,7 +65,7 @@
}, },
methods: { methods: {
...mapActions(["Logout"]), ...mapActions(["Logout"]),
...mapGetters(["nickname"]), ...mapGetters(["nickname", "avatar"]),
handleLogout() { handleLogout() {
this.Logout({}).then(() => { this.Logout({}).then(() => {
window.location.reload() window.location.reload()
......
src/components/LayoutView.vue → src/components/layout/LayoutMain.vue
...@@ -5,16 +5,15 @@ ...@@ -5,16 +5,15 @@
<a-layout> <a-layout>
<!-- layout header --> <!-- layout header -->
<s-layout-header :collapsed="collapsed" @toggle="toggle"></s-layout-header> <layout-header :collapsed="collapsed" @toggle="toggle"></layout-header>
<!-- layout content --> <!-- layout content -->
<a-layout-content :style="{ margin: '24px 24px 0', height: '100%' }"> <a-layout-content :style="{ margin: '24px 24px 0', height: '100%' }">
<page-content> <!-- content -->
<slot></slot> <slot></slot>
</page-content>
</a-layout-content> </a-layout-content>
<a-layout-footer style="padding: 0px"> <a-layout-footer style="padding: 0px">
<s-layout-footer /> <layout-footer />
</a-layout-footer> </a-layout-footer>
</a-layout> </a-layout>
</a-layout> </a-layout>
...@@ -22,18 +21,16 @@ ...@@ -22,18 +21,16 @@
<script> <script>
import SiderMenu from '@/components/menu/SiderMenu' import SiderMenu from '@/components/menu/SiderMenu'
import LayoutHeader from '@/components/LayoutHeader' import LayoutHeader from './LayoutHeader'
import LayoutFooter from '@/components/LayoutFooter' import LayoutFooter from './LayoutFooter'
import PageContent from '@/components/PageContent'
import { asyncRouterMap } from '@/router/index' import { asyncRouterMap } from '@/router/index'
export default { export default {
name: "LayoutView", name: "LayoutView",
components: { components: {
SiderMenu, SiderMenu,
PageContent, LayoutHeader,
"s-layout-header": LayoutHeader, LayoutFooter
"s-layout-footer": LayoutFooter
}, },
data() { data() {
return { return {
...@@ -166,7 +163,9 @@ ...@@ -166,7 +163,9 @@
} }
.ant-dropdown-menu-item>.anticon:first-child, .ant-dropdown-menu-item>.anticon:first-child,
.ant-dropdown-menu-submenu-title>.anticon:first-child { .ant-dropdown-menu-item>a>.anticon:first-child,
.ant-dropdown-menu-submenu-title>.anticon:first-child
.ant-dropdown-menu-submenu-title>a>.anticon:first-child {
min-width: 12px; min-width: 12px;
margin-right: 8px; margin-right: 8px;
} }
......
src/components/layout/LayoutView.vue 0 → 100644
<template>
<layout-main>
<route-view/>
</layout-main>
</template>
<script>
import LayoutMain from './LayoutMain'
import RouteView from './RouteView'
export default {
name: "GlobalView",
components: {
LayoutMain,
RouteView
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/PageHeader.vue → src/components/layout/PageHeader.vue
<template> <template>
<div class="page-header"> <div class="page-header">
<s-breadcrumb></s-breadcrumb> <a-breadcrumb class="breadcrumb">
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
<div class="detail"> <router-link v-if="item.name != name" :to="{ path: item.path }">
<div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div> {{ item.meta.title }}
<div class="main"> </router-link>
<div class="row"> <span v-else>{{ item.meta.title }}</span>
<img v-if="logo" :src="logo" class="logo" /> </a-breadcrumb-item>
<h1 v-if="title" class="title">{{ title }}</h1> </a-breadcrumb>
<div class="action"><slot name="action"></slot></div>
</div> <div class="detail">
<div class="row">
<div v-if="this.$slots.content" class="content"><slot name="content"></slot></div> <div v-if="avatar" class="avatar">
<div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div> <a-avatar :src="avatar"/>
</div> </div>
</div> <div class="main">
<div class="row">
<img v-if="logo" :src="logo" class="logo"/>
<h1 v-if="title" class="title">{{ title }}</h1>
<div class="action">
<slot name="action"></slot>
</div>
</div>
<div class="row">
<div v-if="this.$slots.content" class="content">
<slot name="content"></slot>
</div>
<div v-if="this.$slots.extra" class="extra">
<slot name="extra"></slot>
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import Breadcrumb from '@/components/Breadcrumb' import Breadcrumb from '@/components/tools/Breadcrumb'
export default { export default {
name: "PageHeader", name: "PageHeader",
...@@ -45,70 +62,106 @@ ...@@ -45,70 +62,106 @@
type: String, type: String,
required: false required: false
} }
},
data() {
return {
name: '',
breadList: [],
}
},
created() {
this.getBreadcrumb()
},
methods: {
getBreadcrumb() {
this.breadList = []
this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
this.name = this.$route.name
this.$route.matched.forEach((item) => {
// item.meta.name === 'dashboard' ? item.path = '/dashboard' : this.$route.path === item.path
this.breadList.push(item)
})
}
},
watch: {
$route() {
this.getBreadcrumb()
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-header { .page-header {
background: #fff; background: #fff;
padding: 16px 32px 0; padding: 16px 32px 0;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
.breadcrumb { .breadcrumb {
margin-bottom: 16px; margin-bottom: 16px;
}
.detail {
display: flex;
margin-bottom: 16px;
.avatar {
flex: 0 1 72px;
margin: 0 24px 8px 0;
& > span {
border-radius: 72px;
display: block;
width: 72px;
height: 72px;
}
}
.main {
width: 100%;
flex: 0 1 auto;
.row {
display: flex;
width: 100%;
} }
.detail { .title {
display: flex; font-size: 20px;
font-weight: 500;
.avatar {
flex: 0 1 72px; font-size: 20px;
margin: 0 24px 8px 0; line-height: 28px;
& > span { font-weight: 500;
border-radius: 72px; color: rgba(0,0,0,.85);
display: block; margin-bottom: 12px;
width: 72px; }
height: 72px; .logo {
} width: 28px;
} height: 28px;
border-radius: 4px;
.main { margin-right: 16px;
width: 100%; }
flex: 0 1 auto; .content {
margin-bottom: 16px;
.row { flex: auto;
display: flex; color: rgba(0,0,0,.45);
width: 100%; line-height: 22px;
} }
.extra {
.title { flex: 0 1 auto;
font-size: 20px; margin-left: 88px;
font-weight: 500; min-width: 242px;
} text-align: right;
.logo {
width: 28px;
height: 28px;
border-radius: 4px;
margin-right: 16px;
}
.content {
margin-bottom: 16px;
flex: auto;
}
.extra {
flex: 0 1 auto;
margin-left: 88px;
min-width: 242px;
text-align: right;
}
.action {
margin-left: 56px;
min-width: 266px;
flex: 0 1 auto;
text-align: right;
}
}
} }
.action {
margin-left: 56px;
min-width: 266px;
flex: 0 1 auto;
text-align: right;
}
}
} }
}
</style> </style>
\ No newline at end of file
src/components/PageLayout.vue → src/components/layout/PageLayout.vue
...@@ -9,28 +9,26 @@ ...@@ -9,28 +9,26 @@
<div class="link"> <div class="link">
<template v-for="(link, index) in linkList"> <template v-for="(link, index) in linkList">
<a :key="index" :href="link.href"> <a :key="index" :href="link.href">
<a-icon :type="link.icon" />{{ link.title }}</a> <a-icon :type="link.icon" />{{ link.title }}
</a>
</template> </template>
</div> </div>
</div> </div>
<slot slot="extra" name="extra"></slot> <slot slot="extra" name="extra"></slot>
</page-header> </page-header>
<div v-if="!$route.meta.hideHeader" ref="content" class="content"> <div ref="content" class="content">
<slot></slot> <slot></slot>
</div> </div>
<slot v-else></slot>
</div> </div>
</template> </template>
<script> <script>
import PageHeader from './PageHeader' import PageHeader from './PageHeader'
import RouteView from './RouteView'
export default { export default {
name: "LayoutContent", name: "LayoutContent",
components: { components: {
PageHeader, PageHeader
"s-route-view": RouteView
}, },
props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'], props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
} }
......
src/components/menu/index.js
...@@ -98,7 +98,9 @@ export default { ...@@ -98,7 +98,9 @@ export default {
var this2_ = this var this2_ = this
var menuArr = [] var menuArr = []
menuTree.forEach(function (menu, i) { menuTree.forEach(function (menu, i) {
menuArr.push(this2_.renderItem(h, menu, '0', i)) if (!menu.hidden) {
menuArr.push(this2_.renderItem(h, menu, '0', i))
}
}) })
return menuArr return menuArr
}, },
......
src/components/tools/HeadInfo.vue
<template> <template>
<div class="head-info"> <div class="head-info">
<span>{{ title }}</span> <span>{{ title }}</span>
<p>{{ content }}</p> <p>{{ content }}</p>
<em v-if="bordered" /> <em v-if="bordered"/>
</div> </div>
</template> </template>
<script> <script>
...@@ -14,31 +14,32 @@ ...@@ -14,31 +14,32 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.head-info{ .head-info {
position: relative; position: relative;
text-align: center; text-align: center;
padding: 0 32px; padding: 0 32px;
min-width: 125px;
span { span {
color: rgba(0,0,0,.45); color: rgba(0, 0, 0, .45);
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
margin-bottom: 4px; margin-bottom: 4px;
}
p {
color: rgba(0,0,0,.85);
font-size: 24px;
line-height: 32px;
margin: 0;
}
em {
background-color: #e8e8e8;
position: absolute;
height: 56px;
width: 1px;
top: 0;
right: 0;
}
} }
p {
color: rgba(0, 0, 0, .85);
font-size: 24px;
line-height: 32px;
margin: 0;
}
em {
background-color: #e8e8e8;
position: absolute;
height: 56px;
width: 1px;
top: 0;
right: 0;
}
}
</style> </style>
\ No newline at end of file
src/router/index.js
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Layout from '../components/LayoutView' import Layout from '../components/layout/LayoutView'
import LayoutBase from '../components/layout/LayoutBaseView'
Vue.use(Router) Vue.use(Router)
/** /**
...@@ -27,9 +28,10 @@ export const constantRouterMap = [ ...@@ -27,9 +28,10 @@ export const constantRouterMap = [
{ {
path: '/', path: '/',
component: Layout, component: Layout,
redirect: '/dashboard', redirect: '/login',
name: '首页', name: '首页',
hidden: true hidden: true,
children: []
} }
] ]
...@@ -70,7 +72,7 @@ export const asyncRouterMap = [ ...@@ -70,7 +72,7 @@ export const asyncRouterMap = [
}, },
{ {
path: '/form', path: '/form',
component: Layout, component: LayoutBase,
name: 'form', name: 'form',
redirect: '/form/base-form', redirect: '/form/base-form',
meta: { title: '表单页', icon: 'form' }, meta: { title: '表单页', icon: 'form' },
...@@ -97,9 +99,10 @@ export const asyncRouterMap = [ ...@@ -97,9 +99,10 @@ export const asyncRouterMap = [
}, },
{ {
path: '/list', path: '/list',
component: Layout, component: LayoutBase,
name: 'list', name: 'list',
redirect: '/list/query-list', redirect: '/list/query-list',
hidden: true,
meta: { title: '列表页', icon: 'table' }, meta: { title: '列表页', icon: 'table' },
children: [ children: [
{ {
...@@ -150,7 +153,7 @@ export const asyncRouterMap = [ ...@@ -150,7 +153,7 @@ export const asyncRouterMap = [
}, },
{ {
path: '/profile', path: '/profile',
component: Layout, component: LayoutBase,
name: 'profile', name: 'profile',
redirect: '/profile/basic', redirect: '/profile/basic',
meta: { title: '详情页', icon: 'profile' }, meta: { title: '详情页', icon: 'profile' },
...@@ -171,7 +174,7 @@ export const asyncRouterMap = [ ...@@ -171,7 +174,7 @@ export const asyncRouterMap = [
}, },
{ {
path: '/result', path: '/result',
component: Layout, component: LayoutBase,
name: 'result', name: 'result',
redirect: '/result/success', redirect: '/result/success',
meta: { title: '结果页', icon: 'check-circle-o' }, meta: { title: '结果页', icon: 'check-circle-o' },
...@@ -225,5 +228,11 @@ export const asyncRouterMap = [ ...@@ -225,5 +228,11 @@ export const asyncRouterMap = [
meta: { title: '500' } meta: { title: '500' }
} }
] ]
},
{
path: '/my',
component: () => import('../views/user/Index'),
name: 'my',
meta: { title: '用户设置', icon: 'profile' }
} }
] ]
\ No newline at end of file
src/store/getters.js
...@@ -4,6 +4,7 @@ const getters = { ...@@ -4,6 +4,7 @@ const getters = {
avatar: state => state.user.avatar, avatar: state => state.user.avatar,
nickname: state => state.user.name, nickname: state => state.user.name,
roles: state => state.user.roles, roles: state => state.user.roles,
userInfo: state => state.user.info,
addRouters: state => state.permission.addRouters addRouters: state => state.permission.addRouters
} }
......
src/store/modules/user.js
import { login, getInfo, logout } from "@/api/login" import { login, getInfo, logout } from "@/api/login"
import { setToken, getToken, removeToken } from '@/utils/auth' import { setToken, getToken, removeToken } from '@/utils/auth'
import { welcome } from "@/utils/util"
const user = { const user = {
state: { state: {
token: getToken(), token: getToken(),
name: '', name: '',
welcome: '',
avatar: '', avatar: '',
roles: [] roles: [],
info: {}
}, },
mutations: { mutations: {
SET_TOKEN: (state, token) => { SET_TOKEN: (state, token) => {
state.token = token state.token = token
}, },
SET_NAME: (state, name) => { SET_NAME: (state, { name, welcome }) => {
state.name = name state.name = name
state.welcome = welcome
}, },
SET_AVATAR: (state, avatar) => { SET_AVATAR: (state, avatar) => {
state.avatar = avatar state.avatar = avatar
}, },
SET_ROLES: (state, roles) => { SET_ROLES: (state, roles) => {
state.roles = roles state.roles = roles
} },
SET_INFO: (state, info) => {
state.info = info
},
}, },
actions: { actions: {
...@@ -56,12 +63,13 @@ const user = { ...@@ -56,12 +63,13 @@ const user = {
}) })
role.permissionList = role.permissions.map(permission => { return permission.permissionId }); role.permissionList = role.permissions.map(permission => { return permission.permissionId });
commit('SET_ROLES', result.role) commit('SET_ROLES', result.role)
commit('SET_INFO', result)
} else { } else {
reject('getInfo: roles must be a non-null array !') reject('getInfo: roles must be a non-null array !')
} }
commit('SET_NAME', result.name) commit('SET_NAME', { name: result.name, welcome: welcome() })
commit('SET_AVATAR', '') commit('SET_AVATAR', result.avatar)
resolve(response) resolve(response)
}).catch(error => { }).catch(error => {
......
src/utils/util.js 0 → 100644
export function timeFix() {
const time = new Date()
const hour = time.getHours()
return hour < 9 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour < 20 ? '下午好' : '晚上好')))
}
export function welcome() {
const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了']
let index = Math.floor((Math.random()*arr.length))
return arr[index]
}
\ No newline at end of file
src/views/Login.vue
...@@ -93,9 +93,11 @@ ...@@ -93,9 +93,11 @@
</template> </template>
<script> <script>
import md5 from "md5"; import md5 from "md5"
import api from '../api/' import api from '../api/'
import {mapActions} from "vuex"; import { mapActions } from "vuex"
import { timeFix } from "../utils/util"
export default { export default {
data() { data() {
...@@ -179,7 +181,7 @@ ...@@ -179,7 +181,7 @@
that.Login(loginParams).then(() => { that.Login(loginParams).then(() => {
that.loginBtn = false that.loginBtn = false
that.$router.push({name: "dashboard"}) that.$router.push({name: "dashboard"})
that.$message.success(that.timefix() +'，欢迎回来', 3) that.$message.success(timeFix() +'，欢迎回来', 3)
}).catch((err) => { }).catch((err) => {
that.requestFailed(err); that.requestFailed(err);
}) })
...@@ -223,11 +225,6 @@ ...@@ -223,11 +225,6 @@
} }
); );
}, },
timefix() {
const time = new Date()
const hour = time.getHours()
return hour < 9 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour <= 20 ? '下午好' : '晚上好')))
},
requestFailed(err) { requestFailed(err) {
this.$notification['error']({ this.$notification['error']({
message: '错误', message: '错误',
......
src/views/dashboard/Workplace.vue
<template> <template>
<page-layout :avatar="avatar">
<div slot="headerContent">
<div class="title">{{ timeFix }}，{{ user.name }}，{{ welcome }}</div>
<div>打酱油工程师 | 白鹭学园-打酱油组事业群-VUE平台</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> <div>
Workplace <a-row :gutter="24">
<a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
<a-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="false" title="进行中的项目"
:body-style="{ padding: 0 }">
<a slot="extra">全部项目</a>
<div>
<a-card-grid :key="i" v-for="(item, i) in projects">
<a-card :bordered="false" :body-style="{ padding: 0 }">
<a-card-meta :description="item.description">
<div slot="title" class="card-title">
<a-avatar size="small" :src="item.cover"/>
<a>{{ item.title }}</a>
</div>
</a-card-meta>
<div class="project-item">
<a href="/#/">科学搬砖组</a>
<span class="datetime">9小时前</span>
</div>
</a-card>
</a-card-grid>
</div>
</a-card>
<a-card :loading="loading" title="动态" :bordered="false">
<a-list>
<a-list-item :key="index" v-for="(item, index) in activities">
<a-list-item-meta>
<a-avatar slot="avatar" :src="item.user.avatar" />
<div slot="title" v-html="item.template" />
<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" :loading="loading" :bordered="false" :body-style="{ padding: 0 }">
<div style="min-height: 400px;">
<radar :data="axisData" :scale="scale" :axis1Opts="axis1Opts" :axis2Opts="axis2Opts" />
</div>
</a-card>
<a-card :loading="loading" title="团队" :bordered="false">
<div class="members">
<a-row>
<a-col :span="12" v-for="(item, index) in teams" :key="index">
<a>
<a-avatar size="small" :src="item.avatar" />
<span class="member">{{item.name}}</span>
</a>
</a-col>
</a-row>
</div>
</a-card>
</a-col>
</a-row>
</div> </div>
</page-layout>
</template> </template>
<script> <script>
import {timeFix, welcome} from "../../utils/util"
import {mapGetters} from "vuex"
import PageLayout from '@/components/layout/PageLayout'
import HeadInfo from '@/components/tools/HeadInfo'
import Radar from '@/components/chart/Radar'
const DataSet = require('@antv/data-set')
export default { export default {
name: "Workplace" name: "Workplace",
components: {
PageLayout,
HeadInfo,
Radar
},
data() {
return {
timeFix: timeFix(),
welcome: welcome(),
avatar: '',
user: {},
projects: [],
loading: true,
radarLoading: true,
activities: [],
teams: [],
// data
axis1Opts: {
dataKey: 'item',
line: null,
tickLine: null,
grid: {
lineStyle: {
lineDash: null
},
hideFirstLine: false
}
},
axis2Opts: {
dataKey: 'score',
line: null,
tickLine: null,
grid: {
type: 'polygon',
lineStyle: {
lineDash: null
}
}
},
scale: [{
dataKey: 'score',
min: 0,
max: 80
}],
axisData: [
{ item: '引用', a: 70, b: 30, c: 40 },
{ item: '口碑', a: 60, b: 70, c: 40 },
{ item: '产量', a: 50, b: 60, c: 40 },
{ item: '贡献', a: 40, b: 50, c: 40 },
{ item: '热度', a: 60, b: 70, c: 40 },
{ item: '引用', a: 70, b: 50, c: 40 }
],
radarData: []
}
},
computed: {
userInfo() {
return this.$store.getters.userInfo
}
},
created() {
this.user = this.userInfo
this.avatar = this.userInfo.avatar
},
mounted() {
this.getProjects()
this.initRadar()
},
methods: {
...mapGetters(["nickname"]),
getProjects() {
this.$http.get('/list/search/projects')
.then(res => {
this.projects = res.result && res.result.data
this.loading = false
})
},
initRadar() {
const dv = new DataSet.View().source(this.axisData)
dv.transform({
type: 'flod',
fields: ['a', 'b', 'c'],
key: 'user',
value: 'score'
})
console.log('dv.rows', dv.rows)
this.radarData = dv.rows
}
}
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.project-list {
.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;
}
}
.ant-card-meta-description {
color: rgba(0, 0, 0, 0.45);
height: 44px;
line-height: 22px;
overflow: hidden;
}
}
.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%;
}
}
.members {
a {
display: block;
margin: 12px 0;
line-height: 24px;
height: 24px;
.member {
font-size: 14px;
color: rgba(0, 0, 0, .65);
line-height: 24px;
max-width: 100px;
vertical-align: top;
margin-left: 12px;
transition: all 0.3s;
display: inline-block;
}
&:hover {
span {
color: #1890ff;
}
}
}
}
</style> </style>
\ No newline at end of file
src/views/user/Index.vue 0 → 100644
<template>
<layout-main>
<page-layout :avatar="avatar">
<div slot="headerContent">
<div class="title">{{ timeFix }}，{{ user.name }}，{{ welcome }}</div>
<div>You are not alone.</div>
</div>
<div slot="extra">
<a-row>
<a-col :sm="8" :xs="24">
<head-info title="可用节点" content="16" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="高级节点" content="7/16" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="剩余流量" content="2,23Gb"/>
</a-col>
</a-row>
</div>
<a-card>
<a-form>
<a-form-item
label="昵称"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
>
<a-input placeholder="给自己起个名字" />
</a-form-item>
<a-form-item
label="Bio"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
>
<a-textarea rows="4" placeholder="You are not alone."/>
</a-form-item>
<a-form-item
label="电子邮件"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
:required="false"
>
<a-input placeholder="exp@admin.com"/>
</a-form-item>
<a-form-item
label="加密方式"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
:required="false"
>
<a-select defaultValue="aes-256-cfb">
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
<a-select-option value="chacha20">chacha20</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="连接密码"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
:required="false"
>
<a-input placeholder="h3gSbecd"/>
</a-form-item>
<a-form-item
label="登陆密码"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
:required="false"
>
<a-input placeholder="密码"/>
</a-form-item>
<a-form-item :wrapperCol="{span: 10, offset: 7}">
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-card>
</page-layout>
</layout-main>
</template>
<script>
import {timeFix, welcome} from "../../utils/util"
import LayoutMain from '@/components/layout/LayoutMain'
import PageLayout from '@/components/layout/PageLayout'
import HeadInfo from '@/components/tools/HeadInfo'
import ASelect from "ant-design-vue/es/select";
export default {
name: "Index",
components: {
ASelect,
LayoutMain,
PageLayout,
HeadInfo
},
data () {
return {
timeFix: timeFix(),
welcome: welcome(),
avatar: '',
user: {},
}
},
computed: {
userInfo() {
return this.$store.getters.userInfo
}
},
created() {
this.user = this.userInfo
this.avatar = this.userInfo.avatar
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
vue.config.js
...@@ -10,9 +10,12 @@ module.exports = { ...@@ -10,9 +10,12 @@ module.exports = {
loaderOptions: { loaderOptions: {
less: { less: {
modifyVars: { modifyVars: {
/* 'primary-color': '#1DA57A', /* less 变量覆盖，用于自定义 ant design 主题 */
'link-color': '#1DA57A',*/ /*
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px', 'border-radius-base': '2px',
*/
}, },
javascriptEnabled: true, javascriptEnabled: true,
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment