feat: add pages

frontend/wechat/src/views/ArticleList.vue

@@ -49,7 +49,7 @@ onMounted(() => {
 
 <template>
     <div class="h-full flex flex-col">
-        <div class="flex-none bg-white border-b border-gray-200 z-50">
+        <div class="flex-none bg-white border-b border-gray-200 z-50 shadow">
             <div class="p-4">
                 <input type="search" v-model="searchInput" @keyup="handleKeyup" placeholder="搜索文章"
                     class="w-full px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">

frontend/wechat/src/views/PurchasedArticles.vue

@@ -1,4 +1,5 @@
 <script setup>
+import ArticleListItem from '@/components/ArticleListItem.vue'
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -16,16 +17,21 @@ onMounted(async () => {
 </script>
 
 <template>
-    <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 class="h-full flex flex-col">
+        <div class="flex-none bg-white border-b border-gray-200 z-50 shadow">
+            <div class="p-4">
+                <h2 class="text-lg font-medium text-gray-800">已购买的文章</h2>
             </div>
-            <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 class="flex-1 overflow-y-auto">
+            <div class="p-4">
+                <div v-if="purchasedArticles.length === 0" class="text-center text-gray-500 py-8">
+                    暂无已购买的文章
+                </div>
+
+                <ArticleListItem v-for="article in purchasedArticles" :key="article.id" :article="article"
+                    @click="showArticle(article.id)" class="mb-4" />
             </div>
         </div>
     </div>