<template>
  <aside class="user-panel">
    <div class="user-avatar">
      <div class="avatar-wrapper">
        <img src="/avatar.svg" alt="User Avatar" @error="handleAvatarError" />
        <div class="mic-icon">
          <el-icon><Microphone /></el-icon>
        </div>
      </div>
      <span class="user-name">{{ userName }}</span>
    </div>
  </aside>
</template>

<script setup>
import { ref } from 'vue'
import { Microphone } from '@element-plus/icons-vue'

const userName = ref('李志鹏')

const handleAvatarError = (e) => {
  e.target.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIgZmlsbD0iI2ZmZTRjNCIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNDAiIHI9IjIwIiBmaWxsPSIjZmZkMWExIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iODAiIHJ4PSIyNSIgcnk9IjE1IiBmaWxsPSIjZmY2YjZiIi8+PC9zdmc+'
}
</script>

<style lang="scss" scoped>
.user-panel {
  width: 100px;
  background: #f9fafb;
  border-left: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 10px;
}

.user-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  
  .avatar-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #e5e7eb;
    }
    
    .mic-icon {
      position: absolute;
      bottom: -4px;
      right: -4px;
      width: 24px;
      height: 24px;
      background: #10b981;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 12px;
      border: 2px solid #fff;
    }
  }
  
  .user-name {
    font-size: 12px;
    color: #374151;
    font-weight: 500;
  }
}
</style>
