优化组件尺寸设置;dropdown组件支持设置尺寸

src/form/button.wc

@@ -9,8 +9,7 @@
 :host {
   overflow: hidden;
   display: inline-flex;
-  min-width: 72px;
-  width: 128px;
+  min-width: 128px;
   height: 36px;
   border-radius: 3px;
   user-select: none;
@@ -51,7 +50,7 @@
 }
 
 :host([size='large']) {
-  width: 212px;
+  min-width: 212px;
   height: 52px;
   font-size: 18px;
 
@@ -73,7 +72,7 @@
   }
 }
 :host([size='medium']) {
-  width: 160px;
+  min-width: 160px;
   height: 44px;
 
   button {
@@ -85,7 +84,7 @@
   width: 44px;
 }
 :host([size='small']) {
-  width: 96px;
+  min-width: 96px;
   height: 32px;
 }
 :host([size='small'][circle]) {
@@ -93,7 +92,7 @@
   width: 32px;
 }
 :host([size='mini']) {
-  width: 72px;
+  min-width: 72px;
   height: 26px;
   font-size: 12px;
 

src/form/dropdown.wc

@@ -11,8 +11,7 @@
 <style lang="scss" scoped>
 :host {
   display: inline-flex;
-  min-width: 72px;
-  width: 128px;
+  min-width: 128px;
   height: 36px;
   border-radius: 3px;
   user-select: none;
@@ -85,6 +84,44 @@
   }
 }
 
+:host([size='large']) {
+  min-width: 234px;
+  height: 52px;
+  font-size: 18px;
+
+  .options-box {
+    top: 52px;
+  }
+}
+:host([size='medium']) {
+  min-width: 160px;
+  height: 44px;
+  .options-box {
+    top: 44px;
+  }
+}
+:host([size='small']) {
+  min-width: 96px;
+  height: 32px;
+  .options-box {
+    top: 32px;
+  }
+}
+:host([size='mini']) {
+  min-width: 72px;
+  height: 26px;
+  font-size: 12px;
+
+  .preview {
+    wc-icon {
+      --size: 10px;
+    }
+  }
+  .options-box {
+    top: 26px;
+  }
+}
+
 :host(:focus-within) {
   box-shadow: 0 0 0 2px var(--color-plain-a);
 }
@@ -110,6 +147,7 @@ export default class Dropdown {
   props = {
     value: '',
     placeholder: '',
+    size: '',
     disabled: false
   }
 
@@ -214,10 +252,24 @@ export default class Dropdown {
 
   watch() {
     switch (name) {
+      case 'value':
+        if (val !== null) {
+          this.value = val
+        }
+        break
+
       case 'placeholder':
         this.__INPUT__.placeholder = val || ''
         break
 
+      case 'size':
+        if (val) {
+          Array.from(this.children).forEach(it => {
+            it.setAttribute('size', val)
+          })
+        }
+        break
+
       case 'disabled':
         this.disabled = val !== null
         break

src/form/option.wc

@@ -7,7 +7,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 32px;
+  height: 36px;
   transition: background 0.15s linear;
   color: var(--color-dark-1);
   cursor: pointer;
@@ -23,6 +23,19 @@
   }
 }
 
+:host([size='large']) {
+  height: 52px;
+}
+:host([size='medium']) {
+  height: 44px;
+}
+:host([size='small']) {
+  height: 32px;
+}
+:host([size='mini']) {
+  height: 26px;
+}
+
 :host(:hover),
 :host([active]) {
   label {

src/icon/index.wc

@@ -14,6 +14,8 @@
 }
 .icon {
   display: block;
+  width: 100%;
+  height: 100%;
   fill: currentColor;
 
   &.load {