first commit

This commit is contained in:
x ronger 2020-06-29 21:30:58 +08:00
parent eeca69ce6d
commit 2f1a426223
3 changed files with 107 additions and 53 deletions

View File

@ -12,7 +12,7 @@
<el-col>
<el-menu :default-active="getActiveMenu" style="margin-top: -2px;border: 0;" mode="horizontal"
@select="handleSelectMenu">
<el-menu-item index="home">首页</el-menu-item>
<el-menu-item index="index">首页</el-menu-item>
<el-menu-item index="topic">专题</el-menu-item>
<el-menu-item index="github">开源代码</el-menu-item>
<el-menu-item index="open-source">资料下载</el-menu-item>

8
package-lock.json generated
View File

@ -1406,7 +1406,7 @@
},
"@nuxtjs/axios": {
"version": "5.11.0",
"resolved": "https://registry.npm.taobao.org/@nuxtjs/axios/download/@nuxtjs/axios-5.11.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40nuxtjs%2Faxios%2Fdownload%2F%40nuxtjs%2Faxios-5.11.0.tgz",
"resolved": "https://registry.npm.taobao.org/@nuxtjs/axios/download/@nuxtjs/axios-5.11.0.tgz",
"integrity": "sha1-J9cpemnhHDkDm5ysrGHi4NDgDx8=",
"requires": {
"@nuxtjs/proxy": "^2.0.0",
@ -5540,7 +5540,7 @@
},
"http-proxy-middleware": {
"version": "1.0.4",
"resolved": "https://registry.npm.taobao.org/http-proxy-middleware/download/http-proxy-middleware-1.0.4.tgz",
"resolved": "https://registry.npm.taobao.org/http-proxy-middleware/download/http-proxy-middleware-1.0.4.tgz?cache=0&sync_timestamp=1589915551464&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhttp-proxy-middleware%2Fdownload%2Fhttp-proxy-middleware-1.0.4.tgz",
"integrity": "sha1-Ql6hd5hqDNo0+cgeyWHHGa22wqk=",
"requires": {
"@types/http-proxy": "^1.17.4",
@ -5573,7 +5573,7 @@
},
"micromatch": {
"version": "4.0.2",
"resolved": "https://registry.npm.taobao.org/micromatch/download/micromatch-4.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmicromatch%2Fdownload%2Fmicromatch-4.0.2.tgz",
"resolved": "https://registry.npm.taobao.org/micromatch/download/micromatch-4.0.2.tgz?cache=0&sync_timestamp=1588851826089&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmicromatch%2Fdownload%2Fmicromatch-4.0.2.tgz",
"integrity": "sha1-T8sJmb+fvC/L3SEvbWKbmlbDklk=",
"requires": {
"braces": "^3.0.1",
@ -5992,7 +5992,7 @@
},
"is-retry-allowed": {
"version": "1.2.0",
"resolved": "https://registry.npm.taobao.org/is-retry-allowed/download/is-retry-allowed-1.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-retry-allowed%2Fdownload%2Fis-retry-allowed-1.2.0.tgz",
"resolved": "https://registry.npm.taobao.org/is-retry-allowed/download/is-retry-allowed-1.2.0.tgz",
"integrity": "sha1-13hIi9CkZmo76KFIK58rqv7eqLQ="
},
"is-ssh": {

View File

@ -13,9 +13,7 @@
</el-col>
<el-col :xs="9" :sm="11" :xl="11">
<div style="margin-left: 1rem;">
<el-link @click="onRouter('user', article.articleAuthorName)" :underline="false"
class="text-default">{{ article.articleAuthorName }}
</el-link>
<el-link @click="onRouter('user', article.articleAuthorName)" :underline="false" class="text-default" >{{ article.articleAuthorName }}</el-link>
<small class="d-block text-muted">{{ article.timeAgo }}</small>
</div>
</el-col>
@ -29,8 +27,7 @@
</el-dropdown>
</el-col>
<el-col class="text-right">
<el-link :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span>
</el-link>
<el-link :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span></el-link>
</el-col>
<el-col style="margin: 1rem 0;">
<el-tag
@ -52,33 +49,29 @@
<el-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar>
</el-col>
<el-col :xs="20" :sm="20" :xl="20">
<el-link @click="onRouter('portfolio', portfolio.idPortfolio)" :underline="false"
class="text-default">{{ portfolio.portfolioTitle }}
</el-link>
<el-link @click="onRouter('portfolio', portfolio.idPortfolio)" :underline="false" class="text-default">{{ portfolio.portfolioTitle }}</el-link>
</el-col>
</el-col>
</el-col>
</el-col>
<el-col v-if="isShare" style="margin-bottom: 1rem;">
<el-input v-model="shareData.shareUrl">
<el-popover slot="append"
placement="bottom"
width="20"
trigger="hover">
<el-col>
<qrcode :value="shareWeiXin(shareData.shareUrl)" :options="{ width: 20 }"></qrcode>
</el-col>
<el-col class="text-center">
<span>扫码分享至微信</span>
</el-col>
<el-button slot="reference">
<el-image style="width: 14px;height: 14px;" :src="weiXin" fit="cover"></el-image>
</el-button>
</el-popover>
</el-input>
</el-col>
<!-- <el-col v-if="isShare" style="margin-bottom: 1rem;">-->
<!-- <el-input v-model="shareData.shareUrl">-->
<!-- <el-popover slot="append"-->
<!-- placement="bottom"-->
<!-- width="20"-->
<!-- trigger="hover">-->
<!-- <el-col>-->
<!-- <qrcode :value="shareWeiXin(shareData.shareUrl)" :options="{ width: 20 }"></qrcode>-->
<!-- </el-col>-->
<!-- <el-col class="text-center">-->
<!-- <span>扫码分享至微信</span>-->
<!-- </el-col>-->
<!-- <el-button slot="reference"><el-image style="width: 14px;height: 14px;" :src="weiXin" fit="cover"></el-image></el-button>-->
<!-- </el-popover>-->
<!-- </el-input>-->
<!-- </el-col>-->
</el-row>
<div class="pt-7 pipe-content__reset" v-html="article.articleContent" style="overflow: hidden;"></div>
<div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="article.articleContent" style="overflow: hidden;"></div>
</div>
</div>
</el-card>
@ -90,25 +83,25 @@
<el-col :xs="22" :sm="23" :xl="23" style="padding-left: 1rem;">
<el-input @click.native="showComment" placeholder="请输入回帖内容"></el-input>
</el-col>
<el-col>
<el-drawer
:visible.sync="drawer"
:direction="direction"
size="40%">
<el-col slot="title">
<el-col>
<el-avatar v-if="commentAuthorAvatar" :src="commentAuthorAvatar"></el-avatar>
<span class="text-default" style="padding-left: 1rem;">{{ title }}</span>
</el-col>
</el-col>
<el-col>
<div id="contentEditor"></div>
</el-col>
<el-col style="margin-top: 1rem;padding-right:3rem;text-align: right;">
<el-button type="primary" :loading="loading" @click="postComment">发布</el-button>
</el-col>
</el-drawer>
</el-col>
<!-- <el-col>-->
<!-- <el-drawer-->
<!-- :visible.sync="drawer"-->
<!-- :direction="direction"-->
<!-- size="40%">-->
<!-- <el-col slot="title">-->
<!-- <el-col>-->
<!-- <el-avatar v-if="commentAuthorAvatar" :src="commentAuthorAvatar"></el-avatar>-->
<!-- <span class="text-default" style="padding-left: 1rem;">{{ title }}</span>-->
<!-- </el-col>-->
<!-- </el-col>-->
<!-- <el-col>-->
<!-- <div id="contentEditor"></div>-->
<!-- </el-col>-->
<!-- <el-col style="margin-top: 1rem;padding-right:3rem;text-align: right;">-->
<!-- <el-button type="primary" :loading="loading" @click="postComment">发布</el-button>-->
<!-- </el-col>-->
<!-- </el-drawer>-->
<!-- </el-col>-->
</el-col>
<el-col v-else class="text-center" style="margin-top: 1rem;">
<el-button type="primary" size="medium" @click="gotoLogin">登录</el-button>
@ -125,7 +118,9 @@
</template>
<script>
import { mapState } from 'vuex'
import Vue from 'vue';
import { mapState } from 'vuex';
import VditorPreview from 'vditor/dist/method.min';
export default {
name: "ArticleDetail",
validate({params, store}) {
@ -150,13 +145,72 @@
return {
isShow: true,
loading: false,
isLogin: false,
isShare: false,
shareData: {},
avatar: ''
}
},
methods: {
onRouter (name, data) {
this.$router.push(
{
name: name,
params: {
id: data
}
}
)
},
handleCommand(item) {
let _ts = this;
if (item === 'edit') {
_ts.$router.push({
name: 'post-article',
query: {
id: _ts.article.idArticle
}
})
} else {
_ts.axios.get('/article/' + _ts.article.idArticle + '/share').then(function (res) {
if (res) {
_ts.$set(_ts, 'shareData', res);
_ts.$set(_ts, 'isShare', true);
}
});
}
},
gotoLogin() {
this.$router.push({
name: 'login'
})
}
},
mounted() {
Vue.nextTick(() => {
const previewElement = document.getElementById("articleContent");
// //const outLineElement = document.getElementById("articleToC");
// VditorPreview.setContentTheme('light');
VditorPreview.codeRender(previewElement, 'zh_CN');
VditorPreview.highlightRender({"enable":true,"lineNumber":false,"style":"github"}, previewElement);
VditorPreview.mathRender(previewElement, {
math: {"engine":"KaTeX","inlineDigit":false,"macros":{}},
});
VditorPreview.mermaidRender(previewElement, ".language-mermaid");
VditorPreview.graphvizRender(previewElement);
VditorPreview.chartRender(previewElement);
VditorPreview.mindmapRender(previewElement);
VditorPreview.abcRender(previewElement);
VditorPreview.mediaRender(previewElement);
//VditorPreview.outlineRender(previewElement, outLineElement);
})
}
}
</script>
<style lang="scss">
@import "~vditor/src/assets/scss/index.scss";
.article__wrapper {
max-width: 980px;
margin: 0 auto;