完成头像组件的简化

src/avatar/index.js

@@ -1,9 +1,9 @@
 /**
- * {}
+ * {头像组件}
  * @author yutent<yutent.io@gmail.com>
  * @date 2023/04/25 09:27:25
  */
-import { html, raw, css, Component, nextTick } from 'wkit'
+import { html, css, Component } from 'wkit'
 import '../icon/index.js'
 
 class Avatar extends Component {
@@ -20,7 +20,9 @@ class Avatar extends Component {
         display: inline-flex;
         width: 32px;
         height: 32px;
-        border-radius: 4px;
+        --wc-icon-size: 22px;
+        font-size: 14px;
+        border-radius: 3px;
       }
 
       .avatar {
@@ -29,11 +31,12 @@ class Avatar extends Component {
         justify-content: center;
         width: 100%;
         height: 100%;
-        padding: 2px;
+        padding: 4px;
         border-radius: inherit;
         text-align: center;
-        background: var(--color-grey-3);
+        background: var(--wc-avatar-color, var(--color-grey-3));
         color: #fff;
+        -webkit-user-select: none;
         user-select: none;
 
         img {
@@ -49,43 +52,18 @@ class Avatar extends Component {
           padding: 0;
         }
       }
-      :host([round]) {
+
+      :host([circle]) {
         border-radius: 50%;
       }
     `,
     // 尺寸
     css`
-      @use 'sass:map';
+      :host([size='small']) {
-      $sizes: (
+        width: 24px;
-        s: (
+        height: 24px;
-          h: 20px,
+        font-size: 12px;
-          f: 12px
+        --wc-icon-size: 14px;
-        ),
-        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');
-          --wc-icon-size: #{map.get($v, 'h') - 8px};
-        }
       }
     `
   ]
@@ -98,11 +76,11 @@ class Avatar extends Component {
 
   render() {
     return html`
-      <div class="avatar">
+      <main class="avatar">
         ${this.src
           ? html`<img src=${this.src} />`
           : html`<slot><wc-icon name="user"></wc-icon></slot>`}
-      </div>
+      </main>
     `
   }
 }

src/index.js

@@ -1,3 +1,4 @@
+import './avatar/index.js'
 import './badge/index.js'
 import './breadcrumb/index.js'
 import './card/index.js'