mirror of https://github.com/halo-dev/halo
Refactor the post table show and reformat some docs
johnniang
parent
4bff27041f
commit
7f6ae15853
|
|
@ -1,19 +1,145 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-cmn-Hans">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>logo.png">
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="<%= BASE_URL %>logo.png" />
|
||||
<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>
|
||||
<body>
|
||||
<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>
|
||||
<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>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
|
|
|||
12
src/App.vue
12
src/App.vue
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<a-locale-provider :locale="locale">
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
<router-view />
|
||||
</div>
|
||||
</a-locale-provider>
|
||||
</template>
|
||||
|
|
@ -11,12 +11,12 @@ import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
|
|||
import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
locale: zhCN
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
const { $store } = this
|
||||
deviceEnquire(deviceType => {
|
||||
switch (deviceType) {
|
||||
|
|
@ -39,7 +39,7 @@ export default {
|
|||
}
|
||||
</script>
|
||||
<style>
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,14 +2,11 @@
|
|||
|
||||
固定在底部的工具栏。
|
||||
|
||||
|
||||
|
||||
## 何时使用
|
||||
|
||||
固定在内容区域的底部，不随滚动条移动，常用于长页面的数据搜集和提交工作。
|
||||
|
||||
|
||||
|
||||
引用方式：
|
||||
|
||||
```javascript
|
||||
|
|
@ -22,8 +19,6 @@ export default {
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 代码演示
|
||||
|
||||
```html
|
||||
|
|
@ -31,7 +26,9 @@ export default {
|
|||
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
|
||||
</footer-tool-bar>
|
||||
```
|
||||
|
||||
或
|
||||
|
||||
```html
|
||||
<footer-tool-bar extra="扩展信息提示">
|
||||
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
|
||||
|
|
@ -41,8 +38,8 @@ export default {
|
|||
|
||||
## API
|
||||
|
||||
参数 | 说明 | 类型 | 默认值
|
||||
----|------|-----|------
|
||||
children (slot) | 工具栏内容，向右对齐 | - | -
|
||||
extra | 额外信息，向左对齐 | String, Object | -
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------------- | -------------------- | -------------- | ------ |
|
||||
| children (slot) | 工具栏内容，向右对齐 | - | - |
|
||||
| extra | 额外信息，向左对齐 | String, Object | - |
|
||||
|
||||
|
|
|
|||
|
|
@ -5,28 +5,36 @@ let lessNodesAppended
|
|||
|
||||
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'
|
||||
}
|
||||
]
|
||||
|
||||
|
|
@ -40,7 +48,7 @@ const updateTheme = primaryColor => {
|
|||
return
|
||||
}
|
||||
const hideMessage = message.loading('正在编译主题！', 0)
|
||||
function buildIt () {
|
||||
function buildIt() {
|
||||
if (!window.less) {
|
||||
return
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import {
|
|||
} from '@/store/mutation-types'
|
||||
import config from '@/config/defaultSettings'
|
||||
|
||||
export default function Initializer () {
|
||||
export default function Initializer() {
|
||||
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
|
||||
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
|
||||
store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
|
||||
|
|
|
|||
|
|
@ -36,25 +36,25 @@
|
|||
|
||||
`{ Route }` 对象
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ----------------------------------------- | ------- | ------ |
|
||||
| hidden | 控制路由是否显示在 sidebar | boolean | false |
|
||||
| redirect | 重定向地址, 访问这个路由时,自定进行重定向 | string | - |
|
||||
| name | 路由名称, 必须设置,且不能重名 | string | - |
|
||||
| meta | 路由元信息（路由附带扩展信息） | object | {} |
|
||||
| hideChildrenInMenu | 强制菜单显示为Item而不是SubItem(配合 meta.hidden) | boolean | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ------------------------------------------------- | ------- | ------ |
|
||||
| hidden | 控制路由是否显示在 sidebar | boolean | false |
|
||||
| redirect | 重定向地址, 访问这个路由时,自定进行重定向 | string | - |
|
||||
| name | 路由名称, 必须设置,且不能重名 | string | - |
|
||||
| meta | 路由元信息（路由附带扩展信息） | object | {} |
|
||||
| hideChildrenInMenu | 强制菜单显示为Item而不是SubItem(配合 meta.hidden) | boolean | - |
|
||||
|
||||
|
||||
`{ Meta }` 路由元信息对象
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | ------------------------------------------------------------ | ------- | ------ |
|
||||
| title | 路由标题, 用于显示面包屑, 页面标题 *推荐设置 | string | - |
|
||||
| icon | 路由在 menu 上显示的图标 | [string,svg] | - |
|
||||
| keepAlive | 缓存该路由 | boolean | false |
|
||||
| hidden | 配合`alwaysShow`使用，用于隐藏菜单时，提供递归到父菜单显示 选中菜单项_（可参考 个人页 配置方式）_ | boolean | false |
|
||||
| hiddenHeaderContent | *特殊 隐藏 [PageHeader](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/layout/PageHeader.vue#L14) 组件中的页面带的 面包屑和页面标题栏 | boolean | false |
|
||||
| permission | 与项目提供的权限拦截匹配的权限，如果不匹配，则会被禁止访问该路由页面 | array | [] |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------ |
|
||||
| title | 路由标题, 用于显示面包屑, 页面标题 *推荐设置 | string | - |
|
||||
| icon | 路由在 menu 上显示的图标 | [string,svg] | - |
|
||||
| keepAlive | 缓存该路由 | boolean | false |
|
||||
| hidden | 配合`alwaysShow`使用，用于隐藏菜单时，提供递归到父菜单显示 选中菜单项_（可参考 个人页 配置方式）_ | boolean | false |
|
||||
| hiddenHeaderContent | *特殊 隐藏 [PageHeader](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/layout/PageHeader.vue#L14) 组件中的页面带的 面包屑和页面标题栏 | boolean | false |
|
||||
| permission | 与项目提供的权限拦截匹配的权限，如果不匹配，则会被禁止访问该路由页面 | array | [] |
|
||||
|
||||
> 路由自定义 `Icon` 请引入自定义 `svg` Icon 文件，然后传递给路由的 `meta.icon` 参数即可
|
||||
|
||||
|
|
@ -129,12 +129,10 @@ const asyncRouterMap = [
|
|||
]
|
||||
```
|
||||
|
||||
> 1. 请注意 `component: () => import('..') ` 方式引入路由的页面组件为 懒加载模式。具体可以看 [Vue 官方文档](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)
|
||||
> 1. 请注意 `component: () => import('..')` 方式引入路由的页面组件为 懒加载模式。具体可以看 [Vue 官方文档](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)
|
||||
> 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)
|
||||
|
||||
|
||||
|
||||
附权限路由结构：
|
||||
|
||||
|
||||
|
|
@ -6,7 +6,7 @@ export const DEVICE_TYPE = {
|
|||
MOBILE: 'mobile'
|
||||
}
|
||||
|
||||
export const deviceEnquire = function (callback) {
|
||||
export const deviceEnquire = function(callback) {
|
||||
const matchDesktop = {
|
||||
match: () => {
|
||||
callback && callback(DEVICE_TYPE.DESKTOP)
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import Vue from 'vue'
|
||||
import moment from 'moment'
|
||||
import 'moment/locale/zh-cn'
|
||||
import { timeAgo } from '@/utils/util'
|
||||
moment.locale('zh-cn')
|
||||
|
||||
Vue.filter('NumberFormat', function (value) {
|
||||
Vue.filter('NumberFormat', function(value) {
|
||||
if (!value) {
|
||||
return '0'
|
||||
}
|
||||
|
|
@ -11,10 +12,12 @@ Vue.filter('NumberFormat', function (value) {
|
|||
return intPartFormat
|
||||
})
|
||||
|
||||
Vue.filter('dayjs', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
|
||||
Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
|
||||
return moment(dataStr).format(pattern)
|
||||
})
|
||||
|
||||
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)
|
||||
})
|
||||
|
||||
Vue.filter('timeAgo', timeAgo)
|
||||
|
|
|
|||
|
|
@ -1,52 +1,57 @@
|
|||
const PERMISSION_ENUM = {
|
||||
'add': { key: 'add', label: '新增' },
|
||||
'delete': { key: 'delete', label: '删除' },
|
||||
'edit': { key: 'edit', label: '修改' },
|
||||
'query': { key: 'query', label: '查询' },
|
||||
'get': { key: 'get', label: '详情' },
|
||||
'enable': { key: 'enable', label: '启用' },
|
||||
'disable': { key: 'disable', label: '禁用' },
|
||||
'import': { key: 'import', label: '导入' },
|
||||
'export': { key: 'export', label: '导出' }
|
||||
add: { key: 'add', label: '新增' },
|
||||
delete: { key: 'delete', label: '删除' },
|
||||
edit: { key: 'edit', label: '修改' },
|
||||
query: { key: 'query', label: '查询' },
|
||||
get: { key: 'get', label: '详情' },
|
||||
enable: { key: 'enable', label: '启用' },
|
||||
disable: { key: 'disable', label: '禁用' },
|
||||
import: { key: 'import', label: '导入' },
|
||||
export: { key: 'export', label: '导出' }
|
||||
}
|
||||
|
||||
function plugin (Vue) {
|
||||
function plugin(Vue) {
|
||||
if (plugin.installed) {
|
||||
return
|
||||
}
|
||||
|
||||
!Vue.prototype.$auth && Object.defineProperties(Vue.prototype, {
|
||||
$auth: {
|
||||
get () {
|
||||
const _this = this
|
||||
return (permissions) => {
|
||||
const [permission, action] = permissions.split('.')
|
||||
const permissionList = _this.$store.getters.roles.permissions
|
||||
permissionList.find((val) => {
|
||||
return val.permissionId === permission
|
||||
}).actionList.findIndex((val) => {
|
||||
return val === action
|
||||
})
|
||||
return false
|
||||
!Vue.prototype.$auth &&
|
||||
Object.defineProperties(Vue.prototype, {
|
||||
$auth: {
|
||||
get() {
|
||||
const _this = this
|
||||
return permissions => {
|
||||
const [permission, action] = permissions.split('.')
|
||||
const permissionList = _this.$store.getters.roles.permissions
|
||||
permissionList
|
||||
.find(val => {
|
||||
return val.permissionId === permission
|
||||
})
|
||||
.actionList.findIndex(val => {
|
||||
return val === action
|
||||
})
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
!Vue.prototype.$enum && Object.defineProperties(Vue.prototype, {
|
||||
$enum: {
|
||||
get () {
|
||||
// const _this = this;
|
||||
return (val) => {
|
||||
let result = PERMISSION_ENUM
|
||||
val && val.split('.').forEach(v => {
|
||||
result = result && result[v] || null
|
||||
})
|
||||
return result
|
||||
!Vue.prototype.$enum &&
|
||||
Object.defineProperties(Vue.prototype, {
|
||||
$enum: {
|
||||
get() {
|
||||
// const _this = this;
|
||||
return val => {
|
||||
let result = PERMISSION_ENUM
|
||||
val &&
|
||||
val.split('.').forEach(v => {
|
||||
result = (result && result[v]) || null
|
||||
})
|
||||
return result
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default plugin
|
||||
|
|
|
|||
|
|
@ -22,10 +22,10 @@ const mixin = {
|
|||
})
|
||||
},
|
||||
methods: {
|
||||
isTopMenu () {
|
||||
isTopMenu() {
|
||||
return this.layoutMode === 'topmenu'
|
||||
},
|
||||
isSideMenu () {
|
||||
isSideMenu() {
|
||||
return !this.isTopMenu()
|
||||
}
|
||||
}
|
||||
|
|
@ -38,13 +38,13 @@ const mixinDevice = {
|
|||
})
|
||||
},
|
||||
methods: {
|
||||
isMobile () {
|
||||
isMobile() {
|
||||
return this.device === DEVICE_TYPE.MOBILE
|
||||
},
|
||||
isDesktop () {
|
||||
isDesktop() {
|
||||
return this.device === DEVICE_TYPE.DESKTOP
|
||||
},
|
||||
isTablet () {
|
||||
isTablet() {
|
||||
return this.device === DEVICE_TYPE.TABLET
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,3 +33,25 @@ export function removeLoadingAnimate(id = '', timeout = 1500) {
|
|||
document.body.removeChild(document.getElementById(id))
|
||||
}, 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), ' 天前')
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br />
|
||||
|
||||
<h2># Trend 组件 </h2>
|
||||
|
||||
|
|
@ -13,11 +17,17 @@
|
|||
|
||||
<a-card>
|
||||
|
||||
<trend flag="up" style="margin-right: 16px;">
|
||||
<trend
|
||||
flag="up"
|
||||
style="margin-right: 16px;"
|
||||
>
|
||||
<span slot="term">工资</span>
|
||||
5%
|
||||
</trend>
|
||||
<trend flag="up" style="margin-right: 16px;">
|
||||
<trend
|
||||
flag="up"
|
||||
style="margin-right: 16px;"
|
||||
>
|
||||
<span slot="term">工作量</span>
|
||||
50%
|
||||
</trend>
|
||||
|
|
@ -32,11 +42,19 @@
|
|||
|
||||
<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>
|
||||
5%
|
||||
</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>
|
||||
50%
|
||||
</trend>
|
||||
|
|
@ -48,22 +66,55 @@
|
|||
<a-divider> AvatarList </a-divider>
|
||||
<a-card style="margin-bottom: 3rem">
|
||||
<avatar-list :max-length="3">
|
||||
<avatar-list-item tips="Jake" 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-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="Jake"
|
||||
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-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>
|
||||
|
||||
<a-divider type="vertical" style="margin: 0 16px" />
|
||||
<a-divider
|
||||
type="vertical"
|
||||
style="margin: 0 16px"
|
||||
/>
|
||||
|
||||
<avatar-list size="mini">
|
||||
<avatar-list-item tips="Jake" 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-item
|
||||
tips="Jake"
|
||||
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>
|
||||
</a-card>
|
||||
|
||||
|
|
@ -74,15 +125,20 @@
|
|||
<count-down
|
||||
style="font-size: 2rem"
|
||||
:target="new Date().getTime() + 3000000"
|
||||
:on-end="onEndHandle">
|
||||
:on-end="onEndHandle"
|
||||
>
|
||||
</count-down>
|
||||
|
||||
<a-divider type="vertical" style="margin: 0 16px" />
|
||||
<a-divider
|
||||
type="vertical"
|
||||
style="margin: 0 16px"
|
||||
/>
|
||||
|
||||
<count-down
|
||||
style="font-size: 2rem"
|
||||
:target="new Date().getTime() + 10000"
|
||||
:on-end="onEndHandle2">
|
||||
:on-end="onEndHandle2"
|
||||
>
|
||||
</count-down>
|
||||
</a-card>
|
||||
|
||||
|
|
@ -90,7 +146,10 @@
|
|||
|
||||
<a-divider> Ellipsis </a-divider>
|
||||
<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
|
||||
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>
|
||||
|
|
@ -104,7 +163,8 @@
|
|||
:sub-title="() => { return 'Visits this week' }"
|
||||
:total="12321"
|
||||
status="up"
|
||||
:sub-total="17.1"></number-info>
|
||||
:sub-total="17.1"
|
||||
></number-info>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -130,19 +190,20 @@ export default {
|
|||
AvatarList,
|
||||
AvatarListItem
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
targetTime: new Date().getTime() + 3900000
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onEndHandle () {
|
||||
onEndHandle() {
|
||||
this.$message.success('CountDown callback!!!')
|
||||
},
|
||||
onEndHandle2 () {
|
||||
onEndHandle2() {
|
||||
this.$notification.open({
|
||||
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.'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -150,14 +211,14 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 25px 0;
|
||||
}
|
||||
.home > .banner {
|
||||
text-align: center;
|
||||
padding: 25px 0;
|
||||
margin: 25px 0;
|
||||
}
|
||||
.home {
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 25px 0;
|
||||
}
|
||||
.home > .banner {
|
||||
text-align: center;
|
||||
padding: 25px 0;
|
||||
margin: 25px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,22 @@
|
|||
>
|
||||
<a-table
|
||||
:columns="postColumns"
|
||||
:dataSource="postData"
|
||||
:dataSource="formattedPostData"
|
||||
: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-card>
|
||||
</a-col>
|
||||
|
|
@ -62,11 +75,13 @@ const postColumns = [
|
|||
{
|
||||
title: '状态',
|
||||
className: 'status',
|
||||
dataIndex: 'status'
|
||||
dataIndex: 'status',
|
||||
scopedSlots: { customRender: 'status' }
|
||||
},
|
||||
{
|
||||
title: '发布时间',
|
||||
dataIndex: 'date'
|
||||
title: '最后编辑时间',
|
||||
dataIndex: 'editTime',
|
||||
scopedSlots: { customRender: 'editTime' }
|
||||
}
|
||||
]
|
||||
|
||||
|
|
@ -92,6 +107,13 @@ const commentColumns = [
|
|||
}
|
||||
]
|
||||
|
||||
const postStatus = {
|
||||
PUBLISHED: {
|
||||
status: 'success',
|
||||
statusText: '已发布'
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {},
|
||||
|
|
@ -115,6 +137,15 @@ export default {
|
|||
this.listLatestComments()
|
||||
this.listLatestLogs()
|
||||
},
|
||||
computed: {
|
||||
formattedPostData() {
|
||||
return Object.assign([], this.postData).map(post => {
|
||||
// Format the status
|
||||
post.status = postStatus[post.status]
|
||||
return post
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
listLatestPosts() {
|
||||
postApi.listLatest().then(response => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue