github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

Refactor the post table show and reformat some docs

pull/3445/head
johnniang 2019-03-22 09:57:06 +08:00
parent 4bff27041f
commit 7f6ae15853
13 changed files with 387 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
public/index.html
View File

@ -1,19 +1,145 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-cmn-Hans"> <html lang="zh-cmn-Hans">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>logo.png"> <link rel="icon" href="<%= BASE_URL %>logo.png" />
<title>Halo Dashboard</title> <title>Halo Dashboard</title>
<style>#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;} @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}</style> <style>
#preloadingAnimation {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #ffffff;
user-select: none;
z-index: 9999;
overflow: hidden;
}
.lds-roller {
display: inline-block;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
}
.lds-roller div {
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 32px 32px;
}
.lds-roller div:after {
content: ' ';
display: block;
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #13c2c2;
margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
top: 50px;
left: 50px;
}
.lds-roller div:nth-child(2) {
animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
top: 54px;
left: 45px;
}
.lds-roller div:nth-child(3) {
animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
top: 57px;
left: 39px;
}
.lds-roller div:nth-child(4) {
animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
top: 58px;
left: 32px;
}
.lds-roller div:nth-child(5) {
animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
top: 57px;
left: 25px;
}
.lds-roller div:nth-child(6) {
animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
top: 54px;
left: 19px;
}
.lds-roller div:nth-child(7) {
animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
top: 50px;
left: 14px;
}
.lds-roller div:nth-child(8) {
animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
top: 45px;
left: 10px;
}
#preloadingAnimation .load-tips {
color: #13c2c2;
font-size: 2rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 80px;
text-align: center;
width: 400px;
height: 64px;
}
@keyframes lds-roller {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong
>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript> </noscript>
<div id="app"> <div id="app">
<div id="preloadingAnimation"><div class=lds-roller><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class=load-tips>Loading</div></div> <div id="preloadingAnimation">
<div class="lds-roller">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="load-tips">Loading</div>
</div>
</div> </div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>

15
src/components/FooterToolbar/index.md
View File

@ -2,14 +2,11 @@
固定在底部的工具栏。 固定在底部的工具栏。
## 何时使用 ## 何时使用
固定在内容区域的底部，不随滚动条移动，常用于长页面的数据搜集和提交工作。 固定在内容区域的底部，不随滚动条移动，常用于长页面的数据搜集和提交工作。
引用方式： 引用方式：
```javascript ```javascript
@ -22,8 +19,6 @@ export default {
} }
``` ```
## 代码演示 ## 代码演示
```html ```html
@ -31,7 +26,9 @@ export default {
<a-button type="primary" @click="validate" :loading="loading">提交</a-button> <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
</footer-tool-bar> </footer-tool-bar>
``` ```
或 或
```html ```html
<footer-tool-bar extra="扩展信息提示"> <footer-tool-bar extra="扩展信息提示">
<a-button type="primary" @click="validate" :loading="loading">提交</a-button> <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
@ -41,8 +38,8 @@ export default {
## API ## API
参数 | 说明 | 类型 | 默认值 | 参数 | 说明 | 类型 | 默认值 |
----|------|-----|------ | --------------- | -------------------- | -------------- | ------ |
children (slot) | 工具栏内容，向右对齐 | - | - | children (slot) | 工具栏内容，向右对齐 | - | - |
extra | 额外信息，向左对齐 | String, Object | - | extra | 额外信息，向左对齐 | String, Object | - |

24
src/components/tools/setting.js
View File

@ -5,28 +5,36 @@ let lessNodesAppended
const colorList = [ const colorList = [
{ {
key: '薄暮', color: '#F5222D' key: '薄暮',
color: '#F5222D'
}, },
{ {
key: '火山', color: '#FA541C' key: '火山',
color: '#FA541C'
}, },
{ {
key: '日暮', color: '#FAAD14' key: '日暮',
color: '#FAAD14'
}, },
{ {
key: '明青', color: '#13C2C2' key: '明青',
color: '#13C2C2'
}, },
{ {
key: '极光绿', color: '#52C41A' key: '极光绿',
color: '#52C41A'
}, },
{ {
key: '拂晓蓝（默认）', color: '#1890FF' key: '拂晓蓝（默认）',
color: '#1890FF'
}, },
{ {
key: '极客蓝', color: '#2F54EB' key: '极客蓝',
color: '#2F54EB'
}, },
{ {
key: '酱紫', color: '#722ED1' key: '酱紫',
color: '#722ED1'
} }
] ]

6
src/router/README.md
View File

@ -37,7 +37,7 @@
`{ Route }` 对象 `{ Route }` 对象
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| -------- | ----------------------------------------- | ------- | ------ | | ------------------ | ------------------------------------------------- | ------- | ------ |
| hidden | 控制路由是否显示在 sidebar | boolean | false | | hidden | 控制路由是否显示在 sidebar | boolean | false |
| redirect | 重定向地址, 访问这个路由时,自定进行重定向 | string | - | | redirect | 重定向地址, 访问这个路由时,自定进行重定向 | string | - |
| name | 路由名称, 必须设置,且不能重名 | string | - | | name | 路由名称, 必须设置,且不能重名 | string | - |
@ -48,7 +48,7 @@
`{ Meta }` 路由元信息对象 `{ Meta }` 路由元信息对象
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ------------------- | ------------------------------------------------------------ | ------- | ------ | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------ |
| title | 路由标题, 用于显示面包屑, 页面标题 *推荐设置 | string | - | | title | 路由标题, 用于显示面包屑, 页面标题 *推荐设置 | string | - |
| icon | 路由在 menu 上显示的图标 | [string,svg] | - | | icon | 路由在 menu 上显示的图标 | [string,svg] | - |
| keepAlive | 缓存该路由 | boolean | false | | keepAlive | 缓存该路由 | boolean | false |
@ -133,8 +133,6 @@ const asyncRouterMap = [
> 2. 增加新的路由应该增加在 '/' (index) 路由的 `children` 内 > 2. 增加新的路由应该增加在 '/' (index) 路由的 `children` 内
> 3. `permission` 可以进行自定义修改，只需要对这个模块进行自定义修改即可 [src/store/modules/permission.js#L10](https://github.com/sendya/ant-design-pro-vue/blob/master/src/store/modules/permission.js#L10) > 3. `permission` 可以进行自定义修改，只需要对这个模块进行自定义修改即可 [src/store/modules/permission.js#L10](https://github.com/sendya/ant-design-pro-vue/blob/master/src/store/modules/permission.js#L10)
附权限路由结构： 附权限路由结构：
![权限结构](https://static-2.loacg.com/open/static/github/permissions.png) ![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)

3
src/utils/filter.js
View File

@ -1,6 +1,7 @@
import Vue from 'vue' import Vue from 'vue'
import moment from 'moment' import moment from 'moment'
import 'moment/locale/zh-cn' import 'moment/locale/zh-cn'
import { timeAgo } from '@/utils/util'
moment.locale('zh-cn') moment.locale('zh-cn')
Vue.filter('NumberFormat', function(value) { Vue.filter('NumberFormat', function(value) {
@ -18,3 +19,5 @@ Vue.filter('dayjs', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') { Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return moment(dataStr).format(pattern) return moment(dataStr).format(pattern)
}) })
Vue.filter('timeAgo', timeAgo)

39
src/utils/helper/permission.js
View File

@ -1,13 +1,13 @@
const PERMISSION_ENUM = { const PERMISSION_ENUM = {
'add': { key: 'add', label: '新增' }, add: { key: 'add', label: '新增' },
'delete': { key: 'delete', label: '删除' }, delete: { key: 'delete', label: '删除' },
'edit': { key: 'edit', label: '修改' }, edit: { key: 'edit', label: '修改' },
'query': { key: 'query', label: '查询' }, query: { key: 'query', label: '查询' },
'get': { key: 'get', label: '详情' }, get: { key: 'get', label: '详情' },
'enable': { key: 'enable', label: '启用' }, enable: { key: 'enable', label: '启用' },
'disable': { key: 'disable', label: '禁用' }, disable: { key: 'disable', label: '禁用' },
'import': { key: 'import', label: '导入' }, import: { key: 'import', label: '导入' },
'export': { key: 'export', label: '导出' } export: { key: 'export', label: '导出' }
} }
function plugin(Vue) { function plugin(Vue) {
@ -15,16 +15,19 @@ function plugin (Vue) {
return return
} }
!Vue.prototype.$auth && Object.defineProperties(Vue.prototype, { !Vue.prototype.$auth &&
Object.defineProperties(Vue.prototype, {
$auth: { $auth: {
get() { get() {
const _this = this const _this = this
return (permissions) => { return permissions => {
const [permission, action] = permissions.split('.') const [permission, action] = permissions.split('.')
const permissionList = _this.$store.getters.roles.permissions const permissionList = _this.$store.getters.roles.permissions
permissionList.find((val) => { permissionList
.find(val => {
return val.permissionId === permission return val.permissionId === permission
}).actionList.findIndex((val) => { })
.actionList.findIndex(val => {
return val === action return val === action
}) })
return false return false
@ -33,14 +36,16 @@ function plugin (Vue) {
} }
}) })
!Vue.prototype.$enum && Object.defineProperties(Vue.prototype, { !Vue.prototype.$enum &&
Object.defineProperties(Vue.prototype, {
$enum: { $enum: {
get() { get() {
// const _this = this; // const _this = this;
return (val) => { return val => {
let result = PERMISSION_ENUM let result = PERMISSION_ENUM
val && val.split('.').forEach(v => { val &&
result = result && result[v] || null val.split('.').forEach(v => {
result = (result && result[v]) || null
}) })
return result return result
} }

22
src/utils/util.js
View File

@ -33,3 +33,25 @@ export function removeLoadingAnimate(id = '', timeout = 1500) {
document.body.removeChild(document.getElementById(id)) document.body.removeChild(document.getElementById(id))
}, timeout) }, timeout)
} }
function pluralize(time, label) {
if (time === 1) {
return time + label
}
return time + label
}
/**
* time ago
* @param {*} time
*/
export function timeAgo(time) {
const between = (Date.now() - Number(time)) / 1000
if (between < 3600) {
return pluralize(~~(between / 60), ' 分钟前')
} else if (between < 86400) {
return pluralize(~~(between / 3600), ' 小时前')
} else {
return pluralize(~~(between / 86400), ' 天前')
}
}

105
src/views/Home.vue
View File

@ -1,7 +1,11 @@
<template> <template>
<div class="home"> <div class="home">
<div class="banner"> <div class="banner">
<img alt="Vue logo" style="width: 64px; height: 64px" src="../assets/logo.png"> <img
alt="Vue logo"
style="width: 64px; height: 64px"
src="../assets/logo.png"
>
<h3 style="margin-top: 1rem">Welcome to Your Vue.js App</h3> <h3 style="margin-top: 1rem">Welcome to Your Vue.js App</h3>
</div> </div>
@ -13,11 +17,17 @@
<a-card> <a-card>
<trend flag="up" style="margin-right: 16px;"> <trend
flag="up"
style="margin-right: 16px;"
>
<span slot="term">工资</span> <span slot="term">工资</span>
5% 5%
</trend> </trend>
<trend flag="up" style="margin-right: 16px;"> <trend
flag="up"
style="margin-right: 16px;"
>
<span slot="term">工作量</span> <span slot="term">工作量</span>
50% 50%
</trend> </trend>
@ -32,11 +42,19 @@
<a-card style="margin-bottom: 3rem"> <a-card style="margin-bottom: 3rem">
<trend flag="up" :reverse-color="true" style="margin-right: 16px;"> <trend
flag="up"
:reverse-color="true"
style="margin-right: 16px;"
>
<span slot="term">工资</span> <span slot="term">工资</span>
5% 5%
</trend> </trend>
<trend flag="down" :reverse-color="true" style="margin-right: 16px;"> <trend
flag="down"
:reverse-color="true"
style="margin-right: 16px;"
>
<span slot="term">工作量</span> <span slot="term">工作量</span>
50% 50%
</trend> </trend>
@ -48,22 +66,55 @@
<a-divider> AvatarList </a-divider> <a-divider> AvatarList </a-divider>
<a-card style="margin-bottom: 3rem"> <a-card style="margin-bottom: 3rem">
<avatar-list :max-length="3"> <avatar-list :max-length="3">
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" /> <avatar-list-item
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" /> tips="Jake"
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" /> src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" /> />
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" /> <avatar-list-item
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" /> tips="Andy"
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" /> src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
/>
<avatar-list-item
tips="Niko"
src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
/>
<avatar-list-item
tips="Niko"
src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
/>
<avatar-list-item
tips="Niko"
src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
/>
<avatar-list-item
tips="Niko"
src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
/>
<avatar-list-item
tips="Niko"
src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
/>
</avatar-list> </avatar-list>
<a-divider type="vertical" style="margin: 0 16px" /> <a-divider
type="vertical"
style="margin: 0 16px"
/>
<avatar-list size="mini"> <avatar-list size="mini">
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" /> <avatar-list-item
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" /> tips="Jake"
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" /> src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
/>
<avatar-list-item
tips="Andy"
src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
/>
<avatar-list-item
tips="Niko"
src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
/>
</avatar-list> </avatar-list>
</a-card> </a-card>
@ -74,15 +125,20 @@
<count-down <count-down
style="font-size: 2rem" style="font-size: 2rem"
:target="new Date().getTime() + 3000000" :target="new Date().getTime() + 3000000"
:on-end="onEndHandle"> :on-end="onEndHandle"
>
</count-down> </count-down>
<a-divider type="vertical" style="margin: 0 16px" /> <a-divider
type="vertical"
style="margin: 0 16px"
/>
<count-down <count-down
style="font-size: 2rem" style="font-size: 2rem"
:target="new Date().getTime() + 10000" :target="new Date().getTime() + 10000"
:on-end="onEndHandle2"> :on-end="onEndHandle2"
>
</count-down> </count-down>
</a-card> </a-card>
@ -90,7 +146,10 @@
<a-divider> Ellipsis </a-divider> <a-divider> Ellipsis </a-divider>
<a-card style="margin-bottom: 3rem"> <a-card style="margin-bottom: 3rem">
<ellipsis :length="100" tooltip> <ellipsis
:length="100"
tooltip
>
There were injuries alleged in three cases in 2015, and a There were injuries alleged in three cases in 2015, and a
fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall. fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
</ellipsis> </ellipsis>
@ -104,7 +163,8 @@
:sub-title="() => { return 'Visits this week' }" :sub-title="() => { return 'Visits this week' }"
:total="12321" :total="12321"
status="up" status="up"
:sub-total="17.1"></number-info> :sub-total="17.1"
></number-info>
</a-card> </a-card>
</div> </div>
</template> </template>
@ -142,7 +202,8 @@ export default {
onEndHandle2() { onEndHandle2() {
this.$notification.open({ this.$notification.open({
message: 'Notification Title', message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.' description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
}) })
} }
} }

39
src/views/dashboard/Dashboard.vue
View File

@ -16,9 +16,22 @@
> >
<a-table <a-table
:columns="postColumns" :columns="postColumns"
:dataSource="postData" :dataSource="formattedPostData"
:pagination="false" :pagination="false"
> >
<span
slot="status"
slot-scope="status"
>
<a-badge :status="status.status" />{{ status.statusText }}
</span>
<span
slot="editTime"
slot-scope="editTime"
>
{{ editTime | timeAgo }}
</span>
</a-table> </a-table>
</a-card> </a-card>
</a-col> </a-col>
@ -62,11 +75,13 @@ const postColumns = [
{ {
title: '状态', title: '状态',
className: 'status', className: 'status',
dataIndex: 'status' dataIndex: 'status',
scopedSlots: { customRender: 'status' }
}, },
{ {
title: '发布时间', title: '最后编辑时间',
dataIndex: 'date' dataIndex: 'editTime',
scopedSlots: { customRender: 'editTime' }
} }
] ]
@ -92,6 +107,13 @@ const commentColumns = [
} }
] ]
const postStatus = {
PUBLISHED: {
status: 'success',
statusText: '已发布'
}
}
export default { export default {
name: 'Dashboard', name: 'Dashboard',
components: {}, components: {},
@ -115,6 +137,15 @@ export default {
this.listLatestComments() this.listLatestComments()
this.listLatestLogs() this.listLatestLogs()
}, },
computed: {
formattedPostData() {
return Object.assign([], this.postData).map(post => {
// Format the status
post.status = postStatus[post.status]
return post
})
}
},
methods: { methods: {
listLatestPosts() { listLatestPosts() {
postApi.listLatest().then(response => { postApi.listLatest().then(response => {