first commit

backend/src/views/user/components/DetailCard.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="detail-card">
+    <div class="card-header">
+      <h3 class="card-title">详细资料</h3>
+      <el-button type="primary" :icon="Edit" size="small" @click="$emit('edit')">
+        编辑
+      </el-button>
+    </div>
+    <el-descriptions :column="2" border>
+      <el-descriptions-item label="姓名">
+        {{ userInfo?.name || "-" }}
+      </el-descriptions-item>
+      <el-descriptions-item label="性别">
+        {{ getSexText(userInfo?.sex) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="生日">
+        {{ userInfo?.birth || "-" }}
+      </el-descriptions-item>
+      <el-descriptions-item label="状态">
+        <el-tag :type="userInfo?.status === 1 ? 'success' : 'danger'" size="small">
+          {{ userInfo?.status === 1 ? "正常" : "禁用" }}
+        </el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="注册时间" :span="2">
+        {{ formatDate(userInfo?.create_time) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="最后登录IP" :span="2">
+        {{ userInfo?.last_login_ip || "-" }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+
+<script setup>
+import { Edit } from "@element-plus/icons-vue";
+
+defineProps({
+  userInfo: {
+    type: Object,
+    default: null
+  },
+  formatDate: {
+    type: Function,
+    required: true
+  },
+  getSexText: {
+    type: Function,
+    required: true
+  }
+});
+
+defineEmits(["edit"]);
+</script>
+
+<style scoped lang="less">
+.detail-card {
+  background: var(--el-bg-color);
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 16px;
+  border: 1px solid var(--el-border-color-lighter);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+
+  .card-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+}
+
+@media (max-width: 768px) {
+  .detail-card {
+    padding: 16px;
+  }
+}
+</style>