From 8e3578f445a89ff52ea9fcc9dce781325d846762 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sun, 11 Sep 2022 01:26:26 +0800
Subject: [PATCH] feat: add avatar component

---
 packages/components/src/components.ts         |  1 +
 .../src/components/avatar/Avatar.story.vue    |  8 ++
 .../src/components/avatar/Avatar.vue          | 89 +++++++++++++++++++
 .../components/src/components/avatar/index.ts |  1 +
 .../src/components/avatar/interface.ts        |  1 +
 packages/components/src/icons/icons.ts        |  2 +
 packages/shared/src/layouts/BasicLayout.vue   | 11 ++-
 .../UserDropdownSelector.vue                  | 10 +--
 src/modules/contents/comments/CommentList.vue | 10 ++-
 src/modules/contents/pages/SinglePageList.vue | 12 +--
 src/modules/contents/posts/PostList.vue       | 12 +--
 .../dashboard/widgets/RecentLoginWidget.vue   |  8 +-
 src/modules/system/roles/RoleDetail.vue       | 19 ++--
 src/modules/system/roles/RoleList.vue         |  2 +-
 .../system/users/PersonalAccessTokens.vue     |  2 +-
 src/modules/system/users/UserList.vue         | 15 ++--
 16 files changed, 156 insertions(+), 47 deletions(-)
 create mode 100644 packages/components/src/components/avatar/Avatar.story.vue
 create mode 100644 packages/components/src/components/avatar/Avatar.vue
 create mode 100644 packages/components/src/components/avatar/index.ts
 create mode 100644 packages/components/src/components/avatar/interface.ts

diff --git a/packages/components/src/components.ts b/packages/components/src/components.ts
index 7973e355..3d3ba409 100644
--- a/packages/components/src/components.ts
+++ b/packages/components/src/components.ts
@@ -1,3 +1,4 @@
+export * from "./components/avatar";
 export * from "./components/alert";
 export * from "./components/button";
 export * from "./components/card";
diff --git a/packages/components/src/components/avatar/Avatar.story.vue b/packages/components/src/components/avatar/Avatar.story.vue
new file mode 100644
index 00000000..6b61fe3d
--- /dev/null
+++ b/packages/components/src/components/avatar/Avatar.story.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+import { VAvatar } from "./index";
+</script>
+<template>
+  <Story title="Avatar">
+    <VAvatar src="https://ryanc.cc/avatar" size="lg" />
+  </Story>
+</template>
diff --git a/packages/components/src/components/avatar/Avatar.vue b/packages/components/src/components/avatar/Avatar.vue
new file mode 100644
index 00000000..9439dbd3
--- /dev/null
+++ b/packages/components/src/components/avatar/Avatar.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import type { Size } from "./interface";
+import { useImage } from "@vueuse/core";
+import { IconUserLine } from "@/icons/icons";
+
+const props = withDefaults(
+  defineProps<{
+    src?: string;
+    alt?: string;
+    size?: Size;
+    width?: string;
+    height?: string;
+    circle?: boolean;
+  }>(),
+  {
+    src: undefined,
+    alt: undefined,
+    size: undefined,
+    width: undefined,
+    height: undefined,
+    circle: false,
+  }
+);
+
+const classes = computed(() => {
+  const result = [`avatar-${props.circle ? "circle" : "square"}`];
+  if (props.size) {
+    result.push(`avatar-${props.size}`);
+  }
+  return result;
+});
+
+const styles = computed(() => {
+  const result: Record<string, string> = {};
+  if (props.width) {
+    result.width = props.width;
+  }
+  if (props.height) {
+    result.height = props.height;
+  }
+  return result;
+});
+
+const { isLoading, error } = useImage({ src: props.src });
+</script>
+
+<template>
+  <div class="avatar-wrapper" :class="classes" :style="styles">
+    <div v-if="isLoading || error" class="w-full h-full">
+      <IconUserLine class="w-full h-full" />
+    </div>
+    <img v-else :src="src" :alt="alt" />
+  </div>
+</template>
+
+<style lang="scss">
+.avatar-wrapper {
+  @apply inline-flex items-center justify-center overflow-hidden bg-white;
+
+  img {
+    @apply w-full h-full object-cover;
+  }
+
+  &.avatar-circle {
+    @apply rounded-full;
+  }
+
+  &.avatar-square {
+    @apply rounded-base;
+  }
+
+  &.avatar-xs {
+    @apply w-6 h-6;
+  }
+
+  &.avatar-sm {
+    @apply w-8 h-8;
+  }
+
+  &.avatar-md {
+    @apply w-10 h-10;
+  }
+
+  &.avatar-lg {
+    @apply w-12 h-12;
+  }
+}
+</style>
diff --git a/packages/components/src/components/avatar/index.ts b/packages/components/src/components/avatar/index.ts
new file mode 100644
index 00000000..022733a5
--- /dev/null
+++ b/packages/components/src/components/avatar/index.ts
@@ -0,0 +1 @@
+export { default as VAvatar } from "./Avatar.vue";
diff --git a/packages/components/src/components/avatar/interface.ts b/packages/components/src/components/avatar/interface.ts
new file mode 100644
index 00000000..b14de4e3
--- /dev/null
+++ b/packages/components/src/components/avatar/interface.ts
@@ -0,0 +1 @@
+export type Size = "lg" | "md" | "sm" | "xs";
diff --git a/packages/components/src/icons/icons.ts b/packages/components/src/icons/icons.ts
index 31817670..49c830f6 100644
--- a/packages/components/src/icons/icons.ts
+++ b/packages/components/src/icons/icons.ts
@@ -46,6 +46,7 @@ import IconTeam from "~icons/ri/team-fill";
 import IconCharacterRecognition from "~icons/ri/character-recognition-line";
 import IconCalendar from "~icons/ri/calendar-line";
 import IconLink from "~icons/ri/link";
