FeHelper样式优化

apps/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "WEB前端助手(FeHelper)",
-  "version": "2018.07.0514",
+  "version": "2018.07.0910",
   "manifest_version": 2,
   "default_locale": "zh_CN",
   "description": "FE助手：包括JSON格式化、二维码生成与解码、信息编解码、代码压缩、美化、页面取色、Markdown与HTML互转、网页滚动截屏、正则表达式、时间转换工具、编码规范检测、页面性能检测、Ajax接口调试、密码生成器",

apps/options/index.css

@@ -1,13 +1,44 @@
 @import "../static/css/bootstrap.min.css";
+@import "../popup/index.css";
 
 .wrapper {
-    width:660px;
+    width:900px;
 }
 #pageContainer label {
     font-weight: normal;
 }
 
 #pageContainer h4 {
-    color: #000;
+    color: #888;
     font-size: 18px;
+}
+
+fieldset {
+    padding: 10px;
+    margin: 10px;
+    border:1px solid #ddd;
+}
+fieldset legend {
+    font-size: 12px;
+    width: auto;
+    border:none;
+    padding:0 10px;
+    margin-bottom: 5px;
+}
+.fe-whole-page {
+    border: 1px solid #ddd;
+    box-shadow: 0 0 50px 1px;
+    width: 150px;
+}
+
+ul.fe-function-list li {
+    padding: 0;
+    height: 28px;
+    line-height: 28px;
+}
+
+h5,h4 {
+    border-bottom : 1px solid #eee;
+    padding-bottom: 5px;
+    width: 60%;
 }

apps/options/index.js

