From 0a4b6edabd9559bef7545cfa7117922d0200b802 Mon Sep 17 00:00:00 2001 From: Frost-ZX <30585462+Frost-ZX@users.noreply.github.com> Date: Sat, 5 Mar 2022 19:07:18 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E7=AB=A0=E4=B8=BB?= =?UTF-8?q?=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/contents/_index/contents.md | 1 - src/components/ContentIndex.vue | 87 ++++++++++++++++++ src/components/MarkdownParser.vue | 1 - src/views/ContentView.vue | 139 +++++++++++++++++++++++------ 4 files changed, 197 insertions(+), 31 deletions(-) delete mode 100644 public/contents/_index/contents.md create mode 100644 src/components/ContentIndex.vue diff --git a/public/contents/_index/contents.md b/public/contents/_index/contents.md deleted file mode 100644 index c848c1e..0000000 --- a/public/contents/_index/contents.md +++ /dev/null @@ -1 +0,0 @@ -请在左侧的文章目录选择内容。 diff --git a/src/components/ContentIndex.vue b/src/components/ContentIndex.vue new file mode 100644 index 0000000..0b95d6c --- /dev/null +++ b/src/components/ContentIndex.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/src/components/MarkdownParser.vue b/src/components/MarkdownParser.vue index 54cd106..d181c70 100644 --- a/src/components/MarkdownParser.vue +++ b/src/components/MarkdownParser.vue @@ -125,7 +125,6 @@ export default { margin: 0 auto; padding: 2.5rem; box-sizing: border-box; - min-width: 12.5rem; max-width: 60rem; user-select: text; diff --git a/src/views/ContentView.vue b/src/views/ContentView.vue index 45663c9..d254c1b 100644 --- a/src/views/ContentView.vue +++ b/src/views/ContentView.vue @@ -61,12 +61,26 @@
- - + + + + + + +
@@ -76,16 +90,21 @@ import { setTitle, toast } from '@/assets/js/utils'; import { getContentFile } from '@/request/index'; +import ContentIndex from '@/components/ContentIndex'; import MarkdownParser from '@/components/MarkdownParser'; export default { name: 'ContentView', components: { + ContentIndex, MarkdownParser, }, data() { return { + /** 是否为文章主页 */ + isIndex: false, + /** 是否正在载入内容 */ isLoading: false, @@ -105,20 +124,21 @@ export default { }, /** 内容列表 */ - contentList: [ - { - name: '_index', - label: '索引页面', - isHide: true, - items: [{ - name: 'contents', - title: '文章页面', - createdAt: '', - updatedAt: '', - }], - isExpanded: false, - }, - ], + contentList: [{ + name: '', + label: '', + items: [{ + name: '', + title: '', + createdAt: '', + updatedAt: '', + }], + isHide: true, + isExpanded: false, + }], + + /** 内容列表（全部） */ + contentListAll: [], } }, @@ -152,6 +172,7 @@ export default { }); this.contentList = listCurr; + this.initContentListAll(); } else { toast({ @@ -166,12 +187,54 @@ export default { }, + /** 初始化内容列表 */ + initContentListAll() { + + const src = this.contentList; + + /** @type {{ createdAt: string }[]} */ + const result = []; + + src.forEach((category) => { + + if (category.isHide) { + return; + } + + const { + name: categoryName, + label: categoryLabel, + } = category; + + category.items.forEach((item) => { + item['categoryName'] = categoryName; + item['categoryLabel'] = categoryLabel; + item['itemName'] = item.name; + item['itemLabel'] = item.title; + result.push(item); + }); + + }); + + result.sort((a, b) => { + + const dateA = (a.createdAt || ''); + const dateB = (b.createdAt || ''); + + return dateB.localeCompare(dateA, 'co'); + + }); + + this.contentListAll = result; + + }, + /** 切换页面 */ - changePage(category, itemName) { + changePage(categoryName, itemName) { this.$router.push({ name: 'Content', params: { - category: category, + category: categoryName, name: itemName, } }); @@ -241,18 +304,21 @@ export default { params: routeParams, } = this.$route; - if (routeName === 'Content') { + const isContentPage = (routeName === 'Content'); + + if (isContentPage) { this.getContentFile({ category: routeParams.category, itemName: routeParams.name, }); } else { - this.getContentFile({ - category: '_index', - itemName: 'contents', + this.updateContentInfo({ + isIndex: true, }); } + this.isIndex = !isContentPage; + }, /** @@ -260,6 +326,7 @@ export default { * @param {object} options * @param {string} options.category 分类名称 * @param {string} options.itemName 内容名称 + * @param {boolean} [options.isIndex] 是否为文章主页 */ updateContentInfo(options) { @@ -268,15 +335,29 @@ export default { const { category, itemName, + isIndex = false, } = options; + const { contentInfo, contentList } = this; + + if (isIndex) { + setTitle('文章'); + contentInfo.category = 'index'; + contentInfo.createdAt = '2022-03-01'; + contentInfo.updatedAt = '2022-03-05'; + contentInfo.itemName = 'index'; + contentInfo.itemtitle = '文章'; + contentList.forEach((item) => { + item.isExpanded = false; + }); + return; + } + if (!(category && itemName)) { console.error('更新内容信息失败！'); return; } - const { contentInfo, contentList } = this; - const categoryInfo = contentList.find((item) => { return (item.name === category); }); @@ -294,12 +375,12 @@ export default { }); if (itemInfo) { + setTitle(itemInfo.title); contentInfo.category = category; contentInfo.createdAt = (itemInfo.createdAt || '无'); contentInfo.updatedAt = (itemInfo.updatedAt || '无'); contentInfo.itemName = (itemInfo.name || ''); contentInfo.itemtitle = (itemInfo.title || '无标题'); - setTitle(itemInfo.title); } else { console.error('获取内容信息失败！'); }