缓存改动

This commit is contained in:
JimQing 2020-07-04 00:48:27 +08:00
parent b35b94a6d8
commit fe64205913
20 changed files with 112 additions and 266 deletions

View File

@ -1,47 +0,0 @@
.loading {
text-align: center;
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 99999;
background-color: #f2f2f2;
}
.loading_night {
background-color: #303133;
}
.loading-wrapper {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.loading-text {
line-height: 1.4;
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 1rem;
}
.loading-anim {
width: 35px;
height: 35px;
border: 5px solid rgba(189, 189, 189, 0.25);
border-left-color: rgba(66, 185, 131, 0.9);
border-top-color: rgba(66, 185, 131, 0.9);
border-radius: 50%;
display: inline-block;
animation: rotate 600ms infinite linear;
}
@keyframes rotate {
to {
transform: rotate(1turn)
}
}

View File

@ -12,12 +12,6 @@
<link rel="shortcut icon" href="https://imgkr.cn-bj.ufileos.com/f3accc83-b854-4e99-afb5-8a6465e1d84f.png">
<link rel="apple-touch-icon-precomposed"
href="https://imgkr.cn-bj.ufileos.com/f3accc83-b854-4e99-afb5-8a6465e1d84f.png">
<link rel="stylesheet" href="assets/css/loading.css">
<link rel="stylesheet" href="libs/css/index.css">
<link rel="stylesheet" href="libs/css/code-themes/github-v2.min.css">
<link rel="stylesheet" href="libs/css/style-mirror.css">
<link rel="stylesheet" href="libs/css/animate.css">
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>

File diff suppressed because one or more lines are too long

View File

@ -1,2 +0,0 @@
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.prettyprint{font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#333}ol.linenums{margin-top:0;margin-bottom:0;color:#ccc}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fafbfc;list-style-type:decimal}@media screen{.str{color:#183691}.kwd{color:#a71d5d}.com{color:#969896}.typ{color:#0086b3}.lit{color:#0086b3}.pun{color:#333}.opn{color:#333}.clo{color:#333}.tag{color:navy}.atn{color:#795da3}.atv{color:#183691}.dec{color:#333}.var{color:teal}.fun{color:#900}}

View File

@ -1,2 +0,0 @@
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.prettyprint{background:#2d2d2d!important;font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#ccc}ol.linenums{margin-top:0;margin-bottom:0;color:#999}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#2d2d2d;list-style-type:decimal}@media screen{.str{color:#9c9}.kwd{color:#c9c}.com{color:#999}.typ{color:#69c}.lit{color:#f99157}.pun{color:#ccc}.opn{color:#ccc}.clo{color:#ccc}.tag{color:#f2777a}.atn{color:#f99157}.atv{color:#6cc}.dec{color:#f99157}.var{color:#f2777a}.fun{color:#69c}}

View File

@ -1,2 +0,0 @@
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.prettyprint{background:#1d1f21!important;font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#c5c8c6}ol.linenums{margin-top:0;margin-bottom:0;color:#969896}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#1d1f21;list-style-type:decimal}@media screen{.str{color:#b5bd68}.kwd{color:#b294bb}.com{color:#969896}.typ{color:#81a2be}.lit{color:#de935f}.pun{color:#c5c8c6}.opn{color:#c5c8c6}.clo{color:#c5c8c6}.tag{color:#c66}.atn{color:#de935f}.atv{color:#8abeb7}.dec{color:#de935f}.var{color:#c66}.fun{color:#81a2be}}

View File

@ -1,2 +0,0 @@
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.prettyprint{background:#f6f8fa!important;font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#4d4d4c}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#f6f8fa;list-style-type:decimal}@media screen{.str{color:#718c00}.kwd{color:#8959a8}.com{color:#8e908c}.typ{color:#4271ae}.lit{color:#f5871f}.pun{color:#4d4d4c}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,36 +0,0 @@
.CodeMirror-hints {
position: absolute;
z-index: 10;
overflow: hidden;
list-style: none;
margin: 0;
padding: 2px;
-webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
-moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
border-radius: 3px;
border: 1px solid silver;
background: white;
font-size: 90%;
font-family: monospace;
max-height: 20em;
overflow-y: auto;
}
.CodeMirror-hint {
margin: 0;
padding: 0 4px;
border-radius: 2px;
white-space: pre;
color: black;
cursor: pointer;
}
li.CodeMirror-hint-active {
background: #08f;
color: white;
}

View File

@ -1,124 +0,0 @@
/*
Name: Base16 Default Light
Author: Chris Kempson (http://chriskempson.com)
CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
*/
.cm-s-style-mirror.CodeMirror {
background: #f5f5f5;
color: #444;
font-size: 16px;
padding: 20px;
line-height: 25px;
}
.cm-s-style-mirror div.CodeMirror-selected {
background: #e0e0e0;
}
.cm-s-style-mirror .CodeMirror-line::selection,
.cm-s-style-mirror .CodeMirror-line>span::selection,
.cm-s-style-mirror .CodeMirror-line>span>span::selection {
background: #e0e0e0;
}
.cm-s-style-mirror .CodeMirror-line::-moz-selection,
.cm-s-style-mirror .CodeMirror-line>span::-moz-selection,
.cm-s-style-mirror .CodeMirror-line>span>span::-moz-selection {
background: #e0e0e0;
}
.cm-s-style-mirror .CodeMirror-gutters {
background: #f5f5f5;
border-right: 0px;
}
.cm-s-style-mirror .CodeMirror-guttermarker {
color: #ac4142;
}
.cm-s-style-mirror .CodeMirror-guttermarker-subtle {
color: #b0b0b0;
}
.cm-s-style-mirror .CodeMirror-linenumber {
color: #b0b0b0;
}
.cm-s-style-mirror .CodeMirror-cursor {
border-left: 1px solid #505050;
}
.cm-s-style-mirror span.cm-comment {
color: green;
}
.cm-s-style-mirror span.cm-atom {
color: #aa759f;
}
.cm-s-style-mirror span.cm-number {
color: #aa759f;
}
.cm-s-style-mirror span.cm-property,
.cm-s-style-mirror span.cm-attribute {
color: #90a959;
}
.cm-s-style-mirror span.cm-keyword {
color: #023a52;
}
.cm-s-style-mirror span.cm-string {
color: #e46918;
}
.cm-s-style-mirror span.cm-variable {
color: #90a959;
}
.cm-s-style-mirror span.cm-variable-2 {
color: #00695f;
}
.cm-s-style-mirror span.cm-variable-3 {
color: #2e6e8a;
}
.cm-s-style-mirror span.cm-def {
color: #d28445;
}
.cm-s-style-mirror span.cm-bracket {
color: #202020;
}
.cm-s-style-mirror span.cm-tag {
color: #000;
}
.cm-s-style-mirror span.cm-link {
color: #b26a00;
}
.cm-s-style-mirror span.cm-error {
/* background: #ac4142;
color: #f5f5f5; */
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: #df8d8e;
}
.cm-s-style-mirror .CodeMirror-activeline-background {
background: #dddcdc;
}
.cm-s-style-mirror .CodeMirror-matchingbracket {
color: rgb(32, 32, 32) !important;
background-color: rgba(0, 0, 0, 0.1) !important;
}

View File

@ -1,2 +0,0 @@
.cm-s-xq-light span.cm-keyword{line-height:1em;font-weight:700;color:#5a5cad}.cm-s-xq-light span.cm-atom{color:#6c8cd5}.cm-s-xq-light span.cm-number{color:#164}.cm-s-xq-light span.cm-def{text-decoration:underline}.cm-s-xq-light span.cm-variable{color:#000}.cm-s-xq-light span.cm-variable-2{color:#000}.cm-s-xq-light span.cm-type,.cm-s-xq-light span.cm-variable-3{color:#000}.cm-s-xq-light span.cm-comment{color:#0080ff;font-style:italic}.cm-s-xq-light span.cm-string{color:red}.cm-s-xq-light span.cm-meta{color:#ff0}.cm-s-xq-light span.cm-qualifier{color:grey}.cm-s-xq-light span.cm-builtin{color:#7ea656}.cm-s-xq-light span.cm-bracket{color:#cc7}.cm-s-xq-light span.cm-tag{color:#3f7f7f}.cm-s-xq-light span.cm-attribute{color:#7f007f}.cm-s-xq-light span.cm-error{color:red}.cm-s-xq-light .CodeMirror-activeline-background{background:#e8f2ff}.cm-s-xq-light .CodeMirror-matchingbracket{outline:1px solid grey;color:#000!important;background:#ff0}
/*# sourceMappingURL=xq-light.min.css.map */

View File

@ -213,6 +213,10 @@ section {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.code-snippet__fix ul li {
list-style: none;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;

View File

@ -8,12 +8,54 @@
</template>
<script>
export default {
}
</script>
<style scoped>
.loading {
text-align: center;
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 99999;
background-color: #f2f2f2;
}
.loading_night {
background-color: #303133;
}
.loading-wrapper {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.loading-text {
line-height: 1.4;
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 1rem;
}
.loading-anim {
width: 35px;
height: 35px;
border: 5px solid rgba(189, 189, 189, 0.25);
border-left-color: rgba(66, 185, 131, 0.9);
border-top-color: rgba(66, 185, 131, 0.9);
border-radius: 50%;
display: inline-block;
animation: rotate 600ms infinite linear;
}
@keyframes rotate {
to {
transform: rotate(1turn)
}
}
</style>

View File

@ -174,7 +174,7 @@ export default {
this.$emit('startCopy');
setTimeout(() => {
solveWeChatImage()
this.setHtml(solveHtml())
this.setOutput(solveHtml())
let clipboardDiv = document.getElementById('output')
clipboardDiv.focus()
@ -185,7 +185,8 @@ export default {
range.setEndAfter(clipboardDiv.lastChild)
window.getSelection().addRange(range)
document.execCommand('copy')
clipboardDiv.innerHTML = this.output; //
range.setStartBefore(clipboardDiv.firstChild)
range.setEndAfter(clipboardDiv.firstChild)
//
this.$notify({
showClose: true,
@ -247,7 +248,7 @@ export default {
document.body.removeChild(downLink)
},
...mapMutations(['clearEditorToDefault','setCurrentColor', 'setCiteStatus', 'themeChanged',
'setHtml', 'setCurrentFont', 'setCurrentSize', 'setCssEditorValue', 'setWxRendererOptions'])
'setOutput', 'setCurrentFont', 'setCurrentSize', 'setCssEditorValue', 'setWxRendererOptions'])
},
mounted() {
this.selectFont = this.currentFont;

View File

@ -5,10 +5,18 @@ import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './element'
import 'codemirror/lib/codemirror.css';
import "codemirror/theme/ambiance.css";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/theme/xq-light.css";
import "./assets/less/theme.less";
import 'codemirror/theme/ambiance.css';
import 'codemirror/theme/xq-light.css';
import 'codemirror/mode/css/css'
import 'codemirror/mode/markdown/markdown'
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/css-hint.js'
import './assets/less/theme.less';
// 对codemirror预处理
import './scripts/format'
import './scripts/closebrackets'
Vue.use(ElementUI)
Vue.config.productionTip = false

View File

@ -140,7 +140,7 @@ const WxRenderer = function (opts) {
return `
<section class="code-snippet__fix code-snippet__js">
<ul class="code-snippet__line-index code-snippet__js">${numbers.join('')}</ul>
<pre class="code-snippet__js" data-lang="${lang}">
<pre class="code__pre code-snippet__js" data-lang="${lang}">
${codeLines.join('')}
</pre>
</section>

View File

@ -18,7 +18,6 @@ const state = {
output: '',
editor: null,
cssEditor: null,
html: '',
currentFont: '',
currentSize: '',
currentColor: '',
@ -26,8 +25,8 @@ const state = {
nightMode: false
};
const mutations = {
setHtml(state, data) {
state.html = data;
setOutput(state, data) {
state.output = data;
},
setEditorValue(state, data) {
state.editor.setValue(data)

View File

@ -31,7 +31,7 @@
</div>
</section>
</el-col>
<transition name="custom-classes-transition" enter-active-class="animated bounceInRight">
<transition name="custom-classes-transition" enter-active-class="bounceInRight">
<el-col id="cssBox" :span="12" v-show="showBox">
<textarea id="cssEditor" type="textarea" placeholder="Your custom css here.">
</textarea>
@ -47,17 +47,6 @@
</div>
</template>
<script>
import CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/mode/css/css'
import 'codemirror/mode/markdown/markdown'
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/css-hint.js'
import '../scripts/format.js'
import fileApi from '../api/file';
import editorHeader from '../components/codeMirror/header';
import aboutDialog from '../components/codeMirror/aboutDialog';
@ -71,7 +60,6 @@ import {
} from '../scripts/util'
require('codemirror/mode/javascript/javascript')
import '../scripts/closebrackets'
import $ from 'jquery'
import config from '../scripts/config'
import {mapState, mapMutations} from 'vuex';
@ -100,7 +88,6 @@ export default {
cssEditor: state=> state.cssEditor,
currentSize: state=> state.currentSize,
currentColor: state=> state.currentColor,
html: state=> state.html,
nightMode: state=> state.nightMode
})
},
@ -249,6 +236,17 @@ export default {
},
mounted() {
this.leftAndRightScroll()
},
watch: {
isCoping(newVal) {
const preDomList = document.getElementsByClassName('code__pre');
if (preDomList.length > 0) {
preDomList.forEach(pre=> {
pre.style.whiteSpace = newVal ? 'pre' : 'normal';
})
}
}
}
}
@ -310,4 +308,35 @@ export default {
transform: translate(-50%, -50%);
}
}
.bounceInRight {
animation-name: bounceInRight;
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes bounceInRight {
0%,60%,75%,90%,100% {
transition-timing-function: cubic-bezier(0.215,.610,.355,1.000)
}
0% {
opacity:0;
transform:translate3d(3000px,0,0)}
60% {
opacity:1;
transform:translate3d(-25px,0,0)
}
75% {
transform:translate3d(10px,0,0)
}
90% {
transform:translate3d(-5px,0,0)
}
100% {
transform:none
}
}
</style>
<style lang="less">
@import url('../assets/less/app.less');
@import url('../assets/less/style-mirror.css');
</style>