feat: update ui

frontend/wechat/src/components/ArticleListItem.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { computed, defineProps } from 'vue'
+import { AiOutlineEye, AiOutlineLike } from 'vue-icons-plus/ai'
+
+const props = defineProps({
+    article: {
+        type: Object,
+        required: true
+    }
+})
+
+const formattedDate = computed(() => {
+    return new Date(props.article.created_at).toLocaleDateString()
+})
+
+const discountPrice = computed(() => {
+    return (props.article.price * props.article.discount / 100).toFixed(2)
+})
+
+const mediaTypes = computed(() => {
+    return [...new Set(props.article.assets.map(asset => asset.type))]
+})
+</script>
+
+<template>
+    <div class="flex gap-4 p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
+        <!-- 缩略图占位 -->
+        <div class="w-24 h-24 flex-shrink-0 bg-gray-100 rounded-lg"></div>
+
+        <div class="flex-1 flex flex-col">
+            <h3 class="text-lg font-medium mb-1">{{ article.title }}</h3>
+            <p class="text-gray-600 text-sm line-clamp-2 mb-2">{{ article.description }}</p>
+
+            <div class="flex flex-wrap gap-2 mb-2">
+                <span v-for="tag in article.tags" :key="tag"
+                    class="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded-full">
+                    {{ tag }}
+                </span>
+                <span v-for="type in mediaTypes" :key="type"
+                    class="px-2 py-0.5 text-xs bg-blue-100 text-blue-600 rounded-full">
+                    {{ type }}
+                </span>
+            </div>
+
+            <div class="flex items-center justify-between mt-auto text-sm">
+                <div class="flex items-center gap-3 text-gray-500">
+                    <span>{{ formattedDate }}</span>
+                    <span class="flex items-center gap-1">
+                        <AiOutlineEye class="w-4 h-4" />
+                        {{ article.views }}
+                    </span>
+                    <span class="flex items-center gap-1">
+                        <AiOutlineLike class="w-4 h-4" />
+                        {{ article.likes }}
+                    </span>
+                </div>
+
+                <div class="flex items-center gap-2">
+                    <span class="text-lg font-bold text-red-500">¥{{ discountPrice }}</span>
+                    <span class="text-sm line-through text-gray-400">¥{{ article.price }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>