@@ -12,6 +12,7 @@ new Vue({
     },
 
     created: function () {
+
         Settings.getOptions((opts) => {
             this.selectedOpts = Object.keys(opts);
         });

apps/popup/index.css

@@ -1,100 +1,152 @@
-body {
-	font-size:14px;
-	-webkit-user-select:none;
-	padding:0;
-	margin:0;
-	width:150px;
-	position:relative;
-	overflow: hidden;
+
+.fe-whole-page {
+    font-size: 14px;
+    user-select: none;
+    padding: 0;
+    margin: 0;
+    width: 152px;
+    position: relative;
+    overflow: hidden;
 }
+
 .fe-hide {
-	display:none;
+    display: none;
 }
+
 .fe-function-title {
-	width:100%;
-	padding:5px;
-	color:#522;
-	font-weight:bolder;
-	cursor:default;
-	border-bottom:1px dotted #aaa;
+    padding: 5px;
+    color: #522;
+    font-weight: bolder;
+    cursor: default;
+    border-bottom: 1px dotted #aaa;
+    text-align: center;
+    font-size: 12px;
 }
+
+.fe-function-title span {
+    font-weight: normal;
+    color: #e1e1e1;
+}
+
 ul.fe-function-list {
-	padding:0px;
-	list-style:none;
+    padding: 0 10px;
+    list-style: none;
+    width: 130px;
 }
+
 ul.fe-function-list li {
-	padding:3px 3px 3px 10px;
-	cursor:pointer;
-	color:#555;
-	-webkit-transition:all .4s ease;
+    padding: 3px 5px 3px 5px;
+    cursor: pointer;
+    color: #555;
+    -webkit-transition: all .4s ease;
+    text-align: justify;
+    display: block;
+    height: 20px;
+    line-height: 20px;
+    width: 116px;
+    border-bottom: 1px dashed #e5e5e5;
 }
+
+ul.fe-function-list li:last-child {
+    border-bottom: none;
+}
+
 ul.fe-function-list li:hover {
-	color:#ff3C11;
-	background:#f1f1f1;
+    color: #ff3C11;
+    background: #f1f1f1;
 }
-ul.fe-function-list li>span {
-	padding-left:24px;
+
+ul.fe-function-list li > span {
+    padding-left: 24px;
+}
+
+ul.fe-function-list li:after {
+    content: ' ';
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    height: 0;
 }
-ul.fe-function-list li>b{
-	width:14px;
-	height:14px;
-	background:url(ui-icons.png) no-repeat ;
-	-webkit-transition:all .5s ease;
-	position:absolute;
+
+ul.fe-function-list li > b {
+    width: 14px;
+    height: 14px;
+    background: url(../popup/ui-icons.png) no-repeat;
+    -webkit-transition: all .5s ease;
+    display: inline-block;
+    margin-right: 5px;
 }
-ul.fe-function-list li:hover>b {
-	-webkit-transform:rotate(360deg);
+
+ul.fe-function-list li:hover > b {
+    -webkit-transform: rotate(360deg);
 }
+
 ul.fe-function-list li.-x-fcp b {
-	background-position:0px -145px;
+    background-position: 0px -145px;
 }
+
 ul.fe-function-list li.-x-grid b {
-	background-position:-113px -113px;
+    background-position: -113px -113px;
 }
+
 ul.fe-function-list li.-x-regexp b {
-	background-position:-144px 0;
+    background-position: -144px 0;
 }
+
 ul.fe-function-list li.-x-endecode b {
-	background-position:-113px -81px;
+    background-position: -113px -81px;
 }
+
 ul.fe-function-list li.-x-loadtime b {
-	background-position:-81px -113px;
+    background-position: -81px -113px;
 }
+
 ul.fe-function-list li.-x-jsonformat b {
-	background-position:-224px -113px;
+    background-position: -224px -113px;
 }
+
 ul.fe-function-list li.-x-qrcode b {
-	background-position:-81px -209px;
+    background-position: -81px -209px;
 }
+
 ul.fe-function-list li.-x-codebeautify b {
-    background-position:-64px -145px;
+    background-position: -64px -145px;
 }
+
 ul.fe-function-list li.-x-tracker b {
-    background-position:-31px -64px;
+    background-position: -31px -64px;
 }
+
 ul.fe-function-list li.-x-timestamp b {
-    background-position:0px -161px;
+    background-position: 0px -161px;
 }
+
 ul.fe-function-list li.-x-codecompress b {
-    background-position:-65px -81px;
+    background-position: -65px -81px;
 }
+
 ul.fe-function-list li.-x-base64 b {
-    background-position:-33px -209px;
+    background-position: -33px -209px;
 }
+
 ul.fe-function-list li.-x-colorpicker b {
-    background-position:-64px -112px;
+    background-position: -64px -112px;
 }
+
 ul.fe-function-list li.-x-ajax-debugger b {
-    background-position:-81px -129px;
+    background-position: -81px -129px;
 }
+
 ul.fe-function-list li.-x-markdown b {
-	background-position:-83px -222px;
+    background-position: -83px -222px;
 }
+
 ul.fe-function-list li.-x-pagecapture b {
-	background-position:-16px -111px;
+    background-position: -16px -111px;
 }
+
 ul.fe-function-list li.-x-password b {
-	background-position: -144px -95px;
+    background-position: -144px -95px;
 }
 
 ul.fe-function-list li i {
@@ -102,35 +154,44 @@ ul.fe-function-list li i {
     font-weight: 700;
     font-style: normal;
 }
+
 .fe-feedback {
-	font-size:12px;
-	border-top:1px dotted #ddd;
-	padding:5px 15px 5px 5px;
+    font-size: 12px;
+    border-top: 1px dotted #ddd;
+    padding: 5px 10px 5px 10px;
     line-height: 20px;
     color: #888;
 }
-.fe-feedback  a {
-    color:#888;
-	text-decoration:none;
+
+.fe-feedback a {
+    color: #888;
+    text-decoration: none;
     text-align: left;
 }
-.fe-feedback  a:hover {
-	color:#a00;
+
+.fe-feedback a:hover {
+    color: #a00;
 }
+
 svg:not(:root) {
     overflow: hidden;
 }
-.fe-feedback .octicon {
+
+.fe-feedback svg {
     vertical-align: text-bottom;
-}
-.fe-feedback .octicon {
     display: inline-block;
     fill: currentColor;
 }
+
+.fe-feedback img {
+    opacity: 0.7;
+}
+
 .fe-feedback .x-settings {
     float: right;
     cursor: pointer;
 }
+
 .fe-feedback .x-settings:hover {
     color: #a00;
 }

apps/popup/index.js

@@ -6,10 +6,14 @@ new Vue({
     el: '#pageContainer',
     data: {
         ajaxDebugger: '已开',
-        canMeShow: {}
+        canMeShow: {},
+        manifest:{}
     },
 
     created: function () {
+        // 获取当前ctx的version
+        this.manifest = chrome.runtime.getManifest();
+
         let Settings = Tarp.require('../options/settings');
 
         // 根据配置，控制功能菜单的显示与隐藏