优化result组件

src/result/index.js

@@ -9,83 +9,68 @@ import '../icon/index.js'
 
 class Result extends Component {
   static props = {
-    title: {
+    title: 'str!',
-      type: String,
+    subTitle: '',
-      default: '',
+    type: 'success',
-      attribute: false
+    icon: ''
-    },
-    subTitle: { type: String, default: '' },
-    type: {
-      type: String,
-      default: 'success'
-    },
-    icon: {
-      type: String,
-      default: ''
-    }
   }
 
   static styles = [
     css`
       :host {
-        position: relative;
+        display: inline-flex;
-        display: inline-block;
+      }
-        text-align: center;
+
+      :host([type='success']) .icon {
+        background: var(--color-teal-1);
       }
       :host([type='warning']) .icon {
-        background: #e6a23c;
+        background: var(--color-orange-1);
-        wc-icon {
-          transform: translateY(-2px);
-        }
       }
       :host([type='error']) .icon {
-        --wc-icon-size: 24px;
+        background: var(--color-red-1);
-        background: #f56c6c;
       }
       :host([type='info']) .icon {
-        background: #909399;
+        background: var(--color-blue-1);
       }
-      .result {
+
+      .container {
         display: flex;
-        justify-content: center;
         align-items: center;
         flex-direction: column;
         text-align: center;
-        box-sizing: border-box;
+        max-width: 440px;
-        padding: 40px 30px;
+        padding: 36px 32px;
-      }
+        line-height: 1.5;
-      .icon-wrapper {
+        font-size: 14px;
-        display: flex;
+        color: var(--color-dark-1);
-        align-items: center;
-        justify-content: center;
       }
+
       .icon {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 53px;
+        width: 52px;
-        height: 53px;
+        height: 52px;
+        line-height: 1;
         border-radius: 50%;
+        background: var(--wc-result-icon-color, var(--color-dark-1));
         color: #fff;
-        background: #67c23a;
       }
       .title {
-        margin-top: 20px;
+        margin-top: 16px;
+        font-size: 18px;
       }
       .sub-title {
-        margin-top: 10px;
+        margin-top: 6px;
       }
       .extra {
-        margin-top: 30px;
+        margin-top: 12px;
-      }
-      span {
-        font-size: 14px;
-        color: #5e6d82;
-        line-height: 1.5em;
       }
     `
   ]
-  get iconName() {
+
+  get #icon() {
     if (this.icon) {
       return this.icon
     }
@@ -93,38 +78,28 @@ class Result extends Component {
       return 'get'
     }
     if (this.type === 'error') {
-      return 'close'
+      return 'deny'
     }
     return this.type
   }
 
   render() {
     return html`
-      <div class="result">
+      <main class="container">
-        <div class="icon-wrapper">
+        <div class="icon">
-          <slot name="icon">
+          <slot name="icon"><wc-icon name=${this.#icon}></wc-icon></slot>
-            <div class="icon">
-              <wc-icon name=${this.iconName}></wc-icon>
-            </div>
-          </slot>
         </div>
 
-        <div class="title">
+        <h3 class="title">
-          <slot name="title">
+          <slot name="title">${this.title}</slot>
-            <span>${this.title}</span>
+        </h3>
-          </slot>
-        </div>
 
-        <div class="sub-title">
+        <section class="sub-title">
-          <slot name="sub-title">
+          <slot name="sub-title">${this.subTitle}</slot>
-            <span>${this.subTitle}</span>
+        </section>
-          </slot>
-        </div>
 
-        <div class="extra">
+        <cite class="extra"><slot></slot></cite>
-          <slot name="extra"></slot>
+      </main>
-        </div>
-      </div>
     `
   }
 }