Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 49a35e1

Browse files
feat: finish pannel
1 parent 670ad1f commit 49a35e1

File tree

18 files changed

+476
-157
lines changed

18 files changed

+476
-157
lines changed

‎front/server/api/articles.js‎

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -241,25 +241,49 @@ router.get('/api/front/article/archives', async (req, res) => {
241241
{ $sort: { month: -1 } }
242242
]
243243
}
244+
244245
try {
245-
const doc = await db.article.aggregate([
246-
{ $match: {} },
247-
{ $sort: { _id: -1 } },
248-
{ $skip: skip },
249-
{ $limit: limit },
250-
{
251-
$project: {
252-
year: { $dateToString: { format: '%Y', date: '$createTime' } },
253-
month: { $dateToString: { format: '%Y-%m', date: '$createTime' } },
254-
title: 1,
255-
createTime: 1,
256-
articleId: 1,
257-
headerPic: 1
258-
}
259-
},
260-
...group
261-
])
262-
const total = await db.article.count({ publish: 1 })
246+
let doc = []
247+
let total = 0
248+
// 按月筛选
249+
if (req.query.filter) {
250+
const pipe = [
251+
{
252+
$project: {
253+
month: { $dateToString: { format: '%Y-%m', date: '$createTime' } },
254+
title: 1,
255+
createTime: 1,
256+
articleId: 1,
257+
headerPic: 1
258+
}
259+
},
260+
{ $match: { month: req.query.month } }
261+
]
262+
doc = await db.article.aggregate([...pipe, { $sort: { _id: -1 } }, { $skip: skip }, { $limit: limit }])
263+
// 兼容前端数据结构
264+
doc = [{ month: req.query.month, months: doc }]
265+
const totalRes = await db.article.aggregate([...pipe, { $count: 'total' }])
266+
total = totalRes[0].total
267+
} else {
268+
doc = await db.article.aggregate([
269+
{ $match: {} },
270+
{ $sort: { _id: -1 } },
271+
{ $skip: skip },
272+
{ $limit: limit },
273+
{
274+
$project: {
275+
year: { $dateToString: { format: '%Y', date: '$createTime' } },
276+
month: { $dateToString: { format: '%Y-%m', date: '$createTime' } },
277+
title: 1,
278+
createTime: 1,
279+
articleId: 1,
280+
headerPic: 1
281+
}
282+
},
283+
...group
284+
])
285+
total = await db.article.count({ publish: 1 })
286+
}
263287

264288
res.json({
265289
status: 200,

‎front/src/entry-client.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,19 @@ Vue.use(VueLazyload, {
1313
})
1414

1515
Vue.mixin({
16-
beforeRouteUpdate(to, from, next) {
17-
const { asyncData } = this.$options
18-
if (asyncData) {
19-
asyncData({
20-
store: this.$store,
21-
route: to
22-
})
23-
.then(next)
24-
.catch(next)
25-
} else {
26-
next()
27-
}
28-
}
16+
// beforeRouteUpdate(to, from, next) {
17+
// const { asyncData } = this.$options
18+
// if (asyncData) {
19+
// asyncData({
20+
// store: this.$store,
21+
// route: to
22+
// })
23+
// .then(next)
24+
// .catch(next)
25+
// } else {
26+
// next()
27+
// }
28+
// }
2929
})
3030

3131
const { app, router, store } = createApp()

‎front/src/entry-server.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ export default context => {
1818
if (Component.asyncData) {
1919
const res = await Component.asyncData({
2020
store,
21-
route: router.currentRoute
21+
route: router.currentRoute,
22+
isServer: true
2223
})
2324
return { res, Component }
2425
}

‎front/src/style/theme/light/color.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,7 @@ $color: (
1919
bg-header-mask: rgba(0, 0, 0, 0.5),
2020
color-copyright-border: #eee,
2121
color-copyright-label: #46adf1,
22-
color-comments: #4c4948
22+
color-comments: #4c4948,
23+
color-list-hover: #40a0ffb4,
24+
color-catalog-active: #03c1b4
2325
);

‎front/src/views/archives/index.vue‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<template>
66
<div class="archives">
77
<layout _title="归档">
8-
<div class="archives__year" v-for="(year, index) in archives" :key="index">
9-
<div class="year-text">{{ year.year }}</div>
8+
<div class="archives__year" v-for="(range, index) in archives" :key="index">
9+
<div class="year-text">{{ range.year || range.month }}</div>
1010
<el-timeline>
1111
<el-timeline-item
12-
v-for="(article, mi) in year.months"
12+
v-for="(article, mi) in range.months"
1313
:key="'art_' + mi"
1414
type="primary"
1515
:hide-timestamp="true"
@@ -39,7 +39,7 @@
3939
<el-pagination
4040
:total="total"
4141
layout="prev, pager, next"
42-
:page-size="pageSize"
42+
:page-size="limit"
4343
@current-change="currentChange"
4444
></el-pagination>
4545
</div>
@@ -48,33 +48,47 @@
4848
</template>
4949
<script>
5050
import api from '@/api/'
51+
52+
async function getArchiveRes(route, page = 1, limit = 10) {
53+
const params = {
54+
limit,
55+
page
56+
}
57+
if (route.query.filter && /(\d+)-(\d+)/.test(route.query.filter)) {
58+
params.filter = 1
59+
params.month = route.query.filter
60+
}
61+
62+
const archiveRes = await api.getArchives(params)
63+
return archiveRes
64+
}
65+
5166
export default {
5267
name: 'archives',
5368
data() {
5469
return {
5570
currentPage: 1,
56-
pageSize: 20,
71+
limit: 20,
5772
total: 0,
5873
archives: []
5974
}
6075
},
61-
async asyncData() {
62-
const archiveRes = await api.getArchives({
63-
limit: 20,
64-
page: 1
65-
})
76+
async asyncData({ route }) {
77+
const archiveRes = await getArchiveRes(route)
6678
if (archiveRes.status === 200) return { archives: archiveRes.data, total: archiveRes.total }
6779
},
80+
watch: {
81+
$route(to, from) {
82+
this.getArchiveRes()
83+
}
84+
},
6885
methods: {
6986
currentChange(val) {
7087
this.currentPage = val
7188
this.getArchiveRes()
7289
},
7390
async getArchiveRes() {
74-
const archiveRes = await api.getArchives({
75-
limit: this.pageSize,
76-
page: this.currentPage
77-
})
91+
const archiveRes = await getArchiveRes(this.$route, this.currentPage, this.limit)
7892
if (archiveRes.status === 200) {
7993
this.archives = archiveRes.data
8094
this.total = archiveRes.total

‎front/src/views/article/articleDetail.vue‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@
3535
</span>
3636
</div>
3737
</div>
38-
<a href="#2.2">点击跳转</a>
3938
<note>
4039
<p>{{ article.abstract }}</p>
4140
</note>
@@ -50,6 +49,7 @@
5049
<prevnext :article="article"></prevnext>
5150
</div>
5251
<div class="article-detail__comment">
52+
<a id="a_cm"></a>
5353
<div class="comment__title">
5454
<i class="el-icon-chat-dot-round"></i>
5555
<span>文章评论</span>
@@ -87,6 +87,14 @@ import submit from '@/views/components/submit'
8787
import copyright from './components/copyright'
8888
import share from './components/share'
8989
import prevnext from './components/prevnext'
90+
91+
function jumpAnchor(route) {
92+
if (route.query.anchor === 'a_cm') {
93+
const el = document.querySelector('#a_cm')
94+
el.scrollIntoView()
95+
}
96+
}
97+
9098
export default {
9199
name: 'articleDetail',
92100
components: { note, comments, submit, copyright, share, prevnext },
@@ -118,10 +126,11 @@ export default {
118126
Prism.highlightAll()
119127
})
120128
this.collectTitles()
129+
121130
window.addEventListener('scroll', this.handleScroll, false)
122131
},
123132
updated() {},
124-
async asyncData({ route }) {
133+
async asyncData({ route, isServer }) {
125134
const articleRes = await api.getArticle({
126135
publish: 1,
127136
articleId: route.params.id
@@ -132,6 +141,7 @@ export default {
132141
articleId: route.params.id
133142
})
134143
if (articleRes.status === 200) {
144+
if (!isServer) setTimeout(() => jumpAnchor(route), 0)
135145
return { article: articleRes.data, messages: commentRes.data, total: commentRes.total }
136146
}
137147
},
Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<doc>
2+
@desc: 标签迭代容器
3+
@author: justJokee
4+
</doc>
5+
<template>
6+
<div class="tags-iterator">
7+
<div class="tags-iterator__content">
8+
<span
9+
class="tags-iterator__item"
10+
v-for="(tag, index) in tags"
11+
:key="index"
12+
:style="{ color: color(), fontSize: fontSize(), padding: tagPadding }"
13+
@click="filterArticles(tag.tag)"
14+
>
15+
{{ tag.tag }}
16+
</span>
17+
</div>
18+
</div>
19+
</template>
20+
<script>
21+
import { getRandomColor } from '@/utils/getRandomColor'
22+
export default {
23+
name: 'tagsIterator',
24+
data() {
25+
return {}
26+
},
27+
props: {
28+
tags: {
29+
type: Array,
30+
default() {
31+
return []
32+
}
33+
},
34+
size: {
35+
type: String,
36+
default: 'big'
37+
}
38+
},
39+
computed: {
40+
tagPadding() {
41+
if (this.size === 'small') return '6px'
42+
return '12px'
43+
}
44+
},
45+
methods: {
46+
filterArticles(tag) {
47+
this.$router.push({
48+
name: 'articleFilter',
49+
params: {
50+
type: 'tag',
51+
param: tag
52+
}
53+
})
54+
},
55+
color() {
56+
return getRandomColor()
57+
},
58+
fontSize() {
59+
const sizes = [26, 24, 22, 20, 18, 16, 14]
60+
const index = (parseFloat(Math.random().toFixed(2)) * 100) % sizes.length
61+
return sizes[index] + 'px'
62+
}
63+
}
64+
}
65+
</script>
66+
<style lang="scss">
67+
@import '~@/style/index.scss';
68+
.tags-iterator {
69+
&__item {
70+
display: inline-block;
71+
cursor: pointer;
72+
transition: all ease 0.38s;
73+
}
74+
&__item:hover {
75+
transform: scale(1.2);
76+
}
77+
}
78+
</style>

‎front/src/views/layout/index.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
</div>
2626
<div v-if="pannelShow" class="layout__body-pannel">
2727
<pannel></pannel>
28-
<div style="border-top: 1px solid red;width:150%"></div>
2928
</div>
3029
</div>
3130
</main>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /