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

<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>