1 | <template>
|
2 | <div class="console">
|
3 | <div class="console-header">
|
4 | <h3
|
5 | @dblclick="isConsoleFolded = !isConsoleFolded"
|
6 | @touchend="isConsoleFolded = !isConsoleFolded"
|
7 | class="console-title"
|
8 | >
|
9 | console
|
10 | <transition name="fade">
|
11 | <span class="console-new" v-show="hasLog"></span>
|
12 | </transition>
|
13 | </h3>
|
14 | <p class="console-ctrl">
|
15 | <svg
|
16 | @click="run"
|
17 | t="1561513991991"
|
18 | class="icon console-runBtn"
|
19 | viewBox="0 0 1024 1024"
|
20 | version="1.1"
|
21 | xmlns="http://www.w3.org/2000/svg"
|
22 | p-id="2187"
|
23 | xmlns:xlink="http://www.w3.org/1999/xlink"
|
24 | >
|
25 | <path
|
26 | d="M512 64C264.64 64 64 264.576 64 512c0 247.36 200.64 448 448 448 247.488 0 448-200.64 448-448C960 264.576 759.488 64 512 64zM384 704 384 320l320 192L384 704z"
|
27 | p-id="2188"
|
28 | ></path>
|
29 | </svg>
|
30 | <input
|
31 | type="checkbox"
|
32 | :checked="autoRun"
|
33 | @change="toogleAutoRun"
|
34 | />autoRun
|
35 | </p>
|
36 | </div>
|
37 | <transition name="slide">
|
38 | <div v-show="!isConsoleFolded" class="console-content">
|
39 | <p
|
40 | class="console-message"
|
41 | :class="{
|
42 | 'console-message--error': log.type
|
43 | }"
|
44 | v-for="(log, index) in logs"
|
45 | :key="index"
|
46 | >
|
47 | <span
|
48 | class="console-messageType"
|
49 | :class="`console-messageType--${getFlag(log.type)}`"
|
50 | >
|
51 | {{ getFlag(log.type) }}
|
52 | </span>
|
53 | {{ log.message }}
|
54 | </p>
|
55 | </div>
|
56 | </transition>
|
57 | </div>
|
58 | </template>
|
59 |
|
60 | <script>
|
61 | import { mapActions, mapState } from 'vuex';
|
62 | import bus from '@/js/eventbus.js';
|
63 | export default {
|
64 | name: 'console',
|
65 | data() {
|
66 | return {
|
67 | isConsoleFolded: true
|
68 | };
|
69 | },
|
70 | computed: {
|
71 | ...mapState(['autoRun', 'logs']),
|
72 | hasLog() {
|
73 | return this.logs.length;
|
74 | }
|
75 | },
|
76 | methods: {
|
77 | ...mapActions(['toogleAutoRun']),
|
78 | run() {
|
79 | bus.$emit('run');
|
80 | },
|
81 | getFlag(method) {
|
82 | switch (method) {
|
83 | case 'log':
|
84 | case 'info':
|
85 | case 'debug':
|
86 | return 'info';
|
87 | case 'error':
|
88 | return 'error';
|
89 | case 'warn':
|
90 | return 'warn';
|
91 | default:
|
92 | return 'nothing';
|
93 | }
|
94 | }
|
95 | }
|
96 | };
|
97 | </script>
|
98 |
|
99 | <style lang="scss">
|
100 | @import '@/css/index.scss';
|
101 | .console {
|
102 | margin-top: 10px;
|
103 | border-top: 1px solid rgba($c-highlight, 0.2);
|
104 | font-family: $font-family;
|
105 | min-height: 48px;
|
106 | &-header {
|
107 | display: flex;
|
108 | justify-content: space-between;
|
109 | align-items: center;
|
110 | }
|
111 | &-title {
|
112 | font-weight: 300;
|
113 | font-size: 16px;
|
114 | line-height: 2em;
|
115 | color: $c-highlight;
|
116 | margin: 0;
|
117 | user-select: none;
|
118 | }
|
119 | &-new {
|
120 | display: inline-block;
|
121 | background: red;
|
122 | width: 10px;
|
123 | height: 10px;
|
124 | border-radius: 50%;
|
125 | margin-left: 5px;
|
126 | box-shadow: 0 0 10px red;
|
127 | }
|
128 | &-ctrl {
|
129 | font-size: 14px;
|
130 | display: flex;
|
131 | align-items: center;
|
132 | & input {
|
133 | margin-right: 5px;
|
134 | }
|
135 | }
|
136 | &-runBtn {
|
137 | width: 16px;
|
138 | height: 16px;
|
139 | fill: $c-highlight;
|
140 | display: inline-block;
|
141 | margin-right: 10px;
|
142 | padding: 2px;
|
143 | cursor: pointer;
|
144 | transition: 0.5 all ease-out;
|
145 | &:hover {
|
146 | filter: brightness(1.1);
|
147 | }
|
148 | &:active {
|
149 | filter: brightness(0.8);
|
150 | }
|
151 | }
|
152 | &-content {
|
153 | height: 200px;
|
154 | width: 100%;
|
155 | transition: 0.3s all ease-out;
|
156 | background: $c-console-bg;
|
157 | margin-bottom: 20px;
|
158 | transition: all 0.5s;
|
159 | overflow-y: auto;
|
160 | }
|
161 | &-message {
|
162 | font-size: 14px;
|
163 | margin: 0;
|
164 | line-height: 1.5;
|
165 | &--error {
|
166 | background: rgba($c-console-error, 0.2);
|
167 | }
|
168 | &:nth-of-type(2n + 1) {
|
169 | background: $c-console-bg-odd;
|
170 | }
|
171 | &Type {
|
172 | font-size: 10px;
|
173 | color: white;
|
174 | vertical-align: middle;
|
175 | display: inline-block;
|
176 | width: 3em;
|
177 | line-height: 14px;
|
178 | text-align: center;
|
179 | margin: 0 4px;
|
180 | border-radius: 2px;
|
181 | &--info {
|
182 | background: $c-console-info;
|
183 | }
|
184 | &--error {
|
185 | background: $c-console-error;
|
186 | }
|
187 | &--warn {
|
188 | background: $c-console-warn;
|
189 | }
|
190 | }
|
191 | }
|
192 | }
|
193 |
|
194 | .slide-enter-active,
|
195 | .slide-leave-active,
|
196 | .fade-enter-active,
|
197 | .fade-leave-active {
|
198 | transition: all 0.5s;
|
199 | }
|
200 | .slide-enter,
|
201 | .slide-leave-to {
|
202 | height: 0;
|
203 | margin-bottom: 0;
|
204 | }
|
205 |
|
206 | .fade-enter,
|
207 | .fade-leave-to {
|
208 | opacity: 0;
|
209 | }
|
210 | </style>
|