peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/layouts/pc/header.vue
View File

@ -12,7 +12,7 @@
<el-col> <el-col>
<el-menu :default-active="getActiveMenu" style="margin-top: -2px;border: 0;" mode="horizontal" <el-menu :default-active="getActiveMenu" style="margin-top: -2px;border: 0;" mode="horizontal"
@select="handleSelectMenu"> @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="topic">专题</el-menu-item>
<el-menu-item index="github">开源代码</el-menu-item> <el-menu-item index="github">开源代码</el-menu-item>
<el-menu-item index="open-source">资料下载</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": { "@nuxtjs/axios": {
"version": "5.11.0", "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=", "integrity": "sha1-J9cpemnhHDkDm5ysrGHi4NDgDx8=",
"requires": { "requires": {
"@nuxtjs/proxy": "^2.0.0", "@nuxtjs/proxy": "^2.0.0",
@ -5540,7 +5540,7 @@
}, },
"http-proxy-middleware": { "http-proxy-middleware": {
"version": "1.0.4", "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=", "integrity": "sha1-Ql6hd5hqDNo0+cgeyWHHGa22wqk=",
"requires": { "requires": {
"@types/http-proxy": "^1.17.4", "@types/http-proxy": "^1.17.4",
@ -5573,7 +5573,7 @@
}, },
"micromatch": { "micromatch": {
"version": "4.0.2", "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=", "integrity": "sha1-T8sJmb+fvC/L3SEvbWKbmlbDklk=",
"requires": { "requires": {
"braces": "^3.0.1", "braces": "^3.0.1",
@ -5992,7 +5992,7 @@
}, },
"is-retry-allowed": { "is-retry-allowed": {
"version": "1.2.0", "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=" "integrity": "sha1-13hIi9CkZmo76KFIK58rqv7eqLQ="
}, },
"is-ssh": { "is-ssh": {

150
pages/article/_article_id.vue
View File

@ -13,14 +13,12 @@
</el-col> </el-col>
<el-col :xs="9" :sm="11" :xl="11"> <el-col :xs="9" :sm="11" :xl="11">
<div style="margin-left: 1rem;"> <div style="margin-left: 1rem;">
<el-link @click="onRouter('user', article.articleAuthorName)" :underline="false" <el-link @click="onRouter('user', article.articleAuthorName)" :underline="false" class="text-default" >{{ article.articleAuthorName }}</el-link>
class="text-default">{{ article.articleAuthorName }}
</el-link>
<small class="d-block text-muted">{{ article.timeAgo }}</small> <small class="d-block text-muted">{{ article.timeAgo }}</small>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :xl="12" v-if="isLogin" class="text-right"> <el-col :xs="12" :sm="12" :xl="12" v-if="isLogin" class="text-right">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<el-link :underline="false"><i class="el-icon-more"></i></el-link> <el-link :underline="false"><i class="el-icon-more"></i></el-link>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="edit" v-if="hasPermissions">编辑</el-dropdown-item> <el-dropdown-item command="edit" v-if="hasPermissions">编辑</el-dropdown-item>
@ -29,8 +27,7 @@
</el-dropdown> </el-dropdown>
</el-col> </el-col>
<el-col class="text-right"> <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 :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span></el-link>
</el-link>
</el-col> </el-col>
<el-col style="margin: 1rem 0;"> <el-col style="margin: 1rem 0;">
<el-tag <el-tag
@ -52,33 +49,29 @@
<el-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar> <el-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar>
</el-col> </el-col>
<el-col :xs="20" :sm="20" :xl="20"> <el-col :xs="20" :sm="20" :xl="20">
<el-link @click="onRouter('portfolio', portfolio.idPortfolio)" :underline="false" <el-link @click="onRouter('portfolio', portfolio.idPortfolio)" :underline="false" class="text-default">{{ portfolio.portfolioTitle }}</el-link>
class="text-default">{{ portfolio.portfolioTitle }}
</el-link>
</el-col> </el-col>
</el-col> </el-col>
</el-col> </el-col>
</el-col> </el-col>
<el-col v-if="isShare" style="margin-bottom: 1rem;"> <!-- <el-col v-if="isShare" style="margin-bottom: 1rem;">-->
<el-input v-model="shareData.shareUrl"> <!-- <el-input v-model="shareData.shareUrl">-->
<el-popover slot="append" <!-- <el-popover slot="append"-->
placement="bottom" <!-- placement="bottom"-->
width="20" <!-- width="20"-->
trigger="hover"> <!-- trigger="hover">-->
<el-col> <!-- <el-col>-->
<qrcode :value="shareWeiXin(shareData.shareUrl)" :options="{ width: 20 }"></qrcode> <!-- <qrcode :value="shareWeiXin(shareData.shareUrl)" :options="{ width: 20 }"></qrcode>-->
</el-col> <!-- </el-col>-->
<el-col class="text-center"> <!-- <el-col class="text-center">-->
<span>扫码分享至微信</span> <!-- <span>扫码分享至微信</span>-->
</el-col> <!-- </el-col>-->
<el-button slot="reference"> <!-- <el-button slot="reference"><el-image style="width: 14px;height: 14px;" :src="weiXin" fit="cover"></el-image></el-button>-->
<el-image style="width: 14px;height: 14px;" :src="weiXin" fit="cover"></el-image> <!-- </el-popover>-->
</el-button> <!-- </el-input>-->
</el-popover> <!-- </el-col>-->
</el-input>
</el-col>
</el-row> </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>
</div> </div>
</el-card> </el-card>
@ -90,25 +83,25 @@
<el-col :xs="22" :sm="23" :xl="23" style="padding-left: 1rem;"> <el-col :xs="22" :sm="23" :xl="23" style="padding-left: 1rem;">
<el-input @click.native="showComment" placeholder="请输入回帖内容"></el-input> <el-input @click.native="showComment" placeholder="请输入回帖内容"></el-input>
</el-col> </el-col>
<el-col> <!-- <el-col>-->
<el-drawer <!-- <el-drawer-->
:visible.sync="drawer" <!-- :visible.sync="drawer"-->
:direction="direction" <!-- :direction="direction"-->
size="40%"> <!-- size="40%">-->
<el-col slot="title"> <!-- <el-col slot="title">-->
<el-col> <!-- <el-col>-->
<el-avatar v-if="commentAuthorAvatar" :src="commentAuthorAvatar"></el-avatar> <!-- <el-avatar v-if="commentAuthorAvatar" :src="commentAuthorAvatar"></el-avatar>-->
<span class="text-default" style="padding-left: 1rem;">{{ title }}</span> <!-- <span class="text-default" style="padding-left: 1rem;">{{ title }}</span>-->
</el-col> <!-- </el-col>-->
</el-col> <!-- </el-col>-->
<el-col> <!-- <el-col>-->
<div id="contentEditor"></div> <!-- <div id="contentEditor"></div>-->
</el-col> <!-- </el-col>-->
<el-col style="margin-top: 1rem;padding-right:3rem;text-align: right;"> <!-- <el-col style="margin-top: 1rem;padding-right:3rem;text-align: right;">-->
<el-button type="primary" :loading="loading" @click="postComment">发布</el-button> <!-- <el-button type="primary" :loading="loading" @click="postComment">发布</el-button>-->
</el-col> <!-- </el-col>-->
</el-drawer> <!-- </el-drawer>-->
</el-col> <!-- </el-col>-->
</el-col> </el-col>
<el-col v-else class="text-center" style="margin-top: 1rem;"> <el-col v-else class="text-center" style="margin-top: 1rem;">
<el-button type="primary" size="medium" @click="gotoLogin">登录</el-button> <el-button type="primary" size="medium" @click="gotoLogin">登录</el-button>
@ -125,7 +118,9 @@
</template> </template>
<script> <script>
import { mapState } from 'vuex' import Vue from 'vue';
import { mapState } from 'vuex';
import VditorPreview from 'vditor/dist/method.min';
export default { export default {
name: "ArticleDetail", name: "ArticleDetail",
validate({params, store}) { validate({params, store}) {
@ -150,13 +145,72 @@
return { return {
isShow: true, isShow: true,
loading: false, 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> </script>
<style lang="scss"> <style lang="scss">
@import "~vditor/src/assets/scss/index.scss";
.article__wrapper { .article__wrapper {
max-width: 980px; max-width: 980px;
margin: 0 auto; margin: 0 auto;