first commit

pages/index/index.vue

@@ -3,21 +3,37 @@
     <!-- 顶部固定栏 (使用 padding-top 避开状态栏) -->
     <view class="header-section" :style="{ paddingTop: statusBarHeight + 'px' }">
       <view class="header-content">
-        <view class="header-texts">
-          <text class="title">全民评分</text>
-          <text class="subtitle">看看全国网友怎么评分</text>
-        </view>
         <image
           class="user-avatar"
           :src="userInfo.avatarUrl || '/static/images/default-avatar.png'"
           mode="aspectFill"
           @tap="handleLogin"
         />
+        <view class="header-texts">
+          <text class="title">全民评分</text>
+          <text class="subtitle">看看全国网友怎么评分</text>
+        </view>
       </view>
+
+      <!-- 顶部切换 tab -->
+      <scroll-view class="category-tabs" scroll-x :show-scrollbar="false">
+        <view class="tabs-wrapper">
+          <view 
+            class="tab-item" 
+            :class="{ active: currentCategory === index }"
+            v-for="(category, index) in categories" 
+            :key="index"
+            @tap="switchCategory(index)"
+          >
+            <text class="tab-text">{{ category.name }}</text>
+            <view class="tab-line" v-if="currentCategory === index"></view>
+          </view>
+        </view>
+      </scroll-view>
     </view>
 
-    <!-- 占位，防止固定头部遮挡内容 -->
+    <!-- 占位，防止固定头部遮挡内容 (增加 tab 的高度) -->
-    <view :style="{ height: statusBarHeight + 60 + 'px' }"></view>
+    <view :style="{ height: statusBarHeight + 104 + 'px' }"></view>
 
     <!-- 列表内容 -->
     <view class="topic-list">
@@ -98,6 +114,37 @@ const userInfo = computed(() => userStore?.userInfo || {});
 
 const loading = ref(false);
 const hasMore = ref(true);
+const currentCategory = ref(0);
+
+const categories = ref([
+  { id: 0, name: '全部' },
+  { id: 1, name: '历史' },
+  { id: 2, name: '皇帝' },
+  { id: 3, name: '数码' },
+  { id: 4, name: '手机' },
+  { id: 5, name: '城市' },
+  { id: 6, name: '生活' },
+]);
+
+const switchCategory = (index) => {
+  if (currentCategory.value === index) return;
+  currentCategory.value = index;
+  // 切换分类时重新加载数据
+  topicList.value = [];
+  loading.value = true;
+  hasMore.value = true;
+  setTimeout(() => {
+    // 模拟根据分类筛选数据
+    const filteredData = mockData.filter(item => {
+      if (index === 0) return true;
+      const categoryName = categories.value[index].name;
+      return item.tags.includes(categoryName);
+    });
+    topicList.value = [...filteredData];
+    loading.value = false;
+    hasMore.value = filteredData.length >= 10 ? true : false;
+  }, 500);
+};
 
 const mockData = [
   {
@@ -240,7 +287,6 @@ onShareTimeline(async () => {
 
 .header-content {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   padding: 0 32rpx;
   height: 120rpx;
@@ -270,6 +316,53 @@ onShareTimeline(async () => {
   border-radius: 50%;
   border: 2rpx solid #fff;
   box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  margin-right: 24rpx; /* 头像在左边时，增加右侧间距 */
+}
+
+/* Tab 样式 */
+.category-tabs {
+  width: 100%;
+  white-space: nowrap;
+  height: 88rpx;
+}
+
+.tabs-wrapper {
+  display: inline-flex;
+  padding: 0 16rpx;
+  height: 100%;
+  align-items: center;
+}
+
+.tab-item {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24rpx;
+  height: 100%;
+  position: relative;
+}
+
+.tab-text {
+  font-size: 30rpx;
+  color: #666;
+  transition: all 0.3s ease;
+}
+
+.tab-item.active .tab-text {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #111;
+}
+
+.tab-line {
+  position: absolute;
+  bottom: 12rpx;
+  width: 32rpx;
+  height: 6rpx;
+  background-color: #2953ff;
+  border-radius: 4rpx;
+  transition: all 0.3s ease;
 }
 
 .topic-list {