From 3cb8bf48554e083dd8c2b051e6bc1497f54b90b3 Mon Sep 17 00:00:00 2001
From: chenjiajian <770230504@qq.com>
Date: Sat, 6 May 2023 17:51:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0Result=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Readme.md           |   4 +-
 src/index.js        |   2 +
 src/result/index.js | 140 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 144 insertions(+), 2 deletions(-)
 create mode 100644 src/result/index.js

diff --git a/Readme.md b/Readme.md
index c4caf68..b462303 100644
--- a/Readme.md
+++ b/Readme.md
@@ -16,7 +16,7 @@
 
 - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
 
-### 开发进度 && 计划 (37/54)
+### 开发进度 && 计划 (39/54)
 
 - [x] `wc-card` 卡片组件
 - [x] `wc-space` 间隔组件
@@ -70,7 +70,7 @@
 - [ ] `wc-chatbubble` 聊天气泡组件
 - [x] `wc-divider` 分割线组件
 - [ ] `wc-table` 表格组件
-- [ ] `wc-result` 结果反馈组件
+- [x] `wc-result` 结果反馈组件
 - [ ] `wc-empty` 空状态组件
 - [x] `wc-sandbox` 代码沙盒组件
 
diff --git a/src/index.js b/src/index.js
index e860cdc..a6a7688 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,3 +21,5 @@ import './steps/index.js'
 import './swipe/index.js'
 import './tabs/index.js'
 import './timeline/index.js'
+import './result/index.js'
+import './progress/index.js'
diff --git a/src/result/index.js b/src/result/index.js
new file mode 100644
index 0000000..18fbd91
--- /dev/null
+++ b/src/result/index.js
@@ -0,0 +1,140 @@
+/**
+ * {结果}
+ * @author chensbox<chensbox@foxmail.com>
+ * @date 2023/04/28 16:14:10
+ */
+
+import { css, html, Component, styleMap } from '@bd/core'
+import '../icon/index.js'
+
+class Result extends Component {
+  static props = {
+    title: {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    'sub-title': { type: String, default: '' },
+    type: {
+      type: String,
+      default: 'success'
+    },
+    icon: {
+      type: String,
+      default: ''
+    }
+  }
+
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        display: inline-block;
+        text-align: center;
+      }
+      :host([type='warning']) .icon {
+        background: #e6a23c;
+        wc-icon {
+          transform: translateY(-2px);
+        }
+      }
+      :host([type='error']) .icon {
+        --size: 24px;
+        background: #f56c6c;
+      }
+      :host([type='info']) .icon {
+        background: #909399;
+      }
+      .result {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        text-align: center;
+        box-sizing: border-box;
+        padding: 40px 30px;
+      }
+      .icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 53px;
+        height: 53px;
+        border-radius: 50%;
+        color: #fff;
+        background: #67c23a;
+      }
+      .title {
+        margin-top: 20px;
+      }
+      .sub-title {
+        margin-top: 10px;
+      }
+      .extra {
+        margin-top: 30px;
+      }
+      span {
+        font-size: 14px;
+        color: #5e6d82;
+        line-height: 1.5em;
+      }
+    `
+  ]
+  get iconName() {
+    if (this.icon) {
+      return this.icon
+    }
+    if (this.type === 'success') {
+      return 'get'
+    }
+    if (this.type === 'error') {
+      return 'close'
+    }
+    return this.type
+  }
+  mounted() {
+    console.log(this.subTitle)
+  }
+
+  render() {
+    let styles = styleMap({
+      left: `${this.left}px`,
+      top: `${this.top}px`
+    })
+
+    return html`
+      <div class="result">
+        <div class="icon-wrapper">
+          <slot name="icon">
+            <div class="icon">
+              <wc-icon name=${this.iconName}></wc-icon>
+            </div>
+          </slot>
+        </div>
+
+        <div class="title">
+          <slot name="title">
+            <span>${this.title}</span>
+          </slot>
+        </div>
+
+        <div class="sub-title">
+          <slot name="sub-title">
+            <span>${this['sub-title']}</span>
+          </slot>
+        </div>
+
+        <div class="extra">
+          <slot name="extra"></slot>
+        </div>
+      </div>
+    `
+  }
+}
+
+Result.reg('result')