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

<template>
  <view class="ac-container">
    <!-- 自定义导航栏 -->
    <view class="ac-nav">
      <view class="ac-nav-left" @click="onBack">
        <text class="ac-nav-back">&#x2190;</text>
      </view>
      <text class="ac-nav-title">知识分享</text>
      <view class="ac-nav-right">
        <text class="ac-nav-search-icon" @click="focusSearch">&#x1F50D;</text>
        <text class="ac-nav-add" @click="goEdit">+</text>
      </view>
    </view>

    <!-- 搜索栏（聚焦时展开） -->
    <view v-if="searchFocused || searchKeyword" class="ac-search-bar">
      <input
        class="ac-search-input"
        v-model="searchKeyword"
        placeholder="搜索文章..."
        confirm-type="search"
        @confirm="onSearch"
        @blur="onSearchBlur"
      />
      <text class="ac-search-cancel" @click="searchKeyword = ''; searchFocused = false; onSearch()">取消</text>
    </view>

    <!-- Tab 导航（药丸式） -->
    <view class="ac-tabs">
      <scroll-view scroll-x show-scrollbar="false" class="ac-tab-scroll">
        <view
          v-for="tab in tabList"
          :key="tab.code"
          :class="['ac-tab', currentTab === tab.code ? 'active' : '']"
          :style="currentTab === tab.code ? 'background:' + tab.color + ';color:#fff;border-color:' + tab.color : ''"
          @click="onTabChange(tab.code)"
        >
          {{ tab.name }}
        </view>
      </scroll-view>
    </view>

    <!-- 书册式推荐阅读 -->
    <ArticleBookshelf
      v-if="recommendedArticles.length > 0 || !recommendLoading"
      :articles="recommendedArticles"
      :loading="recommendLoading"
      :isLoggedIn="isLoggedIn"
      @articleClick="goDetail"
      @moreArticles="goExplore"
    />

    <!-- 文章列表区域 -->
    <scroll-view scroll-y class="ac-scroll" @scrolltolower="onLoadMore">
      <!-- 骨架屏 -->
      <view v-if="loading && articles.length === 0" class="ac-skeleton-wrap">
        <view v-for="n in 3" :key="n" class="sk-card">
          <view class="sk-cover"></view>
          <view class="sk-body">
            <view class="sk-row sk-tag"></view>
            <view class="sk-row sk-title"></view>
            <view class="sk-row sk-desc"></view>
            <view class="sk-row sk-footer"></view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else-if="articles.length === 0" class="ac-empty">
        <image class="ac-empty-img" src="/static/empty-article.png" mode="aspectFit"></image>
        <text class="ac-empty-text">暂无文章</text>
      </view>

      <!-- 文章列表 -->
      <view v-else class="ac-feed">
        <view
          v-for="item in articles"
          :key="item.id"
          class="ac-card"
          hover-class="ac-card-pressed"
          @click="goDetail(item.id)"
        >
          <view class="ac-card-media">
            <image
              class="ac-card-cover"
              :src="getImageUrl(item.coverImage) || '/static/default-article.png'"
              mode="aspectFill"
            />
            <view class="ac-card-dimension-tags" v-if="item.relatedDimensions">
              <view
                v-for="dim in parseDimensions(item.relatedDimensions)"
                :key="dim.code"
                class="ac-card-dim-tag"
                :style="'background:' + dim.color"
              >{{ dim.name }}</view>
            </view>
          </view>
          <view class="ac-card-body">
            <view class="ac-card-meta-top">
              <text class="ac-card-category" v-if="item.categoryName">{{ item.categoryName }}</text>
              <text class="ac-card-readtime">&#x1F4D6; {{ item.readTime || 3 }}分钟</text>
            </view>
            <text class="ac-card-title">{{ item.title }}</text>
            <text class="ac-card-summary" v-if="item.summary">{{ item.summary }}</text>
            <view class="ac-card-footer">
              <text class="ac-card-author">{{ item.author || '浠艾福' }}</text>
              <text class="ac-card-sep">|</text>
              <text class="ac-card-date">{{ formatDate(item.publishedAt) }}</text>
              <text class="ac-card-fav">&#x2B50; {{ item.favCount || 0 }}</text>
              <text class="ac-card-sep">|</text>
              <text class="ac-card-readcount">&#x1F441; {{ item.viewCount || 0 }}</text>
              <text class="ac-card-sep">|</text>
              <text class="ac-card-duration">&#x23F1; {{ formatDuration(item.totalDurationSeconds) }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 / 没有更多 -->
      <view v-if="loadingMore" class="ac-loading-more">
        <text class="ac-loading-text">加载中...</text>
      </view>
      <view v-if="noMore && articles.length > 0" class="ac-no-more">
        <text class="ac-no-more-text">— 没有更多了 —</text>
      </view>
      <view class="ac-bottom-gap"></view>
    </scroll-view>

    <!-- 浮动发布按钮 -->
    <view class="ac-fab" @click="goEdit">
      <text class="ac-fab-icon">+</text>
    </view>
  </view>
