完善选择器

src/renderer/assets/styles/variables.less

@@ -578,3 +578,5 @@
 @radius-progress-border: 5px;
 
 @transition-theme: .4s ease;
+
+@form-radius: 3px;

src/renderer/components/material/Btn.vue

@@ -24,7 +24,7 @@ export default {
 .btn {
   display: inline-block;
   border: none;
-  border-radius: 3px;
+  border-radius: @form-radius;
   cursor: pointer;
   padding: 8px 15px;
   color: @color-btn;

src/renderer/components/material/FlowBtn.vue

@@ -78,7 +78,7 @@ export default {
   button {
     background-color: transparent;
     border: none;
-    border-radius: 3px;
+    border-radius: @form-radius;
     margin-right: 5px;
     cursor: pointer;
     padding: 4px 7px;

src/renderer/components/material/Input.vue

@@ -49,7 +49,7 @@ export default {
 .input {
   display: inline-block;
   border: none;
-  border-radius: 3px;
+  border-radius: @form-radius;
   padding: 7px 8px;
   color: @color-btn;
   outline: none;

src/renderer/components/material/ListButtons.vue

@@ -91,7 +91,7 @@ export default {
   button {
     background-color: transparent;
     border: none;
-    border-radius: 3px;
+    border-radius: @form-radius;
     margin-right: 5px;
     cursor: pointer;
     padding: 4px 7px;

src/renderer/components/material/SearchInput.vue

@@ -133,7 +133,7 @@ export default {
 @import '../../assets/styles/layout.less';
 
 .search {
-  border-radius: 3px;
+  border-radius: @form-radius;
   transition: box-shadow .4s ease, background-color @transition-theme;
   display: flex;
   flex-flow: column nowrap;

src/renderer/components/material/Selection.vue

@@ -2,7 +2,7 @@
   div(:class="[$style.select, show ? $style.active : '']")
     div(:class="$style.label" ref="dom_btn" @click="handleShow") {{label}}
     ul(:class="$style.list")
-      li(v-for="item in list" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
+      li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
 </template>
 
 <script>
@@ -70,11 +70,17 @@ export default {
 <style lang="less" module>
 @import '../../assets/styles/layout.less';
 
+@selection-height: 28px;
+
 .select {
   font-size: 12px;
   position: relative;
+  width: 300px;
 
   &.active {
+    .label {
+      background-color: @color-btn-background;
+    }
     .list {
       transform: scaleY(1);
       opacity: 1;
@@ -83,13 +89,16 @@ export default {
 }
 
 .label {
-  // background-color: @color-btn-background;
+  background-color: @color-btn-background;
+  padding: 0 10px;
   transition: background-color @transition-theme;
-  border: 1px solid #ccc;
-  height: 28px;
+  height: @selection-height;
+  line-height: 27px;
   box-sizing: border-box;
   color: @color-btn;
+  border-radius: @form-radius;
   cursor: pointer;
+  .mixin-ellipsis-1;
 
   &:hover {
     background-color: @color-theme_2-hover;
@@ -101,24 +110,30 @@ export default {
 
 .list {
   position: absolute;
-  top: 100%;
+  top: 0;
   left: 0;
+  width: 100%;
   background-color: @color-theme_2-background_2;
   opacity: 0;
   transform: scaleY(0);
-  transform-origin: 0 0 0;
+  transform-origin: 0 @selection-height / 2 0;
   transition: .25s ease;
   transition-property: transform, opacity;
   z-index: 10;
+  border-radius: @form-radius;
+  overflow: hidden;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
 
   li {
     cursor: pointer;
-    padding: 8px 15px;
+    padding: 0 10px;
+    line-height: @selection-height;
     // color: @color-btn;
     outline: none;
     transition: background-color @transition-theme;
     background-color: @color-btn-background;
     box-sizing: border-box;
+    .mixin-ellipsis-1;
 
     &:hover {
       background-color: @color-theme_2-hover;
@@ -126,6 +141,9 @@ export default {
     &:active {
       background-color: @color-theme_2-active;
     }
+    &.active {
+      color: @color-btn;
+    }
   }
 }
 
@@ -134,6 +152,7 @@ each(@themes, {
   :global(#container.@{value}) {
     .label {
       color: ~'@{color-@{value}-btn}';
+      background-color: ~'@{color-@{value}-btn-background}';
       &:hover {
         background-color: ~'@{color-@{value}-theme_2-hover}';
       }
@@ -153,6 +172,9 @@ each(@themes, {
         &:active {
           background-color: ~'@{color-@{value}-theme_2-active}';
         }
+        &.active {
+          color: ~'@{color-@{value}-btn}';
+        }
       }
     }
   }