author-avatar.blade.php 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. {{-- resources/views/components/ui/author-avatar.blade.php
  2. 作者头像组件。支持图片头像和文字缩写头像两种形式。
  3. Props:
  4. $avatar — 头像图片 URL(为空时显示文字头像)
  5. $color — 文字头像背景色
  6. $initials — 文字头像缩写
  7. $name — 作者名字(显示在头像右侧)
  8. $size — sm | md | lg
  9. $sub — 副文字(如文章数量),可选
  10. --}}
  11. @props([
  12. 'avatar' => null,
  13. 'color' => '#888888',
  14. 'initials' => '?',
  15. 'name' => '',
  16. 'size' => 'md',
  17. 'sub' => null,
  18. ])
  19. <div class="author-avatar author-avatar--{{ $size }}">
  20. @if($avatar)
  21. <img src="{{ $avatar }}"
  22. alt="{{ $name }}"
  23. class="author-avatar__img">
  24. @else
  25. <div class="author-avatar__initials"
  26. style="background: {{ $color }}">
  27. {{ $initials }}
  28. </div>
  29. @endif
  30. @if($name)
  31. <div class="author-avatar__info">
  32. <span class="author-avatar__name">{{ $name }}</span>
  33. @if($sub)
  34. <span class="author-avatar__sub">{{ $sub }}</span>
  35. @endif
  36. </div>
  37. @endif
  38. </div>