| 1 |
- <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>FeHelper配置项</title>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css"/>
<script type="text/javascript" src="../static/vendor/vue/vue.js"></script>
<script src="../static/vendor/require/require.js"></script>
</head>
<body>
<div class="wrapper" id="pageContainer">
<div class="panel panel-default" style="margin-bottom: 0px;">
<div class="panel-heading">
<h3 class="panel-title">
<a href="http://www.baidufe.com/fehelper/feedback.html" target="_blank" class="x-a-high">
<img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：配置页
<span class="x-donate" @mouseover="donateToggle($event)" @mouseout="donateToggle($event)">(Donate)</span>
<span class="ui-fl-r">当前版本：{{manifest.version.replace(/\.0/g,'.')}}</span>
</h3>
</div>
</div>
<div class="panel-body mod-code" :class="{'b-firefox':isFireFox}">
<div class="row">
<h4># 快捷键</h4>
<a href="#" @click="setShortcuts" id="setShortcuts">>> 点击配置FeHelper快捷键（当前快捷键为：{{ defaultKey }}）>></a> <br>
<div class="x-tips">
Tips：按下<b>快捷键</b>，菜单会自动弹出，你可以用方向键<b>[ ↑ / ↓ ]</b>选择功能，用<b>[ Enter ]</b>键确认打开！
</div>
</div>
<div class="row ui-mt-10">
<h4># 深度配置</h4>
<input type="checkbox" value="opt_item_contextMenus" id="opt_item_contextMenus" v-model="selectedOpts"/>
<label for="opt_item_contextMenus">将 FeHelper 添加到右键菜单</label> <br/>
<input type="checkbox" value="FORBID_OPEN_IN_NEW_TAB" id="FORBID_OPEN_IN_NEW_TAB" v-model="selectedOpts"/>
<label for="FORBID_OPEN_IN_NEW_TAB">禁止在新 Tab页/窗口 打开同一个工具</label> <br/>
<input type="checkbox" value="JSON_PAGE_FORMAT" id="JSON_PAGE_FORMAT" v-model="selectedOpts"/>
<label for="JSON_PAGE_FORMAT">JSON自动美化（页面<b><i>自动检测并格式化</i></b>）</label> <br/>
<div class="box-inner row ui-ml-20" :class="{'x-disabled':!selectedOpts.includes('JSON_PAGE_FORMAT')}">
<div class="row-line">
<input type="number" class="form-control" id="MAX_JSON_KEYS_NUMBER"
v-model="maxJsonKeysNumber" :disabled="!selectedOpts.includes('JSON_PAGE_FORMAT')"/>
<label for="MAX_JSON_KEYS_NUMBER">JSON最大长度（能支持的JSON所有Key数量，<b><i>太大可能会卡</i></b>）</label>
</div>
<div class="row-line">
<input type="checkbox" class="" id="AUTO_TEXT_DECODE"
v-model="auto_text_decode" :disabled="!selectedOpts.includes('JSON_PAGE_FORMAT')"/>
<label for="AUTO_TEXT_DECODE">文本自动解码（比如URL自动解码、Unicode自动解码）</label>
</div>
</div>
</div>
<div class="row ui-mt-10">
<h4># 配置右键菜单</h4>
<div class="row ct-menu" :class="{'x-disabled':!selectedOpts.includes('opt_item_contextMenus')}">
<ul class="ul-menu clearfix">
<li v-for="item in Object.keys(menuOpts)">
<input type="checkbox" :id="item" v-bind:value="item" v-model="selectedMenu"
:disabled="!selectedOpts.includes('opt_item_contextMenus') || (isFireFox && disabledItem(item,'menu'))"/>
<label :for="item" v-html="menuOpts[item].text" v-bind:class="{'x-disabled':isFireFox && disabledItem(item,'menu')}"></label>
</li>
</ul>
<div class="box-mpreview">
<h5># 右键菜单实时预览</h5>
<img src="menu-bg.png" alt="menu">
<ul class="x-menus">
<template v-for="m in selectedMenu">
<li v-html="menuOpts[m].icon + ' ' + menuOpts[m].text"></li>
</template>
</ul>
</div>
</div>
</div>
<div class="row ui-mt-10">
<h4># 配置功能菜单</h4>
<div class="row ct-popup">
<div class="col-md-8 ct-fun">
<fieldset>
<legend>JSON相关</legend>
<input type="checkbox" value="JSON_FORMAT" id="JSON_FORMAT" v-model="selectedOpts"/>
<label for="JSON_FORMAT">JSON手动美化（粘贴文本、手动格式化）</label> <br/>
<input type="checkbox" value="JSON_COMPARE" id="JSON_COMPARE" v-model="selectedOpts"/>
<label for="JSON_COMPARE">JSON比对工具（支持左右两个JSON片段进行键值对比较）</label> <br/>
</fieldset>
<fieldset>
<legend>代码美化 / 压缩</legend>
<input type="checkbox" value="JS_CSS_PAGE_BEAUTIFY" id="JS_CSS_PAGE_BEAUTIFY" v-model="selectedOpts"/>
<label for="JS_CSS_PAGE_BEAUTIFY">Js、Css页面自动美化（页面<b><i>自动检测并美化处理</i></b>）</label> <br/>
<input type="checkbox" value="CODE_BEAUTIFY" id="CODE_BEAUTIFY" v-model="selectedOpts"/>
<label for="CODE_BEAUTIFY">代码美化工具（HTML / CSS / JS / XML / SQL）</label> <br/>
<input type="checkbox" value="CODE_COMPRESS" id="CODE_COMPRESS" v-model="selectedOpts"/>
<label for="CODE_COMPRESS">代码压缩工具（Javascript / CSS / HTML）</label> <br/>
</fieldset>
<fieldset>
<legend>贴心工具</legend>
<input type="checkbox" value="QR_CODE" id="QR_CODE" v-model="selectedOpts"/>
<label for="QR_CODE">二维码生成器（支持当前页面、图片、链接、选中的文字生成QrCode）</label> <br/>
<input type="checkbox" value="PAGE_CAPTURE" id="PAGE_CAPTURE" v-model="selectedOpts" v-bind:disabled="isFireFox"/>
<label for="PAGE_CAPTURE" v-bind:class="{'x-disabled':isFireFox}">网页滚动截屏（将当前整个网页滚动截屏转换为图片）</label> <br/>
<input type="checkbox" value="IMAGE_BASE64" id="IMAGE_BASE64" v-model="selectedOpts"/>
<label for="IMAGE_BASE64">图片转Base64（任意图片转DataURI，支持拖拽、复制粘贴自动转化）</label> <br/>
</fieldset>
<fieldset>
<legend>辅助工具</legend>
<input type="checkbox" value="EN_DECODE" id="EN_DECODE" v-model="selectedOpts"/>
<label for="EN_DECODE">字符串编解码（Unicode / UTF8 / Base64 / MD5）</label> <br/>
<input type="checkbox" value="HTML_TO_MARKDOWN" id="HTML_TO_MARKDOWN" v-model="selectedOpts"/>
<label for="HTML_TO_MARKDOWN">Markdown转换（支持Html到Markdown的互转）</label> <br/>
<input type="checkbox" value="REGEXP_TOOL" id="REGEXP_TOOL" v-model="selectedOpts"/>
<label for="REGEXP_TOOL">Js正则表达式（正则测试、常用正则列表）</label> <br/>
<input type="checkbox" value="TIME_STAMP" id="TIME_STAMP" v-model="selectedOpts"/>
<label for="TIME_STAMP">时间(戳)转换（Unix戳与本地时间的互转）</label> <br/>
<input type="checkbox" value="RANDOM_PASSWORD" id="RANDOM_PASSWORD" v-model="selectedOpts"/>
<label for="RANDOM_PASSWORD">随机密码生成（随机生成任意长度、任意字符组成的密码）</label> <br/>
</fieldset>
<fieldset>
<legend>Web前端工具</legend>
<input type="checkbox" value="POST_MAN" id="POST_MAN" v-model="selectedOpts"/>
<label for="POST_MAN">简易Postman（Api接口测试，模拟HEAD/GET/POST方式）</label> <br/>
<input type="checkbox" value="COLOR_PICKER" id="COLOR_PICKER" v-model="selectedOpts" v-bind:disabled="isFireFox"/>
<label for="COLOR_PICKER" v-bind:class="{'x-disabled':isFireFox}">页面取色工具（滑动鼠标随意取色）</label> <br/>
<input type="checkbox" value="FCP_HELPER_DETECT" id="FCP_HELPER_DETECT" v-model="selectedOpts" v-bind:disabled="isFireFox"/>
<label for="FCP_HELPER_DETECT" v-bind:class="{'x-disabled':isFireFox}">编码规范检测（HTML / CSS / JS规范检测）</label> <br/>
<input type="checkbox" value="SHOW_PAGE_LOAD_TIME" id="SHOW_PAGE_LOAD_TIME" v-model="selectedOpts" v-bind:disabled="isFireFox"/>
<label for="SHOW_PAGE_LOAD_TIME" v-bind:class="{'x-disabled':isFireFox}">页面性能检测（页面响应时间、Header监测）</label> <br/>
<input type="checkbox" value="GRID_RULER" id="GRID_RULER" v-model="selectedOpts" v-bind:disabled="isFireFox"/>
<label for="GRID_RULER" v-bind:class="{'x-disabled':isFireFox}">页面栅格标尺（页面栅格化、屏幕标尺测量）</label> <br/>
<input type="checkbox" value="AJAX_DEBUGGER" id="AJAX_DEBUGGER" v-model="selectedOpts" v-bind:disabled="isFireFox"/>
<label for="AJAX_DEBUGGER" v-bind:class="{'x-disabled':isFireFox}">Ajax调试功能（需在控制台中使用）</label> <br/>
<input type="checkbox" value="MULTI_TOOLKIT" id="MULTI_TOOLKIT" v-model="selectedOpts"/>
<label for="MULTI_TOOLKIT">多维小工具集（进制转换、RGB/HEX颜色转换、Crontab、还款计算器）</label> <br/>
</fieldset>
<fieldset>
<legend>其他工具</legend>
<input type="checkbox" value="PAGE_MODIFIER" id="PAGE_MODIFIER" v-model="selectedOpts"/>
<label for="PAGE_MODIFIER">网页油猴工具（网页特效、脚本注入、自动刷新等）</label> <br/>
<input type="checkbox" value="STICKY_NOTES" id="STICKY_NOTES" v-model="selectedOpts"/>
<label for="STICKY_NOTES">我的便签笔记（便签随便贴）</label> <br/>
<input type="checkbox" value="REMOVE_BG" id="REMOVE_BG" v-model="selectedOpts" v-bind:disabled="isFireFox"/>
<label for="REMOVE_BG" v-bind:class="{'x-disabled':isFireFox}">人像背景移除（精准高效的人像抠图）</label> <br/>
</fieldset>
</div>
<div class="col-md-4 box-preview">
<h5># Popup实时预览</h5>
<div class="fe-whole-page">
<div class="fe-function-title">FeHelper<span>(V{{manifest.version.replace(/\.0/g,'.')}})</span></div>
<ul class="fe-function-list">
<li class="-x-endecode" v-if="selectedOpts.includes('EN_DECODE')">
<b></b>字符串编解码</li>
<li class="-x-jsonformat" v-if="selectedOpts.includes('JSON_FORMAT')">
<b></b>JSON串格式化</li>
<li class="-x-jsondiff" v-if="selectedOpts.includes('JSON_COMPARE')">
<b></b>JSON比对工具</li>
<li class="-x-codebeautify" v-if="selectedOpts.includes('CODE_BEAUTIFY')">
<b></b>代码美化工具</li>
<li class="-x-codecompress" v-if="selectedOpts.includes('CODE_COMPRESS')">
<b></b>代码压缩工具</li>
<li class="-x-qrcode" v-if="selectedOpts.includes('QR_CODE')">
<b></b>二维码生成器</li>
<li class="-x-pagecapture" v-if="selectedOpts.includes('PAGE_CAPTURE')">
<b></b>网页滚动截屏</li>
<li class="-x-colorpicker" v-if="selectedOpts.includes('COLOR_PICKER')">
<b></b>页面取色工具</li>
<li class="-x-regexp" v-if="selectedOpts.includes('REGEXP_TOOL')">
<b></b>Js正则表达式</li>
<li class="-x-timestamp" v-if="selectedOpts.includes('TIME_STAMP')">
<b></b>时间(戳)转换</li>
<li class="-x-base64" v-if="selectedOpts.includes('IMAGE_BASE64')">
<b></b>图片转Base64</li>
<li class="-x-password" v-if="selectedOpts.includes('RANDOM_PASSWORD')">
<b></b>随机密码生成</li>
<li class="-x-markdown" v-if="selectedOpts.includes('HTML_TO_MARKDOWN')">
<b></b>Markdown转换</li>
<li class="-x-fcp" v-if="selectedOpts.includes('FCP_HELPER_DETECT')">
<b></b>编码规范检测</li>
<li class="-x-loadtime" v-if="selectedOpts.includes('SHOW_PAGE_LOAD_TIME')">
<b></b>页面性能检测</li>
<li class="-x-post-man" v-if="selectedOpts.includes('POST_MAN')">
<b></b>简易Postman</li>
<li class="-x-grid-ruler" v-if="selectedOpts.includes('GRID_RULER')">
<b></b>页面栅格标尺</li>
<li class="-x-ajax-debugger" title="在开发者工具-Console面板使用" v-if="selectedOpts.includes('AJAX_DEBUGGER')">
<b></b>Ajax调试:<i>关闭</i></li>
<li class="-x-sticky-notes" v-if="selectedOpts.includes('STICKY_NOTES')">
<b></b>我的便签笔记</li>
<li class="-x-page-monkey" v-if="selectedOpts.includes('PAGE_MODIFIER')">
<b></b>网页油猴工具</li>
<li class="-x-multi-toolkit" v-if="selectedOpts.includes('MULTI_TOOLKIT')">
<b></b>多维小工具集</li>
<li class="-x-remove-bg" v-if="selectedOpts.includes('REMOVE_BG')">
<b></b>人像背景移除</li>
</ul>
<div class="fe-feedback">
<a href="https://github.com/zxlie/FeHelper" target="_blank" tabindex="-1" class="x-github" title="访问Github">
<svg height="16" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg>
</a>
<span class="x-settings" title="FeHelper配置项">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 14 16" width="14">
<path fill-rule="evenodd" d="M14 8.77v-1.6l-1.94-.64-.45-1.09.88-1.84-1.13-1.13-1.81.91-1.09-.45-.69-1.92h-1.6l-.63 1.94-1.11.45-1.84-.88-1.13 1.13.91 1.81-.45 1.09L0 7.23v1.59l1.94.64.45 1.09-.88 1.84 1.13 1.13 1.81-.91 1.09.45.69 1.92h1.59l.63-1.94 1.11-.45 1.84.88 1.13-1.13-.92-1.81.47-1.09L14 8.75v.02zM7 11c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path>
</svg>设置</span>
<a href="https://www.baidufe.com/fehelper/feedback.html" target="_blank" tabindex="-1" class="x-fb" title="提交意见反馈">
<svg version="1.1" width="14" height="14" viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
<path d="M384,0H42.667C19.093,0,0.213,19.093,0.213,42.667L0,426.667l85.333-85.333H384c23.573,0,42.667-19.093,42.667-42.667v-256C426.667,19.093,407.573,0,384,0z M234.667,256H192v-42.667h42.667V256z M234.667,170.667H192V85.333h42.667V170.667z"/>
</svg>反馈</a>
</div>
</div>
</div>
</div>
</div>
<div class="row ui-mt-10">
<button class="btn btn-success" @click="save()">确定</button>
<button class="btn btn-danger" @click="cancel()">取消</button>
</div>
<div class="box-donate hide" ref="boxDonate">
<img src="./donate.png" alt="donate" style="margin: 15px;">
</div>
</div>
</div>
<footer class="fe-opt-footer"></footer>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
|
