first commit

console-pro/static/style/default/index.css

@@ -0,0 +1,160 @@
+#app {
+    width: 100%;
+    height: 100%;
+    background-color: #333333;
+}
+
+#log {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+#log-title {
+    width: 100%;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    background-color: #454545;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.log-title-part {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+#search-icon {
+    position: relative;
+    top: 1px;
+    left: 2px;
+    z-index: 2;
+    background-color: #262626;
+}
+
+#search-input {
+    position: relative;
+    left: -15px;
+    padding-left: 13px;
+    padding-top: 2px;
+    background-color: #262626;
+}
+
+#search-input-suffix {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+
+    position: relative;
+    left: -90px;
+    z-index: 2;
+    background-color: #262626;
+}
+
+#clear-on-preview-checkbox {
+    position: relative;
+    left: -75px;
+}
+
+#log-num {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.icon-num {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    cursor: pointer;
+    margin-left: 12px;
+}
+
+#log-detail {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: center;
+    overflow-y: auto;
+}
+
+#log-table {
+    width: 100%;
+    border-collapse: separate;
+    text-align: center;
+    font-size: 14px;
+    background-color: #262626;
+}
+
+#log-table thead tr td {
+    margin-top: 0px;
+    position: sticky;
+    z-index: 2;
+    top: 0px;  
+    background-color: #262626;
+    border: 1px solid #333333;
+    font-weight: bold;
+}
+
+#log-table tbody tr.log {
+    background-color: #02360a;
+}
+#log-table tbody tr.info {
+    background-color: #426094;
+}
+#log-table tbody tr.warn {
+    background-color: #918f31;
+}
+#log-table tbody tr.error {
+    background-color: #3b0f10;
+}
+
+#log-table tbody tr:hover {
+    color: white;
+}
+
+#settings {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.menu {
+    text-align: center;
+    width: 60px;
+    background-color: #262626;
+    position: absolute;
+    top: -1000px;
+    z-index: 2;
+    border-radius: 5px;
+}
+
+.menu-item {
+    padding-top: 2px;
+    padding-bottom: 2px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.menu-item:hover {
+    background-color: #141414;
+}

console-pro/static/template/default/index.html

@@ -0,0 +1,73 @@
+<div id="app" @click="hideContextMenu">
+    <div id="log" v-if="currentPage=='log'">
+        <div id="log-title">
+            <div class="log-title-part">
+                &nbsp;
+                <ui-button style="padding-left: 0px; padding-right: 0px; margin-left: -2px;" class="transparent" @click="openSettings"><img :src="settingsImgPath" width="14" height="14"/>&nbsp;&nbsp;{{ openSettingsI18n }}</ui-button>
+                &nbsp;
+                <ui-button style="padding-left: 0px; padding-right: 0px;" class="transparent" @click="clearLog"><img :src="clearImgPath" width="17" height="17"/>&nbsp;{{ clearLogI18n }}</ui-button>
+                <!-- &nbsp;
+                <ui-checkbox><ui-label value="i18n:console-pro.clearOnPreview"></ui-label></ui-checkbox> -->
+                &nbsp;
+                <ui-button style="padding-left: 0px; padding-right: 0px;" class="transparent" @click="openLog"><img :src="openLogImgPath" width="16" height="16"/>&nbsp;{{ openLogI18n }}</ui-button>
+                &nbsp;
+                <img id="search-icon" :src="searchImgPath" width="15" height="15">
+                <ui-input id="search-input" style="width: 200px;" :placeholder="searchPlaceholderI18n" @change="search($event.target.value)"></ui-input>
+                <div id="search-input-suffix">
+                    <ui-button @click="onMatchCaseBtnClicked" :class="matchCaseBtnClass" style="width: 15px; height: 17px;">Aa</ui-button>
+                    <ui-button @click="onMatchWholeBtnClicked" :class="matchWholeBtnClass" style="width: 15px; height: 17px; padding-bottom: 2px; margin-left: 2px;">[w]</ui-button>
+                    <ui-button @click="onMatchRegBtnClicked" :class="matchRegBtnClass" style="width: 10px; height: 17px;">.*</ui-button>
+                </div>
+                <ui-checkbox id="clear-on-preview-checkbox" @change="setClearOnPreview">运行前清空</ui-checkbox>
+            </div>
+            <div class="log-title-part">
+                <div id="log-num">
+                    <span class="icon-num" @click="showHideCertainTypeOfLog('log')"><img :src="logNumImgPath" width="14" height="14"/>&nbsp;{{ logNum }}</span>
+                    <span class="icon-num" @click="showHideCertainTypeOfLog('info')"><img :src="infoNumImgPath" width="14" height="14"/>&nbsp;{{ infoNum }}</span>
+                    <span class="icon-num" @click="showHideCertainTypeOfLog('warn')"><img :src="warnNumImgPath" width="14" height="14"/>&nbsp;{{ warnNum }}</span>
+                    <span class="icon-num" @click="showHideCertainTypeOfLog('error')"><img :src="errorNumImgPath" width="14" height="14"/>&nbsp;{{ errorNum }}</span>
+                </div>
+                &nbsp;&nbsp;
+            </div>
+        </div>
+
+        <div id="log-detail" @mouseenter="storeELements">
+            <table id="log-table">
+                <thead>
+                    <tr>
+                        <td style="width:6%;">{{ iconI18n }}</td>
+                        <td style="width:16%;">{{ timeI18n }}</td>
+                        <td style="width:6%">{{ typeI18n }}</td>
+                        <td>{{ contentI18n }}</td>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr :class="item.type" v-for="(index, item) in searchResultArray" @dblclick="expandLog(index)" @contextmenu="showContextMenu($event, index)" v-show="item.isShown" v-if="isSearching">
+                        <td><img :src="logTypeTologPath(item.type)" width="14" height="14"/></td>
+                        <td>{{ timeStampToDateTime(item.time) }}</td>
+                        <td>{{ item.type }}</td>
+                        <td style="text-align: left; padding-left: 8px;">{{ truncate(item) }}</td>
+                    </tr>
+                    <tr :class="item.type" v-for="(index, item) in currentLogDataArrayComputed" @dblclick="expandLog(index)" @contextmenu="showContextMenu($event, index)" v-show="item.isShown" v-if="!isSearching">
+                        <td><img :src="logTypeTologPath(item.type)" width="14" height="14"/></td>
+                        <td>{{ timeStampToDateTime(item.time) }}</td>
+                        <td>{{ item.type }}</td>
+                        <td style="text-align: left; padding-left: 8px;">{{ truncate(item) }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <div id="settings" v-if="currentPage=='settings'">
+        <h1>{{ developI18n }}</h1>
+        <ui-button @click="back">{{ backI18n }}</ui-button>
+    </div>
+
+    <div class="menu" @click="hideContextMenu">
+        <div class="menu-item" @click="copyLog(currentLogIndex)"><img :src="copyImgPath" width="13" height="13" />&nbsp;{{ copyI18n }}</div>
+        <div class="menu-item" @click="deleteLog(currentLogIndex)"><img :src="deleteImgPath" width="12" height="12" />&nbsp;{{ deleteI18n }}</div>
+        <div class="menu-item" @click="expandLog(currentLogIndex)" v-if="!isCurrentItemExpanded"><img :src="expandImgPath" width="12" height="12" />&nbsp;{{ expandI18n }}</div>
+        <div class="menu-item" @click="expandLog(currentLogIndex)" v-else><img :src="collapseImgPath" width="12" height="12" />&nbsp;{{ collapseI18n }}</div>
+    </div>
+</div>