feat: 游戏列表组件+基础样式

src/components/baseLayouts/UserBar.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="user-bar">
+    <div class="container">
+      <el-popover trigger="click" :width="260">
+        <template #reference>
+          <div class="user-info">
+            <el-badge is-dot :offset="[-7, 29]" class="user-badge">
+              <el-avatar shape="circle" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
+            </el-badge>
+            <div class="user-name">
+              <div class="user-title">MarchGlow</div>
+              <div class="user-state">在线</div>
+            </div>
+          </div>
+        </template>
+        <span>I wish they all could be California girls</span>
+      </el-popover>
+
+      <div class="feature">
+        <el-icon color="#fff" :size="26"><Setting /></el-icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Setting } from '@element-plus/icons-vue'
+</script>
+
+<style scoped lang="scss">
+.user-bar {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+  align-items: center;
+}
+
+.user-badge :deep(.el-badge__content) {
+  width: 12px;
+  height: 12px;
+}
+
+.user-badge :deep(.el-badge__content.is-dot) {
+  background-color: #008000;
+}
+
+.container {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  gap: 8px;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.user-name {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 34px;
+  width: 120px;
+}
+
+.user-title {
+  line-height: 18px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16px;
+  font-weight: 500;
+  text-align: left;
+}
+
+.user-state {
+  line-height: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  text-align: left;
+}
+
+.feature {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>