feat: init wechat

frontend/wechat/src/views/ArticleDetail.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+const article = ref(null)
+
+onMounted(async () => {
+    // TODO: Implement API call to fetch article details
+    const { id } = route.params
+    article.value = { id, title: '文章标题', content: '文章内容' }
+})
+</script>
+
+<template>
+    <div class="article-detail p-3">
+        <Button icon="pi pi-arrow-left" @click="router.back()" class="p-button-text mb-3" />
+
+        <div v-if="article">
+            <h1>{{ article.title }}</h1>
+            <div class="content mt-3">
+                {{ article.content }}
+            </div>
+        </div>
+    </div>
+</template>

frontend/wechat/src/views/ArticleList.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { useArticleStore } from '@/stores/article'
+import { useScroll } from '@vueuse/core'; // Changed to useScroll as a simpler alternative
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const store = useArticleStore()
+const searchInput = ref('')
+const loadingTrigger = ref(null)
+
+const el = ref(null)
+const { y, isScrolling } = useScroll(el)
+
+watch(y, (newY) => {
+    if (!store.loading && !isScrolling && newY > 0) {
+        const scrollHeight = el.value.scrollHeight
+        const scrollTop = newY
+        const clientHeight = el.value.clientHeight
+
+        if (scrollHeight - scrollTop - clientHeight < 50) {
+            store.fetchArticles()
+        }
+    }
+})
+
+const showArticle = (id) => {
+    router.push(`/article/${id}`)
+}
+
+const handleSearch = () => {
+    store.setSearchQuery(searchInput.value)
+}
+
+onMounted(() => {
+    if (store.articles.length === 0) {
+        store.fetchArticles()
+    }
+})
+</script>
+
+<template>
+    <div class="article-list" ref="el">
+        <div class="search-bar p-2">
+            <InputText v-model="searchInput" placeholder="搜索文章" class="w-full" />
+            <Button @click="handleSearch">搜索</Button>
+        </div>
+
+        <div class="articles p-2">
+            <Card v-for="article in store.articles" :key="article.id" class="mb-2 article-card"
+                @click="showArticle(article.id)">
+                <template #title>{{ article.title }}</template>
+                <template #content>{{ article.summary }}</template>
+            </Card>
+
+            <div ref="loadingTrigger" v-show="store.hasMore">
+                <ProgressSpinner v-if="store.loading" />
+            </div>
+        </div>
+    </div>
+</template>

frontend/wechat/src/views/PurchasedArticles.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const purchasedArticles = ref([])
+
+const showArticle = (id) => {
+    router.push(`/article/${id}`)
+}
+
+onMounted(async () => {
+    // TODO: Implement API call to fetch purchased articles
+    purchasedArticles.value = []
+})
+</script>
+
+<template>
+    <div class="purchased-articles">
+        <h2>已购买的文章</h2>
+        <div class="articles-list">
+            <div v-if="purchasedArticles.length === 0" class="empty-state">
+                暂无已购买的文章
+            </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>
+    </div>
+</template>
+
+<style scoped>
+.purchased-articles {
+    padding: 1rem;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 2rem;
+    color: #666;
+}
+
+.article-card {
+    margin-bottom: 1rem;
+}
+</style>

frontend/wechat/src/views/UserProfile.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { ref } from 'vue';
+
+const userInfo = ref({
+    name: '用户名',
+    avatar: '',
+    // Add more user info as needed
+})
+</script>
+
+<template>
+    <div class="user-profile p-3">
+        <Card>
+            <template #header>
+                <div class="flex align-items-center gap-3">
+                    <Avatar :image="userInfo.avatar" size="large" />
+                    <h3>{{ userInfo.name }}</h3>
+                </div>
+            </template>
+            <template #content>
+                <div class="grid">
+                    <Button label="我的收藏" class="p-button-text" />
+                    <Button label="我的点赞" class="p-button-text" />
+                    <Button label="订单列表" class="p-button-text" />
+                </div>
+            </template>
+        </Card>
+    </div>
+</template>