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>

frontend/wechat/src/components/HelloWorld.vue

@@ -1,39 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-
-defineProps({
-    msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-    <h1>{{ msg }}</h1>
-
-    <div class="card">
-        <button type="button" @click="count++">count is {{ count }}</button>
-        <p>
-            Edit
-            <code>components/HelloWorld.vue</code> to test HMR
-        </p>
-    </div>
-
-    <p>
-        Check out
-        <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
-        starter
-    </p>
-    <p>
-        Learn more about IDE Support for Vue in the
-        <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank">Vue Docs Scaling up
-            Guide</a>.
-    </p>
-    <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-    color: #888;
-}
-</style>