原型

江西城市生命线-可交互原型/frontend/src/components/UserPanel.vue

@@ -0,0 +1,79 @@
+<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>