feat: update ui

frontend/wechat/src/views/ArticleDetail.vue

@@ -14,14 +14,31 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div class="article-detail p-3">
-        <Button icon="pi pi-arrow-left" @click="router.back()" class="p-button-text mb-3" />
+    <div class="min-h-screen bg-gray-50">
+        <header class="fixed top-0 left-0 right-0 h-14 bg-white border-b border-gray-200 flex items-center px-4 z-50">
+            <button @click="router.back()"
+                class="flex items-center justify-center w-10 h-10 mr-2 rounded-full hover:bg-gray-100 active:bg-gray-200 transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                </svg>
+            </button>
+            <h2 class="text-lg font-medium">{{ article?.title || '文章详情' }}</h2>
+        </header>
 
-        <div v-if="article">
-            <h1>{{ article.title }}</h1>
-            <div class="content mt-3">
-                {{ article.content }}
+        <main class="pt-14 px-4">
+            <div v-if="article" class="py-4">
+                <div class="prose max-w-none">
+                    {{ article.content }}
+                </div>
             </div>
-        </div>
+            <div v-else class="flex justify-center items-center py-8">
+                <div class="animate-spin rounded-full h-8 w-8 border-4 border-gray-200 border-t-blue-600"></div>
+            </div>
+        </main>
     </div>
 </template>
+
+<style scoped>
+/* 可以移除所有样式，因为都使用了 Tailwind 类 */
+</style>