diff --git a/package.json b/package.json
index bdb659d..aee68c1 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
"jshint": "^2.11.1",
"less-loader": "^6.1.0",
"lib-flexible": "^0.3.2",
- "mavon-editor": "^2.7.7",
"monaco-editor-vue": "^1.0.10",
"monaco-editor-webpack-plugin": "^1.9.0",
"monaco-languages": "^1.10.0",
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index 86dac45..e088ec1 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -5,7 +5,7 @@
import { Icon } from 'ant-design-vue'
const IconFont = Icon.createFromIconfontCN({
- scriptUrl: '//at.alicdn.com/t/font_2024484_3royfgdezl.js'
+ scriptUrl: '//at.alicdn.com/t/font_2024484_7y6nutfxwm5.js'
})
export default {
diff --git a/src/components/backtop/AlBackTop.vue b/src/components/backtop/AlBackTop.vue
index 20c7ee4..4b9da07 100644
--- a/src/components/backtop/AlBackTop.vue
+++ b/src/components/backtop/AlBackTop.vue
@@ -9,7 +9,7 @@
}"
class="el-backtop">
-
+
diff --git a/src/components/preview/SimTextPreview.vue b/src/components/preview/SimTextPreview.vue
index d7eeb9d..c097993 100644
--- a/src/components/preview/SimTextPreview.vue
+++ b/src/components/preview/SimTextPreview.vue
@@ -95,17 +95,11 @@
>
{{item.title}}
-
>> .fancytree-expander {
margin-top: 5px;
}
+ .content-body {
+ overflow-y: scroll;
+ padding: 20px 30px;
+ background-color: #ffffff;
+ }
diff --git a/src/components/preview/VditorPreview.vue b/src/components/preview/VditorPreview.vue
new file mode 100644
index 0000000..299bf6f
--- /dev/null
+++ b/src/components/preview/VditorPreview.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
index adc92a1..7e1ba90 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,10 +26,6 @@ import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'
Vue.use(contentmenu)
-// mavonEditor
-import mavonEditor from 'mavon-editor'
-import 'mavon-editor/dist/css/index.css'
-
import '@/icons' // icon
import '@/permission' // permission control
@@ -92,8 +88,6 @@ Vue.use(CheckboxGroup);
Vue.use(Grid);
Vue.use(GridItem);
-Vue.use(mavonEditor);
-
Vue.use(uploader)
Vue.use(EVueContextmenu)
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
index e4d38e0..5b6cebe 100644
--- a/src/styles/markdown.scss
+++ b/src/styles/markdown.scss
@@ -241,14 +241,7 @@
align-items: stretch;
}
-/deep/ .v-note-wrapper {
- position: unset;
- .show {
- border-radius: 1rem;
- }
- .v-note-panel {
- border-radius: 1rem;
- }
+/deep/ .article-body {
.note-update-date {
padding: 0.75rem;
border-left: 0.35rem solid;
@@ -501,12 +494,12 @@
font-size: 14px;
color: #333;
}
-/deep/ .right-menu > div.titleList li.active a {
- color: #13C2C2;
-}
-/deep/ .right-menu > div.titleList li:hover a {
- color: #13C2C2;
-}
+///deep/ .right-menu > div.titleList li.active a {
+// color: #13C2C2;
+//}
+///deep/ .right-menu > div.titleList li:hover a {
+// color: #13C2C2;
+//}
/deep/ .right-menu > div.titleList {
.h-1 {
padding-left: 10px;
@@ -534,10 +527,6 @@
color: #6a737d;
}
}
-/deep/ .right-menu > div.titleList .pl a {
- font-size: 13px;
- color: #777;
-}
/deep/ .right-menu > div.titleList .j-bj {
background: linear-gradient(to right, #5d9eea, #afcafd);
position: absolute;
diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
index c320cf7..3c08b21 100644
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@@ -1,36 +1,55 @@
-
+
确 定
-
-
@@ -58,6 +77,7 @@
import Vditor from 'vditor'
import "vditor/src/assets/scss/index.scss"
+ import categoryApi from "@/api/category";
let toolbar = [
'emoji',
@@ -110,10 +130,10 @@
},
data() {
return {
+ file: {},
editStatus: false,
- content:"", // 输入的markdown
html:'', // 及时转的html
- filename: '新建文档',
+ filename: '',
clientHeight: document.documentElement.clientHeight - 210,
updating: false,
adding: false,
@@ -121,48 +141,65 @@
storageLocation: '/',
selectLocationVisible: false,
moreSetting: false,
- markdownCover: null,
contentEditor: '',
+ categories: []
}
},
mounted() {
-
- this.contentEditor = new Vditor('vditor', {
- height: this.clientHeight,
- toolbar,
- toolbarConfig: {
- pin: true,
- },
- preview: {
- mode: 'both',
- hljs: {
- lineNumber: true
- }
- },
- cache: {
- enable: false,
- },
- after: () => {
- this.contentEditor.setValue(this.content)
- },
- })
- if(this.$route.query.id){
- this.editStatus = true
- markdownApi.getMarkdown({
- mark: this.$route.query.id
- }).then((res) => {
- this.content = res.data.contentText
- this.filename = res.data.name.split('.md')[0]
- this.markdownCover = res.data.cover
- this.storageLocation = res.data.path
- })
- }
+ this.getMarkdown()
+ this.categoryTree()
const that = this
window.onresize = function temp() {
that.reHeight()
}
},
+ destroyed() {
+ this.contentEditor.destroy()
+ },
methods: {
+ getMarkdown(){
+ if(this.$route.query.id){
+ this.editStatus = true
+ markdownApi.getMarkdown({
+ mark: this.$route.query.id
+ }).then((res) => {
+ this.file = res.data
+ this.content = this.file.contentText
+ this.filename = this.file.name.split('.md')[0]
+ this.storageLocation = res.data.path
+ // 初始化编辑器
+ this.vditorInit(res.data.contentText)
+ })
+ } else {
+ this.vditorInit('')
+ }
+ },
+ categoryTree() {
+ categoryApi.categoryTree({userId: this.$store.state.user.userId}).then(res => {
+ this.categories = res.data
+ })
+ },
+ vditorInit(content){
+ this.contentEditor = new Vditor('vditor', {
+ height: this.clientHeight,
+ toolbar,
+ toolbarConfig: {
+ pin: true,
+ },
+ preview: {
+ mode: 'both',
+ hljs: {
+ lineNumber: true
+ }
+ },
+ cache: {
+ enable: false,
+ },
+ after: () => {
+ this.contentEditor.setValue(content)
+ },
+ })
+ },
$imgAdd(pos, $file) {
const maxSize = 1024 * 1024 * 5
if($file.size > maxSize){
@@ -231,7 +268,7 @@
filename: filename,
cover: this.markdownCover,
currentDirectory: this.storageLocation,
- contentText: this.content
+ contentText: this.contentEditor.getValue()
}).then((res) => {
this.adding = false
this.$message({
@@ -255,7 +292,7 @@
filename: filename,
cover: this.markdownCover,
currentDirectory: this.storageLocation,
- contentText: this.content
+ contentText: this.contentEditor.getValue()
}).then(() => {
this.updating = false
this.$message({
@@ -290,27 +327,65 @@
/deep/ .el-input-group {
width: unset;
}
- .header-item {
- min-width: 800px;
+ /deep/ .header-item {
+ line-height: 40px;
padding: 5px 0 5px 0;
.release-button {
float: right;
margin-left: 10px;
}
.el-input {
- width: 300px;
+ width: 90%;
+ input[type='text'] {
+ font-weight: 900;
+ color: #000000!important;
+ font-size: 16px;
+ border: none;
+ border-bottom: #ccc 1px solid;
+ border-radius: 0;
+ }
+ }
+ .title-label {
+ font-size: 16px;
+ font-weight: 500;
}
}
- .more-setting {
- padding: 15px;
+ /deep/ .more-setting {
+ .el-input {
+ width: 100%;
+ }
+ margin-top: 68px;
.mark-setting-label {
font-weight: 500;
+ margin-top: 10px!important;
+ }
+ .mark-setting-input {
+ width: 100%;
}
.mark-description {
font-size: 12px;
font-weight: 100;
}
}
+.article-editor {
+ min-width: 1160px;
+ margin: auto;
+ display: flex;
+ .editor-left {
+ width: 75%;
+ }
+ .editor-right {
+ width: 25%;
+ .operation {
+ float: right;
+ }
+ }
+}
+ @media (min-width: 1200px) {
+ .article-editor {
+ max-width: 1200px;
+ }
+ }
diff --git a/src/views/public/article/ArticleTop.vue b/src/views/public/article/ArticleTop.vue
index fe3b85d..fa530e9 100644
--- a/src/views/public/article/ArticleTop.vue
+++ b/src/views/public/article/ArticleTop.vue
@@ -8,7 +8,7 @@
归档
- 分类
+ 分类
关于
diff --git a/src/views/public/article/SidebarNav.vue b/src/views/public/article/SidebarNav.vue
index 85967a8..9297f1c 100644
--- a/src/views/public/article/SidebarNav.vue
+++ b/src/views/public/article/SidebarNav.vue
@@ -17,7 +17,7 @@
归档
-
-
-
-
-
-
-
-
-
-
-
+
+
@@ -71,16 +65,18 @@ import ArticleTop from "@/views/public/article/ArticleTop";
import {getSetting} from '@/api/user'
import SidebarNav from "@/views/public/article/SidebarNav";
-import VditorPreview from 'vditor/dist/method.min'
-import "vditor/src/assets/scss/index.scss"
+import VditorPreview from "@/components/preview/VditorPreview";
+
+// import VditorPreview from 'vditor/dist/method.min'
+// import "vditor/src/assets/scss/index.scss"
export default {
- components: {SidebarNav, ArticleTop, AlBackTop, AlLoading },
+ components: {SidebarNav, ArticleTop, AlBackTop, AlLoading, VditorPreview },
data() {
return {
file: {},
isLoading: true,
- pageTitle: "文章",
+ pageTitle: "",
showList: true,
toolbars: null,
toolbarsFlag: true,
@@ -94,6 +90,7 @@ export default {
top: 70,
isEditor : false,
contentEditor: '',
+ direction: 'up'
}
},
mounted() {
@@ -107,24 +104,10 @@ export default {
that.maxMenuHeight= document.documentElement.clientHeight - 155
}
},
- // beforeRouteLeave(to, from, next) {
- // to.meta.keepAlive = true;
- // next();
- // },
- activated() {
- console.log('activated', 'article')
- },
- deactivated() {
- console.log('deactivated')
- // this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
- },
methods: {
getSetting() {
getSetting({userId: this.$store.state.user.userId}).then((res) => {
this.userSetting = res.data;
- this.$nextTick(()=>{
- this.dynamicTyping()
- })
})
},
onScroll() {
@@ -155,30 +138,9 @@ export default {
const filename = res.data.name
this.pageTitle = filename.substring(0,filename.length - res.data.suffix.length-1)
this.content = res.data.contentText
-
- const that = this
- VditorPreview.preview(document.getElementById('vditor'),
- this.content,{
- speech: {
- enable: true,
- },
- anchor: 1,
- after() {
- that.renderAfter()
- }
- })
-
- this.$nextTick(()=>{ // DOM更新之后获取子元素
- // // 在文章最前面添加更新时间
- // let main = document.getElementById('vditor')
- // let p = document.createElement("p")
- // p.className = "note-update-date"
- // p.innerText = `本文最后更新于:${this.file.updateDate}`
- // main.insertBefore(p , main.childNodes[0])
-
+ this.$nextTick(()=>{
// 动态打字效果
this.dynamicTyping()
-
const hTag = document.querySelector("h1");
if(hTag){
this.pageTitle = hTag.innerText
@@ -187,121 +149,135 @@ export default {
this.isLoading = false
})
},
- renderAfter(){
- let headers = $('.article-body').find(":header")
- let a = []
- if(headers && headers.length >0 ){
- const that = this
- headers.each(function () {
- const tagName = $(this).prop("tagName")
- if(tagName === 'H3'){
- let li = ''+$(this).text()+''
- a.push(li)
- that.titleList.push(li)
- }
- })
-
- // for (let i = 0; i < a.length; i++) {
- // // a[i] = a[i].replace(/id="/g, 'href="#')
- // if (i ===0 && a[i].indexOf('h1') !== -1) {
- // a[i] = '' + a[i].replace(/|<\/h1>/g, '') + '
'
- // }else if (a[i].indexOf('h1') !== -1) {
- // a[i] = '' + a[i].replace(/|<\/h1>/g, '') + '
'
- // }else if (a[i].indexOf('h2') !== -1) {
- // a[i] = '' + a[i].replace(/|<\/h2>/g, '') + '
'
- // }else if (a[i].indexOf('h3') !== -1) {
- // a[i] = '' + a[i].replace(/|<\/h3>/g, '') + '
'
- // }else if (a[i].indexOf('h4') !== -1) {
- // a[i] = '' + a[i].replace(/|<\/h4>/g, '') + '
'
- // }else if (a[i].indexOf('h5') !== -1) {
- // a[i] = '' + a[i].replace(/|<\/h5>/g, '') + '
'
- // }else if (a[i].indexOf('h6') !== -1) {
- // a[i] = '' + a[i].replace(/|<\/h6>/g, '') + '
'
- // } else {
- // a[i] = '' + a[i].replace(/|<\/h1>/g, '') + '
'
- // }
- // this.titleList.push(i)
- // }
- $('.j-titleList').prepend(this.titleList)
-
- // 获取id数组
- for (let i = 0; i < a.length; i++) {
- a[i] = a[i].replace(/.*?#(.*)".*/g, '$1')
- }
-
- let beforeScrollTop = document.documentElement.scrollTop;
- let fn = fn || function (direction) {
- // 判断是上滑显示,下滑隐藏
- const top = $('#top')
- const toogleNav = $('#toggle-nav')
-
- const body = document.getElementById("body")
-
- if(direction === 'down'){
- top.removeClass('animateIn')
- top.addClass('animateOut')
- toogleNav.removeClass('animateRight')
- toogleNav.addClass('animateLeft')
- if(body.style.transform.length > 0) {
- document.getElementById("sidebar-nav").style.transform = ''
- body.style.transform = ''
- document.getElementById("toggle-nav").style.transform = ''
- }
- }
- if(direction === 'up'){
- top.removeClass('animateOut')
- top.addClass('animateIn')
- toogleNav.removeClass('animateLeft')
- toogleNav.addClass('animateRight')
- }
- };
-
- $(window).on("scroll",function (event) {
- for (let i = 0; i < a.length; i++) {
- if ($(window).scrollTop() > $('#' + a[i]).offset().top - 100 || $(this).scrollTop() + $(this).height() == $(document).height()) {
- $('.j-titleList').find('li').eq(i).addClass('active').siblings('li').removeClass('active');
- $('.j-bj').css('top', i * 34)
- }
- }
-
- // 判断是上滑还是下滑
- var afterScrollTop = document.documentElement.scrollTop;
- let delta = afterScrollTop - beforeScrollTop;
- beforeScrollTop = afterScrollTop;
- var scrollTop = $(this).scrollTop();
- var scrollHeight = $(document).height();
- var windowHeight = $(this).height();
- var progress = ((afterScrollTop + document.body.clientHeight)/scrollHeight) * 100
- // 改变top bar 进度条
- document.querySelector(".scrollbar").style.width = progress +'%'
-
- if (scrollTop + windowHeight > scrollHeight - 10) { //滚动到底部执行事件
- fn('bottom');
- return;
- }
- if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
- fn('up');
- } else {
- if (Math.abs(delta) < 10) {
- return false;
- }
- fn(delta > 0 ? "down" : "up");
- }
- })
-
- let $root = $('html, body');
- $('.j-titleList li').on("click", function () {
- let top = 70
- if (typeof($(this).attr("first"))!=="undefined") {
- // 点击第一个目录
- top = 100
- }
- $root.animate({
- scrollTop: $($.attr(this.querySelector("a"), 'href')).offset().top - top
- }, 400)
- return false
- });
+ addUpdateTime(){
+ // DOM更新之后获取子元素
+ // 在文章最前面添加更新时间
+ let main = document.getElementById('vditor')
+ let p = document.createElement("p")
+ p.className = "note-update-date"
+ p.innerText = `本文最后更新于:${this.file.updateDate}`
+ main.insertBefore(p , main.childNodes[0])
+ },
+ titleOneItem(index, jqel, tagName){
+ const h = tagName.substring(1,2)
+ if(index === 0){
+ return ''+jqel.text()+''
}
+ return ''+jqel.text()+''
+ },
+ // 渲染目录
+ renderContents(){
+ // 添加更新时间
+ this.addUpdateTime()
+ let contents = []
+ let headers = $('.article-body').find(":header")
+ if(!headers || headers.length < 1){
+ return
+ }
+ const that = this
+ headers.each(function (index) {
+ contents.push(that.titleOneItem(index, $(this), $(this).prop("tagName")))
+ that.titleList.push(index)
+ })
+ $('.j-titleList').prepend(contents)
+ // 获取id数组
+ for (let i = 0; i < contents.length; i++) {
+ contents[i] = contents[i].replace(/.*?#(.*)".*/g, '$1')
+ }
+ this.renderContentsAfter(contents)
+ },
+ // 渲染目录后的操作
+ renderContentsAfter(contents){
+ const that = this
+ let beforeScrollTop = document.documentElement.scrollTop;
+ let fn = fn || function (direction) {
+ that.direction = direction
+ // 判断是上滑显示,下滑隐藏
+ const top = $('#top')
+ const toogleNav = $('#toggle-nav')
+
+ const body = document.getElementById("body")
+
+ if(direction === 'down'){
+ top.removeClass('animateIn')
+ top.addClass('animateOut')
+ toogleNav.removeClass('animateRight')
+ toogleNav.addClass('animateLeft')
+ if(body.style.transform.length > 0) {
+ document.getElementById("sidebar-nav").style.transform = ''
+ body.style.transform = ''
+ document.getElementById("toggle-nav").style.transform = ''
+ }
+ }
+ if(direction === 'up'){
+ top.removeClass('animateOut')
+ top.addClass('animateIn')
+ toogleNav.removeClass('animateLeft')
+ toogleNav.addClass('animateRight')
+ }
+ };
+ console.log(contents[1])
+
+ let scrollAfterTimer = null
+ $(window).on("scroll",function (event) {
+ for (let i = 0; i < contents.length; i++) {
+ if ($(window).scrollTop() > $('#' + contents[i]).offset().top - 100 || $(this).scrollTop() + $(this).height() == $(document).height()) {
+ $('.j-titleList').find('li').eq(i).addClass('active').siblings('li').removeClass('active');
+ $('.j-bj').css('top', i * 34)
+ }
+ }
+ if(scrollAfterTimer != null){
+ clearTimeout(scrollAfterTimer)
+ }
+ scrollAfterTimer = setTimeout(function (){
+ that.$router.replace({path: that.$route.path, query: that.$route.query, hash: $('.j-titleList').find('li.active').find('a').attr('href')})
+ }, 50)
+
+ // 判断是上滑还是下滑
+ var afterScrollTop = document.documentElement.scrollTop
+ let delta = afterScrollTop - beforeScrollTop
+ beforeScrollTop = afterScrollTop
+ var scrollTop = $(this).scrollTop()
+ var scrollHeight = $(document).height()
+ var windowHeight = $(this).height()
+ var progress = ((afterScrollTop + document.body.clientHeight)/scrollHeight) * 100
+ // 改变top bar 进度条
+ document.querySelector(".scrollbar").style.width = progress +'%'
+
+ if (scrollTop + windowHeight > scrollHeight - 10) { //滚动到底部执行事件
+ fn('bottom')
+ return
+ }
+ if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
+ fn('up')
+ } else {
+ if (Math.abs(delta) < 10) {
+ return false
+ }
+ fn(delta > 0 ? "down" : "up")
+ }
+ })
+ let $root = $('html, body')
+ $('.j-titleList li').on("click", function () {
+ let top = 75
+ if (typeof($(this).attr("first"))!=="undefined") {
+ // 点击第一个目录
+ top = 168
+ }
+ let herf = $.attr(this.querySelector("a"), 'href')
+ $root.animate({
+ scrollTop: $(herf).offset().top - top
+ }, 400)
+ return false
+ })
+ // 滚动到响应的锚点
+ setTimeout(function (){
+ if(that.$route.hash){
+ $root.animate({
+ scrollTop: $(decodeURIComponent(that.$route.hash)).offset().top - 75
+ }, 400)
+ }
+ },100)
},
},
destroyed() {
diff --git a/src/views/public/articles/index.vue b/src/views/public/articles/index.vue
index 180eae9..efbe9c7 100644
--- a/src/views/public/articles/index.vue
+++ b/src/views/public/articles/index.vue
@@ -98,7 +98,7 @@ import { getSetting } from '@/api/user'
return {
imageUrl: process.env.VUE_APP_BASE_API + '/public/s/view/thumbnail?id=',
isLoading: true,
- pageTitle: "文章列表",
+ pageTitle: '',
articleList: [],
backImageSrc: "~@/assets/img/widget-img1.jpg",
userSetting: {},
@@ -113,23 +113,7 @@ import { getSetting } from '@/api/user'
mounted() {
this.getSetting()
this.getMarkDown()
- console.log('mounted')
},
- // beforeRouteEnter (to, from, next) {
- // console.log('beforeRouteEnter')
- // next(vm => {
- // console.log(vm.scrollTop)
- // document.body.scrollTop = vm.scrollTop
- // })
- // },
- // // beforeRouteUpdate (to, from, next) {
- // // console.log('beforeRouteUpdate')
- // // next()
- // // },
- // beforeRouteLeave(to, from, next) {
- // to.meta.keepAlive = false;
- // next();
- // },
activated() {
console.log('activated',this.scrollTop)
},
@@ -141,6 +125,7 @@ import { getSetting } from '@/api/user'
getSetting() {
getSetting({userId: this.$store.state.user.userId}).then((res) => {
this.userSetting = res.data;
+ this.pageTitle = this.userSetting.siteName
this.$nextTick(()=>{
this.dynamicTyping()
})
diff --git a/src/views/recently/index_m.vue b/src/views/recently/index_m.vue
deleted file mode 100644
index 8558a62..0000000
--- a/src/views/recently/index_m.vue
+++ /dev/null
@@ -1,661 +0,0 @@
-
-
-
-
-
-
-
diff --git a/src/views/setting/articles/articleManager.vue b/src/views/setting/articles/articleManager.vue
index 6d50ed3..9f6ad45 100644
--- a/src/views/setting/articles/articleManager.vue
+++ b/src/views/setting/articles/articleManager.vue
@@ -1,6 +1,11 @@
-
+
@@ -31,14 +36,17 @@ export default {
},
computed: {},
mounted() {
- if(this.$route.query.markdown){
+ if(this.$route.query.operation){
this.newArticleDialogVisible = true
}
},
methods: {
newArticle() {
this.newArticleDialogVisible = true
- this.$router.push({path:'/setting/website/manager-articles', query: {markdown: 'new'}})
+ this.$router.push({path: this.$route.path, query: {operation: 'new'}})
+ },
+ closeDialog(){
+ this.$router.replace({path: this.$route.path})
}
}
}