</template>

<script>
import { getArticleList, getFeaturedArticles } from '@/utils/api.js'
import config from '@/config.js'
export default {
  data() {
    return {
      tabList: [
        { code: '', name: '全部', color: '#F97316' },
        { code: 'body', name: '身', color: '#FF8C42' },
        { code: 'mind', name: '心', color: '#FF6B9D' },
        { code: 'wisdom', name: '智', color: '#6366F1' },
        { code: 'action', name: '行', color: '#10B981' },
        { code: 'wealth', name: '富', color: '#F59E0B' }
      ],
      currentTab: '',
      articles: [],
      page: 1,
      size: 10,
      total: 0,
      loading: false,
      loadingMore: false,
      noMore: false,
      searchKeyword: '',
      searchFocused: false,
      isLoggedIn: false,
      recommendedArticles: [],
      recommendLoading: false
    }
  },
  components: {
    ArticleBookshelf: () => require('@/components/ArticleBookshelf.vue')
  },
  onLoad(options) {
    // 支持从外部传入 dimension 参数，默认选中对应 tab
    if (options && options.dimension) {
      this.currentTab = options.dimension
    }
    this.isLoggedIn = !!uni.getStorageSync('token')
    this.loadArticles()
    this.loadRecommendedArticles()
  },
  onShow() {
    this.isLoggedIn = !!uni.getStorageSync('token')
  },
  methods: {
    async loadArticles(isLoadMore) {
      if (!isLoadMore) {
        if (this.loading) return
        this.loading = true
        this.page = 1
        this.articles = []
        this.noMore = false
      } 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
        }
        if (this.searchKeyword && this.searchKeyword.trim()) {
          params.keyword = this.searchKeyword.trim()
        }
        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.searchKeyword = ''
      this.searchFocused = false
      this.page = 1
      this.articles = []
      this.noMore = false
      this.loadArticles()
    },
    async loadRecommendedArticles() {
      var self = this
      self.recommendLoading = true
      try {
        var res = await getFeaturedArticles({ size: 8 })
        if (res && res.code === 200 && res.data) {
          // 兼容数组 / { list } / { records } 三种响应结构，保证永远赋值数组
          var raw = Array.isArray(res.data) ? res.data : (res.data.list || res.data.records || [])
          self.recommendedArticles = Array.isArray(raw) ? raw : []
        }
      } catch (e) {
        // silent fail
      } finally {
        self.recommendLoading = false
      }
    },
    onLoadMore() {
      if (this.noMore || this.loading || this.loadingMore) return
      this.page++
      this.loadArticles(true)
    },
    goDetail(idOrArticle) {
      var id = idOrArticle && idOrArticle.id ? idOrArticle.id : idOrArticle
      uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
    },
    goEdit() {
      var isLoggedIn = !!uni.getStorageSync('token')
      if (isLoggedIn) {
        uni.navigateTo({ url: '/pages/article-center/article-edit' })
      } else {
        uni.navigateTo({ url: '/pages/login/login?redirect=' + encodeURIComponent('/pages/article-center/index') })
      }
    },
    goExplore() {
      // 筛选全部文章
      this.currentTab = ''
      this.page = 1
      this.articles = []
      this.loadArticles()
    },
    formatDate(dateStr) {
      if (!dateStr) return ''
      return dateStr.slice(0, 10)
    },
    formatDuration(seconds) {
      if (!seconds || seconds <= 0) return '0分钟'
      var mins = Math.round(seconds / 60)
      if (mins < 60) return mins + '分钟'
      var hours = Math.floor(mins / 60)
      var restMins = mins % 60
      return restMins > 0 ? hours + '小时' + restMins + '分钟' : hours + '小时'
    },
    parseDimensions(str) {
      if (!str) return []
      var dimMap = {
        body: { code: 'body', color: '#FF8C42', name: '身' },
        mind: { code: 'mind', color: '#FF6B9D', name: '心' },
        wisdom: { code: 'wisdom', color: '#6366F1', 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] })
    },
    focusSearch() {
      this.searchFocused = true
    },
    onSearch() {
      this.page = 1
      this.articles = []
      this.noMore = false
      this.loadArticles()
    },
    onSearchBlur() {
      if (!this.searchKeyword) {
        this.searchFocused = false
      }
    },
    onBack() {
      uni.navigateBack()
    },
    getImageUrl: function(path) {
      return config.API_BASE_URL + path
    }
  }
}
</script>

<style scoped>
/* ====================================
   知识分享 — 重设计
   白色导航 + 药丸Tab + 精装卡片
   ==================================== */

.ac-container {
  min-height: 100vh;
  background: #f5f7fa;
  position: relative;
}

/* ---- 导航栏（白色简约） ---- */
.ac-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 84rpx 28rpx 20rpx;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}
.ac-nav-left {
  width: 60rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}
