From 089aa65e6524e3085bec79ce5077c68ec10bd3b2 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Wed, 26 Apr 2023 10:36:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=A4=B4=E5=83=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Readme.md           |   4 +-
 src/avatar/index.js | 103 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 105 insertions(+), 2 deletions(-)

diff --git a/Readme.md b/Readme.md
index 84fa455..04f7ab4 100644
--- a/Readme.md
+++ b/Readme.md
@@ -13,11 +13,11 @@
 
 - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
 
-### 开发进度 && 计划 (33/54)
+### 开发进度 && 计划 (34/54)
 
 - [x] `wc-card` 卡片组件
 - [x] `wc-space` 间隔组件
-- [ ] `wc-avatar` 头像组件
+- [x] `wc-avatar` 头像组件
 - [x] `wc-badge` 徽标组件
 - [x] `wc-drawer` 抽屉组件
 - [x] `wc-collapse` 折叠组件
diff --git a/src/avatar/index.js b/src/avatar/index.js
index 057d1bf..c7ec559 100644
--- a/src/avatar/index.js
+++ b/src/avatar/index.js
@@ -3,3 +3,106 @@
  * @author yutent<yutent.io@gmail.com>
  * @date 2023/04/25 09:27:25
  */
+import { html, raw, css, Component, nextTick } from '@bd/core'
+import '../icon/index.js'
+
+class Avatar extends Component {
+  static props = {
+    src: {
+      type: String,
+      default: null
+    }
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: inline-flex;
+        border-radius: 4px;
+      }
+
+      .avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: 2px;
+        border-radius: inherit;
+        text-align: center;
+        background: var(--color-grey-3);
+        color: #fff;
+        user-select: none;
+
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: inherit;
+          -webkit-user-drag: none;
+        }
+      }
+
+      :host([src]) {
+        .avatar {
+          padding: 0;
+        }
+      }
+      :host([round]) {
+        border-radius: 50%;
+      }
+    `,
+    // 尺寸
+    css`
+      @use 'sass:map';
+      $sizes: (
+        s: (
+          h: 20px,
+          f: 12px
+        ),
+        m: (
+          h: 24px,
+          f: 12px
+        ),
+        l: (
+          h: 32px,
+          f: 14px
+        ),
+        xl: (
+          h: 36px,
+          f: 14px
+        ),
+        xxl: (
+          h: 44px,
+          f: 14px
+        )
+      );
+
+      @loop $s, $v in $sizes {
+        :host([size='#{$s}']) {
+          width: map.get($v, 'h');
+          height: map.get($v, 'h');
+          font-size: map.get($v, 'f');
+          --size: #{map.get($v, 'h') - 8px};
+        }
+      }
+    `
+  ]
+
+  mounted() {
+    if (this.textContent.trim().length > 4) {
+      this.textContent = this.textContent.trim().slice(0, 4)
+    }
+  }
+
+  render() {
+    return html`
+      <div class="avatar">
+        ${this.src
+          ? html`<img src=${this.src} />`
+          : html`<slot><wc-icon name="user"></wc-icon></slot>`}
+      </div>
+    `
+  }
+}
+
+Avatar.reg('avatar')