feat(article-center): add article list page with tab navigation

cfc-frontend/pages/article-center/index.vue

@@ -0,0 +1,290 @@
+<template>
+  <view class="ac-container">
+    <!-- Tab 导航 -->
+    <view class="ac-tabs">
+      <scroll-view scroll-x enable-flex show-scrollbar="false" class="tab-scroll">
+        <view
+          v-for="tab in tabList"
+          :key="tab.code"
+          :class="['tab-item', currentTab === tab.code ? 'active' : '']"
+          :style="currentTab === tab.code ? { color: tab.color, borderBottomColor: tab.color } : {}"
+          @click="onTabChange(tab.code)"
+        >
+          {{ tab.name }}
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 文章列表 -->
+    <scroll-view scroll-y class="ac-list" @scrolltolower="onLoadMore">
+      <!-- 骨架屏 -->
+      <view v-if="loading && articles.length === 0" class="ac-skeleton">
+        <view v-for="n in 3" :key="n" class="skeleton-card">
+          <view class="skeleton-cover"></view>
+          <view class="skeleton-body">
+            <view class="skeleton-line skeleton-title"></view>
+            <view class="skeleton-line skeleton-summary"></view>
+            <view class="skeleton-line skeleton-summary short"></view>
+            <view class="skeleton-line skeleton-meta"></view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 空状态 -->
+      <view v-else-if="articles.length === 0" class="ac-empty">
+        <image class="empty-img" src="/static/empty-article.png" mode="aspectFit"></image>
+        <text class="empty-text">暂无文章</text>
+      </view>
+
+      <!-- 文章列表 -->
+      <view v-else class="article-list">
+        <view
+          v-for="item in articles"
+          :key="item.id"
+          class="article-card"
+          @click="goDetail(item.id)"
+        >
+          <image
+            class="card-cover"
+            :src="item.coverImage || '/static/default-article.png'"
+            mode="aspectFill"
+          />
+          <view class="card-body">
+            <view class="card-tags">
+              <text class="card-category">{{ item.categoryName || '' }}</text>
+              <text class="card-readtime">{{ item.readTime || 3 }}分钟</text>
+            </view>
+            <text class="card-title">{{ item.title }}</text>
+            <text class="card-summary">{{ item.summary || '' }}</text>
+            <view class="card-footer">
+              <text class="card-author">{{ item.author || '浠艾福' }}</text>
+              <text class="card-date">{{ formatDate(item.publishedAt) }}</text>
+              <text class="card-fav">收藏 {{ item.favCount || 0 }}</text>
+            </view>
+            <!-- 五维彩条 -->
+            <view v-if="item.relatedDimensions" class="card-dimensions">
+              <view
+                v-for="dim in parseDimensions(item.relatedDimensions)"
+                :key="dim.code"
+                class="dim-dot"
+                :style="{ background: dim.color }"
+              ></view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 加载更多 -->
+      <view v-if="loadingMore" class="loading-more">
+        <text class="loading-text">加载中...</text>
+      </view>
+      <view v-if="noMore && articles.length > 0" class="no-more">
+        <text class="no-more-text">— 没有更多了 —</text>
+      </view>
+      <!-- 底部占位 -->
+      <view class="bottom-spacer"></view>
+    </scroll-view>
+
+    <!-- 浮动发布按钮 -->
+    <view class="ac-fab" @click="goEdit">
+      <text class="fab-icon">+</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getArticleList } from '@/utils/api.js'
+export default {
+  data() {
+    return {
+      tabList: [
+        { code: '', name: '全部推荐', color: '#F97316' },
+        { code: 'body', name: '身', color: '#FF8C42' },
+        { code: 'mind', name: '智', color: '#6366F1' },
+        { code: 'wisdom', name: '心', color: '#FF6B9D' },
+        { code: 'action', name: '行', color: '#10B981' },
+        { code: 'wealth', name: '富', color: '#F59E0B' }
+      ],
+      currentTab: '',
+      articles: [],
+      page: 1,
+      size: 10,
+      total: 0,
+      loading: false,
+      loadingMore: false,
+      noMore: false
+    }
+  },
+  onLoad() {
+    this.loadArticles()
+  },
+  methods: {
+    async loadArticles(isLoadMore) {
+      if (!isLoadMore) {
+        if (this.loading) return
+        this.loading = true
+      } else {
+        if (this.loadingMore || this.noMore) return
+        this.loadingMore = true
+      }
+      try {
+        var params = { page: this.page, size: this.size }
+        if (this.currentTab) {
+          params.dimensionCode = this.currentTab
+        }
+        var res = await getArticleList(params)
+        if (res.code === 200 && res.data) {
+          var list = res.data.records || []
+          if (this.page === 1) {
+            this.articles = list
+          } else {
+            this.articles = this.articles.concat(list)
+          }
+          this.total = res.data.total || 0
+          this.noMore = this.articles.length >= this.total
+        }
+      } catch (e) {
+        uni.showToast({ title: '加载失败', icon: 'none' })
+      } finally {
+        this.loading = false
+        this.loadingMore = false
+      }
+    },
+    onTabChange(code) {
+      if (this.currentTab === code) return
+      this.currentTab = code
+      this.page = 1
+      this.articles = []
+      this.noMore = false
+      this.loadArticles()
+    },
+    onLoadMore() {
+      if (this.noMore || this.loading || this.loadingMore) return
+      this.page++
+      this.loadArticles(true)
+    },
+    goDetail(id) {
+      uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
+    },
+    goEdit() {
+      uni.navigateTo({ url: '/pages/article-center/article-edit' })
+    },
+    formatDate(dateStr) {
+      if (!dateStr) return ''
+      return dateStr.slice(0, 10)
+    },
+    parseDimensions(str) {
+      if (!str) return []
+      var dimMap = {
+        body: { code: 'body', color: '#FF8C42', name: '身' },
+        mind: { code: 'mind', color: '#6366F1', name: '智' },
+        wisdom: { code: 'wisdom', color: '#FF6B9D', name: '心' },
+        action: { code: 'action', color: '#10B981', name: '行' },
+        wealth: { code: 'wealth', color: '#F59E0B', name: '富' }
+      }
+      var codes = str.split(',').map(function(s) { return s.trim().toLowerCase() })
+      return codes.filter(function(c) { return dimMap[c] }).map(function(c) { return dimMap[c] })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ac-container {
+  min-height: 100vh;
+  background: #f5f7fa;
+  position: relative;
+}
+.ac-tabs {
+  background: #fff;
+  padding: 16rpx 0 12rpx;
+  border-bottom: 1rpx solid #eee;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+.tab-scroll {
+  white-space: nowrap;
+  padding: 0 20rpx;
+}
+.tab-item {
+  display: inline-block;
+  padding: 8rpx 24rpx;
+  font-size: 26rpx;
+  color: #666;
+  margin-right: 12rpx;
+  border-bottom: 3rpx solid transparent;
+  flex-shrink: 0;
+}
+.tab-item.active {
+  font-weight: bold;
+}
+.ac-list {
+  height: calc(100vh - 100rpx);
+}
+/* 骨架屏 */
+.ac-skeleton { padding: 20rpx 24rpx; }
+.skeleton-card {
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  margin-bottom: 20rpx;
+}
+.skeleton-cover { height: 280rpx; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
+.skeleton-body { padding: 20rpx; }
+.skeleton-line { height: 24rpx; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; border-radius: 4rpx; margin-bottom: 12rpx; }
+.skeleton-title { width: 60%; }
+.skeleton-summary { width: 90%; }
+.skeleton-summary.short { width: 50%; }
+.skeleton-meta { width: 40%; height: 18rpx; }
+@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
+/* 空状态 */
+.ac-empty { display: flex; flex-direction: column; align-items: center; padding-top: 200rpx; }
+.empty-img { width: 200rpx; height: 200rpx; margin-bottom: 24rpx; }
+.empty-text { font-size: 28rpx; color: #999; }
+/* 文章卡片 */
+.article-list { padding: 20rpx 24rpx; }
+.article-card {
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
+}
+.card-cover { width: 100%; height: 280rpx; background: #f0f0f0; }
+.card-body { padding: 20rpx; }
+.card-tags { display: flex; align-items: center; margin-bottom: 10rpx; }
+.card-category { font-size: 20rpx; color: #5B9BD5; background: rgba(91,155,213,0.1); padding: 2rpx 12rpx; border-radius: 8rpx; margin-right: 12rpx; }
+.card-readtime { font-size: 20rpx; color: #999; }
+.card-title { display: block; font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.card-summary { display: block; font-size: 24rpx; color: #666; line-height: 1.5; margin-bottom: 12rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.card-footer { display: flex; align-items: center; font-size: 20rpx; color: #999; }
+.card-author { margin-right: 16rpx; color: #5B9BD5; }
+.card-date { margin-right: 16rpx; }
+.card-fav { margin-left: auto; }
+/* 五维彩条 */
+.card-dimensions { display: flex; margin-top: 10rpx; gap: 8rpx; }
+.dim-dot { width: 20rpx; height: 20rpx; border-radius: 50%; }
+/* 加载更多 */
+.loading-more, .no-more { text-align: center; padding: 30rpx; }
+.loading-text { font-size: 24rpx; color: #999; }
+.no-more-text { font-size: 24rpx; color: #ccc; }
+.bottom-spacer { height: 120rpx; }
+/* 浮动按钮 */
+.ac-fab {
+  position: fixed;
+  right: 40rpx;
+  bottom: 100rpx;
+  width: 100rpx;
+  height: 100rpx;
+  background: linear-gradient(135deg, #F97316, #EA580C);
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 16rpx rgba(249,115,22,0.4);
+  z-index: 100;
+}
+.fab-icon { font-size: 48rpx; font-weight: bold; line-height: 1; }
+</style>