.ac-nav-back {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
}
.ac-nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1a1a1a;
  flex: 1;
  text-align: center;
}
.ac-nav-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
  flex-shrink: 0;
}
.ac-nav-search-icon {
  font-size: 32rpx;
  color: #666;
}
.ac-nav-add {
  font-size: 40rpx;
  color: #F97316;
  font-weight: 300;
  line-height: 1;
}

/* ---- 搜索展开条 ---- */
.ac-search-bar {
  display: flex;
  align-items: center;
  padding: 12rpx 28rpx 16rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}
.ac-search-input {
  flex: 1;
  height: 60rpx;
  background: #f5f5f5;
  border-radius: 30rpx;
  padding: 0 28rpx;
  font-size: 26rpx;
  color: #333;
}
.ac-search-cancel {
  font-size: 26rpx;
  color: #999;
  margin-left: 16rpx;
  flex-shrink: 0;
}

/* ---- Tab 药丸导航 ---- */
.ac-tabs {
  padding: 16rpx 28rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  position: sticky;
  z-index: 10;
}
.ac-tab-scroll {
  white-space: nowrap;
  display: flex;
}
.ac-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52rpx;
  padding: 0 28rpx;
  margin-right: 16rpx;
  font-size: 24rpx;
  color: #666;
  background: #f0f0f0;
  border-radius: 26rpx;
  border: 2rpx solid #f0f0f0;
  flex-shrink: 0;
  transition: all 0.2s;
}
.ac-tab.active {
  font-weight: 600;
}

/* ---- 滚动列表区域 ---- */
.ac-scroll {
  height: calc(100vh - 200rpx);
}

/* ---- 骨架屏 ---- */
.ac-skeleton-wrap { padding: 24rpx 28rpx; }
.sk-card {
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.sk-cover {
  height: 340rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.sk-body { padding: 24rpx; }
.sk-row {
  height: 22rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  border-radius: 6rpx;
  margin-bottom: 14rpx;
  animation: sk-shimmer 1.5s infinite;
}
.sk-tag { width: 20%; }
.sk-title { width: 65%; }
.sk-desc { width: 90%; }
.sk-footer { width: 40%; height: 18rpx; }
@keyframes sk-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---- 空状态 ---- */
.ac-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 240rpx;
}
.ac-empty-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 28rpx;
}
.ac-empty-text {
  font-size: 28rpx;
  color: #bbb;
}

/* ---- 文章卡片（新版） ---- */
.ac-feed {
  padding: 24rpx 28rpx;
}
.ac-card {
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  transition: transform 0.15s;
}
.ac-card-pressed {
  transform: scale(0.97);
  opacity: 0.9;
}
/* 封面 + 维度浮标 */
.ac-card-media {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.ac-card-cover {
  display: block;
  width: 100%;
  height: 340rpx;
  background: #f0f0f0;
}
.ac-card-dimension-tags {
  position: absolute;
  bottom: 12rpx;
  left: 16rpx;
  display: flex;
  gap: 8rpx;
}
.ac-card-dim-tag {
  padding: 2rpx 14rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  color: #fff;
  font-weight: 500;
  line-height: 1.4;
}
/* 正文区 */
.ac-card-body {
  padding: 24rpx 24rpx 28rpx;
}
.ac-card-meta-top {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.ac-card-category {
  font-size: 20rpx;
  color: #F97316;
  background: rgba(249,115,22,0.08);
  padding: 2rpx 14rpx;
  border-radius: 8rpx;
  margin-right: 16rpx;
}
.ac-card-readtime {
  font-size: 20rpx;
  color: #aaa;
}
.ac-card-title {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.45;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ac-card-summary {
  display: block;
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ac-card-footer {
  display: flex;
  align-items: center;
  font-size: 20rpx;
  color: #bbb;
}
.ac-card-author {
  color: #888;
}
.ac-card-sep {
  margin: 0 10rpx;
  color: #ddd;
}
.ac-card-date {
  flex: 1;
}
.ac-card-fav {
  color: #ccc;
}
.ac-card-readcount {
  color: #ccc;
}

/* ---- 加载更多 / 没有更多 ---- */
.ac-loading-more,
.ac-no-more {
  text-align: center;
  padding: 30rpx;
}
.ac-loading-text {
  font-size: 24rpx;
  color: #bbb;
}
.ac-no-more-text {
  font-size: 24rpx;
  color: #ddd;
}
.ac-bottom-gap {
  height: 140rpx;
}

/* ---- 浮动发布按钮 ---- */
.ac-fab {
  position: fixed;
  right: 36rpx;
  bottom: 100rpx;
  width: 96rpx;
  height: 96rpx;
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 20rpx rgba(249,115,22,0.35);
  z-index: 100;
}
.ac-fab:active {
  transform: scale(0.92);
  opacity: 0.85;
}
.ac-fab-icon {
  font-size: 48rpx;
  font-weight: 300;
  line-height: 1;
}
</style>