release: freeze demo v1.1.0 2026-10-19

h5-demo/src/components/UiUserCard.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="ui-user-card" @click="$emit('tap', user)">
+    <UiAvatar :src="user.avatarUrl" :name="user.displayName" :size="56" />
+    <div class="ui-user-card__main">
+      <div class="ui-user-card__title">
+        <span class="ui-user-card__name">{{ user.displayName || '未设置昵称' }}</span>
+        <UiTag v-if="user.verified" type="success">已实名</UiTag>
+      </div>
+      <div class="ui-user-card__meta">
+        <span v-if="user.age">{{ user.age }}岁</span>
+        <span v-if="user.heightCm">{{ user.heightCm }}cm</span>
+        <span v-if="user.regionName">{{ user.regionName }}</span>
+      </div>
+      <div v-if="user.recommendationReasons?.length" class="ui-user-card__reasons">
+        {{ user.recommendationReasons.slice(0, 3).join(' · ') }}
+      </div>
+    </div>
+    <div v-if="showActions" class="ui-user-card__actions">
+      <van-button size="mini" type="primary" :loading="loading" @click.stop="$emit('like', user)">喜欢</van-button>
+      <van-button size="mini" plain @click.stop="$emit('pass', user)">略过</van-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiAvatar from './UiAvatar.vue'
+import UiTag from './UiTag.vue'
+
+const props = withDefaults(
+  defineProps<{ user: any; showActions?: boolean; loading?: boolean }>(),
+  { showActions: false, loading: false },
+)
+defineEmits<{ tap: [any]; like: [any]; pass: [any] }>()
+</script>
+
+<style scoped>
+.ui-user-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--mini-surface);
+  border-radius: var(--mini-radius);
+  padding: 12px;
+  margin-bottom: 10px;
+  box-shadow: var(--mini-shadow);
+}
+.ui-user-card__main {
+  flex: 1;
+  min-width: 0;
+}
+.ui-user-card__title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ui-user-card__name {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--mini-text-strong);
+}
+.ui-user-card__meta {
+  display: flex;
+  gap: 10px;
+  font-size: 12px;
+  color: var(--mini-text-secondary);
+  margin-top: 4px;
+}
+.ui-user-card__reasons {
+  font-size: 12px;
+  color: var(--mini-tabbar-active);
+  margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-user-card__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+</style>