diff --git a/frontend/src/components/Editor.vue b/frontend/src/components/Editor.vue index b9084997..5b189a3e 100644 --- a/frontend/src/components/Editor.vue +++ b/frontend/src/components/Editor.vue @@ -58,7 +58,9 @@ export default { // Set this to false to not auto word wrap minified files wordWrapMinified: true, // try "same", "indent" or "none" - wrappingIndent: 'same' + wrappingIndent: 'same', + smoothScrolling: true, + cursorBlinking: 'smooth' }) this.editor.onDidChangeCursorSelection(e => { diff --git a/frontend/src/components/TocPlugin.js b/frontend/src/components/TocPlugin.js index 5bb090e4..5d7af9dd 100644 --- a/frontend/src/components/TocPlugin.js +++ b/frontend/src/components/TocPlugin.js @@ -42,7 +42,6 @@ export default (md, o) => { if (match.length > 1) { // 有自定义参数进来 try { const ext = JSON.parse(match[1].replace(/(['"])?([a-z0-9A-Z_]+)(['"])?:/g, '"$2": ')) - console.log(options, defaults, o, ext) Object.assign(options, defaults, o, ext) } catch (error) { console.log('参数解析错误', match) diff --git a/frontend/src/components/View.vue b/frontend/src/components/View.vue index cddf345a..10af1240 100644 --- a/frontend/src/components/View.vue +++ b/frontend/src/components/View.vue @@ -1,5 +1,5 @@ @@ -68,6 +69,7 @@ export default { convert: {}, todoCount: 0, todoDoneCount: 0, + scrollTop: 0, markdown: Markdown({ linkify: true, breaks: true, @@ -113,6 +115,13 @@ export default { }, 100) }, methods: { + handleScroll (e) { + this.scrollTop = e.target.scrollTop + }, + scrollToTop () { + this.$refs['view-wrapper'].scrollTo(0, 0) + this.syncScroll(1) + }, replaceRelativeLink (md) { if (!this.filePath) { return md @@ -194,7 +203,7 @@ export default { return } - if (e.target.classList.contains('source-line')) { + if (e.target.classList.contains('source-line') && window.getSelection().toString().length < 1) { this.syncScroll(parseInt(e.target.dataset['sourceLine'])) e.preventDefault() } @@ -361,7 +370,7 @@ button:hover { } .outline:hover { - max-height: 88vh; + max-height: 75vh; max-width: 20em; } @@ -384,8 +393,44 @@ button:hover { font-size: 14px; } +.scroll-to-top { + user-select: none; + position: fixed; + right: 2em; + bottom: 40px; + background: #333030; + color: #ccc; + font-size: 14px; + overflow: hidden; + transition: .1s ease-in-out; + z-index: 400; + border-radius: 2px; + cursor: pointer; + padding: 7px 5px; + text-align: center; +} + +.scroll-to-top::before { + content: ' '; + display: block; + border-left: 20px transparent solid; + border-bottom: 7px #bbb solid; + border-right: 20px transparent solid; + margin-bottom: 4px; +} + +.scroll-to-top:hover { + background: #252525; +} + +.scroll-to-top.hide { + opacity: 0; + right: -60px; +} + @media print { .outline, + .scroll-to-top, .action-bar { display: none; }