初始化

easyflow-ui-usercenter/app/src/components/card/Card.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@easyflow/utils';
+
+interface CardProps {
+  class?: string;
+}
+
+defineOptions({ name: 'Card' });
+const props = defineProps<CardProps>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex w-full max-w-60 cursor-pointer items-start gap-2.5 rounded-lg pb-2.5 pl-2.5 pr-5 pt-3.5',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </div>
+</template>

easyflow-ui-usercenter/app/src/components/card/CardAvatar.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '@easyflow/utils';
+
+import { Avatar } from '@element-plus/icons-vue';
+import { ElAvatar } from 'element-plus';
+
+interface CardAvatarProps {
+  class?: string;
+  size?: number;
+  src?: string;
+  defaultAvatar?: string;
+}
+
+defineOptions({ name: 'CardAvatar' });
+const props = defineProps<CardAvatarProps>();
+</script>
+
+<template>
+  <template v-if="props.defaultAvatar">
+    <ElAvatar
+      :class="cn('shrink-0', props.class)"
+      :size="props.size ?? 36"
+      :src="props.src ?? props.defaultAvatar"
+    />
+  </template>
+  <template v-else>
+    <ElAvatar
+      :class="cn('shrink-0', props.class)"
+      :size="props.size ?? 36"
+      :icon="Avatar"
+    />
+  </template>
+</template>

easyflow-ui-usercenter/app/src/components/card/CardContent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@easyflow/utils';
+
+interface CardContentProps {
+  class?: string;
+}
+
+defineOptions({ name: 'CardContent' });
+const props = defineProps<CardContentProps>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex w-full flex-col gap-1 overflow-hidden text-nowrap', props.class)
+    "
+  >
+    <slot></slot>
+  </div>
+</template>

easyflow-ui-usercenter/app/src/components/card/CardDescription.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@easyflow/utils';
+
+interface CardDescriptionProps {
+  class?: string;
+}
+
+defineOptions({ name: 'CardDescription' });
+const props = defineProps<CardDescriptionProps>();
+</script>
+
+<template>
+  <span
+    :class="
+      cn(
+        'text-foreground/50 overflow-hidden text-ellipsis text-xs',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </span>
+</template>

easyflow-ui-usercenter/app/src/components/card/CardTitle.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@easyflow/utils';
+
+interface CardTitleProps {
+  class?: string;
+}
+
+defineOptions({ name: 'CardTitle' });
+const props = defineProps<CardTitleProps>();
+</script>
+
+<template>
+  <span
+    :class="
+      cn('overflow-hidden text-ellipsis text-base font-semibold', props.class)
+    "
+  >
+    <slot></slot>
+  </span>
+</template>

easyflow-ui-usercenter/app/src/components/card/index.ts

@@ -0,0 +1,5 @@
+export { default as Card } from './Card.vue';
+export { default as CardAvatar } from './CardAvatar.vue';
+export { default as CardContent } from './CardContent.vue';
+export { default as CardDescription } from './CardDescription.vue';
+export { default as CardTitle } from './CardTitle.vue';