+import IconUserLine from "~icons/ri/user-line";
 
 export {
   IconDashboard,
@@ -96,4 +97,5 @@ export {
   IconCharacterRecognition,
   IconCalendar,
   IconLink,
+  IconUserLine,
 };
diff --git a/packages/shared/src/layouts/BasicLayout.vue b/packages/shared/src/layouts/BasicLayout.vue
index 74e4c88c..4d0c9d00 100644
--- a/packages/shared/src/layouts/BasicLayout.vue
+++ b/packages/shared/src/layouts/BasicLayout.vue
@@ -7,6 +7,7 @@ import {
   VModal,
   VRoutesMenu,
   VTag,
+  VAvatar,
 } from "@halo-dev/components";
 import type { MenuGroupType, MenuItemType } from "../types/menus";
 import type { User } from "@halo-dev/api-client";
@@ -59,7 +60,12 @@ const currentRole = computed(() => {
       <VRoutesMenu :menus="menus" />
       <div class="current-profile">
         <div v-if="currentUser?.spec.avatar" class="profile-avatar">
-          <img :src="currentUser?.spec.avatar" class="h-11 w-11 rounded-full" />
+          <VAvatar
+            :src="currentUser?.spec.avatar"
+            :alt="currentUser?.spec.displayName"
+            size="md"
+            circle
+          ></VAvatar>
         </div>
         <div class="profile-name">
           <div class="flex text-sm font-medium">
@@ -204,7 +210,8 @@ const currentRole = computed(() => {
 
     .profile-avatar {
       @apply self-center
-      flex;
+      flex 
+      items-center;
     }
 
     .profile-name {
diff --git a/src/components/dropdown-selector/UserDropdownSelector.vue b/src/components/dropdown-selector/UserDropdownSelector.vue
index fc21ee9e..619d67eb 100644
--- a/src/components/dropdown-selector/UserDropdownSelector.vue
+++ b/src/components/dropdown-selector/UserDropdownSelector.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { User } from "@halo-dev/api-client";
 import { useUserFetch } from "@/modules/system/users/composables/use-user";
-import { IconCheckboxCircle } from "@halo-dev/components";
+import { IconCheckboxCircle, VAvatar } from "@halo-dev/components";
 
 const props = withDefaults(
   defineProps<{
@@ -57,12 +57,12 @@ function onDropdownShow() {
               @click="handleSelect(user)"
             >
               <div class="flex items-center space-x-4 px-4 py-3">
-                <div class="flex-shrink-0">
-                  <img
+                <div class="flex flex-shrink-0 items-center">
+                  <VAvatar
                     :alt="user.spec.displayName"
                     :src="user.spec.avatar"
-                    class="h-10 w-10 rounded"
-                  />
+                    size="md"
+                  ></VAvatar>
                 </div>
                 <div class="min-w-0 flex-1">
                   <p class="truncate text-sm font-medium text-gray-900">
diff --git a/src/modules/contents/comments/CommentList.vue b/src/modules/contents/comments/CommentList.vue
index 25b9ed61..f9fe6a2c 100644
--- a/src/modules/contents/comments/CommentList.vue
+++ b/src/modules/contents/comments/CommentList.vue
@@ -8,6 +8,7 @@ import {
   VPageHeader,
   VPagination,
   VSpace,
+  VAvatar,
 } from "@halo-dev/components";
 import { ref } from "vue";
 
@@ -117,12 +118,13 @@ const checkAll = ref(false);
               </div>
               <div class="flex">
                 <div
-                  class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
+                  class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
                 >
-                  <img
-                    class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
+                  <VAvatar
+                    size="xs"
                     src="https://ryanc.cc/avatar"
-                  />
+                    circle
+                  ></VAvatar>
                   <time class="text-sm text-gray-500" datetime="2020-01-07">
                     2020-01-07
                   </time>
diff --git a/src/modules/contents/pages/SinglePageList.vue b/src/modules/contents/pages/SinglePageList.vue
index ab34dced..160b7bf3 100644
--- a/src/modules/contents/pages/SinglePageList.vue
+++ b/src/modules/contents/pages/SinglePageList.vue
@@ -15,6 +15,7 @@ import {
   VSpace,
   useDialog,
   VEmpty,
+  VAvatar,
 } from "@halo-dev/components";
 import SinglePageSettingModal from "./components/SinglePageSettingModal.vue";
 import UserDropdownSelector from "@/components/dropdown-selector/UserDropdownSelector.vue";
@@ -402,14 +403,15 @@ const handleSelectUser = (user?: User) => {
                     name: 'UserDetail',
                     params: { name: contributor.name },
                   }"
+                  class="flex items-center"
                 >
-                  <img
+                  <VAvatar
                     v-tooltip="contributor.displayName"
-                    :alt="contributor.name"
+                    size="xs"
                     :src="contributor.avatar"
-                    :title="contributor.displayName"
-                    class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
-                  />
+                    :alt="contributor.displayName"
+                    circle
+                  ></VAvatar>
                 </RouterLink>
                 <span class="text-sm text-gray-500">
                   {{ finalStatus(singlePage.page) }}
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index d0906b41..c5776ad4 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -17,6 +17,7 @@ import {
   VPageHeader,
   VPagination,
   VSpace,
+  VAvatar,
 } from "@halo-dev/components";
 import UserDropdownSelector from "@/components/dropdown-selector/UserDropdownSelector.vue";
 import PostSettingModal from "./components/PostSettingModal.vue";
@@ -833,14 +834,15 @@ function handleContributorFilterItemChange(user?: User) {
                       name: 'UserDetail',
                       params: { name: contributor.name },
                     }"
+                    class="flex items-center"
                   >
-                    <img
+                    <VAvatar
                       v-tooltip="contributor.displayName"
-                      :alt="contributor.name"
+                      size="xs"
                       :src="contributor.avatar"
-                      :title="contributor.displayName"
-                      class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
-                    />
+                      :alt="contributor.displayName"
+                      circle
+                    ></VAvatar>
                   </RouterLink>
                   <span class="text-sm text-gray-500">
                     {{ finalStatus(post.post) }}
diff --git a/src/modules/dashboard/widgets/RecentLoginWidget.vue b/src/modules/dashboard/widgets/RecentLoginWidget.vue
index d21e3091..009d81a9 100644
--- a/src/modules/dashboard/widgets/RecentLoginWidget.vue
+++ b/src/modules/dashboard/widgets/RecentLoginWidget.vue
@@ -1,5 +1,5 @@
 <script lang="ts" name="RecentLoginWidget" setup>
-import { VCard } from "@halo-dev/components";
+import { VCard, VAvatar } from "@halo-dev/components";
 import { useUserFetch } from "@/modules/system/users/composables/use-user";
 
 const { users } = useUserFetch({ fetchOnMounted: true });
@@ -18,11 +18,11 @@ const { users } = useUserFetch({ fetchOnMounted: true });
           class="cursor-pointer py-4 hover:bg-gray-50"
         >
           <div class="flex items-center space-x-4">
-            <div class="flex-shrink-0">
-              <img
+            <div class="flex flex-shrink-0 items-center">
+              <VAvatar
                 :alt="user.spec.displayName"
                 :src="user.spec.avatar"
-                class="h-10 w-10 rounded"
+                size="md"
               />
             </div>
             <div class="min-w-0 flex-1">
diff --git a/src/modules/system/roles/RoleDetail.vue b/src/modules/system/roles/RoleDetail.vue
index 47bd78c2..5b0397ea 100644
--- a/src/modules/system/roles/RoleDetail.vue
+++ b/src/modules/system/roles/RoleDetail.vue
@@ -7,6 +7,7 @@ import {
   VPageHeader,
   VTabbar,
   VTag,
+  VAvatar,
 } from "@halo-dev/components";
 import { useRoute } from "vue-router";
 import { onMounted, ref, watch } from "vue";
@@ -175,18 +176,12 @@ onMounted(() => {
                       <li class="block cursor-pointer hover:bg-gray-50">
                         <div class="flex items-center px-4 py-4">
                           <div class="flex min-w-0 flex-1 items-center">
-                            <div class="flex-shrink-0">
-                              <div class="h-12 w-12">
-                                <div
-                                  class="overflow-hidden rounded border bg-white hover:shadow-sm"
-                                >
-                                  <img
-                                    :alt="user.spec.displayName"
-                                    :src="user.spec.avatar"
-                                    class="h-full w-full"
-                                  />
-                                </div>
-                              </div>
+                            <div class="flex flex-shrink-0 items-center">
+                              <VAvatar
+                                :alt="user.spec.displayName"
+                                :src="user.spec.avatar"
+                                size="md"
+                              />
                             </div>
                             <div
                               class="min-w-0 flex-1 px-4 md:grid md:grid-cols-2 md:gap-4"
diff --git a/src/modules/system/roles/RoleList.vue b/src/modules/system/roles/RoleList.vue
index 494c8bd9..70a51718 100644
--- a/src/modules/system/roles/RoleList.vue
+++ b/src/modules/system/roles/RoleList.vue
@@ -240,7 +240,7 @@ const handleDelete = async (role: Role) => {
               </div>
               <div class="flex">
                 <div
-                  class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
+                  class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
                 >
                   <FloatingTooltip
                     v-if="role.metadata.deletionTimestamp"
diff --git a/src/modules/system/users/PersonalAccessTokens.vue b/src/modules/system/users/PersonalAccessTokens.vue
index 354657c0..d0ded9c4 100644
--- a/src/modules/system/users/PersonalAccessTokens.vue
+++ b/src/modules/system/users/PersonalAccessTokens.vue
@@ -267,7 +267,7 @@ onMounted(() => {
           </div>
           <div class="flex">
             <div
-              class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
+              class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
             >
               <div class="flex flex-col gap-1">
                 <time class="text-xs text-gray-500" datetime="2020-01-07">
diff --git a/src/modules/system/users/UserList.vue b/src/modules/system/users/UserList.vue
index 1fe3029a..e9d8a929 100644
--- a/src/modules/system/users/UserList.vue
+++ b/src/modules/system/users/UserList.vue
@@ -11,6 +11,7 @@ import {
   VPagination,
   VSpace,
   VTag,
+  VAvatar,
 } from "@halo-dev/components";
 import UserEditingModal from "./components/UserEditingModal.vue";
 import UserPasswordChangeModal from "./components/UserPasswordChangeModal.vue";
@@ -293,14 +294,12 @@ onMounted(() => {
                   type="checkbox"
                 />
               </div>
-              <div v-if="user.spec.avatar" class="mr-4">
-                <div class="h-12 w-12">
-                  <img
-                    :alt="user.spec.displayName"
-                    :src="user.spec.avatar"
-                    class="h-full w-full overflow-hidden rounded border bg-white hover:shadow-sm"
-                  />
-                </div>
+              <div v-if="user.spec.avatar" class="mr-4 flex items-center">
+                <VAvatar
+                  :alt="user.spec.displayName"
+                  :src="user.spec.avatar"
+                  size="md"
+                ></VAvatar>
               </div>
               <div class="flex-1">
                 <div class="flex flex-row items-center">