mirror of https://github.com/halo-dev/halo
✨ Dashboard added "countdown" effect
853029827@qq.com
parent
c52c7c731d
commit
8f39a318cb
|
|
@ -25,7 +25,8 @@
|
||||||
"vue-ls": "^3.2.1",
|
"vue-ls": "^3.2.1",
|
||||||
"vue-router": "^3.0.6",
|
"vue-router": "^3.0.6",
|
||||||
"vuejs-logger": "^1.5.3",
|
"vuejs-logger": "^1.5.3",
|
||||||
"vuex": "^3.1.1"
|
"vuex": "^3.1.1",
|
||||||
|
"vue-count-to": "^1.0.13"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/polyfill": "^7.4.4",
|
"@babel/polyfill": "^7.4.4",
|
||||||
|
|
|
||||||
|
|
@ -1,102 +1,58 @@
|
||||||
<template>
|
<template>
|
||||||
<page-view>
|
<page-view>
|
||||||
<a-row :gutter="12">
|
<a-row :gutter="12">
|
||||||
<a-col
|
<a-col :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
|
||||||
:xl="6"
|
:style="{ marginBottom: '12px' }">
|
||||||
:lg="6"
|
<analysis-card :loading="countsLoading" title="文章" :number="countsData.postCount">
|
||||||
:md="12"
|
<router-link :to="{ name:'PostList' }" slot="action">
|
||||||
:sm="12"
|
<a-icon type="link"/>
|
||||||
:xs="12"
|
|
||||||
:style="{ marginBottom: '12px' }"
|
|
||||||
>
|
|
||||||
<analysis-card
|
|
||||||
:loading="countsLoading"
|
|
||||||
title="文章"
|
|
||||||
:number="countsData.postCount"
|
|
||||||
>
|
|
||||||
<router-link
|
|
||||||
:to="{ name:'PostList' }"
|
|
||||||
slot="action"
|
|
||||||
>
|
|
||||||
<a-icon type="link" />
|
|
||||||
</router-link>
|
</router-link>
|
||||||
</analysis-card>
|
</analysis-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col
|
<a-col :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
|
||||||
:xl="6"
|
:style="{ marginBottom: '12px' }">
|
||||||
:lg="6"
|
<analysis-card :loading="countsLoading" title="评论" :number="countsData.commentCount">
|
||||||
:md="12"
|
<router-link :to="{ name:'Comments' }" slot="action">
|
||||||
:sm="12"
|
<a-icon type="link"/>
|
||||||
:xs="12"
|
|
||||||
:style="{ marginBottom: '12px' }"
|
|
||||||
>
|
|
||||||
<analysis-card
|
|
||||||
:loading="countsLoading"
|
|
||||||
title="评论"
|
|
||||||
:number="countsData.commentCount"
|
|
||||||
>
|
|
||||||
<router-link
|
|
||||||
:to="{ name:'Comments' }"
|
|
||||||
slot="action"
|
|
||||||
>
|
|
||||||
<a-icon type="link" />
|
|
||||||
</router-link>
|
</router-link>
|
||||||
</analysis-card>
|
</analysis-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col
|
<a-col :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
|
||||||
:xl="6"
|
:style="{ marginBottom: '12px' }">
|
||||||
:lg="6"
|
<!-- <analysis-card :loading="countsLoading" title="总访问" :number="countsData.visitCount">
|
||||||
:md="12"
|
<a-tooltip slot="action">
|
||||||
:sm="12"
|
<template slot="title">文章总访问共 {{ countsData.visitCount }} 次</template>-->
|
||||||
:xs="12"
|
<analysis-card :loading="countsLoading" title="总访问" :number="countsData.visitCount">
|
||||||
:style="{ marginBottom: '12px' }"
|
|
||||||
>
|
|
||||||
<analysis-card
|
|
||||||
:loading="countsLoading"
|
|
||||||
title="总访问"
|
|
||||||
:number="countsData.visitCount"
|
|
||||||
>
|
|
||||||
<a-tooltip slot="action">
|
<a-tooltip slot="action">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
文章总访问共 {{ countsData.visitCount }} 次
|
文章总访问共
|
||||||
|
<countTo :startVal="0" :endVal="countsData.visitCount" :duration="3000"></countTo>次
|
||||||
</template>
|
</template>
|
||||||
|
<!-- <countTo :startVal="0" :endVal="countsData.visitCount" :duration="3000"></countTo> -->
|
||||||
|
<!-- <template>
|
||||||
|
<countTo :startVal="0" :endVal="countsData.visitCount" :duration="3000"></countTo>
|
||||||
|
</template>-->
|
||||||
<a href="javascript:void(0);">
|
<a href="javascript:void(0);">
|
||||||
<a-icon type="info-circle-o" /></a>
|
<a-icon type="info-circle-o"/>
|
||||||
|
</a>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</analysis-card>
|
</analysis-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col
|
<a-col :xl="6" :lg="6" :md="12" :sm="12" :xs="12"
|
||||||
:xl="6"
|
:style="{ marginBottom: '12px' }">
|
||||||
:lg="6"
|
<analysis-card :loading="countsLoading" title="建立天数" :number="countsData.establishDays">
|
||||||
:md="12"
|
|
||||||
:sm="12"
|
|
||||||
:xs="12"
|
|
||||||
:style="{ marginBottom: '12px' }"
|
|
||||||
>
|
|
||||||
<analysis-card
|
|
||||||
:loading="countsLoading"
|
|
||||||
title="建立天数"
|
|
||||||
:number="countsData.establishDays"
|
|
||||||
>
|
|
||||||
<a-tooltip slot="action">
|
<a-tooltip slot="action">
|
||||||
<template slot="title">
|
<template slot="title">博客建立于 {{ countsData.birthday | moment }}</template>
|
||||||
博客建立于 {{ countsData.birthday | moment }}
|
|
||||||
</template>
|
|
||||||
<a href="javascript:void(0);">
|
<a href="javascript:void(0);">
|
||||||
<a-icon type="info-circle-o" /></a>
|
<a-icon type="info-circle-o"/>
|
||||||
|
</a>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</analysis-card>
|
</analysis-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-row :gutter="12">
|
<a-row :gutter="12">
|
||||||
<a-col
|
<a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24"
|
||||||
:xl="8"
|
:style="{ marginBottom: '12px' }">
|
||||||
:lg="8"
|
|
||||||
:md="12"
|
|
||||||
:sm="24"
|
|
||||||
:xs="24"
|
|
||||||
:style="{ marginBottom: '12px' }"
|
|
||||||
>
|
|
||||||
<a-card
|
<a-card
|
||||||
:loading="activityLoading"
|
:loading="activityLoading"
|
||||||
:bordered="false"
|
:bordered="false"
|
||||||
|
|
@ -105,16 +61,9 @@
|
||||||
>
|
>
|
||||||
<div class="card-container">
|
<div class="card-container">
|
||||||
<a-tabs type="card">
|
<a-tabs type="card">
|
||||||
<a-tab-pane
|
<a-tab-pane key="1" tab="最近文章">
|
||||||
key="1"
|
|
||||||
tab="最近文章"
|
|
||||||
>
|
|
||||||
<a-list :dataSource="postData">
|
<a-list :dataSource="postData">
|
||||||
<a-list-item
|
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
|
||||||
slot="renderItem"
|
|
||||||
slot-scope="item, index"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<a-list-item-meta>
|
<a-list-item-meta>
|
||||||
<a
|
<a
|
||||||
slot="title"
|
slot="title"
|
||||||
|
|
@ -126,22 +75,13 @@
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
</a-list>
|
</a-list>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane
|
<a-tab-pane key="2" tab="最近评论">
|
||||||
key="2"
|
|
||||||
tab="最近评论"
|
|
||||||
>
|
|
||||||
<div class="custom-tab-wrapper">
|
<div class="custom-tab-wrapper">
|
||||||
<a-tabs>
|
<a-tabs>
|
||||||
<a-tab-pane
|
<a-tab-pane tab="文章" key="1">
|
||||||
tab="文章"
|
|
||||||
key="1"
|
|
||||||
>
|
|
||||||
<recent-comment-tab type="posts"></recent-comment-tab>
|
<recent-comment-tab type="posts"></recent-comment-tab>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane
|
<a-tab-pane tab="页面" key="2">
|
||||||
tab="页面"
|
|
||||||
key="2"
|
|
||||||
>
|
|
||||||
<recent-comment-tab type="sheets"></recent-comment-tab>
|
<recent-comment-tab type="sheets"></recent-comment-tab>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<!-- <a-tab-pane
|
<!-- <a-tab-pane
|
||||||
|
|
@ -149,7 +89,7 @@
|
||||||
key="3"
|
key="3"
|
||||||
>
|
>
|
||||||
<recent-comment-tab type="journals"></recent-comment-tab>
|
<recent-comment-tab type="journals"></recent-comment-tab>
|
||||||
</a-tab-pane> -->
|
</a-tab-pane>-->
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
</div>
|
</div>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
|
|
@ -157,25 +97,13 @@
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col
|
<a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24"
|
||||||
:xl="8"
|
:style="{ marginBottom: '12px' }">
|
||||||
:lg="8"
|
<a-card :bordered="false" :loading="writeLoading" :bodyStyle="{ padding: '16px' }">
|
||||||
:md="12"
|
|
||||||
:sm="24"
|
|
||||||
:xs="24"
|
|
||||||
:style="{ marginBottom: '12px' }"
|
|
||||||
>
|
|
||||||
<a-card
|
|
||||||
:bordered="false"
|
|
||||||
:loading="writeLoading"
|
|
||||||
:bodyStyle="{ padding: '16px' }"
|
|
||||||
>
|
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
速记 <a-tooltip
|
速记
|
||||||
slot="action"
|
<a-tooltip slot="action" title="内容将保存到页面/所有页面/日志页面">
|
||||||
title="内容将保存到页面/所有页面/日志页面"
|
<a-icon type="info-circle-o"/>
|
||||||
>
|
|
||||||
<a-icon type="info-circle-o" />
|
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</template>
|
</template>
|
||||||
<a-form layout="vertical">
|
<a-form layout="vertical">
|
||||||
|
|
@ -188,45 +116,24 @@
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a-button
|
<a-button type="primary" @click="handleCreateJournalClick">保存</a-button>
|
||||||
type="primary"
|
|
||||||
@click="handleCreateJournalClick"
|
|
||||||
>保存</a-button>
|
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col
|
<a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24"
|
||||||
:xl="8"
|
:style="{ marginBottom: '12px' }">
|
||||||
:lg="8"
|
<a-card :loading="logLoading" :bordered="false" :bodyStyle="{ padding: '16px' }">
|
||||||
:md="12"
|
|
||||||
:sm="24"
|
|
||||||
:xs="24"
|
|
||||||
:style="{ marginBottom: '12px' }"
|
|
||||||
>
|
|
||||||
<a-card
|
|
||||||
:loading="logLoading"
|
|
||||||
:bordered="false"
|
|
||||||
:bodyStyle="{ padding: '16px' }"
|
|
||||||
>
|
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
操作记录 <a-tooltip
|
操作记录
|
||||||
slot="action"
|
<a-tooltip slot="action" title="更多">
|
||||||
title="更多"
|
<a href="javascript:void(0);" @click="handleShowLogDrawer">
|
||||||
>
|
<a-icon type="ellipsis"/>
|
||||||
<a
|
</a>
|
||||||
href="javascript:void(0);"
|
|
||||||
@click="handleShowLogDrawer"
|
|
||||||
>
|
|
||||||
<a-icon type="ellipsis" /></a>
|
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</template>
|
</template>
|
||||||
<a-list :dataSource="formattedLogDatas">
|
<a-list :dataSource="formattedLogDatas">
|
||||||
<a-list-item
|
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
|
||||||
slot="renderItem"
|
|
||||||
slot-scope="item, index"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<a-list-item-meta :description="item.createTime | timeAgo">
|
<a-list-item-meta :description="item.createTime | timeAgo">
|
||||||
<span slot="title">{{ item.type }}</span>
|
<span slot="title">{{ item.type }}</span>
|
||||||
</a-list-item-meta>
|
</a-list-item-meta>
|
||||||
|
|
@ -245,17 +152,10 @@
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
@close="()=>this.logDrawerVisiable = false"
|
@close="()=>this.logDrawerVisiable = false"
|
||||||
>
|
>
|
||||||
<a-row
|
<a-row type="flex" align="middle">
|
||||||
type="flex"
|
|
||||||
align="middle"
|
|
||||||
>
|
|
||||||
<a-col :span="24">
|
<a-col :span="24">
|
||||||
<a-list :dataSource="formattedLogsDatas">
|
<a-list :dataSource="formattedLogsDatas">
|
||||||
<a-list-item
|
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
|
||||||
slot="renderItem"
|
|
||||||
slot-scope="item, index"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<a-list-item-meta :description="item.createTime | timeAgo">
|
<a-list-item-meta :description="item.createTime | timeAgo">
|
||||||
<span slot="title">{{ item.type }}</span>
|
<span slot="title">{{ item.type }}</span>
|
||||||
</a-list-item-meta>
|
</a-list-item-meta>
|
||||||
|
|
@ -274,17 +174,11 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</a-list>
|
</a-list>
|
||||||
|
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-divider class="divider-transparent" />
|
<a-divider class="divider-transparent"/>
|
||||||
<div class="bottom-control">
|
<div class="bottom-control">
|
||||||
<a-popconfirm
|
<a-popconfirm title="你确定要清空所有操作日志？" okText="确定" @confirm="handleClearLogs" cancelText="取消">
|
||||||
title="你确定要清空所有操作日志？"
|
|
||||||
okText="确定"
|
|
||||||
@confirm="handleClearLogs"
|
|
||||||
cancelText="取消"
|
|
||||||
>
|
|
||||||
<a-button type="danger">清空操作日志</a-button>
|
<a-button type="danger">清空操作日志</a-button>
|
||||||
</a-popconfirm>
|
</a-popconfirm>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -303,16 +197,19 @@ import postApi from '@/api/post'
|
||||||
import logApi from '@/api/log'
|
import logApi from '@/api/log'
|
||||||
import adminApi from '@/api/admin'
|
import adminApi from '@/api/admin'
|
||||||
import journalApi from '@/api/journal'
|
import journalApi from '@/api/journal'
|
||||||
|
import countTo from 'vue-count-to'
|
||||||
export default {
|
export default {
|
||||||
name: 'Dashboard',
|
name: 'Dashboard',
|
||||||
mixins: [mixin, mixinDevice],
|
mixins: [mixin, mixinDevice],
|
||||||
components: {
|
components: {
|
||||||
PageView,
|
PageView,
|
||||||
AnalysisCard,
|
AnalysisCard,
|
||||||
RecentCommentTab
|
RecentCommentTab,
|
||||||
|
countTo
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
startVal: 0,
|
||||||
logType: logApi.logType,
|
logType: logApi.logType,
|
||||||
activityLoading: true,
|
activityLoading: true,
|
||||||
writeLoading: true,
|
writeLoading: true,
|
||||||
|
|
|
||||||
|
|
@ -7,9 +7,7 @@
|
||||||
<div class="analysis-card-container">
|
<div class="analysis-card-container">
|
||||||
<div class="meta">
|
<div class="meta">
|
||||||
<span class="analysis-card-title">
|
<span class="analysis-card-title">
|
||||||
<slot name="title">
|
<slot name="title">{{ title }}</slot>
|
||||||
{{ title }}
|
|
||||||
</slot>
|
|
||||||
</span>
|
</span>
|
||||||
<span class="analysis-card-action">
|
<span class="analysis-card-action">
|
||||||
<slot name="action"></slot>
|
<slot name="action"></slot>
|
||||||
|
|
@ -17,7 +15,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="number">
|
<div class="number">
|
||||||
<slot name="number">
|
<slot name="number">
|
||||||
<span>{{ typeof number === 'function' && number() || number }}</span>
|
<!-- <span>{{ typeof number === 'function' && number() || number }}</span> -->
|
||||||
|
<countTo
|
||||||
|
:startVal="0"
|
||||||
|
:endVal="typeof number === 'function' && number() || number"
|
||||||
|
:duration="4000"
|
||||||
|
:autoplay="true"
|
||||||
|
></countTo>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -25,8 +29,12 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import countTo from 'vue-count-to'
|
||||||
export default {
|
export default {
|
||||||
name: 'AnalysisCard',
|
name: 'AnalysisCard',
|
||||||
|
components: {
|
||||||
|
countTo
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue