feat: update ui

frontend/wechat/src/views/PurchasedArticles.vue

@@ -16,33 +16,21 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div class="purchased-articles">
-        <h2>已购买的文章</h2>
-        <div class="articles-list">
-            <div v-if="purchasedArticles.length === 0" class="empty-state">
+    <div class="p-4">
+        <h2 class="text-xl font-medium mb-4">已购买的文章</h2>
+        <div class="space-y-4">
+            <div v-if="purchasedArticles.length === 0" class="py-12 text-center text-gray-500">
                 暂无已购买的文章
             </div>
-            <Card v-else v-for="article in purchasedArticles" :key="article.id" class="article-card"
-                @click="showArticle(article.id)">
-                <template #title>{{ article.title }}</template>
-                <template #content>{{ article.summary }}</template>
-            </Card>
+            <div v-else v-for="article in purchasedArticles" :key="article.id" @click="showArticle(article.id)"
+                class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow cursor-pointer">
+                <h3 class="text-lg font-medium mb-2">{{ article.title }}</h3>
+                <p class="text-gray-600">{{ article.summary }}</p>
+            </div>
         </div>
     </div>
 </template>
 
 <style scoped>
-.purchased-articles {
-    padding: 1rem;
-}
-
-.empty-state {
-    text-align: center;
-    padding: 2rem;
-    color: #666;
-}
-
-.article-card {
-    margin-bottom: 1rem;
-}
+/* Remove all styles as they're replaced by Tailwind classes */
 </style>